From 3f502a8944f44be63583b4c22204f7b6cbbb32bf Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sun, 6 Oct 2024 15:43:40 +0200
Subject: [PATCH] make timeline time transparent

when hovering it with mouse
closes #2177
also possibly #2116
---
 src/renderer/src/Timeline.module.css | 11 +++++++++++
 src/renderer/src/Timeline.tsx        |  7 ++++---
 2 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/src/Timeline.module.css

diff --git a/src/renderer/src/Timeline.module.css b/src/renderer/src/Timeline.module.css
new file mode 100644
index 00000000..3dde6026
--- /dev/null
+++ b/src/renderer/src/Timeline.module.css
@@ -0,0 +1,11 @@
+.time {
+  background: rgba(0,0,0,0.4);
+  border-radius: 3;
+  padding: 2px 4px;
+  color: rgba(255, 255, 255, 0.8);
+  transition: opacity 0.2s;
+  pointer-events: auto;
+}
+.time:hover {
+  opacity: 0.1;
+}
\ No newline at end of file
diff --git a/src/renderer/src/Timeline.tsx b/src/renderer/src/Timeline.tsx
index dcaf1fe5..0bf76c33 100644
--- a/src/renderer/src/Timeline.tsx
+++ b/src/renderer/src/Timeline.tsx
@@ -10,6 +10,8 @@ import BetweenSegments from './BetweenSegments';
 import useContextMenu from './hooks/useContextMenu';
 import useUserSettings from './hooks/useUserSettings';
 
+import styles from './Timeline.module.css';
+
 
 import { timelineBackground, darkModeTransition } from './colors';
 import { Frame } from './ffmpeg';
@@ -71,7 +73,6 @@ const CommandedTime = memo(({ commandedTimePercent }: { commandedTimePercent: st
 const timelineHeight = 36;
 
 const timeWrapperStyle: CSSProperties = { position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' };
-const timeStyle: CSSProperties = { background: 'rgba(0,0,0,0.4)', borderRadius: 3, padding: '2px 4px', color: 'rgba(255, 255, 255, 0.8)' };
 
 function Timeline({
   durationSafe,
@@ -401,8 +402,8 @@ function Timeline({
         </div>
       </div>
 
-      <div style={timeWrapperStyle}>
-        <div style={timeStyle}>
+      <div style={timeWrapperStyle} onWheel={onWheel}>
+        <div className={styles['time']}>
           {formatTimeAndFrames(displayTime)}{isZoomed ? ` ${displayTimePercent}` : ''}
         </div>
       </div>