Add waveform marker for current video position

thrimbletrimmer/edit.html

@@ -42,7 +42,10 @@
 
 		<video id="video" class="video-js" controls preload="auto"></video>
 		<div id="clip-bar"></div>
+		<div id="waveform-container">
 			<img id="waveform" alt="Waveform for the video" />
+			<div id="waveform-marker"></div>
+		</div>
 
 		<div id="editor-help">
 			<a href="#" id="editor-help-link">Help</a>

thrimbletrimmer/scripts/edit.js

@@ -370,6 +370,13 @@ async function initializeVideoInfo() {
 			rangeDataUpdated();
 		}
 	});
+	player.on("timeupdate", () => {
+		const player = getVideoJS();
+		const currentTime = player.currentTime();
+		const duration = player.duration();
+		const timePercent = (currentTime / duration) * 100;
+		document.getElementById("waveform-marker").style.left = `${timePercent}%`;
+	});
 }
 
 function updateWaveform() {

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -90,6 +90,10 @@ a,
 	height: 100%;
 }
 
+#waveform-container {
+	position: relative;
+}
+
 #waveform {
 	width: 100%;
 
@@ -100,6 +104,14 @@ a,
 	max-height: 100px;
 }
 
+#waveform-marker {
+	width: 1px;
+	height: 100%;
+	background: #dd8800a0;
+	position: absolute;
+	top: 0;
+}
+
 #editor-help {
 	z-index: 1;
 }