[previews] Clean annotation finding

The current time used can be problematic because it doesn't exactly
matched a given frame due to float precision.

This commit makes current time computation closer to their related frame
and make annotation loading loosier about the time of the annotation to
grab.

src/components/mixins/annotation.js

@@ -60,6 +60,10 @@ export const annotationMixin = {
   },
 
   methods: {
+    findAnnotation(list, time) {
+      return list.find(a => a.time < time + 0.0001 && a.time > time - 0.0001)
+    },
+
     // Objects
 
     /*
@@ -259,7 +263,7 @@ export const annotationMixin = {
     addToAdditions(obj) {
       this.markLastAnnotationTime()
       const currentTime = this.getCurrentTime()
-      const additions = this.additions.find(a => a.time === currentTime)
+      const additions = this.findAnnotation(this.additions, currentTime)
       if (additions) {
         additions.drawing.objects.push(obj.serialize())
       } else {
@@ -283,7 +287,7 @@ export const annotationMixin = {
      */
     removeFromAdditions(obj) {
       const currentTime = this.getCurrentTime()
-      const additions = this.additions.find(a => a.time === currentTime)
+      const additions = this.findAnnotation(this.additions, currentTime)
       if (additions) {
         additions.drawing.objects = additions.drawing.objects.filter(
           o => o.id !== obj.id
@@ -297,7 +301,7 @@ export const annotationMixin = {
     addToDeletions(obj) {
       this.markLastAnnotationTime()
       const currentTime = this.getCurrentTime()
-      const deletion = this.deletions.find(d => d.time === currentTime)
+      const deletion = this.findAnnotation(this.deletions, currentTime)
       if (deletion) {
         deletion.objects.push(obj.id)
       } else {
@@ -309,7 +313,6 @@ export const annotationMixin = {
       if (!obj.serialize) {
         this.addSerialization(obj)
       }
-
       this.postAnnotationDeletion(currentTime, obj.serialize())
     },
 
@@ -325,7 +328,7 @@ export const annotationMixin = {
      */
     removeFromDeletions(obj) {
       const currentTime = this.getCurrentTime()
-      const deletions = this.deletions.find(a => a.time === currentTime)
+      const deletions = this.findAnnotation(this.deletions, currentTime)
       if (deletions) {
         deletions.objects = deletions.objects.filter(oId => oId !== obj.id)
       }
@@ -345,7 +348,7 @@ export const annotationMixin = {
     addToUpdatesSerializedObject(obj) {
       this.markLastAnnotationTime()
       const currentTime = this.getCurrentTime()
-      const updates = this.updates.find(a => a.time === currentTime)
+      const updates = this.findAnnotation(this.updates, currentTime)
       if (updates) {
         updates.drawing.objects = updates.drawing.objects.filter(
           o => o.id !== obj.id

src/components/mixins/player.js

@@ -872,7 +872,8 @@ export const playerMixin = {
     },
 
     getCurrentTime() {
-      return roundToFrame(this.currentTimeRaw, this.fps) || 0
+      const time = roundToFrame(this.currentTimeRaw, this.fps) || 0
+      return Number(time.toPrecision(4))
     },
 
     setCurrentTimeRaw(time) {

src/components/previews/PreviewPlayer.vue

@@ -986,6 +986,7 @@ export default {
     },
 
     setVideoFrameContext(frame) {
+      frame = Math.min(frame, this.nbFrames - 1)
       if (this.currentFrame !== frame) {
         const time = frame * this.frameDuration
         this.currentFrame = frame
@@ -1066,7 +1067,8 @@ export default {
 
     getCurrentTime() {
       if (!this.isMovie) return 0
-      return this.currentTimeRaw
+      const time = roundToFrame(this.currentTimeRaw, this.fps)
+      return Number(time.toPrecision(4))
     },
 
     play() {
@@ -1457,7 +1459,10 @@ export default {
       if (this.isMovie) {
         time = roundToFrame(time, this.fps)
         return this.annotations.find(annotation => {
-          return roundToFrame(annotation.time, this.fps) === time
+          return (
+            roundToFrame(annotation.time, this.fps) < time + 0.0001 &&
+            roundToFrame(annotation.time, this.fps) > time - 0.0001
+          )
         })
       } else if (this.isPicture) {
         return this.annotations.find(annotation => annotation.time === 0)
@@ -1477,6 +1482,7 @@ export default {
       if (this.isMovie) {
         currentTime = this.currentFrame * this.frameDuration
         currentTime = roundToFrame(currentTime, this.fps)
+        currentTime = Number(currentTime.toPrecision(4))
       }
       const annotation = this.getAnnotation(currentTime)
       const annotations = this.getNewAnnotations(currentTime, annotation)

src/components/previews/VideoViewer.vue

@@ -399,7 +399,10 @@ export default {
       } else {
         currentTimeRaw = 0
       }
-      return Math.ceil(currentTimeRaw / this.frameDuration) + 1
+      let frame = Math.ceil(currentTimeRaw / this.frameDuration) + 1
+      frame = Number(frame.toPrecision(4))
+      frame = Math.min(frame, this.nbFrames)
+      return frame
     },
 
     play() {