├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── demo
    ├── demo-elements.js
    └── index.html
├── google-youtube.js
├── index.html
├── package-lock.json
├── package.json
└── test
    ├── google-youtube-basic.html
    ├── google-youtube-custom-thumbnail.html
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2014 Google Inc
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     https://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | google-youtube
 2 | ==============
 3 | 
 4 | See https://elements.polymer-project.org/elements/google-youtube
 5 | 
 6 | Test
 7 | ====
 8 | 
 9 | ```
10 | polymer test --module-resolution=node --npm
11 | ```


--------------------------------------------------------------------------------
/demo/demo-elements.js:
--------------------------------------------------------------------------------
  1 | import '@polymer/polymer/polymer-legacy.js';
  2 | import '../google-youtube.js';
  3 | import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
  4 | const $_documentContainer = document.createElement('template');
  5 | 
  6 | $_documentContainer.innerHTML = `<dom-module id="demo-element">
  7 |   <template id="page-template">
  8 |     <style>
  9 |       div {
 10 |         margin-bottom: 1em;
 11 |       }
 12 |     </style>
 13 |     <h1><code>&lt;google-youtube&gt;</code> Demo</h1>
 14 |     <h3>Full API Demo</h3>
 15 |     <google-youtube
 16 |         id="googleYouTube"
 17 |         playsupported="{{playSupported}}"
 18 |         video-id="mN7IAaRdi_k"
 19 |         state="{{state}}"
 20 |         currenttime="{{currentTime}}"
 21 |         currenttimeformatted="{{currentTimeFormatted}}"
 22 |         duration="{{duration}}"
 23 |         durationformatted="{{durationFormatted}}"
 24 |         fractionloaded="{{fractionLoaded}}"
 25 |         volume="{{volume}}"
 26 |         playbackrate="{{playbackRate}}"
 27 |         playbackquality="{{playbackQuality}}"
 28 |         on-google-youtube-state-change="handleStateChange"
 29 |         on-google-youtube-error="handleYouTubeError">
 30 |     </google-youtube>
 31 | 
 32 |     <div>
 33 |       <p>
 34 |         Playback Progress:
 35 |         <span>{{currentTimeFormatted}}</span>
 36 |         /
 37 |         <span>{{durationFormatted}}</span>
 38 |         <progress max="1" value="{{computeProgress(currentTime, duration)}}"></progress>
 39 |       </p>
 40 |       <p>Volume: <span>{{volume}}</span></p>
 41 |       <p>Playback Rate: <span>{{playbackRate}}</span></p>
 42 |       <p>Playback Quality: <span>{{playbackQuality}}</span></p>
 43 |     </div>
 44 | 
 45 |     <div>
 46 |       <button
 47 |           id="play-video"
 48 |           disabled="{{computePlayDisabled(state, playSupported)}}"
 49 |           on-click="handlePlayVideo">
 50 |         Play
 51 |       </button>
 52 |       <button
 53 |           id="pause-video"
 54 |           disabled="{{computePauseDisabled(state)}}"
 55 |           on-click="handlePauseVideo">
 56 |         Pause
 57 |       </button>
 58 |     </div>
 59 | 
 60 |     <div>
 61 |       <label for="videoId">Video ID:</label>
 62 |       <input id="videoId" value="M7lc1UVf-VE">
 63 |       <button id="cue-video" on-click="handleCueVideo">Cue</button>
 64 |     </div>
 65 | 
 66 |     <div>
 67 |       <p>Player Events:</p>
 68 |       <ol>
 69 |         <template is="dom-repeat" items="{{events}}">
 70 |           <li>State change: <span>{{item.data}}</span></li>
 71 |         </template>
 72 |       </ol>
 73 |     </div>
 74 | 
 75 |     <h3>Custom Thumbnail Demo</h3>
 76 |     <google-youtube
 77 |         video-id="yRbOSdAe_JU"
 78 |         width="853px"
 79 |         height="480px"
 80 |         thumbnail="//www.polymer-project.org/images/logos/p-logo.svg">
 81 |     </google-youtube>
 82 | 
 83 |     <h3>Playlist Demo</h3>
 84 |     <google-youtube
 85 |         list="PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ"
 86 |         list-type="playlist"
 87 |         width="640px"
 88 |         height="480px">
 89 |     </google-youtube>
 90 |   </template>
 91 |   
 92 | </dom-module>`;
 93 | 
 94 | document.head.appendChild($_documentContainer.content);
 95 | Polymer({
 96 |   is: 'demo-element',
 97 |   properties: {
 98 |     playSupported: Boolean,
 99 |     state: Number,
100 |     currentTime: Number,
101 |     currentTimeFormatted: String,
102 |     duration: Number,
103 |     durationFormatted: String,
104 |     fractionLoaded: Number,
105 |     volume: Number,
106 |     playbackRate: Number,
107 |     playbackQuality: String,
108 |     events: {
109 |       type: Array,
110 |       value: []
111 |     }
112 |   },
113 |   computeProgress: function(currentTime, duration) {
114 |     if (currentTime === undefined || duration === undefined) {
115 |       return 0;
116 |     }
117 | 
118 |     return currentTime / duration;
119 |   },
120 |   computePlayDisabled: function(state, playSupported) {
121 |     return state == 1 || state == 3 || !playSupported;
122 |   },
123 |   computePauseDisabled: function(state) {
124 |     return state != 1 && state != 3;
125 |   },
126 |   handleStateChange: function(ev) {
127 |     this.events.push({data: ev.detail.data});
128 |   },
129 |   handleYouTubeError: function(ev) {
130 |     console.error('YouTube playback error', ev.detail);
131 |   },
132 |   handlePlayVideo: function(ev) {
133 |     this.$.googleYouTube.play();
134 |   },
135 |   handlePauseVideo: function(ev) {
136 |     this.$.googleYouTube.pause();
137 |   },
138 |   handleCueVideo: function(ev) {
139 |     this.$.googleYouTube.videoId = this.$.videoId.value;
140 |   }
141 | });
142 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
 3 | <html>
 4 |   <head>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 |     <title>&lt;google-youtube&gt; Demo</title>
 8 |     <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-bundle.js"></script>
 9 |     <script type="module" src="./demo-elements.js"></script>
10 | 
11 |     <style>
12 |       body {
13 |         font-family: sans-serif;
14 |         background: rgba(204, 204, 204, 0.31);
15 |       }
16 |     </style>
17 |   </head>
18 | 
19 |   <body>
20 |     <demo-element></demo-element>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/google-youtube.js:
--------------------------------------------------------------------------------
  1 | /**
  2 | @license
  3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at https://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at https://polymer.github.io/PATENTS.txt
  9 | */
 10 | import '@google-web-components/google-apis/google-youtube-api.js';
 11 | import '@polymer/iron-localstorage/iron-localstorage.js';
 12 | 
 13 | import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
 14 | import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 15 | 
 16 | /**
 17 | `google-youtube` encapsulates the YouTube player into a web component.
 18 | 
 19 |     <google-youtube
 20 |       video-id="..."
 21 |       height="270px"
 22 |       width="480px"
 23 |       rel="0"
 24 |       start="5"
 25 |       autoplay="1">
 26 |     </google-youtube>
 27 | 
 28 | `google-youtube` supports all of the [embedded player parameters](https://developers.google.com/youtube/player_parameters). Each can be set as an attribute on `google-youtube`.
 29 | 
 30 | The standard set of [YouTube player events](https://developers.google.com/youtube/iframe_api_reference#Events) are exposed, as well as methods for playing, pausing, seeking to a specific time, and loading a new video.
 31 | 
 32 | 
 33 | Custom property | Description | Default
 34 | ----------------|-------------|----------
 35 | `--google-youtube-container`  | Mixin applied to the container div | `{}`
 36 | `--google-youtube-thumbnail`  | Mixin for the video thumbnail      | `{}`
 37 | `--google-youtube-iframe`     | Mixin for the embeded iframe       | `{}`
 38 | 
 39 | 
 40 | @demo
 41 | */
 42 | Polymer({
 43 |   _template: html`
 44 |     <style>
 45 |       :host {
 46 |         display: block;
 47 |       }
 48 | 
 49 |       :host([fluid]) {
 50 |         width: 100%;
 51 |         max-width: 100%;
 52 |         position: relative;
 53 |       }
 54 | 
 55 |       :host([fluid]) iframe,
 56 |       :host([fluid]) #thumbnail {
 57 |         vertical-align: bottom;
 58 |         position: absolute;
 59 |         top: 0px;
 60 |         left: 0px;
 61 |         width: 100%;
 62 |         height: 100%;
 63 |       }
 64 | 
 65 |       iframe {
 66 |         @apply --google-youtube-iframe;
 67 |       }
 68 | 
 69 |       #container {
 70 |         max-width: 100%;
 71 |         max-height: 100%;
 72 |         @apply --google-youtube-container;
 73 |       }
 74 | 
 75 |       #thumbnail {
 76 |         width: 100%;
 77 |         height: 100%;
 78 |         cursor: pointer;
 79 |         @apply --google-youtube-thumbnail;
 80 |       }
 81 |     </style>
 82 |     <div id="container" style\$="{{_computeContainerStyle(width, height)}}">
 83 |       <template is="dom-if" if="{{thumbnail}}">
 84 |         <img id="thumbnail" src\$="{{thumbnail}}" title="YouTube video thumbnail." alt="YouTube video thumbnail." on-tap="_handleThumbnailTap">
 85 |       </template>
 86 | 
 87 |       <template is="dom-if" if="{{!thumbnail}}">
 88 |         <template is="dom-if" if="[[shouldLoadApi]]">
 89 |           <google-youtube-api on-api-load="_apiLoad"></google-youtube-api>
 90 |         </template>
 91 |       </template>
 92 | 
 93 |       <!-- Use this._playsupportedLocalStorage as the value, since this.playsupported is set to
 94 |            true as soon as initial playback has started, and we don't want that cached. -->
 95 |       <iron-localstorage name="google-youtube-playsupported" value="{{_playsupportedLocalStorage}}" on-iron-localstorage-load="_useExistingPlaySupportedValue" on-iron-localstorage-load-empty="_determinePlaySupported">
 96 |       </iron-localstorage>
 97 | 
 98 |       <div id="player"></div>
 99 |     </div>
100 | `,
101 | 
102 |   is: 'google-youtube',
103 | 
104 |   /**
105 |   * Fired when the YouTube player is fully initialized and ready for use.
106 |   *
107 |   * @event google-youtube-ready
108 |   */
109 | 
110 |   /**
111 |   * Fired when the state of the player changes. `e.detail.data` is set to one of
112 |   * [the documented](https://developers.google.com/youtube/iframe_api_reference#onStateChange)
113 |   * states.
114 |   *
115 |   * @event google-youtube-state-change
116 |   */
117 | 
118 |   /**
119 |   * Fired when playback fails due to an error. `e.detail.data` is set to one of
120 |   * [the documented](https://developers.google.com/youtube/iframe_api_reference#onError)
121 |   * error codes.
122 |   *
123 |   * @event google-youtube-error
124 |   */
125 | 
126 |   properties: {
127 |     /**
128 |     * Sets the id of the video to play. Changing this attribute will trigger a call
129 |     * to load a new video into the player (if `this.autoplay` is set to `1` and `playsupported` is true)
130 |     * or cue a new video otherwise.
131 |     *
132 |     * The underlying YouTube embed will not be added to the page unless
133 |    * `videoId` or `list` property is set.
134 |     *
135 |     * You can [search for videos programmatically](https://developers.google.com/youtube/v3/docs/search/list)
136 |     * using the YouTube Data API, or just hardcode known video ids to display on your page.
137 |     */
138 |     videoId: {
139 |       type: String,
140 |       value: '',
141 |       observer: '_videoIdChanged'
142 |     },
143 | 
144 |     /**
145 |     * The list parameter, in conjunction with the listType parameter, identifies the content that will load in the player.
146 |     * If the listType parameter value is search, then the list parameter value specifies the search query.
147 |     * If the listType parameter value is user_uploads, then the list parameter value identifies the YouTube channel whose uploaded videos will be loaded.
148 |     * If the listType parameter value is playlist, then the list parameter value specifies a YouTube playlist ID. In the parameter value, you need to prepend the playlist ID with the letters PL as shown in the example below.
149 |     *
150 |     * See https://developers.google.com/youtube/player_parameters#list
151 |     */
152 |     list: {
153 |       type: String,
154 |       value: ''
155 |     },
156 | 
157 |     /**
158 |     * See https://developers.google.com/youtube/player_parameters#listtype
159 |     */
160 |     listType: String,
161 | 
162 |     /**
163 |     * Decides whether YouTube API should be loaded.
164 |     */
165 |     shouldLoadApi: {
166 |       type: Boolean,
167 |       computed: '_computeShouldLoadApi(list, videoId)'
168 |     },
169 | 
170 |     /**
171 |     * Whether programmatic `<video>.play()` for initial playback is supported in the current browser.
172 |     *
173 |     * Most mobile browsers [do not support](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1) autoplaying or scripted playback of videos.
174 |     * If you attempt to automatically initiate playback of a `<google-youtube>`, e.g. by calling the `play()` method before
175 |     * playback has initially begun, the YouTube Player will enter an unrecoverable "stuck" state.
176 |     * To protect against this, check the value of `playsupported` and don't call `play()` if it is set to `false`.
177 |     * (You can hide/disable your custom play button, etc.)
178 |     *
179 |     * The `playsupported` value is determined at runtime, by dynamically creating a `<video>` element with an
180 |     * inlined data source and calling `play()` on it. (Inspired by [Modernizr](https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js).)
181 |     *
182 |     * If you would rather not incur the minimal overhead involved in going through this process, you can explicitly set
183 |     * `playsupported` to `true` or `false` when initializing `<google-youtube>`. This is only recommended if you know that
184 |     * your web app will never (or only) be used on mobile browsers.
185 |     */
186 |     playsupported: {
187 |       type: Boolean,
188 |       value: null,
189 |       notify: true
190 |     },
191 | 
192 |     /**
193 |     * "1" if video should start automatically
194 |     */
195 |     autoplay: {
196 |       type: Number,
197 |       value: 0
198 |     },
199 |     /**
200 |     * Whether playback has started.
201 |     *
202 |     * This defaults to `false` and is set to `true` once the first 'playing' event is fired by
203 |     * the underlying YouTube Player API.
204 |     *
205 |     * Once set to `true`, it will remain that way indefinitely.
206 |     * Paused/buffering/ended events won't cause `playbackstarted` to reset to `false`.
207 |     * Nor will loading a new video into the player.
208 |     */
209 |     playbackstarted: {
210 |       type: Boolean,
211 |       value: false,
212 |       notify: true
213 |     },
214 | 
215 |     /**
216 |     * Sets the height of the player on the page.
217 |     * Accepts anything valid for a CSS measurement, e.g. '200px' or '50%'.
218 |     * If the unit of measurement is left off, 'px' is assumed.
219 |     */
220 |     height: {
221 |       type: String,
222 |       value: '270px'
223 |     },
224 | 
225 |     /**
226 |     * Sets the width of the player on the page.
227 |     * Accepts anything valid for a CSS measurement, e.g. '200px' or '50%'.
228 |     * If the unit of measurement is left off, 'px' is assumed.
229 |     */
230 |     width: {
231 |       type: String,
232 |       value:'480px'
233 |     },
234 | 
235 |     /**
236 |     * Exposes the current player state.
237 |     * Using this attribute is an alternative to listening to `google-youtube-state-change` events,
238 |     * and can simplify the logic in templates with conditional binding.
239 |     *
240 |     * The [possible values](https://developers.google.com/youtube/iframe_api_reference#onStateChange):
241 |     *   - -1 (unstarted)
242 |     *   - 0 (ended)
243 |     *   - 1 (playing)
244 |     *   - 2 (paused)
245 |     *   - 3 (buffering)
246 |     *   - 5 (video cued)
247 |     */
248 |     state: {
249 |       type: Number,
250 |       value: -1,
251 |       notify: true
252 |     },
253 | 
254 |     /**
255 |     * Exposes the current playback time, in seconds.
256 |     *
257 |     * You can divide this value by the `duration` to determine the playback percentage.
258 |     *
259 |     * Default type is int. Setting `statsUpdateInterval` to less than a
260 |     * second turns it into float to accommodate higher precision.
261 |     */
262 |     currenttime: {
263 |       type: Number,
264 |       value: 0,
265 |       notify: true
266 |     },
267 | 
268 |     /**
269 |     * Exposes the video duration, in seconds.
270 |     *
271 |     * You can divide the `currenttime` to determine the playback percentage.
272 |     */
273 |     duration: {
274 |       type: Number,
275 |       value: 1, // To avoid divide-by-zero errors if used before video is cued.
276 |       notify: true
277 |     },
278 | 
279 |     /**
280 |     * Exposes the current playback time, formatted as a (HH:)MM:SS string.
281 |     */
282 |     currenttimeformatted: {
283 |       type: String,
284 |       value: '0:00',
285 |       notify: true
286 |     },
287 | 
288 |     /**
289 |     * Exposes the video duration, formatted as a (HH:)MM:SS string.
290 |     */
291 |     durationformatted: {
292 |       type: String,
293 |       value: '0:00', // To avoid divide-by-zero errors if used before video is cued.
294 |       notify: true
295 |     },
296 | 
297 |     /**
298 |     * The fraction of the bytes that have been loaded for the current video, in the range [0-1].
299 |     */
300 |     fractionloaded: {
301 |       type: Number,
302 |       value: 0,
303 |       notify: true
304 |     },
305 | 
306 |     /**
307 |     * A shorthand to enable a set of player attributes that, used together, simulate a "chromeless" YouTube player.
308 |     *
309 |     * Equivalent to setting the following attributes:
310 |     * - `controls="0"`
311 |     * - `modestbranding="1"`
312 |     * - `showinfo="0"`
313 |     * - `iv_load_policy="3"`
314 |     * - `rel="0"`
315 |     *
316 |     * The "chromeless" player has minimal YouTube branding in cued state, and the native controls
317 |     * will be disabled during playback. Creating your own custom play/pause/etc. controls is recommended.
318 |     */
319 |     chromeless: {
320 |       type: Boolean,
321 |       value: false
322 |     },
323 |     /**
324 |     * The URL of an image to use as a custom thumbnail.
325 |     *
326 |     * This is optional; if not provided, the standard YouTube embed (which uses the thumbnail associated
327 |     * with the video on YouTube) will be used.
328 |     *
329 |     * If `thumbnail` is set, than an `<img>` containing the thumbnail will be used in lieu of the actual
330 |     * YouTube embed. When the thumbnail is clicked, the `<img>` is swapped out for the actual YouTube embed,
331 |     * which will have [`autoplay=1`](https://developers.google.com/youtube/player_parameters#autoplay) set by default (in additional to any other player parameters specified on this element).
332 |     *
333 |     * Please note that `autoplay=1` won't actually autoplay videos on mobile browsers, so two taps will be required
334 |     * to play the video there. Also, on desktop browsers, setting `autoplay=1` will prevent the playback
335 |     * from [incrementing the view count](https://support.google.com/youtube/answer/1714329) for the video.
336 |     */
337 |     thumbnail: {
338 |       type: String,
339 |       value: ''
340 |     },
341 | 
342 |     /**
343 |     * If `fluid` is set, then the player will set its width to 100% to fill
344 |     * the parent container, while adding `padding-top` to preserve the
345 |     * aspect ratio provided by `width` and `height`. If `width` and `height`
346 |     * have not been set, the player will fall back to a 16:9 aspect ratio.
347 |     * This is useful for responsive designs where you don't want to
348 |     * introduce letterboxing on your video.
349 |     */
350 |     fluid: {
351 |       type: Boolean,
352 |       value: false
353 |     },
354 | 
355 |     /**
356 |     * Returns the player's current volume, an integer between 0 and 100.
357 |     * Note that `getVolume()` will return the volume even if the player is muted.
358 |     */
359 |     volume: {
360 |       type: Number,
361 |       value: 100,
362 |       notify: true
363 |     },
364 | 
365 |     /**
366 |     * This function retrieves the playback rate of the currently playing video.
367 |     * The default playback rate is 1, which indicates that the video is playing at normal speed.
368 |     * Playback rates may include values like `0.25`, `0.5`, `1`, `1.5`, and `2`.
369 |     */
370 |     playbackrate: {
371 |       type: Number,
372 |       value: 1,
373 |       notify: true
374 |     },
375 | 
376 |     /**
377 |     * This function retrieves the actual video quality of the current video.
378 |     * Possible return values are `highres`, `hd1080`, `hd720`, `large`, `medium` and `small`.
379 |     * It will also return `undefined` if there is no current video.
380 |     */
381 |     playbackquality: {
382 |       type: String,
383 |       value: '',
384 |       notify: true
385 |     },
386 | 
387 |     /**
388 |      * Sets refresh interval in milliseconds for updating playback stats.
389 |      * YouTube API does not send events for video progress so we have to
390 |      * call getCurrentTime() manually. Smaller value makes updates smoother.
391 |      *
392 |      * When the value is less than 1 second, `currenttime` becomes float to
393 |      * accommodate higher precision (default is int).
394 |      */
395 |     statsUpdateInterval: {
396 |       type: Number,
397 |       value: 1000,
398 |     },
399 | 
400 |   },
401 | 
402 |   _computeContainerStyle: function(width, height) {
403 |     return 'width:' + width + '; height:' + height;
404 |   },
405 | 
406 |   _computeShouldLoadApi: function(videoId, list) {
407 |     return Boolean(videoId || list);
408 |   },
409 | 
410 |   _useExistingPlaySupportedValue: function() {
411 |     this.playsupported = this._playsupportedLocalStorage;
412 |   },
413 | 
414 |   /**
415 |   * Detects whether programmatic <video>.play() is supported in the current browser.
416 |   *
417 |   * This is triggered via on-ironlocalstorage-load-empty. The logic is:
418 |   * - If playsupported is explicitly set to true or false on the element, use that.
419 |   * - Otherwise, if there's a cached value in localStorage, use that.
420 |   * - Otherwise, create a hidden <video> element and call play() on it:
421 |   *   - If playback starts, playsupported is true.
422 |   *   - If playback doesn't start (within 500ms), playsupported is false.
423 |   *   - Whatever happens, cache the result in localStorage.
424 |   */
425 |   _determinePlaySupported: function() {
426 |     // If playsupported isn't already being overridden by the page using this component,
427 |     // then attempt to determine if it's supported.
428 |     // This is deliberately checking with ==, to match either undefined or null.
429 |     if (this.playsupported == null) {
430 |       // Run a new playback test.
431 |       var timeout;
432 |       var videoElement = document.createElement('video');
433 | 
434 |       if ('play' in videoElement) {
435 |         videoElement.id = 'playtest';
436 |         // Some browsers will refuse to play videos with 'display: none' set,
437 |         // so position the video well offscreen instead.
438 |         // Modify the .style property directly instead of using CSS to work around polyfill
439 |         // issues; see https://github.com/GoogleWebComponents/google-youtube/issues/49
440 |         videoElement.style.position = 'absolute';
441 |         videoElement.style.top = '-9999px';
442 |         videoElement.style.left = '-9999px';
443 | 
444 |         var mp4Source = document.createElement('source');
445 |         mp4Source.src = "data:video/mp4;base64,AAAAFGZ0eXBNU05WAAACAE1TTlYAAAOUbW9vdgAAAGxtdmhkAAAAAM9ghv7PYIb+AAACWAAACu8AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAnh0cmFrAAAAXHRraGQAAAAHz2CG/s9ghv4AAAABAAAAAAAACu8AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAFAAAAA4AAAAAAHgbWRpYQAAACBtZGhkAAAAAM9ghv7PYIb+AAALuAAANq8AAAAAAAAAIWhkbHIAAAAAbWhscnZpZGVBVlMgAAAAAAABAB4AAAABl21pbmYAAAAUdm1oZAAAAAAAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAVdzdGJsAAAAp3N0c2QAAAAAAAAAAQAAAJdhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAFAAOABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAEmNvbHJuY2xjAAEAAQABAAAAL2F2Y0MBTUAz/+EAGGdNQDOadCk/LgIgAAADACAAAAMA0eMGVAEABGjuPIAAAAAYc3R0cwAAAAAAAAABAAAADgAAA+gAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAADgAAAAEAAABMc3RzegAAAAAAAAAAAAAADgAAAE8AAAAOAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA4AAAAOAAAAFHN0Y28AAAAAAAAAAQAAA7AAAAA0dXVpZFVTTVQh0k/Ou4hpXPrJx0AAAAAcTVREVAABABIAAAAKVcQAAAAAAAEAAAAAAAAAqHV1aWRVU01UIdJPzruIaVz6ycdAAAAAkE1URFQABAAMAAAAC1XEAAACHAAeAAAABBXHAAEAQQBWAFMAIABNAGUAZABpAGEAAAAqAAAAASoOAAEAZABlAHQAZQBjAHQAXwBhAHUAdABvAHAAbABhAHkAAAAyAAAAA1XEAAEAMgAwADAANQBtAGUALwAwADcALwAwADYAMAA2ACAAMwA6ADUAOgAwAAABA21kYXQAAAAYZ01AM5p0KT8uAiAAAAMAIAAAAwDR4wZUAAAABGjuPIAAAAAnZYiAIAAR//eBLT+oL1eA2Nlb/edvwWZflzEVLlhlXtJvSAEGRA3ZAAAACkGaAQCyJ/8AFBAAAAAJQZoCATP/AOmBAAAACUGaAwGz/wDpgAAAAAlBmgQCM/8A6YEAAAAJQZoFArP/AOmBAAAACUGaBgMz/wDpgQAAAAlBmgcDs/8A6YEAAAAJQZoIBDP/AOmAAAAACUGaCQSz/wDpgAAAAAlBmgoFM/8A6YEAAAAJQZoLBbP/AOmAAAAACkGaDAYyJ/8AFBAAAAAKQZoNBrIv/4cMeQ==";
446 |         videoElement.appendChild(mp4Source);
447 | 
448 |         var webmSource = document.createElement('source');
449 |         webmSource.src = "data:video/webm;base64,GkXfo49CgoR3ZWJtQoeBAUKFgQEYU4BnAQAAAAAAF60RTZt0vE27jFOrhBVJqWZTrIIQA027jFOrhBZUrmtTrIIQbE27jFOrhBFNm3RTrIIXmU27jFOrhBxTu2tTrIIWs+xPvwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFUmpZuQq17GDD0JATYCjbGliZWJtbCB2MC43LjcgKyBsaWJtYXRyb3NrYSB2MC44LjFXQY9BVlNNYXRyb3NrYUZpbGVEiYRFnEAARGGIBc2Lz1QNtgBzpJCy3XZ0KNuKNZS4+fDpFxzUFlSua9iu1teBAXPFhL4G+bmDgQG5gQGIgQFVqoEAnIEAbeeBASMxT4Q/gAAAVe6BAIaFVl9WUDiqgQEj44OEE95DVSK1nIN1bmTgkbCBULqBPJqBAFSwgVBUuoE87EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB9DtnVB4eeBAKC4obaBAAAAkAMAnQEqUAA8AABHCIWFiIWEiAICAAamYnoOC6cfJa8f5Zvda4D+/7YOf//nNefQYACgnKGWgQFNANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQKbANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQPoANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQU1ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQaDANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQfQANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQkdANEBAAEQEBRgAGFgv9AAIiGAAPuC/rOgnKGWgQprANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQu4ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ0FANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ5TANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQ+gANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRDtANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRI7ANEBAAEQEAAYABhYL/QACIhgAPuC/rIcU7trQOC7jLOBALeH94EB8YIUzLuNs4IBTbeH94EB8YIUzLuNs4ICm7eH94EB8YIUzLuNs4ID6LeH94EB8YIUzLuNs4IFNbeH94EB8YIUzLuNs4IGg7eH94EB8YIUzLuNs4IH0LeH94EB8YIUzLuNs4IJHbeH94EB8YIUzLuNs4IKa7eH94EB8YIUzLuNs4ILuLeH94EB8YIUzLuNs4INBbeH94EB8YIUzLuNs4IOU7eH94EB8YIUzLuNs4IPoLeH94EB8YIUzLuNs4IQ7beH94EB8YIUzLuNs4ISO7eH94EB8YIUzBFNm3SPTbuMU6uEH0O2dVOsghTM";
450 |         videoElement.appendChild(webmSource);
451 | 
452 |         document.body.appendChild(videoElement);
453 | 
454 |         this.async(function() {
455 |           // Ideally, we'll get a 'playing' event if we're on a browser that supports
456 |           // programmatic play().
457 |           videoElement.onplaying = function(e) {
458 |             clearTimeout(timeout);
459 | 
460 |             this.playsupported = (e && e.type === 'playing') || videoElement.currentTime !== 0;
461 |             this._playsupportedLocalStorage = this.playsupported;
462 | 
463 |             videoElement.onplaying = null;
464 | 
465 |             document.body.removeChild(videoElement);
466 |           }.bind(this);
467 | 
468 |           // If we haven't received a 'playing' event within 500ms, then we're most likely on a browser that doesn't
469 |           // support programmatic plays. Do a final check after 500ms and set this.playsupported at that point.
470 |           timeout = setTimeout(videoElement.onplaying, 500);
471 | 
472 |           // Try to initiate playback...
473 |           videoElement.play();
474 |         });
475 |       } else {
476 |         // If there's no play() method then we know that it's not supported.
477 |         this.playsupported = false;
478 |         this._playsupportedLocalStorage = false;
479 |       }
480 |     }
481 |   },
482 | 
483 |   /**
484 |   * Sets fluid width/height.
485 |   *
486 |   * If the fluid attribute is set, the aspect ratio of the video will
487 |   * be inferred (if set in pixels), or assumed to be 16:9. The element
488 |   * will give itself enough top padding to force the player to use the
489 |   * correct aspect ratio, even as the screen size changes.
490 |   *
491 |   */
492 |   ready: function() {
493 |     if (this.hasAttribute('fluid')) {
494 |       var ratio = parseInt(this.height, 10) / parseInt(this.width, 10);
495 |       if (isNaN(ratio)) {
496 |         ratio = 9/16;
497 |       }
498 |       ratio *= 100;
499 |       this.width = '100%';
500 |       this.height = 'auto';
501 |       this.$.container.style['padding-top'] = ratio + '%';
502 |     }
503 |   },
504 | 
505 |   /**
506 |   * Clean up the underlying Player `<iframe>` when we're removed from the DOM.
507 |   */
508 |   detached: function() {
509 |     if (this._player) {
510 |       this._player.destroy();
511 |     }
512 |   },
513 | 
514 |   /**
515 |   * Plays the current video.
516 |   *
517 |   * Note that on certain mobile browsers, playback
518 |   * [can't be initiated programmatically](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations).
519 |   *
520 |   * If `this.playsupported` is not `true`, calling `play()` will have no effect.
521 |   *
522 |   * @method play
523 |   */
524 |   play: function() {
525 |     if (this._player && this._player.playVideo && this.playsupported) {
526 |       this._player.playVideo();
527 |     }
528 |   },
529 | 
530 |   /**
531 |   * Modifies the volume of the current video.
532 |   *
533 |   * Developers should take care not to break expected user experience by programmatically
534 |   * modifying the volume on mobile browsers.
535 |   * Note that the YouTube player, in addition, does not display volume controls in a
536 |   * mobile environment.
537 |   *
538 |   * @method setVolume
539 |   * @param {number} volume The new volume, an integer between 0 (muted) and 100 (loudest).
540 |   */
541 |   setVolume: function(volume) {
542 |     if (this._player && this._player.setVolume) {
543 |       this._player.setVolume(volume);
544 |     }
545 |   },
546 | 
547 |   /**
548 |   * Mutes the current video.
549 |   *
550 |   * Developers should take care not to break expected user experience by programmatically
551 |   * modifying the volume on mobile browsers.
552 |   * Note that the YouTube player, in addition, does not display volume controls in a
553 |   * mobile environment.
554 |   *
555 |   * @method mute
556 |   */
557 |   mute: function() {
558 |     if (this._player && this._player.mute) {
559 |       this._player.mute();
560 |     }
561 |   },
562 | 
563 |   /**
564 |   * Unmutes the current video.
565 |   *
566 |   * Developers should take care not to break expected user experience by programmatically
567 |   * modifying the volume on mobile browsers.
568 |   * Note that the YouTube player, in addition, does not display volume controls in a
569 |   * mobile environment.
570 |   *
571 |   * @method unMute
572 |   */
573 |   unMute: function() {
574 |     if (this._player && this._player.unMute) {
575 |       this._player.unMute();
576 |     }
577 |   },
578 | 
579 |   /**
580 |   * Pauses the current video.
581 |   *
582 |   * @method pause
583 |   */
584 |   pause: function() {
585 |     if (this._player && this._player.pauseVideo) {
586 |       this._player.pauseVideo();
587 |     }
588 |   },
589 | 
590 |   /**
591 |   * Skips ahead (or back) to the specified number of seconds.
592 |   *
593 |   * @method seekTo
594 |   * @param {number} seconds Number of seconds to seek to.
595 |   */
596 |   seekTo: function(seconds) {
597 |     if (this._player && this._player.seekTo) {
598 |       this._player.seekTo(seconds, true);
599 | 
600 |       // Explicitly call _updatePlaybackStats() to ensure that the new playback info is
601 |       // reflected in the bound attributes.
602 |       // The 100ms delay is somewhat arbitrary, but the YouTube player does need time to
603 |       // update its internal state following the call to player.seekTo().
604 |       this.async(function() {
605 |         this._updatePlaybackStats();
606 |       }, 100);
607 |     }
608 |   },
609 | 
610 |   /**
611 |   * This function sets the suggested playback rate for the current video.
612 |   * If the playback rate changes, it will only change for the video that is already cued or being played.
613 |   * If you set the playback rate for a cued video, that rate will still be in effect when the `playVideo` function is called or the user initiates playback directly through the player controls.
614 |   * In addition, calling functions to cue or load videos or playlists (`cueVideoById`, `loadVideoById`, etc.) will reset the playback rate to 1.
615 |   *
616 |   * Calling this function does not guarantee that the playback rate will actually change.
617 |   * However, if the playback rate does change, the `onPlaybackRateChange` event will fire, and your code should respond to the event rather than the fact that it called the `setPlaybackRate` function.
618 |   *
619 |   * The `getAvailablePlaybackRates` method will return the possible playback rates for the currently playing video.
620 |   * However, if you set the `suggestedRate` parameter to a non-supported integer or float value, the player will round that value down to the nearest supported value in the direction of 1.
621 |   *
622 |   * @method setPlaybackRate
623 |   * @param {number} suggestedRate Playback rate for the current video.
624 |   */
625 |   setPlaybackRate: function(suggestedRate) {
626 |     if(this._player && this._player.setPlaybackRate) {
627 |       this._player.setPlaybackRate(suggestedRate);
628 |     }
629 |   },
630 | 
631 |   /**
632 |   * This function sets the suggested video quality for the current video.
633 |   * The function causes the video to reload at its current position in the new quality.
634 |   * If the playback quality does change, it will only change for the video being played.
635 |   * Calling this function does not guarantee that the playback quality will actually change.
636 |   * However, if the playback quality does change, the `onPlaybackQualityChange` event will fire, and your code should respond to the event rather than the fact that it called the `setPlaybackQuality` function.
637 |   *
638 |   * The `suggestedQuality` parameter value can be `small`, `medium`, `large`, `hd720`, `hd1080`, `highres` or `default`.
639 |   * We recommend that you set the parameter value to default, which instructs YouTube to select the most appropriate playback quality, which will vary for different users, videos, systems and other playback conditions.
640 |   *
641 |   * When you suggest a playback quality for a video, the suggested quality will only be in effect for that video.
642 |   * You should select a playback quality that corresponds to the size of your video player.
643 |   * For example, if your page displays a `1280px` by `720px` video player, a `hd720` quality video will actually look better than an `hd1080` quality video.
644 |   * We recommend calling the `getAvailableQualityLevels()` function to determine which quality levels are available for a video.
645 |   *
646 |   * The list below shows the playback quality levels that correspond to different standard player sizes.
647 |   * We recommend that you set the height of your video player to one of the values listed below and that you size your player to use 16:9 aspect ratio.
648 |   * As stated above, even if you choose a standard player size, we also recommend that you set the `suggestedQuality` parameter value to default to enable YouTube to select the most appropriate playback quality.
649 |   *
650 |   * - `small`: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
651 |   * - `medium`: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
652 |   * - `large`: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
653 |   * - `hd720`: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
654 |   * - `hd1080`: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
655 |   * - `highres`: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.
656 |   * - `default`: YouTube selects the appropriate playback quality. This setting effectively reverts the quality level to the default state and nullifies any previous efforts to set playback quality using the `cueVideoById`, `loadVideoById` or `setPlaybackQuality` functions.
657 |   *
658 |   * If you call the `setPlaybackQuality` function with a `suggestedQuality` level that is not available for the video, then the quality will be set to the next lowest level that is available.
659 |   * For example, if you request a quality level of large, and that is unavailable, then the playback quality will be set to medium (as long as that quality level is available).
660 |   *
661 |   * In addition, setting `suggestedQuality` to a value that is not a recognized quality level is equivalent to setting `suggestedQuality` to default.
662 |   *
663 |   * @method setPlaybackQuality
664 |   * @param {string} suggestedQuality Playback quality for the current video.
665 |   */
666 |   setPlaybackQuality: function(suggestedQuality) {
667 |     if(this._player && this._player.setPlaybackQuality) {
668 |       this._player.setPlaybackQuality(suggestedQuality);
669 |     }
670 |   },
671 | 
672 |   _videoIdChanged: function() {
673 |     if (!this.videoId) {
674 |       return;
675 |     }
676 | 
677 |     this.currenttime = 0;
678 |     this.currenttimeformatted = this._toHHMMSS(0);
679 |     this.fractionloaded = 0;
680 |     this.duration = 1;
681 |     this.durationformatted = this._toHHMMSS(0);
682 | 
683 |     if (!this._player || !this._player.cueVideoById) {
684 |       this._pendingVideoId = this.videoId;
685 |     } else {
686 |       // Figure out whether we should cue or load (which will autoplay) the next video.
687 |       if (this.playsupported && this.attributes['autoplay'] && this.attributes['autoplay'].value == '1') {
688 |         this._player.loadVideoById(this.videoId);
689 |       } else {
690 |         this._player.cueVideoById(this.videoId);
691 |       }
692 |     }
693 |   },
694 | 
695 |   _player: null,
696 |   __updatePlaybackStatsInterval: null,
697 |   _pendingVideoId: '',
698 | 
699 |   _apiLoad: function() {
700 |     // Establish some defaults. Attributes set on the google-youtube element
701 |     // can override defaults, or specify additional player parameters. See
702 |     // https://developers.google.com/youtube/player_parameters
703 |     var playerVars = {
704 |       playsinline: 1,
705 |       controls: 2,
706 |       autohide: 1,
707 |       // This will (intentionally) be overwritten if this.attributes['autoplay'] is set.
708 |       autoplay: this.autoplay
709 |     };
710 | 
711 |     if (this.chromeless) {
712 |       playerVars.controls = 0;
713 |       playerVars.modestbranding = 1;
714 |       playerVars.showinfo = 0;
715 |       // Disable annotations.
716 |       playerVars.iv_load_policy = 3;
717 |       // Disable related videos on the end screen.
718 |       playerVars.rel = 0;
719 |     }
720 | 
721 |     for (var i = 0; i < this.attributes.length; i++) {
722 |       var attribute = this.attributes[i];
723 |       playerVars[attribute.nodeName] = attribute.value;
724 |     }
725 | 
726 |     this._player = new YT.Player(this.$.player, {
727 |       videoId: this.videoId,
728 |       width: '100%',
729 |       height: '100%',
730 |       playerVars: playerVars,
731 |       events: {
732 |         onReady: function(e) {
733 |           if (this._pendingVideoId && this._pendingVideoId != this.videoId) {
734 |             this._player.cueVideoById(this._pendingVideoId);
735 |             this._pendingVideoId = '';
736 |           }
737 | 
738 |           this.fire('google-youtube-ready', e);
739 |         }.bind(this),
740 |         onStateChange: function(e) {
741 |           this.state = e.data;
742 | 
743 |           // The YouTube Player API only exposes playback data about a video once
744 |           // playback has begun.
745 |           if (this.state == 1) {
746 |             this.playbackstarted = true;
747 | 
748 |             // After playback has begun, play() can always be used to resume playback if the video is paused.
749 |             this.playsupported = true;
750 | 
751 |             this.duration = this._player.getDuration();
752 |             this.durationformatted = this._toHHMMSS(this.duration);
753 | 
754 |             if (!this.__updatePlaybackStatsInterval) {
755 |               this.__updatePlaybackStatsInterval = setInterval(this._updatePlaybackStats.bind(this), this.statsUpdateInterval);
756 |             }
757 |           } else {
758 |             // We only need to update the stats if the video is playing.
759 |             if (this.__updatePlaybackStatsInterval) {
760 |               clearInterval(this.__updatePlaybackStatsInterval);
761 |               this.__updatePlaybackStatsInterval = null;
762 |             }
763 |           }
764 | 
765 |           this.fire('google-youtube-state-change', e);
766 |         }.bind(this),
767 |         onPlaybackQualityChange: function(e) {
768 |           this.playbackquality = e.data;
769 |         }.bind(this),
770 |         onPlaybackRateChange: function(e) {
771 |           this.playbackrate = e.data;
772 |         }.bind(this),
773 |         onError: function(e) {
774 |           // Set the player state to 0 ('ended'), since playback will have stopped.
775 |           this.state = 0;
776 | 
777 |           this.fire('google-youtube-error', e);
778 |         }.bind(this)
779 |       }
780 |     });
781 |   },
782 | 
783 |   _updatePlaybackStats: function() {
784 |     // `currenttime` was int before `statsUpdateInterval` was added.
785 |     this.currenttime = this.statsUpdateInterval >= 1000
786 |         ? Math.round(this._player.getCurrentTime())
787 |         : this._player.getCurrentTime();
788 | 
789 |     this.currenttimeformatted = this._toHHMMSS(this.currenttime);
790 |     this.fractionloaded = this._player.getVideoLoadedFraction();
791 |     this.volume = this._player.getVolume();
792 |   },
793 | 
794 |   _toHHMMSS: function(totalSeconds) {
795 |     var hours = Math.floor(totalSeconds / 3600);
796 |     totalSeconds -= hours * 3600;
797 |     var minutes = Math.floor(totalSeconds / 60);
798 |     var seconds = Math.round(totalSeconds - (minutes * 60));
799 | 
800 |     var hourPortion = '';
801 |     if (hours > 0) {
802 |       hourPortion += hours + ':';
803 | 
804 |       if (minutes < 10) {
805 |         minutes = '0' + minutes;
806 |       }
807 |     }
808 | 
809 |     if (seconds < 10) {
810 |       seconds = '0' + seconds;
811 |     }
812 | 
813 |     return hourPortion + minutes + ':' + seconds;
814 |   },
815 | 
816 |   _handleThumbnailTap: function() {
817 |     this.autoplay = 1;
818 |     this.thumbnail = '';
819 |   }
820 | });
821 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
 3 | <html>
 4 | <head>
 5 | 
 6 |   <script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 7 |   <script type="module" src="../../@polymer/iron-component-page/iron-component-page.js"></script>
 8 | 
 9 | </head>
10 | <body>
11 | 
12 |   <iron-component-page></iron-component-page>
13 | 
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@google-web-components/google-youtube",
  3 |   "version": "3.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "@google-web-components/google-apis": {
  8 |       "version": "3.0.1",
  9 |       "resolved": "https://registry.npmjs.org/@google-web-components/google-apis/-/google-apis-3.0.1.tgz",
 10 |       "integrity": "sha512-mOY53UgHz0bQKLRhunMgC+2skTHniq7UWlQ3rs3x9tcZDbTuxe5d9tZA1wt/j4vXViBHa//G+b3Syx8XOoqAwg==",
 11 |       "requires": {
 12 |         "@polymer/iron-jsonp-library": "^3.0.0-pre.19",
 13 |         "@polymer/polymer": "^3.0.0"
 14 |       }
 15 |     },
 16 |     "@polymer/app-layout": {
 17 |       "version": "3.0.2",
 18 |       "resolved": "https://registry.npmjs.org/@polymer/app-layout/-/app-layout-3.0.2.tgz",
 19 |       "integrity": "sha512-qKcQHj72uGxGoetjnNQ7pg4F6Da4U5jKBzZy0VRmDuZMUPDmtIqHaIgC5K6B4y+xUag0gkV9ce72Q3hNaK9y+g==",
 20 |       "dev": true,
 21 |       "requires": {
 22 |         "@polymer/iron-flex-layout": "^3.0.0-pre.26",
 23 |         "@polymer/iron-media-query": "^3.0.0-pre.26",
 24 |         "@polymer/iron-resizable-behavior": "^3.0.0-pre.26",
 25 |         "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.26",
 26 |         "@polymer/polymer": "^3.0.0"
 27 |       }
 28 |     },
 29 |     "@polymer/font-roboto": {
 30 |       "version": "3.0.2",
 31 |       "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz",
 32 |       "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA==",
 33 |       "dev": true
 34 |     },
 35 |     "@polymer/iron-a11y-announcer": {
 36 |       "version": "3.0.2",
 37 |       "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.0.2.tgz",
 38 |       "integrity": "sha512-LqnMF39mXyxSSRbTHRzGbcJS8nU0NVTo2raBOgOlpxw5yfGJUVcwaTJ/qy5NtWCZLRfa4suycf0oAkuUjHTXHQ==",
 39 |       "dev": true,
 40 |       "requires": {
 41 |         "@polymer/polymer": "^3.0.0"
 42 |       }
 43 |     },
 44 |     "@polymer/iron-a11y-keys-behavior": {
 45 |       "version": "3.0.1",
 46 |       "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz",
 47 |       "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==",
 48 |       "dev": true,
 49 |       "requires": {
 50 |         "@polymer/polymer": "^3.0.0"
 51 |       }
 52 |     },
 53 |     "@polymer/iron-ajax": {
 54 |       "version": "3.0.1",
 55 |       "resolved": "https://registry.npmjs.org/@polymer/iron-ajax/-/iron-ajax-3.0.1.tgz",
 56 |       "integrity": "sha512-7+TPEAfWsRdhj1Y8UeF1759ktpVu+c3sG16rJiUC3wF9+woQ9xI1zUm2d59i7Yc3aDEJrR/Q8Y262KlOvyGVNg==",
 57 |       "dev": true,
 58 |       "requires": {
 59 |         "@polymer/polymer": "^3.0.0"
 60 |       }
 61 |     },
 62 |     "@polymer/iron-behaviors": {
 63 |       "version": "3.0.1",
 64 |       "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.1.tgz",
 65 |       "integrity": "sha512-IMEwcv1lhf1HSQxuyWOUIL0lOBwmeaoSTpgCJeP9IBYnuB1SPQngmfRuHKgK6/m9LQ9F9miC7p3HeQQUdKAE0w==",
 66 |       "dev": true,
 67 |       "requires": {
 68 |         "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
 69 |         "@polymer/polymer": "^3.0.0"
 70 |       }
 71 |     },
 72 |     "@polymer/iron-checked-element-behavior": {
 73 |       "version": "3.0.1",
 74 |       "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.1.tgz",
 75 |       "integrity": "sha512-aDr0cbCNVq49q+pOqa6CZutFh+wWpwPMLpEth9swx+GkAj+gCURhuQkaUYhIo5f2egDbEioR1aeHMnPlU9dQZA==",
 76 |       "dev": true,
 77 |       "requires": {
 78 |         "@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
 79 |         "@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
 80 |         "@polymer/polymer": "^3.0.0"
 81 |       }
 82 |     },
 83 |     "@polymer/iron-component-page": {
 84 |       "version": "3.0.0-pre.21",
 85 |       "resolved": "https://registry.npmjs.org/@polymer/iron-component-page/-/iron-component-page-3.0.0-pre.21.tgz",
 86 |       "integrity": "sha512-dc7P/wCY6J/ApVvQd6gZXVbB3ZGt/pmFtn/uaTbiSNRitzu9Fu+HaQsAtWLu4QbaZjSALTY70i7Im7LGUi6qFA==",
 87 |       "dev": true,
 88 |       "requires": {
 89 |         "@polymer/app-layout": "^3.0.0-pre.21",
 90 |         "@polymer/iron-ajax": "^3.0.0-pre.21",
 91 |         "@polymer/iron-doc-viewer": "^3.0.0-pre.21",
 92 |         "@polymer/iron-icons": "^3.0.0-pre.21",
 93 |         "@polymer/paper-icon-button": "^3.0.0-pre.21",
 94 |         "@polymer/paper-styles": "^3.0.0-pre.21",
 95 |         "@polymer/paper-toast": "^3.0.0-pre.21",
 96 |         "@polymer/polymer": "^3.0.0"
 97 |       }
 98 |     },
 99 |     "@polymer/iron-doc-viewer": {
100 |       "version": "3.0.0-pre.21",
101 |       "resolved": "https://registry.npmjs.org/@polymer/iron-doc-viewer/-/iron-doc-viewer-3.0.0-pre.21.tgz",
102 |       "integrity": "sha512-9U4Xia/swdrk2BmXx0VUzkOZhncveQDWDZZ2DYFiW3TCSl4zU57o+5bSlZyRXsvr7ddOgqRr5Yw1zhGgFSxGEQ==",
103 |       "dev": true,
104 |       "requires": {
105 |         "@polymer/iron-location": "^3.0.0-pre.21",
106 |         "@polymer/marked-element": "^3.0.0-pre.21",
107 |         "@polymer/paper-styles": "^3.0.0-pre.21",
108 |         "@polymer/polymer": "^3.0.0",
109 |         "@polymer/prism-element": "^3.0.0-pre.21"
110 |       }
111 |     },
112 |     "@polymer/iron-fit-behavior": {
113 |       "version": "3.0.1",
114 |       "resolved": "https://registry.npmjs.org/@polymer/iron-fit-behavior/-/iron-fit-behavior-3.0.1.tgz",
115 |       "integrity": "sha512-/M0B1L30k31vmwNBaGuZcxzUAhJSHoGccb/DF0CDKI/hT8UlkTvcyemaWdOpmHHLgY52ceKIkRwA3AeXrKyvaQ==",
116 |       "dev": true,
117 |       "requires": {
118 |         "@polymer/polymer": "^3.0.0"
119 |       }
120 |     },
121 |     "@polymer/iron-flex-layout": {
122 |       "version": "3.0.1",
123 |       "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz",
124 |       "integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==",
125 |       "dev": true,
126 |       "requires": {
127 |         "@polymer/polymer": "^3.0.0"
128 |       }
129 |     },
130 |     "@polymer/iron-form-element-behavior": {
131 |       "version": "3.0.1",
132 |       "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.1.tgz",
133 |       "integrity": "sha512-G/e2KXyL5AY7mMjmomHkGpgS0uAf4ovNpKhkuUTRnMuMJuf589bKqE85KN4ovE1Tzhv2hJoh/igyD6ekHiYU1A==",
134 |       "dev": true,
135 |       "requires": {
136 |         "@polymer/polymer": "^3.0.0"
137 |       }
138 |     },
139 |     "@polymer/iron-icon": {
140 |       "version": "3.0.1",
141 |       "resolved": "https://registry.npmjs.org/@polymer/iron-icon/-/iron-icon-3.0.1.tgz",
142 |       "integrity": "sha512-QLPwirk+UPZNaLnMew9VludXA4CWUCenRewgEcGYwdzVgDPCDbXxy6vRJjmweZobMQv/oVLppT2JZtJFnPxX6g==",
143 |       "dev": true,
144 |       "requires": {
145 |         "@polymer/iron-flex-layout": "^3.0.0-pre.26",
146 |         "@polymer/iron-meta": "^3.0.0-pre.26",
147 |         "@polymer/polymer": "^3.0.0"
148 |       }
149 |     },
150 |     "@polymer/iron-icons": {
151 |       "version": "3.0.1",
152 |       "resolved": "https://registry.npmjs.org/@polymer/iron-icons/-/iron-icons-3.0.1.tgz",
153 |       "integrity": "sha512-xtEI8erH2GIBiF3QxEMyW81XuVjguu6Le5WjEEpX67qd9z7jjmc4T/ke3zRUlnDydex9p8ytcwVpMIKcyvjYAQ==",
154 |       "dev": true,
155 |       "requires": {
156 |         "@polymer/iron-icon": "^3.0.0-pre.26",
157 |         "@polymer/iron-iconset-svg": "^3.0.0-pre.26",
158 |         "@polymer/polymer": "^3.0.0"
159 |       }
160 |     },
161 |     "@polymer/iron-iconset-svg": {
162 |       "version": "3.0.1",
163 |       "resolved": "https://registry.npmjs.org/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.1.tgz",
164 |       "integrity": "sha512-XNwURbNHRw6u2fJe05O5fMYye6GSgDlDqCO+q6K1zAnKIrpgZwf2vTkBd5uCcZwsN0FyCB3mvNZx4jkh85dRDw==",
165 |       "dev": true,
166 |       "requires": {
167 |         "@polymer/iron-meta": "^3.0.0-pre.26",
168 |         "@polymer/polymer": "^3.0.0"
169 |       }
170 |     },
171 |     "@polymer/iron-jsonp-library": {
172 |       "version": "3.0.1",
173 |       "resolved": "https://registry.npmjs.org/@polymer/iron-jsonp-library/-/iron-jsonp-library-3.0.1.tgz",
174 |       "integrity": "sha512-JpIommURLt9DCqcaJaxsUiDWEaVWV2zoq12oJAMO65Do9Sl9TAv556bI7I4mLJcE40otPZ4wYap4kFViORMiKA==",
175 |       "requires": {
176 |         "@polymer/polymer": "^3.0.0"
177 |       }
178 |     },
179 |     "@polymer/iron-localstorage": {
180 |       "version": "3.0.1",
181 |       "resolved": "https://registry.npmjs.org/@polymer/iron-localstorage/-/iron-localstorage-3.0.1.tgz",
182 |       "integrity": "sha512-Aep+1SYQSHtDu9flQA/m6kfX+2LOjegohB89cp0/oAFYw6XvxO1IcZrTsEGQuYl/9xrrk1vbjsbZR9zSVe4IIg==",
183 |       "requires": {
184 |         "@polymer/polymer": "^3.0.0"
185 |       }
186 |     },
187 |     "@polymer/iron-location": {
188 |       "version": "3.0.1",
189 |       "resolved": "https://registry.npmjs.org/@polymer/iron-location/-/iron-location-3.0.1.tgz",
190 |       "integrity": "sha512-almb+p/fdSi4bxG+vyXjY51fDZxHMxwiug51Lfvr86wZRXN/u21Y6BapxG5n9f0hPSy9fimjIAvaYmozi7VjyQ==",
191 |       "dev": true,
192 |       "requires": {
193 |         "@polymer/polymer": "^3.0.0"
194 |       }
195 |     },
196 |     "@polymer/iron-media-query": {
197 |       "version": "3.0.1",
198 |       "resolved": "https://registry.npmjs.org/@polymer/iron-media-query/-/iron-media-query-3.0.1.tgz",
199 |       "integrity": "sha512-czUX1pm1zfmfcZtq5J57XFkcobBv08Y50exp0/3v8Bos5VL/jv2tU0RwiTfDBxUMhjicGbgwEBFQPY2V5DMzyw==",
200 |       "dev": true,
201 |       "requires": {
202 |         "@polymer/polymer": "^3.0.0"
203 |       }
204 |     },
205 |     "@polymer/iron-meta": {
206 |       "version": "3.0.1",
207 |       "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz",
208 |       "integrity": "sha512-pWguPugiLYmWFV9UWxLWzZ6gm4wBwQdDy4VULKwdHCqR7OP7u98h+XDdGZsSlDPv6qoryV/e3tGHlTIT0mbzJA==",
209 |       "dev": true,
210 |       "requires": {
211 |         "@polymer/polymer": "^3.0.0"
212 |       }
213 |     },
214 |     "@polymer/iron-overlay-behavior": {
215 |       "version": "3.0.2",
216 |       "resolved": "https://registry.npmjs.org/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-3.0.2.tgz",
217 |       "integrity": "sha512-j1qmt6mJHCwpe1mKOvqK5kcCUPQr5LSrlqpgRDbUuLgUfNJ/vGTipjrkBlfbEUagm5FEQdc1VLPLSQP6WVuP9g==",
218 |       "dev": true,
219 |       "requires": {
220 |         "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
221 |         "@polymer/iron-fit-behavior": "^3.0.0-pre.26",
222 |         "@polymer/iron-resizable-behavior": "^3.0.0-pre.26",
223 |         "@polymer/polymer": "^3.0.0"
224 |       }
225 |     },
226 |     "@polymer/iron-resizable-behavior": {
227 |       "version": "3.0.1",
228 |       "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.1.tgz",
229 |       "integrity": "sha512-FyHxRxFspVoRaeZSWpT3y0C9awomb4tXXolIJcZ7RvXhMP632V5lez+ch5G5SwK0LpnAPkg35eB0LPMFv+YMMQ==",
230 |       "dev": true,
231 |       "requires": {
232 |         "@polymer/polymer": "^3.0.0"
233 |       }
234 |     },
235 |     "@polymer/iron-scroll-target-behavior": {
236 |       "version": "3.0.1",
237 |       "resolved": "https://registry.npmjs.org/@polymer/iron-scroll-target-behavior/-/iron-scroll-target-behavior-3.0.1.tgz",
238 |       "integrity": "sha512-xg1WanG25BIkQE8rhuReqY9zx1K5M7F+YAIYpswEp5eyDIaZ1Y3vUmVeQ3KG+hiSugzI1M752azXN7kvyhOBcQ==",
239 |       "dev": true,
240 |       "requires": {
241 |         "@polymer/polymer": "^3.0.0"
242 |       }
243 |     },
244 |     "@polymer/iron-validatable-behavior": {
245 |       "version": "3.0.1",
246 |       "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz",
247 |       "integrity": "sha512-wwpYh6wOa4fNI+jH5EYKC7TVPYQ2OfgQqocWat7GsNWcsblKYhLYbwsvEY5nO0n2xKqNfZzDLrUom5INJN7msQ==",
248 |       "dev": true,
249 |       "requires": {
250 |         "@polymer/iron-meta": "^3.0.0-pre.26",
251 |         "@polymer/polymer": "^3.0.0"
252 |       }
253 |     },
254 |     "@polymer/marked-element": {
255 |       "version": "3.0.1",
256 |       "resolved": "https://registry.npmjs.org/@polymer/marked-element/-/marked-element-3.0.1.tgz",
257 |       "integrity": "sha512-WJQzQetxdStVGQbyTBUBgd+hSI0Rl39uJg7b2zL3r6EfMnibzmA/YNT06M8jVZdxPF+B4SumrFWRtasVtGQRUQ==",
258 |       "dev": true,
259 |       "requires": {
260 |         "@polymer/polymer": "^3.0.0",
261 |         "marked": "~0.3.9"
262 |       }
263 |     },
264 |     "@polymer/paper-behaviors": {
265 |       "version": "3.0.1",
266 |       "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz",
267 |       "integrity": "sha512-6knhj69fPJejv8qR0kCSUY+Q0XjaUf0OSnkjRjmTJPAwSrRYtgqE+l6P1FfA+py1X/cUjgne9EF5rMZAKJIg1g==",
268 |       "dev": true,
269 |       "requires": {
270 |         "@polymer/iron-behaviors": "^3.0.0-pre.26",
271 |         "@polymer/iron-checked-element-behavior": "^3.0.0-pre.26",
272 |         "@polymer/paper-ripple": "^3.0.0-pre.26",
273 |         "@polymer/polymer": "^3.0.0"
274 |       }
275 |     },
276 |     "@polymer/paper-icon-button": {
277 |       "version": "3.0.1",
278 |       "resolved": "https://registry.npmjs.org/@polymer/paper-icon-button/-/paper-icon-button-3.0.1.tgz",
279 |       "integrity": "sha512-iGzCargoYI2yOgedwTvT3kt4bMUsgGzITakPYx1qN1v6xiOAr67Zf/tp2JKqqdtyySDsJYck9o4FLf4ymvZJoA==",
280 |       "dev": true,
281 |       "requires": {
282 |         "@polymer/iron-icon": "^3.0.0-pre.26",
283 |         "@polymer/paper-behaviors": "^3.0.0-pre.27",
284 |         "@polymer/paper-styles": "^3.0.0-pre.26",
285 |         "@polymer/polymer": "^3.0.0"
286 |       }
287 |     },
288 |     "@polymer/paper-ripple": {
289 |       "version": "3.0.1",
290 |       "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.1.tgz",
291 |       "integrity": "sha512-dgOe12GyCF1VZBLUQqnzGWlf3xb255FajNCVB1VFj/AtskYtoamnafa7m3a+1vs+C8qbg4Benn5KwgxVDSW4cg==",
292 |       "dev": true,
293 |       "requires": {
294 |         "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
295 |         "@polymer/polymer": "^3.0.0"
296 |       }
297 |     },
298 |     "@polymer/paper-styles": {
299 |       "version": "3.0.1",
300 |       "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz",
301 |       "integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==",
302 |       "dev": true,
303 |       "requires": {
304 |         "@polymer/font-roboto": "^3.0.1",
305 |         "@polymer/iron-flex-layout": "^3.0.0-pre.26",
306 |         "@polymer/polymer": "^3.0.0"
307 |       }
308 |     },
309 |     "@polymer/paper-toast": {
310 |       "version": "3.0.1",
311 |       "resolved": "https://registry.npmjs.org/@polymer/paper-toast/-/paper-toast-3.0.1.tgz",
312 |       "integrity": "sha512-pizuogzObniDdICUc6dSLrnDt2VzzoRne1gCmbD6sfOATVv5tc8UfrqhA2iHngbNBEbniBiciS3iogdp5KTVUQ==",
313 |       "dev": true,
314 |       "requires": {
315 |         "@polymer/iron-a11y-announcer": "^3.0.0-pre.26",
316 |         "@polymer/iron-fit-behavior": "^3.0.0-pre.26",
317 |         "@polymer/iron-overlay-behavior": "^3.0.0-pre.27",
318 |         "@polymer/polymer": "^3.0.0"
319 |       }
320 |     },
321 |     "@polymer/polymer": {
322 |       "version": "3.1.0",
323 |       "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.1.0.tgz",
324 |       "integrity": "sha512-hwN8IMERsFATz/9dSMxYHL+84J9uBkPuuarxJWlTsppZ4CAYTZKnepBfNrKoyNsafBmA3yXBiiKPPf+fJtza7A==",
325 |       "requires": {
326 |         "@webcomponents/shadycss": "^1.5.2"
327 |       }
328 |     },
329 |     "@polymer/prism-element": {
330 |       "version": "3.0.1",
331 |       "resolved": "https://registry.npmjs.org/@polymer/prism-element/-/prism-element-3.0.1.tgz",
332 |       "integrity": "sha512-mam3oZZwVoxmC8i2srCxaTsvCqZF2HX4yxbm1JN9OGZS2JMwu7bnjjk7O8haoj9u6w+ocUi+vTLjYeIIoPx7vQ==",
333 |       "dev": true,
334 |       "requires": {
335 |         "@polymer/polymer": "^3.0.0",
336 |         "prismjs": "^1.11.0"
337 |       }
338 |     },
339 |     "@polymer/sinonjs": {
340 |       "version": "1.17.1",
341 |       "resolved": "https://registry.npmjs.org/@polymer/sinonjs/-/sinonjs-1.17.1.tgz",
342 |       "integrity": "sha512-/U8F/cOTrbF2iVVYgINYmvKbtbexs+89Q3v8AaHADRYabTg7aOZGOb0RyWpOI+sUJt04kj63U4FwMhzW5r4wZA==",
343 |       "dev": true
344 |     },
345 |     "@polymer/test-fixture": {
346 |       "version": "3.0.0-pre.21",
347 |       "resolved": "https://registry.npmjs.org/@polymer/test-fixture/-/test-fixture-3.0.0-pre.21.tgz",
348 |       "integrity": "sha512-IxzUe6YzaORzUksafHAXHprV29YncOJgr0+1zNAifl0/f+cb5iAd4IWUrnsnVFHG5UGTLjvis5RgV6vvIZPDrA==",
349 |       "dev": true
350 |     },
351 |     "@webcomponents/shadycss": {
352 |       "version": "1.7.1",
353 |       "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.7.1.tgz",
354 |       "integrity": "sha512-6SZqLajRPWL0rrKDZOGF8PCBq5B9JqgFmE5rX5psk6i8WrqiMkSCuO8+rnirzViTsU5CqnjQPFC3OvG4YJdMrQ=="
355 |     },
356 |     "@webcomponents/webcomponentsjs": {
357 |       "version": "2.2.1",
358 |       "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.2.1.tgz",
359 |       "integrity": "sha512-lZZ+Lkke6JhsJcQQqSVk1Pny6/8y4qhJ98LO7a/MwBSRO8WqHqK1X2vscfeL8vOnYGFnmBUyVG95lwYv/AXyLQ==",
360 |       "dev": true
361 |     },
362 |     "accessibility-developer-tools": {
363 |       "version": "2.12.0",
364 |       "resolved": "https://registry.npmjs.org/accessibility-developer-tools/-/accessibility-developer-tools-2.12.0.tgz",
365 |       "integrity": "sha1-PaDM6dbsY3OWS4TzXbfPw996tRQ=",
366 |       "dev": true
367 |     },
368 |     "ansi-regex": {
369 |       "version": "2.1.1",
370 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
371 |       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
372 |       "dev": true
373 |     },
374 |     "ansi-styles": {
375 |       "version": "2.2.1",
376 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
377 |       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
378 |       "dev": true
379 |     },
380 |     "assertion-error": {
381 |       "version": "1.1.0",
382 |       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
383 |       "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
384 |       "dev": true
385 |     },
386 |     "async": {
387 |       "version": "1.5.2",
388 |       "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
389 |       "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
390 |       "dev": true
391 |     },
392 |     "balanced-match": {
393 |       "version": "1.0.0",
394 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
395 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
396 |       "dev": true
397 |     },
398 |     "brace-expansion": {
399 |       "version": "1.1.11",
400 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
401 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
402 |       "dev": true,
403 |       "requires": {
404 |         "balanced-match": "^1.0.0",
405 |         "concat-map": "0.0.1"
406 |       }
407 |     },
408 |     "browser-stdout": {
409 |       "version": "1.3.0",
410 |       "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.0.tgz",
411 |       "integrity": "sha1-81HTKWnTL6XXpVZxVCY9korjvR8=",
412 |       "dev": true
413 |     },
414 |     "chai": {
415 |       "version": "3.5.0",
416 |       "resolved": "http://registry.npmjs.org/chai/-/chai-3.5.0.tgz",
417 |       "integrity": "sha1-TQJjewZ/6Vi9v906QOxW/vc3Mkc=",
418 |       "dev": true,
419 |       "requires": {
420 |         "assertion-error": "^1.0.1",
421 |         "deep-eql": "^0.1.3",
422 |         "type-detect": "^1.0.0"
423 |       }
424 |     },
425 |     "chalk": {
426 |       "version": "1.1.3",
427 |       "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
428 |       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
429 |       "dev": true,
430 |       "requires": {
431 |         "ansi-styles": "^2.2.1",
432 |         "escape-string-regexp": "^1.0.2",
433 |         "has-ansi": "^2.0.0",
434 |         "strip-ansi": "^3.0.0",
435 |         "supports-color": "^2.0.0"
436 |       },
437 |       "dependencies": {
438 |         "supports-color": {
439 |           "version": "2.0.0",
440 |           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
441 |           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
442 |           "dev": true
443 |         }
444 |       }
445 |     },
446 |     "clipboard": {
447 |       "version": "2.0.4",
448 |       "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
449 |       "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
450 |       "dev": true,
451 |       "optional": true,
452 |       "requires": {
453 |         "good-listener": "^1.2.2",
454 |         "select": "^1.1.2",
455 |         "tiny-emitter": "^2.0.0"
456 |       }
457 |     },
458 |     "commander": {
459 |       "version": "2.9.0",
460 |       "resolved": "http://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
461 |       "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
462 |       "dev": true,
463 |       "requires": {
464 |         "graceful-readlink": ">= 1.0.0"
465 |       }
466 |     },
467 |     "concat-map": {
468 |       "version": "0.0.1",
469 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
470 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
471 |       "dev": true
472 |     },
473 |     "debug": {
474 |       "version": "2.6.8",
475 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
476 |       "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
477 |       "dev": true,
478 |       "requires": {
479 |         "ms": "2.0.0"
480 |       }
481 |     },
482 |     "deep-eql": {
483 |       "version": "0.1.3",
484 |       "resolved": "http://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
485 |       "integrity": "sha1-71WKyrjeJSBs1xOQbXTlaTDrafI=",
486 |       "dev": true,
487 |       "requires": {
488 |         "type-detect": "0.1.1"
489 |       },
490 |       "dependencies": {
491 |         "type-detect": {
492 |           "version": "0.1.1",
493 |           "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.1.tgz",
494 |           "integrity": "sha1-C6XsKohWQORw6k6FBZcZANrFiCI=",
495 |           "dev": true
496 |         }
497 |       }
498 |     },
499 |     "delegate": {
500 |       "version": "3.2.0",
501 |       "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
502 |       "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
503 |       "dev": true,
504 |       "optional": true
505 |     },
506 |     "diff": {
507 |       "version": "3.2.0",
508 |       "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz",
509 |       "integrity": "sha1-yc45Okt8vQsFinJck98pkCeGj/k=",
510 |       "dev": true
511 |     },
512 |     "escape-string-regexp": {
513 |       "version": "1.0.5",
514 |       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
515 |       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
516 |       "dev": true
517 |     },
518 |     "formatio": {
519 |       "version": "1.1.1",
520 |       "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.1.1.tgz",
521 |       "integrity": "sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=",
522 |       "dev": true,
523 |       "requires": {
524 |         "samsam": "~1.1"
525 |       }
526 |     },
527 |     "fs.realpath": {
528 |       "version": "1.0.0",
529 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
530 |       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
531 |       "dev": true
532 |     },
533 |     "glob": {
534 |       "version": "7.1.1",
535 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
536 |       "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
537 |       "dev": true,
538 |       "requires": {
539 |         "fs.realpath": "^1.0.0",
540 |         "inflight": "^1.0.4",
541 |         "inherits": "2",
542 |         "minimatch": "^3.0.2",
543 |         "once": "^1.3.0",
544 |         "path-is-absolute": "^1.0.0"
545 |       }
546 |     },
547 |     "good-listener": {
548 |       "version": "1.2.2",
549 |       "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
550 |       "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
551 |       "dev": true,
552 |       "optional": true,
553 |       "requires": {
554 |         "delegate": "^3.1.2"
555 |       }
556 |     },
557 |     "graceful-readlink": {
558 |       "version": "1.0.1",
559 |       "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
560 |       "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
561 |       "dev": true
562 |     },
563 |     "growl": {
564 |       "version": "1.9.2",
565 |       "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
566 |       "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
567 |       "dev": true
568 |     },
569 |     "has-ansi": {
570 |       "version": "2.0.0",
571 |       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
572 |       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
573 |       "dev": true,
574 |       "requires": {
575 |         "ansi-regex": "^2.0.0"
576 |       }
577 |     },
578 |     "has-flag": {
579 |       "version": "1.0.0",
580 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
581 |       "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
582 |       "dev": true
583 |     },
584 |     "he": {
585 |       "version": "1.1.1",
586 |       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
587 |       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
588 |       "dev": true
589 |     },
590 |     "inflight": {
591 |       "version": "1.0.6",
592 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
593 |       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
594 |       "dev": true,
595 |       "requires": {
596 |         "once": "^1.3.0",
597 |         "wrappy": "1"
598 |       }
599 |     },
600 |     "inherits": {
601 |       "version": "2.0.3",
602 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
603 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
604 |       "dev": true
605 |     },
606 |     "json3": {
607 |       "version": "3.3.2",
608 |       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
609 |       "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
610 |       "dev": true
611 |     },
612 |     "lodash": {
613 |       "version": "3.10.1",
614 |       "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
615 |       "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
616 |       "dev": true
617 |     },
618 |     "lodash._baseassign": {
619 |       "version": "3.2.0",
620 |       "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
621 |       "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
622 |       "dev": true,
623 |       "requires": {
624 |         "lodash._basecopy": "^3.0.0",
625 |         "lodash.keys": "^3.0.0"
626 |       }
627 |     },
628 |     "lodash._basecopy": {
629 |       "version": "3.0.1",
630 |       "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
631 |       "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
632 |       "dev": true
633 |     },
634 |     "lodash._basecreate": {
635 |       "version": "3.0.3",
636 |       "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz",
637 |       "integrity": "sha1-G8ZhYU2qf8MRt9A78WgGoCE8+CE=",
638 |       "dev": true
639 |     },
640 |     "lodash._getnative": {
641 |       "version": "3.9.1",
642 |       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
643 |       "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
644 |       "dev": true
645 |     },
646 |     "lodash._isiterateecall": {
647 |       "version": "3.0.9",
648 |       "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
649 |       "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
650 |       "dev": true
651 |     },
652 |     "lodash.create": {
653 |       "version": "3.1.1",
654 |       "resolved": "https://registry.npmjs.org/lodash.create/-/lodash.create-3.1.1.tgz",
655 |       "integrity": "sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=",
656 |       "dev": true,
657 |       "requires": {
658 |         "lodash._baseassign": "^3.0.0",
659 |         "lodash._basecreate": "^3.0.0",
660 |         "lodash._isiterateecall": "^3.0.0"
661 |       }
662 |     },
663 |     "lodash.isarguments": {
664 |       "version": "3.1.0",
665 |       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
666 |       "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
667 |       "dev": true
668 |     },
669 |     "lodash.isarray": {
670 |       "version": "3.0.4",
671 |       "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
672 |       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
673 |       "dev": true
674 |     },
675 |     "lodash.keys": {
676 |       "version": "3.1.2",
677 |       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
678 |       "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
679 |       "dev": true,
680 |       "requires": {
681 |         "lodash._getnative": "^3.0.0",
682 |         "lodash.isarguments": "^3.0.0",
683 |         "lodash.isarray": "^3.0.0"
684 |       }
685 |     },
686 |     "lolex": {
687 |       "version": "1.3.2",
688 |       "resolved": "http://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz",
689 |       "integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=",
690 |       "dev": true
691 |     },
692 |     "marked": {
693 |       "version": "0.3.19",
694 |       "resolved": "http://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
695 |       "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==",
696 |       "dev": true
697 |     },
698 |     "minimatch": {
699 |       "version": "3.0.4",
700 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
701 |       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
702 |       "dev": true,
703 |       "requires": {
704 |         "brace-expansion": "^1.1.7"
705 |       }
706 |     },
707 |     "minimist": {
708 |       "version": "0.0.8",
709 |       "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
710 |       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
711 |       "dev": true
712 |     },
713 |     "mkdirp": {
714 |       "version": "0.5.1",
715 |       "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
716 |       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
717 |       "dev": true,
718 |       "requires": {
719 |         "minimist": "0.0.8"
720 |       }
721 |     },
722 |     "mocha": {
723 |       "version": "3.5.3",
724 |       "resolved": "https://registry.npmjs.org/mocha/-/mocha-3.5.3.tgz",
725 |       "integrity": "sha512-/6na001MJWEtYxHOV1WLfsmR4YIynkUEhBwzsb+fk2qmQ3iqsi258l/Q2MWHJMImAcNpZ8DEdYAK72NHoIQ9Eg==",
726 |       "dev": true,
727 |       "requires": {
728 |         "browser-stdout": "1.3.0",
729 |         "commander": "2.9.0",
730 |         "debug": "2.6.8",
731 |         "diff": "3.2.0",
732 |         "escape-string-regexp": "1.0.5",
733 |         "glob": "7.1.1",
734 |         "growl": "1.9.2",
735 |         "he": "1.1.1",
736 |         "json3": "3.3.2",
737 |         "lodash.create": "3.1.1",
738 |         "mkdirp": "0.5.1",
739 |         "supports-color": "3.1.2"
740 |       }
741 |     },
742 |     "ms": {
743 |       "version": "2.0.0",
744 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
745 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
746 |       "dev": true
747 |     },
748 |     "once": {
749 |       "version": "1.4.0",
750 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
751 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
752 |       "dev": true,
753 |       "requires": {
754 |         "wrappy": "1"
755 |       }
756 |     },
757 |     "path-is-absolute": {
758 |       "version": "1.0.1",
759 |       "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
760 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
761 |       "dev": true
762 |     },
763 |     "prismjs": {
764 |       "version": "1.15.0",
765 |       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
766 |       "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
767 |       "dev": true,
768 |       "requires": {
769 |         "clipboard": "^2.0.0"
770 |       }
771 |     },
772 |     "samsam": {
773 |       "version": "1.1.2",
774 |       "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
775 |       "integrity": "sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=",
776 |       "dev": true
777 |     },
778 |     "select": {
779 |       "version": "1.1.2",
780 |       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
781 |       "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
782 |       "dev": true,
783 |       "optional": true
784 |     },
785 |     "sinon": {
786 |       "version": "1.17.7",
787 |       "resolved": "http://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz",
788 |       "integrity": "sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=",
789 |       "dev": true,
790 |       "requires": {
791 |         "formatio": "1.1.1",
792 |         "lolex": "1.3.2",
793 |         "samsam": "1.1.2",
794 |         "util": ">=0.10.3 <1"
795 |       }
796 |     },
797 |     "sinon-chai": {
798 |       "version": "2.14.0",
799 |       "resolved": "https://registry.npmjs.org/sinon-chai/-/sinon-chai-2.14.0.tgz",
800 |       "integrity": "sha512-9stIF1utB0ywNHNT7RgiXbdmen8QDCRsrTjw+G9TgKt1Yexjiv8TOWZ6WHsTPz57Yky3DIswZvEqX8fpuHNDtQ==",
801 |       "dev": true
802 |     },
803 |     "stacky": {
804 |       "version": "1.3.1",
805 |       "resolved": "http://registry.npmjs.org/stacky/-/stacky-1.3.1.tgz",
806 |       "integrity": "sha1-PxF+UYe5pz0j+HbWnwXIWxGAShI=",
807 |       "dev": true,
808 |       "requires": {
809 |         "chalk": "^1.1.1",
810 |         "lodash": "^3.0.0"
811 |       }
812 |     },
813 |     "strip-ansi": {
814 |       "version": "3.0.1",
815 |       "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
816 |       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
817 |       "dev": true,
818 |       "requires": {
819 |         "ansi-regex": "^2.0.0"
820 |       }
821 |     },
822 |     "supports-color": {
823 |       "version": "3.1.2",
824 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.1.2.tgz",
825 |       "integrity": "sha1-cqJiiU2dQIuVbKBf83su2KbiotU=",
826 |       "dev": true,
827 |       "requires": {
828 |         "has-flag": "^1.0.0"
829 |       }
830 |     },
831 |     "tiny-emitter": {
832 |       "version": "2.0.2",
833 |       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
834 |       "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
835 |       "dev": true,
836 |       "optional": true
837 |     },
838 |     "type-detect": {
839 |       "version": "1.0.0",
840 |       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-1.0.0.tgz",
841 |       "integrity": "sha1-diIXzAbbJY7EiQihKY6LlRIejqI=",
842 |       "dev": true
843 |     },
844 |     "util": {
845 |       "version": "0.11.1",
846 |       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
847 |       "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
848 |       "dev": true,
849 |       "requires": {
850 |         "inherits": "2.0.3"
851 |       }
852 |     },
853 |     "wct-browser-legacy": {
854 |       "version": "1.0.2",
855 |       "resolved": "https://registry.npmjs.org/wct-browser-legacy/-/wct-browser-legacy-1.0.2.tgz",
856 |       "integrity": "sha512-23rbZwBh/DxWU36htJN9lsyBq3NxgVbuyMUq7fgFP6ZVTel+uFWO6LPXPoZQ6VyvXvlUYLE5PxY+ZdJ88a4COw==",
857 |       "dev": true,
858 |       "requires": {
859 |         "@polymer/polymer": "^3.0.0",
860 |         "@polymer/sinonjs": "^1.14.1",
861 |         "@polymer/test-fixture": "^3.0.0-pre.1",
862 |         "@webcomponents/webcomponentsjs": "^2.0.0",
863 |         "accessibility-developer-tools": "^2.12.0",
864 |         "async": "^1.5.2",
865 |         "chai": "^3.5.0",
866 |         "lodash": "^3.10.1",
867 |         "mocha": "^3.4.2",
868 |         "sinon": "^1.17.1",
869 |         "sinon-chai": "^2.10.0",
870 |         "stacky": "^1.3.1"
871 |       }
872 |     },
873 |     "wrappy": {
874 |       "version": "1.0.2",
875 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
876 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
877 |       "dev": true
878 |     }
879 |   }
880 | }
881 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "description": "YouTube video playback web component.",
 3 |   "keywords": [
 4 |     "google",
 5 |     "youtube",
 6 |     "polymer",
 7 |     "web-components",
 8 |     "web-component"
 9 |   ],
10 |   "repository": "GoogleWebComponents/google-youtube",
11 |   "homepage": "https://googlewebcomponents.github.io/google-youtube",
12 |   "name": "@google-web-components/google-youtube",
13 |   "version": "3.0.1",
14 |   "resolutions": {
15 |     "inherits": "2.0.3",
16 |     "samsam": "1.1.3",
17 |     "supports-color": "3.1.2",
18 |     "type-detect": "1.0.0"
19 |   },
20 |   "main": "google-youtube.js",
21 |   "author": "Jeff Posnick <jeffy@google.com>",
22 |   "license": "Apache-2.0",
23 |   "dependencies": {
24 |     "@polymer/polymer": "^3.0.0",
25 |     "@polymer/iron-localstorage": "^3.0.0-pre.18",
26 |     "@google-web-components/google-apis": "^3.0.0"
27 |   },
28 |   "devDependencies": {
29 |     "wct-browser-legacy": "^1.0.1",
30 |     "@polymer/iron-component-page": "^3.0.0-pre.18"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/test/google-youtube-basic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
 3 | <html>
 4 |   <head>
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |     <title>google-youtube Basic Tests</title>
 7 |     <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 8 |     <script src="../../../wct-browser-legacy/browser.js"></script>
 9 |   </head>
10 |   <body>
11 |     <test-fixture id="GoogleYoutube">
12 |       <template>
13 |         <google-youtube></google-youtube>
14 |       </template>
15 |     </test-fixture>
16 | 
17 |     <script type="module">
18 |       import '@polymer/polymer/polymer-legacy.js';
19 |       import '../google-youtube.js';
20 | 
21 |       suite('basic tests', function() {
22 |         var googleYouTube;
23 |         setup(function() {
24 |           googleYouTube = fixture('GoogleYoutube');
25 |         });
26 | 
27 |         test('HHMMSS', function() {
28 |           // Durations in seconds and the formatted string that's expected for each.
29 |           var durationsToFormattedStrings = {
30 |             0: '0:00',
31 |             1: '0:01',
32 |             '5.4': '0:05',
33 |             '5.5': '0:06',
34 |             10: '0:10',
35 |             60: '1:00',
36 |             601: '10:01',
37 |             3600: '1:00:00',
38 |             3661: '1:01:01',
39 |             36000: '10:00:00'
40 |           };
41 | 
42 |           Object.keys(durationsToFormattedStrings).forEach(function(seconds) {
43 |             assert.equal(durationsToFormattedStrings[seconds], googleYouTube._toHHMMSS(seconds));
44 |           });
45 |         });
46 | 
47 |         test('play method and state transitions', function(done) {
48 |           // Expected state transitions: -1 (unstarted) -> 3 (buffering) -> 1 (playing)
49 |           var stateTransitions = [-1, 3, 1];
50 | 
51 |           googleYouTube.addEventListener('google-youtube-state-change', function(e) {
52 |             // Test that the element's state property always is set to the same property in the event.
53 |             assert.equal(e.detail.data, googleYouTube.state);
54 | 
55 |             // Test that the player goes through the expected sequence of state transitions.
56 |             assert.equal(e.detail.data, stateTransitions.shift());
57 | 
58 |             // Once the array of expected state transitions have been exhausted, end the test.
59 |             if (stateTransitions.length == 0) {
60 |               done();
61 |             }
62 |           });
63 | 
64 |           googleYouTube.addEventListener('google-youtube-ready', function() {
65 |             googleYouTube.play();
66 |           });
67 | 
68 |           googleYouTube.videoId = 'eORqFaf_QzM';
69 |         });
70 |       });
71 |     </script>
72 |   </body>
73 | </html>


--------------------------------------------------------------------------------
/test/google-youtube-custom-thumbnail.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
 3 | <html>
 4 |   <head>
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |     <title>google-youtube Basic Tests</title>
 7 |     <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 8 |     <script src="../../../wct-browser-legacy/browser.js"></script>
 9 |   </head>
10 |   <body>
11 |     <test-fixture id="GoogleYoutube">
12 |       <template>
13 |         <google-youtube
14 |           thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
15 |         </google-youtube>
16 |       </template>
17 |     </test-fixture>
18 | 
19 |     <script type="module">
20 |       import '@polymer/polymer/polymer-legacy.js';
21 |       import '@polymer/test-fixture/test-fixture.js';
22 |       import '../google-youtube.js';
23 |       import { Templatizer } from '@polymer/polymer/lib/legacy/templatizer-behavior.js';
24 |       import { flush as flush$0 } from '@polymer/polymer/lib/legacy/polymer.dom.js';
25 | 
26 |       // uses the correct dom flush based on version of Polymer
27 |       var flushDom = function() {
28 |         if (Templatizer.flush) {
29 |           Templatizer.flush();
30 |         } else {
31 |           flush$0();
32 |         }
33 |       };
34 | 
35 |       suite('thumbnail tests', function() {
36 |         var googleYouTube;
37 |         setup(function() {
38 |           googleYouTube = fixture('GoogleYoutube');
39 |         });
40 | 
41 |         test('Thumbnail image present', function() {
42 |           flushDom();
43 |           assert.ok(googleYouTube.$$('img'), 'thumbnail <img> is present.');
44 |         });
45 | 
46 |         test('Tap handler loads embed', function(done) {
47 |           var thumbnail;
48 | 
49 |           googleYouTube.addEventListener('google-youtube-state-change', function(e) {
50 |             if (!googleYouTube.state || googleYouTube.state === -1) {
51 |               return;
52 |             }
53 | 
54 |             expect(getComputedStyle(thumbnail).display).to.be.eql('none');
55 | 
56 |             assert.ok(googleYouTube.$$('iframe'), 'YouTube embed <iframe> is present.');
57 | 
58 |             done();
59 |           });
60 | 
61 |           googleYouTube.videoId = 'eORqFaf_QzM';
62 | 
63 |           flushDom();
64 | 
65 |           thumbnail = googleYouTube.$$('#thumbnail');
66 |           googleYouTube._handleThumbnailTap();
67 |         });
68 |       });
69 |     </script>
70 |   </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |     <title>google-youtube Test Runner</title>
 6 |     <meta charset="UTF-8">
 7 |     <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 8 |     <script src="../../../wct-browser-legacy/browser.js"></script>
 9 |   </head>
10 |   <body>
11 |     <script>
12 |       WCT.loadSuites([
13 |         'google-youtube-basic.html?dom=shadow',
14 |         'google-youtube-custom-thumbnail.html?dom=shadow',
15 |         'google-youtube-basic.html?wc-ce=true&wc-shadydom=true',
16 |         'google-youtube-custom-thumbnail.html?wc-ce=true&wc-shadydom=true',
17 |       ]);
18 |     </script>
19 |   </body>
20 | </html>


--------------------------------------------------------------------------------