Added tracker when video starts

src/components/AnnotationView.js

@@ -51,24 +51,27 @@ const AnnotationView = ({camPosition, objScale}) => {
     const annotationStore = useAnnotationStore();
     const objectStore = useObjectStore();
 
-    const findAnnotation = t => {
+    const findAnnotation = (t) => {
       //if (!editMode) return
+      const secondsLapsed = t * duration;
       let currentAnnotations = annotationStore.outputAnnotation.annotations
-      //if (!currentAnnotations) return
-      let annotation = currentAnnotations.find(x => x.time === t)
-      //console.log(currentAnnotations)
+      if (currentAnnotations.length <= 0) return
+      const annotation = currentAnnotations.reduce((prev, curr) => {
+        let closest = (Math.abs(curr.time - secondsLapsed) < Math.abs(prev.time - secondsLapsed) ? curr : prev)
+        return closest
+      });
+
       if (annotation !== undefined) {
         objectStore.handleRotation(annotation.rotation)
         objectStore.handleTranslation(annotation.position)
+        objectStore.setObjScale(annotation.scale)
       }
       return
     }
 
-    const handleSeekMouseUp = e => {
-
+    const handleSeekMouseUp = e => {   
       handleSeekingtoFalse()
-      player.current.seekTo(parseFloat(e.target.value))
-      findAnnotation(parseFloat(e.target.value))
+      player.current.seekTo(getFixedNumber(e.target.value, 5))
     }
 
     const handleRewind = () => {
@@ -84,7 +87,15 @@ const AnnotationView = ({camPosition, objScale}) => {
     }
 
     const onProgress = state => {
-      if (!seeking) handleProgress(state.played)
+      const { played } = state
+      if (!seeking) handleProgress(getFixedNumber(played, 5))
+      findAnnotation(played)
+    }
+
+    const onSliderChange = (e) => {
+      let t = getFixedNumber(e.target.value, 5)
+      handleSeekChange(t)
+      findAnnotation(t)
     }
 
     return (
@@ -123,9 +134,9 @@ const AnnotationView = ({camPosition, objScale}) => {
           <div className="mt-2">
               <Slider
                 played={ played }
-                onMouseDown={(e) => handleSeekMouseDown(e)}
-                onChange={(e) => handleSeekChange(e)}
-                onMouseUp={(e) => handleSeekMouseUp(e)}
+                onMouseDown={handleSeekMouseDown}
+                onChange={onSliderChange}
+                onMouseUp={handleSeekMouseUp}
               />
               <div className='d-flex mt-2 justify-content-between'>
                 <div className='d-flex align-items-center'>

src/components/EnvironmentContainer.js

@@ -6,6 +6,7 @@ import { useAnnotationStore } from '../stores/AnnotationStore';
 import { useVideoStore } from '../stores/VideoStore';
 import { ObjectControls } from '../ObjectControls';
 import { DragControls } from 'three-stdlib';
+import * as THREE from "three";
 extend({ DragControls, ObjectControls })
 
 softShadows()
@@ -27,6 +28,16 @@ const Banana = ({camPosition, ...props}) => {
     const position = Object.values(objPosition)
     const rotation = Object.values(objRotation)
 
+    const editmode = false
+
+    const [vec] = useState(() => new THREE.Vector3())
+
+    useFrame(() => {
+      if (!editmode) {
+        object.current.position.lerp(vec.set(objPosition.x, objPosition.y, objPosition.z), 0.1)
+      } 
+    })
+
     const handleKeys = useCallback((e) => {
       if (!e.shiftKey || !e.ctrlKey) {
         handleRotation(object.current.rotation)
@@ -52,8 +63,6 @@ const Banana = ({camPosition, ...props}) => {
 
     const annotateFrame = () => {
       state.clock.start()
-      //console.log(state.clock.oldTime)
-      //rotateXYZ()
       let dataAnnotation = {
           id:(videoState.played * videoState.duration), 
           time: (videoState.played * videoState.duration),
@@ -63,19 +72,6 @@ const Banana = ({camPosition, ...props}) => {
       }
       addAnnotation(dataAnnotation)
     }
-
-    const rotateXYZ = () => {
-      object.current.rotation.set(0,0,0)
-      object.current.position.set(0,0,0)
-    }
-
-    /*useFrame(({ clock }) => {
-      clock.autoStart = false
-      if (clock.elapsedTime < 3) {
-        object.current.rotation.x += Math.PI/2
-        //object.current.position.set(0,0,0)
-      }
-    })*/
 
     return (
       <>
@@ -85,7 +81,7 @@ const Banana = ({camPosition, ...props}) => {
               geometry={nodes.Node.geometry}
               material={materials.material_0}
               scale={objScale}
-              position={position} 
+              position={null} 
               rotation={rotation}
               onPointerUp={(e) => handleTranslation(object.current.position) }
             /> 

src/components/OutputContainer.js

@@ -1,82 +1,84 @@
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
 import { Container, Row, Col, Button } from "react-bootstrap";
-import { useAnnotationStore } from '../stores/AnnotationStore';
+import { useAnnotationStore } from "../stores/AnnotationStore";
 
 const OutputContainer = () => {
-
-  const inputFile = useRef()
-
-  const annotationStore = useAnnotationStore()
+  const inputFile = useRef();
+  const annotationStore = useAnnotationStore();
   const outputJSON = JSON.stringify(annotationStore.outputAnnotation);
 
   const openFile = (e) => {
     const fileObj = e.target.files[0];
-    const reader = new FileReader();      
+    const reader = new FileReader();
     reader.onload = (e) => {
       const fileContents = e.target.result;
-      annotationStore.setAnnotationsFromFile(JSON.parse(fileContents))
-    }
+      annotationStore.setAnnotationsFromFile(JSON.parse(fileContents));
+    };
     if (fileObj) reader.readAsText(fileObj);
-    else return  
-  }
+    else return;
+  };
 
   const upload = (e) => {
-  	e.preventDefault();
-    inputFile.current.click()
-  }
-
-    return (
-      <Container fluid="md" className="mt-2">
-        <Row className="section-wrapper justify-content-center">
-          <Col md="10">
-            <div className="output">
-              <code>Output: </code>
-              <br/>
-              <code>{outputJSON}</code>       
-            </div>
-          </Col>
-          <Col md="2" className="align-items-center">
-            <Row className="text-center mt-2">
-              <Button size="sm" variant="light">Edit</Button>{" "}
-            </Row>
-            <hr/>
-            <Row className="text-center mt-2">
-              <h5>Annotations</h5>
-              <Col>
-                <Button 
-                  size="sm" 
-                  variant="success"
-                  href={`data:text/json;charset=utf-8,${encodeURIComponent( JSON.stringify(annotationStore.outputAnnotation, null, 4))}`}
-                  download="3Dannotation.json"
-                >
-                  Download
-                </Button>
-              </Col>
-              <Col>
-                <Button 
-                  size="sm" 
-                  variant="primary"
-                  className="px-3" 
-                  onClick={upload}
-                >
-                    Upload
-                </Button>
+    e.preventDefault();
+    inputFile.current.click();
+  };
 
-                <input 
-                  type="file" 
-                  name="file" 
-                  ref={inputFile}
-                  style={{display: "none"}}
-                  multiple={false}
-                  accept=".json,application/json"
-                  onChange={openFile} />    
+  return (
+    <Container fluid="md" className="mt-2">
+      <Row className="section-wrapper justify-content-center">
+        <Col md="10">
+          <div className="output">
+            <code>Output: </code>
+            <br />
+            <code>{outputJSON}</code>
+          </div>
+        </Col>
+        <Col md="2" className="align-items-center">
+          <Row className="text-center mt-2">
+            <Button size="sm" variant="light">
+              Edit
+            </Button>{" "}
+          </Row>
+          <hr />
+          <Row className="text-center mt-2">
+            <h5>Annotations</h5>
+            <Col>
+              <Button
+                size="sm"
+                variant="success"
+                href={`data:text/json;charset=utf-8,${encodeURIComponent(
+                  JSON.stringify(annotationStore.outputAnnotation, null, 4)
+                )}`}
+                download="3Dannotation.json"
+              >
+                Download
+              </Button>
+            </Col>
+            <Col>
+              <Button
+                size="sm"
+                variant="primary"
+                className="px-3"
+                onClick={upload}
+              >
+                Upload
+              </Button>
 
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-      </Container>
-    )
-}
+              <input
+                type="file"
+                name="file"
+                ref={inputFile}
+                style={{ display: "none" }}
+                multiple={false}
+                accept=".json,application/json"
+                onChange={openFile}
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
 
-export default OutputContainer
+export default OutputContainer;

src/components/TopSection.js

@@ -246,7 +246,7 @@ const TopSection = () => {
             <Col md={9}>
               <AnnotationView 
                 camPosition={camPosition} 
-                objScale={objScale} />
+              />
             </Col>
         </Row>
       </Container>

src/stores/AnnotationStore.js

@@ -4,9 +4,15 @@ const addRecord = (list, annotation) => {
   let ann_found = list.some((o) => o.id === annotation.id);   // Check if annotation already exists
   if (!ann_found) {
     list.push(annotation)
+    list.sort((a, b) => {
+      return a.time - b.time;
+    });
     return list;
   } else {
     const modifiedList = list.map((o) => (o.id === annotation.id ? annotation : o));
+    modifiedList.sort((a, b) => {
+      return a.time - b.time;
+    });
     return modifiedList;
   }
 };  // Add a new annotation to the queue, it replaces old annotation or add new

src/stores/VideoStore.js

@@ -27,7 +27,9 @@ const useVideoStore = create(set => ({
     handleProgress: (played) => set(state => ({ played: played })),
     handleSeekingtoFalse: () => set (state => ({ seeking: false })), 
     handleSeekMouseDown: (e) => set (state => ({ seeking: true })),
-    handleSeekChange : (e) => set (state => ({ played : parseFloat(e.target.value) })),
+    handleSeekChange : (played) => set (state => ({ 
+      played : played 
+    })),
     handleVideoSpeedChange : (speed) => set(state => ({ playbackRate: speed }))
 }))
 

src/utils/MathUtils.js

@@ -1,3 +1,4 @@
+
 const getFixedNumber = (number, digits) =>
   Math.round(number * 10 ** digits) / 10 ** digits;