ampproject · mszylkowski · Apr 21, 2021 · Mar 17, 2021 · Mar 22, 2021 · Mar 22, 2021
diff --git a/examples/amp-story/videos-google-cache.html b/examples/amp-story/videos-google-cache.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Example story with Google cache videos</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-cache-url" src="https://cdn.ampproject.org/v0/amp-cache-url-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>
+	.page-num {
+		display: block;
+		position: absolute;
+		left: 30px;
+		top: 30px;
+		width: 30px;
+		text-align: center;
+		font-family: sans-serif;
+		background-color: white;
+		border-radius: 50%;
+	}
+	</style>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team">
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop enable-google-video-cache
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">1</span></amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop enable-google-video-cache
+					id="video2"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#2"
+            layout="fill">
+            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">2</span></amp-story-grid-layer>
+			</amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-cache-url/0.1/amp-cache-url.js b/extensions/amp-cache-url/0.1/amp-cache-url.js
@@ -14,11 +14,27 @@
  * limitations under the License.
  */
 
+import * as ampToolboxCacheUrl from '@ampproject/toolbox-cache-url';
+import {urls} from '../../../src/config';
+
 export class AmpCacheUrlService {
   /**
    * Create cache url service
    */
   constructor() {}
+
+  /**
+   *
+   * @param {string} url
+   * @param {string=} cache the suffix to the cache URL (eg: cdn.approject.org)
+   * @return {!Promise<string>}
+   */
+  createCacheUrl(url, cache = urls.cdn) {
+    return ampToolboxCacheUrl.createCacheUrl(
+      cache.replace(/https?:\/\//, ''),
+      url
+    );
+  }
 }
 
 AMP.extension('amp-cache-url', '0.1', (AMP) => {

diff --git a/extensions/amp-cache-url/0.1/test/test-amp-cache-url.js b/extensions/amp-cache-url/0.1/test/test-amp-cache-url.js
@@ -13,3 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import {AmpCacheUrlService} from '../amp-cache-url';
+
+describes.fakeWin(
+  'amp-cache-url',
+  {amp: {extensions: ['amp-cache-url']}},
+  () => {
+    it('should return a cached url', async () => {
+      const cacheUrlService = new AmpCacheUrlService();
+      const result = await cacheUrlService.createCacheUrl(
+        'https://amp.dev/stories'
+      );
+      expect(result).to.equal(
+        'https://amp-dev.cdn.ampproject.org/c/s/amp.dev/stories'
+      );
+    });
+  }
+);
diff --git a/extensions/amp-video/0.1/amp-video.js b/extensions/amp-video/0.1/amp-video.js
@@ -19,6 +19,7 @@ import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {VisibilityState} from '../../../src/visibility-state';
+import {addCacheSources} from './video-cache';
 import {addParamsToUrl} from '../../../src/url';
 import {
   childElement,
@@ -264,6 +265,10 @@ export class AmpVideo extends AMP.BaseElement {
     installVideoManagerForDoc(element);
 
     Services.videoManagerForDoc(element).register(this);
+
+    if (this.element.hasAttribute('enable-google-video-cache')) {
+      return addCacheSources(this);
+    }
   }
 
   /**

diff --git a/extensions/amp-video/0.1/test/test-video-cache.js b/extensions/amp-video/0.1/test/test-video-cache.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright 2021 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 videoCache from '../video-cache';
+import {AmpCacheUrlService} from '../../../amp-cache-url/0.1/amp-cache-url';
+import {AmpStoryRequestService} from '../../../amp-story/1.0/amp-story-request-service';
+import {AmpVideo} from '../amp-video';
+import {Services} from '../../../../src/services';
+import {createElementWithAttributes} from '../../../../src/dom';
+
+describes.realWin('amp-video cached-sources', {amp: true}, (env) => {
+  let requestService;
+  let cacheUrlService;
+
+  beforeEach(() => {
+    requestService = new AmpStoryRequestService(env.win, env.win.document.body);
+    env.sandbox
+      .stub(Services, 'storyRequestServiceForOrNull')
+      .resolves(requestService);
+
+    cacheUrlService = new AmpCacheUrlService();
+    env.sandbox
+      .stub(Services, 'cacheUrlServicePromiseForDoc')
+      .resolves(cacheUrlService);
+
+    env.win.document.head.appendChild(
+      createElementWithAttributes(env.win.document, 'script', {
+        'custom-element': 'amp-cache-url',
+      })
+    );
+  });
+
+  describe('select sources', () => {
+    it('should select the source if there is only one source', () => {
+      const videoEl = createVideo([{src: 'video1.mp4'}]);
+      expect(videoCache.selectVideoSource(videoEl)).to.contain('video1.mp4');
+    });
+
+    it('should select the first source if there are similar sources', () => {
+      const videoEl = createVideo([{src: 'video1.mp4'}, {src: 'video2.mp4'}]);
+      expect(videoCache.selectVideoSource(videoEl)).to.contain('video1.mp4');
+    });
+
+    it('should select the mp4 source if there are many sources', () => {
+      const videoEl = createVideo([
+        {src: 'video1.mp4'},
+        {src: 'video2.mp4', type: 'video/mp4'},
+      ]);
+      expect(videoCache.selectVideoSource(videoEl)).to.contain('video2.mp4');
+    });
+
+    it('should select the src attribute of amp-video if there are no sources', () => {
+      const videoEl = createVideo([]);
+      videoEl.setAttribute('src', 'video1.mp4');
+      expect(videoCache.selectVideoSource(videoEl)).to.contain('video1.mp4');
+    });
+  });
+
+  describe('add sources', () => {
+    it('should set the correct attributes on the source added', () => {
+      const videoEl = createVideo([{src: 'video1.mp4'}]);
+      videoCache.applySourcesToVideo(videoEl, [
+        {'url': 'video1.mp4', 'bitrate_kbps': 700, type: 'video/mp4'},
+      ]);
+      const addedSource = videoEl.querySelector('source');
+      expect(addedSource.getAttribute('src')).to.equal('video1.mp4');
+      expect(addedSource.getAttribute('data-bitrate')).to.equal('700');
+      expect(addedSource.getAttribute('type')).to.equal('video/mp4');
+    });
+
+    it('should add the sources sorted by bitrate', () => {
+      const videoEl = createVideo([{src: 'video1.mp4'}]);
+      videoCache.applySourcesToVideo(videoEl, [
+        {'url': 'video1.mp4', 'bitrate_kbps': 700, type: 'video/mp4'},
+        {'url': 'video2.mp4', 'bitrate_kbps': 2000, type: 'video/mp4'},
+      ]);
+      const addedSources = videoEl.querySelectorAll('source');
+      expect(addedSources[0].getAttribute('data-bitrate')).to.equal('2000');
+      expect(addedSources[1].getAttribute('data-bitrate')).to.equal('700');
+    });
+  });
+
+  describe('end to end', () => {
+    it('should create the sources from the request with the correct attributes', async () => {
+      env.sandbox.stub(requestService, 'executeRequest').resolves({
+        sources: [
+          {'url': 'video.mp4', 'bitrate_kbps': 700, 'type': 'video/mp4'},
+        ],
+      });
+
+      const videoEl = createVideo([{src: 'video.mp4'}]);
+      const ampVideo = new AmpVideo(videoEl);
+      await ampVideo.buildCallback();
+
+      expect(videoEl.querySelector('source[data-bitrate]')).to.not.be.null;
+    });
+  });
+
+  function createVideo(children) {
+    const videoEl = createElementWithAttributes(env.win.document, 'amp-video', {
+      'enable-google-video-cache': '',
+      'layout': 'fill',
+    });
+    children.forEach((childJson) => {
+      const sourceEl = createElementWithAttributes(
+        env.win.document,
+        'source',
+        childJson
+      );
+      videoEl.appendChild(sourceEl);
+    });
+    env.win.document.body.appendChild(videoEl);
+    return videoEl;
+  }
+});
diff --git a/extensions/amp-video/0.1/video-cache.js b/extensions/amp-video/0.1/video-cache.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2021 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 {Services} from '../../../src/services';
+import {createElementWithAttributes} from '../../../src/dom';
+import {toArray} from '../../../src/types';
+
+/** @private {?boolean} store the result of whether the document can use cache url */
+let docSupportsCacheResult = null;
+
+/**
+ * Add the caching sources to the video if opted in.
+ * @param {!AmpVideo} video
+ * @return {!Promise}
+ */
+export function addCacheSources(video) {
+  if (!docSupportsCache(video.win)) {
+    return Promise.resolve();
+  }
+  const servicePromise = Services.cacheUrlServicePromiseForDoc(video.element);
+  return servicePromise
+    .then((service) =>
+      Promise.all([
+        service.createCacheUrl(selectVideoSource(video.element)),
+        Services.storyRequestServiceForOrNull(video.win),
+      ])
+    )
+    .then((promiseResult) => {
+      const requestUrl = promiseResult[0].replace('/c/', '/mbv/');
+      return promiseResult[1].executeRequest(requestUrl);
+    })
+    .then((response) => applySourcesToVideo(video.element, response['sources']))
+    .catch(() => {});
+}
+
+/**
+ * Selects and returns the prioritized video source URL
+ * @param {!Element} videoEl
+ * @return {string}
+ */
+export function selectVideoSource(videoEl) {
+  const possibleSources = toArray(videoEl.querySelectorAll('source[src]'));
+  if (videoEl.hasAttribute('src')) {
+    possibleSources.push(videoEl);
+  }
+  for (let i = 0; i < possibleSources.length; i++) {
+    if (possibleSources[i].getAttribute('type') === 'video/mp4') {
+      return possibleSources[i].getAttribute('src');
+    }
+  }
+  return possibleSources[0]?.getAttribute('src');
+}
+
+/**
+ *
+ * @param {!Element} videoEl
+ * @param {!Array<!Object>} sources
+ */
+export function applySourcesToVideo(videoEl, sources) {
+  sources
+    .sort((a, b) => a['bitrate_kbps'] - b['bitrate_kbps'])
+    .forEach((source) => {
+      const sourceEl = createElementWithAttributes(
+        videoEl.ownerDocument,
+        'source',
+        {
+          'src': source['url'],
+          'type': source['type'],
+          'data-bitrate': source['bitrate_kbps'],
+        }
+      );
+      videoEl.prepend(sourceEl);
+    });
+}
+
+/**
+ * Whether the doc supports cache url
+ * @param {!Window} win
+ * @return {boolean}
+ */
+function docSupportsCache(win) {
+  if (docSupportsCacheResult === null) {
+    docSupportsCacheResult = !!win.document.head.querySelector(
+      'script[custom-element="amp-cache-url"]'
+    );
+  }
+  return docSupportsCacheResult;
+}
diff --git a/src/services.js b/src/services.js
@@ -866,4 +866,15 @@ export class Services {
       'assistjs-config-service'
     ));
   }
+
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {!Promise<../amp-cache-url/amp-cache-url.AmpCacheUrlService>}
+   */
+  static cacheUrlServicePromiseForDoc(elementOrAmpDoc) {
+    return /** @type {!Promise<?../amp-cache-url/amp-cache-url.AmpCacheUrlService>} */ (getServicePromiseForDoc(
+      elementOrAmpDoc,
+      'cache-url'
+    ));
+  }
 }