make livetab work on v3

HolodexNet · Dec 27, 2024 · 1a1df27 · 1a1df27
1 parent 7b6e596
commit 1a1df27
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 24 deletions.
diff --git a/packages/react/src/components/edit/VideoEditTopic.tsx b/packages/react/src/components/edit/VideoEditTopic.tsx
@@ -70,6 +70,7 @@ export function VideoEditTopic({ video }: { video: Video }) {
           key={channel.id}
           {...channel}
           size="xs"
+          variant="list"
           showSubscribers={false}
         >
           <Button

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -30,11 +30,11 @@ import React from "react";
 import { useOrgs } from "@/services/orgs.service";
 import { useTimeout } from "usehooks-ts";
 import { defaultOpenAtom } from "@/store/settings";
-//@ts-expect-error commitssincelasttag
 import {
   abbreviatedSha,
   committerDate,
   lastTag,
+  //@ts-expect-error commitssincelasttag
   commitsSinceLastTag,
 } from "~build/git";
 import dayjs from "dayjs";

diff --git a/packages/react/src/routes/favorites/favoritedChannels.tsx b/packages/react/src/routes/favorites/favoritedChannels.tsx
@@ -19,6 +19,7 @@ export function FavoritedChannels() {
           data={favChannels?.flat() ?? []}
           itemContent={(_, channel) => (
             <MemoizedChannelCard
+              variant="card"
               key={"fav_card_" + channel.id}
               size="lg"
               {...channel}

diff --git a/packages/react/src/routes/home/LiveTab.tsx b/packages/react/src/routes/home/LiveTab.tsx
@@ -20,7 +20,7 @@ export function LiveTab() {
   );
 
   const liveFiltered = useVideoFilter(
-    live as Video[],
+    live?.items as Video[],
     "stream_schedule",
     "org",
   );

diff --git a/packages/react/src/routes/home/home.tsx b/packages/react/src/routes/home/home.tsx
@@ -124,9 +124,11 @@ function StickyTabsList({
         {t("views.home.recentVideoToggles.subber")}
       </TabsTrigger>
       <TabsTrigger value="members">{fourthTab}</TabsTrigger>
-      <Separator orientation="vertical" className="relative h-auto" />
+      <Separator orientation="vertical" className="relative h-10" />
+      {/* The h-10 on this separator is actually load bearing - it maintains the height of the whole tab list */}
+      {/* Optional Control Buttons */}
       {tab === "clips" && <ClipLanguageSelector />}
-      <CardSizeToggle />
+      {tab !== "members" && <CardSizeToggle />}
     </TabsList>
   );
 }

diff --git a/packages/react/src/routes/settings/content.tsx b/packages/react/src/routes/settings/content.tsx
@@ -104,7 +104,12 @@ export function SettingsContentPreferences() {
           {blockedChannels.length ? (
             <div className="grid w-full grid-cols-[repeat(auto-fill,_minmax(240px,_1fr))]">
               {blockedChannels.map((channel) => (
-                <ChannelCard key={channel.id} size="lg" {...channel} />
+                <ChannelCard
+                  variant="card"
+                  key={channel.id}
+                  size="lg"
+                  {...channel}
+                />
               ))}
             </div>
           ) : (

diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
@@ -133,7 +133,7 @@ export function Watch() {
                 "px-4 @screen-lg:px-8 pb-8": theaterMode,
               })}
             >
-              {channel && <ChannelCard size="xs" {...channel} />}
+              {channel && <ChannelCard size="xs" variant="list" {...channel} />}
               {!currentVideo?.link?.includes("twitch") &&
                 currentVideo?.description && (
                   <PlayerDescription description={currentVideo.description} />

diff --git a/packages/react/src/services/live.service.ts b/packages/react/src/services/live.service.ts
@@ -2,6 +2,7 @@ import { useClient } from "@/hooks/useClient";
 import { hidePlaceholderAtom } from "@/store/settings";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
+import { VideoServiceResponse } from "./video.service";
 
 interface UseLiveParams {
   channel_id?: string;
@@ -31,12 +32,13 @@ const STANDARD_CONFIG_LIVE_QUERY = {
 export function useLive(params?: UseLiveParams, config?: CommonQueryConfig) {
   const client = useClient();
 
-  return useQuery<Live[]>({
+  return useQuery({
     queryKey: ["live", params],
     queryFn: async () =>
-      await client<Live[]>("/api/v2/live", {
+      await client<VideoServiceResponse<Live>>("/api/v3/live", {
         params: {
           ...params,
+          limit: 3000,
         },
       }),
     ...STANDARD_CONFIG_LIVE_QUERY,

diff --git a/packages/react/src/services/services.scratch.http b/packages/react/src/services/services.scratch.http
diff --git a/packages/react/src/services/video.service.ts b/packages/react/src/services/video.service.ts
@@ -54,6 +54,12 @@ function arrayToCommaSeparatedString(arr: string[] | string | undefined) {
   return Array.isArray(arr) ? arr.join(",") : arr;
 }
 
+export type VideoServiceResponse<VideoType> = {
+  items: VideoType[];
+  approximateTotal: number;
+  nextPage?: string;
+};
+
 export function useVideosV3(
   params?: Omit<UseVideosV3Params, "nextPage">,
   config?: CommonQueryConfig,