add a empty quip

packages/react/src/locales/en/ui.yml

@@ -260,6 +260,21 @@ views:
       all: All
       official: Archive
       subber: Clips
+    noLiveStreams:
+      - "404: Streams Not Found"
+      - "The VTubers must be in another castle"
+      - "Stream machine broke"
+      - "Stealth: 100. Can't see any VTubers here"
+      - "*Tumbleweed rolls across the screen*"
+      - "It's dangerous to go alone! But nobody is live right now"
+      - "The cake was a lie, and so were the streams"
+      - "VTubers.exe has stopped working"
+      - "Seems like all the VTubers are busy touching grass"
+      - "Loading VTuber streams... yup got nothing"
+      - "Time to watch the backlog, because no one's streaming"
+      - "Vtubers are sleeping, time to watch clips!"
+      - "In space, no one can hear a VTuber stream"
+      - "No streams now, but imagine if there were!"
   library:
     savedVideosTitle: Saved Videos
     createYtPlaylistButton: Create YT Playlist ({0})

packages/react/src/routes/favorites/favoritesHome.tsx

@@ -12,31 +12,42 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Separator } from "@/shadcn/ui/separator";
 import { FavoritesArchiveTab, FavoritesClipTab } from "./favoriteOtherTabs";
+import { EmptyQuip } from "../home/EmptyQuip";
 
 export function FavoritesLive() {
+  const { t } = useTranslation();
+  const [randN] = useState(Math.floor(Math.random() * 100));
   const { size: cardSize } = useVideoCardSizes(["list", "md", "lg"]);
 
-  const { data: live, isLoading: liveLoading, refetch } = useFavoriteLive();
+  const {
+    data: liveOrUpcoming,
+    isLoading: liveLoading,
+    refetch,
+  } = useFavoriteLive();
 
-  const liveFiltered = useVideoFilter(
-    live as Video[],
+  const filtered = useVideoFilter(
+    liveOrUpcoming as Video[],
     "stream_schedule",
     "favorites",
   );
 
+  const nowLive = filtered?.filter(({ status }) => status === "live") ?? [];
+  const upcoming = filtered?.filter(({ status }) => status !== "live") ?? [];
+
   return (
     <>
       <PullToRefresh onRefresh={refetch}>
         <MainVideoListing
           isLoading={liveLoading}
           size={cardSize}
-          videos={liveFiltered?.filter(({ status }) => status === "live") ?? []}
+          videos={nowLive}
         />
+        {!liveLoading && nowLive.length == 0 && <EmptyQuip />}
         <Separator className="mb-4 mt-2 w-full border-base-3 lg:mb-6 lg:mt-4" />
         <MainVideoListing
           isLoading={liveLoading}
           size={cardSize}
-          videos={liveFiltered?.filter(({ status }) => status !== "live") ?? []}
+          videos={upcoming}
         />
       </PullToRefresh>
     </>

packages/react/src/routes/home/EmptyQuip.tsx

@@ -0,0 +1,19 @@
+// EmptyQuip.tsx
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function EmptyQuip() {
+  const { t } = useTranslation();
+  const [randN] = useState(Math.floor(Math.random() * 100));
+  const emptyTranslations = (
+    t("views.home.noLiveStreams", { returnObjects: true }) as string[]
+  ).filter((x) => !!x);
+
+  if (!emptyTranslations) return null;
+
+  return (
+    <div className="p-4 text-base-11 md:px-8">
+      {emptyTranslations[randN % emptyTranslations.length]}
+    </div>
+  );
+}

packages/react/src/routes/home/LiveTab.tsx

@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import { useVideoCardSizes } from "@/store/video";
 import PullToRefresh from "@/components/layout/PullToRefresh";
 import { useVideoFilter } from "@/hooks/useVideoFilter";
+import { EmptyQuip } from "./EmptyQuip";
 
 export function LiveTab() {
   const { org } = useParams();
@@ -24,19 +25,24 @@ export function LiveTab() {
     "org",
   );
 
+  const nowLive = liveFiltered?.filter(({ status }) => status === "live") ?? [];
+  const upcoming =
+    liveFiltered?.filter(({ status }) => status !== "live") ?? [];
+
   return (
     <>
       <PullToRefresh onRefresh={refetch}>
         <MainVideoListing
           isLoading={liveLoading}
           size={cardSize}
-          videos={liveFiltered?.filter(({ status }) => status === "live") ?? []}
+          videos={nowLive}
         />
+        {!liveLoading && nowLive.length == 0 && <EmptyQuip />}
         <Separator className="mb-4 mt-2 w-full border-base-3 lg:mb-6 lg:mt-4" />
         <MainVideoListing
           isLoading={liveLoading}
           size={cardSize}
-          videos={liveFiltered?.filter(({ status }) => status !== "live") ?? []}
+          videos={upcoming}
         />
       </PullToRefresh>
     </>