Fix #1174 #1178 Video sync bugs - scrolling and duplication bugs

thexerteproject · Mar 8, 2023 · 3c129d9 · 3c129d9
1 parent 00b16a2
commit 3c129d9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.css b/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.css
@@ -1,7 +1,8 @@
 /* videoSynch.html */
 
 #mainText {
-	padding: 10px;
+	padding: 0 10px 10px;
+	overflow: auto;
 }
 
 #infoHolder {
@@ -28,3 +29,6 @@ div#muteButton, div#playButton {
 	cursor: pointer;
 }
 
+#videoHolder .panel {
+	margin-bottom: 1em;
+}
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html b/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html
@@ -26,24 +26,16 @@
 
 	// function called every time the page is viewed after it has initially loaded
 	this.pageChanged = function() {
-		$infoHolder = $("#infoHolder");
-		$pageContents = $("#pageContents");
-
-		$infoHolder
-			.scrollTop(0)
-			.children("div").hide();
-
-		var $captionAtStart = $($pageContents.data("captions")).filter( function(){ return $(this).data("synch") == 0; });
-		if ($captionAtStart.length > 0) {
-			$captionAtStart.show();
-		}
-
+		$("#pageVideo, #mainText, #infoHolder").empty();
 		this.setUp();
 	}
 
 	// function called every time the size of the LO is changed
 	this.sizeChanged = function() {
-		$infoHolder.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2);
+		if (x_browserInfo.mobile != true) {
+			$infoHolder.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2);
+			$("#mainText").height($x_pageHolder.height() - ($(".panel").outerHeight(true) + ($("#mainText").outerHeight(true) - $("#mainText").height()) + ($("#x_pageDiv").outerHeight(true) - $("#x_pageDiv").height())));
+		}
 
 		if ($infoHolder.children("div:visible").last().length > 0) {
 			$infoHolder.children("div:visible").last()[0].scrollIntoView(true);
@@ -75,7 +67,7 @@
 
 		$("#mainText").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
 
-		    var	captionInfo = new Array();
+		var captionInfo = new Array();
 
 		// uses data from timedText file if there is one - otherwise use nested page info
 		if (x_currentPageXML.getAttribute("timedText") != "" && x_currentPageXML.getAttribute("timedText") != undefined) {
@@ -153,9 +145,6 @@
 			this.scrollIntoView(true);
 		});
 
-		this.sizeChanged();
-
-
 		var $pageVideo = $("#pageVideo"),
 			videoDimensions = [320,240];
 
@@ -190,7 +179,9 @@
 
 		this.addEvents(this.popcornInstance);
 		resizeEmbededMedia($(".popcornMedia.embed"), {width: videoDimensions[0], height: videoDimensions[1]})
-
+
+		this.sizeChanged();
+
 		// Show captions that should happen before the first timeupdate.
 		var $captionAtStart = $($pageContents.data("captions")).filter( function(){ return $(this).data("synch") == 0; });
 		if ($captionAtStart.length > 0) {