diff options
Diffstat (limited to 'apps/web')
45 files changed, 642 insertions, 273 deletions
diff --git a/apps/web/netlify.toml b/apps/web/netlify.toml deleted file mode 100644 index 55ec88ff..00000000 --- a/apps/web/netlify.toml +++ /dev/null @@ -1,13 +0,0 @@ -[build]
- base = "../.."
- command = "bun install && bunx turbo build --filter=opencut"
- publish = "apps/web/.next"
-
-[[plugins]]
- package = "@netlify/plugin-nextjs"
-
-[[redirects]]
- from = "https://appcut.app/*"
- to = "https://opencut.app/:splat"
- status = 301
- force = true
diff --git a/apps/web/package.json b/apps/web/package.json index eb41cb31..bc12e24d 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -21,7 +21,6 @@ "@hookform/resolvers": "^3.9.1", "@opencut/auth": "workspace:*", "@opencut/db": "workspace:*", - "@types/pg": "^8.15.4", "@upstash/ratelimit": "^2.0.5", "@upstash/redis": "^1.35.0", "@vercel/analytics": "^1.4.1", @@ -57,6 +56,7 @@ "zustand": "^5.0.2" }, "devDependencies": { + "@types/pg": "^8.15.4", "@types/bun": "latest", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", diff --git a/apps/web/public/browserconfig.xml b/apps/web/public/browserconfig.xml new file mode 100644 index 00000000..39060b21 --- /dev/null +++ b/apps/web/public/browserconfig.xml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<browserconfig> + <msapplication> + <tile> + <square70x70logo src="/icons/ms-icon-70x70.png"/> + <square150x150logo src="/icons/ms-icon-150x150.png"/> + <square310x310logo src="/icons/ms-icon-310x310.png"/> + <TileColor>#ffffff</TileColor> + </tile> + </msapplication> +</browserconfig>
\ No newline at end of file diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico Binary files differnew file mode 100644 index 00000000..9b2cba8f --- /dev/null +++ b/apps/web/public/favicon.ico diff --git a/apps/web/public/frame.svg b/apps/web/public/frame.svg new file mode 100644 index 00000000..4dac68e9 --- /dev/null +++ b/apps/web/public/frame.svg @@ -0,0 +1,10 @@ +<svg width="459" height="77" viewBox="0 0 459 77" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect x="0.5" y="1.15625" width="458" height="75" rx="15.5" fill="#101010"/> +<rect x="0.5" y="1.15625" width="458" height="75" rx="15.5" stroke="#FFCC00"/> +<rect x="0.5" y="1.15625" width="31" height="75" rx="15.5" fill="#2A2A2A"/> +<rect x="0.5" y="1.15625" width="31" height="75" rx="15.5" stroke="#FFCC00"/> +<rect x="13" y="20.6562" width="6" height="36" rx="3" fill="#FFCC00"/> +<rect x="427.5" y="1.15625" width="31" height="75" rx="15.5" fill="#2A2A2A"/> +<rect x="427.5" y="1.15625" width="31" height="75" rx="15.5" stroke="#FFCC00"/> +<rect x="440" y="20.6562" width="6" height="36" rx="3" fill="#FFCC00"/> +</svg> diff --git a/apps/web/public/icons/android-icon-144x144.png b/apps/web/public/icons/android-icon-144x144.png Binary files differnew file mode 100644 index 00000000..7320ece7 --- /dev/null +++ b/apps/web/public/icons/android-icon-144x144.png diff --git a/apps/web/public/icons/android-icon-192x192.png b/apps/web/public/icons/android-icon-192x192.png Binary files differnew file mode 100644 index 00000000..f534f429 --- /dev/null +++ b/apps/web/public/icons/android-icon-192x192.png diff --git a/apps/web/public/icons/android-icon-36x36.png b/apps/web/public/icons/android-icon-36x36.png Binary files differnew file mode 100644 index 00000000..6b8db020 --- /dev/null +++ b/apps/web/public/icons/android-icon-36x36.png diff --git a/apps/web/public/icons/android-icon-48x48.png b/apps/web/public/icons/android-icon-48x48.png Binary files differnew file mode 100644 index 00000000..30a68fa5 --- /dev/null +++ b/apps/web/public/icons/android-icon-48x48.png diff --git a/apps/web/public/icons/android-icon-72x72.png b/apps/web/public/icons/android-icon-72x72.png Binary files differnew file mode 100644 index 00000000..e4019c84 --- /dev/null +++ b/apps/web/public/icons/android-icon-72x72.png diff --git a/apps/web/public/icons/android-icon-96x96.png b/apps/web/public/icons/android-icon-96x96.png Binary files differnew file mode 100644 index 00000000..85591ab4 --- /dev/null +++ b/apps/web/public/icons/android-icon-96x96.png diff --git a/apps/web/public/icons/apple-icon-114x114.png b/apps/web/public/icons/apple-icon-114x114.png Binary files differnew file mode 100644 index 00000000..c776e3f9 --- /dev/null +++ b/apps/web/public/icons/apple-icon-114x114.png diff --git a/apps/web/public/icons/apple-icon-120x120.png b/apps/web/public/icons/apple-icon-120x120.png Binary files differnew file mode 100644 index 00000000..76604df8 --- /dev/null +++ b/apps/web/public/icons/apple-icon-120x120.png diff --git a/apps/web/public/icons/apple-icon-144x144.png b/apps/web/public/icons/apple-icon-144x144.png Binary files differnew file mode 100644 index 00000000..7320ece7 --- /dev/null +++ b/apps/web/public/icons/apple-icon-144x144.png diff --git a/apps/web/public/icons/apple-icon-152x152.png b/apps/web/public/icons/apple-icon-152x152.png Binary files differnew file mode 100644 index 00000000..eb5ef0df --- /dev/null +++ b/apps/web/public/icons/apple-icon-152x152.png diff --git a/apps/web/public/icons/apple-icon-180x180.png b/apps/web/public/icons/apple-icon-180x180.png Binary files differnew file mode 100644 index 00000000..b90e62fb --- /dev/null +++ b/apps/web/public/icons/apple-icon-180x180.png diff --git a/apps/web/public/icons/apple-icon-57x57.png b/apps/web/public/icons/apple-icon-57x57.png Binary files differnew file mode 100644 index 00000000..7cfb2e56 --- /dev/null +++ b/apps/web/public/icons/apple-icon-57x57.png diff --git a/apps/web/public/icons/apple-icon-60x60.png b/apps/web/public/icons/apple-icon-60x60.png Binary files differnew file mode 100644 index 00000000..1d90a370 --- /dev/null +++ b/apps/web/public/icons/apple-icon-60x60.png diff --git a/apps/web/public/icons/apple-icon-72x72.png b/apps/web/public/icons/apple-icon-72x72.png Binary files differnew file mode 100644 index 00000000..e4019c84 --- /dev/null +++ b/apps/web/public/icons/apple-icon-72x72.png diff --git a/apps/web/public/icons/apple-icon-76x76.png b/apps/web/public/icons/apple-icon-76x76.png Binary files differnew file mode 100644 index 00000000..34575f42 --- /dev/null +++ b/apps/web/public/icons/apple-icon-76x76.png diff --git a/apps/web/public/icons/favicon-16x16.png b/apps/web/public/icons/favicon-16x16.png Binary files differnew file mode 100644 index 00000000..96db3a2f --- /dev/null +++ b/apps/web/public/icons/favicon-16x16.png diff --git a/apps/web/public/icons/favicon-32x32.png b/apps/web/public/icons/favicon-32x32.png Binary files differnew file mode 100644 index 00000000..f8f589dc --- /dev/null +++ b/apps/web/public/icons/favicon-32x32.png diff --git a/apps/web/public/icons/favicon-96x96.png b/apps/web/public/icons/favicon-96x96.png Binary files differnew file mode 100644 index 00000000..85591ab4 --- /dev/null +++ b/apps/web/public/icons/favicon-96x96.png diff --git a/apps/web/public/icons/ms-icon-144x144.png b/apps/web/public/icons/ms-icon-144x144.png Binary files differnew file mode 100644 index 00000000..7320ece7 --- /dev/null +++ b/apps/web/public/icons/ms-icon-144x144.png diff --git a/apps/web/public/icons/ms-icon-150x150.png b/apps/web/public/icons/ms-icon-150x150.png Binary files differnew file mode 100644 index 00000000..248ef48a --- /dev/null +++ b/apps/web/public/icons/ms-icon-150x150.png diff --git a/apps/web/public/icons/ms-icon-310x310.png b/apps/web/public/icons/ms-icon-310x310.png Binary files differnew file mode 100644 index 00000000..950a3d6b --- /dev/null +++ b/apps/web/public/icons/ms-icon-310x310.png diff --git a/apps/web/public/icons/ms-icon-70x70.png b/apps/web/public/icons/ms-icon-70x70.png Binary files differnew file mode 100644 index 00000000..7b9c2694 --- /dev/null +++ b/apps/web/public/icons/ms-icon-70x70.png diff --git a/apps/web/public/landing-page-bg.png b/apps/web/public/landing-page-bg.png Binary files differnew file mode 100644 index 00000000..4f873945 --- /dev/null +++ b/apps/web/public/landing-page-bg.png diff --git a/apps/web/public/logo.svg b/apps/web/public/logo.svg new file mode 100644 index 00000000..7de330af --- /dev/null +++ b/apps/web/public/logo.svg @@ -0,0 +1,4 @@ +<svg width="142" height="32" viewBox="0 0 142 32" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M32 9.37305V22.627L22.627 32H9.37305L0 22.627V9.37305L9.37305 0H22.627L32 9.37305ZM8 8V24H24V8H8Z" fill="white"/> +<path d="M53.048 24.884C48.104 24.884 45.104 21.524 45.104 16.004C45.104 10.484 48.104 7.076 53.048 7.076C58.04 7.076 61.016 10.484 61.016 16.004C61.016 21.524 58.04 24.884 53.048 24.884ZM53.048 22.508C56.36 22.508 58.328 20.108 58.328 16.004C58.328 11.9 56.36 9.452 53.048 9.452C49.784 9.452 47.792 11.9 47.792 16.004C47.792 20.108 49.784 22.508 53.048 22.508ZM62.9433 28.1V11.732H65.3433L65.3913 13.676C66.1353 12.212 67.5513 11.444 69.2553 11.444C72.9993 11.444 74.7273 14.516 74.7273 18.116C74.7273 21.716 72.9753 24.788 69.2553 24.788C67.5993 24.788 66.1593 24.02 65.4873 22.772V28.1H62.9433ZM68.7993 22.58C70.8393 22.58 72.0873 20.924 72.0873 18.116C72.0873 15.308 70.8393 13.652 68.7993 13.652C66.7593 13.652 65.4873 15.164 65.4873 18.116C65.4873 21.068 66.7353 22.58 68.7993 22.58ZM82.2266 24.788C78.5306 24.788 76.1786 22.148 76.1786 18.116C76.1786 14.084 78.5306 11.444 82.1546 11.444C85.6346 11.444 88.0106 13.916 88.0106 18.212V18.86H78.8426C78.9626 21.356 80.2346 22.604 82.2506 22.604C83.7626 22.604 84.7706 21.86 85.1786 20.66L87.8186 20.828C87.1466 23.204 85.0586 24.788 82.2266 24.788ZM85.2986 16.94C85.1546 14.684 83.9066 13.604 82.1546 13.604C80.3546 13.604 79.1306 14.78 78.8426 16.94H85.2986ZM90.1753 24.5V11.732H92.5033L92.5753 13.94C93.2473 12.212 94.7113 11.444 96.4393 11.444C99.2953 11.444 100.759 13.508 100.759 16.292V24.5H98.2153V17.06C98.2153 14.804 97.5193 13.58 95.7433 13.58C93.9433 13.58 92.7193 14.804 92.7193 17.06V24.5H90.1753ZM110.883 24.884C106.275 24.884 103.107 21.548 103.107 16.004C103.107 10.508 106.227 7.076 110.907 7.076C115.131 7.076 117.387 9.332 118.131 13.052L115.395 13.196C114.939 10.868 113.499 9.452 110.907 9.452C107.811 9.452 105.795 11.948 105.795 16.004C105.795 20.084 107.835 22.508 110.883 22.508C113.643 22.508 115.107 20.948 115.515 18.404L118.251 18.548C117.603 22.412 115.083 24.884 110.883 24.884ZM124.677 24.788C122.085 24.788 120.477 22.988 120.477 19.94V11.732H123.021V19.292C123.021 21.62 123.813 22.652 125.445 22.652C127.293 22.652 128.397 21.404 128.397 19.22V11.732H130.941V24.5H128.565L128.541 22.412C127.869 23.972 126.525 24.788 124.677 24.788ZM138.509 24.5C136.085 24.5 134.957 23.444 134.957 21.044V13.82H133.013V11.732H134.957V8.732H137.501V11.732H140.885V13.82H137.501V20.852C137.501 22.052 138.005 22.412 139.061 22.412H140.885V24.5H138.509Z" fill="white"/> +</svg> diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json new file mode 100644 index 00000000..fcbfad59 --- /dev/null +++ b/apps/web/public/manifest.json @@ -0,0 +1,44 @@ +{ + "name": "OpenCut", + "description": "A simple but powerful video editor that gets the job done. In your browser.", + "display": "standalone", + "start_url": "/", + "icons": [ + { + "src": "/icons/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "/icons/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "/icons/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "/icons/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "/icons/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "/icons/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +}
\ No newline at end of file diff --git a/apps/web/src/app/favicon.ico b/apps/web/src/app/favicon.ico Binary files differdeleted file mode 100644 index cb20127b..00000000 --- a/apps/web/src/app/favicon.ico +++ /dev/null diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 2169dbbc..1c8a7887 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -39,7 +39,7 @@ --sidebar-ring: 0 0% 3.9%; } .dark { - --background: 0 0% 8%; + --background: 0 0% 6%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 5d33100d..ee045647 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,4 +1,3 @@ -import type { Metadata } from "next"; import { Inter } from "next/font/google"; import { ThemeProvider } from "next-themes"; import { Analytics } from "@vercel/analytics/react"; @@ -6,46 +5,14 @@ import Script from "next/script"; import "./globals.css"; import { Toaster } from "../components/ui/sonner"; import { TooltipProvider } from "../components/ui/tooltip"; +import { baseMetaData } from "./metadata"; const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }); -export const metadata: Metadata = { - title: "OpenCut", - description: - "A simple but powerful video editor that gets the job done. In your browser.", - openGraph: { - title: "OpenCut", - description: - "A simple but powerful video editor that gets the job done. In your browser.", - url: "https://opencut.app", - siteName: "OpenCut", - locale: "en_US", - type: "website", - images: [ - { - url: "https://opencut.app/opengraph-image.jpg", - width: 1200, - height: 630, - alt: "OpenCut", - }, - ], - }, - twitter: { - card: "summary_large_image", - title: "OpenCut", - description: - "A simple but powerful video editor that gets the job done. In your browser.", - creator: "@opencutapp", - images: ["/opengraph-image.jpg"], - }, - robots: { - index: true, - follow: true, - }, -}; +export const metadata = baseMetaData; export default function RootLayout({ children, diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts new file mode 100644 index 00000000..4e387014 --- /dev/null +++ b/apps/web/src/app/metadata.ts @@ -0,0 +1,66 @@ +import { Metadata } from "next"; + +const title = "OpenCut"; +const description = "A simple but powerful video editor that gets the job done. In your browser."; +const openGraphImageUrl = "https://opencut.app/opengraph-image.jpg"; +const twitterImageUrl = "/opengraph-image.jpg"; + +export const baseMetaData: Metadata = { + title: title, + description: description, + openGraph: { + title: title, + description: description, + url: "https://opencut.app", + siteName: "OpenCut", + locale: "en_US", + type: "website", + images: [ + { + url: openGraphImageUrl, + width: 1200, + height: 630, + alt: "OpenCut", + }, + ], + }, + twitter: { + card: "summary_large_image", + title: title, + description: description, + creator: "@opencutapp", + images: [twitterImageUrl], + }, + robots: { + index: true, + follow: true, + }, + icons: { + icon: [ + { url: "/favicon.ico" }, + { url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" }, + { url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" }, + { url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" }, + ], + apple: [ + { url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" }, + { url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" }, + { url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" }, + { url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" }, + { url: "/icons/apple-icon-114x114.png", sizes: "114x114", type: "image/png" }, + { url: "/icons/apple-icon-120x120.png", sizes: "120x120", type: "image/png" }, + { url: "/icons/apple-icon-144x144.png", sizes: "144x144", type: "image/png" }, + { url: "/icons/apple-icon-152x152.png", sizes: "152x152", type: "image/png" }, + { url: "/icons/apple-icon-180x180.png", sizes: "180x180", type: "image/png" }, + ], + shortcut: ["/favicon.ico"] + }, + appleWebApp: { + capable: true, + title: title, + }, + manifest: "/manifest.json", + other: { + "msapplication-config": "/browserconfig.xml" + } +}; diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index dcedab32..e9957e1b 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,6 +1,7 @@ import { Hero } from "@/components/landing/hero";
import { Header } from "@/components/header";
import { getWaitlistCount } from "@/lib/waitlist";
+import Image from "next/image";
// Force dynamic rendering so waitlist count updates in real-time
export const dynamic = "force-dynamic";
@@ -10,6 +11,13 @@ export default async function Home() { return (
<div>
+ <Image
+ className="fixed top-0 left-0 -z-50 size-full object-cover"
+ src="/landing-page-bg.png"
+ height={1903.5}
+ width={1269}
+ alt="landing-page.bg"
+ />
<Header />
<Hero signupCount={signupCount} />
</div>
diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx new file mode 100644 index 00000000..75a5ae06 --- /dev/null +++ b/apps/web/src/components/editor/audio-waveform.tsx @@ -0,0 +1,115 @@ +import React, { useEffect, useRef, useState } from 'react'; +import WaveSurfer from 'wavesurfer.js'; + +interface AudioWaveformProps { + audioUrl: string; + height?: number; + className?: string; +} + +const AudioWaveform: React.FC<AudioWaveformProps> = ({ + audioUrl, + height = 32, + className = '' +}) => { + const waveformRef = useRef<HTMLDivElement>(null); + const wavesurfer = useRef<WaveSurfer | null>(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(false); + + useEffect(() => { + let mounted = true; + + const initWaveSurfer = async () => { + if (!waveformRef.current || !audioUrl) return; + + try { + // Clean up any existing instance + if (wavesurfer.current) { + try { + wavesurfer.current.destroy(); + } catch (e) { + // Silently ignore destroy errors + } + wavesurfer.current = null; + } + + wavesurfer.current = WaveSurfer.create({ + container: waveformRef.current, + waveColor: 'rgba(255, 255, 255, 0.6)', + progressColor: 'rgba(255, 255, 255, 0.9)', + cursorColor: 'transparent', + barWidth: 2, + barGap: 1, + height: height, + normalize: true, + interact: false, + }); + + // Event listeners + wavesurfer.current.on('ready', () => { + if (mounted) { + setIsLoading(false); + setError(false); + } + }); + + wavesurfer.current.on('error', (err) => { + console.error('WaveSurfer error:', err); + if (mounted) { + setError(true); + setIsLoading(false); + } + }); + + await wavesurfer.current.load(audioUrl); + + } catch (err) { + console.error('Failed to initialize WaveSurfer:', err); + if (mounted) { + setError(true); + setIsLoading(false); + } + } + }; + + initWaveSurfer(); + + return () => { + mounted = false; + if (wavesurfer.current) { + try { + wavesurfer.current.destroy(); + } catch (e) { + // Silently ignore destroy errors + } + wavesurfer.current = null; + } + }; + }, [audioUrl, height]); + + if (error) { + return ( + <div className={`flex items-center justify-center ${className}`} style={{ height }}> + <span className="text-xs text-foreground/60">Audio unavailable</span> + </div> + ); + } + + return ( + <div className={`relative ${className}`}> + {isLoading && ( + <div className="absolute inset-0 flex items-center justify-center"> + <span className="text-xs text-foreground/60">Loading...</span> + </div> + )} + <div + ref={waveformRef} + className={`w-full transition-opacity duration-200 ${isLoading ? 'opacity-0' : 'opacity-100'}`} + style={{ height }} + /> + </div> + ); +}; + +export default AudioWaveform;
\ No newline at end of file diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx index 95cfa0a8..cdd67a86 100644 --- a/apps/web/src/components/editor/media-panel.tsx +++ b/apps/web/src/components/editor/media-panel.tsx @@ -17,27 +17,28 @@ export function MediaPanel() { const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore(); const fileInputRef = useRef<HTMLInputElement>(null); const [isProcessing, setIsProcessing] = useState(false); + const [progress, setProgress] = useState(0); const [searchQuery, setSearchQuery] = useState(""); const [mediaFilter, setMediaFilter] = useState("all"); const processFiles = async (files: FileList | File[]) => { - // If no files, do nothing - if (!files?.length) return; - + if (!files || files.length === 0) return; setIsProcessing(true); + setProgress(0); try { // Process files (extract metadata, generate thumbnails, etc.) - const items = await processMediaFiles(files); + const processedItems = await processMediaFiles(files, (p) => + setProgress(p) + ); // Add each processed media item to the store - items.forEach((item) => { - addMediaItem(item); - }); + processedItems.forEach((item) => addMediaItem(item)); } catch (error) { - // Show error if processing fails - console.error("File processing failed:", error); + // Show error toast if processing fails + console.error("Error processing files:", error); toast.error("Failed to process files"); } finally { setIsProcessing(false); + setProgress(0); } }; @@ -84,17 +85,20 @@ export function MediaPanel() { useEffect(() => { const filtered = mediaItems.filter((item) => { - if (mediaFilter && mediaFilter !== 'all' && item.type !== mediaFilter) { + if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) { return false; } - - if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) { + + if ( + searchQuery && + !item.name.toLowerCase().includes(searchQuery.toLowerCase()) + ) { return false; } - + return true; }); - + setFilteredMediaItems(filtered); }, [mediaItems, mediaFilter, searchQuery]); @@ -209,23 +213,23 @@ export function MediaPanel() { {/* Button to add/upload media */} <div className="flex gap-2"> {/* Search and filter controls */} - <select - value={mediaFilter} - onChange={(e) => setMediaFilter(e.target.value)} - className="px-2 py-1 text-xs border rounded bg-background" - > - <option value="all">All</option> - <option value="video">Video</option> - <option value="audio">Audio</option> - <option value="image">Image</option> - </select> - <input - type="text" - placeholder="Search media..." - className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background" - value={searchQuery} - onChange={(e) => setSearchQuery(e.target.value)} - /> + <select + value={mediaFilter} + onChange={(e) => setMediaFilter(e.target.value)} + className="px-2 py-1 text-xs border rounded bg-background" + > + <option value="all">All</option> + <option value="video">Video</option> + <option value="audio">Audio</option> + <option value="image">Image</option> + </select> + <input + type="text" + placeholder="Search media..." + className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background" + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} + /> {/* Add media button */} <Button @@ -233,21 +237,23 @@ export function MediaPanel() { size="sm" onClick={handleFileSelect} disabled={isProcessing} - className="flex-none min-w-[80px] whitespace-nowrap" + className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center" > {isProcessing ? ( <> - <Upload className="h-4 w-4 mr-2 animate-spin" /> - Processing... + <Upload className="h-4 w-4 animate-spin" /> + <span className="hidden md:inline ml-2">{progress}%</span> </> ) : ( <> <Plus className="h-4 w-4" /> - Add + <span className="hidden sm:inline ml-2" aria-label="Add file"> + Add + </span> </> )} </Button> - </div> + </div> </div> <div className="flex-1 overflow-y-auto p-2"> @@ -276,7 +282,15 @@ export function MediaPanel() { <AspectRatio ratio={item.aspectRatio}> {renderPreview(item)} </AspectRatio> - <span className="text-xs truncate px-1">{item.name}</span> + <span + className="text-xs truncate px-1 max-w-full" + aria-label={item.name} + title={item.name} + > + {item.name.length > 8 + ? `${item.name.slice(0, 4)}...${item.name.slice(-3)}` + : item.name} + </span> </Button> {/* Show remove button on hover */} diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 624a549e..33bfe688 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -5,16 +5,17 @@ import { useMediaStore } from "@/stores/media-store"; import { usePlaybackStore } from "@/stores/playback-store";
import { VideoPlayer } from "@/components/ui/video-player";
import { Button } from "@/components/ui/button";
-import { Play, Pause } from "lucide-react";
+import { Play, Pause, Volume2, VolumeX } from "lucide-react";
import { useState, useRef } from "react";
// Debug flag - set to false to hide active clips info
-const SHOW_DEBUG_INFO = process.env.NODE_ENV === 'development';
+const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";
export function PreviewPanel() {
const { tracks } = useTimelineStore();
const { mediaItems } = useMediaStore();
- const { isPlaying, toggle, currentTime } = usePlaybackStore();
+ const { isPlaying, toggle, currentTime, muted, toggleMute, volume } =
+ usePlaybackStore();
const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);
const previewRef = useRef<HTMLDivElement>(null);
@@ -30,12 +31,14 @@ export function PreviewPanel() { tracks.forEach((track) => {
track.clips.forEach((clip) => {
const clipStart = clip.startTime;
- const clipEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+ const clipEnd =
+ clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
if (currentTime >= clipStart && currentTime < clipEnd) {
- const mediaItem = clip.mediaId === "test"
- ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }
- : mediaItems.find((item) => item.id === clip.mediaId);
+ const mediaItem =
+ clip.mediaId === "test"
+ ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }
+ : mediaItems.find((item) => item.id === clip.mediaId);
if (mediaItem || clip.mediaId === "test") {
activeClips.push({ clip, track, mediaItem });
@@ -134,13 +137,19 @@ export function PreviewPanel() { <select
value={`${canvasSize.width}x${canvasSize.height}`}
onChange={(e) => {
- const preset = canvasPresets.find(p => `${p.width}x${p.height}` === e.target.value);
- if (preset) setCanvasSize({ width: preset.width, height: preset.height });
+ const preset = canvasPresets.find(
+ (p) => `${p.width}x${p.height}` === e.target.value
+ );
+ if (preset)
+ setCanvasSize({ width: preset.width, height: preset.height });
}}
className="bg-background border rounded px-2 py-1 text-xs"
>
- {canvasPresets.map(preset => (
- <option key={preset.name} value={`${preset.width}x${preset.height}`}>
+ {canvasPresets.map((preset) => (
+ <option
+ key={preset.name}
+ value={`${preset.width}x${preset.height}`}
+ >
{preset.name} ({preset.width}×{preset.height})
</option>
))}
@@ -154,12 +163,30 @@ export function PreviewPanel() { onClick={() => setShowDebug(!showDebug)}
className="text-xs"
>
- Debug {showDebug ? 'ON' : 'OFF'}
+ Debug {showDebug ? "ON" : "OFF"}
</Button>
)}
- <Button variant="outline" size="sm" onClick={toggle} className="ml-auto">
- {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={toggleMute}
+ className="ml-auto"
+ >
+ {muted || volume === 0 ? (
+ <VolumeX className="h-3 w-3 mr-1" />
+ ) : (
+ <Volume2 className="h-3 w-3 mr-1" />
+ )}
+ {muted || volume === 0 ? "Unmute" : "Mute"}
+ </Button>
+
+ <Button variant="outline" size="sm" onClick={toggle}>
+ {isPlaying ? (
+ <Pause className="h-3 w-3 mr-1" />
+ ) : (
+ <Play className="h-3 w-3 mr-1" />
+ )}
{isPlaying ? "Pause" : "Play"}
</Button>
</div>
@@ -177,7 +204,9 @@ export function PreviewPanel() { >
{activeClips.length === 0 ? (
<div className="absolute inset-0 flex items-center justify-center text-white/50">
- {tracks.length === 0 ? "Drop media to start editing" : "No clips at current time"}
+ {tracks.length === 0
+ ? "Drop media to start editing"
+ : "No clips at current time"}
</div>
) : (
activeClips.map((clipData, index) => renderClip(clipData, index))
@@ -188,7 +217,9 @@ export function PreviewPanel() { {/* Debug Info Panel - Conditionally rendered */}
{showDebug && (
<div className="border-t bg-background p-2 flex-shrink-0">
- <div className="text-xs font-medium mb-1">Debug: Active Clips ({activeClips.length})</div>
+ <div className="text-xs font-medium mb-1">
+ Debug: Active Clips ({activeClips.length})
+ </div>
<div className="flex gap-2 overflow-x-auto">
{activeClips.map((clipData, index) => (
<div
@@ -199,7 +230,9 @@ export function PreviewPanel() { {index + 1}
</span>
<span>{clipData.clip.name}</span>
- <span className="text-muted-foreground">({clipData.mediaItem?.type || 'test'})</span>
+ <span className="text-muted-foreground">
+ ({clipData.mediaItem?.type || "test"})
+ </span>
</div>
))}
{activeClips.length === 0 && (
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index ce0ffa30..584a45f7 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -35,6 +35,7 @@ import { SelectTrigger,
SelectValue,
} from "../ui/select";
+import AudioWaveform from "./audio-waveform";
export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips.
@@ -68,6 +69,7 @@ export function Timeline() { } = usePlaybackStore();
const [isDragOver, setIsDragOver] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
+ const [progress, setProgress] = useState(0);
const [zoomLevel, setZoomLevel] = useState(1);
const dragCounterRef = useRef(0);
const timelineRef = useRef<HTMLDivElement>(null);
@@ -333,8 +335,12 @@ export function Timeline() { } else if (e.dataTransfer.files?.length > 0) {
// Handle file drops by creating new tracks
setIsProcessing(true);
+ setProgress(0);
try {
- const processedItems = await processMediaFiles(e.dataTransfer.files);
+ const processedItems = await processMediaFiles(
+ e.dataTransfer.files,
+ (p) => setProgress(p)
+ );
for (const processedItem of processedItems) {
addMediaItem(processedItem);
const currentMediaItems = useMediaStore.getState().mediaItems;
@@ -362,6 +368,7 @@ export function Timeline() { toast.error("Failed to process dropped files");
} finally {
setIsProcessing(false);
+ setProgress(0);
}
}
};
@@ -566,15 +573,6 @@ export function Timeline() { onMouseLeave={() => setIsInTimeline(false)}
onWheel={handleWheel}
>
- {/* Show overlay when dragging media over the timeline */}
- {isDragOver && (
- <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">
- <div>
- Drop media here to add to timeline
- </div>
- </div>
- )}
-
{/* Toolbar */}
<div className="border-b flex items-center px-2 py-1 gap-1">
<TooltipProvider delayDuration={500}>
@@ -602,10 +600,11 @@ export function Timeline() { <div className="w-px h-6 bg-border mx-1" />
{/* Time Display */}
- <div className="text-xs text-muted-foreground font-mono px-2"
- style={{ minWidth: '18ch', textAlign: 'center' }}
- >
- {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+ <div
+ className="text-xs text-muted-foreground font-mono px-2"
+ style={{ minWidth: "18ch", textAlign: "center" }}
+ >
+ {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
</div>
{/* Test Clip Button - for debugging */}
@@ -953,6 +952,15 @@ export function Timeline() { )}
</>
)}
+ {isDragOver && (
+ <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">
+ <div>
+ {isProcessing
+ ? `Processing ${progress}%`
+ : "Drop media here to add to timeline"}
+ </div>
+ </div>
+ )}
</div>
</div>
</div>
@@ -1233,7 +1241,18 @@ function TimelineTrackContent({ };
const handleClipDragStart = (e: React.DragEvent, clip: any) => {
- const dragData = { clipId: clip.id, trackId: track.id, name: clip.name };
+ // Calculate the offset from the left edge of the clip to where the user clicked
+ const clipElement = e.currentTarget.parentElement as HTMLElement;
+ const clipRect = clipElement.getBoundingClientRect();
+ const clickOffsetX = e.clientX - clipRect.left;
+ const clickOffsetTime = clickOffsetX / (50 * zoomLevel);
+
+ const dragData = {
+ clipId: clip.id,
+ trackId: track.id,
+ name: clip.name,
+ clickOffsetTime: clickOffsetTime,
+ };
e.dataTransfer.setData(
"application/x-timeline-clip",
@@ -1459,7 +1478,11 @@ function TimelineTrackContent({ );
if (!timelineClipData) return;
- const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData);
+ const {
+ clipId,
+ trackId: fromTrackId,
+ clickOffsetTime = 0,
+ } = JSON.parse(timelineClipData);
// Find the clip being moved
const sourceTrack = tracks.find(
@@ -1472,10 +1495,17 @@ function TimelineTrackContent({ return;
}
+ // Adjust position based on where user clicked on the clip
+ const adjustedStartTime = snappedTime - clickOffsetTime;
+ const finalStartTime = Math.max(
+ 0,
+ Math.round(adjustedStartTime * 10) / 10
+ );
+
// Check for overlaps with existing clips (excluding the moving clip itself)
const movingClipDuration =
movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
- const movingClipEnd = snappedTime + movingClipDuration;
+ const movingClipEnd = finalStartTime + movingClipDuration;
const hasOverlap = track.clips.some((existingClip) => {
// Skip the clip being moved if it's on the same track
@@ -1490,7 +1520,7 @@ function TimelineTrackContent({ existingClip.trimEnd);
// Check if clips overlap
- return snappedTime < existingEnd && movingClipEnd > existingStart;
+ return finalStartTime < existingEnd && movingClipEnd > existingStart;
});
if (hasOverlap) {
@@ -1502,12 +1532,12 @@ function TimelineTrackContent({ if (fromTrackId === track.id) {
// Moving within same track
- updateClipStartTime(track.id, clipId, snappedTime);
+ updateClipStartTime(track.id, clipId, finalStartTime);
} else {
// Moving to different track
moveClipToTrack(fromTrackId, track.id, clipId);
requestAnimationFrame(() => {
- updateClipStartTime(track.id, clipId, snappedTime);
+ updateClipStartTime(track.id, clipId, finalStartTime);
});
}
} else if (hasMediaItem) {
@@ -1604,6 +1634,7 @@ function TimelineTrackContent({ src={mediaItem.url}
alt={mediaItem.name}
className="w-full h-full object-cover"
+ draggable={false}
/>
</div>
);
@@ -1617,6 +1648,7 @@ function TimelineTrackContent({ src={mediaItem.thumbnailUrl}
alt={mediaItem.name}
className="w-full h-full object-cover rounded-sm"
+ draggable={false}
/>
</div>
<span className="text-xs text-foreground/80 truncate flex-1">
@@ -1626,7 +1658,21 @@ function TimelineTrackContent({ );
}
- // Fallback for audio or videos without thumbnails
+ if (mediaItem.type === "audio") {
+ return (
+ <div className="w-full h-full flex items-center gap-2">
+ <div className="flex-1 min-w-0">
+ <AudioWaveform
+ audioUrl={mediaItem.url}
+ height={24}
+ className="w-full"
+ />
+ </div>
+ </div>
+ );
+ }
+
+ // Fallback for videos without thumbnails
return (
<span className="text-xs text-foreground/80 truncate">{clip.name}</span>
);
@@ -1662,13 +1708,7 @@ function TimelineTrackContent({ return (
<div
- className={`w-full h-full transition-all duration-150 ease-out ${
- isDraggedOver
- ? wouldOverlap
- ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
- : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
- : "hover:bg-muted/20"
- }`}
+ className="w-full h-full hover:bg-muted/20"
onContextMenu={(e) => {
e.preventDefault();
// Only show track menu if we didn't click on a clip
@@ -1722,7 +1762,7 @@ function TimelineTrackContent({ return (
<div
key={clip.id}
- className={`timeline-clip absolute h-full border transition-all duration-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}
+ className={`timeline-clip absolute h-full border ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}
style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
onClick={(e) => {
e.stopPropagation();
@@ -1813,30 +1853,6 @@ function TimelineTrackContent({ </div>
);
})}
-
- {/* Drop position indicator */}
- {isDraggedOver && dropPosition !== null && (
- <div
- className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
- style={{
- left: `${dropPosition * 50 * zoomLevel}px`,
- transform: "translateX(-50%)",
- }}
- >
- <div
- className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
- />
- <div
- className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
- />
- <div
- className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
- >
- {wouldOverlap ? "⚠️" : ""}
- {dropPosition.toFixed(1)}s
- </div>
- </div>
- )}
</>
)}
</div>
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index 27503cd0..74ba9359 100644 --- a/apps/web/src/components/header.tsx +++ b/apps/web/src/components/header.tsx @@ -29,8 +29,7 @@ export function Header() { const leftContent = (
<Link href="/" className="flex items-center gap-3">
- <Image src="/logo.png" alt="OpenCut Logo" width={24} height={24} />
- <span className="font-medium tracking-tight">OpenCut</span>
+ <Image src="/logo.svg" alt="OpenCut Logo" width={142} height={32} />
</Link>
);
@@ -51,7 +50,7 @@ export function Header() { ) : (
<Link href="https://github.com/OpenCut-app/OpenCut" target="_blank">
<Button size="sm" className="text-sm ml-4">
- GitHub
+ GitHub {star}+
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
@@ -59,5 +58,11 @@ export function Header() { </nav>
);
- return <HeaderBase leftContent={leftContent} rightContent={rightContent} />;
+ return (
+ <HeaderBase
+ className="bg-[#1D1D1D] border border-white/10 rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
+ leftContent={leftContent}
+ rightContent={rightContent}
+ />
+ );
}
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 7b4588c8..af33a3dd 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -8,6 +8,7 @@ import Link from "next/link"; import { useEffect, useState } from "react";
import { useToast } from "@/hooks/use-toast";
import { getStars } from "@/lib/fetchGhStars";
+import Image from "next/image";
interface HeroProps {
signupCount: number;
@@ -82,7 +83,7 @@ export function Hero({ signupCount }: HeroProps) { };
return (
- <div className="min-h-[calc(100vh-4rem)] flex flex-col justify-between items-center text-center px-4">
+ <div className="min-h-[calc(100vh-6rem)] flex flex-col justify-between items-center text-center px-4">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
@@ -93,14 +94,23 @@ export function Hero({ signupCount }: HeroProps) { initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.8 }}
- className="inline-block"
+ className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]"
>
- <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter">
- The open source
- </h1>
- <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">
- video editor
- </h1>
+ <h1>The open source</h1>
+ <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
+ <div className="relative -rotate-[2.76deg] max-w-[250px] md:max-w-[454px] mt-2">
+ <Image
+ className="mt-2.5 md:mt-0"
+ src="/frame.svg"
+ height={79}
+ width={459}
+ alt="frame"
+ />
+ <span className="absolute inset-0 flex items-center justify-center">
+ Video Editor
+ </span>
+ </div>
+ </div>
</motion.div>
<motion.p
@@ -119,7 +129,7 @@ export function Hero({ signupCount }: HeroProps) { animate={{ opacity: 1 }}
transition={{ delay: 0.6, duration: 0.8 }}
>
- <form onSubmit={handleSubmit} className="flex gap-3 w-full max-w-lg">
+ <form onSubmit={handleSubmit} className="flex gap-3 w-full max-w-lg flex-col sm:flex-row">
<Input
type="email"
placeholder="Enter your email"
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx index 32a12916..d8a72e40 100644 --- a/apps/web/src/components/ui/video-player.tsx +++ b/apps/web/src/components/ui/video-player.tsx @@ -4,108 +4,128 @@ import { useRef, useEffect } from "react"; import { usePlaybackStore } from "@/stores/playback-store"; interface VideoPlayerProps { - src: string; - poster?: string; - className?: string; - clipStartTime: number; - trimStart: number; - trimEnd: number; - clipDuration: number; + src: string; + poster?: string; + className?: string; + clipStartTime: number; + trimStart: number; + trimEnd: number; + clipDuration: number; } export function VideoPlayer({ - src, - poster, - className = "", - clipStartTime, - trimStart, - trimEnd, - clipDuration + src, + poster, + className = "", + clipStartTime, + trimStart, + trimEnd, + clipDuration, }: VideoPlayerProps) { - const videoRef = useRef<HTMLVideoElement>(null); - const { isPlaying, currentTime, volume, speed } = usePlaybackStore(); + const videoRef = useRef<HTMLVideoElement>(null); + const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore(); - // Calculate if we're within this clip's timeline range - const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd); - const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime; + // Calculate if we're within this clip's timeline range + const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd); + const isInClipRange = + currentTime >= clipStartTime && currentTime < clipEndTime; - // Sync playback events - useEffect(() => { - const video = videoRef.current; - if (!video || !isInClipRange) return; + // Sync playback events + useEffect(() => { + const video = videoRef.current; + if (!video || !isInClipRange) return; - const handleSeekEvent = (e: CustomEvent) => { - // Always update video time, even if outside clip range - const timelineTime = e.detail.time; - const videoTime = Math.max(trimStart, Math.min( - clipDuration - trimEnd, - timelineTime - clipStartTime + trimStart - )); - video.currentTime = videoTime; - }; + const handleSeekEvent = (e: CustomEvent) => { + // Always update video time, even if outside clip range + const timelineTime = e.detail.time; + const videoTime = Math.max( + trimStart, + Math.min( + clipDuration - trimEnd, + timelineTime - clipStartTime + trimStart + ) + ); + video.currentTime = videoTime; + }; - const handleUpdateEvent = (e: CustomEvent) => { - // Always update video time, even if outside clip range - const timelineTime = e.detail.time; - const targetTime = Math.max(trimStart, Math.min( - clipDuration - trimEnd, - timelineTime - clipStartTime + trimStart - )); + const handleUpdateEvent = (e: CustomEvent) => { + // Always update video time, even if outside clip range + const timelineTime = e.detail.time; + const targetTime = Math.max( + trimStart, + Math.min( + clipDuration - trimEnd, + timelineTime - clipStartTime + trimStart + ) + ); - if (Math.abs(video.currentTime - targetTime) > 0.5) { - video.currentTime = targetTime; - } - }; + if (Math.abs(video.currentTime - targetTime) > 0.5) { + video.currentTime = targetTime; + } + }; - const handleSpeed = (e: CustomEvent) => { - video.playbackRate = e.detail.speed; - }; + const handleSpeed = (e: CustomEvent) => { + video.playbackRate = e.detail.speed; + }; - window.addEventListener("playback-seek", handleSeekEvent as EventListener); - window.addEventListener("playback-update", handleUpdateEvent as EventListener); - window.addEventListener("playback-speed", handleSpeed as EventListener); + window.addEventListener("playback-seek", handleSeekEvent as EventListener); + window.addEventListener( + "playback-update", + handleUpdateEvent as EventListener + ); + window.addEventListener("playback-speed", handleSpeed as EventListener); - return () => { - window.removeEventListener("playback-seek", handleSeekEvent as EventListener); - window.removeEventListener("playback-update", handleUpdateEvent as EventListener); - window.removeEventListener("playback-speed", handleSpeed as EventListener); - }; - }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]); + return () => { + window.removeEventListener( + "playback-seek", + handleSeekEvent as EventListener + ); + window.removeEventListener( + "playback-update", + handleUpdateEvent as EventListener + ); + window.removeEventListener( + "playback-speed", + handleSpeed as EventListener + ); + }; + }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]); - // Sync playback state - useEffect(() => { - const video = videoRef.current; - if (!video) return; + // Sync playback state + useEffect(() => { + const video = videoRef.current; + if (!video) return; - if (isPlaying && isInClipRange) { - video.play().catch(() => { }); - } else { - video.pause(); - } - }, [isPlaying, isInClipRange]); + if (isPlaying && isInClipRange) { + video.play().catch(() => {}); + } else { + video.pause(); + } + }, [isPlaying, isInClipRange]); - // Sync volume and speed - useEffect(() => { - const video = videoRef.current; - if (!video) return; + // Sync volume and speed + useEffect(() => { + const video = videoRef.current; + if (!video) return; - video.volume = volume; - video.playbackRate = speed; - }, [volume, speed]); + video.volume = volume; + video.muted = muted; + video.playbackRate = speed; + }, [volume, speed, muted]); - return ( - <video - ref={videoRef} - src={src} - poster={poster} - className={`w-full h-full object-cover ${className}`} - playsInline - preload="auto" - controls={false} - disablePictureInPicture - disableRemotePlayback - style={{ pointerEvents: 'none' }} - onContextMenu={(e) => e.preventDefault()} - /> - ); -}
\ No newline at end of file + return ( + <video + ref={videoRef} + src={src} + poster={poster} + className={`w-full h-full object-cover ${className}`} + playsInline + preload="auto" + controls={false} + disablePictureInPicture + disableRemotePlayback + style={{ pointerEvents: "none" }} + onContextMenu={(e) => e.preventDefault()} + /> + ); +} diff --git a/apps/web/src/lib/media-processing.ts b/apps/web/src/lib/media-processing.ts index d241f411..daf22b34 100644 --- a/apps/web/src/lib/media-processing.ts +++ b/apps/web/src/lib/media-processing.ts @@ -11,11 +11,15 @@ import { export interface ProcessedMediaItem extends Omit<MediaItem, "id"> {}
export async function processMediaFiles(
- files: FileList | File[]
+ files: FileList | File[],
+ onProgress?: (progress: number) => void
): Promise<ProcessedMediaItem[]> {
const fileArray = Array.from(files);
const processedItems: ProcessedMediaItem[] = [];
+ const total = fileArray.length;
+ let completed = 0;
+
for (const file of fileArray) {
const fileType = getFileType(file);
@@ -57,6 +61,15 @@ export async function processMediaFiles( duration,
aspectRatio,
});
+
+ // Yield back to the event loop to keep the UI responsive
+ await new Promise((resolve) => setTimeout(resolve, 0));
+
+ completed += 1;
+ if (onProgress) {
+ const percent = Math.round((completed / total) * 100);
+ onProgress(percent);
+ }
} catch (error) {
console.error("Error processing file:", file.name, error);
toast.error(`Failed to process ${file.name}`);
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts index a4794b7f..0cc01cc1 100644 --- a/apps/web/src/stores/playback-store.ts +++ b/apps/web/src/stores/playback-store.ts @@ -10,7 +10,7 @@ let playbackTimer: number | null = null; const startTimer = (store: any) => { if (playbackTimer) cancelAnimationFrame(playbackTimer); - + // Use requestAnimationFrame for smoother updates const updateTime = () => { const state = store(); @@ -18,14 +18,22 @@ const startTimer = (store: any) => { const now = performance.now(); const delta = (now - lastUpdate) / 1000; // Convert to seconds lastUpdate = now; - - const newTime = state.currentTime + (delta * state.speed); + + const newTime = state.currentTime + delta * state.speed; if (newTime >= state.duration) { + // When video completes, pause and reset playhead to start state.pause(); + state.setCurrentTime(0); + // Notify video elements to sync with reset + window.dispatchEvent( + new CustomEvent("playback-seek", { detail: { time: 0 } }) + ); } else { state.setCurrentTime(newTime); // Notify video elements to sync - window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } })); + window.dispatchEvent( + new CustomEvent("playback-update", { detail: { time: newTime } }) + ); } } playbackTimer = requestAnimationFrame(updateTime); @@ -47,6 +55,8 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({ currentTime: 0, duration: 0, volume: 1, + muted: false, + previousVolume: 1, speed: 1.0, play: () => { @@ -72,22 +82,53 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({ const { duration } = get(); const clampedTime = Math.max(0, Math.min(duration, time)); set({ currentTime: clampedTime }); - - // Notify video elements to seek - const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } }); + + const event = new CustomEvent("playback-seek", { + detail: { time: clampedTime }, + }); window.dispatchEvent(event); }, - - setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }), - + + setVolume: (volume: number) => + set((state) => ({ + volume: Math.max(0, Math.min(1, volume)), + muted: volume === 0, + previousVolume: volume > 0 ? volume : state.previousVolume, + })), + setSpeed: (speed: number) => { const newSpeed = Math.max(0.1, Math.min(2.0, speed)); set({ speed: newSpeed }); - - const event = new CustomEvent('playback-speed', { detail: { speed: newSpeed } }); + + const event = new CustomEvent("playback-speed", { + detail: { speed: newSpeed }, + }); window.dispatchEvent(event); }, setDuration: (duration: number) => set({ duration }), setCurrentTime: (time: number) => set({ currentTime: time }), -}));
\ No newline at end of file + + mute: () => { + const { volume, previousVolume } = get(); + set({ + muted: true, + previousVolume: volume > 0 ? volume : previousVolume, + volume: 0, + }); + }, + + unmute: () => { + const { previousVolume } = get(); + set({ muted: false, volume: previousVolume ?? 1 }); + }, + + toggleMute: () => { + const { muted } = get(); + if (muted) { + get().unmute(); + } else { + get().mute(); + } + }, +})); diff --git a/apps/web/src/types/playback.ts b/apps/web/src/types/playback.ts index 3fbd1a02..8758ea03 100644 --- a/apps/web/src/types/playback.ts +++ b/apps/web/src/types/playback.ts @@ -4,6 +4,8 @@ export interface PlaybackState { duration: number; volume: number; speed: number; + muted: boolean; + previousVolume?: number; } export interface PlaybackControls { @@ -13,4 +15,7 @@ export interface PlaybackControls { setVolume: (volume: number) => void; setSpeed: (speed: number) => void; toggle: () => void; -}
\ No newline at end of file + mute: () => void; + unmute: () => void; + toggleMute: () => void; +} |
