• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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="../../../polymer/polymer.html">
11<link rel="import" href="../../../google-youtube/google-youtube.html">
12<!--
13youtube-lite provides a simple subset of the google-youtube element's API. By
14simplifying the API we're also able to make it more amenable to two-way data
15binding.
16
17Note that this element is totally agnostic to routing!
18-->
19<dom-module id="youtube-lite">
20  <template>
21    <style>
22      :host {
23        display: block;
24        position: relative;
25        width: 100%;
26      }
27
28      google-youtube {
29        height: 100%;
30      }
31    </style>
32
33    <google-youtube
34        id="player"
35        video-id="{{videoId}}"
36        state="{{__state}}"
37        currenttime="{{__currentTime}}"
38        width="100%"
39        height="100%">
40    </google-youtube>
41  </template>
42
43  <script>
44    Polymer({
45      is: 'youtube-lite',
46
47      properties: {
48        videoId: {
49          type: String,
50          notify: true
51        },
52
53        state: {
54          type: String,
55          notify: true,
56          observer: '_stateChanged'
57        },
58
59        currentTime: {
60          type: Number,
61          notify: true,
62          observer: '_currentTimeChanged'
63        },
64
65        startTime: {
66          type: Number
67        },
68
69        __state: {
70          type: String,
71          observer: '__ytApiStateChange'
72        },
73
74        __currentTime: {
75          type: String,
76          observer: '_ytCurrentTimeChanged'
77        },
78
79        __pauseOnFirstSeek: {
80          type: Boolean
81        }
82      },
83
84      listeners: {
85        'google-youtube-ready': '_onYoutubeReady'
86      },
87
88      _seekTo: function(newTime) {
89        var player = this.$.player;
90
91        if (player.duration == 1 || newTime < player.duration) {
92          player.seekTo(newTime);
93        }
94      },
95
96      _onYoutubeReady: function() {
97        this.__pauseOnFirstSeek = this.state == 'paused';
98
99        if (!this.__pauseOnFirstSeek || this.startTime) {
100          this._seekTo(this.startTime);
101        }
102      },
103
104      _currentTimeChanged: function(newTime, oldTime) {
105        var apiState = this.__readableStateToApiState(this.state);
106
107        if (apiState != 2 || this.__state != 2) {
108          return;
109        }
110
111        this._seekTo(newTime);
112      },
113
114      _ytCurrentTimeChanged: function(ytCurrentTime) {
115        if (this.__state === this.__apiStates.PAUSED) {
116          return;
117        }
118
119        this.currentTime = ytCurrentTime;
120      },
121
122      _stateChanged: function(newState, oldState) {
123        var newApiState = this.__readableStateToApiState(newState);
124
125        if (newApiState == this.__state ||
126            this.__state == this.__apiStates.UNSTARTED) {
127          return;
128        }
129
130        this.currentTime = this.__currentTime;
131        var player = this.$.player;
132
133        switch (newApiState) {
134          case this.__apiStates.PLAYING:
135            player.play();
136            break;
137          case this.__apiStates.PAUSED:
138            player.pause();
139            break;
140          default:
141            return;
142        }
143      },
144
145      __ytApiStateChange: function(newState, oldState) {
146        var readableState;
147
148        switch (newState) {
149          case this.__apiStates.ENDED:
150            readableState = this.__states.PAUSED;
151            break;
152          case this.__apiStates.PLAYING:
153            readableState = this.__states.PLAYING;
154            break;
155          case this.__apiStates.PAUSED:
156            readableState = this.__states.PAUSED;
157            break;
158          default:
159            return;
160        }
161
162        if (this.state == readableState) {
163          return;
164        }
165
166        if (this.__pauseOnFirstSeek && readableState == this.__states.PLAYING) {
167          this.__pauseOnFirstSeek = false;
168          this.$.player.pause();
169          return;
170        }
171
172        this.state = readableState;
173        this.currentTime = this.__currentTime;
174      },
175
176      __readableStateToApiState: function(readableState) {
177        var newApiState  = -2;
178
179        if (readableState == this.__states.PLAYING) {
180          newApiState = this.__apiStates.PLAYING;
181
182        } else if (readableState = this.__states.PAUSED) {
183          newApiState = this.__apiStates.PAUSED;
184        }
185
186        return newApiState;
187      },
188
189      __states: {
190        PLAYING: 'playing',
191        PAUSED: 'paused'
192      },
193
194      __apiStates: {
195        UNSTARTED: -1,
196        ENDED: 0,
197        PLAYING: 1,
198        PAUSED: 2,
199        BUFFERING: 3,
200        QUEUED: 5
201      }
202    });
203  </script>
204</dom-module>
205