Skip to content

Commit

Permalink
✨Support <amp-dailymotion dock> (#20911)
Browse files Browse the repository at this point in the history
Component has great `VideoInterface` support, so `dock` can be supported without any kinks!
  • Loading branch information
alanorozco committed Feb 20, 2019
1 parent 5626226 commit 61741ce
Show file tree
Hide file tree
Showing 8 changed files with 97 additions and 2 deletions.
Expand Up @@ -60,5 +60,8 @@
<amp-dailymotion data-videoid="jx2m8pp" width="500" height="281"
data-ui-highlight="fff">
</amp-dailymotion>

<!-- invalid: dock without amp-video-docking extension -->
<amp-dailymotion data-videoid="x2m8jpp" width="500" height="281" dock></amp-dailymotion>
</body>
</html>
Expand Up @@ -67,5 +67,10 @@ amp-dailymotion/0.1/test/validator-amp-dailymotion.html:55:0 The attribute 'data
| <amp-dailymotion data-videoid="jx2m8pp" width="500" height="281"
| data-ui-highlight="fff">
| </amp-dailymotion>
|
| <!-- invalid: dock without amp-video-docking extension -->
| <amp-dailymotion data-videoid="x2m8jpp" width="500" height="281" dock></amp-dailymotion>
>> ^~~~~~~~~
amp-dailymotion/0.1/test/validator-amp-dailymotion.html:65:0 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript. [MANDATORY_AMP_TAG_MISSING_OR_INCORRECT]
| </body>
| </html>
| </html>
5 changes: 5 additions & 0 deletions extensions/amp-dailymotion/amp-dailymotion.md
Expand Up @@ -134,6 +134,11 @@ With responsive layout, the width and height from the example should yield corre
</ul>
<p>Please read <a href="https://developer.dailymotion.com/player#player-parameters">Dailymotion's video player documentation</a> to know more about parameters and options.</p></td>
</tr>
<tr>
<td width="40%"><strong>dock</strong></td>
<td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
For more details, see <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-video-docking/amp-video-docking.md">documentation on the docking extension itself.</a></td>
</tr>
<tr>
<td width="40%"><strong>common attributes</strong></td>
<td>This element includes <a href="https://www.ampproject.org/docs/reference/common_attributes">common attributes</a> extended to AMP components.</td>
Expand Down
Expand Up @@ -68,6 +68,10 @@ tags: { # <amp-dailymotion>
mandatory: true
value_regex_casei: "[a-z0-9]+"
}
attrs: {
name: "dock"
requires_extension: "amp-video-docking"
}
attr_lists: "extended-amp-global"
spec_url: "https://www.ampproject.org/docs/reference/components/amp-dailymotion"
amp_layout: {
Expand Down
@@ -0,0 +1,38 @@
<!--
Copyright 2019 The AMP HTML Authors. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS-IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the license.
-->
<!--
Test Description:
Tests for amp-video-docking tag with amp-dailymotion player.
-->
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-latest.js"></script>
<script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-latest.js"></script>
</head>
<body>
<!-- Valid: dock with `amp-dailymotion` and `amp-video-docking` extensions-->
<amp-dailymotion
dock
data-videoid="x2m8jpp" width="500" height="281">
</amp-dailymotion>
</body>
</html>
@@ -0,0 +1,39 @@
PASS
| <!--
| Copyright 2019 The AMP HTML Authors. All Rights Reserved.
|
| Licensed under the Apache License, Version 2.0 (the "License");
| you may not use this file except in compliance with the License.
| You may obtain a copy of the License at
|
| http://www.apache.org/licenses/LICENSE-2.0
|
| Unless required by applicable law or agreed to in writing, software
| distributed under the License is distributed on an "AS-IS" BASIS,
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
| See the License for the specific language governing permissions and
| limitations under the license.
| -->
| <!--
| Test Description:
| Tests for amp-video-docking tag with amp-dailymotion player.
| -->
| <!doctype html>
| <html ⚡>
| <head>
| <meta charset="utf-8">
| <link rel="canonical" href="./regular-html-version.html">
| <meta name="viewport" content="width=device-width,minimum-scale=1">
| <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
| <script async src="https://cdn.ampproject.org/v0.js"></script>
| <script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-latest.js"></script>
| <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-latest.js"></script>
| </head>
| <body>
| <!-- Valid: dock with `amp-dailymotion` and `amp-video-docking` extensions-->
| <amp-dailymotion
| dock
| data-videoid="x2m8jpp" width="500" height="281">
| </amp-dailymotion>
| </body>
| </html>
1 change: 1 addition & 0 deletions extensions/amp-video-docking/amp-video-docking.md
Expand Up @@ -63,6 +63,7 @@ This extension is used in conjunction with a [supported video player](../../spec
Currently, the supported players are:

- [`amp-brightcove`](https://www.ampproject.org/docs/reference/components/amp-brightcove)
- [`amp-dailymotion`](https://www.ampproject.org/docs/reference/components/amp-dailymotion)
- [`amp-ima-video`](https://www.ampproject.org/docs/reference/components/amp-ima-video)
- [`amp-video`](https://www.ampproject.org/docs/reference/components/amp-video)
- [`amp-video-iframe`](https://www.ampproject.org/docs/reference/components/amp-youtube)
Expand Down
2 changes: 1 addition & 1 deletion spec/amp-video-interface.md
Expand Up @@ -49,7 +49,7 @@ For an example, visit [AMP By Example](https://ampbyexample.com/components/amp-v
attribute: **`dock`**

This attribute is currently only supported for
`amp-brightcove`, `amp-ima-video`, `amp-video`, `amp-video-iframe` and `amp-youtube`.
`amp-brightcove`, `amp-dailymotion`, `amp-ima-video`, `amp-video`, `amp-video-iframe` and `amp-youtube`.

If this attribute is present and the video is playing manually, the video will
be "minimized" and fixed to a corner when the user scrolls out of the video
Expand Down

0 comments on commit 61741ce

Please sign in to comment.