From 61847aed815eb5a4bbbdeb61edd4c72ad33e1f35 Mon Sep 17 00:00:00 2001 From: sphinxrave <62570796+sphinxrave@users.noreply.github.com> Date: Sun, 9 Jun 2024 11:45:44 -0700 Subject: [PATCH] build is fixed (wao) --- .../components/edit/ItunesSearchDropdown.tsx | 39 +++- .../src/components/edit/VideoEditSongs.tsx | 176 ------------------ .../src/components/tldex/new-editor/frame.tsx | 10 +- .../react/src/components/video/VideoCard.tsx | 2 +- packages/react/src/routes/editVideo.tsx | 82 ++++---- packages/react/src/store/player.ts | 2 +- packages/react/src/types/video.d.ts | 12 +- 7 files changed, 95 insertions(+), 228 deletions(-) delete mode 100644 packages/react/src/components/edit/VideoEditSongs.tsx diff --git a/packages/react/src/components/edit/ItunesSearchDropdown.tsx b/packages/react/src/components/edit/ItunesSearchDropdown.tsx index 477629fb4..cccea3838 100644 --- 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)} > - + ))} @@ -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 ( +
+ +
+ {trackName} + + {artistName} / {collectionName} /{" "} + {dayjs(releaseDate).format("YYYY-MM")} + +
+
+ ); +} + // 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 deleted file mode 100644 index 6015bf939..000000000 --- a/packages/react/src/components/edit/VideoEditSongs.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { useForm } from "react-hook-form"; -import { SongSearch } from "./SongSearch"; -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "@/shadcn/ui/form"; -import { useAtomValue } from "jotai"; -import { currentVideoAtom, defaultPlayerEventBus } from "@/store/player"; -import { Input } from "@/shadcn/ui/input"; -import { TypographyH3 } from "@/shadcn/ui/typography"; -import { useTranslation } from "react-i18next"; -import { SongTimeSlider } from "./TimeSlider"; -import { useEffect, useState } from "react"; -import { Progress } from "@/shadcn/ui/progress"; - -export function VideoEditSongs() { - const { t } = useTranslation(); - const currentVideo = useAtomValue(currentVideoAtom); - const [progress, setProgress] = useState(0); - const form = useForm({ - defaultValues: { - amUrl: null, - art: null, - available_at: undefined, - channel: { - name: currentVideo?.channel.name, - english_name: currentVideo?.channel.english_name, - }, - channel_id: currentVideo?.channel_id, - name: undefined, - original_artist: "", - start: 0, - end: 10, - itunesid: null, - song: null, - video_id: currentVideo?.id, - }, - }); - - useEffect(() => { - const onProgress = defaultPlayerEventBus.on( - "onProgress", - (_, { playedSeconds }) => setProgress(playedSeconds), - ); - - return () => { - onProgress(); - }; - }, []); - - console.log((progress - form.getValues("start")) * 10); - - return ( -
- - {t("editor.music.titles.addSong")} - ( - - - - form.setValue( - "song", - song - ? { - ...song, - index: `iTunes${song?.trackId}`, - src: "iTunes", - } - : null, - ) - } - /> - - - Track ID - - - - )} - /> -
- ( - - Track Name - - - - - - )} - /> - ( - - Original Artist - - - - - - )} - /> -
-
- ( - - Start - - - - - form.setValue( - "start", - Math.max(0, form.getValues("start") - amount), - ) - } - /> - - - )} - /> - ( - - Duration - - - - - form.setValue( - "end", - Math.max(0, form.getValues("end") + amount), - ) - } - /> - - - )} - /> -
- - - ); -} diff --git a/packages/react/src/components/tldex/new-editor/frame.tsx b/packages/react/src/components/tldex/new-editor/frame.tsx index ab7f23631..7e40fcb09 100644 --- 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 index e861bc56b..030c9b9a4 100644 --- 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 index b4704cad0..78f193fa3 100644 --- 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,7 +10,6 @@ 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"; @@ -18,46 +17,65 @@ 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({ - id: id!, - }); + const { data, error, isPending, isSuccess } = useVideo({ id: id! }); const [tab, setTab] = useState("topic"); return ( <> -
-
- {isSuccess && } -
- {isPending || error ? ( - - ) : ( - - - - {t("component.search.type.topic")} /{" "} - {t("views.editor.channelMentions.title")} - - - {t("component.mainNav.music")} - - - - - - - {isSuccess && } - - - )} +
+
+ + +
+ +
+ + + + + Editing: {data?.title} + + + {isPending || error ? ( + + ) : ( + + + + {t("views.editor.changeTopic.title")} / + {t("views.editor.channelMentions.title")} + + + {t("views.editor.changeMusic.title")} + + + + + + + + + + )} + +
); diff --git a/packages/react/src/store/player.ts b/packages/react/src/store/player.ts index b2608ad13..8093e92a4 100644 --- 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(null), + (_: string) => atom(null), (a, b) => a === b, ); diff --git a/packages/react/src/types/video.d.ts b/packages/react/src/types/video.d.ts index fb33fd235..6aaef1da6 100644 --- a/packages/react/src/types/video.d.ts +++ b/packages/react/src/types/video.d.ts @@ -36,15 +36,15 @@ type LiveEndpointResponse = Omit & interface VideoBase extends VideoRef { channel_id: string; description: string; - topic_id: string | null; - published_at: string | null; + topic_id?: string | null; + published_at?: string; available_at?: Date | number | string; duration: number; status: VideoStatus; - start_scheduled: string | null; - start_actual: string | null; - end_actual: string | null; - live_viewers: number | null; + start_scheduled?: string; + start_actual?: string; + end_actual?: string; + live_viewers?: number; songcount: number; }