1 files changed, 133 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/app-route/demo/youtube-demo/video-viewer.html b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/video-viewer.html
new file mode 100644
index 00000000..4786e4af
--- /dev/null
+++ b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/video-viewer.html
@@ -0,0 +1,133 @@
+<!--
+@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="../../../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../paper-styles/color.html">
+<link rel="import" href="../../../paper-input/paper-input.html">
+<link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html">
+
+<link rel="import" href="../../app-route.html">
+
+<link rel="import" href="youtube-lite.html">
+<link rel="import" href="route-info.html">
+
+<dom-module id="video-viewer">
+  <template>
+    <style>
+      :host {
+        display: block;
+        position: relative;
+        height: calc(100vh - 60px);
+        --primary-color: var(--paper-red-500);
+        --primary-text-color: #fff;
+        --paper-toggle-button-unchecked-bar-color: #888;
+      }
+
+      paper-input {
+        width: 100px;
+      }
+
+      #controls {
+        color: #fff;
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+        height: 30%;
+      }
+
+      #controls > div {
+        @apply(--layout-horizontal);
+        padding-bottom: 1em;
+      }
+
+      #state {
+        margin-left: 16px;
+      }
+
+      #player {
+        height: 70%;
+      }
+    </style>
+
+    <!-- This app-route consumes the route which was provided by the tail of
+    a app-route in the host of this element. This means that the parent that
+    provides this route decides where this element lives in the URL space. In
+    this case, the parent, which uses hashes, matches #/video and hence this
+    element lives in <App serving point>?querParams#/video/:vid -->
+    <app-route route="{{route}}" pattern="/:vid" data="{{data}}" query-params="{{queryParams}}">
+    </app-route>
+
+    <!-- You can bind any element's state into the URL by binding their
+    properties into the queryParams object. youtube-lite doesn't have any code
+    that's even aware of routing or the URL. -->
+    <youtube-lite
+        id="player"
+        video-id="{{data.vid}}"
+        state="{{queryParams.state}}"
+        current-time="{{queryParams.time}}"
+        start-time="{{queryParams.time}}">
+    </youtube-lite>
+
+    <div id="controls">
+      <div>
+        <paper-input
+            id="time"
+            type="number"
+            on-focus="pause"
+            label="Time"
+            value="{{queryParams.time}}">
+        </paper-input>
+        <paper-toggle-button id="state" active="{{playing}}">[[queryParams.state]]</paper-toggle-button>
+      </div>
+      <route-info route="[[route]]"></route-info>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'video-viewer',
+
+      properties: {
+        route: {
+          type: Object,
+          notify: true
+        },
+
+        data: {
+          type: Object
+        },
+
+        playing: {
+          type: Boolean
+        },
+
+        queryParams: {
+          type: Object
+        }
+      },
+
+      observers: [
+        '_playingChanged(playing)',
+        '_stateChanged(queryParams.state)'
+      ],
+
+      pause: function() {
+        this.set('queryParams.state', 'paused');
+      },
+
+      _playingChanged: function(playing) {
+        this.set('queryParams.state', playing ? 'playing' : 'paused');
+      },
+
+      _stateChanged: function(state) {
+        this.playing = state === 'playing';
+      }
+    });
+  </script>
+</dom-module>