build is fixed (wao)

HolodexNet · Jun 9, 2024 · 61847ae · 61847ae
1 parent fb9d41b
commit 61847ae
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 228 deletions.
diff --git a/packages/react/src/components/edit/ItunesSearchDropdown.tsx b/packages/react/src/components/edit/ItunesSearchDropdown.tsx
@@ -18,10 +18,9 @@ import {
   useSongAutocomplete,
 } from "./songSearch.service";
 import { useDebounceValue } from "usehooks-ts";
+import { localeAtom } from "@/store/i18n";
+import { useAtomValue } from "jotai";
 
-interface ItunesItem {
-  // todo
-}
 export function ItunesSearchDropdown({
   onSelectItem,
   className,
@@ -73,9 +72,9 @@ export function ItunesSearchDropdown({
                     handleItemSelect(item);
                   }}
                   key={item.trackId ?? item.trackName + i}
-                  value={i}
+                  value={String(i)}
                 >
-                  <TrackItem item={item} />
+                  <SongItem {...item} />
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -90,6 +89,36 @@ export function ItunesSearchDropdown({
   );
 }
 
+function SongItem({
+  artworkUrl100,
+  trackName,
+  artistName,
+  collectionName,
+  releaseDate,
+}: Pick<
+  IdentifiedItunesTrack,
+  | "artworkUrl100"
+  | "trackName"
+  | "artistName"
+  | "collectionName"
+  | "releaseDate"
+>) {
+  const { dayjs } = useAtomValue(localeAtom);
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <img className="h-10 w-10 rounded-sm" src={artworkUrl100 || ""} />
+      <div className="flex flex-col">
+        <span className="font-bold">{trackName}</span>
+        <span className="text-sm text-base-11">
+          {artistName} / {collectionName} /{" "}
+          {dayjs(releaseDate).format("YYYY-MM")}
+        </span>
+      </div>
+    </div>
+  );
+}
+
 // Assuming `item` is passed as a prop to this component and is of type IdentifiedTrack | IdentifiedItunesTrack
 const TrackItem = ({ item }: { item: IdentifiedItunesTrack }) => {
   const formatDuration = (milliseconds: number) => {

diff --git a/packages/react/src/components/edit/VideoEditSongs.tsx b/packages/react/src/components/edit/VideoEditSongs.tsx
diff --git a/packages/react/src/components/tldex/new-editor/frame.tsx b/packages/react/src/components/tldex/new-editor/frame.tsx
@@ -7,12 +7,8 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { headerHiddenAtom } from "@/hooks/useFrame";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
-import {
-  miniplayerVideoAtom,
-  playerRefAtom,
-  videoStatusAtomFamily,
-} from "@/store/player";
-import { useNavigate, useParams } from "react-router-dom";
+import { videoStatusAtomFamily } from "@/store/player";
+import { useNavigate } from "react-router-dom";
 import { useVideo } from "@/services/video.service";
 import { PlayerWrapper } from "@/components/layout/PlayerWrapper";
 import { Input } from "@/shadcn/ui/input";
@@ -132,7 +128,7 @@ export function TLEditorFrame() {
   );
 }
 
-export function TLEditorBody({ currentVideo }: { currentVideo: QueueVideo }) {
+export function TLEditorBody({ currentVideo }: { currentVideo: Video }) {
   const videoStatusAtom = videoStatusAtomFamily(currentVideo?.id || "x");
   const videoStatus = useAtomValue(videoStatusAtom);
   return (

diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
@@ -315,7 +315,7 @@ function VideoCardDuration({
   const durationMs = useDuration({
     type,
     status,
-    duration,
+    duration: duration ?? 0,
     end_actual,
     start_actual,
   });

diff --git a/packages/react/src/routes/editVideo.tsx b/packages/react/src/routes/editVideo.tsx
@@ -1,6 +1,6 @@
 import { Loading } from "@/components/common/Loading";
-import { VideoEditSongs } from "@/components/edit/VideoEditSongs";
 import { VideoEditTopic } from "@/components/edit/VideoEditTopic";
+import { DefaultPlayerPositionAnchor } from "@/components/player/DefaultPlayerPositionAnchor";
 import { siteIsSmallAtom } from "@/hooks/useFrame";
 import { useVideo } from "@/services/video.service";
 import {
@@ -10,54 +10,72 @@ import {
 } from "@/shadcn/ui/resizable";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
 import { TypographyH3, TypographyH4 } from "@/shadcn/ui/typography";
-import { miniplayerVideoAtom } from "@/store/player";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useContext, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import "./editVideo.scss";
 import { VideoEditMusic } from "@/components/edit/VideoEditMusic";
-import { PlayerWrapper } from "@/components/layout/PlayerWrapper";
 
 export default function EditVideo() {
   const { id } = useParams();
   const { t } = useTranslation();
-  const setCurrentVideo = useSetAtom(miniplayerVideoAtom);
   const siteIsSmall = useAtomValue(siteIsSmallAtom);
-  const { data, error, isPending, isSuccess } = useVideo<PlaceholderVideo>({
-    id: id!,
-  });
+  const { data, error, isPending, isSuccess } = useVideo({ id: id! });
   const [tab, setTab] = useState("topic");
 
   return (
     <>
       <Helmet></Helmet>
-      <div className="flex h-full w-full flex-col gap-8 p-4 md:p-8 lg:flex-row">
-        <div className="flex w-full max-w-md shrink-0 grow-0 basis-auto flex-col lg:basis-1/3">
-          {isSuccess && <PlayerWrapper id={data.id} url={data.link} />}
-        </div>
-        {isPending || error ? (
-          <Loading size="lg" error={error} />
-        ) : (
-          <Tabs className="w-full grow-0 basis-2/3" defaultValue="topic">
-            <TabsList className="w-full justify-start">
-              <TabsTrigger value="topic">
-                {t("component.search.type.topic")} /{" "}
-                {t("views.editor.channelMentions.title")}
-              </TabsTrigger>
-              <TabsTrigger value="music">
-                {t("component.mainNav.music")}
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="topic">
-              <VideoEditTopic video={data} />
-            </TabsContent>
-            <TabsContent value="music">
-              {isSuccess && <VideoEditSongs />}
-            </TabsContent>
-          </Tabs>
-        )}
+      <div className="">
+        <div className="container"></div>
+        <ResizablePanelGroup
+          className="container min-h-[90vh]"
+          direction={siteIsSmall ? "vertical" : "horizontal"}
+        >
+          <ResizablePanel minSize={10} defaultSize={20}>
+            <div id="player-anchor-container" className="relative h-full p-2">
+              <DefaultPlayerPositionAnchor
+                id="player-anchor"
+                className="overflow-hidden"
+              />
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel className="px-4">
+            <TypographyH3 className="mb-4 mt-2">
+              Editing: {data?.title}
+            </TypographyH3>
+
+            {isPending || error ? (
+              <Loading size="lg" error={error} />
+            ) : (
+              <Tabs
+                className="w-full grow-0 basis-2/3"
+                defaultValue="topic"
+                onValueChange={setTab}
+                value={tab}
+              >
+                <TabsList className="w-full justify-start">
+                  <TabsTrigger value="topic">
+                    {t("views.editor.changeTopic.title")} /
+                    {t("views.editor.channelMentions.title")}
+                  </TabsTrigger>
+                  <TabsTrigger value="music">
+                    {t("views.editor.changeMusic.title")}
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="topic">
+                  <VideoEditTopic video={data} />
+                </TabsContent>
+                <TabsContent value="music">
+                  <VideoEditMusic video={data} />
+                </TabsContent>
+              </Tabs>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </div>
     </>
   );

diff --git a/packages/react/src/store/player.ts b/packages/react/src/store/player.ts
@@ -94,7 +94,7 @@ export const videoStatusAtomFamily = atomFamily(
 );
 
 export const videoPlayerRefAtomFamily = atomFamily(
-  (id: string) => atom<ReactPlayer | null>(null),
+  (_: string) => atom<ReactPlayer | null>(null),
   (a, b) => a === b,
 );