Update Youtube channel to have three thumbnails

1 files changed, 112 insertions, 16 deletions

diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
index 3e20c406..3d9f7f2f 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -6,8 +6,7 @@
 /*global require,exports*/
 var Montage = require("montage").Montage,
     Component = require("ui/component").Component,
-    Uuid = require("core/uuid").Uuid;
-
+    Uuid = require("core/Uuid");
 
 var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
 
@@ -16,6 +15,25 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
         value: /youtube.com\/(user\/)?([a-z0-9]+)/i
     },
 
+    imageA: {
+        value: null
+    },
+    imageB: {
+        value: null
+    },
+    imageC: {
+        value: null
+    },
+    _popupElement: {
+        enumerable: false,
+        value: null
+    },
+
+    _shouldShowPopup: {
+        enumerable: false,
+        value: false
+    },
+
     _channelUrl: {
         enumerable: false,
         value: null
@@ -77,37 +95,115 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             // create url
             var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName;
 
-            this.script = document.createElement("script");
-            this.script.src = url;
+            this._script = document.createElement("script");
+            this._script.src = url;
             this.needsDraw = true;
         }
     },
 
-    script: {
+    _script: {
+        enumerable: false,
         value: null
     },
 
+    prepareForDraw: {
+        value: function() {
+            this.imageA.element.addEventListener("click", this, false);
+            this.imageB.element.addEventListener("click", this, false);
+            this.imageC.element.addEventListener("click", this, false);
+        }
+    },
+
     draw: {
         value: function() {
-            if (this.script) {
-                this._element.appendChild(this.script);
-                this.script = null;
+            if (this._script) {
+                this._element.appendChild(this._script);
+                this._script = null;
             }
+
+            if (this._entries) {
+                this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url;
+                this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url;
+                this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url;
+            }
+
+            if (this._videoId) {
+                this.player.videoId = this._videoId;
+                this._videoId = null;
+            }
+
+            if (this._shouldShowPopup) {
+                this._popupElement.classList.add("show");
+                if (window.Touch) {
+                    document.addEventListener('touchstart', this, false);
+                } else {
+                    document.addEventListener('mousedown', this, false);
+                    document.addEventListener('keyup', this, false);
+                }
+            } else {
+                this._popupElement.classList.remove("show");
+                this.player.stop();
+
+                if (window.Touch) {
+                    document.removeEventListener('touchstart', this);
+                } else {
+                    document.removeEventListener('mousedown', this);
+                    document.removeEventListener('keyup', this);
+                }
+
+            }
+
         }
     },
 
-    handleData: {
-        value: function(data) {
-            var entries = data.feed.entry || [];
+    _entries: {
+        enumerable: false,
+        value: null
+    },
 
-            var playlist = [];
+    handleClick: {
+        value: function(event) {
+            switch(event.target.dataset.montageId) {
+                case "imageA":
+                    this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"];
+                    break;
+                case "imageB":
+                    this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"];
+                    break;
+                case "imageC":
+                    this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"];
+                    break;
+            }
+            this._shouldShowPopup = true;
+            this.needsDraw = true;
+        }
+    },
 
-            for (var i = 0, len = entries.length; i < len; i++) {
-                var id = entries[i]["media$group"]["yt$videoid"]["$t"];
-                playlist.push(id);
+    handleTouchStart: {
+        value: function(event) {
+            this._shouldShowPopup = false;
+            this.needsDraw = true;
+        }
+    },
+    handleMousedown: {
+        value: function(event) {
+            if (event.button === 0) {
+                this._shouldShowPopup = false;
+                this.needsDraw = true;
             }
+        }
+    },
+    handleKeyup: {
+        value: function(event) {
+            this._shouldShowPopup = false;
+            this.needsDraw = true;
+        }
+    },
 
-            this.player.playlist = playlist;
+    handleData: {
+        value: function(data) {
+            this._entries = data.feed.entry || [];
+            this.needsDraw = true;
         }
     }