add time slider

src/components/AnnotationControls/AnnotationControls.css

@@ -1,3 +1,14 @@
+.input-group{
+    display: flex;
+    flex-direction: row;
+    padding: 0 4px;
+} 
+
+.video-slider{
+    width: 100%;
+    margin: 12px 20px;
+}
+
 .buttons-group {
     display: flex;
     justify-content: center;

src/components/AnnotationControls/AnnotationControls.js

@@ -1,41 +1,75 @@
-import React from 'react';
+import { Slider } from '@mui/material';
 import './AnnotationControls.css';
 
-function AnnotationControls({ onFrameBackward, onPlayPause, isPlaying, onFrameForward, onSaveAnnotation, onDelete }) {
+function AnnotationControls({ videoRef, currentTime, setCurrentTime, onFrameBackward, onPlayPause, isPlaying, onFrameForward, onSaveAnnotation, onDelete }) {
+
+    function formatDuration(value) {
+        if (Number.isNaN(value)) {
+            return '0:00'
+        }
+        const minute = Math.floor(value / 60);
+        const secondLeft = Math.floor(value - minute * 60);
+        return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`;
+    }
+
+    const handleSliderChange = (e) => {
+        setCurrentTime(e.target.value);
+    }
+
     return (
-        <div className='buttons-group' >
-            <button 
-                className='control-btn arrow-btn'
-                onClick={onFrameBackward}
-                title="Previous Frame"
-            >
-                ⏮️
-            </button>
-            <button
-                className={isPlaying ? 'control-btn pause-btn': 'control-btn play-btn'}
-                onClick={onPlayPause}
-            >
-                {isPlaying ? '⏸️ Pause' : '▶️ Play'}
-            </button>
-            <button
-                className='control-btn arrow-btn'
-                onClick={onFrameForward}
-                title="Next Frame"
-            >
-                ⏭️
-            </button>
-            <button
-                className='control-btn save-btn'
-                onClick={onSaveAnnotation}
-            >
-                💾 Save
-            </button>
-            <button
-                className='control-btn delete-btn'
-                onClick={onDelete}
-            >
-                🗑️ Delete
-            </button>
+        <div className='controls'>
+            <div className='input-group'>
+                <p>{formatDuration(currentTime)}</p>
+                <Slider
+                    aria-label='time-indicator'
+                    value={currentTime}
+                    onChange={handleSliderChange}
+                    min={0}
+                    max={videoRef.current === null ? 1 : videoRef.current.duration}
+                    step={0.1}
+                    className='video-slider'
+                />
+                {videoRef.current !== null
+                    ? <p>{formatDuration(videoRef.current.duration - currentTime)}</p>
+                    : <p>{formatDuration(0)}</p>
+                }
+            </div>
+
+            <div className='buttons-group' >
+
+                <button
+                    className='control-btn arrow-btn'
+                    onClick={onFrameBackward}
+                    title="Previous Frame"
+                >
+                    ⏮️
+                </button>
+                <button
+                    className={isPlaying ? 'control-btn pause-btn' : 'control-btn play-btn'}
+                    onClick={onPlayPause}
+                >
+                    {isPlaying ? '⏸️ Pause' : '▶️ Play'}
+                </button>
+                <button
+                    className='control-btn arrow-btn'
+                    onClick={onFrameForward}
+                    title="Next Frame"
+                >
+                    ⏭️
+                </button>
+                <button
+                    className='control-btn save-btn'
+                    onClick={onSaveAnnotation}
+                >
+                    💾 Save
+                </button>
+                <button
+                    className='control-btn delete-btn'
+                    onClick={onDelete}
+                >
+                    🗑️ Delete
+                </button>
+            </div>
         </div>
     );
 }