From 82fb5ba527c85130a2ddbef7d2d0b6e4ecf50bc1 Mon Sep 17 00:00:00 2001 From: sphinxrave <62570796+sphinxrave@users.noreply.github.com> Date: Mon, 30 Dec 2024 22:39:14 -0800 Subject: [PATCH] TL Client frame WIP --- .../react/src/components/layout/Frame.tsx | 3 +- .../{frame.css => TLEditorFrame.css} | 0 .../{frame.tsx => TLEditorFrame.tsx} | 2 +- .../tldex/tl-client/TLClientFrame.tsx | 132 ++++++++++++++++++ packages/react/src/routes/router.tsx | 5 +- packages/react/src/routes/tlclient.tsx | 5 + packages/react/src/routes/tleditor.tsx | 2 +- 7 files changed, 145 insertions(+), 4 deletions(-) rename packages/react/src/components/tldex/new-editor/{frame.css => TLEditorFrame.css} (100%) rename packages/react/src/components/tldex/new-editor/{frame.tsx => TLEditorFrame.tsx} (99%) create mode 100644 packages/react/src/components/tldex/tl-client/TLClientFrame.tsx create mode 100644 packages/react/src/routes/tlclient.tsx diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx index 89c91360d..d41bff2d1 100644 --- a/packages/react/src/components/layout/Frame.tsx +++ b/packages/react/src/components/layout/Frame.tsx @@ -61,7 +61,8 @@ export function LocationAwareReactivity() { const isFullscreen = location.pathname.startsWith("/watch") || location.pathname.startsWith("/edit") || - location.pathname.startsWith("/scripteditor"); + location.pathname.startsWith("/scripteditor") || + location.pathname.startsWith("/tlclient"); indicatePageFullscreen(isFullscreen); }, [location.pathname, indicatePageFullscreen]); diff --git a/packages/react/src/components/tldex/new-editor/frame.css b/packages/react/src/components/tldex/new-editor/TLEditorFrame.css similarity index 100% rename from packages/react/src/components/tldex/new-editor/frame.css rename to packages/react/src/components/tldex/new-editor/TLEditorFrame.css diff --git a/packages/react/src/components/tldex/new-editor/frame.tsx b/packages/react/src/components/tldex/new-editor/TLEditorFrame.tsx similarity index 99% rename from packages/react/src/components/tldex/new-editor/frame.tsx rename to packages/react/src/components/tldex/new-editor/TLEditorFrame.tsx index 540fab447..0872b31ca 100644 --- a/packages/react/src/components/tldex/new-editor/frame.tsx +++ b/packages/react/src/components/tldex/new-editor/TLEditorFrame.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; -import "./frame.css"; +import "./TLEditorFrame.css"; import { useBeforeUnload, useNavigate } from "react-router-dom"; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import { PlayerWrapper } from "@/components/layout/PlayerWrapper"; diff --git a/packages/react/src/components/tldex/tl-client/TLClientFrame.tsx b/packages/react/src/components/tldex/tl-client/TLClientFrame.tsx new file mode 100644 index 000000000..3b8b0e19d --- /dev/null +++ b/packages/react/src/components/tldex/tl-client/TLClientFrame.tsx @@ -0,0 +1,132 @@ +import React, { useState, useEffect } from "react"; +import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; +import { PlayerWrapper } from "@/components/layout/PlayerWrapper"; +import { useSetAtom } from "jotai"; +import { headerHiddenAtom } from "@/hooks/useFrame"; +import { Button } from "@/shadcn/ui/button"; +import { Input } from "@/shadcn/ui/input"; +import { idToVideoURL } from "@/lib/utils"; + +const TLControlBar = ({ + videoId, + onVideoIdChange, + onLoad, +}: { + videoId: string; + onVideoIdChange: (videoId: string) => void; + onLoad: () => void; +}) => ( +
+ onVideoIdChange(e.target.value)} + placeholder="Enter video ID..." + className="w-64" + /> + +
+); + +export default function TLClientFrame() { + const [videoId, setVideoId] = useState(""); + const makeHeaderHide = useSetAtom(headerHiddenAtom); + const [speakers, setSpeakers] = useState([ + { id: 1, name: "Speaker 1" }, + { id: 2, name: "Speaker 2" }, + { id: 3, name: "Speaker 3" }, + { id: 4, name: "Speaker 4" }, + { id: 5, name: "Speaker 5" }, + { id: 6, name: "Speaker 5" }, + { id: 7, name: "Speaker 5" }, + { id: 8, name: "Speaker 5" }, + { id: 9, name: "Speaker 5" }, + { id: 10, name: "Speaker 5" }, + ]); + const [currentSpeaker, setCurrentSpeaker] = useState(1); + const [currentInput, setCurrentInput] = useState(""); + + useEffect(() => { + makeHeaderHide(true); + return () => makeHeaderHide(false); + }, [makeHeaderHide]); + + return ( +
+ { + /* Implement load logic */ + }} + /> + +
+ {/* Main viewing area with 23:9 aspect ratio constraint */} +
+
+ + +
+
+ YouTube Chat +
+
+ {/* Chat content */} +
+
+ + + +
+
+ +
+
+ + + +
+
+ TL Chat +
+
+ {/* TL chat content */} +
+
+ + +
+
+ + {/* Input and speaker selection area */} +
+ setCurrentInput(e.target.value)} + placeholder="Enter translation..." + className="h-12 text-lg" + /> + +
+ {speakers.map((speaker, i) => ( + + ))} +
+
+
+
+ ); +} diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx index 414c0c11c..ad36d36d0 100644 --- a/packages/react/src/routes/router.tsx +++ b/packages/react/src/routes/router.tsx @@ -92,6 +92,9 @@ const Login = lazy(() => const TLEditorPage = lazy(() => import("./tleditor").then((module) => ({ default: module.TLEditorPage })), ); +const TLClientPage = lazy(() => + import("./tlclient").then((module) => ({ default: module.TLClientPage })), +); const Watch = lazy(() => import("./watch").then((module) => ({ default: module.Watch })), ); @@ -166,7 +169,7 @@ export const routes = ( - Translation Client} /> + diff --git a/packages/react/src/routes/tlclient.tsx b/packages/react/src/routes/tlclient.tsx new file mode 100644 index 000000000..de68a7f48 --- /dev/null +++ b/packages/react/src/routes/tlclient.tsx @@ -0,0 +1,5 @@ +import TLClientFrame from "@/components/tldex/tl-client/TLClientFrame"; + +export function TLClientPage() { + return ; +} diff --git a/packages/react/src/routes/tleditor.tsx b/packages/react/src/routes/tleditor.tsx index ca425065f..05be0d422 100644 --- a/packages/react/src/routes/tleditor.tsx +++ b/packages/react/src/routes/tleditor.tsx @@ -1,4 +1,4 @@ -import { TLEditorFrame } from "@/components/tldex/new-editor/frame"; +import { TLEditorFrame } from "@/components/tldex/new-editor/TLEditorFrame"; export function TLEditorPage() { return ; }