diff options
Diffstat (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js')
-rw-r--r-- | node_modules/montage/ui/youtube-channel.reel/youtube-channel.js | 242 |
1 files changed, 242 insertions, 0 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 new file mode 100644 index 00000000..5b05f2c5 --- /dev/null +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js | |||
@@ -0,0 +1,242 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | /*global require,exports*/ | ||
7 | var Montage = require("montage").Montage, | ||
8 | Component = require("ui/component").Component, | ||
9 | Uuid = require("core/Uuid"); | ||
10 | |||
11 | var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { | ||
12 | |||
13 | _userRe: { | ||
14 | enumerable: false, | ||
15 | value: /youtube.com\/(user\/)?([a-z0-9]+)/i | ||
16 | }, | ||
17 | |||
18 | imageA: { | ||
19 | value: null | ||
20 | }, | ||
21 | imageB: { | ||
22 | value: null | ||
23 | }, | ||
24 | imageC: { | ||
25 | value: null | ||
26 | }, | ||
27 | _popupElement: { | ||
28 | enumerable: false, | ||
29 | value: null | ||
30 | }, | ||
31 | |||
32 | _shouldShowPopup: { | ||
33 | enumerable: false, | ||
34 | value: false | ||
35 | }, | ||
36 | |||
37 | _channelUrl: { | ||
38 | enumerable: false, | ||
39 | value: null | ||
40 | }, | ||
41 | channelUrl: { | ||
42 | depends: ["channel"], | ||
43 | get: function() { | ||
44 | return this._channelUrl; | ||
45 | }, | ||
46 | set: function(value, fromChannel) { | ||
47 | if (this._channelUrl !== value) { | ||
48 | this._channelUrl = value; | ||
49 | |||
50 | // prevent infinite loop | ||
51 | if (!fromChannel) { | ||
52 | var match = this._userRe.exec(value); | ||
53 | if (match && match[2]) { | ||
54 | Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true); | ||
55 | } | ||
56 | } | ||
57 | } | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | _channel: { | ||
62 | enumerable: false, | ||
63 | value: null | ||
64 | }, | ||
65 | channel: { | ||
66 | get: function() { | ||
67 | return this._channel; | ||
68 | }, | ||
69 | set: function(value, fromUrl) { | ||
70 | if (this._channel !== value) { | ||
71 | this._channel = value; | ||
72 | |||
73 | // prevent infinite loop | ||
74 | if (!fromUrl) { | ||
75 | Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true); | ||
76 | } | ||
77 | |||
78 | this._loadChannel(); | ||
79 | } | ||
80 | } | ||
81 | }, | ||
82 | |||
83 | _loadChannel: { | ||
84 | enumerable: false, | ||
85 | value: function() { | ||
86 | var self = this; | ||
87 | |||
88 | var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_"); | ||
89 | |||
90 | window[callbackName] = function(data) { | ||
91 | self.handleData(data); | ||
92 | delete window[callbackName]; | ||
93 | }; | ||
94 | |||
95 | // create url | ||
96 | var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; | ||
97 | |||
98 | this._script = document.createElement("script"); | ||
99 | this._script.src = url; | ||
100 | this.needsDraw = true; | ||
101 | } | ||
102 | }, | ||
103 | |||
104 | _script: { | ||
105 | enumerable: false, | ||
106 | value: null | ||
107 | }, | ||
108 | |||
109 | prepareForDraw: { | ||
110 | value: function() { | ||
111 | this.imageA.element.addEventListener("click", this, false); | ||
112 | this.imageB.element.addEventListener("click", this, false); | ||
113 | this.imageC.element.addEventListener("click", this, false); | ||
114 | |||
115 | this._positionPopup(); | ||
116 | } | ||
117 | }, | ||
118 | |||
119 | draw: { | ||
120 | value: function() { | ||
121 | if (this._script) { | ||
122 | this._element.appendChild(this._script); | ||
123 | this._script = null; | ||
124 | } | ||
125 | |||
126 | if (this._entries) { | ||
127 | this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url; | ||
128 | this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url; | ||
129 | this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url; | ||
130 | } | ||
131 | |||
132 | if (this._videoId) { | ||
133 | this.player.videoId = this._videoId; | ||
134 | this._videoId = null; | ||
135 | } | ||
136 | |||
137 | if (this._shouldShowPopup) { | ||
138 | this._positionPopup(); | ||
139 | |||
140 | // Fix for Canary where the thumbnail in the video doesn't | ||
141 | // change until the CSS transition has finished, so wait for | ||
142 | // it to change before starting the animation | ||
143 | var self = this; | ||
144 | window.setTimeout(function() { | ||
145 | self._element.classList.add("show"); | ||
146 | self._popupElement.classList.add("show"); | ||
147 | }, 50); | ||
148 | if (window.Touch) { | ||
149 | document.addEventListener('touchstart', this, false); | ||
150 | } else { | ||
151 | document.addEventListener('mousedown', this, false); | ||
152 | document.addEventListener('keyup', this, false); | ||
153 | } | ||
154 | } else { | ||
155 | this._element.classList.remove("show"); | ||
156 | this._popupElement.classList.remove("show"); | ||
157 | this.player.stop(); | ||
158 | |||
159 | if (window.Touch) { | ||
160 | document.removeEventListener('touchstart', this); | ||
161 | } else { | ||
162 | document.removeEventListener('mousedown', this); | ||
163 | document.removeEventListener('keyup', this); | ||
164 | } | ||
165 | |||
166 | } | ||
167 | |||
168 | } | ||
169 | }, | ||
170 | |||
171 | _entries: { | ||
172 | enumerable: false, | ||
173 | value: null | ||
174 | }, | ||
175 | |||
176 | _positionPopup: { | ||
177 | value: function() { | ||
178 | |||
179 | var viewport = this._element.parentNode; | ||
180 | var viewportStyle = window.getComputedStyle(viewport); | ||
181 | |||
182 | this.player.width = viewportStyle.width; | ||
183 | this.player.height = viewportStyle.height; | ||
184 | |||
185 | // // Chrome | ||
186 | // viewport.insertBefore(this._popupElement, viewport.firstChild); | ||
187 | // this._popupElement.style.top = viewport.offsetTop; | ||
188 | // this._popupElement.style.left = viewport.offsetLeft; | ||
189 | |||
190 | // Canary | ||
191 | this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; | ||
192 | this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; | ||
193 | } | ||
194 | }, | ||
195 | |||
196 | handleClick: { | ||
197 | value: function(event) { | ||
198 | switch(event.target.dataset.montageId) { | ||
199 | case "imageA": | ||
200 | this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"]; | ||
201 | break; | ||
202 | case "imageB": | ||
203 | this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"]; | ||
204 | break; | ||
205 | case "imageC": | ||
206 | this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"]; | ||
207 | break; | ||
208 | } | ||
209 | this._shouldShowPopup = true; | ||
210 | this.needsDraw = true; |