diff options
author | François Frisch | 2012-03-17 18:05:23 -0700 |
---|---|---|
committer | François Frisch | 2012-03-17 18:05:23 -0700 |
commit | 3070d7b2a3b96609eace60825c721951c85405cc (patch) | |
tree | d24dbde3fb0369335b95cfd4f37a970428ea1656 /node_modules/montage/ui/youtube-player.reel | |
parent | 28a7a71d2962158cab34f50627f2d22540c29eab (diff) | |
download | ninja-3070d7b2a3b96609eace60825c721951c85405cc.tar.gz |
Adding the youtube player
Diffstat (limited to 'node_modules/montage/ui/youtube-player.reel')
-rw-r--r-- | node_modules/montage/ui/youtube-player.reel/youtube-player.html | 29 | ||||
-rw-r--r-- | node_modules/montage/ui/youtube-player.reel/youtube-player.js | 179 |
2 files changed, 208 insertions, 0 deletions
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.html b/node_modules/montage/ui/youtube-player.reel/youtube-player.html new file mode 100644 index 00000000..ae757626 --- /dev/null +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.html | |||
@@ -0,0 +1,29 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | <head> | ||
9 | <title></title> | ||
10 | <script type="text/montage-serialization"> | ||
11 | { | ||
12 | "owner": { | ||
13 | "prototype": "montage/ui/youtube-player.reel", | ||
14 | "properties": { | ||
15 | "element": {"#": "container"}, | ||
16 | "player": {"#": "player"} | ||
17 | } | ||
18 | } | ||
19 | } | ||
20 | </script> | ||
21 | </head> | ||
22 | <body> | ||
23 | <div data-montage-id="container" class="montage-youtube-player"> | ||
24 | <object type="application/x-shockwave-flash" data-montage-id="player" width="640" height="360"> | ||
25 | <param name="allowScriptAccess" value="always"> | ||
26 | </object> | ||
27 | </div> | ||
28 | </body> | ||
29 | </html> | ||
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js new file mode 100644 index 00000000..2f7709d7 --- /dev/null +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js | |||
@@ -0,0 +1,179 @@ | |||
1 | //data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&enablejsapi=1&playerapiid=ytplayer" | ||
2 | /* <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> */ | ||
7 | /*global require,exports*/ | ||
8 | var Montage = require("montage").Montage, | ||
9 | Component = require("ui/component").Component; | ||
10 | |||
11 | var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { | ||
12 | |||
13 | // Stores a queue of function calls to make on the player in the draw | ||
14 | // function | ||
15 | _playerQueue: { | ||
16 | enumerable: false, | ||
17 | value: [] | ||
18 | }, | ||
19 | |||
20 | _ready: { | ||
21 | enumerable: false, | ||
22 | value: false | ||
23 | }, | ||
24 | |||
25 | _player: { | ||
26 | enumerable: false, | ||
27 | value: null | ||
28 | }, | ||
29 | player: { | ||
30 | get: function() { | ||
31 | return this._player; | ||
32 | }, | ||
33 | set: function(value) { | ||
34 | // TODO don't allow this to be changed | ||
35 | if (this._player !== value) { | ||
36 | this._player = value; | ||
37 | } | ||
38 | } | ||
39 | }, | ||
40 | |||
41 | _autoplay: { | ||
42 | enumerable: false, | ||
43 | value: false | ||
44 | }, | ||
45 | autoplay: { | ||
46 | get: function() { | ||
47 | return this._autoplay; | ||
48 | }, | ||
49 | set: function(value) { | ||
50 | if (this._autoplay !== value) { | ||
51 | this._autoplay = value; | ||
52 | } | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | _videoId: { | ||
57 | enumerable: false, | ||
58 | value: null | ||
59 | }, | ||
60 | videoId: { | ||
61 | get: function() { | ||
62 | return this._videoId; | ||
63 | }, | ||
64 | set: function(value) { | ||
65 | if (this._videoId !== value) { | ||
66 | // TODO handle URLs as well | ||
67 | this._videoId = value; | ||
68 | |||
69 | // If the video isn't in the playlist, clear the playlist, | ||
70 | if (this._playlist && this._playlist.indexOf(value) === -1) { | ||
71 | this._playlist = null; | ||
72 | } | ||
73 | // TODO if the video is in the playlist use playVideoAt | ||
74 | |||
75 | if (this._autoplay) { | ||
76 | this._playerQueue.push(["loadVideoById", value]); | ||
77 | } else { | ||
78 | this._playerQueue.push(["cueVideoById", value]); | ||
79 | } | ||
80 | this.needsDraw = true; | ||
81 | } | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | _playlist: { | ||
86 | enumerable: false, | ||
87 | value: null | ||
88 | }, | ||
89 | playlist: { | ||
90 | get: function() { | ||
91 | return this._playlist; | ||
92 | }, | ||
93 | set: function(value) { | ||
94 | if (this._playlist !== value) { | ||
95 | this._playlist = value; | ||
96 | |||
97 | if (this._autoplay) { | ||
98 | this._playerQueue.push(["loadPlaylist", value]); | ||
99 | } else { | ||
100 | this._playerQueue.push(["cuePlaylist", value]); | ||
101 | } | ||
102 | this.needsDraw = true; | ||
103 | } | ||
104 | } | ||
105 | }, | ||
106 | |||
107 | play: { | ||
108 | value: function() { | ||
109 | this._playerQueue.push("playVideo"); | ||
110 | this.needsDraw = true; | ||
111 | } | ||
112 | }, | ||
113 | pause: { | ||
114 | value: function() { | ||
115 | this._playerQueue.push("pauseVideo"); | ||
116 | this.needsDraw = true; | ||
117 | } | ||
118 | }, | ||
119 | stop: { | ||
120 | value: function() { | ||
121 | this._playerQueue.push("stopVideo"); | ||
122 | this.needsDraw = true; | ||
123 | } | ||
124 | }, | ||
125 | |||
126 | prepareForDraw: { | ||
127 | value: function() { | ||
128 | // Create the callback if it doesn't exist, and make it dispatch | ||
129 | // an event on the document instead | ||
130 | if (!window.onYouTubePlayerReady) { | ||
131 | window.onYouTubePlayerReady = function(playerId) { | ||
132 | var event = document.createEvent("CustomEvent"); | ||
133 | event.initEvent("youtubePlayerReady", true, true); | ||
134 | event.playerId = playerId; | ||
135 | document.dispatchEvent(event); | ||
136 | }; | ||
137 | } | ||
138 | |||
139 | document.addEventListener("youtubePlayerReady", this, false); | ||
140 | |||
141 | // If there's no videoId set one the doesn't exist | ||
142 | this._player.data = "https://www.youtube.com/v/" + (this._videoId || "xxxxxxxxxxx") + "?version=3&enablejsapi=1&playerapiid=" + this.uuid; | ||
143 | } | ||
144 | }, | ||
145 | |||
146 | handleYoutubePlayerReady: { | ||
147 | value: function(event) { | ||
148 | if (event.playerId !== this.uuid) { | ||
149 | return; | ||
150 | } | ||
151 | |||
152 | this._ready = true; | ||
153 | this.needsDraw = true; | ||
154 | } | ||
155 | }, | ||
156 | |||
157 | draw: { | ||
158 | value: function() { | ||
159 | if (!this._ready) { | ||
160 | return; | ||
161 | } | ||
162 | |||
163 | for (var i = 0, len = this._playerQueue.length; i < len; i++) { | ||
164 | var fnName, args; | ||
165 | if (typeof this._playerQueue[i] === "string") { | ||
166 | fnName = this._playerQueue[i]; | ||
167 | args = []; | ||
168 | } else { | ||
169 | fnName = this._playerQueue[i].shift(); | ||
170 | args = this._playerQueue[i]; | ||
171 | } | ||
172 | |||
173 | this._player[fnName].apply(this._player, args); | ||
174 | } | ||
175 | |||
176 | this._playerQueue.length = 0; | ||
177 | } |