video playback and timeline playhead

client/assets/styling/player.scss

@@ -7,18 +7,30 @@
 	background-color: $darkBackground;
 	display: grid;
 	grid-template-areas: "Head ControlPanel" "ViewPort ControlPanel" "Timeline Timeline";
-	grid-template-rows: auto 1fr 500px;
+	grid-template-rows: 50px calc(100dvh - 350px - 20px) 300px;
 	grid-template-columns: 1fr auto;
+	max-height: calc(100dvh - 20px);
 }
 
 #viewport {
 	grid-area: ViewPort;
 	border: 1px solid $lightBackground;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+	overflow: hidden;
+
+	video {
+		width: 100%;
+		height: auto;
+		image-rendering: smooth;
+	}
 }
 
 #timeline {
 	grid-area: Timeline;
 	border: 1px solid $lightBackground;
+	$labelWidth: 100px;
 
 	#tracklist {
 		display: flex;
@@ -27,14 +39,34 @@
 		width: 100%;
 		gap: 1px;
 	}
-	.track {
-		display: block;
+
+	#playhead {
+		display: grid;
+		width: 100%;
 		position: relative;
-		padding: 2px 0;
-		height: 30px;
+		grid-template-columns: $labelWidth 1fr;
+		grid-template-areas: "Label Input";
+		input {
+			grid-area: Input;
+			width: 100%;
+		}
+
+		.indicator {
+			width: 1px;
+			background-color: $secondaryAccentLight;
+			height: 100%;
+			position: absolute;
+			pointer-events: none;
+		}
+	}
+
+	.track {
+		display: grid;
+		min-height: 30px;
 		background-color: $lightBackground;
+		grid-template-columns: $labelWidth 1fr;
 		/* overflow: hidden; */
-		margin-left: 100px;
+		/* margin-left: 100px; */
 
 		.label {
 			width: 100px;
@@ -42,11 +74,15 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			position: absolute;
-			left: -100px;
+			left: 0;
 			top: 0px;
 			background-color: $featureBackround;
 		}
+		.clips {
+			display: block;
+			position: relative;
+			padding: 0px 2px;
+		}
 	}
 
 	.clip {