fixes to time conversion and play head ux + improvements to file scanner

client/assets/styling/player.scss

@@ -18,12 +18,21 @@
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(3, 1fr);
+	aspect-ratio: 4/3;
+	width: auto;
+	height: 100%;
 	overflow: hidden;
 
 	video {
 		width: 100%;
 		height: auto;
 		image-rendering: smooth;
+		aspect-ratio: 4/3;
+	}
+
+	.emptyVideo {
+		width: 100%;
+		aspect-ratio: 16/9;
 	}
 }
 
@@ -40,23 +49,73 @@
 		gap: 1px;
 	}
 
-	#playhead {
+	#playControls {
 		display: grid;
 		width: 100%;
-		position: relative;
 		grid-template-columns: $labelWidth 1fr;
 		grid-template-areas: "Label Input";
-		input {
+		background-color: $featureBackroundDark;
+		border-bottom: 1px solid $mainAccent;
+
+		.inputs {
 			grid-area: Input;
-			width: 100%;
+			position: relative;
+
+			input {
+				width: 100%;
+				height: 100%;
+				padding: 0;
+				margin: 0;
+				border: 0;
+				appearance: none;
+				background: transparent;
+				outline: none;
+				/* opacity: 0; */
+
+				&::-webkit-slider-thumb {
+					background-color: transparent;
+					appearance: none;
+					display: block;
+					width: 1px;
+					height: 10px;
+				}
+				&::-webkit-slider-runnable-track {
+					border: 0;
+					padding: 0;
+					margin: 0;
+				}
+			}
 		}
 
-		.indicator {
+		.playHead {
 			width: 1px;
 			background-color: $secondaryAccentLight;
-			height: 100%;
+			top: 0;
+			height: 300px;
 			position: absolute;
 			pointer-events: none;
+			z-index: 2;
+			&::before {
+				display: block;
+				content: "";
+				border: 11px solid transparent;
+				border-top: 20px solid $secondaryAccentLight;
+				transform: translateX(-11px);
+			}
+		}
+
+		.timelineMarkers {
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			pointer-events: none;
+			.marker {
+				position: absolute;
+				border-left: 1px dashed #fff;
+				height: 100%;
+			}
 		}
 	}