From 521671978374cc7ed04fdc55f2bf136c289fd45e Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sun, 16 May 2021 10:05:09 +0200
Subject: added scrubber

---
 pages/editor.tsx  | 23 ++++++++++++++++++++---
 styles/editor.css | 19 +++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/pages/editor.tsx b/pages/editor.tsx
index eb7e14d..53f7397 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -25,7 +25,7 @@ function TimelineEditor(props: {
 	var frames = [...new Array(props.player.timeline?.framecount || 0)].map((el, i) =>
 		<div className='frame'>
 			<div className='line posabs abscenterh b0' />
-			<span className='timecode numbers posabs abscenterh'>
+			<span className='timecode nosel numbers posabs abscenterh'>
 				{props.player?.frameToTimestampString(i + 1)}
 			</span>
 			<div className='keyframeWrapper posabs abscenterh'>
@@ -43,7 +43,24 @@ function TimelineEditor(props: {
 		</div>
 	);
 
-	return <div className='frames'>{frames}</div>;
+	return <>
+		<div className='scrubber posabs v0'>
+			<svg
+				width='20'
+				height='28'
+				viewBox='0 0 20 28'
+				xmlns='http://www.w3.org/2000/svg'
+				className='head posabs t0 abscenterh'
+			>
+				<path
+					d='M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V17.3431C20 18.404 19.5786 19.4214 18.8284 20.1716L11 28H9L1.17157 20.1716C0.421426 19.4214 0 18.404 0 17.3431V4Z'
+				/>
+			</svg>
+			<div className='needle posabs a0' />
+			<div className='frameOverlay posabs v0' />
+		</div>
+		<div className='frames'>{frames}</div>
+	</>;
 }
 
 export default function Index() {
@@ -149,7 +166,7 @@ export default function Index() {
 					</Button>
 				</ButtonGroup>
 			</div>
-			<div className='timeline'>
+			<div className='timeline posrel'>
 				<TimelineEditor
 					player={player}
 				/>
diff --git a/styles/editor.css b/styles/editor.css
index 62fa103..3d84c22 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -194,3 +194,22 @@
 	white-space: nowrap;
 }
 
+.timeline .scrubber {
+	width: 2px;
+	overflow: visible;
+	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+	z-index: 999999999;
+	--frame: 30;
+	left: calc((var(--zoom) * (var(--frame) - 0.5)) * 1px - 1px)
+}
+
+.timeline .frameOverlay {
+	left: 2px;
+	width: calc(var(--zoom) * 1px - 2px);
+	background-color: var(--blue);
+	opacity: .0;
+}
+
+.timeline .scrubber .head { fill: var(--blue); }
+.timeline .scrubber .needle { background-color: var(--blue); }
+
-- 
cgit v1.2.3