Add amp-kaltura-player

update gulp add preload image fix lint add documentInactive to pausue the player update year to 2016 lint
mysamimi · Mar 15, 2016 · d61541e · d61541e
1 parent 6f95f6f
commit d61541e
Show file tree

Hide file tree

Showing 5 changed files with 356 additions and 0 deletions.
diff --git a/examples/kaltura.amp.html b/examples/kaltura.amp.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Kaltura Player Example</title>
+  <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-kaltura-player" src="https://cdn.ampproject.org/v0/amp-kaltura-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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h2>Kaltura Player</h2>
+
+  <amp-kaltura-player
+      data-uiconf="33502051"
+      data-partner="1281471"
+      data-entryid="1_3ts1ms9c"
+      data-param-streamerType = "auto"
+      layout="responsive" width="480" height="270">
+  </amp-kaltura-player>
+
+</body>
+</html>
diff --git a/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js
@@ -0,0 +1,133 @@
+/**
+ * Copyright 2016 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 {isLayoutSizeDefined} from '../../../src/layout';
+import {loadPromise} from '../../../src/event-helper';
+import {addParamsToUrl} from '../../../src/url';
+import {dashToCamelCase} from '../../../src/string';
+import {setStyles} from '../../../src/style';
+
+class AmpKaltura extends AMP.BaseElement {
+
+  /** @override */
+  createdCallback() {
+    this.preconnect.url('https://cdnapisec.kaltura.com');
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  buildCallback() {
+    if (!this.getPlaceholder()) {
+      this.buildImagePlaceholder_();
+    }
+  }
+
+  /** @override */
+  layoutCallback() {
+    const width = this.element.getAttribute('width');
+    const height = this.element.getAttribute('height');
+    const partnerid = AMP.assert(
+        this.element.getAttribute('data-partner'),
+        'The data-account attribute is required for <amp-kaltura-player> %s',
+        this.element);
+    const uiconfid = this.element.getAttribute('data-uiconf') ||
+    this.element.getAttribute('data-uiconf-id') ||
+      'default';
+    const entryid = this.element.getAttribute('data-entryid') || 'default';
+    const iframe = document.createElement('iframe');
+    let src = `https://cdnapisec.kaltura.com/p/${encodeURIComponent(partnerid)}/sp/${encodeURIComponent(partnerid)}00/embedIframeJs/uiconf_id/${encodeURIComponent(uiconfid)}/partner_id/${encodeURIComponent(partnerid)}?iframeembed=true&playerId=kaltura_player_amp&entry_id=${encodeURIComponent(entryid)}`;
+    const params = {};
+
+      // Pass through data-param-* attributes as params for plugin use
+    for (let i = 0; i < this.element.attributes.length; i++) {
+      const attr = this.element.attributes[i];
+      const matches = attr.nodeName.match(/^data-param-(.+)/);
+      if (matches) {
+        const param = dashToCamelCase(matches[1]);
+        const flashvar = 'flashvars[' + param + ']';
+        params[flashvar] = attr.nodeValue;
+      }
+    }
+
+    src = addParamsToUrl(src, params);
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('allowfullscreen', 'true');
+    iframe.src = src;
+    this.applyFillContent(iframe);
+    iframe.width = width;
+    iframe.height = height;
+    this.element.appendChild(iframe);
+      /** @private {?Element} */
+    this.iframe_ = iframe;
+    return loadPromise(iframe);
+  }
+
+  /** @private */
+  buildImagePlaceholder_() {
+    const imgPlaceholder = new Image();
+
+    setStyles(imgPlaceholder, {
+      'object-fit': 'cover',
+      'visibility': 'hidden',
+    });
+    const width = this.element.getAttribute('width');
+    const height = this.element.getAttribute('height');
+    const partnerid = AMP.assert(
+      this.element.getAttribute('data-partner'),
+      'The data-account attribute is required for <amp-kaltura-player> %s',
+      this.element);
+    const entryid = this.element.getAttribute('data-entryid') || 'default';
+    let src = `https://cdnapisec.kaltura.com/p/${encodeURIComponent(partnerid)}/thumbnail/entry_id/${encodeURIComponent(entryid)}`;
+    if (width) {
+      src += `/width/${width}`;
+    }
+    if (height) {
+      src += `/height/${height}`;
+    }
+
+    imgPlaceholder.src = src;
+    imgPlaceholder.setAttribute('placeholder', '');
+    imgPlaceholder.width = this.width_;
+    imgPlaceholder.height = this.height_;
+
+    this.element.appendChild(imgPlaceholder);
+    this.applyFillContent(imgPlaceholder);
+
+    loadPromise(imgPlaceholder).then(() => {
+      setStyles(imgPlaceholder, {
+        'visibility': '',
+      });
+    });
+  }
+
+  /** @override */
+  documentInactiveCallback() {
+    if (this.iframe_ && this.iframe_.contentWindow) {
+      this.iframe_.contentWindow./*OK*/postMessage(JSON.stringify({
+        'method': 'pause' ,
+        'value': '' ,
+      }) , '*');
+    }
+    return false;
+  }
+
+};
+
+AMP.registerElement('amp-kaltura-player', AmpKaltura);
diff --git a/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2016 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 {createIframePromise} from '../../../../testing/iframe';
+require('../amp-kaltura-player');
+import {adopt} from '../../../../src/runtime';
+import {parseUrl} from '../../../../src/url';
+
+adopt(window);
+
+describe('amp-kaltura-player', () => {
+
+  function getKaltura(attributes, opt_responsive) {
+    return createIframePromise().then(iframe => {
+      const kalturaPlayer = iframe.doc.createElement('amp-kaltura-player');
+      for (const key in attributes) {
+        kalturaPlayer.setAttribute(key, attributes[key]);
+      }
+      kalturaPlayer.setAttribute('width', '111');
+      kalturaPlayer.setAttribute('height', '222');
+      if (opt_responsive) {
+        kalturaPlayer.setAttribute('layout', 'responsive');
+      }
+      iframe.doc.body.appendChild(kalturaPlayer);
+      kalturaPlayer.implementation_.layoutCallback();
+      return kalturaPlayer;
+    });
+  }
+
+  it('renders', () => {
+    return getKaltura({
+      'data-partner': '1281471',
+      'data-entryid': '1_3ts1ms9c',
+      'data-uiconf': '33502051',
+    }).then(bc => {
+      const iframe = bc.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.tagName).to.equal('IFRAME');
+      expect(iframe.src).to.equal(
+                'https://cdnapisec.kaltura.com/p/1281471/sp/128147100/embedIframeJs/uiconf_id/33502051/partner_id/1281471?iframeembed=true&playerId=kaltura_player_amp&entry_id=1_3ts1ms9c');
+      expect(iframe.getAttribute('width')).to.equal('111');
+      expect(iframe.getAttribute('height')).to.equal('222');
+    });
+  });
+
+  it('renders responsively', () => {
+    return getKaltura({
+      'data-partner': '1281471',
+      'data-entryid': '1_3ts1ms9c',
+      'data-uiconf': '33502051',
+    }, true).then(bc => {
+      const iframe = bc.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.className).to.match(/-amp-fill-content/);
+    });
+  });
+
+  it('requires data-account', () => {
+    return getKaltura({}).should.eventually.be.rejectedWith(
+            /The data-account attribute is required for/);
+  });
+
+    // TODO(erwinm) unskip this when we figure out why it fails on travis
+  it.skip('should pass data-param-* attributes to the iframe src', () => {
+    return getKaltura({
+      'data-partner': '1281471',
+      'data-entryid': '1_3ts1ms9c',
+      'data-uiconf': '33502051',
+      'data-param-my-param': 'hello world',
+    }).then(bc => {
+      const iframe = bc.querySelector('iframe');
+      const params = parseUrl(iframe.src).search.split('&');
+      expect(params).to.contain('flashvars[myParam]=hello%20world');
+    });
+  });
+});
diff --git a/extensions/amp-kaltura-player/amp-kaltura-player.md b/extensions/amp-kaltura-player/amp-kaltura-player.md
@@ -0,0 +1,107 @@
+<!---
+Copyright 2016 Kaltura. 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.
+-->
+
+# <a name="amp-kaltura-player"></a> `amp-kaltura-player`
+
+<table>
+  <tr>
+    <td width="40%"><strong>Description</strong></td>
+    <td>An <code>amp-kaltura-player</code> component displays the Kaltura Player as used in Kaltura's <a href="https://corp.kaltura.com/">Video Platform</a>.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Availability</strong></td>
+    <td>Stable</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-kaltura-player" src="https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js">&lt;/script></code></td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Examples</strong></td>
+    <td><a href="https://amp-by-example.appspot.com/amp-kaltura-player.html">amp-kaltura-player.html</a><br /><a href="https://github.com/ampproject/amphtml/blob/master/examples/kaltura.amp.html">kaltura.amp.html</a></td>
+  </tr>
+</table>
+
+The following lists validation errors specific to the `amp-kaltura-player` tag
+(see also `amp-kaltura-player` in the [AMP validator specification](https://github.com/ampproject/amphtml/blob/master/validator/validator.protoascii)):
+
+<table>
+  <tr>
+    <th width="40%"><strong>Validation Error</strong></th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td width="40%"><a href="https://www.ampproject.org/docs/reference/validation_errors.html#tag-required-by-another-tag-is-missing">The 'example1' tag is missing or incorrect, but required by 'example2'.</a></td>
+    <td>Error thrown when required <code>amp-kaltura-player</code> extension <code>.js</code> script tag is missing or incorrect.</td>
+  </tr>
+  <tr>
+    <td width="40%"><a href="https://www.ampproject.org/docs/reference/validation_errors.html#mandatory-attribute-missing">The mandatory attribute 'example1' is missing in tag 'example2'.</a></td>
+    <td>Error thrown when <code>data-partner</code> attribute is missing.</td>
+  </tr>
+  <tr>
+    <td width="40%"><a href="https://www.ampproject.org/docs/reference/validation_errors.html#implied-layout-isnt-supported-by-amp-tag">The implied layout 'example1' is not supported by tag 'example2'.</a></td>
+    <td>Error thrown when implied layout is set to <code>CONTAINER</code>; this layout type isn't supported.</td>
+  </tr>
+  <tr>
+    <td width="40%"><a href="https://www.ampproject.org/docs/reference/validation_errors.html#specified-layout-isnt-supported-by-amp-tag">The specified layout 'example1' is not supported by tag 'example2'.</a></td>
+    <td>Error thrown when specified layout is set to <code>CONTAINER</code>; this layout type isn't supported.</td>
+  </tr>
+  <tr>
+    <td width="40%"><a href="https://www.ampproject.org/docs/reference/validation_errors.html#invalid-property-value">The property 'example1' in attribute 'example2' in tag 'example3' is set to 'example4', which is invalid.</a></td>
+    <td>Error thrown when invalid value is given for attributes <code>height</code> or <code>width</code>. For example, <code>height=auto</code> triggers this error for all supported layout types, with the exception of <code>NODISPLAY</code>.</td>
+  </tr>
+</table>
+
+## Example
+
+The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts.
+
+Example:
+
+```html
+ <amp-kaltura-player
+      data-uiconf="33502051"
+      data-partner="1281471"
+      data-entryid="1_3ts1ms9c"
+      data-param-streamerType = "auto"
+      layout="responsive" width="480" height="270">
+  </amp-kaltura-player>
+```
+
+## Attributes
+
+**data-partner**
+
+The Kaltura partner id.
+
+**data-uiconf**
+
+The Kaltura player id - uiconf id.
+
+**data-entryid**
+
+The Kaltura entry id.
+
+
+**data-param-***
+
+All `data-param-*` attributes will be added as query parameter to the player iframe src. This may be used to pass custom values through to player plugins, such as ad parameters or video ids for Perform players.
+
+Keys and values will be URI encoded. Keys will be camel cased.
+
+- `data-param-streamerType="auto"` becomes `&flashvars[streamerType]=auto`
+
+
diff --git a/gulpfile.js b/gulpfile.js
@@ -73,6 +73,7 @@ function buildExtensions(options) {
   buildExtension('amp-anim', '0.1', false, options);
   buildExtension('amp-audio', '0.1', false, options);
   buildExtension('amp-brightcove', '0.1', false, options);
+  buildExtension('amp-kaltura-player', '0.1', false, options);
   buildExtension('amp-carousel', '0.1', true, options);
   buildExtension('amp-dailymotion', '0.1', false, options);
   buildExtension('amp-dynamic-css-classes', '0.1', false, options);
@@ -320,6 +321,7 @@ function buildExamples(watch) {
   buildExample('analytics.amp.html');
   buildExample('article.amp.html');
   buildExample('brightcove.amp.html');
+  buildExample('kaltura.amp.html');
   buildExample('responsive.amp.html');
   buildExample('article-access.amp.html');
   buildExample('dailymotion.amp.html');