systrace/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-lite.html

<!--
@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>