1 files changed, 204 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-lite.html b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-lite.html
new file mode 100644
index 00000000..24f1a7b7
--- /dev/null
+++ b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-lite.html
@@ -0,0 +1,204 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../google-youtube/google-youtube.html">
+<!--
+youtube-lite provides a simple subset of the google-youtube element's API. By
+simplifying the API we're also able to make it more amenable to two-way data
+binding.
+
+Note that this element is totally agnostic to routing!
+-->
+<dom-module id="youtube-lite">
+  <template>
+    <style>
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+      }
+
+      google-youtube {
+        height: 100%;
+      }
+    </style>
+
+    <google-youtube
+        id="player"
+        video-id="{{videoId}}"
+        state="{{__state}}"
+        currenttime="{{__currentTime}}"
+        width="100%"
+        height="100%">
+    </google-youtube>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'youtube-lite',
+
+      properties: {
+        videoId: {
+          type: String,
+          notify: true
+        },
+
+        state: {
+          type: String,
+          notify: true,
+          observer: '_stateChanged'
+        },
+
+        currentTime: {
+          type: Number,
+          notify: true,
+          observer: '_currentTimeChanged'
+        },
+
+        startTime: {
+          type: Number
+        },
+
+        __state: {
+          type: String,
+          observer: '__ytApiStateChange'
+        },
+
+        __currentTime: {
+          type: String,
+          observer: '_ytCurrentTimeChanged'
+        },
+
+        __pauseOnFirstSeek: {
+          type: Boolean
+        }
+      },
+
+      listeners: {
+        'google-youtube-ready': '_onYoutubeReady'
+      },
+
+      _seekTo: function(newTime) {
+        var player = this.$.player;
+
+        if (player.duration == 1 || newTime < player.duration) {
+          player.seekTo(newTime);
+        }
+      },
+
+      _onYoutubeReady: function() {
+        this.__pauseOnFirstSeek = this.state == 'paused';
+
+        if (!this.__pauseOnFirstSeek || this.startTime) {
+          this._seekTo(this.startTime);
+        }
+      },
+
+      _currentTimeChanged: function(newTime, oldTime) {
+        var apiState = this.__readableStateToApiState(this.state);
+
+        if (apiState != 2 || this.__state != 2) {
+          return;
+        }
+
+        this._seekTo(newTime);
+      },
+
+      _ytCurrentTimeChanged: function(ytCurrentTime) {
+        if (this.__state === this.__apiStates.PAUSED) {
+          return;
+        }
+
+        this.currentTime = ytCurrentTime;
+      },
+
+      _stateChanged: function(newState, oldState) {
+        var newApiState = this.__readableStateToApiState(newState);
+
+        if (newApiState == this.__state ||
+            this.__state == this.__apiStates.UNSTARTED) {
+          return;
+        }
+
+        this.currentTime = this.__currentTime;
+        var player = this.$.player;
+
+        switch (newApiState) {
+          case this.__apiStates.PLAYING:
+            player.play();
+            break;
+          case this.__apiStates.PAUSED:
+            player.pause();
+            break;
+          default:
+            return;
+        }
+      },
+
+      __ytApiStateChange: function(newState, oldState) {
+        var readableState;
+
+        switch (newState) {
+          case this.__apiStates.ENDED:
+            readableState = this.__states.PAUSED;
+            break;
+          case this.__apiStates.PLAYING:
+            readableState = this.__states.PLAYING;
+            break;
+          case this.__apiStates.PAUSED:
+            readableState = this.__states.PAUSED;
+            break;
+          default:
+            return;
+        }
+
+        if (this.state == readableState) {
+          return;
+        }
+
+        if (this.__pauseOnFirstSeek && readableState == this.__states.PLAYING) {
+          this.__pauseOnFirstSeek = false;
+          this.$.player.pause();
+          return;
+        }
+
+        this.state = readableState;
+        this.currentTime = this.__currentTime;
+      },
+
+      __readableStateToApiState: function(readableState) {
+        var newApiState  = -2;
+
+        if (readableState == this.__states.PLAYING) {
+          newApiState = this.__apiStates.PLAYING;
+
+        } else if (readableState = this.__states.PAUSED) {
+          newApiState = this.__apiStates.PAUSED;
+        }
+
+        return newApiState;
+      },
+
+      __states: {
+        PLAYING: 'playing',
+        PAUSED: 'paused'
+      },
+
+      __apiStates: {
+        UNSTARTED: -1,
+        ENDED: 0,
+        PLAYING: 1,
+        PAUSED: 2,
+        BUFFERING: 3,
+        QUEUED: 5
+      }
+    });
+  </script>
+</dom-module>