Adjust and restore sign and transcript windows for fullscreen

joedolson · joedolson · commit cb17466a6c44 · 2025-12-31T17:46:25.000-06:00
Ensures that sign and transcript remain visible and movable. fixes #714
diff --git a/scripts/buildplayer.js b/scripts/buildplayer.js
@@ -197,6 +197,36 @@
 		}
 	};
 
+	/**
+	 * Reposition draggable windows when switched into fullscreen.
+	 *
+	 * @param {string} which 'transcript' or 'sign'.
+	 */
+	AblePlayer.prototype.rePositionDraggableWindow = function (which) {
+
+		let preferences, $window;
+		preferences = this.getPref();
+		$window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow;
+		if ( which === 'transcript' ) {
+			if (typeof preferences.transcript !== 'undefined') {
+				this.prevTranscriptPosition = preferences.transcript;
+			}
+			$window.css({
+				'top': 0,
+				'left': 0
+			});
+		} else {
+			if (typeof preferences.sign !== 'undefined') {
+				this.prevSignPosition = preferences.sign;
+			}
+			$window.css({
+				'top': 0,
+				'right': 0,
+				'left': 'auto'
+			});
+		}
+	}
+
 	AblePlayer.prototype.positionDraggableWindow = function (which, width) {
 
 		// which is either 'transcript' or 'sign'
@@ -208,10 +238,18 @@
 			if (typeof preferences.transcript !== 'undefined') {
 				preferencePos = preferences.transcript;
 			}
+			if ( this.prevTranscriptPosition ) {
+				preferencePos = this.prevTranscriptPosition;
+				this.prevTranscriptPosition = false;
+			}
 		} else if (which === 'sign') {
 			if (typeof preferences.sign !== 'undefined') {
 				preferencePos = preferences.sign;
 			}
+			if ( this.prevSignPosition ) {
+				preferencePos = this.prevSignPosition;
+				this.prevSignPosition = false;
+			}
 		}
 		if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) {
 			// position window using stored values from preferences
@@ -236,7 +274,8 @@
 					});
 				}
 				// If draggable window is off screen to the left.
-				if ( leftPosition < 0 ) {
+				if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) {
+					console.log( leftPosition );
 					$window.css({
 						'left': preferencePos['left'] - leftPosition
 					});
diff --git a/scripts/control.js b/scripts/control.js
@@ -1212,6 +1212,14 @@
 					x: window.pageXOffset || 0,
 					y: window.pageYOffset || 0
 				}
+				if (this.prefTranscript === 1) {
+					// transcript is on. Go ahead and reposition it
+					this.rePositionDraggableWindow("transcript");
+				}
+				if (this.prefSign === 1) {
+					// sign is on. Go ahead and reposition it
+					this.rePositionDraggableWindow("sign");
+				}
 				this.scrollPosition = scroll;
 				// Initialize fullscreen
 				if (el.requestFullscreen) {
@@ -1230,6 +1238,14 @@
 				} else if (document.webkitCancelFullscreen) {
 					document.webkitCancelFullscreen();
 				}
+				if (this.prefTranscript === 1) {
+					// transcript is on. Go ahead and reposition it
+					this.positionDraggableWindow("transcript");
+				}
+				if (this.prefSign === 1) {
+					// sign is on. Go ahead and reposition it
+					this.positionDraggableWindow("sign");
+				}
 				this.fullscreen = false;
 			}
 		} else {
@@ -1535,7 +1551,7 @@
 					'height': newHeight
 				});
 			} else {
-				// No constraints. Let CSS handle the positioning.
+					// No constraints. Let CSS handle the positioning.
 				this.$media.removeAttr('width height');
 				this.$ableWrapper.removeAttr( 'style' );
 			}
@@ -1564,7 +1580,6 @@
 				'font-size': captionSize
 			});
 		}
-
 		this.refreshControls();
 	};
 
