ADD custom play controls

package-lock.json

@@ -27,6 +27,7 @@
         "construct-style-sheets-polyfill": "3.1.0",
         "date-fns": "2.29.3",
         "lit": "3.3.0",
+        "lucide-react": "^0.511.0",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-player": "^2.16.0",
@@ -7764,6 +7765,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
+      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

package.json

@@ -57,6 +57,7 @@
     "construct-style-sheets-polyfill": "3.1.0",
     "date-fns": "2.29.3",
     "lit": "3.3.0",
+    "lucide-react": "^0.511.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-player": "^2.16.0",
@@ -124,7 +125,7 @@
       "workbox-core": "7.3.0",
       "workbox-precaching": "7.3.0"
     },
-    "hash": "6691688a44297a5558ef37db2e66ab96a2b26de25ce9dd16419318e19f092916"
+    "hash": "1d057234cd785dc523e68f6ac1cfce6362e77ff83cc8e5f2a36003d75fe127ea"
   },
   "type": "module",
   "overrides": {
@@ -156,6 +157,7 @@
     "react-router-dom": "$react-router-dom",
     "react-player": "$react-player",
     "react-range-slider-input": "$react-range-slider-input",
-    "react-slider": "$react-slider"
+    "react-slider": "$react-slider",
+    "lucide-react": "$lucide-react"
   }
 }

src/main/frontend/components/Playbar.tsx

@@ -0,0 +1,82 @@
+import {ChangeEventHandler, useEffect, useState} from "react";
+import { Volume, Play, Pause } from 'lucide-react';
+
+type Props = {
+    video: HTMLVideoElement | null;
+};
+
+function formatTime(seconds: number): string {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+
+    const padded = (n: number) => n.toString().padStart(2, '0');
+
+    if (h > 0) {
+        return `${h}:${padded(m)}:${padded(s)}`;
+    } else {
+        return `${m}:${padded(s)}`;
+    }
+}
+
+export default function Playbar({ video }: Props) {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [volume, setVolume] = useState(100);
+
+    const togglePlay = () => {
+        if (!video) return;
+
+        if (video.paused) {
+            video.play();
+            setIsPlaying(true);
+        } else {
+            video.pause();
+            setIsPlaying(false);
+        }
+    };
+
+    const updateVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!video) return;
+
+        video.volume = parseInt(e.target.value) / 100;
+        setVolume(parseInt(e.target.value));
+    }
+
+    // Sync state with video element changes (e.g., if someone presses spacebar or clicks on the video)
+    useEffect(() => {
+        if (!video) return;
+
+        const handlePlay = () => setIsPlaying(true);
+        const handlePause = () => setIsPlaying(false);
+
+        video.addEventListener("play", handlePlay);
+        video.addEventListener("pause", handlePause);
+
+        return () => {
+            video.removeEventListener("play", handlePlay);
+            video.removeEventListener("pause", handlePause);
+        };
+    }, [video]);
+
+    return (
+        <div className={"flex justify-between items-center bg-gray-300 p-2 rounded-lg"}>
+            <div className={"flex"}>
+                <Volume size={24} />
+                <input
+                    type='range'
+                    min={0}
+                    max={100}
+                    onChange={updateVolume}
+                    value={volume}
+                    className={"w-20"}
+                />
+            </div>
+            <button onClick={togglePlay}>
+                {isPlaying ? <Pause size={24} /> : <Play size={24} />}
+            </button>
+            <label>
+                {formatTime(video?.currentTime ?? 0)} / {formatTime(video?.duration ?? 0)}
+            </label>
+        </div>
+    );
+}

src/main/frontend/views/video/{id}.tsx

@@ -90,6 +90,7 @@ export default function VideoId() {
 
             {metadata &&
                 <div>
+                    <Playbar video={videoRef.current}/>
                     <input
                         className={"w-full"}
                         type="range"