Add fullscreen functionality to Thrimbletrimmer video player

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

@@ -240,6 +240,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;