From 7bf0984698e43b9aa2dd879f65951318ed410390 Mon Sep 17 00:00:00 2001 From: Maze <167211895+mazeincoding@users.noreply.github.com> Date: Sat, 31 Jan 2026 00:20:04 +0100 Subject: codebase overhaul (#697) --- apps/web/src/components/landing/handlebars.tsx | 258 ++++++++++++++++--------- apps/web/src/components/landing/hero.tsx | 103 ++++------ 2 files changed, 197 insertions(+), 164 deletions(-) (limited to 'apps/web/src/components/landing') diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx index 758717e5..da0d895d 100644 --- a/apps/web/src/components/landing/handlebars.tsx +++ b/apps/web/src/components/landing/handlebars.tsx @@ -1,105 +1,173 @@ "use client"; -import { - motion, - useMotionTemplate, - useMotionValue, - useMotionValueEvent, - useTransform, -} from "motion/react"; import { type PropsWithChildren, useEffect, useRef, useState } from "react"; type HandlebarsProps = PropsWithChildren; export function Handlebars({ children }: HandlebarsProps) { - const containerRef = useRef(null); - - const [width, setWidth] = useState(0); - - const [leftHandle, setLeftHandle] = useState(0); - const [rightHandle, setRightHandle] = useState(width); - - const leftHandleX = useMotionValue(0); - const rightHandleX = useMotionValue(width); - - useEffect(() => { - const el = containerRef.current; - if (!el) return; - - const observer = new ResizeObserver(() => { - setWidth(el.offsetWidth); - setRightHandle(el.offsetWidth); - rightHandleX.set(el.offsetWidth); - }); - - observer.observe(el); - return () => observer.disconnect(); - }, [rightHandleX.set]); - - useMotionValueEvent(leftHandleX, "change", () => { - setLeftHandle(leftHandleX.get()); - }); - useMotionValueEvent(rightHandleX, "change", () => { - setRightHandle(rightHandleX.get()); - }); - const leftGradient = useTransform(leftHandleX, [0, width - 10], [0, 100]); - const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]); - - return ( -
-
-
- -
- - - -
- -
- - (null); + const leftHandleRef = useRef(null); + const rightHandleRef = useRef(null); + + const [width, setWidth] = useState(0); + const [leftHandle, setLeftHandle] = useState(0); + const [rightHandle, setRightHandle] = useState(0); + + const widthRef = useRef(0); + const leftHandlePositionRef = useRef(0); + const rightHandlePositionRef = useRef(0); + + const dragRef = useRef<{ + isDragging: boolean; + side: "left" | "right" | null; + pointerId: number | null; + startX: number; + initialPosition: number; + }>({ + isDragging: false, + side: null, + pointerId: null, + startX: 0, + initialPosition: 0, + }); + + useEffect(() => { + const el = containerRef.current; + if (!el) return; + + const updateWidth = () => { + const newWidth = el.offsetWidth; + setWidth(newWidth); + setRightHandle(newWidth); + }; + + const observer = new ResizeObserver(updateWidth); + observer.observe(el); + updateWidth(); + + return () => observer.disconnect(); + }, []); + + useEffect(() => { + widthRef.current = width; + leftHandlePositionRef.current = leftHandle; + rightHandlePositionRef.current = rightHandle; + }, [leftHandle, rightHandle, width]); + + useEffect(() => { + const handlePointerMove = (event: PointerEvent) => { + const { isDragging, side, pointerId, startX, initialPosition } = + dragRef.current; + + if (!isDragging) return; + if (pointerId !== null && event.pointerId !== pointerId) return; + if (!side) return; + + const deltaX = event.clientX - startX; + + if (side === "left") { + const maxLeft = Math.max(0, rightHandlePositionRef.current - 60); + const nextLeftHandle = Math.max( + 0, + Math.min(maxLeft, initialPosition + deltaX), + ); + setLeftHandle(nextLeftHandle); + return; + } + + const minRight = Math.min( + widthRef.current, + leftHandlePositionRef.current + 60, + ); + const nextRightHandle = Math.max( + minRight, + Math.min(widthRef.current, initialPosition + deltaX), + ); + setRightHandle(nextRightHandle); + }; + + const handlePointerEnd = (event: PointerEvent) => { + const { pointerId } = dragRef.current; + if (pointerId !== null && event.pointerId !== pointerId) return; + + dragRef.current.isDragging = false; + dragRef.current.side = null; + dragRef.current.pointerId = null; + }; + + window.addEventListener("pointermove", handlePointerMove); + window.addEventListener("pointerup", handlePointerEnd); + window.addEventListener("pointercancel", handlePointerEnd); + + return () => { + window.removeEventListener("pointermove", handlePointerMove); + window.removeEventListener("pointerup", handlePointerEnd); + window.removeEventListener("pointercancel", handlePointerEnd); + }; + }, []); + + const leftGradientPercent = width > 0 ? (leftHandle / (width - 10)) * 100 : 0; + const rightGradientPercent = + width > 0 ? (rightHandle / (width + 10)) * 100 : 0; + + return ( +
+
+
+
{ + event.preventDefault(); + leftHandleRef.current?.setPointerCapture(event.pointerId); + dragRef.current.isDragging = true; + dragRef.current.side = "left"; + dragRef.current.pointerId = event.pointerId; + dragRef.current.startX = event.clientX; + dragRef.current.initialPosition = leftHandlePositionRef.current; + }} + > +
+
+ +
{ + event.preventDefault(); + rightHandleRef.current?.setPointerCapture(event.pointerId); + dragRef.current.isDragging = true; + dragRef.current.side = "right"; + dragRef.current.pointerId = event.pointerId; + dragRef.current.startX = event.clientX; + dragRef.current.initialPosition = rightHandlePositionRef.current; + }} + > +
+
+
+ + - {children} - -
-
- ); + }} + > + {children} + +
+
+ ); } diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 1b557412..6f11ad7c 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -1,81 +1,46 @@ "use client"; -import { motion } from "motion/react"; import { Button } from "../ui/button"; -import { SponsorButton } from "../ui/sponsor-button"; -import { VercelIcon } from "../icons"; import { ArrowRight } from "lucide-react"; - import Image from "next/image"; import { Handlebars } from "./handlebars"; import Link from "next/link"; export function Hero() { - return ( -
- landing-page.bg - - - - - -

The Open Source

- Video Editor - + return ( +
+ landing-page.bg +
+
+

The open source

+ Video editor +
- - A simple but powerful video editor that gets the job done. Works on - any platform. - +

+ A simple but powerful video editor that gets the job done. Works on + any platform. +

- - - - - - -
- ); +
+ + + +
+
+
+ ); } -- cgit v1.3.1