Add embed handler for gfycat. #1136

miina · 2018-05-09T13:56:26Z

No description provided.

miina · 2018-05-09T15:22:38Z

tests/test-class-amp-gfycat-embed-handler.php

+	 */
+	public function test__conversion( $source, $expected ) {
+		if ( ( version_compare( get_bloginfo( 'version' ), '4.9', '<' ) ) ) {
+			$this->markTestSkipped( 'Gfycat is not supported in this WP version.' );


Added skipping tests since it looked like amp-iframe was not created in WP 4.8 and WP 4.7 and some tests failed, however, after testing locally, not sure it's related to WP version. Thought that perhaps the tests failed due to PHP version. Any thoughts on what might fail, could wp_parse_url used here differ in previous versions?

Hi @miina, good question.

Could you try adding this part of the setUp method from AMP_SoundCloud_Embed_Test to AMP_Gfycat_Embed_Test?

That worked in the testing PR #1138 that I opened, even without $this->markTestSkipped().

The failed build that you linked to used WordPress version 4.7. When I set my local to that version, the test here failed (without any modification). Strangely, the code works fine on the front-end. Just not in the tests in that case.

kienstra

Looks Good, A Few Points

Hi @miina,
Thanks, the code looks really good. I responded to your question about the tests, and made a comment about the layout.

But this looks good, and is pretty close to being ready to merge.

kienstra · 2018-05-09T20:17:58Z

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

+	/**
+	 * Regex matched to produce output amp-gfycat.
+	 *
+	 * @const string


Strangely, even constants should have a @var tag. I just recently learned this. But it's not a blocker.

kienstra · 2018-05-09T20:18:40Z

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

+	}
+
+	/**
+	 * Filter oEmbed HTML for Meetup to prepare it for AMP.


Should this be for Gfycat?

kienstra · 2018-05-09T21:16:36Z

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

+					'width'      => $attr['width'],
+					'height'     => $attr['height'],
+					'data-gfyid' => $data_gfyid,
+					'layout'     => 'responsive',


How about a layout of intrinsic here? That layout is like responsive, in that it expands to the size of its container.

But it always has at least the dimensions in the width and height.

When left or right-aligning the Embed block, this <amp-gfycat> gets wrapped in a <figure>.

But that <figure> doesn't look to have width or height of its own, so the layout="responsive" value causes the <amp-gfycat> to not appear.

With layout="intrinsic", the element appears:

We're already using layout="intrinsic" as defaults for <amp-img> and <amp-iframe>

kienstra · 2018-05-10T01:09:52Z

tests/test-class-amp-gfycat-embed-handler.php

+	 */
+	public function test__conversion( $source, $expected ) {
+		if ( ( version_compare( get_bloginfo( 'version' ), '4.9', '<' ) ) ) {
+			$this->markTestSkipped( 'Gfycat is not supported in this WP version.' );


Hi @miina, good question.

Could you try adding this part of the setUp method from AMP_SoundCloud_Embed_Test to AMP_Gfycat_Embed_Test?

That worked in the testing PR #1138 that I opened, even without $this->markTestSkipped().

The failed build that you linked to used WordPress version 4.7. When I set my local to that version, the test here failed (without any modification). Strangely, the code works fine on the front-end. Just not in the tests in that case.

miina · 2018-05-10T07:10:47Z

@kienstra Thanks for reviewing and taking the time to create a separate PR for the tests fix! The issues should be addressed now.

kienstra

Approved

Hi @miina,
Thanks, this looks good.

kienstra · 2018-05-10T16:40:08Z

Request To Merge

Hi @westonruter,
When you have a chance, could you please merge this pull request? @miina's work here looks good.

westonruter

This doesn't seem to work quite right for me. I went to https://gfycat.com/gifs/detail/WebbedBossyCollardlizard and I clicked on the share icon and got the URL https://gfycat.com/webbedbossycollardlizard

If I embed that URL into the non-AMP post then it is successfully embedded as an oEmbed. If I view the post in AMP, then it gets displayed as an amp-iframe instead of amp-gfycat as I'd expect.

westonruter · 2018-05-11T14:51:42Z

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

+	public function filter_embed_oembed_html( $return, $url, $attr ) {
+		$parsed_url = wp_parse_url( $url );
+		if ( false !== strpos( $parsed_url['host'], 'gfycat.com' ) ) {
+			if ( preg_match( '/width=(?:"|\')(\d+)(?:"|\')/', $return, $matches ) ) {


Might want to adjust this to be like '/width=["\']?(\d+)/' since the quote marks would be optional in HTML.

westonruter · 2018-05-11T14:52:28Z

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

+			}
+			if ( preg_match( '/height=(?:"|\')(\d+)(?:"|\')/', $return, $matches ) ) {
+				$attr['height'] = $matches[1];
+			}


Shouldn't this bail if the width and height are empty? In that case we wouldn't be able to build a valid amp-gfycat since the dimensions wouldn't be there.

Added checking for height within e1d29a8 and using fixed-height for layout if only width is missing.

westonruter · 2018-05-11T14:54:16Z

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

+				$attr['height'] = $matches[1];
+			}
+
+			$pieces = explode( '/detail/', $parsed_url['path'] );


This isn't taking into account the oEmbed URLs like https://gfycat.com/webbedbossycollardlizard

westonruter · 2018-05-11T15:39:00Z

I'm curious: the amp-iframe and the amp-gfycat components seemed to render exactly the same. Why is the amp-gfycat component even necessary?

miina · 2018-05-11T17:34:18Z

@westonruter This is an example output with amp-gfycat (with URL http://gfycat.com/gifs/detail/webbedbossycollardlizard, as you mentioned in comments there's an issue with the logic currently that expects the URL to be in format ...gfycat.com/gifs/detail/[ID], should allow gfycat.com/[ID], too.):

And this without:

Are you thinking that amp-gfycat isn't necessary at all since amp-iframe is already generated for gfycat and since there might be no difference for the user?

westonruter · 2018-05-11T20:29:15Z

Are you thinking that amp-gfycat isn't necessary at all since amp-iframe is already generated for gfycat and since there might be no difference for the user?

Right. I'm confused as to why the amp-gfycat component exists when an amp-iframe seems to work just as well? The main thing that it does is allow you to easily provide just a gfyid to construct the embed. Additionally, there is an noautoplay attribute which can be used but it merely adds an ? autoplay=0 to the iframe'd URL:

https://github.com/ampproject/amphtml/blob/04f3484ee0a4506a4cd205b373d7be3763d02649/extensions/amp-gfycat/0.1/amp-gfycat.js#L132-L136

That noautoplay attribute seems to be the main benefit here from a WordPress context, since gfycat isn't forwarding along the autoplay query parameter to the oEmbed response. But if not using oEmbed, then it could just be constructed with amp-iframe.

westonruter · 2018-05-11T20:31:06Z

Correction, it looks like the automatic addition of the placeholder is more of a key aspect of the component: https://github.com/ampproject/amphtml/blob/04f3484ee0a4506a4cd205b373d7be3763d02649/extensions/amp-gfycat/0.1/amp-gfycat.js#L84-L108

So yeah, I think we should go ahead with the custom handler you've worked on here. But it just needs to be finished off.

westonruter · 2018-05-19T06:25:36Z

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

+				return $return;
+			}
+
+			$layout = 'intrinsic';


This causes an AMP validation error:

The specified layout 'INTRINSIC' is not supported by tag 'amp-gfycat'.

miina added 2 commits May 9, 2018 16:51

Add support for gfycat.

ca88c0c

Add WP version check for tests.

e295c81

miina commented May 9, 2018

View reviewed changes

miina requested a review from kienstra May 9, 2018 15:22

kienstra mentioned this pull request May 10, 2018

[Don't Merge] Test using a setUp workaround for an embed handler #1138

Closed

kienstra suggested changes May 10, 2018

View reviewed changes

miina added 2 commits May 10, 2018 09:54

Fixes from review.

9cad8e6

Fix tests.

46edf1e

kienstra approved these changes May 10, 2018

View reviewed changes

kienstra assigned westonruter May 10, 2018

westonruter added this to the v1.0 milestone May 11, 2018

westonruter requested changes May 11, 2018

View reviewed changes

miina and others added 2 commits May 14, 2018 11:19

Fix detecting gfycat ID.

e1d29a8

Eliminate intrinsic layout from amp-gfycat since not allowed

db570af

westonruter reviewed May 19, 2018

View reviewed changes

westonruter approved these changes May 19, 2018

View reviewed changes

westonruter merged commit 370ca98 into develop May 19, 2018

westonruter deleted the add/gfycat-handler branch May 19, 2018 06:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add embed handler for gfycat. #1136

Add embed handler for gfycat. #1136

miina commented May 9, 2018

miina May 9, 2018

kienstra May 10, 2018 •

edited

Loading

kienstra left a comment

kienstra May 9, 2018

kienstra May 9, 2018

kienstra May 9, 2018 •

edited

Loading

kienstra May 10, 2018 •

edited

Loading

miina commented May 10, 2018

kienstra left a comment

kienstra commented May 10, 2018

westonruter left a comment

westonruter May 11, 2018

westonruter May 11, 2018

miina May 14, 2018

westonruter May 11, 2018

westonruter commented May 11, 2018

miina commented May 11, 2018 •

edited

Loading

westonruter commented May 11, 2018

westonruter commented May 11, 2018

westonruter May 19, 2018

Add embed handler for gfycat. #1136

Add embed handler for gfycat. #1136

Conversation

miina commented May 9, 2018

Choose a reason for hiding this comment

kienstra May 10, 2018 • edited Loading

Choose a reason for hiding this comment

kienstra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra May 9, 2018 • edited Loading

Choose a reason for hiding this comment

kienstra May 10, 2018 • edited Loading

Choose a reason for hiding this comment

miina commented May 10, 2018

kienstra left a comment

Choose a reason for hiding this comment

kienstra commented May 10, 2018

westonruter left a 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

westonruter commented May 11, 2018

miina commented May 11, 2018 • edited Loading

westonruter commented May 11, 2018

westonruter commented May 11, 2018

Choose a reason for hiding this comment

kienstra May 10, 2018 •

edited

Loading

kienstra May 9, 2018 •

edited

Loading

kienstra May 10, 2018 •

edited

Loading

miina commented May 11, 2018 •

edited

Loading