<amp-bodymovin-actions> Add actions play/pause/stop/seekTo and noautoplay attribute

3p/bodymovinanimation.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {dict} from '../src/utils/object';
+import {getData} from '../src/event-helper';
 import {loadScript} from './3p';
 import {parseJson} from '../src/json';
 
@@ -23,28 +25,50 @@ import {parseJson} from '../src/json';
  * @param {function(!Object)} cb
  */
 
+let animationHandler;
+
 function getBodymovinAnimationSdk(global, cb) {
   loadScript(global, 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin_light.min.js', function() {
     cb(global.bodymovin);
   });
 }
 
+function parseMessage(event) {
+  const eventMessage = parseJson(getData(event));
+  const action = eventMessage['action'];
+  if (action == 'play') {
+    animationHandler.play();
+  } else if (action == 'pause') {
+    animationHandler.pause();
+  } else if (action == 'stop') {
+    animationHandler.stop();
+  } else if (action == 'seekTo') {
+    animationHandler.goToAndStop(eventMessage['value'],
+        eventMessage['valueType'] !== 'time');
+  }
+}
+
 export function bodymovinanimation(global) {
   const dataReceived = parseJson(global.name)['attributes']._context;
   const dataLoop = dataReceived['loop'];
-  const animationData = dataReceived['animationData'];
   const animatingContainer = global.document.createElement('div');
 
   global.document.getElementById('c').appendChild(animatingContainer);
   const shouldLoop = dataLoop != 'false';
   const loop = !isNaN(dataLoop) ? dataLoop : shouldLoop;
   getBodymovinAnimationSdk(global, function(bodymovin) {
-    bodymovin.loadAnimation({
+    animationHandler = bodymovin.loadAnimation({
       container: animatingContainer,
       renderer: 'svg',
       loop,
-      autoplay: true,
-      animationData,
+      autoplay: dataReceived['autoplay'],
+      animationData: dataReceived['animationData'],
     });
+    const message = JSON.stringify(dict({
+      'action': 'ready',
+    }));
+    global.parent. /*OK*/postMessage(message, '*');
   });
+  global.addEventListener('message', parseMessage, false);
 }
+

build-system/amp.extern.js

@@ -279,8 +279,13 @@ FB.init;
 var gist;
 gist.gistid;
 
-var bodymovin
-bodymovin.loadAnimation
+var bodymovin;
+bodymovin.loadAnimation;
+var animationHandler;
+animationHandler.play;
+animationHandler.pause;
+animationHandler.stop;
+animationHandler.goToAndStop;
 
 // Validator
 var amp;

build-system/dep-check-config.js

@@ -110,6 +110,7 @@ exports.rules = [
       '3p/polyfills.js->src/polyfills/math-sign.js',
       '3p/polyfills.js->src/polyfills/object-assign.js',
       '3p/messaging.js->src/event-helper.js',
+      '3p/bodymovinanimation.js->src/event-helper.js',
       '3p/iframe-messaging-client.js->src/event-helper.js',
     ],
   },

examples/bodymovin-animation.amp.html

@@ -6,7 +6,7 @@
     <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=Questrial' rel='stylesheet' type='text/css'>
-    <script async custom-element="amp-bodymovin-player" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>
+    <script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
@@ -26,6 +26,16 @@ <h2>Example of an animation that does 2 iteration</h2>
   <amp-bodymovin-animation layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop="2">
   </amp-bodymovin-animation>
 
+  <h2>Example of an animation that doesn't autoplay</h2>
+  <amp-bodymovin-animation id="anim" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop="true" name="ripple_1" noautoplay>
+  </amp-bodymovin-animation>
+  <!-- Testing only - will be removed prior to landing -->
+  <button on="tap:anim.play">PLAY</button>
+  <button on="tap:anim.pause">PAUSE</button>
+  <button on="tap:anim.stop">STOP</button>
+  <button on="tap:anim.seekTo(time=1000)">SEEK TIME</button>
+  <button on="tap:anim.seekTo(percent=0.2)">SEEK PERCENT</button>
+
   <h2>Example of a responsive layout animation</h2>
   <amp-bodymovin-animation layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop="true">
   </amp-bodymovin-animation>

extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js

@@ -14,12 +14,19 @@
  * limitations under the License.
  */
 
+import {ActionTrust} from '../../../src/action-trust';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
 import {batchFetchJsonFor} from '../../../src/batched-json';
+import {clamp} from '../../../src/utils/math';
+import {dict} from '../../../src/utils/object';
+import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
+import {isFiniteNumber, isObject} from '../../../src/types';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {parseJson} from '../../../src/json';
 import {removeElement} from '../../../src/dom';
+import {startsWith} from '../../../src/string';
 import {user} from '../../../src/log';
 
 const TAG = 'amp-bodymovin-animation';
@@ -33,15 +40,26 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
     /** @private @const */
     this.ampdoc_ = Services.ampdoc(this.element);
 
-    /** @private {?HTMLIFrameElement} */
+    /** @private {?Element} */
     this.iframe_ = null;
 
     /** @private {?string} */
     this.loop_ = null;
 
+    /** @private {?boolean} */
+    this.autoplay_ = null;
+
     /** @private {?string} */
     this.src_ = null;
 
+    /** @private {?Promise} */
+    this.playerReadyPromise_ = null;
+
+    /** @private {?Function} */
+    this.playerReadyResolver_ = null;
+
+    /** @private {?Function} */
+    this.unlistenMessage_ = null;
   }
 
   /** @override */
@@ -61,10 +79,25 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
   /** @override */
   buildCallback() {
     this.loop_ = this.element.getAttribute('loop') || 'true';
+    this.autoplay_ = !this.element.hasAttribute('noautoplay');
     user().assert(this.element.hasAttribute('src'),
         'The src attribute must be specified for <amp-bodymovin-animation>');
     assertHttpsUrl(this.element.getAttribute('src'), this.element);
     this.src_ = this.element.getAttribute('src');
+    this.playerReadyPromise_ = new Promise(resolve => {
+      this.playerReadyResolver_ = resolve;
+    });
+
+    // Register relevant actions
+    this.registerAction('play', () => { this.play_(); }, ActionTrust.LOW);
+    this.registerAction('pause', () => { this.pause_(); }, ActionTrust.LOW);
+    this.registerAction('stop', () => { this.stop_(); }, ActionTrust.LOW);
+    this.registerAction('seekTo', invocation => {
+      const args = invocation.args;
+      if (args) {
+        this.seekTo_(args);
+      }
+    }, ActionTrust.LOW);
   }
 
   /** @override */
@@ -73,16 +106,24 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
     return animData.then(data => {
       const opt_context = {
         loop: this.loop_,
+        autoplay: this.autoplay_,
         animationData: data,
       };
       const iframe = getIframe(
           this.win, this.element, 'bodymovinanimation', opt_context);
       return Services.vsyncFor(this.win).mutatePromise(() => {
         this.applyFillContent(iframe);
+        this.unlistenMessage_ = listen(
+            this.win,
+            'message',
+            this.handleBodymovinMessages_.bind(this)
+        );
         this.element.appendChild(iframe);
         this.iframe_ = iframe;
       }).then(() => {
-        return this.loadPromise(this.iframe_);
+        const loaded = this.loadPromise(this.iframe_);
+        this.playerReadyResolver_(loaded);
+        return loaded;
       });
     });
   }
@@ -93,8 +134,78 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
       removeElement(this.iframe_);
       this.iframe_ = null;
     }
+    this.playerReadyPromise_ = new Promise(resolve => {
+      this.playerReadyResolver_ = resolve;
+    });
     return true;
   }
+
+  handleBodymovinMessages_(event) {
+    if (event.source != this.iframe_.contentWindow) {
+      return;
+    }
+    if (!getData(event) || !(isObject(getData(event))
+        || startsWith(/** @type {string} */ (getData(event)), '{'))) {
+      return; // Doesn't look like JSON.
+    }
+
+    /** @const {?JsonObject} */
+    const eventData = /** @type {?JsonObject} */ (isObject(getData(event))
+      ? getData(event)
+      : parseJson(getData(event)));
+    if (eventData === undefined) {
+      return; // We only process valid JSON.
+    }
+    if (eventData['action'] == 'ready') {
+      this.playerReadyResolver_(this.iframe_);
+    }
+  }
+
+  /**
+   * Sends a command to the player through postMessage.
+   * @param {string} action
+   * @param {string=} opt_valueType
+   * @param {number=} opt_value
+   * @private
+   * */
+  sendCommand_(action, opt_valueType, opt_value) {
+    this.playerReadyPromise_.then(function(iframe) {
+      this.iframe_ = iframe;
+      if (this.iframe_ && this.iframe_.contentWindow) {
+        const message = JSON.stringify(dict({
+          'action': action,
+          'valueType': opt_valueType || '',
+          'value': opt_value || '',
+        }));
+        this.iframe_.contentWindow. /*OK*/postMessage(message, '*');
+      }
+    });
+  }
+
+  play_() {
+    this.sendCommand_('play');
+  }
+
+  pause_() {
+    this.sendCommand_('pause');
+  }
+
+  stop_() {
+    this.sendCommand_('stop');
+  }
+
+  seekTo_(args) {
+    const time = parseFloat(args && args['time']);
+    // time based seek
+    if (isFiniteNumber(time)) {
+      this.sendCommand_('seekTo', 'time', time);
+    }
+    // percent based seek
+    const percent = parseFloat(args && args['percent']);
+    if (isFiniteNumber(percent)) {
+      this.sendCommand_('seekTo', 'percent', clamp(percent, 0, 1));
+    }
+  }
 }
 
 AMP.extension(TAG, '0.1', AMP => {

extensions/amp-bodymovin-animation/amp-bodymovin-animation.md

@@ -58,6 +58,10 @@ The path to the exported Bodymovin animation object
 
 Whether the animation should be looping or not. `true` by default. Values can be: `true`|`false`|`number`
 
+##### noautoplay (optional)
+
+By default, an animation autoplays. If this attribute is added the video waits for an action to start playing.
+
 ##### common attributes
 
 This element includes [common attributes](https://www.ampproject.org/docs/reference/common_attributes) extended to AMP components.

extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii

@@ -33,6 +33,10 @@ tags: {  # <amp-bodymovin-animation>
     name: "loop"
     value_regex_casei: "(false|number|true)"
   }
+  attrs: {
+    name: "noautoplay"
+    value: ""
+  }
   attrs: {
     name: "src"
     mandatory: true

spec/amp-actions-and-events.md

@@ -314,6 +314,24 @@ event.response</pre></td>
   </tr>
 </table>
 
+### amp-bodymovin-animation
+<table>
+  <tr>
+    <th>Action</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><code>play</code></td>
+    <td>Plays the animation.</td>
+    <td><code>pause</code></td>
+    <td>Pauses the animation.</td>
+    <td><code>stop</code></td>
+    <td>Stops the animation.</td>
+    <td><code>seekTo(time=INTEGER)</code></td>
+    <td>Sets the currentTime of the animation to the specified value and pauses animation. </td>
+  </tr>
+</table>
+
 ### amp-carousel[type="slides"]
 <table>
   <tr>