From 3d3b590fb03ee24a8e23498f30e952d8a6544254 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=B4=E3=83=BC=E3=81=BE=E3=82=93?= Date: Mon, 3 Jun 2024 23:47:01 +0900 Subject: [PATCH] Implementation of channel pages almost completed --- packages/react/src/routes/channel.tsx | 38 +++++++++++-------- .../react/src/routes/channel/ChannelAbout.tsx | 35 +++++++++++++++++ .../src/routes/channel/ChannelVideos.tsx | 6 +-- packages/react/src/routes/router.tsx | 11 +++--- .../react/src/services/channel.service.ts | 4 +- packages/react/src/types/channel.d.ts | 1 + 6 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 packages/react/src/routes/channel/ChannelAbout.tsx diff --git a/packages/react/src/routes/channel.tsx b/packages/react/src/routes/channel.tsx index 2bbb9fbe9..88a4a4da2 100644 --- a/packages/react/src/routes/channel.tsx +++ b/packages/react/src/routes/channel.tsx @@ -7,10 +7,16 @@ import { getChannelBannerImages } from "@/lib/utils"; import { useChannel } from "@/services/channel.service"; import { Tabs, TabsList, TabsTrigger } from "@/shadcn/ui/tabs"; import { ExternalLink } from "lucide-react"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useTranslation } from "react-i18next"; -import { Link, Outlet, useNavigate, useParams } from "react-router-dom"; +import { + Link, + Outlet, + useLocation, + useNavigate, + useParams, +} from "react-router-dom"; export type ChannelOutletContext = { id: string; @@ -21,21 +27,16 @@ export default function Channel() { const { t } = useTranslation(); const { id } = useParams(); const navigate = useNavigate(); + const location = useLocation(); const [tab, setTab] = useState(""); const { data: channel } = useChannel(id!); - const onTabChange = (tab: string) => { - // Open Musicdex when selected music tab - if (tab === "music") return open("https://music.holodex.net"); - - setTab(tab); - navigate(`/channel/${channel?.id}/${tab}`); - }; - if (!id || !channel) return ; + console.log(location.pathname.split("/")); + return ( <> @@ -50,8 +51,13 @@ export default function Channel() { : "" } /> - -
+ + tab !== "music" && navigate(`/channel/${channel?.id}/${tab}`) + } + > +
@@ -96,9 +102,11 @@ export default function Channel() { {t("views.channel.collabs")} - - {t("views.channel.music")} - + + + {t("views.channel.music")} + + {t("views.channel.about")} diff --git a/packages/react/src/routes/channel/ChannelAbout.tsx b/packages/react/src/routes/channel/ChannelAbout.tsx new file mode 100644 index 000000000..9b12101aa --- /dev/null +++ b/packages/react/src/routes/channel/ChannelAbout.tsx @@ -0,0 +1,35 @@ +import { useOutletContext } from "react-router-dom"; +import { ChannelOutletContext } from "../channel"; +import { useTranslation } from "react-i18next"; + +export default function ChannelAbout() { + const { t } = useTranslation(); + const { channel } = useOutletContext(); + + return ( +
+
+ {channel.description} +
+
+

+ {t("component.channelInfo.stats")} +

+

+ {t("component.channelInfo.videoCount", { + 0: Number(channel.video_count).toLocaleString(), + })} +

+

+ {t("component.channelInfo.clipCount", { + n: Number(channel.clip_count).toLocaleString(), + })} +

+

+ {Number(channel.view_count).toLocaleString()} + {t("component.channelInfo.totalViews")} +

+
+
+ ); +} diff --git a/packages/react/src/routes/channel/ChannelVideos.tsx b/packages/react/src/routes/channel/ChannelVideos.tsx index 1f7327bb1..cf385b8a9 100644 --- a/packages/react/src/routes/channel/ChannelVideos.tsx +++ b/packages/react/src/routes/channel/ChannelVideos.tsx @@ -3,7 +3,7 @@ import { ChannelOutletContext } from "../channel"; import { useChannelVideos } from "@/services/channel.service"; import { MainVideoListing } from "@/components/video/MainVideoListing"; -export default function ChannelVideos() { +export default function ChannelVideos({ type }: { type: ChannelVideoType }) { const { id, channel } = useOutletContext(); const { @@ -12,9 +12,7 @@ export default function ChannelVideos() { fetchNextPage, hasNextPage, isFetchingNextPage, - } = useChannelVideos(id, "videos"); - - console.log(videos); + } = useChannelVideos(id, type); return (
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx index 5fd37176c..c4154ab2d 100644 --- a/packages/react/src/routes/router.tsx +++ b/packages/react/src/routes/router.tsx @@ -5,7 +5,6 @@ import { orgAtom } from "@/store/org"; import { Frame } from "@/components/layout/Frame"; import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex"; import React from "react"; -import ChannelVideos from "./channel/ChannelVideos"; const Login = React.lazy(() => import("./login")); const Settings = React.lazy(() => import("./settings")); @@ -26,6 +25,8 @@ const AboutPrivacy = React.lazy(() => import("./about/privacy")); const Watch = React.lazy(() => import("./watch")); const ChannelsOrg = React.lazy(() => import("./channelsOrg")); const Channel = React.lazy(() => import("./channel")); +const ChannelVideos = React.lazy(() => import("./channel/ChannelVideos")); +const ChannelAbout = React.lazy(() => import("./channel/ChannelAbout")); const EditVideo = React.lazy(() => import("./editVideo")); const Kitchensink = React.lazy(() => import("@/Kitchensink")); const Playlists = React.lazy(() => import("./playlists")); @@ -77,19 +78,19 @@ const router = createBrowserRouter([ children: [ { index: true, - element: , + element: , }, { path: "about", - element:
Channel_About
, + element: , }, { path: "clips", - element:
Channel_Clips
, + element: , }, { path: "collabs", - element:
Channel_Collabs
, + element: , }, { path: "music", diff --git a/packages/react/src/services/channel.service.ts b/packages/react/src/services/channel.service.ts index 56eb8f459..6be27c2e8 100644 --- a/packages/react/src/services/channel.service.ts +++ b/packages/react/src/services/channel.service.ts @@ -68,13 +68,13 @@ export function useChannel( export function useChannelVideos( channelId: string, - type: "videos" | "collabs" | "clips", + type: ChannelVideoType, params?: UseChannelVideosParams, ) { const client = useClient(); return useInfiniteQuery({ - queryKey: ["channel", channelId, "videos"], + queryKey: ["channel", channelId, type], initialPageParam: 0, queryFn: async ({ pageParam }) => await client(`/api/v2/channels/${channelId}/${type}`, { diff --git a/packages/react/src/types/channel.d.ts b/packages/react/src/types/channel.d.ts index 40fe47c51..1f69740c9 100644 --- a/packages/react/src/types/channel.d.ts +++ b/packages/react/src/types/channel.d.ts @@ -1,4 +1,5 @@ type ChannelType = "vtuber" | "subber"; +type ChannelVideoType = "videos" | "collabs" | "clips"; interface ChannelBase { id: string;