✨ Bento amp-video-iframe

build-system/compile/bundles.config.js

@@ -1193,6 +1193,12 @@ exports.extensionBundles = [
     latestVersion: '0.1',
     type: TYPES.MEDIA,
   },
+  {
+    name: 'amp-video-iframe',
+    version: '1.0',
+    latestVersion: '0.1',
+    type: TYPES.MEDIA,
+  },
   {
     name: 'amp-viqeo-player',
     version: '0.1',

build-system/test-configs/dep-check-config.js

@@ -283,6 +283,11 @@ exports.rules = [
       // amp-smartlinks depends on amp-skimlinks/link-rewriter
       'extensions/amp-smartlinks/0.1/amp-smartlinks.js->extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js',
       'extensions/amp-smartlinks/0.1/linkmate.js->extensions/amp-skimlinks/0.1/link-rewriter/two-steps-response.js',
+
+      // VideoWrapper
+      'extensions/amp-video-iframe/1.0/amp-video-iframe.js->extensions/amp-video-iframe/0.1/amp-video-iframe.js',
+      'extensions/amp-video-iframe/1.0/amp-video-iframe.js->extensions/amp-video/1.0/base-element.js',
+      'extensions/amp-video-iframe/1.0/amp-video-iframe.js->extensions/amp-video/1.0/video-iframe.js',
     ],
   },
   {

extensions/amp-video-iframe/0.1/amp-video-iframe.js

@@ -63,7 +63,7 @@ const SANDBOX = [
  * Events allowed to be dispatched from messages.
  * @private @const
  */
-const ALLOWED_EVENTS = [
+export const BUBBLE_MESSAGE_EVENTS = [
   VideoEvents.PLAYING,
   VideoEvents.PAUSE,
   VideoEvents.ENDED,
@@ -326,7 +326,7 @@ class AmpVideoIframe extends AMP.BaseElement {
       return;
     }
 
-    if (ALLOWED_EVENTS.indexOf(eventReceived) > -1) {
+    if (BUBBLE_MESSAGE_EVENTS.indexOf(eventReceived) > -1) {
       this.element.dispatchCustomEvent(eventReceived);
       return;
     }

extensions/amp-video-iframe/1.0/amp-video-iframe.js

@@ -0,0 +1,136 @@
+/**
+ * Copyright 2020 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.
+ */
+import {BUBBLE_MESSAGE_EVENTS} from '../0.1/amp-video-iframe';
+import {MIN_VISIBILITY_RATIO_FOR_AUTOPLAY} from '../../../src/video-interface';
+import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+import {VideoIframe} from '../../amp-video/1.0/video-iframe';
+import {createCustomEvent} from '../../../src/event-helper';
+import {dict} from '../../../src/utils/object';
+
+/** @const {string} */
+const TAG = 'amp-video-iframe';
+
+/**
+ * @param {!Element} element
+ * @return {!Promise<IntersectionObserverEntry>}
+ */
+function getIntersectionObserverEntryAsync(element) {
+  return new Promise((resolve) => {
+    const observer = new IntersectionObserver((entries) => {
+      resolve(entries[entries.length - 1]);
+      observer.disconnect();
+    });
+    observer.observe(element);
+  });
+}
+
+/**
+ * @param {!Element} element
+ * @return {!Promise<number>}
+ */
+function getIntersectionRatioMinAutoplay(element) {
+  return getIntersectionObserverEntryAsync(element).then(
+    ({intersectionRatio}) =>
+      // Only post ratio > 0 when in autoplay range to prevent internal
+      // autoplay implementations that differ from ours.
+      intersectionRatio < MIN_VISIBILITY_RATIO_FOR_AUTOPLAY
+        ? 0
+        : intersectionRatio
+  );
+}
+
+class AmpVideoIframe extends VideoBaseElement {}
+
+/**
+ * @param {!MessageEvent} e
+ */
+const onMessage = (e) => {
+  const {currentTarget} = e;
+  const method = e.data?.method;
+  const messageId = e.data?.id;
+  if (method) {
+    if (method == 'getIntersection') {
+      getIntersectionRatioMinAutoplay(currentTarget).then(
+        (intersectionRatio) => {
+          currentTarget.contentWindow./*OK*/ postMessage(
+            JSON.stringify(
+              dict({
+                'id': messageId,
+                'intersectionRatio': intersectionRatio,
+              })
+            )
+          );
+        }
+      );
+      return;
+    }
+    throw new Error(`Unknown method ${method}`);
+  }
+  const event = e.data?.event;
+  if (!event) {
+    return;
+  }
+  if (event === 'analytics') {
+    // TODO
+    return;
+  }
+  if (event === 'error') {
+    // TODO
+    return;
+  }
+  if (BUBBLE_MESSAGE_EVENTS.indexOf(event) > -1) {
+    currentTarget.dispatchEvent(
+      createCustomEvent(window, event, /* detail */ null, {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+    return;
+  }
+};
+
+/**
+ * @param {string} method
+ * @return {method}
+ */
+const makeMethodMessage = (method) =>
+  JSON.stringify({
+    'event': 'method',
+    'method': method.toLowerCase(),
+  });
+
+AmpVideoIframe['staticProps'] = dict({
+  'component': VideoIframe,
+  'onMessage': onMessage,
+  'makeMethodMessage': makeMethodMessage,
+});
+
+/** @override */
+AmpVideoIframe['props'] = {
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+  'referrerpolicy': {attr: 'referrerpolicy'},
+  'implements-media-session': {attr: 'mediasession', type: 'boolean'},
+  'poster': {attr: 'poster'},
+  'src': {attr: 'src'},
+
+  // TODO(alanorozco): These props have no internal implementation yet.
+  'dock': {attr: 'dock'},
+  'rotate-to-fullscreen': {attr: 'rotate-to-fullscreen', type: 'boolean'},
+};
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpVideoIframe);
+});

extensions/amp-video-iframe/1.0/storybook/Basic.amp.js

@@ -0,0 +1,136 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withA11y} from '@storybook/addon-a11y';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-video-iframe-1_0',
+  decorators: [withA11y, withKnobs, withAmp],
+  parameters: {extensions: [{name: 'amp-video-iframe', version: '1.0'}]},
+};
+
+const AmpVideoIframeWithKnobs = ({i, ...rest}) => {
+  const group = i ? `Player ${i + 1}` : undefined;
+
+  const width = text('width', '640px', group);
+  const height = text('height', '360px', group);
+
+  const ariaLabel = text('aria-label', 'Video Player');
+  const autoplay = boolean('autoplay', true);
+  const controls = boolean('controls', true);
+  const mediasession = boolean('mediasession', true);
+  const noaudio = boolean('noaudio', false);
+  const loop = boolean('loop', false);
+  const poster = text(
+    'poster',
+    'https://amp.dev/static/samples/img/amp-video-iframe-sample-placeholder.jpg'
+  );
+
+  const artist = text('artist', '');
+  const album = text('album', '');
+  const artwork = text('artwork', '');
+  const title = text('title', '');
+
+  const src = text(
+    'src',
+    'https://amp.dev/static/samples/files/amp-video-iframe-videojs.html'
+  );
+
+  return (
+    <amp-video-iframe
+      {...rest}
+      ariaLabel={ariaLabel}
+      autoplay={autoplay}
+      controls={controls}
+      mediasession={mediasession}
+      noaudio={noaudio}
+      loop={loop}
+      poster={poster}
+      artist={artist}
+      album={album}
+      artwork={artwork}
+      title={title}
+      layout="responsive"
+      width={width}
+      height={height}
+      src={src}
+    ></amp-video-iframe>
+  );
+};
+
+const Spacer = ({height}) => {
+  return (
+    <div
+      style={{
+        height,
+        background: `linear-gradient(to bottom, #bbb, #bbb 10%, #fff 10%, #fff)`,
+        backgroundSize: '100% 10px',
+      }}
+    ></div>
+  );
+};
+
+export const Default = () => {
+  const amount = number('Amount', 1, {}, 'Page');
+  const spacerHeight = text('Space', '80vh', 'Page');
+  const spaceAbove = boolean('Space above', false, 'Page');
+  const spaceBelow = boolean('Space below', false, 'Page');
+
+  const players = [];
+  for (let i = 0; i < amount; i++) {
+    players.push(<AmpVideoIframeWithKnobs key={i} i={i} />);
+    if (i < amount - 1) {
+      players.push(<Spacer height={spacerHeight} />);
+    }
+  }
+
+  return (
+    <>
+      {spaceAbove && <Spacer height={spacerHeight} />}
+      {players}
+      {spaceBelow && <Spacer height={spacerHeight} />}
+    </>
+  );
+};
+
+const ActionButton = ({children, ...props}) => (
+  <button style={{flex: 1, margin: '0 4px'}} {...props}>
+    {children}
+  </button>
+);
+
+export const Actions = () => {
+  return (
+    <div style="max-width: 800px">
+      <AmpVideoIframeWithKnobs id="player" />
+      <div
+        style={{
+          margin: '12px 0',
+          display: 'flex',
+        }}
+      >
+        <ActionButton on="tap:player.play">Play</ActionButton>
+        <ActionButton on="tap:player.pause">Pause</ActionButton>
+        <ActionButton on="tap:player.mute">Mute</ActionButton>
+        <ActionButton on="tap:player.unmute">Unmute</ActionButton>
+        <ActionButton on="tap:player.fullscreen">Fullscreen</ActionButton>
+      </div>
+    </div>
+  );
+};

extensions/amp-video/1.0/amp-video.js

@@ -21,6 +21,29 @@ const TAG = 'amp-video';
 
 class AmpVideo extends VideoBaseElement {}
 
+/** @override */
+AmpVideo['props'] = {
+  'album': {attr: 'album'},
+  'alt': {attr: 'alt'},
+  'artist': {attr: 'artist'},
+  'artwork': {attr: 'artwork'},
+  'attribution': {attr: 'attribution'},
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+  'controls': {attr: 'controls', type: 'boolean'},
+  'controlslist': {attr: 'controlslist'},
+  'crossorigin': {attr: 'crossorigin'},
+  'disableremoteplayback': {attr: 'disableremoteplayback'},
+  'loop': {attr: 'loop', type: 'boolean'},
+  'noaudio': {attr: 'noaudio', type: 'boolean'},
+  'poster': {attr: 'poster'},
+  'src': {attr: 'src'},
+  'title': {attr: 'title'},
+
+  // TODO(alanorozco): These props have no internal implementation yet.
+  'dock': {attr: 'dock'},
+  'rotate-to-fullscreen': {attr: 'rotate-to-fullscreen', type: 'boolean'},
+};
+
 AMP.extension(TAG, '1.0', (AMP) => {
   AMP.registerElement(TAG, AmpVideo);
 });

extensions/amp-video/1.0/autoplay.jss.js

@@ -73,6 +73,7 @@ const autoplayMaskButton = {
   appearance: 'none',
   background: 'transparent',
   border: 'none',
+  width: '100%',
 };
 
 const JSS = {

extensions/amp-video/1.0/base-element.js

@@ -83,29 +83,6 @@ VideoBaseElement['layoutSizeDefined'] = true;
  */
 VideoBaseElement['staticProps'];
 
-/** @override */
-VideoBaseElement['props'] = {
-  'album': {attr: 'album'},
-  'alt': {attr: 'alt'},
-  'artist': {attr: 'artist'},
-  'artwork': {attr: 'artwork'},
-  'attribution': {attr: 'attribution'},
-  'autoplay': {attr: 'autoplay', type: 'boolean'},
-  'controls': {attr: 'controls', type: 'boolean'},
-  'controlslist': {attr: 'controlslist'},
-  'crossorigin': {attr: 'crossorigin'},
-  'disableremoteplayback': {attr: 'disableremoteplayback'},
-  'loop': {attr: 'loop', type: 'boolean'},
-  'noaudio': {attr: 'noaudio', type: 'boolean'},
-  'poster': {attr: 'poster'},
-  'src': {attr: 'src'},
-  'title': {attr: 'title'},
-
-  // TODO(alanorozco): These props have no internal implementation yet.
-  'dock': {attr: 'dock'},
-  'rotate-to-fullscreen': {attr: 'rotate-to-fullscreen', type: 'boolean'},
-};
-
 /** @override */
 VideoBaseElement['children'] = {
   'sources': {