Tutorial: Load YouTube API; showcase promises.

tildeio · Dec 13, 2013 · a409d3f · a409d3f
1 parent 78dd213
commit a409d3f
Showing 1 changed file with 72 additions and 1 deletion.
diff --git a/example/cards/tutorial/youtube_card.js b/example/cards/tutorial/youtube_card.js
@@ -7,20 +7,35 @@ Conductor.card({
   activate: function (data) {
     Conductor.Oasis.RSVP.EventTarget.mixin(this);
     this.consumers.height.autoUpdate = false;
+    this.loadYouTubeAPI();
     this.videoId = data.videoId;
   },
 
   initializeDOM: function () {
     $('body').html('<img id="thumbnail" /><div id="player"></div>');
     $('head').append('<script src="https://www.youtube.com/iframe_api"></script>');
 
+    $('#thumbnail').attr('src', 'http://img.youtube.com/vi/' + this.videoId + '/0.jpg');
     this.on('resize', this.resizeThumbnail);
+    this.loadVideo(this.videoId);
   },
 
   render: function (intent, dimensions) {
     this.setDimensions(dimensions);
 
-    $('#thumbnail').attr('src', 'http://img.youtube.com/vi/' + this.videoId + '/0.jpg');
+    switch (intent) {
+      case "thumbnail":
+        // $('#player').hide();
+        // $('#thumbnail').show();
+        // break;
+      case "small":
+      case "large":
+        $('#thumbnail').hide();
+        $('#player').show();
+        break;
+      default:
+        throw new Error("Unuspported intent '" + intent + "'");
+    }
   },
 
   resizeThumbnail: function () {
@@ -44,5 +59,61 @@ Conductor.card({
     }
 
     this.trigger('resize');
+  },
+
+  loadVideo: function (videoId) {
+    var card = this;
+
+    this.loadYouTubeAPI().then(function (YT) {
+      card.loadPlayer(YT);
+    });
+  },
+
+  loadYouTubeAPI: function () {
+    if (!this._youtubeDefer) {
+      var promise = this._youtubeDefer = Conductor.Oasis.RSVP.defer();
+      if (window.YT) {
+        promise.resolve(window.YT);
+      } else {
+        window.onYouTubeIframeAPIReady = function () {
+          promise.resolve(window.YT);
+        };
+      }
+    }
+
+    return this._youtubeDefer.promise;
+  },
+
+  loadPlayer: function (YT) {
+    if (!this._playerDefer) {
+      var promise = this._playerDefer = Conductor.Oasis.RSVP.defer(),
+          card = this;
+
+      card.waitForActivation().then(function () {
+        var dimensions = card.getDimensions();
+
+        var player = card.player = new YT.Player('player', {
+          height: dimensions.height,
+          width: dimensions.width,
+          videoId: card.videoId,
+          playerVars: {
+            rel: 0
+          },
+          events: {
+            onReady: function() {
+              promise.resolve(player);
+            }
+          }
+        });
+
+        card.on('resize', function () {
+          var dimensions = this.getDimensions();
+          this.player.setSize(dimensions.width, dimensions.height);
+        });
+      });
+    }
+
+    return this._playerDefer.promise;
   }
+
 });