diff --git a/static/js/directives/youtubevideo.js b/static/js/directives/youtubevideo.js index c426b04a..7b2aff0f 100644 --- a/static/js/directives/youtubevideo.js +++ b/static/js/directives/youtubevideo.js @@ -20,7 +20,9 @@ */ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], function($, _, template, BigScreen) { - return ["$window", "mediaStream", "alertify", "translation", "safeApply", "appData", function($window, mediaStream, alertify, translation, safeApply, appData) { + return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", function($window, $document, mediaStream, alertify, translation, safeApply, appData) { + + var YOUTUBE_IFRAME_API_URL = "https://www.youtube.com/iframe_api"; var isYouTubeIframeAPIReady = $.Deferred(); $window.onYouTubeIframeAPIReady = function() { @@ -62,6 +64,13 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], $scope.currentVideoUrl = null; $scope.currentVideoId = null; $scope.youtubeurl = ""; + $scope.youtubeAPIReady = false; + + isYouTubeIframeAPIReady.done(function() { + $scope.$apply(function(scope) { + scope.youtubeAPIReady = true; + }); + }); var onPlayerReady = function(event) { $scope.$apply(function(scope) { @@ -335,6 +344,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], console.log("Received YouTubeVideo play request", data); playReceivedNow = new Date(); $scope.$apply(function(scope) { + scope.currentVideoUrl = data.Play.url; createVideoPlayer(false); playerReady.done(function() { safeApply(scope, function(scope) { @@ -450,11 +460,24 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], } }; - $scope.showYouTubeVideo = function() { + $scope.loadYouTubeAPI = function() { if (!addedIframeScript) { - $element.append($('')); + var head = $document[0].getElementsByTagName('head')[0]; + var script = $document[0].createElement('script'); + script.type = "text/javascript"; + script.src = YOUTUBE_IFRAME_API_URL; + script.onerror = function(event) { + alertify.dialog.alert(translation._("Could not load YouTube player API, please check your network / firewall settings.")); + head.removeChild(script); + addedIframeScript = false; + }; + head.appendChild(script); addedIframeScript = true; } + }; + + $scope.showYouTubeVideo = function() { + $scope.loadYouTubeAPI(); $scope.layout.youtubevideo = true; $scope.$emit("mainview", "youtubevideo", true); if (currentToken) { diff --git a/static/partials/youtubevideo.html b/static/partials/youtubevideo.html index b59b4aa8..529508f5 100644 --- a/static/partials/youtubevideo.html +++ b/static/partials/youtubevideo.html @@ -2,7 +2,7 @@
+
{{_("Could not load YouTube player API, please check your network / firewall settings.")}}
+{{_('Currently playing')}}
{{ currentVideoUrl }}
+ +
+