beautify progressbar

packages/ui/src/components/atoms/TimeDisplay.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function TimeDisplay(props: { time: number; }) {
+	const { time } = props;
+
+	function pad(num: number) {
+		const test = '00' + num;
+		return (test).substring(test.length - 2);
+	}
+
+	const hours = Math.floor(time / 3600);
+	const minutes = Math.floor(time % 3600 / 60);
+	const seconds = Math.floor(time % 3600 % 60);
+
+	return (
+		<div>
+			{`${pad(hours)}:${pad(minutes)}:${pad(seconds)}`}
+		</div>
+	);
+}

packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css

@@ -42,15 +42,28 @@
 
 .toolbar {
 	display: flex;
+	justify-content: space-between;
+	background-color: darkgrey;
 }
 
 .progress,
 .progressFilled {
 	height: 25px;
-	background-color: darkgray;
+	background-color: #4a4a4b;
+}
+
+.progress {
+	flex-grow: 1;
 }
 
 .progressFilled {
 	background-color: white;
 	width: 0;
 }
+
+
+.progressContainer {
+	display: flex;
+	flex-direction: row;
+	gap: 15px;
+}

packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css.d.ts

@@ -8,5 +8,6 @@ declare const styles: {
 	readonly progress: string;
 	readonly progressFilled: string;
 	readonly visible: string;
+	readonly progressContainer: string;
 };
 export default styles;

packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.tsx

@@ -9,6 +9,7 @@ import { useService } from '../../../context';
 import { useHotkey } from '../../../hooks';
 import { FileInfoDisplay } from '../../atoms/FileInfoDisplay';
 import styles from './VideoPlayer.module.css';
+import { TimeDisplay } from '../../atoms/TimeDisplay';
 
 function createShakaIpfsPlugin(ipfs: IIpfsService): shaka.extern.SchemePlugin {
 	return async (uri: string, request: shaka.extern.Request, requestType: shaka.net.NetworkingEngine.RequestType, progressUpdated: shaka.extern.ProgressUpdated, headersReceived: shaka.extern.HeadersReceived, config: shaka.extern.SchemePluginConfig) => {
@@ -43,6 +44,8 @@ export function VideoPlayer(props: { file: IVideoFile; autoPlay?: boolean; }) {
 	const fullScreen = useSignal<boolean>(false);
 	const volume = useSignal<number>(1);
 	const overlayVisible = useSignal<boolean>(false);
+	const movieDuration = useSignal<number>(0);
+	const currentPlayTime = useSignal<number>(0);
 
 	useSignalEffect(() => {
 		if (containerRef.value != null) {
@@ -70,6 +73,11 @@ export function VideoPlayer(props: { file: IVideoFile; autoPlay?: boolean; }) {
 		if (videoRef.value != null && progressRef.value != null) {
 			//Event handlers
 			videoRef.value.addEventListener('timeupdate', handleProgress);
+			videoRef.value.addEventListener('loadedmetadata', () => {
+				if (videoRef.value) {
+					movieDuration.value = videoRef.value.duration;
+				}
+			});
 			progressRef.value.addEventListener('click', scrub);
 			let mousedown = false;
 			progressRef.value.addEventListener('mousedown', () => (mousedown = true));
@@ -151,19 +159,33 @@ export function VideoPlayer(props: { file: IVideoFile; autoPlay?: boolean; }) {
 	function handleProgress() {
 		if (videoRef.value && progressBarRef.value) {
 			const progressPercentage = (videoRef.value.currentTime / videoRef.value.duration) * 100;
+			currentPlayTime.value = videoRef.value.currentTime;
+
 			progressBarRef.value.style.width = `${progressPercentage}%`;
 		}
 	}
 
 	useHotkey({ key: 'F' }, () => toggleFullScreen());
 	useHotkey({ key: 'Space' }, () => togglePlay());
 
-	const progress = useComputed(() => (
+	const progressBar = useComputed(() => (
 		<div className={styles.progress} ref={(ref) => progressRef.value = ref}>
 			<div className={styles.progressFilled} ref={(ref) => progressBarRef.value = ref} />
 		</div>
 	));
 
+	const progress = useComputed(() => (
+		<div className={styles.progressContainer}>
+			<TimeDisplay
+				time={currentPlayTime.value}
+			/>
+			{progressBar}
+			<TimeDisplay
+				time={movieDuration.value}
+			/>
+		</div>
+	));
+
 	return (
 		<div className={styles.outerContainer}>
 			<div className={styles.innerContainer} ref={(ref) => containerRef.value = ref}>
@@ -177,14 +199,15 @@ export function VideoPlayer(props: { file: IVideoFile; autoPlay?: boolean; }) {
 							<IconButton onClick={() => togglePlay()}>
 								{computed(() => playing.value ? <Pause /> : <PlayArrow />)}
 							</IconButton>
-							<div className={styles.spacer} />
 							<div>
 								Language
 								<select>
 									{computed(() => languages.value.map(l => (
 										<option>{l}</option>
 									)))}
 								</select>
+							</div>
+							<div>
 								Subtitle
 								<select onChange={(ev) => {
 									if (ev.currentTarget.value !== 'null') {