so much stuff???
This commit is contained in:
Maze Winther
23
apps/web/drizzle.config.ts
Normal file
23
apps/web/drizzle.config.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import type { Config } from "drizzle-kit";
|
||||||
|
import * as dotenv from "dotenv";
|
||||||
|
|
||||||
|
// Load the right env file based on environment
|
||||||
|
if (process.env.NODE_ENV === "production") {
|
||||||
|
dotenv.config({ path: ".env.production" });
|
||||||
|
} else {
|
||||||
|
dotenv.config({ path: ".env.local" });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!process.env.DATABASE_URL) {
|
||||||
|
throw new Error("DATABASE_URL is not set");
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
schema: "./src/lib/db/schema.ts",
|
||||||
|
dialect: "postgresql",
|
||||||
|
dbCredentials: {
|
||||||
|
url: process.env.DATABASE_URL,
|
||||||
|
},
|
||||||
|
out: "./migrations",
|
||||||
|
strict: process.env.NODE_ENV === "production",
|
||||||
|
} satisfies Config;
|
||||||
54
apps/web/migrations/0000_hot_the_fallen.sql
Normal file
54
apps/web/migrations/0000_hot_the_fallen.sql
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
CREATE TABLE "accounts" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"account_id" text NOT NULL,
|
||||||
|
"provider_id" text NOT NULL,
|
||||||
|
"user_id" text NOT NULL,
|
||||||
|
"access_token" text,
|
||||||
|
"refresh_token" text,
|
||||||
|
"id_token" text,
|
||||||
|
"access_token_expires_at" timestamp,
|
||||||
|
"refresh_token_expires_at" timestamp,
|
||||||
|
"scope" text,
|
||||||
|
"password" text,
|
||||||
|
"created_at" timestamp NOT NULL,
|
||||||
|
"updated_at" timestamp NOT NULL
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
ALTER TABLE "accounts" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
|
||||||
|
CREATE TABLE "sessions" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"expires_at" timestamp NOT NULL,
|
||||||
|
"token" text NOT NULL,
|
||||||
|
"created_at" timestamp NOT NULL,
|
||||||
|
"updated_at" timestamp NOT NULL,
|
||||||
|
"ip_address" text,
|
||||||
|
"user_agent" text,
|
||||||
|
"user_id" text NOT NULL,
|
||||||
|
CONSTRAINT "sessions_token_unique" UNIQUE("token")
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
ALTER TABLE "sessions" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
|
||||||
|
CREATE TABLE "users" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"name" text NOT NULL,
|
||||||
|
"email" text NOT NULL,
|
||||||
|
"email_verified" boolean NOT NULL,
|
||||||
|
"image" text,
|
||||||
|
"created_at" timestamp NOT NULL,
|
||||||
|
"updated_at" timestamp NOT NULL,
|
||||||
|
CONSTRAINT "users_email_unique" UNIQUE("email")
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
ALTER TABLE "users" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
|
||||||
|
CREATE TABLE "verifications" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"identifier" text NOT NULL,
|
||||||
|
"value" text NOT NULL,
|
||||||
|
"expires_at" timestamp NOT NULL,
|
||||||
|
"created_at" timestamp,
|
||||||
|
"updated_at" timestamp
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
ALTER TABLE "verifications" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
|
||||||
|
ALTER TABLE "accounts" ADD CONSTRAINT "accounts_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||||
|
ALTER TABLE "sessions" ADD CONSTRAINT "sessions_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;
|
||||||
319
apps/web/migrations/meta/0000_snapshot.json
Normal file
319
apps/web/migrations/meta/0000_snapshot.json
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
{
|
||||||
|
"id": "4440fb90-cf0e-4cb2-afad-08250ce3dc1e",
|
||||||
|
"prevId": "00000000-0000-0000-0000-000000000000",
|
||||||
|
"version": "7",
|
||||||
|
"dialect": "postgresql",
|
||||||
|
"tables": {
|
||||||
|
"public.accounts": {
|
||||||
|
"name": "accounts",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"account_id": {
|
||||||
|
"name": "account_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"provider_id": {
|
||||||
|
"name": "provider_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"user_id": {
|
||||||
|
"name": "user_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"access_token": {
|
||||||
|
"name": "access_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"refresh_token": {
|
||||||
|
"name": "refresh_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"id_token": {
|
||||||
|
"name": "id_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"access_token_expires_at": {
|
||||||
|
"name": "access_token_expires_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"refresh_token_expires_at": {
|
||||||
|
"name": "refresh_token_expires_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"scope": {
|
||||||
|
"name": "scope",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"password": {
|
||||||
|
"name": "password",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"accounts_user_id_users_id_fk": {
|
||||||
|
"name": "accounts_user_id_users_id_fk",
|
||||||
|
"tableFrom": "accounts",
|
||||||
|
"tableTo": "users",
|
||||||
|
"columnsFrom": [
|
||||||
|
"user_id"
|
||||||
|
],
|
||||||
|
"columnsTo": [
|
||||||
|
"id"
|
||||||
|
],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": true
|
||||||
|
},
|
||||||
|
"public.sessions": {
|
||||||
|
"name": "sessions",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"expires_at": {
|
||||||
|
"name": "expires_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"token": {
|
||||||
|
"name": "token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"ip_address": {
|
||||||
|
"name": "ip_address",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"user_agent": {
|
||||||
|
"name": "user_agent",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"user_id": {
|
||||||
|
"name": "user_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"sessions_user_id_users_id_fk": {
|
||||||
|
"name": "sessions_user_id_users_id_fk",
|
||||||
|
"tableFrom": "sessions",
|
||||||
|
"tableTo": "users",
|
||||||
|
"columnsFrom": [
|
||||||
|
"user_id"
|
||||||
|
],
|
||||||
|
"columnsTo": [
|
||||||
|
"id"
|
||||||
|
],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {
|
||||||
|
"sessions_token_unique": {
|
||||||
|
"name": "sessions_token_unique",
|
||||||
|
"nullsNotDistinct": false,
|
||||||
|
"columns": [
|
||||||
|
"token"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": true
|
||||||
|
},
|
||||||
|
"public.users": {
|
||||||
|
"name": "users",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"name": "name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"name": "email",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"email_verified": {
|
||||||
|
"name": "email_verified",
|
||||||
|
"type": "boolean",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"name": "image",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {
|
||||||
|
"users_email_unique": {
|
||||||
|
"name": "users_email_unique",
|
||||||
|
"nullsNotDistinct": false,
|
||||||
|
"columns": [
|
||||||
|
"email"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": true
|
||||||
|
},
|
||||||
|
"public.verifications": {
|
||||||
|
"name": "verifications",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"identifier": {
|
||||||
|
"name": "identifier",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"value": {
|
||||||
|
"name": "value",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"expires_at": {
|
||||||
|
"name": "expires_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"enums": {},
|
||||||
|
"schemas": {},
|
||||||
|
"sequences": {},
|
||||||
|
"roles": {},
|
||||||
|
"policies": {},
|
||||||
|
"views": {},
|
||||||
|
"_meta": {
|
||||||
|
"columns": {},
|
||||||
|
"schemas": {},
|
||||||
|
"tables": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
apps/web/migrations/meta/_journal.json
Normal file
13
apps/web/migrations/meta/_journal.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"version": "7",
|
||||||
|
"dialect": "postgresql",
|
||||||
|
"entries": [
|
||||||
|
{
|
||||||
|
"idx": 0,
|
||||||
|
"version": "7",
|
||||||
|
"when": 1750581188229,
|
||||||
|
"tag": "0000_hot_the_fallen",
|
||||||
|
"breakpoints": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1149
apps/web/package-lock.json
generated
1149
apps/web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,10 @@
|
|||||||
"dev": "next dev --turbopack",
|
"dev": "next dev --turbopack",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint"
|
"lint": "next lint",
|
||||||
|
"db:generate": "drizzle-kit generate",
|
||||||
|
"db:push:local": "cross-env NODE_ENV=development drizzle-kit push",
|
||||||
|
"db:push:prod": "cross-env NODE_ENV=production drizzle-kit push"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^3.9.1",
|
"@hookform/resolvers": "^3.9.1",
|
||||||
@ -37,17 +40,22 @@
|
|||||||
"@radix-ui/react-toggle": "^1.1.0",
|
"@radix-ui/react-toggle": "^1.1.0",
|
||||||
"@radix-ui/react-toggle-group": "^1.1.0",
|
"@radix-ui/react-toggle-group": "^1.1.0",
|
||||||
"@radix-ui/react-tooltip": "^1.1.5",
|
"@radix-ui/react-tooltip": "^1.1.5",
|
||||||
|
"@types/pg": "^8.15.4",
|
||||||
"@vercel/analytics": "^1.4.1",
|
"@vercel/analytics": "^1.4.1",
|
||||||
|
"better-auth": "^1.2.7",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"cmdk": "^1.0.0",
|
"cmdk": "^1.0.0",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
|
"drizzle-orm": "^0.44.2",
|
||||||
"embla-carousel-react": "^8.5.1",
|
"embla-carousel-react": "^8.5.1",
|
||||||
"framer-motion": "^11.13.1",
|
"framer-motion": "^11.13.1",
|
||||||
"input-otp": "^1.4.1",
|
"input-otp": "^1.4.1",
|
||||||
"lucide-react": "^0.468.0",
|
"lucide-react": "^0.468.0",
|
||||||
|
"motion": "^12.18.1",
|
||||||
"next": "^15.2.0",
|
"next": "^15.2.0",
|
||||||
"next-themes": "^0.4.4",
|
"next-themes": "^0.4.4",
|
||||||
|
"pg": "^8.16.2",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-day-picker": "^8.10.1",
|
"react-day-picker": "^8.10.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
@ -66,6 +74,7 @@
|
|||||||
"@types/bun": "latest",
|
"@types/bun": "latest",
|
||||||
"@types/react": "^18.2.48",
|
"@types/react": "^18.2.48",
|
||||||
"@types/react-dom": "^18.2.18",
|
"@types/react-dom": "^18.2.18",
|
||||||
|
"drizzle-kit": "^0.31.1",
|
||||||
"postcss": "^8",
|
"postcss": "^8",
|
||||||
"prettier": "^3.4.2",
|
"prettier": "^3.4.2",
|
||||||
"tailwindcss": "^3.4.1",
|
"tailwindcss": "^3.4.1",
|
||||||
|
|||||||
4
apps/web/src/app/api/auth/[...all]/route.ts
Normal file
4
apps/web/src/app/api/auth/[...all]/route.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import { toNextJsHandler } from "better-auth/next-js";
|
||||||
|
|
||||||
|
export const { POST, GET } = toNextJsHandler(auth);
|
||||||
@ -1,36 +1,80 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
ResizablePanelGroup,
|
ResizablePanelGroup,
|
||||||
ResizablePanel,
|
ResizablePanel,
|
||||||
ResizableHandle,
|
ResizableHandle,
|
||||||
} from "../../components/ui/resizable";
|
} from "../../components/ui/resizable";
|
||||||
import { MediaPanel } from "../../components/media-panel";
|
import { MediaPanel } from "../../components/editor/media-panel";
|
||||||
import { PropertiesPanel } from "../../components/properties-panel";
|
import { PropertiesPanel } from "../../components/editor/properties-panel";
|
||||||
import { Timeline } from "../../components/timeline";
|
import { Timeline } from "../../components/editor/timeline";
|
||||||
import { PreviewPanel } from "../../components/preview-panel";
|
import { PreviewPanel } from "../../components/editor/preview-panel";
|
||||||
|
import { EditorHeader } from "@/components/editor-header";
|
||||||
|
import { usePanelStore } from "@/stores/panel-store";
|
||||||
|
import { useProjectStore } from "@/stores/project-store";
|
||||||
|
|
||||||
export default function Editor() {
|
export default function Editor() {
|
||||||
|
const {
|
||||||
|
toolsPanel,
|
||||||
|
previewPanel,
|
||||||
|
propertiesPanel,
|
||||||
|
mainContent,
|
||||||
|
timeline,
|
||||||
|
setToolsPanel,
|
||||||
|
setPreviewPanel,
|
||||||
|
setPropertiesPanel,
|
||||||
|
setMainContent,
|
||||||
|
setTimeline,
|
||||||
|
} = usePanelStore();
|
||||||
|
|
||||||
|
const { activeProject, createNewProject } = useProjectStore();
|
||||||
|
|
||||||
|
// Initialize a new project if none exists
|
||||||
|
useEffect(() => {
|
||||||
|
if (!activeProject) {
|
||||||
|
createNewProject("Untitled Project");
|
||||||
|
}
|
||||||
|
}, [activeProject, createNewProject]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-screen flex flex-col bg-background">
|
<div className="h-screen w-screen flex flex-col bg-background">
|
||||||
|
<EditorHeader />
|
||||||
<ResizablePanelGroup direction="vertical">
|
<ResizablePanelGroup direction="vertical">
|
||||||
<ResizablePanel defaultSize={50} minSize={30}>
|
<ResizablePanel
|
||||||
|
defaultSize={mainContent}
|
||||||
|
minSize={30}
|
||||||
|
onResize={setMainContent}
|
||||||
|
>
|
||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<ResizablePanelGroup direction="horizontal">
|
<ResizablePanelGroup direction="horizontal">
|
||||||
{/* Tools Panel */}
|
{/* Tools Panel */}
|
||||||
<ResizablePanel defaultSize={20} minSize={15}>
|
<ResizablePanel
|
||||||
|
defaultSize={toolsPanel}
|
||||||
|
minSize={15}
|
||||||
|
onResize={setToolsPanel}
|
||||||
|
>
|
||||||
<MediaPanel />
|
<MediaPanel />
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
|
|
||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle />
|
||||||
|
|
||||||
{/* Preview Area */}
|
{/* Preview Area */}
|
||||||
<ResizablePanel defaultSize={60}>
|
<ResizablePanel
|
||||||
|
defaultSize={previewPanel}
|
||||||
|
onResize={setPreviewPanel}
|
||||||
|
>
|
||||||
<PreviewPanel />
|
<PreviewPanel />
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
|
|
||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle />
|
||||||
|
|
||||||
{/* Properties Panel */}
|
{/* Properties Panel */}
|
||||||
<ResizablePanel defaultSize={20} minSize={15}>
|
<ResizablePanel
|
||||||
|
defaultSize={propertiesPanel}
|
||||||
|
minSize={15}
|
||||||
|
onResize={setPropertiesPanel}
|
||||||
|
>
|
||||||
<PropertiesPanel />
|
<PropertiesPanel />
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
@ -39,7 +83,11 @@ export default function Editor() {
|
|||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle />
|
||||||
|
|
||||||
{/* Timeline */}
|
{/* Timeline */}
|
||||||
<ResizablePanel defaultSize={50} minSize={15}>
|
<ResizablePanel
|
||||||
|
defaultSize={timeline}
|
||||||
|
minSize={15}
|
||||||
|
onResize={setTimeline}
|
||||||
|
>
|
||||||
<Timeline />
|
<Timeline />
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@ -2,10 +2,6 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
--background: 0 0% 100%;
|
||||||
@ -32,7 +28,7 @@ body {
|
|||||||
--chart-3: 197 37% 24%;
|
--chart-3: 197 37% 24%;
|
||||||
--chart-4: 43 74% 66%;
|
--chart-4: 43 74% 66%;
|
||||||
--chart-5: 27 87% 67%;
|
--chart-5: 27 87% 67%;
|
||||||
--radius: 0.6rem;
|
--radius: 1rem;
|
||||||
--sidebar-background: 0 0% 100%;
|
--sidebar-background: 0 0% 100%;
|
||||||
--sidebar-foreground: 0 0% 3.9%;
|
--sidebar-foreground: 0 0% 3.9%;
|
||||||
--sidebar-primary: 0 0% 9%;
|
--sidebar-primary: 0 0% 9%;
|
||||||
|
|||||||
@ -1,20 +1,15 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import localFont from "next/font/local";
|
import { Inter } from "next/font/google";
|
||||||
import { ThemeProvider } from "next-themes";
|
import { ThemeProvider } from "next-themes";
|
||||||
import { Analytics } from "@vercel/analytics/react";
|
import { Analytics } from "@vercel/analytics/react";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { Toaster } from "../components/ui/sonner";
|
import { Toaster } from "../components/ui/sonner";
|
||||||
import { TooltipProvider } from "../components/ui/tooltip";
|
import { TooltipProvider } from "../components/ui/tooltip";
|
||||||
|
import { AppProvider } from "@/components/app-provider";
|
||||||
|
|
||||||
const geistSans = localFont({
|
const inter = Inter({
|
||||||
src: "./fonts/GeistVF.woff",
|
subsets: ["latin"],
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-inter",
|
||||||
weight: "100 900",
|
|
||||||
});
|
|
||||||
const geistMono = localFont({
|
|
||||||
src: "./fonts/GeistMonoVF.woff",
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
weight: "100 900",
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
@ -29,15 +24,15 @@ export default function RootLayout({
|
|||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<body
|
<body className={`${inter.variable} font-sans antialiased`}>
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
|
<ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
|
||||||
|
<AppProvider>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
{children}
|
{children}
|
||||||
<Analytics />
|
<Analytics />
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
|
</AppProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
|
import { Hero } from "@/components/landing/hero";
|
||||||
|
import { Header } from "@/components/header";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return <div>Hello World</div>;
|
return (
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<Hero />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
42
apps/web/src/components/app-provider.tsx
Normal file
42
apps/web/src/components/app-provider.tsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { useAppStore } from "@/stores/app-store";
|
||||||
|
import { usePanelStore } from "@/stores/panel-store";
|
||||||
|
|
||||||
|
interface AppProviderProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AppProvider({ children }: AppProviderProps) {
|
||||||
|
const { isInitializing, isPanelsReady, initializeApp } = useAppStore();
|
||||||
|
const { setInitialized } = usePanelStore();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const initialize = async () => {
|
||||||
|
// Initialize the app
|
||||||
|
await initializeApp();
|
||||||
|
|
||||||
|
// Initialize panel store for future resize events
|
||||||
|
setInitialized();
|
||||||
|
};
|
||||||
|
|
||||||
|
initialize();
|
||||||
|
}, [initializeApp, setInitialized]);
|
||||||
|
|
||||||
|
// Show loading screen while initializing
|
||||||
|
if (isInitializing || !isPanelsReady) {
|
||||||
|
return (
|
||||||
|
<div className="h-screen w-screen flex items-center justify-center bg-background">
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||||
|
<p className="text-sm text-muted-foreground">Loading editor...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// App is ready, render children
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
56
apps/web/src/components/editor-header.tsx
Normal file
56
apps/web/src/components/editor-header.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
import { ChevronLeft, Download } from "lucide-react";
|
||||||
|
import { useProjectStore } from "@/stores/project-store";
|
||||||
|
import { useMediaStore } from "@/stores/media-store";
|
||||||
|
import { useTimelineStore } from "@/stores/timeline-store";
|
||||||
|
import { HeaderBase } from "./header-base";
|
||||||
|
|
||||||
|
export function EditorHeader() {
|
||||||
|
const { activeProject } = useProjectStore();
|
||||||
|
const { mediaItems } = useMediaStore();
|
||||||
|
const { tracks } = useTimelineStore();
|
||||||
|
|
||||||
|
const handleExport = () => {
|
||||||
|
// TODO: Implement export functionality
|
||||||
|
console.log("Export project");
|
||||||
|
};
|
||||||
|
|
||||||
|
const leftContent = (
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
<span className="text-sm">{activeProject?.name || "Loading..."}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
|
||||||
|
const centerContent = (
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<span>{mediaItems.length} media</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{tracks.length} tracks</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const rightContent = (
|
||||||
|
<nav className="flex items-center gap-2">
|
||||||
|
<Button size="sm" onClick={handleExport}>
|
||||||
|
<Download className="h-4 w-4" />
|
||||||
|
<span className="text-sm">Export</span>
|
||||||
|
</Button>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HeaderBase
|
||||||
|
leftContent={leftContent}
|
||||||
|
centerContent={centerContent}
|
||||||
|
rightContent={rightContent}
|
||||||
|
className="bg-background border-b"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
133
apps/web/src/components/editor/media-panel.tsx
Normal file
133
apps/web/src/components/editor/media-panel.tsx
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { AspectRatio } from "../ui/aspect-ratio";
|
||||||
|
import { useMediaStore } from "@/stores/media-store";
|
||||||
|
import { Plus, Image, Video, Music, Upload } from "lucide-react";
|
||||||
|
import { useState, useRef } from "react";
|
||||||
|
|
||||||
|
export function MediaPanel() {
|
||||||
|
const { mediaItems, addMediaItem } = useMediaStore();
|
||||||
|
const [isDragOver, setIsDragOver] = useState(false);
|
||||||
|
const dragCounterRef = useRef(0);
|
||||||
|
|
||||||
|
const handleAddSampleMedia = () => {
|
||||||
|
// Just for testing - add a sample media item
|
||||||
|
addMediaItem({
|
||||||
|
name: `Sample ${mediaItems.length + 1}`,
|
||||||
|
type: "image",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMediaIcon = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case "video":
|
||||||
|
return <Video className="h-4 w-4" />;
|
||||||
|
case "audio":
|
||||||
|
return <Music className="h-4 w-4" />;
|
||||||
|
default:
|
||||||
|
return <Image className="h-4 w-4" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragEnter = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
dragCounterRef.current += 1;
|
||||||
|
if (!isDragOver) {
|
||||||
|
setIsDragOver(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragOver = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragLeave = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
dragCounterRef.current -= 1;
|
||||||
|
if (dragCounterRef.current === 0) {
|
||||||
|
setIsDragOver(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrop = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragOver(false);
|
||||||
|
dragCounterRef.current = 0;
|
||||||
|
// TODO: Handle file drop functionality
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`h-full overflow-y-auto transition-colors duration-200 relative ${
|
||||||
|
isDragOver ? "bg-accent/30 border-accent" : ""
|
||||||
|
}`}
|
||||||
|
onDragEnter={handleDragEnter}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDragLeave={handleDragLeave}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
>
|
||||||
|
{/* Drag Overlay */}
|
||||||
|
{isDragOver && (
|
||||||
|
<div className="absolute inset-0 bg-accent/20 backdrop-blur-lg border-2 border-dashed border-accent rounded-lg flex items-center justify-center z-10 pointer-events-none">
|
||||||
|
<div className="text-center">
|
||||||
|
<Upload className="h-8 w-8 text-accent mx-auto mb-2" />
|
||||||
|
<p className="text-sm font-medium text-accent">Drop files here</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Images, videos, and audio files
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4 p-2 h-full">
|
||||||
|
{/* Media Grid */}
|
||||||
|
{mediaItems.length === 0 ? (
|
||||||
|
<EmptyMedia onAddSample={handleAddSampleMedia} />
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{mediaItems.map((item) => (
|
||||||
|
<Button
|
||||||
|
key={item.id}
|
||||||
|
variant="outline"
|
||||||
|
className="flex flex-col gap-2 p-2 h-auto overflow-hidden"
|
||||||
|
>
|
||||||
|
<AspectRatio ratio={16 / 9} className="w-full">
|
||||||
|
<div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground">
|
||||||
|
{getMediaIcon(item.type)}
|
||||||
|
<span className="text-xs mt-1 truncate max-w-full px-1">
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</AspectRatio>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EmptyMedia({ onAddSample }: { onAddSample: () => void }) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-8 text-center h-full">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
|
||||||
|
<Image className="h-8 w-8 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">No media in project</p>
|
||||||
|
<p className="text-xs text-muted-foreground/70 mt-1">
|
||||||
|
Drag files or click to add media
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="mt-4"
|
||||||
|
onClick={onAddSample}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
Add Sample
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,10 +1,10 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Input } from "./ui/input";
|
import { Input } from "../ui/input";
|
||||||
import { Label } from "./ui/label";
|
import { Label } from "../ui/label";
|
||||||
import { Slider } from "./ui/slider";
|
import { Slider } from "../ui/slider";
|
||||||
import { ScrollArea } from "./ui/scroll-area";
|
import { ScrollArea } from "../ui/scroll-area";
|
||||||
import { Separator } from "./ui/separator";
|
import { Separator } from "../ui/separator";
|
||||||
|
|
||||||
export function PropertiesPanel() {
|
export function PropertiesPanel() {
|
||||||
return (
|
return (
|
||||||
@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ScrollArea } from "./ui/scroll-area";
|
import { ScrollArea } from "../ui/scroll-area";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "../ui/button";
|
||||||
import {
|
import {
|
||||||
Scissors,
|
Scissors,
|
||||||
ArrowLeftToLine,
|
ArrowLeftToLine,
|
||||||
@ -16,14 +16,17 @@ import {
|
|||||||
TooltipContent,
|
TooltipContent,
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
TooltipProvider,
|
TooltipProvider,
|
||||||
} from "./ui/tooltip";
|
} from "../ui/tooltip";
|
||||||
|
import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
|
||||||
|
|
||||||
export function Timeline() {
|
export function Timeline() {
|
||||||
|
const { tracks, addTrack } = useTimelineStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{/* Toolbar */}
|
{/* Toolbar */}
|
||||||
<div className="border-b flex items-center px-2 py-1 gap-1">
|
<div className="border-b flex items-center px-2 py-1 gap-1">
|
||||||
<TooltipProvider delayDuration={0}>
|
<TooltipProvider delayDuration={500}>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button variant="ghost" size="icon">
|
<Button variant="ghost" size="icon">
|
||||||
@ -104,38 +107,67 @@ export function Timeline() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Video Track */}
|
{/* Timeline Tracks */}
|
||||||
|
{tracks.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
|
||||||
|
<SplitSquareHorizontal className="h-8 w-8 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
No tracks in timeline
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground/70 mt-1">
|
||||||
|
Add a video or audio track to get started
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
<div className="flex flex-col gap-2.5">
|
<div className="flex flex-col gap-2.5">
|
||||||
<div className="flex items-center px-2">
|
{tracks.map((track) => (
|
||||||
<div className="flex-1">
|
<TimelineTrackComponent key={track.id} track={track} />
|
||||||
<TimelineClip />
|
))}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Audio Track */}
|
|
||||||
<div className="flex items-center px-2">
|
|
||||||
<div className="flex-1">
|
|
||||||
<TimelineClip />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Effects Track */}
|
|
||||||
<div className="flex items-center px-2">
|
|
||||||
<div className="flex-1">
|
|
||||||
<TimelineClip />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function TimelineClip() {
|
function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
|
||||||
|
const getTrackColor = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case "video":
|
||||||
|
return "bg-blue-500/20 border-blue-500/30";
|
||||||
|
case "audio":
|
||||||
|
return "bg-green-500/20 border-green-500/30";
|
||||||
|
case "effects":
|
||||||
|
return "bg-purple-500/20 border-purple-500/30";
|
||||||
|
default:
|
||||||
|
return "bg-gray-500/20 border-gray-500/30";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex-1 h-[3.8rem]">
|
<div className="flex items-center px-2">
|
||||||
<div className="h-full bg-blue-500/20 border border-blue-500/30 rounded-sm mx-3 cursor-pointer transition-colors" />
|
<div className="w-24 text-xs text-muted-foreground flex-shrink-0 mr-2">
|
||||||
|
{track.name}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 h-[60px]">
|
||||||
|
{track.clips.length === 0 ? (
|
||||||
|
<div className="h-full rounded-sm border-2 border-dashed border-muted/30 flex items-center justify-center text-xs text-muted-foreground">
|
||||||
|
Drop media here
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-sm border cursor-pointer transition-colors ${getTrackColor(track.type)} flex items-center px-2`}
|
||||||
|
>
|
||||||
|
<span className="text-xs text-foreground/80">
|
||||||
|
{track.clips.length} clip{track.clips.length !== 1 ? "s" : ""}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
41
apps/web/src/components/header-base.tsx
Normal file
41
apps/web/src/components/header-base.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
interface HeaderBaseProps {
|
||||||
|
leftContent?: ReactNode;
|
||||||
|
centerContent?: ReactNode;
|
||||||
|
rightContent?: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HeaderBase({
|
||||||
|
leftContent,
|
||||||
|
centerContent,
|
||||||
|
rightContent,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
}: HeaderBaseProps) {
|
||||||
|
// If children is provided, render it directly without the grid layout
|
||||||
|
if (children) {
|
||||||
|
return (
|
||||||
|
<header className={cn("px-6 h-16 flex items-center", className)}>
|
||||||
|
{children}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
className={cn("px-6 h-16 flex justify-between items-center", className)}
|
||||||
|
>
|
||||||
|
{leftContent && <div className="flex items-center">{leftContent}</div>}
|
||||||
|
{centerContent && (
|
||||||
|
<div className="flex items-center">{centerContent}</div>
|
||||||
|
)}
|
||||||
|
{rightContent && <div className="flex items-center">{rightContent}</div>}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
apps/web/src/components/header.tsx
Normal file
37
apps/web/src/components/header.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
import { HeaderBase } from "./header-base";
|
||||||
|
|
||||||
|
export function Header() {
|
||||||
|
const leftContent = (
|
||||||
|
<Link href="/" className="font-medium tracking-tight">
|
||||||
|
AppCut
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
|
||||||
|
const rightContent = (
|
||||||
|
<nav className="flex items-center">
|
||||||
|
<Link href="/editor">
|
||||||
|
<Button variant="ghost" className="text-sm">
|
||||||
|
Open editor
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="https://github.com/mazeincoding/AppCut" target="_blank">
|
||||||
|
<Button variant="ghost" className="text-sm">
|
||||||
|
GitHub
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/editor">
|
||||||
|
<Button size="sm" className="text-sm ml-4">
|
||||||
|
Start editing
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
|
||||||
|
return <HeaderBase leftContent={leftContent} rightContent={rightContent} />;
|
||||||
|
}
|
||||||
72
apps/web/src/components/landing/hero.tsx
Normal file
72
apps/web/src/components/landing/hero.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export function Hero() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen flex flex-col items-center justify-center text-center px-4">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
className="max-w-3xl mx-auto"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2, duration: 0.8 }}
|
||||||
|
className="inline-block"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
CapCut alternative.
|
||||||
|
</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"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.4, duration: 0.8 }}
|
||||||
|
>
|
||||||
|
A simple but powerful video editor that gets the job done. In your
|
||||||
|
browser.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="mt-12 flex gap-8 justify-center"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.6, duration: 0.8 }}
|
||||||
|
>
|
||||||
|
<Link href="/editor">
|
||||||
|
<Button size="lg" className="px-6 h-11 text-base">
|
||||||
|
<span className="relative z-10">Start editing</span>
|
||||||
|
<ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-12 left-0 right-0 text-center text-sm text-muted-foreground/60"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.8, duration: 0.8 }}
|
||||||
|
>
|
||||||
|
Currently in beta • Open source on{" "}
|
||||||
|
<Link
|
||||||
|
href="https://github.com/mazeincoding/AppCut"
|
||||||
|
className="text-foreground underline"
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,39 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { Button } from "./ui/button";
|
|
||||||
import { ScrollArea } from "./ui/scroll-area";
|
|
||||||
import { AspectRatio } from "./ui/aspect-ratio";
|
|
||||||
|
|
||||||
const mediaItems = [
|
|
||||||
{ name: "Sample 1", type: "image" },
|
|
||||||
{ name: "Sample 2", type: "image" },
|
|
||||||
{ name: "Sample 3", type: "image" },
|
|
||||||
{ name: "Sample 4", type: "image" },
|
|
||||||
{ name: "Sample 5", type: "image" },
|
|
||||||
{ name: "Sample 6", type: "image" },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export function MediaPanel() {
|
|
||||||
return (
|
|
||||||
<ScrollArea className="h-full">
|
|
||||||
<div className="space-y-4 p-2">
|
|
||||||
{/* Media Grid */}
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{mediaItems.map((item) => (
|
|
||||||
<Button
|
|
||||||
key={item.name}
|
|
||||||
variant="outline"
|
|
||||||
className="flex flex-col gap-2 p-0 h-auto overflow-hidden"
|
|
||||||
>
|
|
||||||
<AspectRatio ratio={16 / 9} className="w-full">
|
|
||||||
<div className="w-full h-full bg-muted/30 flex items-center justify-center text-muted-foreground text-xs">
|
|
||||||
{item.name}
|
|
||||||
</div>
|
|
||||||
</AspectRatio>
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
4
apps/web/src/lib/auth-client.ts
Normal file
4
apps/web/src/lib/auth-client.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { createAuthClient } from "better-auth/react";
|
||||||
|
export const authClient = createAuthClient({
|
||||||
|
baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL!,
|
||||||
|
});
|
||||||
23
apps/web/src/lib/auth.ts
Normal file
23
apps/web/src/lib/auth.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { betterAuth } from "better-auth";
|
||||||
|
import { drizzleAdapter } from "better-auth/adapters/drizzle";
|
||||||
|
import { db } from "./db";
|
||||||
|
|
||||||
|
export const auth = betterAuth({
|
||||||
|
database: drizzleAdapter(db, {
|
||||||
|
provider: "pg",
|
||||||
|
usePlural: true,
|
||||||
|
}),
|
||||||
|
secret: process.env.BETTER_AUTH_SECRET!,
|
||||||
|
user: {
|
||||||
|
deleteUser: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emailAndPassword: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
appName: "AppCut",
|
||||||
|
trustedOrigins: ["http://localhost:3000"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export type Auth = typeof auth;
|
||||||
14
apps/web/src/lib/db/index.tsx
Normal file
14
apps/web/src/lib/db/index.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { drizzle } from "drizzle-orm/node-postgres";
|
||||||
|
import { Pool } from "pg";
|
||||||
|
import * as schema from "./schema";
|
||||||
|
|
||||||
|
const pool = new Pool({
|
||||||
|
connectionString: process.env.DATABASE_URL,
|
||||||
|
max: 3,
|
||||||
|
idleTimeoutMillis: 10000,
|
||||||
|
connectionTimeoutMillis: 15000,
|
||||||
|
query_timeout: 20000,
|
||||||
|
statement_timeout: 20000,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const db = drizzle(pool, { schema });
|
||||||
61
apps/web/src/lib/db/schema.ts
Normal file
61
apps/web/src/lib/db/schema.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";
|
||||||
|
|
||||||
|
export const users = pgTable("users", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
name: text("name").notNull(),
|
||||||
|
email: text("email").notNull().unique(),
|
||||||
|
emailVerified: boolean("email_verified")
|
||||||
|
.$defaultFn(() => false)
|
||||||
|
.notNull(),
|
||||||
|
image: text("image"),
|
||||||
|
createdAt: timestamp("created_at")
|
||||||
|
.$defaultFn(() => /* @__PURE__ */ new Date())
|
||||||
|
.notNull(),
|
||||||
|
updatedAt: timestamp("updated_at")
|
||||||
|
.$defaultFn(() => /* @__PURE__ */ new Date())
|
||||||
|
.notNull(),
|
||||||
|
}).enableRLS();
|
||||||
|
|
||||||
|
export const sessions = pgTable("sessions", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
expiresAt: timestamp("expires_at").notNull(),
|
||||||
|
token: text("token").notNull().unique(),
|
||||||
|
createdAt: timestamp("created_at").notNull(),
|
||||||
|
updatedAt: timestamp("updated_at").notNull(),
|
||||||
|
ipAddress: text("ip_address"),
|
||||||
|
userAgent: text("user_agent"),
|
||||||
|
userId: text("user_id")
|
||||||
|
.notNull()
|
||||||
|
.references(() => users.id, { onDelete: "cascade" }),
|
||||||
|
}).enableRLS();
|
||||||
|
|
||||||
|
export const accounts = pgTable("accounts", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
accountId: text("account_id").notNull(),
|
||||||
|
providerId: text("provider_id").notNull(),
|
||||||
|
userId: text("user_id")
|
||||||
|
.notNull()
|
||||||
|
.references(() => users.id, { onDelete: "cascade" }),
|
||||||
|
accessToken: text("access_token"),
|
||||||
|
refreshToken: text("refresh_token"),
|
||||||
|
idToken: text("id_token"),
|
||||||
|
accessTokenExpiresAt: timestamp("access_token_expires_at"),
|
||||||
|
refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
|
||||||
|
scope: text("scope"),
|
||||||
|
password: text("password"),
|
||||||
|
createdAt: timestamp("created_at").notNull(),
|
||||||
|
updatedAt: timestamp("updated_at").notNull(),
|
||||||
|
}).enableRLS();
|
||||||
|
|
||||||
|
export const verifications = pgTable("verifications", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
identifier: text("identifier").notNull(),
|
||||||
|
value: text("value").notNull(),
|
||||||
|
expiresAt: timestamp("expires_at").notNull(),
|
||||||
|
createdAt: timestamp("created_at").$defaultFn(
|
||||||
|
() => /* @__PURE__ */ new Date()
|
||||||
|
),
|
||||||
|
updatedAt: timestamp("updated_at").$defaultFn(
|
||||||
|
() => /* @__PURE__ */ new Date()
|
||||||
|
),
|
||||||
|
}).enableRLS();
|
||||||
35
apps/web/src/stores/app-store.ts
Normal file
35
apps/web/src/stores/app-store.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
|
||||||
|
interface AppState {
|
||||||
|
// Loading states
|
||||||
|
isInitializing: boolean;
|
||||||
|
isPanelsReady: boolean;
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
setInitializing: (loading: boolean) => void;
|
||||||
|
setPanelsReady: (ready: boolean) => void;
|
||||||
|
initializeApp: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAppStore = create<AppState>((set, get) => ({
|
||||||
|
// Initial states
|
||||||
|
isInitializing: true,
|
||||||
|
isPanelsReady: false,
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
setInitializing: (loading) => {
|
||||||
|
set({ isInitializing: loading });
|
||||||
|
},
|
||||||
|
|
||||||
|
setPanelsReady: (ready) => {
|
||||||
|
set({ isPanelsReady: ready });
|
||||||
|
},
|
||||||
|
|
||||||
|
initializeApp: async () => {
|
||||||
|
console.log("Initializing video editor...");
|
||||||
|
set({ isInitializing: true, isPanelsReady: false });
|
||||||
|
|
||||||
|
set({ isPanelsReady: true, isInitializing: false });
|
||||||
|
console.log("Video editor ready");
|
||||||
|
},
|
||||||
|
}));
|
||||||
35
apps/web/src/stores/media-store.ts
Normal file
35
apps/web/src/stores/media-store.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
|
||||||
|
export interface MediaItem {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: "image" | "video" | "audio";
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MediaStore {
|
||||||
|
mediaItems: MediaItem[];
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
addMediaItem: (item: Omit<MediaItem, "id">) => void;
|
||||||
|
removeMediaItem: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useMediaStore = create<MediaStore>((set, get) => ({
|
||||||
|
mediaItems: [],
|
||||||
|
|
||||||
|
addMediaItem: (item) => {
|
||||||
|
const newItem: MediaItem = {
|
||||||
|
...item,
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
};
|
||||||
|
set((state) => ({
|
||||||
|
mediaItems: [...state.mediaItems, newItem],
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
removeMediaItem: (id) => {
|
||||||
|
set((state) => ({
|
||||||
|
mediaItems: state.mediaItems.filter((item) => item.id !== id),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
}));
|
||||||
79
apps/web/src/stores/panel-store.ts
Normal file
79
apps/web/src/stores/panel-store.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
import { persist } from "zustand/middleware";
|
||||||
|
|
||||||
|
interface PanelState {
|
||||||
|
// Horizontal panel sizes
|
||||||
|
toolsPanel: number;
|
||||||
|
previewPanel: number;
|
||||||
|
propertiesPanel: number;
|
||||||
|
|
||||||
|
// Vertical panel sizes
|
||||||
|
mainContent: number;
|
||||||
|
timeline: number;
|
||||||
|
|
||||||
|
// Flag to prevent initial overwrites
|
||||||
|
isInitialized: boolean;
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
setToolsPanel: (size: number) => void;
|
||||||
|
setPreviewPanel: (size: number) => void;
|
||||||
|
setPropertiesPanel: (size: number) => void;
|
||||||
|
setMainContent: (size: number) => void;
|
||||||
|
setTimeline: (size: number) => void;
|
||||||
|
setInitialized: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const usePanelStore = create<PanelState>()(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
// Default sizes
|
||||||
|
toolsPanel: 20,
|
||||||
|
previewPanel: 60,
|
||||||
|
propertiesPanel: 20,
|
||||||
|
mainContent: 50,
|
||||||
|
timeline: 50,
|
||||||
|
isInitialized: false,
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
setToolsPanel: (size) => {
|
||||||
|
const state = get();
|
||||||
|
if (!state.isInitialized) return;
|
||||||
|
set({ toolsPanel: size });
|
||||||
|
},
|
||||||
|
setPreviewPanel: (size) => {
|
||||||
|
const state = get();
|
||||||
|
if (!state.isInitialized) return;
|
||||||
|
set({ previewPanel: size });
|
||||||
|
},
|
||||||
|
setPropertiesPanel: (size) => {
|
||||||
|
const state = get();
|
||||||
|
if (!state.isInitialized) return;
|
||||||
|
set({ propertiesPanel: size });
|
||||||
|
},
|
||||||
|
setMainContent: (size) => {
|
||||||
|
const state = get();
|
||||||
|
if (!state.isInitialized) return;
|
||||||
|
set({ mainContent: size });
|
||||||
|
},
|
||||||
|
setTimeline: (size) => {
|
||||||
|
const state = get();
|
||||||
|
if (!state.isInitialized) return;
|
||||||
|
set({ timeline: size });
|
||||||
|
},
|
||||||
|
setInitialized: () => {
|
||||||
|
console.log("Panel store initialized for resize events");
|
||||||
|
set({ isInitialized: true });
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: "panel-sizes",
|
||||||
|
partialize: (state) => ({
|
||||||
|
toolsPanel: state.toolsPanel,
|
||||||
|
previewPanel: state.previewPanel,
|
||||||
|
propertiesPanel: state.propertiesPanel,
|
||||||
|
mainContent: state.mainContent,
|
||||||
|
timeline: state.timeline,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
28
apps/web/src/stores/project-store.ts
Normal file
28
apps/web/src/stores/project-store.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { TProject } from "@/types/project";
|
||||||
|
import { create } from "zustand";
|
||||||
|
|
||||||
|
interface ProjectStore {
|
||||||
|
activeProject: TProject | null;
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
createNewProject: (name: string) => void;
|
||||||
|
closeProject: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useProjectStore = create<ProjectStore>((set) => ({
|
||||||
|
activeProject: null,
|
||||||
|
|
||||||
|
createNewProject: (name: string) => {
|
||||||
|
const newProject: TProject = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name,
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
|
set({ activeProject: newProject });
|
||||||
|
},
|
||||||
|
|
||||||
|
closeProject: () => {
|
||||||
|
set({ activeProject: null });
|
||||||
|
},
|
||||||
|
}));
|
||||||
61
apps/web/src/stores/timeline-store.ts
Normal file
61
apps/web/src/stores/timeline-store.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
|
||||||
|
export interface TimelineClip {
|
||||||
|
id: string;
|
||||||
|
mediaId: string;
|
||||||
|
name: string;
|
||||||
|
duration: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimelineTrack {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: "video" | "audio" | "effects";
|
||||||
|
clips: TimelineClip[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TimelineStore {
|
||||||
|
tracks: TimelineTrack[];
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
addTrack: (type: "video" | "audio" | "effects") => void;
|
||||||
|
removeTrack: (trackId: string) => void;
|
||||||
|
addClipToTrack: (trackId: string, clip: Omit<TimelineClip, "id">) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTimelineStore = create<TimelineStore>((set) => ({
|
||||||
|
tracks: [],
|
||||||
|
|
||||||
|
addTrack: (type) => {
|
||||||
|
const newTrack: TimelineTrack = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
|
||||||
|
type,
|
||||||
|
clips: [],
|
||||||
|
};
|
||||||
|
set((state) => ({
|
||||||
|
tracks: [...state.tracks, newTrack],
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
removeTrack: (trackId) => {
|
||||||
|
set((state) => ({
|
||||||
|
tracks: state.tracks.filter((track) => track.id !== trackId),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
addClipToTrack: (trackId, clipData) => {
|
||||||
|
const newClip: TimelineClip = {
|
||||||
|
...clipData,
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
};
|
||||||
|
|
||||||
|
set((state) => ({
|
||||||
|
tracks: state.tracks.map((track) =>
|
||||||
|
track.id === trackId
|
||||||
|
? { ...track, clips: [...track.clips, newClip] }
|
||||||
|
: track
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
}));
|
||||||
6
apps/web/src/types/project.ts
Normal file
6
apps/web/src/types/project.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export interface TProject {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
@ -8,6 +8,12 @@ export default {
|
|||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
fontSize: {
|
||||||
|
base: "0.95rem",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["var(--font-inter)", "sans-serif"],
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
background: "hsl(var(--background))",
|
background: "hsl(var(--background))",
|
||||||
foreground: "hsl(var(--foreground))",
|
foreground: "hsl(var(--foreground))",
|
||||||
|
|||||||
Reference in New Issue
Block a user