add stop button

package-lock.json

@@ -18,6 +18,7 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-dropzone": "^14.3.8",
+        "react-icons": "^5.5.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -14371,6 +14372,14 @@
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==",
       "license": "MIT"
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.8",
+    "react-icons": "^5.5.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/components/AnnotationControls/AnnotationControls.css

@@ -1,10 +1,10 @@
-.input-group{
+.input-group {
     display: flex;
     flex-direction: row;
     padding: 0 4px;
 }
 
-.video-slider{
+.video-slider {
     width: 100%;
     margin: 12px 20px;
 }
@@ -21,6 +21,9 @@
 }
 
 .control-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     padding: 10px 20px;
     font-size: 16px;
     margin: 0 5px;
@@ -29,22 +32,26 @@
     cursor: pointer;
 }
 
-.play-btn{
+.play-btn {
     background: #8aff8a;
 }
 
-.pause-btn{
+.pause-btn {
     background: #ff8a8a;
 }
 
-.arrow-btn{
+.arrow-btn {
     background: #e0e0e0;
 }
 
-.save-btn{
+.stop-btn {
+    background: #e8a1a5;
+}
+
+.save-btn {
     background: #8ad4ff;
 }
 
-.delete-btn{
+.delete-btn {
     background: #ffb38a;
 }

src/components/AnnotationControls/AnnotationControls.js

@@ -1,7 +1,18 @@
 import { Slider } from '@mui/material';
+import { FaStop } from "react-icons/fa";
 import './AnnotationControls.css';
 
-function AnnotationControls({ videoRef, currentTime, setCurrentTime, onFrameBackward, onPlayPause, isPlaying, onFrameForward, onSaveAnnotation, onDelete }) {
+function AnnotationControls({
+    videoRef,
+    currentTime,
+    setCurrentTime,
+    onFrameBackward,
+    onPlayPause, isPlaying,
+    onFrameForward,
+    onSaveAnnotation,
+    onStop,
+    onDelete
+}) {
 
     function formatDuration(value) {
         if (Number.isNaN(value)) {
@@ -57,6 +68,13 @@ function AnnotationControls({ videoRef, currentTime, setCurrentTime, onFrameBack
                 >
                     ⏭️
                 </button>
+                <button
+                    className='control-btn stop-btn'
+                    onClick={onStop}
+                    title='Stop'
+                >
+                    <FaStop /> Stop
+                </button>
                 <button
                     className='control-btn save-btn'
                     onClick={onSaveAnnotation}

src/components/AnnotationMain/AnnotationMain.js

@@ -131,6 +131,11 @@ function AnnotationMain() {
 
     };
 
+    const handleStop = () => {
+        setIsPlaying(prev => !prev);
+        setCurrentTime(0);
+    };
+
     const handleFrameForward = () => {
         if (videoRef.current) {
             videoRef.current.currentTime += 1 / 30;
@@ -220,6 +225,7 @@ function AnnotationMain() {
                         isPlaying={isPlaying}
                         onFrameForward={handleFrameForward}
                         onSaveAnnotation={handleAnnotationSave}
+                        onStop={handleStop}
                         onDelete={handleDelete}
                     />
                 </div>