<html><head><link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-styles/paper-styles.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">

</head><body><dom-module id="video-viewer">
  <template>
    <style>:host{display:block;position:relative;height:calc(100vh - 60px);@apply (--paper-font-common-base);--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>

    
    <app-route route="{{route}}" pattern="/:vid" data="{{data}}" query-params="{{queryParams}}">
    </app-route>

    
    <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:!0},data:{type:Object},playing:{type:Boolean},queryParams:{type:Object}},observers:["_playingChanged(playing)","_stateChanged(queryParams.state)"],pause:function(){this.set("queryParams.state","paused")},_playingChanged:function(e){this.set("queryParams.state",e?"playing":"paused")},_stateChanged:function(e){this.playing="playing"===e}});</script>
</dom-module>
</body></html>