From 38682e983c419246aa907c35b501c65a0b464d44 Mon Sep 17 00:00:00 2001
From: bananu7 <bananu7@o2.pl>
Date: Wed, 3 Apr 2024 00:13:22 +0200
Subject: [PATCH] Markers on vertical list are now clickable

---
 src/components/Player.css |  1 +
 src/components/Player.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Player.css b/src/components/Player.css
index 4a28545..02c15b3 100644
--- a/src/components/Player.css
+++ b/src/components/Player.css
@@ -68,6 +68,7 @@
     justify-items: center;
     align-items: center;
 
+    cursor: pointer;
     height: 40px;
     list-style-type: none;
     border-radius: 3px;
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 1ccac91..6acc7e2 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -90,6 +90,8 @@ export function Player(props: PlayerProps) {
     const masterChannelController = props.audioSystem.getMasterChannelController();
     const fxChannelController = props.audioSystem.getFxChannelController();
 
+    const setProjectTime = (t) => props.audioSystem.update({ position: t});
+
     return (
         <div className="player">
             <div style={{display:'flex', height: "780px"}}>
@@ -108,7 +110,11 @@ export function Player(props: PlayerProps) {
                     <Transport audioSystem={props.audioSystem} />
                     <div className="markerList" style={{flexGrow: 1}}>
                         <ul>
-                            {markers.map(m => <li key={m}><div className="dot"/>{formatProjectTime(m)}</li>)}
+                            {markers.map(m =>
+                                <li key={m} onClick={() => setProjectTime(m)}>
+                                    <div className="dot"/>{formatProjectTime(m)}
+                                </li>
+                            )}
                         </ul>
                     </div>
                 </div>
@@ -118,7 +124,7 @@ export function Player(props: PlayerProps) {
                 markers={markers}
                 projectTime={displayedProjectTime}
                 projectLength={2 * 60 * 60}
-                setProjectTime={(t) => props.audioSystem.update({ position: t})}
+                setProjectTime={setProjectTime}
             />
         </div>
     );