diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/app/editor/[project_id]/page.tsx | 11 | ||||
| -rw-r--r-- | apps/web/src/app/projects/page.tsx | 12 | ||||
| -rw-r--r-- | apps/web/src/components/onboarding.tsx | 29 | ||||
| -rw-r--r-- | apps/web/src/middleware.ts | 4 | ||||
| -rw-r--r-- | apps/web/src/stores/project-store.ts | 11 |
5 files changed, 62 insertions, 5 deletions
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index 65667106..41bef8bd 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/apps/web/src/app/editor/[project_id]/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import { ResizablePanelGroup, @@ -16,6 +16,7 @@ import { usePanelStore } from "@/stores/panel-store"; import { useProjectStore } from "@/stores/project-store"; import { EditorProvider } from "@/components/editor-provider"; import { usePlaybackControls } from "@/hooks/use-playback-controls"; +import { Onboarding } from "@/components/onboarding"; export default function Editor() { const { @@ -36,12 +37,12 @@ export default function Editor() { const router = useRouter(); const projectId = params.project_id as string; const handledProjectIds = useRef<Set<string>>(new Set()); + const [isOnboardingOpen, setIsOnboardingOpen] = useState(true); usePlaybackControls(); useEffect(() => { const initProject = async () => { - if (!projectId) return; if (activeProject?.id === projectId) { @@ -139,6 +140,12 @@ export default function Editor() { </ResizablePanelGroup> </div> </div> + <Onboarding + isOpen={isOnboardingOpen} + onClose={() => { + setIsOnboardingOpen(false); + }} + /> </EditorProvider> ); } diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index 499b999a..9fcb025b 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -1,7 +1,8 @@ -"use client"; +"use client" +import { redirect } from "next/navigation"; import Link from "next/link"; -import { useState } from "react"; +import React, { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; @@ -28,8 +29,15 @@ import { useProjectStore } from "@/stores/project-store"; import { useRouter } from "next/navigation"; import { DeleteProjectDialog } from "@/components/delete-project-dialog"; import { RenameProjectDialog } from "@/components/rename-project-dialog"; +import { toast } from "sonner"; export default function ProjectsPage() { + + if (process.env.NODE_ENV !== "development") { + toast.error("You are not allowed to access this page"); + redirect("/"); + } + const { createNewProject, savedProjects, diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx new file mode 100644 index 00000000..a2943677 --- /dev/null +++ b/apps/web/src/components/onboarding.tsx @@ -0,0 +1,29 @@ +"use client";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "./ui/dialog";
+
+interface OnboardingProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function Onboarding({ isOpen, onClose }: OnboardingProps) {
+ return (
+ <Dialog open={isOpen} onOpenChange={onClose}>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>Welcome to Clipture</DialogTitle>
+ <DialogDescription>
+ Let's get you started with the basics.
+ </DialogDescription>
+ </DialogHeader>
+ </DialogContent>
+ </Dialog>
+ );
+}
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts index 1f229e6d..aabc302a 100644 --- a/apps/web/src/middleware.ts +++ b/apps/web/src/middleware.ts @@ -3,6 +3,8 @@ import type { NextRequest } from "next/server"; import { env } from "./env";
export async function middleware(request: NextRequest) {
+ const protectedPaths = ["/editor", "/projects"];
+
// Handle fuckcapcut.com domain redirect
if (request.headers.get("host") === "fuckcapcut.com") {
return NextResponse.redirect("https://opencut.app/why-not-capcut", 301);
@@ -10,7 +12,7 @@ export async function middleware(request: NextRequest) { const path = request.nextUrl.pathname;
- if (path.startsWith("/editor") && env.NODE_ENV === "production") {
+ if (protectedPaths.includes(path) && env.NODE_ENV === "production") {
const homeUrl = new URL("/", request.url);
homeUrl.searchParams.set("redirect", request.url);
return NextResponse.redirect(homeUrl);
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts index efb9cc71..5017be2d 100644 --- a/apps/web/src/stores/project-store.ts +++ b/apps/web/src/stores/project-store.ts @@ -5,6 +5,7 @@ import { toast } from "sonner"; import { useMediaStore } from "./media-store";
import { useTimelineStore } from "./timeline-store";
import { generateUUID } from "@/lib/utils";
+import { env } from "@/env";
interface ProjectStore {
activeProject: TProject | null;
@@ -36,6 +37,16 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({ isInitialized: false,
createNewProject: async (name: string) => {
+ try {
+ if (process.env.NODE_ENV !== "development") {
+ toast.error("Project creation is disabled outside development environment");
+ throw new Error("Not allowed in production");
+ }
+ } catch (error) {
+ toast.error("Failed to create new project");
+ throw error;
+ }
+
const newProject: TProject = {
id: generateUUID(),
name,
|