Adding the youtube player

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
parent: 28a7a71d2962158cab34f50627f2d22540c29eab (diff)
download: ninja-3070d7b2a3b96609eace60825c721951c85405cc.tar.gz
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 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html>
+    <head>
+    <title></title>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "prototype": "montage/ui/youtube-player.reel",
+            "properties": {
+                "element": {"#": "container"},
+                "player": {"#": "player"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div data-montage-id="container" class="montage-youtube-player">
+        <object type="application/x-shockwave-flash" data-montage-id="player" width="640" height="360">
+            <param name="allowScriptAccess" value="always">
+        </object>
+    </div>
+</body>
+</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 @@
+//data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&amp;enablejsapi=1&amp;playerapiid=ytplayer"
+/* <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("ui/component").Component;
+var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
+    // Stores a queue of function calls to make on the player in the draw
+    // function
+    _playerQueue: {
+        enumerable: false,
+        value: []
+    },
+    _ready: {
+        enumerable: false,
+        value: false
+    },
+    _player: {
+        enumerable: false,
+        value: null
+    },
+    player: {
+        get: function() {
+            return this._player;
+        },
+        set: function(value) {
+            // TODO don't allow this to be changed
+            if (this._player !== value) {
+                this._player = value;
+            }
+        }
+    },
+    _autoplay: {
+        enumerable: false,
+        value: false
+    },
+    autoplay: {
+        get: function() {
+            return this._autoplay;
+        },
+        set: function(value) {
+            if (this._autoplay !== value) {
+                this._autoplay = value;
+            }
+        }
+    },
+    _videoId: {
+        enumerable: false,
+        value: null
+    },
+    videoId: {
+        get: function() {
+            return this._videoId;
+        },
+        set: function(value) {
+            if (this._videoId !== value) {
+                // TODO handle URLs as well
+                this._videoId = value;
+                // If the video isn't in the playlist, clear the playlist,
+                if (this._playlist && this._playlist.indexOf(value) === -1) {
+                    this._playlist = null;
+                }
+                // TODO if the video is in the playlist use playVideoAt
+                if (this._autoplay) {
+                    this._playerQueue.push(["loadVideoById", value]);
+                } else {
+                    this._playerQueue.push(["cueVideoById", value]);
+                }
+                this.needsDraw = true;
+            }
+        }
+    },
+    _playlist: {
+        enumerable: false,
+        value: null
+    },
+    playlist: {
+        get: function() {
+            return this._playlist;
+        },
+        set: function(value) {
+            if (this._playlist !== value) {
+                this._playlist = value;
+                if (this._autoplay) {
+                    this._playerQueue.push(["loadPlaylist", value]);
+                } else {
+                    this._playerQueue.push(["cuePlaylist", value]);
+                }
+                this.needsDraw = true;
+            }
+        }
+    },
+    play: {
+        value: function() {
+            this._playerQueue.push("playVideo");
+            this.needsDraw = true;
+        }
+    },
+    pause: {
+        value: function() {
+            this._playerQueue.push("pauseVideo");
+            this.needsDraw = true;
+        }
+    },
+    stop: {
+        value: function() {
+            this._playerQueue.push("stopVideo");
+            this.needsDraw = true;
+        }
+    },
+    prepareForDraw: {
+        value: function() {
+            // Create the callback if it doesn't exist, and make it dispatch
+            // an event on the document instead
+            if (!window.onYouTubePlayerReady) {
+                window.onYouTubePlayerReady = function(playerId) {
+                    var event = document.createEvent("CustomEvent");
+                    event.initEvent("youtubePlayerReady", true, true);
+                    event.playerId = playerId;
+                    document.dispatchEvent(event);
+                };
+            }
+            document.addEventListener("youtubePlayerReady", this, false);
+            // If there's no videoId set one the doesn't exist
+            this._player.data = "https://www.youtube.com/v/" + (this._videoId || "xxxxxxxxxxx") + "?version=3&enablejsapi=1&playerapiid=" + this.uuid;
+        }
+    },
+    handleYoutubePlayerReady: {
+        value: function(event) {
+            if (event.playerId !== this.uuid) {
+                return;
+            }
+            this._ready = true;
+            this.needsDraw = true;
+        }
+    },
+    draw: {
+        value: function() {
+            if (!this._ready) {
+                return;
+            }
+            for (var i = 0, len = this._playerQueue.length; i < len; i++) {
+                var fnName, args;
+                if (typeof this._playerQueue[i] === "string") {
+                    fnName = this._playerQueue[i];
+                    args = [];
+                } else {
+                    fnName = this._playerQueue[i].shift();
+                    args = this._playerQueue[i];
+                }
+                this._player[fnName].apply(this._player, args);
+            }
+            this._playerQueue.length = 0;
+        }
+    }
+});
+\ No newline at end of file
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
parent	28a7a71d2962158cab34f50627f2d22540c29eab (diff)
download	ninja-3070d7b2a3b96609eace60825c721951c85405cc.tar.gz

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	}
	178	}
	179	}); \ No newline at end of file