Add fullscreen functionality to Thrimbletrimmer video player (#250)

* Add fullscreen functionality to Thrimbletrimmer video player

* Fix issue where clicking on fullscreen video pauses and unpauses instead of doing just one

thrimbletrimmer/edit.html

@@ -67,6 +67,13 @@
 				<div>
 					<select id="video-controls-quality"></select>
 				</div>
+				<div>
+					<img
+						id="video-controls-fullscreen"
+						src="images/video-controls/fullscreen.png"
+						class="click"
+					/>
+				</div>
 			</div>
 			<progress id="video-controls-playback-position" value="0" class="click"></progress>
 		</div>

thrimbletrimmer/index.html

@@ -85,6 +85,13 @@
 				<div>
 					<select id="video-controls-quality"></select>
 				</div>
+				<div>
+					<img
+						id="video-controls-fullscreen"
+						src="images/video-controls/fullscreen.png"
+						class="click"
+					/>
+				</div>
 			</div>
 			<progress id="video-controls-playback-position" value="0" class="click"></progress>
 		</div>

thrimbletrimmer/scripts/common.js

@@ -153,7 +153,11 @@ function setUpVideoControls() {
 		}
 	};
 	playPauseButton.addEventListener("click", togglePlayState);
-	videoElement.addEventListener("click", togglePlayState);
+	videoElement.addEventListener("click", (event) => {
+		if (!videoElement.controls) {
+			togglePlayState(event);
+		}
+	});
 
 	videoElement.addEventListener("play", (_event) => {
 		playPauseButton.src = "images/video-controls/pause.png";
@@ -240,6 +244,22 @@ function setUpVideoControls() {
 		globalPlayer.currentLevel = +quality.value;
 	});
 
+	const fullscreen = document.getElementById("video-controls-fullscreen");
+	fullscreen.addEventListener("click", (_event) => {
+		if (document.fullscreenElement) {
+			document.exitFullscreen();
+		} else {
+			videoElement.requestFullscreen();
+		}
+	});
+	videoElement.addEventListener("fullscreenchange", (_event) => {
+		if (document.fullscreenElement) {
+			videoElement.controls = true;
+		} else {
+			videoElement.controls = false;
+		}
+	});
+
 	const playbackPosition = document.getElementById("video-controls-playback-position");
 	playbackPosition.max = videoElement.duration;
 	playbackPosition.value = videoElement.currentTime;