✨amp-video-docking support: <amp-brid-player dock>

- Support `dock` attribute - Support ENDED, AD_START, AD_END, LOADEDMETADATA video events
ampproject · Feb 25, 2020 · f9d8e7c · f9d8e7c
1 parent 5619b2c
commit f9d8e7c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 5 deletions.
diff --git a/examples/brid-player.amp.html b/examples/brid-player.amp.html
@@ -6,13 +6,14 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
   <script async custom-element="amp-brid-player" src="https://cdn.ampproject.org/v0/amp-brid-player-0.1.js"></script>
+  <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>
   <style amp-custom>
-    .spacer {
-      height: 100vh;
-    }
+    body { font-family:Roboto,sans-serif; padding: 0.5em; }
+    h4 { margin: 0.5em 0; }
+    .spacer { height: 100vh; }
   </style>
-  <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>
 </head>
 <body>
@@ -26,7 +27,7 @@ <h2>Brid Player</h2>
       layout="responsive"
       width="480" height="270">
   </amp-brid-player>
-  <h3>Actions</h3>
+  <h4>Actions</h4>
   <button on="tap:myVideo.play">Play</button>
   <button on="tap:myVideo.pause">Pause</button>
   <button on="tap:myVideo.mute">Mute</button>
@@ -52,6 +53,16 @@ <h2>Outstream</h2>
       layout="responsive"
       width="480" height="270">
   </amp-brid-player>
+
+  <h2>Dock</h2>
+  <amp-brid-player
+      dock
+      data-partner="264"
+      data-player="4144"
+      data-video="13663"
+      layout="responsive"
+      width="480" height="270">
+  </amp-brid-player>
 
   <div class="spacer"></div>
 

diff --git a/extensions/amp-brid-player/0.1/amp-brid-player.js b/extensions/amp-brid-player/0.1/amp-brid-player.js
@@ -292,6 +292,10 @@ class AmpBridPlayer extends AMP.BaseElement {
         'ready': VideoEvents.LOAD,
         'play': VideoEvents.PLAYING,
         'pause': VideoEvents.PAUSE,
+        'ended': VideoEvents.ENDED,
+        'adStart': VideoEvents.AD_START,
+        'adEnd': VideoEvents.AD_END,
+        'loadedmetadata': VideoEvents.LOADEDMETADATA,
       });
     }
 

diff --git a/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.html b/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.html
@@ -75,5 +75,14 @@
       layout="responsive"
       width="480" height="270">
   </amp-brid-player>
+  <!-- Invalid: `dock` without `amp-video-docking` extension. -->
+  <amp-brid-player
+      dock
+      data-partner="264"
+      data-player="4144"
+      data-video="13663"
+      layout="responsive"
+      width="480" height="270">
+  </amp-brid-player>
 </body>
 </html>
diff --git a/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.out b/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.out
@@ -80,5 +80,16 @@ amp-brid-player/0.1/test/validator-amp-brid-player.html:72:2 The tag 'amp-brid-p
 |        layout="responsive"
 |        width="480" height="270">
 |    </amp-brid-player>
+|    <!-- Invalid: `dock` without `amp-video-docking` extension. -->
+|    <amp-brid-player
+>>   ^~~~~~~~~
+amp-brid-player/0.1/test/validator-amp-brid-player.html:79:2 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
+|        dock
+|        data-partner="264"
+|        data-player="4144"
+|        data-video="13663"
+|        layout="responsive"
+|        width="480" height="270">
+|    </amp-brid-player>
 |  </body>
 |  </html>
diff --git a/extensions/amp-brid-player/amp-brid-player.md b/extensions/amp-brid-player/amp-brid-player.md
@@ -103,6 +103,11 @@ Example:
     <td width="40%"><strong>common attributes</strong></td>
     <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</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://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
+  </tr>
 </table>
 
 Embed code must either have video, playlist or outstream attribute.

diff --git a/extensions/amp-brid-player/validator-amp-brid-player.protoascii b/extensions/amp-brid-player/validator-amp-brid-player.protoascii
@@ -60,6 +60,10 @@ tags: {  # <amp-brid-player>
     mandatory_oneof: "['data-outstream', 'data-playlist', 'data-video']"
     value_regex: "[0-9]+"
   }
+  attrs: {
+    name: "dock"
+    requires_extension: "amp-video-docking"
+  }
   attr_lists: "extended-amp-global"
   spec_url: "https://amp.dev/documentation/components/amp-brid-player"
   amp_layout: {