Markers on vertical list are now clickable

bananu7 · Apr 2, 2024 · 38682e9 · 38682e9
1 parent 0ca91b8
commit 38682e9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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>
     );