Make sure that player controls are visible for youtube

thexerteproject · Jul 1, 2022 · 977f209 · 977f209
1 parent 271b623
commit 977f209
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 14 deletions.
diff --git a/...e/parent_templates/Nottingham/common_html5/js/popcorn/plugins/popcorn.mediaconstructor.js b/...e/parent_templates/Nottingham/common_html5/js/popcorn/plugins/popcorn.mediaconstructor.js
@@ -27,6 +27,8 @@ this.loadMedia = function($holder, mediaType, mediaData, mainMedia = true) {
 
     if (mediaType == "video") {
         //load video - max dimensions set in mediaMetaData function below when dimensions received
+        // Normalize url
+        mediaData.media = Popcorn.fixYouTubeVimeo(mediaData.media);
         $mediaHolder = $holder;
         var $myVideo = $('<div class="' + classes + '"/>').appendTo($mediaHolder);
 
@@ -60,7 +62,7 @@ this.loadMedia = function($holder, mediaType, mediaData, mainMedia = true) {
                     width		:"100%",
                     height		:"100%",
                     autoPlay	:mediaData.autoplay,
-                    pageName	:"mediaLesson"
+                    pageName	:mediaData.pageName ? mediaData.pageName : "mediaLesson"
                 });
 
             popcornInstance = Popcorn("#" +$holder.attr("id") + " video");

diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/popcorn/popcorn-complete.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/popcorn/popcorn-complete.js
@@ -3216,9 +3216,9 @@
   Popcorn.fixYouTubeVimeo = function(url) {
     var path = url.trim();
     let result = url.match(/(^|<iframe.+?src=["'])((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?.*?(<\/iframe>|$)$/);
-    if (result) return "www.youtube.com/watch?v=" + result[7];
+    if (result) return "https://www.youtube.com/watch?v=" + result[7] + (result[8] !== undefined ? result[8] : "");
     result = url.match(/(^|<iframe.+?src=["'])(?:http|https)?:?\/?\/?(?:www\.)?(?:player\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|video\/|)(\d+)(?:|\/\?).*?(<\/iframe>|$)/);
-    if (result) return "vimeo.com/" + result[2];
+    if (result) return "https://vimeo.com/" + result[2];
     return url;
   }
 
@@ -6361,6 +6361,7 @@
           player.setVolume( 0 );
           // set subtitle to Xerte language
           player.enableTextTrack(x_params.language.substr(0,2));
+          /// TODO TOR
           player.play();
           break;
         case "loadProgress":
@@ -6935,8 +6936,8 @@
         return;
       }
       addYouTubeEvent( "pause", onFirstPause );
-      player.seekTo( 0 );
       player.pauseVideo();
+      player.seekTo( 0 );
     }
 
     function addYouTubeEvent( event, listener ) {

diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
@@ -3634,7 +3634,7 @@ function x_isYouTubeVimeo(url) {
 function x_fixYouTubeVimeo(url) {
 	var path = url.trim();
 	let result = url.match(/(^|<iframe.+?src=["'])((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?.*?(<\/iframe>|$)$/);
-	if (result) return "www.youtube.com/watch?v=" + result[7];
+	if (result) return "www.youtube.com/watch?v=" + result[7] + (result[8] !== undefined ? result[8] : "");
 	result = url.match(/(^|<iframe.+?src=["'])(?:http|https)?:?\/?\/?(?:www\.)?(?:player\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|video\/|)(\d+)(?:|\/\?).*?(<\/iframe>|$)/);
 	if (result) return "vimeo.com/" + result[2];
 	return url;

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html b/modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html
@@ -24,9 +24,6 @@
 
 		// function called every time the page is viewed after it has initially loaded
 		this.pageChanged = function() {
-			$("#pageVideo")
-					.width(0)
-					.height(0);
 			this.setUp();
 		}
 
@@ -92,7 +89,6 @@
 		this.setUp = function() {
 			// Reset video for pageChanged
 			$("#pageVideo").html("");
-
 			// text align
 			$("#textHolder").html(x_addLineBreaks(x_currentPageXML.childNodes[0].nodeValue));
 			var $panel = $("#pageContents .panel");
@@ -114,7 +110,6 @@
 				ratio = x_currentPageXML.getAttribute("iframeRatio"),
 				iframeRatio = ratio ? ratio : '16:9';
 
-			debugger;
 			if (videoSrc.substr(0,7) == "<iframe") {
 				$("#pageContents .panel").removeClass("panel inline");
 
@@ -162,7 +157,6 @@
 				$pageVideo.data('iframeRatio', iframeRatio);
 				const ratio = iframeRatio[0] / iframeRatio[1];
 
-
 				this.popcornInstance = loadMedia($("#pageVideo"), "video",
 				{	tip: x_currentPageXML.getAttribute("tip"),
 					width: videoDimensions ? Number(videoDimensions[0]) : 0,
@@ -191,9 +185,7 @@
 				}
 			}
 
-			setTimeout(function(){
-				textVideo.sizeChanged();
-			}, 100);
+			textVideo.sizeChanged();
 			x_pageLoaded();
 		}