Add support for live events.

GoogleWebComponents · Oct 21, 2014 · 92292e1 · 92292e1
1 parent 9563cc4
commit 92292e1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 4 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "google-youtube-video-wall",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "YouTube Video Wall demo. Powered by the google-youtube Polymer component.",
   "main": "google-youtube-video-wall.html",
   "keywords": [

diff --git a/demo_live_news.html b/demo_live_news.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<!--
+Copyright 2014 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>&lt;google-youtube-video-wall&gt; Live News Demo</title>
+    <script src="../platform/platform.js"></script>
+    <link rel="import" href="google-youtube-video-wall.html">
+  </head>
+
+  <body unresolved>
+    <!-- Please register for your own key! https://developers.google.com/youtube/registering_an_application -->
+    <google-youtube-video-wall fit
+                               apiKey="AIzaSyAcB7qNYPC6bI7e3PHscV8w5-acmocWhmE"
+                               wallTitle="Live News Broadcasts"
+                               eventType="live"
+                               videoCategoryId="25"
+                               showSearch>
+    </google-youtube-video-wall>
+  </body>
+</html>
diff --git a/google-youtube-video-wall.css b/google-youtube-video-wall.css
@@ -63,6 +63,7 @@ paper-input /deep/ #focusedUnderline {
 .video-container > img {
   position: relative;
   width: 100%;
+  max-height: 180px;
   display: block;
   overflow: hidden;
   border-top-left-radius: 2px;

diff --git a/google-youtube-video-wall.html b/google-youtube-video-wall.html
@@ -38,7 +38,7 @@
 -->
 
 <polymer-element name="google-youtube-video-wall"
-                 attributes="apiKey channelId location locationRadius maxResultsPerRequest maxVideos narrowWidth order playlistId publishedAfter publishedBefore q safeSearch showSearch topicId veryNarrowWidth videoCategoryId wallTitle">
+                 attributes="apiKey channelId eventType location locationRadius maxResultsPerRequest maxVideos narrowWidth order playlistId publishedAfter publishedBefore q safeSearch showSearch topicId veryNarrowWidth videoCategoryId wallTitle">
   <template>
     <link rel="stylesheet" href="google-youtube-video-wall.css">
 
@@ -84,6 +84,7 @@ <h1>Sorry, no videos were found!</h1>
               <div class="video-container"
                    data-video-id="{{video.id.videoId || video.snippet.resourceId.videoId}}"
                    data-video-title="{{video.snippet.title}}"
+                   data-is-live="{{video.snippet.liveBroadcastContent === 'live'}}"
                    on-click="{{handleItemSelected}}">
                 <paper-ripple fit></paper-ripple>
 
@@ -154,7 +155,15 @@ <h1>{{video.snippet.title}}</h1>
 
             <p flex class="video-title">{{_selectedVideoTitle}}</p>
 
-            <p class="{{ {bottom: narrow} | tokenList }}" hidden?="{{duration == 0}}">{{currentTimeFormatted}}/{{durationFormatted}}</p>
+            <p class="{{ {bottom: narrow} | tokenList }}">
+              <template if="{{duration != 0 && !_selectedVideoIsLive}}">
+                {{currentTimeFormatted}}/{{durationFormatted}}
+              </template>
+
+              <template if="{{_selectedVideoIsLive}}">
+                Live Broadcast
+              </template>
+            </p>
           </core-toolbar>
         </div>
       </section>
@@ -213,6 +222,20 @@ <h1>{{video.snippet.title}}</h1>
          */
         channelId: '',
 
+        /**
+         * An optional search filter which limits the results to videos that are/were livestreamed.
+         *
+         * Acceptable values are `completed`, `live`, or `upcoming`.
+         *
+         * This corresponds to the [`eventType`](https://developers.google.com/youtube/v3/docs/search/list#eventType)
+         * parameter in a YouTube API search request.
+         *
+         * @attribute eventType
+         * @type string
+         * @default ''
+         */
+        eventType: '',
+
         /**
          * An optional search filter which limits the results to geotagged videos that are close to a specific location.
          *
@@ -421,6 +444,7 @@ <h1>{{video.snippet.title}}</h1>
         // Placeholder, since the YT Player doesn't like being initialized without a video id.
         _selectedVideoId: 'mN7IAaRdi_k',
         _selectedVideoTitle: '',
+        _selectedVideoIsLive: false,
         _nextPageToken: '',
         // This will be set to either 'search' or 'playlistItems', depending on the other attributes.
         _youtubeApiService: '',
@@ -451,6 +475,7 @@ <h1>{{video.snippet.title}}</h1>
               videoEmbeddable: 'true',
               maxResults: this.maxResultsPerRequest,
               channelId: this.channelId,
+              eventType: this.eventType,
               location: this.location,
               locationRadius: this.locationRadius,
               order: this.order,
@@ -521,8 +546,13 @@ <h1>{{video.snippet.title}}</h1>
           this.async(function(args) {
             this._selectedVideoTitle = args.title;
             this._selectedVideoId = args.videoId;
+            this._selectedVideoIsLive = args.isLive === 'true';
             this.$.corepage.selected = 1;
-          }, { title: e.target.parentNode.dataset.videoTitle, videoId: e.target.parentNode.dataset.videoId }, 150);
+          }, {
+            title: e.target.parentNode.dataset.videoTitle,
+            videoId: e.target.parentNode.dataset.videoId,
+            isLive: e.target.parentNode.dataset.isLive
+          }, 150);
         },
 
         handlePlayerClose: function() {