Add polymer 1.0 to npm_modules

polymer_1.0.4/bower_components/google-youtube/demo/demo.elements.html

+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../google-youtube.html">
+
+
+<dom-module id="demo-element">
+  <template id="page-template">
+    <style>
+      div {
+        margin-bottom: 1em;
+      }
+    </style>
+    <h1><code>&lt;google-youtube&gt;</code> Demo</h1>
+    <h3>Full API Demo</h3>
+    <google-youtube id="googleYouTube"
+                    playsupported="{{playSupported}}"
+                    video-id="mN7IAaRdi_k"
+                    state="{{state}}"
+                    currenttime="{{currentTime}}"
+                    currenttimeformatted="{{currentTimeFormatted}}"
+                    duration="{{duration}}"
+                    durationformatted="{{durationFormatted}}"
+                    fractionloaded="{{fractionLoaded}}"
+                    on-google-youtube-state-change="handleStateChange"
+                    on-google-youtube-error="handleYouTubeError">
+    </google-youtube>
+
+    <div>
+      <p>Playback Progress: <span>{{currentTimeFormatted}}</span> / <span>{{durationFormatted}}</span> <progress max="1" value="{{computeProgress(currentTime, duration)}}"></progress></p>
+    </div>
+
+    <div>
+      <button id="play-video"
+        disabled="{{computePlayDisabled(state, playSupported)}}"
+        on-click="handlePlayVideo"
+      >Play</button>
+      <button id="pause-video"
+        disabled="{{computePauseDisabled(state)}}"
+        on-click="handlePauseVideo"
+      >Pause</button>
+    </div>
+
+    <div>
+      <label for="videoId">Video ID:</label>
+      <input id="videoId" value="M7lc1UVf-VE">
+      <button id="cue-video" on-click="handleCueVideo">Cue</button>
+    </div>
+
+    <div>
+      <p>Player Events:</p>
+      <ol>
+        <template is="dom-repeat" items="{{events}}">
+          <li>State change: <span>{{item.data}}</span></li>
+        </template>
+      </ol>
+    </div>
+
+    <h3>Custom Thumbnail Demo</h3>
+    <google-youtube video-id="yRbOSdAe_JU"
+                    width="853px"
+                    height="480px"
+                    thumbnail="//www.polymer-project.org/images/logos/p-logo.svg">
+    </google-youtube>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'demo-element',
+    properties: {
+      playSupported: String,
+      state: String,
+      currentTime: Number,
+      currentTimeFormatted: String,
+      duration: Number,
+      durationFormatted: String,
+      fractionLoaded: Number,
+      events: {
+        type: Array,
+        value: []
+      }
+    },
+    computeProgress: function(currentTime, duration) {
+      return currentTime / duration;
+    },
+    computePlayDisabled: function(state, playSupported) {
+      return state == 1 || state == 3 || !playSupported;
+    },
+    computePauseDisabled: function(state) {
+      return state != 1 && state != 3;
+    },
+    handleStateChange: function(ev) {
+      this.events.push({data: ev.detail.data});
+    },
+    handleYouTubeError: function(ev) {
+      console.error('YouTube playback error', ev.detail);
+    },
+    handlePlayVideo: function(ev) {
+      this.$.googleYouTube.play();
+    },
+    handlePauseVideo: function(ev) {
+      this.$.googleYouTube.pause();
+    },
+    handleCueVideo: function(ev) {
+      this.$.googleYouTube.videoid = this.$.videoId.value;
+    }
+  });
+
+</script>
+