Browse Source

Handle case where YouTube player API could not be loaded.

pull/89/head
Joachim Bauch 11 years ago
parent
commit
a361006c75
  1. 29
      static/js/directives/youtubevideo.js
  2. 20
      static/partials/youtubevideo.html

29
static/js/directives/youtubevideo.js

@ -20,7 +20,9 @@ @@ -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'], @@ -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'], @@ -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'], @@ -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) {

20
static/partials/youtubevideo.html

@ -2,7 +2,7 @@ @@ -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 @@ @@ -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 @@ @@ -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>

Loading…
Cancel
Save