Handle case where YouTube player API could not be loaded.

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($('<script src="https://www.youtube.com/iframe_api"></script>'));
+					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) {

static/partials/youtubevideo.html

@@ -2,7 +2,7 @@
 	<div class="youtubevideopane nicescroll">
 		<form class="container-fluid form" role="form">
 
-			<div class="welcome container-fluid" ng-show="!playbackActive">
+			<div class="welcome container-fluid" ng-show="!playbackActive && youtubeAPIReady">
 				<div class="welcome-logo fa fa-youtube"></div>
 				<h1>{{_('Share a YouTube video')}}</h1>
 				<div class="welcome-container">
@@ -21,6 +21,20 @@
 				</div>
 			</div>
 
+			<div class="welcome container-fluid" ng-show="!youtubeAPIReady">
+				<div class="welcome-logo fa fa-youtube"></div>
+				<h1>{{_('Share a YouTube video')}}</h1>
+				<div class="welcome-container text-center">
+					<p>
+					  <p>{{_("Could not load YouTube player API, please check your network / firewall settings.")}}</p>
+					  <p ng-if="currentVideoUrl">{{_('Currently playing')}}<br><a href="{{ currentVideoUrl }}" rel="external" target="_blank">{{ currentVideoUrl }}</a></p>
+					  <p class="form-group welcome-input">
+						<button class="btn btn-primary btn-lg" type="button" ng-click="loadYouTubeAPI()">{{_("Retry")}}</button>
+					  </p>
+					</p>
+				</div>
+			</div>
+
 			<div ng-show="playbackActive">
 				<div class="row" id="youtubecontainer">
 					<div class="embed-responsive embed-responsive-16by9">
@@ -36,14 +50,14 @@
 		</form>
 	</div>
 
-	<div class="overlaybar form-horizontal" ng-class="{notvisible: hideControlsBar}">
+	<div class="overlaybar form-horizontal" ng-if="youtubeAPIReady" ng-class="{notvisible: hideControlsBar}">
 		<a class="overlaybar-button" ng-model="hideControlsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('YouTube controls')}}"><i class="fa fa-cogs"></i></a>
 		<div class="overlaybar-content">
 			<form class="container-fluid" role="form">
 				<div class="form-group">
 					<label for="youtubeurl">{{_('YouTube video to share')}}</label>
 					<div class="overlaybar-input">
-						<input type="text" class="form-control input-lg" id="youtubeurl" ng-model="youtubeurl" required placeholder="{{_('YouTube URL')}}">
+						<input type="text" class="form-control input-lg" ng-disabled="!youtubeAPIReady" id="youtubeurl" ng-model="youtubeurl" required placeholder="{{_('YouTube URL')}}">
 						<div class="overlaybar-buttons">
 							<button type="button" class="btn btn-primary" ng-click="shareVideo(youtubeurl)" ng-disabled="youtubeurl === ''">{{_('Share')}}</button>
 						</div>