From 3b72b20ca4dbf2a1a4495cbba35353a81d80dee5 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sun, 16 Feb 2020 20:53:29 +0800
Subject: [PATCH] mose wheel scrolling #248

---
 src/TimelineSeg.jsx | 4 ++--
 src/main.css        | 6 ------
 src/renderer.jsx    | 8 ++++++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/TimelineSeg.jsx b/src/TimelineSeg.jsx
index 7ca78371..93fc34e0 100644
--- a/src/TimelineSeg.jsx
+++ b/src/TimelineSeg.jsx
@@ -5,7 +5,7 @@ const { formatDuration } = require('./util');
 
 
 const TimelineSeg = ({
-  isCutRangeValid, duration, apparentCutStart, apparentCutEnd, isActive, segNum,
+  duration, apparentCutStart, apparentCutEnd, isActive, segNum,
   onSegClick, color,
 }) => {
   const markerWidth = 4;
@@ -57,7 +57,7 @@ const TimelineSeg = ({
 
       <div
         style={{ flexGrow: 1, textAlign: 'left', fontSize: 10 }}
-        title={apparentCutEnd > apparentCutStart && formatDuration({ seconds: apparentCutEnd - apparentCutStart })}
+        title={apparentCutEnd > apparentCutStart ? formatDuration({ seconds: apparentCutEnd - apparentCutStart }) : undefined}
       >
         {segNum + 1}
       </div>
diff --git a/src/main.css b/src/main.css
index ae1ca39c..15a340cb 100644
--- a/src/main.css
+++ b/src/main.css
@@ -61,12 +61,6 @@ input, button, textarea, :focus {
   text-align: center;
 }
 
-.timeline-wrapper {
-  width: 100%;
-  position: relative;
-  background-color: #444;
-}
-
 .help-sheet {
   background: #525252;
   color: white;
diff --git a/src/renderer.jsx b/src/renderer.jsx
index bcf7fad5..453c6eb9 100644
--- a/src/renderer.jsx
+++ b/src/renderer.jsx
@@ -414,7 +414,11 @@ const App = memo(() => {
     const target = timelineWrapperRef.current;
     const rect = target.getBoundingClientRect();
     const relX = e.srcEvent.pageX - (rect.left + document.body.scrollLeft);
-    seekAbs((relX / target.offsetWidth) * (duration || 0));
+    if (duration) seekAbs((relX / target.offsetWidth) * duration);
+  }
+
+  function onWheel(e) {
+    seekRel(e.deltaX / 10);
   }
 
   const playCommand = useCallback(() => {
@@ -1079,7 +1083,7 @@ const App = memo(() => {
           options={{ recognizers: {} }}
         >
           <div>
-            <div className="timeline-wrapper" ref={timelineWrapperRef}>
+            <div style={{ width: '100%', position: 'relative', backgroundColor: '#444' }} ref={timelineWrapperRef} onWheel={onWheel}>
               {currentTimePos !== undefined && <div style={{ position: 'absolute', bottom: 0, top: 0, left: currentTimePos, zIndex: 3, backgroundColor: 'rgba(255, 255, 255, 1)', width: 1, pointerEvents: 'none' }} />}
 
               <AnimatePresence>