1 files changed, 242 insertions, 0 deletions

diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js
new file mode 100644
index 00000000..88f87f3c
--- /dev/null
+++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js
@@ -0,0 +1,242 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/*global require,exports*/
+var Montage = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    Uuid = require("montage/core/Uuid");
+
+var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
+
+    _userRe: {
+        enumerable: false,
+        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
+    },
+    channelUrl: {
+        depends: ["channel"],
+        get: function() {
+            return this._channelUrl;
+        },
+        set: function(value, fromChannel) {
+            if (this._channelUrl !== value) {
+                this._channelUrl = value;
+
+                // prevent infinite loop
+                if (!fromChannel) {
+                    var match = this._userRe.exec(value);
+                    if (match && match[2]) {
+                        Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true);
+                    }
+                }
+            }
+        }
+    },
+
+    _channel: {
+        enumerable: false,
+        value: null
+    },
+    channel: {
+        get: function() {
+            return this._channel;
+        },
+        set: function(value, fromUrl) {
+            if (this._channel !== value) {
+                this._channel = value;
+
+                // prevent infinite loop
+                if (!fromUrl) {
+                    Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true);
+                }
+
+                this._loadChannel();
+            }
+        }
+    },
+
+    _loadChannel: {
+        enumerable: false,
+        value: function() {
+            var self = this;
+
+            var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_");
+
+            window[callbackName] = function(data) {
+                self.handleData(data);
+                delete window[callbackName];
+            };
+
+            // 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.needsDraw = true;
+        }
+    },
+
+    _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);
+
+            this._positionPopup();
+        }
+    },
+
+    draw: {
+        value: function() {
+            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._positionPopup();
+
+                // Fix for Canary where the thumbnail in the video doesn't
+                // change until the CSS transition has finished, so wait for
+                // it to change before starting the animation
+                var self = this;
+                window.setTimeout(function() {
+                    self._element.classList.add("show");
+                    self._popupElement.classList.add("show");
+                }, 50);
+                if (window.Touch) {
+                    document.addEventListener('touchstart', this, false);
+                } else {
+                    document.addEventListener('mousedown', this, false);
+                    document.addEventListener('keyup', this, false);
+                }
+            } else {
+                this._element.classList.remove("show");
+                this._popupElement.classList.remove("show");
+                this.player.stop();
+
+                if (window.Touch) {
+                    document.removeEventListener('touchstart', this);
+                } else {
+                    document.removeEventListener('mousedown', this);
+                    document.removeEventListener('keyup', this);
+                }
+
+            }
+
+        }
+    },
+
+    _entries: {
+        enumerable: false,
+        value: null
+    },
+
+    _positionPopup: {
+        value: function() {
+
+            var viewport = this._element.parentNode;
+            var viewportStyle = window.getComputedStyle(viewport);
+
+            this.player.width = viewportStyle.width;
+            this.player.height = viewportStyle.height;
+
+            // // Chrome
+            // viewport.insertBefore(this._popupElement, viewport.firstChild);
+            // this._popupElement.style.top = viewport.offsetTop;
+            // this._popupElement.style.left = viewport.offsetLeft;
+
+            // Canary
+            this._popupElement.style.top =  - (this._element.offsetTop || 0) + 'px';
+            this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px';
+        }
+    },
+
+    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;