Tutorial: Create a youtube card.

tildeio · Dec 13, 2013 · 78dd213 · 78dd213
1 parent 39e7b10
commit 78dd213
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 107 deletions.
diff --git a/example/cards/tutorial/youtube_card.html b/example/cards/tutorial/youtube_card.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="/conductor-0.3.0.js" ></script>
+  <script src="youtube_card.js" ></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/example/cards/tutorial/youtube_card.js b/example/cards/tutorial/youtube_card.js
@@ -2,69 +2,32 @@ Conductor.require('/vendor/jquery.js');
 Conductor.requireCSS('/example/cards/tutorial/youtube_card.css');
 
 Conductor.card({
-  consumers: {
-    video: Conductor.Oasis.Consumer.extend({
-      events: {
-        play: function () {
-          this.card.loadPlayer().then(function (player) {
-            player.playVideo();
-          });
-        }
-      }
-    })
-  },
-
   videoId: null,
 
   activate: function (data) {
     Conductor.Oasis.RSVP.EventTarget.mixin(this);
     this.consumers.height.autoUpdate = false;
     this.videoId = data.videoId;
-    this.loadYouTubeAPI();
-  },
-
-  didUpdateData: function (bucket, data) {
-    this.videoId = data.videoId;
-    this.trigger('videoChanged');
   },
 
   initializeDOM: function () {
     $('body').html('<img id="thumbnail" /><div id="player"></div>');
     $('head').append('<script src="https://www.youtube.com/iframe_api"></script>');
 
-    this.updateThumbnail();
     this.on('resize', this.resizeThumbnail);
-    this.on('videoChanged', this.updateThumbnail);
-    this.loadVideo();
   },
 
   render: function (intent, dimensions) {
     this.setDimensions(dimensions);
 
-    switch (intent) {
-      case "thumbnail":
-        // $('#player').hide();
-        // $('#thumbnail').show();
-        // break;
-      case "small":
-      case "large":
-        $('#thumbnail').hide();
-        $('#player').show();
-        break;
-      default:
-        throw new Error("Unsupported intent '" + intent + "'");
-    }
+    $('#thumbnail').attr('src', 'http://img.youtube.com/vi/' + this.videoId + '/0.jpg');
   },
 
   resizeThumbnail: function () {
     var dimensions = this.getDimensions();
     $('#thumbnail').css( dimensions );
   },
 
-  updateThumbnail: function () {
-    $('#thumbnail').attr('src', 'http://img.youtube.com/vi/' + this.videoId + '/0.jpg');
-  },
-
   getDimensions: function () {
     if (!this._dimensions) { this.setDimensions(); }
     return this._dimensions;
@@ -81,73 +44,5 @@ Conductor.card({
     }
 
     this.trigger('resize');
-  },
-
-  loadVideo: function () {
-    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);
-            },
-            onStateChange: function (event) {
-              var playerState = event.data;
-              if (playerState === YT.PlayerState.ENDED &&
-                  card.consumers.video) {
-
-                card.consumers.video.send('videoWatched');
-              }
-            }
-          }
-        });
-
-        card.on('videoChanged', function () {
-          card.player.cueVideoById(card.videoId, 0);
-        });
-
-        card.on('resize', function () {
-          var dimensions = this.getDimensions();
-          this.player.setSize(dimensions.width, dimensions.height);
-        });
-      });
-    }
-
-    return this._playerDefer.promise;
   }
-
 });
diff --git a/example/playground/js/playground.js b/example/playground/js/playground.js
@@ -37,7 +37,12 @@ window.Playground = {
 
     this.cardTemplate = $('.card-wrapper').hide();
 
-    this.addCard('../cards/tutorial/survey_card.js', 1, ['survey']);
+    this.conductor.loadData(
+      Playground.crossOriginHtmlUrl('../cards/tutorial/youtube_card.js'),
+      '1',
+      { videoId: '4d8ZDSyFS2g'}
+    );
+    this.addCard('../cards/tutorial/youtube_card.js', 1, []);
   }
 };