mose wheel scrolling #248

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>

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;

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>