summaryrefslogtreecommitdiff
path: root/apps/web/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components')
-rw-r--r--apps/web/src/components/editor-header.tsx2
-rw-r--r--apps/web/src/components/editor/properties-panel/index.tsx6
-rw-r--r--apps/web/src/components/editor/timeline/timeline-playhead.tsx1
-rw-r--r--apps/web/src/components/header.tsx24
-rw-r--r--apps/web/src/components/landing/handlebars.tsx173
5 files changed, 76 insertions, 130 deletions
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 6e9af186..96b47800 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -10,6 +10,7 @@ import { useProjectStore } from "@/stores/project-store";
import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
import { useState, useRef } from "react";
import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
export function EditorHeader() {
const { getTotalDuration } = useTimelineStore();
@@ -22,6 +23,7 @@ export function EditorHeader() {
// TODO: Implement export functionality
// NOTE: This is already being worked on
console.log("Export project");
+ window.open('https://youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
};
const handleNameClick = () => {
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 4fc5d89d..ec1942f7 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -41,7 +41,7 @@ export function PropertiesPanel() {
label="Resolution:"
value={`${canvasSize.width} × ${canvasSize.height}`}
/>
- <div className="flex justify-between items-center">
+ <div className="flex flex-col gap-1">
<Label className="text-xs text-muted-foreground">Frame rate:</Label>
<Select
value={(activeProject?.fps || 30).toString()}
@@ -101,9 +101,9 @@ export function PropertiesPanel() {
function PropertyItem({ label, value }: { label: string; value: string }) {
return (
- <div className="flex justify-between">
+ <div className="flex flex-col gap-1">
<Label className="text-xs text-muted-foreground">{label}</Label>
- <span className="text-xs text-right truncate w-40" title={value}>
+ <span className="text-xs break-words" title={value}>
{value}
</span>
</div>
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index 509ce9d7..d0aea7fa 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -72,6 +72,7 @@ export function TimelinePlayhead({
top: 0,
height: `${totalHeight}px`,
width: "2px", // Slightly wider for better click target
+ zIndex: 100,
}}
onMouseDown={handlePlayheadMouseDown}
>
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 2e6de534..f5f847be 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -15,17 +15,19 @@ export function Header() {
);
const rightContent = (
- <nav className="flex items-center gap-3">
- <Link href="/blog">
- <Button variant="text" className="text-sm p-0">
- Blog
- </Button>
- </Link>
- <Link href="/contributors">
- <Button variant="text" className="text-sm p-0">
- Contributors
- </Button>
- </Link>
+ <nav className="flex items-center gap-1">
+ <div className="flex items-center gap-4">
+ <Link href="/blog">
+ <Button variant="text" className="text-sm p-0">
+ Blog
+ </Button>
+ </Link>
+ <Link href="/contributors">
+ <Button variant="text" className="text-sm p-0">
+ Contributors
+ </Button>
+ </Link>
+ </div>
<Link href="/projects">
<Button size="sm" className="text-sm ml-4">
Projects
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 94764dbe..26cf9254 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -1,163 +1,104 @@
"use client";
-import React, { useState, useRef, useEffect } from "react";
-import { motion, useMotionValue, useTransform, PanInfo } from "motion/react";
+import {
+ motion,
+ useMotionTemplate,
+ useMotionValue,
+ useMotionValueEvent,
+ useTransform,
+} from "motion/react";
+import { type PropsWithChildren, useEffect, useRef, useState } from "react";
-interface HandlebarsProps {
- children: React.ReactNode;
- minWidth?: number;
- maxWidth?: number;
- onRangeChange?: (left: number, right: number) => void;
-}
-
-export function Handlebars({
- children,
- minWidth = 50,
- maxWidth = 400,
- onRangeChange,
-}: HandlebarsProps) {
- const [leftHandle, setLeftHandle] = useState(0);
- const [rightHandle, setRightHandle] = useState(maxWidth);
- const [contentWidth, setContentWidth] = useState(maxWidth);
-
- const leftHandleX = useMotionValue(0);
- const rightHandleX = useMotionValue(maxWidth);
-
- const visibleWidth = useTransform(
- [leftHandleX, rightHandleX],
- (values: number[]) => values[1] - values[0]
- );
-
- const contentLeft = useTransform(leftHandleX, (left: number) => -left);
+type HandlebarsProps = PropsWithChildren;
+export function Handlebars({ children }: HandlebarsProps) {
const containerRef = useRef<HTMLDivElement>(null);
- const measureRef = useRef<HTMLDivElement>(null);
-
- useEffect(() => {
- if (!measureRef.current) return;
-
- const measureContent = () => {
- if (measureRef.current) {
- const width = measureRef.current.scrollWidth;
- const paddedWidth = width + 32;
- setContentWidth(paddedWidth);
- setRightHandle(paddedWidth);
- rightHandleX.set(paddedWidth);
- }
- };
- measureContent();
- const timer = setTimeout(measureContent, 50);
+ const [width, setWidth] = useState(0);
- return () => clearTimeout(timer);
- }, [children, rightHandleX]);
+ const [leftHandle, setLeftHandle] = useState(0);
+ const [rightHandle, setRightHandle] = useState(width);
- useEffect(() => {
- leftHandleX.set(leftHandle);
- }, [leftHandle, leftHandleX]);
+ const leftHandleX = useMotionValue(0);
+ const rightHandleX = useMotionValue(width);
useEffect(() => {
- rightHandleX.set(rightHandle);
- }, [rightHandle, rightHandleX]);
+ const el = containerRef.current;
+ if (!el) return;
- useEffect(() => {
- onRangeChange?.(leftHandle, rightHandle);
- }, [leftHandle, rightHandle, onRangeChange]);
+ const observer = new ResizeObserver(() => {
+ setWidth(el.offsetWidth);
+ setRightHandle(el.offsetWidth);
+ rightHandleX.set(el.offsetWidth);
+ });
- const handleLeftDrag = (event: any, info: PanInfo) => {
- const newLeft = Math.max(
- 0,
- Math.min(leftHandle + info.offset.x, rightHandle - minWidth)
- );
- setLeftHandle(newLeft);
- };
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, [rightHandleX.set]);
- const handleRightDrag = (event: any, info: PanInfo) => {
- const newRight = Math.max(
- leftHandle + minWidth,
- Math.min(contentWidth, rightHandle + info.offset.x)
- );
- setRightHandle(newRight);
- };
+ 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 (
<div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
- <div
- ref={measureRef}
- className="absolute -left-[9999px] top-0 invisible px-4 whitespace-nowrap font-[inherit]"
- >
- {children}
- </div>
-
- <div
- ref={containerRef}
- className="relative -rotate-[2.76deg] max-w-[250px] md:max-w-[454px] mt-2"
- style={{ width: contentWidth }}
- >
- <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between">
+ <div ref={containerRef} className="relative -rotate-[2.76deg] mt-2">
+ <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-[1]">
<motion.div
- className="h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none"
+ className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
style={{
- position: "absolute",
x: leftHandleX,
- left: 0,
- zIndex: 10,
}}
drag="x"
- dragConstraints={{ left: 0, right: rightHandle - minWidth }}
+ dragConstraints={{ left: 0, right: rightHandle - 60 }}
dragElastic={0}
dragMomentum={false}
- onDrag={handleLeftDrag}
- whileHover={{ scale: 1.05 }}
- whileDrag={{ scale: 1.1 }}
+ whileHover={{ scale: 1.05, cursor: "grab" }}
+ whileDrag={{ scale: 1.1, cursor: "grabbing" }}
transition={{ type: "spring", stiffness: 400, damping: 30 }}
>
- <div className="w-2 h-8 rounded-full bg-yellow-500" />
+ <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
</motion.div>
<motion.div
- className="h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none"
+ className="absolute z-10 -left-[30px] h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
style={{
- position: "absolute",
x: rightHandleX,
- left: -30,
- zIndex: 10,
}}
drag="x"
dragConstraints={{
- left: leftHandle + minWidth,
- right: contentWidth,
+ left: leftHandle + 60,
+ right: width,
}}
dragElastic={0}
dragMomentum={false}
- onDrag={handleRightDrag}
- whileHover={{ scale: 1.05 }}
- whileDrag={{ scale: 1.1 }}
+ whileHover={{ scale: 1.05, cursor: "grab" }}
+ whileDrag={{ scale: 1.1, cursor: "grabbing" }}
transition={{ type: "spring", stiffness: 400, damping: 30 }}
>
- <div className="w-2 h-8 rounded-full bg-yellow-500" />
+ <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
</motion.div>
</div>
- <motion.div
- className="relative overflow-hidden rounded-2xl"
+ <motion.span
+ className="inline-flex items-center justify-center w-full h-full px-9 relative rounded-2xl will-change-auto"
style={{
- width: visibleWidth,
- x: leftHandleX,
- height: "100%",
+ mask: useMotionTemplate`linear-gradient(90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0) ${leftGradient}%,
+ rgba(0, 0, 0) ${leftGradient}%,
+ rgba(0, 0, 0) ${rightGradient}%,
+ rgba(255, 255, 255, 0) ${rightGradient}%,
+ rgba(255, 255, 255, 0) 100%)`,
}}
>
- <motion.div
- className="w-full h-full flex items-center justify-center px-4"
- style={{
- x: contentLeft,
- width: contentWidth,
- whiteSpace: "nowrap",
- }}
- >
- {children}
- </motion.div>
- </motion.div>
+ {children}
+ </motion.span>
</div>
</div>
);
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-24 13:23:01 +0000