Issue #841: Native AMP audio and video playlists. #954

kienstra · 2018-02-11T23:35:10Z

This WIP pull request adds a custom shortcode handler for video playlists. It uses <amp-video> and <amp-state>, on Weston's suggestion.

Here's a screencast. It uses much of the same markup as the native shortcode, so it appears styled when adding wp-mediaelement.min.css.

Fixes #841.

Create a custom shortcode handler for video playlists. Use <amp-video> and <amp-state>, on Weston't suggestion. This still doesn't support audio playlists.

Before, test_shortcode() used test files from Core. But these did not exist in 4.7, and caused a failure. So create new mock files to test.

Use an <amp-carousel>, As <amp-bind> doesn't work with <amp-audio>. Abstract common logic into helper methods. This mainly allows using styling from wp-mediaelement.css. But there are 4 rules needed to correct the styling.

kienstra · 2018-02-13T04:09:56Z

Audio Playlist Support, Screencast

This commit adds support for 'audio' playlists. Here's a screencast.

This uses an <amp-carousel>, as <amp-bind> doesn't work with <amp-audio>.

This looks similar to the Core playlist, after pasting wp-mediaelement.css into the dev tools' 'inspector-stylesheet.' But these rules are also needed:

.wp-playlist .wp-playlist-current-item img {
    margin-right: 0;
}
.wp-playlist .wp-playlist-current-item amp-img {
    float: left;
    margin-right: 10px;
}
.wp-playlist audio {
    display: block;
}

Those rules aren't included in this PR, nor is wp-mediaelement.css.

westonruter · 2018-02-13T19:14:18Z

@kienstra for the styles I suggest putting it into a CSS file and then enqueueing it. The preprocessor/sanitizer will automatically concatenate it into style[amp-custom]. Actually, whatever styles are included in the default stylesheet you can just enqueue the stylesheet. It'll get concatenated. And when we do the tree shaking of the CSS then it will automatically remove what we don't need.

The video and audio playlist need 'wp-mediaelement.' And the audio playlist needs a simple custom stylesheet. Use the action 'wp_enqueue_scripts,' instead of 'wp_playlist_script.' That enqueues too late. Also, update the tests.

kienstra · 2018-02-14T22:47:30Z

Thanks, Enqueued Stylesheets

Hi @westonruter,
Thanks for your suggestions. This commit enqueues wp-mediaelement.min.css, and a custom stylesheet for 'audio' playlists.

It looks like with the theme style.css, there aren't enough KB left on the page to print it. But that might be handled when we remove the needless style rules, which you referred to above.

<!--Skipped including https://local.plug/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=4.9.2 stylesheet since too large.-->

kienstra · 2018-02-14T22:49:54Z

includes/embeds/class-amp-playlist-embed-handler.php

@@ -57,7 +64,8 @@ class AMP_Playlist_Embed_Handler extends AMP_Base_Embed_Handler {
 	 * Registers the playlist shortcode.
 	 */
 	public function register_embed() {
-		add_shortcode( 'playlist', array( $this, 'shortcode' ) );
+		add_shortcode( self::SHORTCODE, array( $this, 'shortcode' ) );
+		add_action( 'wp_enqueue_scripts', array( $this, 'styling' ) );


This uses wp_enqueue_scripts, instead of wp_playlist_script. That enqueues too late.

westonruter · 2018-02-15T08:30:31Z

includes/embeds/class-amp-playlist-embed-handler.php

+			foreach ( $this->data['tracks'] as $index => $track ) {
+				$title = $this->get_title( $track );
+				if ( 'audio' === $type ) {
+					$on         = 'tap:AMP.setState({' . $container_id . ': {selectedSlide: ' . $i . '}})';


We should use wp_json_encode() here:

- $on = 'tap:AMP.setState({' . $container_id . ': {selectedSlide: ' . $i . '}})'; + $on = 'tap:AMP.setState(' . wp_json_encode( array( $container_id => array( 'selectedSlide' => $i ) ) ) . ')';

Thanks, this commit uses wp_json_encode().

westonruter · 2018-02-15T08:33:54Z

includes/embeds/class-amp-playlist-embed-handler.php

+				}
+
+				?>
+				<div class="wp-playlist-item" [class]="<?php echo isset( $item_class ) ? esc_attr( $item_class ) : ''; ?>">


I think it is better to do echo esc_attr( isset( $item_class ) ? $item_class : '' );

See other such cases in this PR.

Thanks, this commit moves the ternary conditionals inside the escaping functions.

westonruter · 2018-02-15T08:36:47Z

includes/embeds/class-amp-playlist-embed-handler.php

+						<div class="wp-playlist-current-item">
+							<amp-img src="<?php echo esc_url( $image_url ); ?>" height="<?php echo esc_attr( $image_height ); ?>" width="<?php echo esc_attr( $image_width ); ?>"></amp-img>
+							<div class="wp-playlist-caption">
+								<span class="wp-playlist-item-meta wp-playlist-item-title"><?php echo isset( $title ) ? esc_html( $title ) : ''; ?></span>


The $title is always going to be set since get_title returns a string. No need for the isset check.

The commit from above also removes the isset() check for $title.

westonruter · 2018-02-15T08:38:34Z

includes/embeds/class-amp-playlist-embed-handler.php

+	 */
+	public function audio_playlist() {
+		if ( ! isset( $this->data['tracks'] ) ) {
+			return;


The method is declared as returning a string, so this should return an empty string not void.

This commit returns an empty string inside that conditional.

westonruter · 2018-02-15T08:39:00Z

includes/embeds/class-amp-playlist-embed-handler.php

+	 * This uses similar markup to the native playlist shortcode output.
+	 * So the styles from wp-mediaelement.min.css will apply to it.
+	 *
+	 * @global content_width.


Should be:

- @global content_width. + @global int $content_width

Thanks, this commit corrects the DocBlock.

westonruter · 2018-02-15T08:58:51Z

includes/embeds/class-amp-playlist-embed-handler.php

+	 */
+	public function styling() {
+		global $post;
+		if ( ! isset( $post->post_content ) || ! has_shortcode( $post->post_content, self::SHORTCODE ) ) {


This conditional can be removed if styling is called from inside the playlist method.

Hi @westonruter,
It'd be good to remove this conditional. I'll do this if I can figure out the issue that we're discussing above.

westonruter · 2018-02-15T08:59:49Z

includes/embeds/class-amp-playlist-embed-handler.php

+					$image_url        = isset( $track['thumb']['src'] ) ? esc_url( $track['thumb']['src'] ) : '';
+					$thumb_dimensions = $this->get_thumb_dimensions( $track );
+					$image_height     = isset( $thumb_dimensions['height'] ) ? $thumb_dimensions['height'] : '';
+					$image_width      = isset( $thumb_dimensions['width'] ) ? $thumb_dimensions['width'] : '';


The width and height must be defined in AMP, so if it is not available then we need to supply a fallback.

Thanks, this commit sets a default width and height for the thumbnails. These are based on the defaults in wp_playlist_shortcode().

westonruter · 2018-02-15T09:04:55Z

includes/embeds/class-amp-playlist-embed-handler.php

+	 *
+	 * @var string.
+	 */
+	const PLAYLIST_REGEX = '/(?s)\<script [^>]* class="wp-playlist-script"\>[^<]*?(.*).*?\<\/script\>/';


I don't think this regex is quite right. This should be more robust:

const PLAYLIST_REGEX = ':<script type="application/json" class="wp-playlist-script">(.+?)</script>:s';

Thanks, this commit applies your regex.

westonruter · 2018-02-15T09:08:57Z

includes/embeds/class-amp-playlist-embed-handler.php

+	 * @return void.
+	 */
+	public function unregister_embed() {
+		remove_shortcode( self::SHORTCODE );


I think the other examples of embeds in the plugin aren't quite right in how they call remove_shortcode(). This should actually be restoring the previous shortcode that was added. So in the register_embed method instead of:

add_shortcode( self::SHORTCODE, array( $this, 'shortcode' ) );

It should do:

global $shortcode_tags; if ( shortcode_exists( self::SHORTCODE ) ) { $this->removed_shortcode = $shortcode_tags[ self::SHORTCODE ]; } add_shortcode( self::SHORTCODE, array( $this, 'shortcode' ) );

And then in unregister_embed it should do:

add_shortcode( self::SHORTCODE, $this->removed_shortcode );

Thanks, this commit applies your suggestion of restoring the shortcode before register_embed() changed it.

westonruter · 2018-02-15T09:09:12Z

includes/embeds/class-amp-playlist-embed-handler.php

+	/**
+	 * Unregisters the playlist shortcode.
+	 *
+	 * @return void.


The period shouldn't be used here. A period should only appear after a description when it is provided, for example:

@return int The count.

See examples https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/php/

Thanks, this commit removes that extra period.

At Weston's suggestion. This is easier to understand.

Before, the output was only escaped if the value was set. Also, remove the isset() check for $title. As Weston mentioned, this is always a string.

Inside a conditional, return an empty string. As Weston mentioned, the PHP DocBlock indicates a string return value. Also, add an assertion for this. And correct the documentation of 'content_width.'

@westonruter

Props @westonruter for the new regex. Also, remove periods from '@return void.'

On Weston's suggestion. This function should return the shortcode to the state before this embed handler changed it. So it stores the previous callback in $removed_shortcode. And it adds that callback in remove_embed().

As Weston mentioned, the DocBlock indicates an array(). So return an empty array instead of void.

This should always be present. @see wp_playlist_shortcode().

Audio playlists have thumbnail images. If the height and width aren't defined in $data, Set fallbacks. These are based on the fallback heights in: wp_playlist_shortcode().

kienstra · 2018-02-15T21:55:49Z

Applied Or Responded To Suggestions

Hi @westonruter,
Thanks a lot for reviewing this. I applied all of your points but 2, and replied to those.

The playlist is actually a carousel, as it's not possible to use <amp-bind>. But that doesn't match native WP UI. So remove the buttons that go other carousel items. One can click the tracks to go to another track.

* Restore wp_print_head_scripts and wp_print_footer_scripts. * Return associative array instead of positional array in get_thumb_dimensions. * Further clean phpdoc.

…ut anyway * Remove script output by wp_comment_form_unfiltered_html_nonce(). * Remove wp-embed script enqueued by wp_oembed_add_host_js().

westonruter · 2018-02-17T23:43:10Z

includes/embeds/class-amp-playlist-embed-handler.php

+		?>
+		<div class="wp-playlist wp-video-playlist wp-playlist-light">
+			<amp-state id="<?php echo esc_attr( $playlist ); ?>">
+				<script type="application/json"><?php echo wp_unslash( wp_json_encode( $amp_state ) ); // WPCS: XSS ok. ?></script>


Note that wp_unslash() isn't right here. If you want to not have slashes in the output, you should use JSON_UNESCAPED_SLASHES. Otherwise, the slashes are important for security since it ensures that if a string contains </script> it will get output as <\/script> and prevented from breaking out of the scriptl

I'm amending the PR.

westonruter · 2018-02-17T23:51:02Z

I'm seeing warnings in the console, including:

ampPlaylistCarousel0 is not defined; returning null.
Cannot read property "selectedSlide" of "selectedSlide"; returning null.
Default value for <DIV [class]="0 == playlist1.currentVideo ? "wp-playlist-item wp-playlist-playing" : "wp-playlist-item""> does not match first result (wp-playlist-item wp-playlist-playing). We recommend writing expressions with matching default values, but this can be safely ignored if intentional.

…dd/841-amp-video-playlist

Ryan Kienstra added 3 commits February 11, 2018 13:54

Issue #841: Native AMP video playlists.

00a3f08

Create a custom shortcode handler for video playlists. Use <amp-video> and <amp-state>, on Weston't suggestion. This still doesn't support audio playlists.

Issue #841: Remove dependence on test files.

8140a40

Before, test_shortcode() used test files from Core. But these did not exist in 4.7, and caused a failure. So create new mock files to test.

Issue #841: Add audio playlist shortcode support.

cddce46

Use an <amp-carousel>, As <amp-bind> doesn't work with <amp-audio>. Abstract common logic into helper methods. This mainly allows using styling from wp-mediaelement.css. But there are 4 rules needed to correct the styling.

Issue #841: Align @param descriptions in PHP DocBlock.

f19c281

kienstra changed the title ~~[WIP] Issue #841: Native AMP video playlists.~~ Issue #841: Native AMP video playlists. Feb 13, 2018

kienstra mentioned this pull request Feb 14, 2018

#841 Improve support for default embeds #889

Merged

kienstra commented Feb 14, 2018

View reviewed changes

westonruter mentioned this pull request Feb 15, 2018

Update sanitization reporting #951

Merged

2 tasks

westonruter requested changes Feb 15, 2018

View reviewed changes

Ryan Kienstra added 8 commits February 15, 2018 11:43

Issue #841: Use wp_json_encode in 'on' attribute.

78f7368

At Weston's suggestion. This is easier to understand.

Issue #841: Move ternaary conditionals inside escaping functions.

ccc066d

Before, the output was only escaped if the value was set. Also, remove the isset() check for $title. As Weston mentioned, this is always a string.

Issue #841: Empty string return in audio_playlist().

aba8cf1

Inside a conditional, return an empty string. As Weston mentioned, the PHP DocBlock indicates a string return value. Also, add an assertion for this. And correct the documentation of 'content_width.'

Issue #841: Improve the PLAYLIST_REGEX.

f13d2ad

Props @westonruter for the new regex. Also, remove periods from '@return void.'

Issue #841: Make remove_embed() add previous shortcode.

d3cc386

On Weston's suggestion. This function should return the shortcode to the state before this embed handler changed it. So it stores the previous callback in $removed_shortcode. And it adds that callback in remove_embed().

Issue #841: Return an array() inside the conditional.

1b07e90

As Weston mentioned, the DocBlock indicates an array(). So return an empty array instead of void.

Issue #841: Remove isset() check for $track['src'].

168b9ba

This should always be present. @see wp_playlist_shortcode().

Issue #841: Set a default height and width for 'audio.'

7cae35c

Audio playlists have thumbnail images. If the height and width aren't defined in $data, Set fallbacks. These are based on the fallback heights in: wp_playlist_shortcode().

Ryan Kienstra and others added 5 commits February 15, 2018 16:04

Issue #841: Remove the carousel buttons fro 'audio' playlist.

d01e9ea

The playlist is actually a carousel, as it's not possible to use <amp-bind>. But that doesn't match native WP UI. So remove the buttons that go other carousel items. One can click the tracks to go to another track.

Issue #841: Align equals signs to prevent Travis error.

e08bc8b

Enqueue playlist styles just-in-time when used

b093c85

* Restore wp_print_head_scripts and wp_print_footer_scripts. * Return associative array instead of positional array in get_thumb_dimensions. * Further clean phpdoc.

Prevent playlist scripts from being enqueued which will be stripped o…

b9d9f09

…ut anyway * Remove script output by wp_comment_form_unfiltered_html_nonce(). * Remove wp-embed script enqueued by wp_oembed_add_host_js().

Eliminate use of data member var in favor of passing as function arg

365af92

westonruter approved these changes Feb 17, 2018

View reviewed changes

westonruter reviewed Feb 17, 2018

View reviewed changes

westonruter added 2 commits February 18, 2018 03:52

Fix AMP warnings regarding initial states and values

d94888d

Merge branch 'develop' of https://github.com/Automattic/amp-wp into a…

13370ed

…dd/841-amp-video-playlist

westonruter changed the title ~~Issue #841: Native AMP video playlists.~~ Issue #841: Native AMP audio and video playlists. Feb 18, 2018

westonruter added this to the v0.7 milestone Feb 18, 2018

westonruter merged commit fe5b33b into develop Feb 18, 2018

westonruter deleted the add/841-amp-video-playlist branch February 18, 2018 03:39

westonruter mentioned this pull request Mar 7, 2018

Support for playlist shortcode #415

Closed

philipjohn mentioned this pull request Jul 24, 2018

Playlist shortcode support #1279

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue #841: Native AMP audio and video playlists. #954

Issue #841: Native AMP audio and video playlists. #954

kienstra commented Feb 11, 2018 •

edited by westonruter

kienstra commented Feb 13, 2018 •

edited

westonruter commented Feb 13, 2018

kienstra commented Feb 14, 2018 •

edited

kienstra Feb 14, 2018 •

edited

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018 •

edited

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

westonruter Feb 15, 2018

kienstra Feb 15, 2018

kienstra commented Feb 15, 2018 •

edited

westonruter Feb 17, 2018

westonruter commented Feb 17, 2018

Issue #841: Native AMP audio and video playlists. #954

Issue #841: Native AMP audio and video playlists. #954

Conversation

kienstra commented Feb 11, 2018 • edited by westonruter

kienstra commented Feb 13, 2018 • edited

westonruter commented Feb 13, 2018

kienstra commented Feb 14, 2018 • edited

kienstra Feb 14, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra Feb 15, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Feb 15, 2018 • edited

Choose a reason for hiding this comment

westonruter commented Feb 17, 2018

kienstra commented Feb 11, 2018 •

edited by westonruter

kienstra commented Feb 13, 2018 •

edited

kienstra commented Feb 14, 2018 •

edited

kienstra Feb 14, 2018 •

edited

kienstra Feb 15, 2018 •

edited

kienstra commented Feb 15, 2018 •

edited