"use client" import React from "react" import { IoMdPhonePortrait } from "react-icons/io" import { GiRollingDices } from "react-icons/gi" import { ClapImageRatio } from "@aitube/clap" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Toaster } from "@/components/ui/sonner" import { TextareaField } from "@/components/form/textarea-field" import { cn, generateRandomStory } from "@/lib/utils" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useIsBusy, useOrientation, useQueryStringParams, useStoryPromptDraft } from "@/lib/hooks" import { BottomBar, VideoPreview } from "@/components/interface" import { MainTitle } from "@/components/interface/main-title" import { LoadClapButton } from "@/components/interface/load-clap-button" import { SaveClapButton } from "@/components/interface/save-clap-button" import { useProcessors } from "@/lib/hooks/useProcessors" import { Characters } from "@/components/interface/characters" import { useOAuth } from "@/lib/oauth/useOAuth" import { AuthWall } from "@/components/interface/auth-wall" import { defaultPrompt } from "./config" import { useStore } from "./store" export function Main() { const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft() const { isBusy } = useIsBusy() const { imageRatio, toggleOrientation } = useOrientation() const { handleCreateStory, handleExtendStory } = useProcessors() useQueryStringParams() const currentVideo = useStore(s => s.currentVideo) const showAuthWall = useStore(s => s.showAuthWall) const { isLoggedIn, enableOAuthWall } = useOAuth() return (
{/* LEFT MENU BUTTONS + MAIN PROMPT INPUT */}
{/* TODO: To finish by Julian a bit later
) => { if (e.target.files && e.target.files.length > 0) { const file = e.target.files[0]; const newImageBase64 = await fileToBase64(file) setMainCharacterImage(newImageBase64) } }} accept="image/*" />
*/} {/* MAIN PROMPT INPUT */}
{ setStoryPromptDraft(e.target.value) promptDraftRef.current = e.target.value }} placeholder={defaultPrompt} inputClassName=" transition-all duration-200 ease-in-out h-32 md:h-56 lg:h-64 " disabled={isBusy} value={storyPromptDraft} /> {/* END OF MAIN PROMPT INPUT */}
{/* END OF LEFT MENU BUTTONS + MAIN PROMPT INPUT */}
{/* ACTION BAR */}
{/* */}
{/* RANDOMNESS SWITCH */}
{ const randomStory = generateRandomStory() setStoryPromptDraft(randomStory) promptDraftRef.current = randomStory }}>

Generate a random prompt.

{/* END OF RANDOMNESS SWITCH */} {/* ORIENTATION SWITCH */}
toggleOrientation()}>
{/* END OF ORIENTATION SWITCH */}
{/* END OF ACTION BAR */}
); }