diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/Dockerfile | 36 | ||||
| -rw-r--r-- | apps/web/bun.lock | 1 | ||||
| -rwxr-xr-x | apps/web/bun.lockb | bin | 0 -> 185948 bytes | |||
| -rw-r--r-- | apps/web/package.json | 3 | ||||
| -rw-r--r-- | apps/web/public/logo.png | bin | 7088 -> 1789 bytes | |||
| -rw-r--r-- | apps/web/src/app/favicon.ico | bin | 4286 -> 4286 bytes | |||
| -rw-r--r-- | apps/web/src/components/auth-form.tsx | 398 | ||||
| -rw-r--r-- | apps/web/src/components/editor/properties-panel.tsx | 1 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 24 | ||||
| -rw-r--r-- | apps/web/src/components/landing/hero.tsx | 4 |
10 files changed, 460 insertions, 7 deletions
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile new file mode 100644 index 00000000..ca1f0987 --- /dev/null +++ b/apps/web/Dockerfile @@ -0,0 +1,36 @@ +FROM oven/bun:latest AS base
+
+# Install dependencies
+FROM base AS deps
+WORKDIR /app
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+
+# Build the application
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN bun run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["bun", "server.js"]
\ No newline at end of file diff --git a/apps/web/bun.lock b/apps/web/bun.lock index 141e7db9..3aba7158 100644 --- a/apps/web/bun.lock +++ b/apps/web/bun.lock @@ -41,6 +41,7 @@ "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.1", + "zod": "^3.25.67", "zustand": "^5.0.2", }, "devDependencies": { diff --git a/apps/web/bun.lockb b/apps/web/bun.lockb Binary files differnew file mode 100755 index 00000000..30e5a2f5 --- /dev/null +++ b/apps/web/bun.lockb diff --git a/apps/web/package.json b/apps/web/package.json index 581aa023..0a2aa202 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -2,7 +2,7 @@ "name": "next-template", "version": "0.1.0", "private": true, - "packageManager": "bun@1.2.2", + "packageManager": "bun@1.2.2", "scripts": { "dev": "next dev --turbopack", "build": "next build", @@ -51,6 +51,7 @@ "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.1", + "zod": "^3.25.67", "zustand": "^5.0.2" }, "devDependencies": { diff --git a/apps/web/public/logo.png b/apps/web/public/logo.png Binary files differindex a0af7a14..fc9e7902 100644 --- a/apps/web/public/logo.png +++ b/apps/web/public/logo.png diff --git a/apps/web/src/app/favicon.ico b/apps/web/src/app/favicon.ico Binary files differindex 66b4ee0f..cb20127b 100644 --- a/apps/web/src/app/favicon.ico +++ b/apps/web/src/app/favicon.ico diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx new file mode 100644 index 00000000..3dd56036 --- /dev/null +++ b/apps/web/src/components/auth-form.tsx @@ -0,0 +1,398 @@ +"use client";
+
+import { useRouter } from "next/navigation";
+import { signUp, signIn } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import Link from "next/link";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { GoogleIcon } from "@/components/icons";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+
+// Zod schemas
+const loginSchema = z.object({
+ email: z.string().email("Please enter a valid email address"),
+ password: z.string().min(1, "Password is required"),
+});
+
+const signupSchema = z.object({
+ name: z.string().min(2, "Name must be at least 2 characters"),
+ email: z.string().email("Please enter a valid email address"),
+ password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+type SignupFormData = z.infer<typeof signupSchema>;
+
+interface AuthFormProps {
+ mode: "login" | "signup";
+}
+
+const authConfig = {
+ login: {
+ title: "Welcome back",
+ description: "Sign in to your account to continue",
+ buttonText: "Sign in",
+ linkText: "Don't have an account?",
+ linkHref: "/signup",
+ linkLabel: "Sign up",
+ successRedirect: "/editor",
+ },
+ signup: {
+ title: "Create your account",
+ description: "Get started with your free account today",
+ buttonText: "Create account",
+ linkText: "Already have an account?",
+ linkHref: "/login",
+ linkLabel: "Sign in",
+ successRedirect: "/login",
+ },
+} as const;
+
+interface AuthFormContentProps {
+ error: string | null;
+ setError: (error: string | null) => void;
+ isGoogleLoading: boolean;
+ config: typeof authConfig.login | typeof authConfig.signup;
+ router: ReturnType<typeof useRouter>;
+}
+
+function LoginFormContent({
+ error,
+ setError,
+ isGoogleLoading,
+ config,
+ router,
+}: AuthFormContentProps) {
+ const form = useForm<LoginFormData>({
+ resolver: zodResolver(loginSchema),
+ defaultValues: { email: "", password: "" },
+ });
+
+ const { isSubmitting } = form.formState;
+ const isAnyLoading = isSubmitting || isGoogleLoading;
+
+ const onSubmit = async (data: LoginFormData) => {
+ setError(null);
+
+ try {
+ const { error } = await signIn.email({
+ email: data.email,
+ password: data.password,
+ });
+
+ if (error) {
+ setError(error.message || "An unexpected error occurred.");
+ return;
+ }
+
+ router.push(config.successRedirect);
+ } catch (error) {
+ setError("An unexpected error occurred. Please try again.");
+ }
+ };
+
+ return (
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+ <FormField
+ control={form.control}
+ name="email"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input
+ type="email"
+ placeholder="m@example.com"
+ disabled={isAnyLoading}
+ className="h-11"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="password"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ disabled={isAnyLoading}
+ className="h-11"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <Button
+ type="submit"
+ disabled={isAnyLoading}
+ className="w-full h-11"
+ size="lg"
+ >
+ {isSubmitting ? (
+ <Loader2 className="animate-spin" />
+ ) : (
+ config.buttonText
+ )}
+ </Button>
+ </form>
+ </Form>
+ );
+}
+
+function SignupFormContent({
+ error,
+ setError,
+ isGoogleLoading,
+ config,
+ router,
+}: AuthFormContentProps) {
+ const form = useForm<SignupFormData>({
+ resolver: zodResolver(signupSchema),
+ defaultValues: { email: "", password: "", name: "" },
+ });
+
+ const { isSubmitting } = form.formState;
+ const isAnyLoading = isSubmitting || isGoogleLoading;
+
+ const onSubmit = async (data: SignupFormData) => {
+ setError(null);
+
+ try {
+ const { error } = await signUp.email({
+ name: data.name,
+ email: data.email,
+ password: data.password,
+ });
+
+ if (error) {
+ setError(error.message || "An unexpected error occurred.");
+ return;
+ }
+
+ router.push(config.successRedirect);
+ } catch (error) {
+ setError("An unexpected error occurred. Please try again.");
+ }
+ };
+
+ return (
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Full Name</FormLabel>
+ <FormControl>
+ <Input
+ placeholder="John Doe"
+ disabled={isAnyLoading}
+ className="h-11"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="email"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input
+ type="email"
+ placeholder="m@example.com"
+ disabled={isAnyLoading}
+ className="h-11"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="password"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ placeholder="Create a strong password"
+ disabled={isAnyLoading}
+ className="h-11"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <Button
+ type="submit"
+ disabled={isAnyLoading}
+ className="w-full h-11"
+ size="lg"
+ >
+ {isSubmitting ? (
+ <Loader2 className="animate-spin" />
+ ) : (
+ config.buttonText
+ )}
+ </Button>
+ </form>
+ </Form>
+ );
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+ const router = useRouter();
+ const [error, setError] = useState<string | null>(null);
+ const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+ const config = authConfig[mode];
+
+ const handleGoogleAuth = async () => {
+ setError(null);
+ setIsGoogleLoading(true);
+
+ try {
+ await signIn.social({
+ provider: "google",
+ });
+
+ router.push(config.successRedirect);
+ } catch (error) {
+ setError(
+ `Failed to ${mode === "login" ? "sign in" : "sign up"} with Google. Please try again.`
+ );
+ setIsGoogleLoading(false);
+ }
+ };
+
+ return (
+ <div className="flex h-screen items-center justify-center relative">
+ <Button
+ variant="ghost"
+ onClick={() => router.back()}
+ className="absolute top-6 left-6"
+ >
+ <ArrowLeft className="h-5 w-5" /> Back
+ </Button>
+
+ <Card className="w-[400px] shadow-lg border-0">
+ <CardHeader className="text-center pb-4">
+ <CardTitle className="text-2xl font-semibold">
+ {config.title}
+ </CardTitle>
+ <CardDescription className="text-base">
+ {config.description}
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="pt-0">
+ <div className="flex flex-col space-y-6">
+ {error && (
+ <Alert variant="destructive">
+ <AlertTitle>Error</AlertTitle>
+ <AlertDescription>{error}</AlertDescription>
+ </Alert>
+ )}
+
+ <Button
+ onClick={handleGoogleAuth}
+ variant="outline"
+ size="lg"
+ disabled={isGoogleLoading}
+ >
+ {isGoogleLoading ? (
+ <Loader2 className="animate-spin" />
+ ) : (
+ <GoogleIcon />
+ )}
+ Continue with Google
+ </Button>
+
+ <div className="relative">
+ <div className="absolute inset-0 flex items-center">
+ <Separator className="w-full" />
+ </div>
+ <div className="relative flex justify-center text-xs uppercase">
+ <span className="bg-background px-2 text-muted-foreground">
+ Or continue with
+ </span>
+ </div>
+ </div>
+
+ {mode === "login" ? (
+ <LoginFormContent
+ error={error}
+ setError={setError}
+ isGoogleLoading={isGoogleLoading}
+ config={config}
+ router={router}
+ />
+ ) : (
+ <SignupFormContent
+ error={error}
+ setError={setError}
+ isGoogleLoading={isGoogleLoading}
+ config={config}
+ router={router}
+ />
+ )}
+ </div>
+
+ <div className="mt-6 text-center text-sm">
+ {config.linkText}{" "}
+ <Link
+ href={config.linkHref}
+ className="font-medium text-primary underline-offset-4 hover:underline"
+ >
+ {config.linkLabel}
+ </Link>
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+ );
+}
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx index 2b211c21..c784dab8 100644 --- a/apps/web/src/components/editor/properties-panel.tsx +++ b/apps/web/src/components/editor/properties-panel.tsx @@ -38,7 +38,6 @@ export function PropertiesPanel() { ? mediaItems.find((item) => item.id === firstVideoClip.mediaId) : null; - // Get the first image clip for preview (simplified) const firstImageClip = tracks .flatMap((track) => track.clips) .find((clip) => { diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 675b398c..9af7a204 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -557,8 +557,26 @@ export function Timeline() { {/* Playhead in ruler */}
<div
- className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
+ className="absolute top-0 bottom-0 w-0.5 bg-red-500 cursor-ew-resize z-1000" // Remove pointer-events-none to allow dragging
style={{ left: `${currentTime * 50 * zoomLevel}px` }}
+ onMouseDown={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const handleMouseMove = (e: MouseEvent) => {
+ const timeline = timelineRef.current; // Get timeline element ref to track the position
+ if (!timeline) return; // If no timeline element, exit
+ const rect = timeline.getBoundingClientRect(); // Get the bounding rect of the timeline element
+ const mouseX = Math.max(0, e.clientX - rect.left); // Calculate the mouse position relative to the timeline element
+ const newTime = mouseX / (50 * zoomLevel); // Calculate the time based on the mouse position
+ seek(newTime); // Set the current time
+ };
+ const handleMouseUp = () => {
+ window.removeEventListener("mousemove", handleMouseMove); // Remove the mousemove event listener
+ window.removeEventListener("mouseup", handleMouseUp); // Remove the mouseup event listener
+ };
+ window.addEventListener("mousemove", handleMouseMove); // Add the mousemove event listener
+ window.addEventListener("mouseup", handleMouseUp); // Add the mouseup event listener
+ }}
>
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
</div>
@@ -670,7 +688,7 @@ export function Timeline() { {/* Playhead for tracks area */}
<div
- className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"
+ className="absolute top-0 w-0.5 bg-red-500 cursor-ew-resize z-20"
style={{
left: `${currentTime * 50 * zoomLevel}px`,
height: `${tracks.length * 60}px`,
@@ -1510,4 +1528,4 @@ function TimelineTrackContent({ </div>
</div>
);
-}
\ No newline at end of file +}
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index f2c70f5d..714d432b 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -84,12 +84,12 @@ export function Hero({ signupCount }: HeroProps) { The open source
</h1>
<h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">
- CapCut alternative.
+ video editor
</h1>
</motion.div>
<motion.p
- className="mt-12 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"
+ className="mt-10 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4, duration: 0.8 }}
|
