diff --git a/example/cards/tutorial/youtube_card.html b/example/cards/tutorial/youtube_card.html
new file mode 100644
index 0000000..3325dcc
--- /dev/null
+++ b/example/cards/tutorial/youtube_card.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/example/cards/tutorial/youtube_card.js b/example/cards/tutorial/youtube_card.js
index e4e27e5..c6dae7e 100644
--- a/example/cards/tutorial/youtube_card.js
+++ b/example/cards/tutorial/youtube_card.js
@@ -2,58 +2,25 @@ 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('![]()
');
$('head').append('');
- 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 () {
@@ -61,10 +28,6 @@ Conductor.card({
$('#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
index 446b735..0b5fe2e 100644
--- 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, []);
}
};