Joachim Bauch
10 years ago
8 changed files with 362 additions and 268 deletions
@ -0,0 +1,248 @@ |
|||||||
|
/* |
||||||
|
* Spreed WebRTC. |
||||||
|
* Copyright (C) 2013-2015 struktur AG |
||||||
|
* |
||||||
|
* This file is part of Spreed WebRTC. |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU Affero General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU Affero General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU Affero General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
"use strict"; |
||||||
|
(function () { |
||||||
|
|
||||||
|
var script = document.getElementsByTagName("script")[0]; |
||||||
|
var PARENT_ORIGIN = script.getAttribute("data-parent-origin"); |
||||||
|
|
||||||
|
var YouTubeSandbox = function(window) { |
||||||
|
this.head = document.getElementsByTagName('head')[0]; |
||||||
|
this.window = window; |
||||||
|
this.addedIframeScript = false; |
||||||
|
this.player = null; |
||||||
|
this.seekDetector = null; |
||||||
|
this.prevTime = null; |
||||||
|
this.prevNow = null; |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.postMessage = function(type, message) { |
||||||
|
var msg = {"type": type}; |
||||||
|
msg[type] = message; |
||||||
|
this.window.parent.postMessage(msg, PARENT_ORIGIN); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.onYouTubeIframeAPIReady = function() { |
||||||
|
this.postMessage("youtube.apiReady", {"apiReady": true}); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.loadApi = function(url) { |
||||||
|
if (!this.addedIframeScript) { |
||||||
|
var that = this; |
||||||
|
var script = document.createElement('script'); |
||||||
|
script.type = "text/javascript"; |
||||||
|
script.src = url; |
||||||
|
script.onerror = function(evt) { |
||||||
|
that.postMessage("youtube.error", {"msgid": "loadScriptFailed"}); |
||||||
|
that.head.removeChild(script); |
||||||
|
that.addedIframeScript = false; |
||||||
|
}; |
||||||
|
this.head.appendChild(script); |
||||||
|
this.addedIframeScript = true; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.loadPlayer = function(params) { |
||||||
|
if (!this.player) { |
||||||
|
var that = this; |
||||||
|
var stateEvents = { |
||||||
|
"-1": "youtube.unstarted", |
||||||
|
"0": "youtube.ended", |
||||||
|
"1": "youtube.playing", |
||||||
|
"2": "youtube.paused", |
||||||
|
"3": "youtube.buffering", |
||||||
|
"5": "youtube.videocued" |
||||||
|
}; |
||||||
|
|
||||||
|
var playerVars = params.playerVars || {}; |
||||||
|
delete playerVars.origin; |
||||||
|
this.player = new this.window.YT.Player("youtubeplayer", { |
||||||
|
height: params.height || "390", |
||||||
|
width: params.width || "640", |
||||||
|
playerVars: playerVars, |
||||||
|
events: { |
||||||
|
"onReady": function(event) { |
||||||
|
that.postMessage("youtube.volume", {"volume": that.player.getVolume()}); |
||||||
|
that.postMessage("youtube.playerReady", {"playerReady": true}); |
||||||
|
}, |
||||||
|
"onStateChange": function(event) { |
||||||
|
var msg = stateEvents[event.data]; |
||||||
|
if (typeof msg === "undefined") { |
||||||
|
console.warn("Unknown YouTube player state", event) |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
switch (msg) { |
||||||
|
case "youtube.playing": |
||||||
|
that.prevTime = null; |
||||||
|
that.startDetectSeek(); |
||||||
|
break; |
||||||
|
case "youtube.buffering": |
||||||
|
that.startDetectSeek(); |
||||||
|
break; |
||||||
|
case "youtube.paused": |
||||||
|
that.stopDetectSeek(); |
||||||
|
break; |
||||||
|
case "youtube.ended": |
||||||
|
that.stopDetectSeek(); |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
that.postMessage("youtube.event", {"event": msg, "state": event.data, "position": that.player.getCurrentTime()}); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.destroyPlayer = function() { |
||||||
|
this.stopDetectSeek(); |
||||||
|
if (this.player) { |
||||||
|
this.player.destroy(); |
||||||
|
this.player = null; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.loadVideo = function(id, position) { |
||||||
|
this.prevTime = null; |
||||||
|
this.prevNow = null; |
||||||
|
if (typeof(position) !== "undefined") { |
||||||
|
this.player.loadVideoById(id, position); |
||||||
|
} else { |
||||||
|
this.player.loadVideoById(id); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.playVideo = function() { |
||||||
|
this.player.playVideo(); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.pauseVideo = function() { |
||||||
|
this.player.pauseVideo(); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.stopVideo = function() { |
||||||
|
this.player.stopVideo(); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.seekTo = function(position, allowSeekAhead) { |
||||||
|
if (typeof(allowSeekAhead) !== "undefined") { |
||||||
|
this.player.seekTo(position, allowSeekAhead); |
||||||
|
} else { |
||||||
|
this.player.seekTo(position); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.setVolume = function(volume) { |
||||||
|
this.player.setVolume(volume); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.startDetectSeek = function() { |
||||||
|
var that = this; |
||||||
|
var checkSeek = function() { |
||||||
|
if (!that.player) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var now = new Date(); |
||||||
|
var time = that.player.getCurrentTime(); |
||||||
|
that.postMessage("youtube.position", {"position": time}); |
||||||
|
if (that.prevTime === null) { |
||||||
|
that.prevTime = time; |
||||||
|
} |
||||||
|
if (that.prevNow === null) { |
||||||
|
that.prevNow = now; |
||||||
|
} |
||||||
|
var deltaTime = Math.abs(time - that.prevTime); |
||||||
|
var deltaNow = (now - that.prevNow) * 0.001; |
||||||
|
if (deltaTime > deltaNow * 1.1) { |
||||||
|
that.postMessage("youtube.event", {"event": "youtube.seeked", "position": time}); |
||||||
|
} |
||||||
|
that.prevNow = now; |
||||||
|
that.prevTime = time; |
||||||
|
}; |
||||||
|
|
||||||
|
if (!this.seekDetector) { |
||||||
|
this.seekDetector = this.window.setInterval(function() { |
||||||
|
checkSeek(); |
||||||
|
}, 1000); |
||||||
|
} |
||||||
|
checkSeek(); |
||||||
|
}; |
||||||
|
|
||||||
|
YouTubeSandbox.prototype.stopDetectSeek = function() { |
||||||
|
if (this.seekDetector) { |
||||||
|
this.window.clearInterval(this.seekDetector); |
||||||
|
this.seekDetector = null; |
||||||
|
} |
||||||
|
this.prevNow = null; |
||||||
|
}; |
||||||
|
|
||||||
|
var sandbox = new YouTubeSandbox(window); |
||||||
|
|
||||||
|
window.onYouTubeIframeAPIReady = function() { |
||||||
|
sandbox.onYouTubeIframeAPIReady(); |
||||||
|
}; |
||||||
|
|
||||||
|
window.addEventListener("message", function(event) { |
||||||
|
if (event.origin !== PARENT_ORIGIN) { |
||||||
|
// only accept messages from spreed-webrtc
|
||||||
|
return; |
||||||
|
} |
||||||
|
var msg = event.data; |
||||||
|
var data = msg[msg.type] || {}; |
||||||
|
switch (msg.type) { |
||||||
|
case "loadApi": |
||||||
|
sandbox.loadApi(data.url); |
||||||
|
break; |
||||||
|
case "loadPlayer": |
||||||
|
sandbox.loadPlayer(data); |
||||||
|
break; |
||||||
|
case "destroyPlayer": |
||||||
|
sandbox.destroyPlayer(); |
||||||
|
break; |
||||||
|
case "loadVideo": |
||||||
|
sandbox.loadVideo(data.id, data.position); |
||||||
|
break; |
||||||
|
case "playVideo": |
||||||
|
sandbox.playVideo(); |
||||||
|
break; |
||||||
|
case "pauseVideo": |
||||||
|
sandbox.pauseVideo(); |
||||||
|
break; |
||||||
|
case "stopVideo": |
||||||
|
sandbox.stopVideo(); |
||||||
|
break; |
||||||
|
case "seekTo": |
||||||
|
sandbox.seekTo(data.position, data.allowSeekAhead); |
||||||
|
break; |
||||||
|
case "setVolume": |
||||||
|
sandbox.setVolume(data.volume); |
||||||
|
break; |
||||||
|
default: |
||||||
|
console.log("Unknown message received", event); |
||||||
|
break; |
||||||
|
} |
||||||
|
}, false); |
||||||
|
|
||||||
|
console.log("YouTube sandbox ready."); |
||||||
|
|
||||||
|
})(); |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
/* |
||||||
|
* Spreed WebRTC. |
||||||
|
* Copyright (C) 2013-2015 struktur AG |
||||||
|
* |
||||||
|
* This file is part of Spreed WebRTC. |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU Affero General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU Affero General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU Affero General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
"use strict"; |
||||||
|
define(["jquery", "underscore"], function($, _) { |
||||||
|
|
||||||
|
return ["$window", function($window) { |
||||||
|
|
||||||
|
var Sandbox = function(iframe, template) { |
||||||
|
this.iframe = iframe; |
||||||
|
this.iframe.src = "data:text/html;charset=utf-8," + encodeURI(template); |
||||||
|
this.target = this.iframe.contentWindow; |
||||||
|
this.e = $({}); |
||||||
|
this.handler = _.bind(this.onPostMessageReceived, this); |
||||||
|
$window.addEventListener("message", this.handler, false); |
||||||
|
}; |
||||||
|
|
||||||
|
Sandbox.prototype.destroy = function() { |
||||||
|
if (this.handler) { |
||||||
|
$window.removeEventListener("message", this.handler, false); |
||||||
|
this.handler = null; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
Sandbox.prototype.onPostMessageReceived = function(event) { |
||||||
|
if (event.origin !== "null" || event.source !== this.target) { |
||||||
|
// the sandboxed data-url iframe has "null" as origin
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.e.triggerHandler("message", [event]); |
||||||
|
}; |
||||||
|
|
||||||
|
Sandbox.prototype.postMessage = function(type, message) { |
||||||
|
var msg = {"type": type} |
||||||
|
msg[type] = message; |
||||||
|
this.target.postMessage(msg, "*"); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
createSandbox: function(iframe, template) { |
||||||
|
return new Sandbox(iframe, template); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
}]; |
||||||
|
|
||||||
|
}); |
||||||
Loading…
Reference in new issue