Preserve seek time and other parameters to `amp-youtube` from YouTube embeds #6423

dhaval-parekh · 2021-06-24T10:18:03Z

Summary

Fixes #4518

Checklist

My code is tested and passes existing tests.
My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

github-actions · 2021-06-24T10:22:53Z

Plugin builds for da36d2d are ready 🛎️!

Download development build
Download production build

westonruter · 2021-06-25T04:01:24Z

There are additional parameters which the embed API supports: https://developers.google.com/youtube/player_parameters

For example, if you add a “raw embed” via the Custom HTML block with:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0zM3nApSvMg?controls=0&amp;autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

This should result in an amp-youtube element being added with data-param-controls="0" and data-param-autoplay="1".

I think any query parameters on the YouTube embed URL should be copied to data-pram-* attributes: https://amp.dev/documentation/components/amp-youtube/#data-param-*

For the YouTube Embed block specifically, it appears that only the start parameter is passed along in oEmbed requests. So this is only relevant to YouTube raw embeds.

Humm, but actually in looking at AMP_YouTube_Embed_Handler it doesn't actually implement the sanitize_raw_embeds method so these iframe video embeds are being passed through as amp-iframe elements instead of amp-youtube. So they work right now, but I think it would be better if we implemented sanitize_raw_embeds to convert these into amp-youtube.

westonruter · 2021-06-25T04:02:10Z

cc @pierlon for his thoughts on this since he's done a lot of work with embeds in the past

pierlon

Thanks for working on this @dhaval-parekh.

Left a few comments here that should help move this PR forward.

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

pierlon

Looking good so far! Just a few comments and suggestions to be made.

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

pierlon · 2021-07-07T08:45:55Z

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

+
+			preg_match( $regex, $parsed_url['fragment'], $matches );
+
+			if ( ! empty( $matches ) ) {


Or alternatively (to make sure the match groups do indeed exist):

Suggested change

if ( ! empty( $matches ) ) {

if ( isset( $matches['minutes'], $matches['seconds'] ) ) {

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

pierlon · 2021-07-07T08:59:10Z

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

+	 */
+	public function process_embed( Document $dom, $html, $url ) {
+
+		$id = $this->get_video_id_from_url( $url );


I just realized the AMP component can also [accept a YouTube channel id](Youtube channel id), so we need to provide support for that as well. So if there is no video ID, then check for a live channel ID.

From the docs:

For example, in this URL: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, UCB8Kb4pxYzsDsHxzBfnid4Q is the channel id. You can provide a data-live-channelid instead of a data-videoid attribute to embed a stable url for a live stream instead of a video.

@pierlon I have added support for live streaming channels for iframe added as custom HTML markup.
However, WordPress by default does not provide support for embedding YouTube URLs (It will just render as text)

If WordPress never supported it I think it's safe to say we don't have to either.

@pierlon I have added support for live streaming channels for iframe added as custom HTML markup.

I tried this but it parsed an incorrect video ID. Eg:

<iframe src="https://www.youtube.com/embed/live_stream?channel=12345" allowfullscreen="" width="560" height="315"></iframe>

Gives:

<amp-youtube data-videoid="live_stream" layout="responsive" width="560" height="315" data-param-channel="12345" ...</amp-youtube>

Instead, the data-videoid attribute should not have been set, nor the data-param-channel attribute. Perhaps we could add a condition to say if the parsed video ID is live_stream then it's invalid and bail.

Have addressed this issue.

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

pierlon · 2021-07-08T07:29:09Z

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

+		$iframe_props = [ 'title', 'height', 'width' ];
+		$props        = $this->match_element_attributes( $html, 'iframe', $iframe_props );
+		foreach ( $iframe_props as $iframe_prop ) {
+			if ( ! empty( $props[ $iframe_prop ] ) ) {
+				$attributes[ $iframe_prop ] = $props[ $iframe_prop ];
+			}
 		}


This could be moved to the prepare_attributes() method as it seems more relevant there.

These three attributes parse differently in render() (from HTML markup) and in get_amp_component() (from DOMElement). That is a reason it's parse saperatlly.

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

pierlon · 2021-09-02T15:00:09Z

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

+			$attributes
+		);
+
+		if ( ! empty( $amp_node ) && is_a( $amp_node, '\DOMElement' ) ) {


Suggested change

if ( ! empty( $amp_node ) && is_a( $amp_node, '\DOMElement' ) ) {

if ( ! empty( $amp_node ) && $amp_node instanceof Element ) {

pierlon

Thanks for your hard work on this @dhaval-parekh, passing this on to @westonruter for final review.

westonruter

@dhaval-parekh A few tests are failing. It seems just the expected link in the text data needs to be updated.

westonruter · 2021-09-08T23:53:14Z

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

+				continue;
+			}
+
+			$attributes[ sanitize_key( "data-param-$key" ) ] = esc_attr( $value );


Escaping shouldn't be done here because the returned attributes array may be sent into the DOM directly, in which case the escaping will be duplicated.

Suggested change

$attributes[ sanitize_key( "data-param-$key" ) ] = esc_attr( $value );

$attributes[ sanitize_key( "data-param-$key" ) ] = $value;

Use original YouTube URL as placeholder when sanitizing raw embed Fix phpcs alignment warning Use constant instead of member variable Let Document::fromNode() obtain the ownerDocument Deduplicate iframe_props into constant

westonruter · 2021-09-09T16:33:33Z

@dhaval-parekh The phpstan ignores that you added caused errors for me locally in the same way as they caused build failures on GHA. So I reverted them in 3ecad1e. It may be that you have a stale copy of phpstan. I have v0.12.76 (humm, which is also stale). I thought that composer clear-cache && composer install would get the latest version, but it didn't work for me. So you can do this instead: rm vendor/bin/phpstan && composer install.

westonruter · 2021-09-09T16:35:59Z

Er, when I upgrade to 0.12.98 then I get errors:

 ------ -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  Line   includes/embeds/class-amp-twitter-embed-handler.php
 ------ -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  24     PHPDoc type int|string of property AMP_Twitter_Embed_Handler::$DEFAULT_WIDTH is not covariant with PHPDoc type int of overridden property AMP_Base_Embed_Handler::$DEFAULT_WIDTH.
         💡 You can fix 3rd party PHPDoc types with stub files:
            https://phpstan.org/user-guide/stub-files
 ------ -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 ------ ---------------------------------------------------
  Line   src/BackgroundTask/MonitorCssTransientCaching.php
 ------ ---------------------------------------------------
  112    No error to ignore is reported on line 112.
 ------ ---------------------------------------------------

So apparently GitHub's copy is stale and you were on the latest version.

This reverts commit 7f21703.

pierlon · 2021-09-09T17:58:03Z

@westonruter As an alternative, might I suggest installing PHPStan from the shivammathur/setup-php GHA? Not providing a version for phpstan via that GHA should download the latest version. It should look something like:

diff --git a/.github/workflows/build-test-measure.yml b/.github/workflows/build-test-measure.yml
--- a/.github/workflows/build-test-measure.yml	(revision 08017ae8e1da05ae8e445e51807610e4e5365599)
+++ b/.github/workflows/build-test-measure.yml	(date 1631210205414)
@@ -214,6 +214,7 @@
           # phpstan requires PHP 7.1+.
           php-version: 7.4
           extensions: dom, iconv, json, libxml, zip
+          tools: phpstan
 
       - name: Get Composer Cache Directory
         id: composer-cache
@@ -231,7 +232,7 @@
         run: composer install
 
       - name: Static Analysis (PHPStan)
-        run: vendor/bin/phpstan analyse
+        run: phpstan analyse
 
 #-----------------------------------------------------------------------------------------------------------------------

Co-authored-by: Pierre Gordon <[email protected]>

…onvert to link

…vided

westonruter · 2021-09-09T22:24:30Z

💥

westonruter

Whew! This was a deceptively complicated one!

westonruter added the Embeds label Jun 25, 2021

dhaval-parekh force-pushed the bug/4518-amp-youtube-component branch from 463ceb7 to b477337 Compare June 29, 2021 13:57

dhaval-parekh requested review from pierlon and westonruter June 29, 2021 14:14

pierlon suggested changes Jun 29, 2021

View reviewed changes

dhaval-parekh force-pushed the bug/4518-amp-youtube-component branch from 7a31e69 to cf81afa Compare July 1, 2021 07:11

dhaval-parekh requested a review from pierlon July 1, 2021 15:25

pierlon suggested changes Jul 7, 2021

View reviewed changes

pierlon suggested changes Jul 8, 2021

View reviewed changes

pierlon reviewed Jul 8, 2021

View reviewed changes

includes/embeds/class-amp-youtube-embed-handler.php Outdated Show resolved Hide resolved

dhaval-parekh force-pushed the bug/4518-amp-youtube-component branch from d9faed3 to 9728368 Compare July 9, 2021 11:58

dhaval-parekh self-assigned this Jul 21, 2021

dhaval-parekh force-pushed the bug/4518-amp-youtube-component branch from 9728368 to 8c97e14 Compare July 21, 2021 10:25

dhaval-parekh requested a review from pierlon July 21, 2021 10:25

pierlon reviewed Sep 2, 2021

View reviewed changes

pierlon approved these changes Sep 2, 2021

View reviewed changes

pierlon added this to the v2.2 milestone Sep 2, 2021

westonruter reviewed Sep 9, 2021

View reviewed changes

dhaval-parekh added 9 commits September 9, 2021 13:51

Transfer seek time to AMP youtube component from youtube url

2b00609

Add php unit test cases

d5f56f7

Convert youtube iframe into amp-youtube

080ded2

Add additional data params for amp-youtube components

a4e3290

Add unit test case for youtube embeds

2e47705

Fix the issues from unit test cases

55fff1f

Fix the issues from unit test cases

e5fba98

Use type casting instead of intval()

92ab4be

Add inline comments, remove unwanted code

e9ad832

dhaval-parekh and others added 3 commits September 9, 2021 14:53

Sanitize attribute name

3ecad1e

Use original YouTube URL as placeholder when sanitizing raw embed Fix phpcs alignment warning Use constant instead of member variable Let Document::fromNode() obtain the ownerDocument Deduplicate iframe_props into constant

update unit test cases

74dfcb8

Revert phpstan ignores

7f21703

westonruter added 6 commits September 9, 2021 10:16

Try adding phpstan version to composer cache key

2c3ed4d

Revert "Revert phpstan ignores"

d519220

This reverts commit 7f21703.

Print phpstan version when running on GHA

0524ae5

Try removing phpstan before composer install

b9827d7

Fix yml syntax error

fa6ee15

Try downloading a specific version of phpstan instead of latest

f93b9a1

westonruter and others added 11 commits September 9, 2021 11:05

Try installing phpstan via shivammathur/setup-php

9d51ef4

Co-authored-by: Pierre Gordon <[email protected]>

Fix issues identified by phpstan

9d8e977

Give more explicit array phpdoc type

8200f3f

Remove unreachable code

edbcc6f

Opt to pass-through iframe for unrecognized YouTube URL rather than c…

32f358a

…onvert to link

Remove condition which cannot be reached since video ID is always pro…

1907df3

…vided

Use coversDefaultClass

aac0e40

Prevent generating closing IMG tags

d983fa4

Let placeholder link point to YouTube permalink and not iframe src

9eefef9

Fix adding start to placeholder link; improve coverage

46bc356

Make placeholder dependency on video ID more explicit

da36d2d

westonruter changed the title ~~Transfer seek time to AMP youtube component from youtube URL.~~ Preserve seek time and other parameters to amp-youtube from YouTube embeds Sep 9, 2021

westonruter approved these changes Sep 9, 2021

View reviewed changes

westonruter merged commit deba08a into develop Sep 9, 2021

westonruter deleted the bug/4518-amp-youtube-component branch September 9, 2021 22:25

westonruter mentioned this pull request Sep 9, 2021

Highlight AMP-compatible themes and plugins in admin #6597

Merged

2 tasks

westonruter added the Changelogged Whether the issue/PR has been added to release notes. label Dec 14, 2021


		preg_match( $regex, $parsed_url['fragment'], $matches );

		if ( ! empty( $matches ) ) {

	if ( ! empty( $matches ) ) {
	if ( isset( $matches['minutes'], $matches['seconds'] ) ) {

	if ( ! empty( $amp_node ) && is_a( $amp_node, '\DOMElement' ) ) {
	if ( ! empty( $amp_node ) && $amp_node instanceof Element ) {

	$attributes[ sanitize_key( "data-param-$key" ) ] = esc_attr( $value );
	$attributes[ sanitize_key( "data-param-$key" ) ] = $value;

Preserve seek time and other parameters to amp-youtube from YouTube embeds #6423

Preserve seek time and other parameters to amp-youtube from YouTube embeds #6423

Uh oh!

Conversation

dhaval-parekh commented Jun 24, 2021

Summary

Checklist

Uh oh!

github-actions bot commented Jun 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

westonruter commented Jun 25, 2021

Uh oh!

westonruter commented Jun 25, 2021

Uh oh!

pierlon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pierlon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pierlon left a comment

Choose a reason for hiding this comment

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter commented Sep 9, 2021

Uh oh!

westonruter commented Sep 9, 2021

Uh oh!

pierlon commented Sep 9, 2021

Uh oh!

westonruter commented Sep 9, 2021

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Preserve seek time and other parameters to `amp-youtube` from YouTube embeds #6423

Preserve seek time and other parameters to `amp-youtube` from YouTube embeds #6423

github-actions bot commented Jun 24, 2021 •

edited

Loading