pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Load Youtube sandbox content on demand.

pull/208/head
Simon Eisenmann 11 years ago
parent
344c5a4484
commit
ff8150569b
2 changed files with 22 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      html/sandboxes/youtubevideo_sandbox.html
  2. 36
      static/js/directives/youtubevideo.js

5
static/partials/youtubevideo_sandbox.html → html/sandboxes/youtubevideo_sandbox.html
Unescape View File

@ -2,7 +2,8 @@
<html> <html>
<head> <head>
<title>YouTube Player Sandbox</title> <title>YouTube Player Sandbox</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src __PARENT_ORIGIN__ https://www.youtube.com https://s.ytimg.com 'unsafe-eval'; frame-src https://www.youtube.com; style-src 'unsafe-inline'"> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src <%.Origin%> https://www.youtube.com https://s.ytimg.com 'unsafe-eval'; frame-src https://www.youtube.com; style-src 'unsafe-inline'">
<base href="<%.Cfg.B%>">
<style type="text/css"> <style type="text/css">
html, body { html, body {
height:100%; height:100%;
@ -22,6 +23,6 @@
</head> </head>
<body> <body>
<div id="youtubeplayer"></div> <div id="youtubeplayer"></div>
<script src="__YOUTUBE_SANDBOX_JS_URL__" data-parent-origin="__PARENT_ORIGIN__"></script> <script src="<%.Cfg.S%>/js/sandboxes/youtube.js" data-parent-origin="<%.Origin%>"></script>
</body> </body>
</html> </html>

36
static/js/directives/youtubevideo.js
Unescape View File

@ -20,9 +20,9 @@
*/ */
"use strict"; "use strict";
define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo.html', 'text!partials/youtubevideo_sandbox.html', 'bigscreen'], function(require, $, _, moment, template, sandboxTemplate, BigScreen) { define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo.html', 'bigscreen'], function(require, $, _, moment, template, BigScreen) {
return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", "$q", "restURL", "sandbox", function($window, $document, mediaStream, alertify, translation, safeApply, appData, $q, restURL, sandbox) { return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", "$q", "restURL", "sandbox", "$http", function($window, $document, mediaStream, alertify, translation, safeApply, appData, $q, restURL, sandbox, $http) {
var YOUTUBE_IFRAME_API_URL = "//www.youtube.com/iframe_api"; var YOUTUBE_IFRAME_API_URL = "//www.youtube.com/iframe_api";
@ -106,25 +106,14 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
var initialState = null; var initialState = null;
var sandboxApi = null; var sandboxApi = null;
var createSandboxApi = function(force) { var createSandboxApi = function(force, template) {
if (sandboxApi && force) { if (sandboxApi && force) {
sandboxApi.destroy(); sandboxApi.destroy();
sandboxApi = null; sandboxApi = null;
} }
if (!sandboxApi) { if (!sandboxApi) {
var template = sandboxTemplate;
template = template.replace(/__PARENT_ORIGIN__/g, $window.location.protocol + "//" + $window.location.host);
template = template.replace(/__YOUTUBE_SANDBOX_JS_URL__/g, restURL.createAbsoluteUrl(require.toUrl('sandboxes/youtube') + ".js"));
// NOTE(longsleep): Youtube needs to have allow-same-origin
// on the sandbox to function. For this reason, the sandbox
// frame is loaded from a blob: URL. Bottom line is that the
// CSP in the meta tag then does get ignored by Firefox and
// the global CSP is used instead. Means if a secure CSP is
// set, Youtube player does not work in Firefox. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=663570 for details.
sandboxApi = sandbox.createSandbox($(".youtubeplayercontainer", $element)[0], template, null, "allow-scripts allow-same-origin", "youtubeplayer"); sandboxApi = sandbox.createSandbox($(".youtubeplayercontainer", $element)[0], template, null, "allow-scripts allow-same-origin", "youtubeplayer");
sandboxApi.e.on("message", function(event, message) { sandboxApi.e.on("message", function(event, message) {
var msg = message.data; var msg = message.data;
var data = msg[msg.type] || {}; var data = msg[msg.type] || {};
@ -551,12 +540,25 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
} }
}; };
$scope.loadYouTubeAPI = function() { $scope.loadYouTubeAPI = function(soft) {
createSandboxApi(true); var url = restURL.sandbox("youtubevideo");
var baseRegex = /<base href=.*>/i;
// NOTE(longsleep): Youtube needs to have allow-same-origin
// on the sandbox to function. For this reason, the sandbox
// frame is loaded from a blob: URL. Bottom line is that the
// CSP in the meta tag then does get ignored by Firefox and
// the global CSP is used instead. Means if a secure CSP is
// set, Youtube player does not work in Firefox. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=663570 for details.
$http.get(url).success(function(data) {
var base = '<base href="'+restURL.createAbsoluteUrl("")+'">';
data = data.replace(baseRegex, base);
createSandboxApi(!soft, data);
});
}; };
$scope.showYouTubeVideo = function() { $scope.showYouTubeVideo = function() {
createSandboxApi(); $scope.loadYouTubeAPI(true);
$scope.layout.youtubevideo = true; $scope.layout.youtubevideo = true;
$scope.$emit("mainview", "youtubevideo", true); $scope.$emit("mainview", "youtubevideo", true);
if (currentToken) { if (currentToken) {

Write Preview
Loading…
Cancel
Save