From d8266be5dbd081a1e9b5dcbf0ab9273f8112f8c1 Mon Sep 17 00:00:00 2001
From: Pablo Gamito <pablogamito@google.com>
Date: Mon, 3 Aug 2020 15:22:19 +0100
Subject: [PATCH] Sync with video when trimming timeline

Test: visual
Change-Id: Ibfe2a5d6ce5bbfbb900b22344723b43c4d268d43
---
 tools/winscope/src/Overlay.vue           |  8 +++++++
 tools/winscope/src/TimelineSelection.vue | 28 ++++++++++++++++++++++--
 tools/winscope/src/VideoView.vue         | 28 ++++++++++++++----------
 3 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/tools/winscope/src/Overlay.vue b/tools/winscope/src/Overlay.vue
index 5b9f80551..09c8c8a91 100644
--- a/tools/winscope/src/Overlay.vue
+++ b/tools/winscope/src/Overlay.vue
@@ -204,6 +204,8 @@
                     :end-timestamp="0"
                     :scale="scale"
                     v-on:crop="onTimelineCrop"
+                    v-on:showVideoAt="changeVideoTimestamp"
+                    v-on:resetVideoTimestamp="resetVideoTimestamp"
                   />
                 </div>
 
@@ -556,6 +558,12 @@ export default {
     onTimelineCrop(cropDetails) {
       this.crop = cropDetails;
     },
+    changeVideoTimestamp(ts) {
+      this.$refs.video.selectFrameAtTime(ts);
+    },
+    resetVideoTimestamp() {
+      this.$refs.video.jumpToSelectedIndex();
+    }
   },
   components: {
     'timeline': Timeline,
diff --git a/tools/winscope/src/TimelineSelection.vue b/tools/winscope/src/TimelineSelection.vue
index 8595ed9d8..960af850f 100644
--- a/tools/winscope/src/TimelineSelection.vue
+++ b/tools/winscope/src/TimelineSelection.vue
@@ -100,12 +100,25 @@ export default {
       return this.translate(item);
     },
     translate(cx) {
-      var scale = [...this.scale];
+      const scale = [...this.scale];
       if (scale[0] >= scale[1]) {
         return cx;
       }
 
-      return (((cx - scale[0]) / (scale[1] - scale[0])) * 100 - (1 /*pointWidth*/)) + "%";
+      return (((cx - scale[0]) / (scale[1] - scale[0])) * (100 - (1 /*pointWidth*/))) + "%";
+    },
+    getPositionAsTimestamp(position) {
+      const scale = [...this.scale];
+      if (scale[0] >= scale[1]) {
+        return position;
+      }
+
+      const width = this.$refs.timelineSvg.clientWidth;
+      const pointWidth = 1/100 * width;
+      const positionAsPercent = position / (width - pointWidth);
+
+      return scale[0] +
+        positionAsPercent * (scale[1] - scale[0]);
     },
     emitCropDetails() {
       const width = this.$refs.timelineSvg.clientWidth;
@@ -144,6 +157,8 @@ export default {
             } else {
               this.selectionEndPosition = this.$refs.timelineSvg.clientWidth;
             }
+
+            this.$emit('showVideoAt', this.getPositionAsTimestamp(this.selectionEndPosition));
           } else {
             this.selectionEndPosition = this.selectionStartX;
 
@@ -153,6 +168,8 @@ export default {
             } else {
               this.selectionStartPosition = 0;
             }
+
+            this.$emit('showVideoAt', this.getPositionAsTimestamp(this.selectionStartPosition));
           }
         }
       }
@@ -160,6 +177,7 @@ export default {
       this.createSelectionMouseUpEventListener = e => {
         this.selecting = false;
         document.body.style.cursor = null;
+        this.$emit('resetVideoTimestamp');
       };
 
       this.$refs.timelineSvg
@@ -242,6 +260,7 @@ export default {
         this.resizeStartPos = this.selectionStartPosition;
 
         document.body.style.cursor = "ew-resize";
+        this.$emit('showVideoAt', this.getPositionAsTimestamp(this.selectionStartPosition));
       };
 
       this.rightResizeDraggerMouseDownEventListener = e => {
@@ -251,6 +270,7 @@ export default {
         this.resizeEndPos = this.selectionEndPosition;
 
         document.body.style.cursor = "ew-resize";
+        this.$emit('showVideoAt', this.getPositionAsTimestamp(this.selectionEndPosition));
       };
 
       this.resizeMouseMoveEventListener = e => {
@@ -265,6 +285,8 @@ export default {
           }
 
           this.selectionStartPosition = newStartPos;
+
+          this.$emit('showVideoAt', this.getPositionAsTimestamp(this.selectionStartPosition));
         }
 
         if (this.resizeingRight) {
@@ -278,6 +300,7 @@ export default {
           }
 
           this.selectionEndPosition = newEndPos;
+          this.$emit('showVideoAt', this.getPositionAsTimestamp(this.selectionEndPosition));
         }
       };
 
@@ -285,6 +308,7 @@ export default {
         this.resizeingLeft = false;
         this.resizeingRight = false;
         document.body.style.cursor = null;
+        this.$emit('resetVideoTimestamp');
       }
 
       document.body.style.cursor = null;
diff --git a/tools/winscope/src/VideoView.vue b/tools/winscope/src/VideoView.vue
index 16d08da0e..4180767e4 100644
--- a/tools/winscope/src/VideoView.vue
+++ b/tools/winscope/src/VideoView.vue
@@ -21,15 +21,15 @@
   />
 </template>
 <script>
-const EPSILON = 0.00001
+const EPSILON = 0.00001;
 
 function uint8ToString(array) {
-  var chunk = 0x8000;
-  var out = [];
-  for (var i = 0; i < array.length; i += chunk) {
+  const chunk = 0x8000;
+  const out = [];
+  for (let i = 0; i < array.length; i += chunk) {
     out.push(String.fromCharCode.apply(null, array.subarray(i, i + chunk)));
   }
-  return out.join("");
+  return out.join('');
 }
 
 export default {
@@ -48,31 +48,37 @@ export default {
       } else {
         return `height: ${this.height}`;
       }
-    }
+    },
   },
   methods: {
     arrowUp() {
-      return true
+      return true;
     },
     arrowDown() {
       return true;
     },
-    selectFrame(idx) {
-      var time = (this.file.timeline[idx] - this.file.timeline[0]) / 1000000000 + EPSILON;
+    selectFrameAtTime(timestamp) {
+      const time = (timestamp - this.file.timeline[0]) / 1000000000 + EPSILON;
       this.$refs.video.currentTime = time;
     },
+    selectFrame(idx) {
+      this.selectFrameAtTime(this.file.timeline[idx]);
+    },
+    jumpToSelectedIndex() {
+      this.selectFrame(this.file.selectedIndex);
+    },
   },
   watch: {
     selectedIndex() {
       this.selectFrame(this.file.selectedIndex);
-    }
+    },
   },
   mounted() {
     this.$el.addEventListener('canplay', (e) => {
       this.$emit('loaded');
     });
   },
-}
+};
 
 </script>
 <style>