1<!-- 2@license 3Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> 11<link rel="import" href="../../../polymer/polymer.html"> 12<link rel="import" href="../../../paper-styles/color.html"> 13<link rel="import" href="../../../paper-input/paper-input.html"> 14<link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html"> 15 16<link rel="import" href="../../app-route.html"> 17 18<link rel="import" href="youtube-lite.html"> 19<link rel="import" href="route-info.html"> 20 21<dom-module id="video-viewer"> 22 <template> 23 <style> 24 :host { 25 display: block; 26 position: relative; 27 height: calc(100vh - 60px); 28 --primary-color: var(--paper-red-500); 29 --primary-text-color: #fff; 30 --paper-toggle-button-unchecked-bar-color: #888; 31 } 32 33 paper-input { 34 width: 100px; 35 } 36 37 #controls { 38 color: #fff; 39 @apply(--layout-vertical); 40 @apply(--layout-center-center); 41 height: 30%; 42 } 43 44 #controls > div { 45 @apply(--layout-horizontal); 46 padding-bottom: 1em; 47 } 48 49 #state { 50 margin-left: 16px; 51 } 52 53 #player { 54 height: 70%; 55 } 56 </style> 57 58 <!-- This app-route consumes the route which was provided by the tail of 59 a app-route in the host of this element. This means that the parent that 60 provides this route decides where this element lives in the URL space. In 61 this case, the parent, which uses hashes, matches #/video and hence this 62 element lives in <App serving point>?querParams#/video/:vid --> 63 <app-route route="{{route}}" pattern="/:vid" data="{{data}}" query-params="{{queryParams}}"> 64 </app-route> 65 66 <!-- You can bind any element's state into the URL by binding their 67 properties into the queryParams object. youtube-lite doesn't have any code 68 that's even aware of routing or the URL. --> 69 <youtube-lite 70 id="player" 71 video-id="{{data.vid}}" 72 state="{{queryParams.state}}" 73 current-time="{{queryParams.time}}" 74 start-time="{{queryParams.time}}"> 75 </youtube-lite> 76 77 <div id="controls"> 78 <div> 79 <paper-input 80 id="time" 81 type="number" 82 on-focus="pause" 83 label="Time" 84 value="{{queryParams.time}}"> 85 </paper-input> 86 <paper-toggle-button id="state" active="{{playing}}">[[queryParams.state]]</paper-toggle-button> 87 </div> 88 <route-info route="[[route]]"></route-info> 89 </div> 90 </template> 91 92 <script> 93 Polymer({ 94 is: 'video-viewer', 95 96 properties: { 97 route: { 98 type: Object, 99 notify: true 100 }, 101 102 data: { 103 type: Object 104 }, 105 106 playing: { 107 type: Boolean 108 }, 109 110 queryParams: { 111 type: Object 112 } 113 }, 114 115 observers: [ 116 '_playingChanged(playing)', 117 '_stateChanged(queryParams.state)' 118 ], 119 120 pause: function() { 121 this.set('queryParams.state', 'paused'); 122 }, 123 124 _playingChanged: function(playing) { 125 this.set('queryParams.state', playing ? 'playing' : 'paused'); 126 }, 127 128 _stateChanged: function(state) { 129 this.playing = state === 'playing'; 130 } 131 }); 132 </script> 133</dom-module> 134