Merge pull request #22 from jrafaaael/feat/drag

jrafaaael · web-flow · commit 37eadad91fbe · 2024-03-21T20:02:04.000-04:00
feat: drag zooms and trim
diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
@@ -22,7 +22,6 @@
 	let videoRef: Video;
 	let paused = true;
 	let ended: boolean;
-	let isTrimming = false;
 
 	onMount(async () => {
 		try {
@@ -116,14 +115,13 @@
 					<Seeker
 						startAt={$edits.startAt}
 						endAt={$edits.endAt}
-						{isTrimming}
 						on:changeTime={({ detail }) => {
 							videoRef.pause();
 							$videoStatus.currentTime = detail.newTime;
 						}}
 					/>
 					<div class="w-full h-10 relative">
-						<Trimmer bind:isResizing={isTrimming} />
+						<Trimmer />
 					</div>
 					<ZoomList />
 				</div>
diff --git a/src/routes/[id]/components/moveable.svelte b/src/routes/[id]/components/moveable.svelte
@@ -6,11 +6,13 @@
 	export let width: number | null = null;
 	export let left: number | null = null;
 	export let className: { root?: string; handle?: string; handleE?: string; handleW?: string };
-	export let isResizing: boolean | null = null;
+	let moveableRef: HTMLDivElement;
+	let isResizing: boolean | null = null;
 	let direction: Direction | null = null;
-	let resizableRef: HTMLDivElement;
 	let mousePositionWhenResizingStart: number | null = null;
 	let trimmerRectWhenResizingStart: DOMRect | null = null;
+	let isDragging = false;
+	let moveablePositionWhenDragStart: { top: number; left: number } | null = null;
 	let dispatcher = createEventDispatcher();
 
 	function handleResizeStart(
@@ -19,7 +21,7 @@
 		},
 		dir: Direction
 	) {
-		trimmerRectWhenResizingStart = resizableRef.getBoundingClientRect();
+		trimmerRectWhenResizingStart = moveableRef.getBoundingClientRect();
 		mousePositionWhenResizingStart = e.pageX;
 		isResizing = true;
 		direction = dir;
@@ -36,9 +38,9 @@
 			return;
 		}
 
-		const trimmerRect = resizableRef.getBoundingClientRect();
+		const trimmerRect = moveableRef.getBoundingClientRect();
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const constrains = resizableRef.parentElement!.getBoundingClientRect();
+		const constrains = moveableRef.parentElement!.getBoundingClientRect();
 
 		if (direction === 'right') {
 			const delta = e.pageX - mousePositionWhenResizingStart;
@@ -53,13 +55,13 @@
 			if (!width) {
 				const widthInPercentage = (interalWidth * 100) / constrains.width;
 
-				resizableRef.style.setProperty('width', widthInPercentage.toFixed(1) + '%');
+				moveableRef.style.setProperty('width', widthInPercentage.toFixed(1) + '%');
 			}
 
 			dispatcher('resize', {
 				direction,
 				delta: deltaWidth,
-				refToElement: resizableRef
+				refToElement: moveableRef
 			});
 		} else if (direction === 'left') {
 			const delta = mousePositionWhenResizingStart - e.pageX;
@@ -76,31 +78,67 @@
 				const widthInPercentage = (internalWidth * 100) / constrains.width;
 				const leftInPercentage = Math.max(0, (internalLeft * 100) / constrains.width);
 
-				resizableRef.style.setProperty('width', widthInPercentage.toFixed(1) + '%');
-				resizableRef.style.setProperty('left', leftInPercentage.toFixed(1) + '%');
+				moveableRef.style.setProperty('width', widthInPercentage.toFixed(1) + '%');
+				moveableRef.style.setProperty('left', leftInPercentage.toFixed(1) + '%');
 			}
 
 			dispatcher('resize', {
 				direction,
 				delta: deltaWidth,
-				refToElement: resizableRef
+				refToElement: moveableRef
 			});
 		}
 	}
 
-	function handleResizeEnd() {
+	function handleDragStart(e: MouseEvent) {
+		isDragging = true;
+		moveablePositionWhenDragStart = {
+			top: e.clientY - moveableRef.offsetTop,
+			left: e.clientX - moveableRef.offsetLeft
+		};
+		dispatcher('dragStart');
+	}
+
+	function handleDrag(e: MouseEvent) {
+		if (!isDragging) return;
+		if (!moveablePositionWhenDragStart) return;
+
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const left = e.clientX - moveablePositionWhenDragStart.left;
+
+		if (!left) {
+			moveableRef.style.setProperty('left', left.toFixed(1) + 'px');
+		}
+
+		dispatcher('drag', {
+			left,
+			refToElement: moveableRef
+		});
+	}
+
+	function handleEvents(e: MouseEvent) {
+		if (isResizing) {
+			handleResize(e);
+		} else if (isDragging) {
+			handleDrag(e);
+		}
+	}
+
+	function handleEnd() {
 		isResizing = false;
+		isDragging = false;
 		direction = null;
 		dispatcher('resizeEnd');
+		dispatcher('dragEnd');
 	}
 
 	onMount(() => {
-		document.addEventListener('mousemove', handleResize);
-		document.addEventListener('mouseup', handleResizeEnd);
+		document.addEventListener('mousemove', handleEvents);
+		document.addEventListener('mouseup', handleEnd);
 
 		return () => {
-			document.removeEventListener('mousemove', handleResize);
-			document.removeEventListener('mouseup', handleResizeEnd);
+			document.removeEventListener('mousemove', handleEvents);
+			document.removeEventListener('mouseup', handleEnd);
 		};
 	});
 </script>
@@ -119,22 +157,23 @@
 <div
 	class={className.root}
 	style="width: {width ?? 100}%; left: {left ?? 0}%;"
-	bind:this={resizableRef}
+	bind:this={moveableRef}
+	on:mousedown={handleDragStart}
 	on:mouseenter={(e) => dispatcher('mouseenter', { e })}
 	on:mouseleave={(e) => dispatcher('mouseleave', { e })}
 >
 	<div class="w-full h-full relative">
 		<button
 			class="{className.handle ??
 				'min-w-5 h-full cursor-ew-resize absolute top-0 left-0'} {className.handleW ?? ''}"
-			on:mousedown={(e) => handleResizeStart(e, 'left')}
+			on:mousedown|stopPropagation={(e) => handleResizeStart(e, 'left')}
 		>
 			<slot name="w" />
 		</button>
 		<button
 			class="{className.handle ??
 				'min-w-5 h-full cursor-ew-resize absolute top-0 right-0'} {className.handleE ?? ''}"
-			on:mousedown={(e) => handleResizeStart(e, 'right')}
+			on:mousedown|stopPropagation={(e) => handleResizeStart(e, 'right')}
 		>
 			<slot name="e" />
 		</button>
diff --git a/src/routes/[id]/components/seeker.svelte b/src/routes/[id]/components/seeker.svelte
@@ -2,10 +2,10 @@
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { recording } from '../stores/recording.store';
 	import { videoStatus } from '../stores/video-status.store';
+	import { isEditingTrim } from '../stores/is-editing-trim.store';
 
 	export let startAt: number;
 	export let endAt: number;
-	export let isTrimming: boolean;
 	let isDragging = false;
 	let seekbarRef: HTMLButtonElement;
 	let dispatcher = createEventDispatcher();
@@ -57,7 +57,7 @@
 	class="h-[calc(100%+8px)] px-2 absolute bottom-0 z-50 cursor-col-resize {$videoStatus.currentTime <=
 		startAt ||
 	isDragging ||
-	(isTrimming && (endAt <= $videoStatus.currentTime || startAt >= $videoStatus.currentTime))
+	($isEditingTrim && (endAt <= $videoStatus.currentTime || startAt >= $videoStatus.currentTime))
 		? 'transition-none'
 		: 'transition-[left] ease-linear duration-100'}"
 	style="--position: {position}%; left: calc(var(--position, 0%) - 8px);"
diff --git a/src/routes/[id]/components/trimmer.svelte b/src/routes/[id]/components/trimmer.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { edits } from '../stores/edits.store';
+	import { isEditingTrim } from '../stores/is-editing-trim.store';
 	import { recording } from '../stores/recording.store';
 	import { videoStatus } from '../stores/video-status.store';
-	import Resizable from './resizable.svelte';
+	import Moveable from './moveable.svelte';
 
-	export let isResizing: boolean;
 	const MIN_VIDEO_DURATION_IN_SECONDS = 1;
 	$: width = (($edits.endAt - $edits.startAt) * 100) / $recording?.duration;
 	$: left = ($edits.startAt * 100) / $recording?.duration;
 </script>
 
-<Resizable
+<Moveable
 	className={{
-		root: `group h-10 bg-white/5 border-2 border-white/10 rounded-lg absolute ring ring-transparent ring-offset-0 [&.current-trim]:bg-blue-700/20 [&.current-trim]:border-blue-700/50 [&.current-trim]:focus-within:ring-blue-700/20 hover:bg-blue-700/20 hover:border-blue-700/50 has-[:active]:bg-blue-700/20 has-[:active]:border-blue-700/50 focus-within:ring-white/5 focus-within:hover:ring-blue-700/20 hover:z-10 ${
+		root: `group h-10 bg-white/5 border-2 border-white/10 rounded-lg absolute ring ring-transparent ring-offset-0 cursor-grab active:cursor-grabbing [&.current-trim]:bg-blue-700/20 [&.current-trim]:border-blue-700/50 [&.current-trim]:focus-within:ring-blue-700/20 hover:bg-blue-700/20 hover:border-blue-700/50 has-[:active]:bg-blue-700/20 has-[:active]:border-blue-700/50 focus-within:ring-white/5 focus-within:hover:ring-blue-700/20 hover:z-10 ${
 			$videoStatus.currentTime >= $edits.startAt && $videoStatus.currentTime <= $edits.endAt
 				? 'current-trim'
 				: ''
@@ -24,7 +24,7 @@
 	}}
 	{width}
 	{left}
-	bind:isResizing
+	on:resizeStart={() => ($isEditingTrim = true)}
 	on:resize={({ detail }) => {
 		const { direction, delta, refToElement } = detail;
 		const zoomRect = refToElement.getBoundingClientRect();
@@ -46,11 +46,27 @@
 			$edits.endAt = Math.max(end, Math.abs($edits.startAt + MIN_VIDEO_DURATION_IN_SECONDS));
 		}
 	}}
+	on:resizeEnd={() => ($isEditingTrim = false)}
+	on:dragStart={() => ($isEditingTrim = true)}
+	on:drag={({ detail }) => {
+		const { refToElement, left } = detail;
+		const constrains = refToElement.parentElement.getBoundingClientRect();
+		const dif = $edits.endAt - $edits.startAt;
+		const start = +Math.max(
+			0,
+			(left * $recording.duration) / (constrains.right - constrains.left)
+		).toFixed(2);
+		const end = +Math.min($recording?.duration ?? Infinity, start + dif).toFixed(2);
+
+		$edits.startAt = Math.min(start, end - dif);
+		$edits.endAt = end;
+	}}
+	on:dragEnd={() => ($isEditingTrim = false)}
 >
 	<div slot="w" class="w-[12px] h-[75%] bg-blue-900 rounded-l-md flex justify-center items-center">
 		<div class="w-[2px] h-[45%] bg-neutral-50/50 rounded-full" />
 	</div>
 	<div slot="e" class="w-[12px] h-[75%] bg-blue-900 rounded-r-md flex justify-center items-center">
 		<div class="w-[2px] h-[45%] bg-neutral-50/50 rounded-full" />
 	</div>
-</Resizable>
+</Moveable>
diff --git a/src/routes/[id]/components/zoom-list.svelte b/src/routes/[id]/components/zoom-list.svelte
@@ -3,7 +3,7 @@
 	import { videoStatus } from '../stores/video-status.store';
 	import { zooms } from '../stores/zooms.store';
 	import { ZOOM_TRANSITION_DURATION } from '../utils/constants';
-	import Resizable from './resizable.svelte';
+	import Moveable from './moveable.svelte';
 </script>
 
 <div class="w-full h-10 relative">
@@ -12,9 +12,9 @@
 		{@const left = (zoom.start * 100) / $recording?.duration}
 		{@const nextZoom = $zooms.at(idx + 1)}
 		{@const prevZoom = idx === 0 ? null : $zooms.at(idx - 1)}
-		<Resizable
+		<Moveable
 			className={{
-				root: `group h-10 bg-white/5 border-2 border-white/10 rounded-lg absolute ring ring-transparent ring-offset-0 [&.current-zoom]:bg-emerald-800/30 [&.current-zoom]:border-emerald-800/80 [&.current-zoom]:focus-within:ring-emerald-800/30 hover:bg-emerald-800/30 hover:border-emerald-800/80 has-[:active]:bg-emerald-800/30 has-[:active]:border-emerald-800/80 focus-within:ring-white/5 focus-within:hover:ring-emerald-800/30 focus-within:active:ring-emerald-800/30 ${
+				root: `group h-10 bg-white/5 border-2 border-white/10 rounded-lg absolute ring ring-transparent ring-offset-0 cursor-grab active:cursor-grabbing [&.current-zoom]:bg-emerald-800/30 [&.current-zoom]:border-emerald-800/80 [&.current-zoom]:focus-within:ring-emerald-800/30 hover:bg-emerald-800/30 hover:border-emerald-800/80 has-[:active]:bg-emerald-800/30 has-[:active]:border-emerald-800/80 focus-within:ring-white/5 focus-within:hover:ring-emerald-800/30 focus-within:active:ring-emerald-800/30 ${
 					$videoStatus.currentTime >= zoom.start && $videoStatus.currentTime <= zoom.end
 						? 'current-zoom'
 						: ''
@@ -96,6 +96,27 @@
 					}
 				}
 			}}
+			on:drag={({ detail }) => {
+				const { refToElement, left } = detail;
+				const constrains = refToElement.parentElement.getBoundingClientRect();
+				const dif = zoom.end - zoom.start;
+				const start = +Math.max(
+					0,
+					(left * $recording.duration) / (constrains.right - constrains.left),
+					prevZoom?.end ?? -Infinity
+				).toFixed(2);
+				const end = +Math.min(
+					$recording?.duration ?? Infinity,
+					start + dif,
+					nextZoom?.start ?? Infinity
+				).toFixed(2);
+
+				zooms.updateZoomById({
+					...zoom,
+					start: Math.min(start, end - dif),
+					end
+				});
+			}}
 			on:mouseenter={({ detail }) => {
 				const { e } = detail;
 
@@ -129,6 +150,6 @@
 			>
 				<div class="w-[2px] h-[45%] bg-neutral-50/50 rounded-full" />
 			</div>
-		</Resizable>
+		</Moveable>
 	{/each}
 </div>
diff --git a/src/routes/[id]/stores/is-editing-trim.store.ts b/src/routes/[id]/stores/is-editing-trim.store.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const isEditingTrim = writable(false);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { writable } from 'svelte/store';`
	`2`	`+`
	`3`	`+export const isEditingTrim = writable(false);`