From dd54d02d4b58497471ca6f9d789e7d5eec04b5c4 Mon Sep 17 00:00:00 2001
From: sphinxrave <62570796+sphinxrave@users.noreply.github.com>
Date: Sat, 2 Dec 2023 01:13:12 -0800
Subject: [PATCH] kinda all over the place, these changes.

---
 .../react/src/components/video/VideoCard.tsx  |  3 ++
 packages/react/src/routes/watch.tsx           | 30 ++++++++++++++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
index 9bdde6484..b52602cc3 100644
--- a/packages/react/src/components/video/VideoCard.tsx
+++ b/packages/react/src/components/video/VideoCard.tsx
@@ -280,6 +280,7 @@ export function VideoCard({
           >
             <Link
               to={videoHref}
+              state={{ video: videoObject }}
               target={videoTarget}
               onClick={
                 onInfoClick
@@ -350,6 +351,7 @@ export function VideoCard({
           <Link
             to={videoHref}
             target={videoTarget}
+            state={{ video: videoObject }}
             className="relative w-full"
             onClick={
               onThumbnailClick
@@ -401,6 +403,7 @@ export function VideoCard({
               <Link
                 className="line-clamp-2 pr-4 text-sm font-bold md:text-[1rem] md:leading-6"
                 to={videoHref}
+                state={{ video: videoObject }}
                 target={videoTarget}
                 onClick={
                   onInfoClick
diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
index 72ef20005..5fc845869 100644
--- a/packages/react/src/routes/watch.tsx
+++ b/packages/react/src/routes/watch.tsx
@@ -50,11 +50,9 @@ export default function Watch() {
   const chatPos = useAtomValue(chatPosAtom);
   const [ref, bounds] = useMeasure({ debounce: 50, scroll: false });
 
-  const isTwitch = location.state?.isTwitch ?? data?.link?.includes("twitch");
-
   // Preload video frames for better experience
   useLayoutEffect(() => {
-    const videoPlaceholder: QueueVideo = {
+    const videoPlaceholder: QueueVideo = location.state.video ?? {
       id: id!,
       url: `https://youtu.be/${id}`,
       channel_id: "",
@@ -76,6 +74,11 @@ export default function Watch() {
         type: "vtuber",
       },
     };
+    videoPlaceholder.url =
+      location.state?.video?.link?.includes("twitch") ??
+      data?.link?.includes("twitch")
+        ? location.state.video?.link
+        : `https://youtu.be/${id}`;
     setMiniPlayer(false);
     setCurrentVideo(videoPlaceholder);
     if (queue.length)
@@ -95,14 +98,25 @@ export default function Watch() {
     if (isSuccess) {
       setCurrentVideo({
         ...data,
-        url: isTwitch ? data.link : `https://youtu.be/${id}`,
+        url:
+          location.state?.video?.link?.includes("twitch") ??
+          data?.link?.includes("twitch")
+            ? data.link
+            : `https://youtu.be/${id}`,
       });
       if (queue.length)
         setQueue((q) =>
           q.toSpliced(
             q.findIndex((q) => q.id === id),
             1,
-            { ...data, url: isTwitch ? data.link : `https://youtu.be/${id}` },
+            {
+              ...data,
+              url:
+                location.state?.video?.link?.includes("twitch") ??
+                data?.link?.includes("twitch")
+                  ? data.link
+                  : `https://youtu.be/${id}`,
+            },
           ),
         );
     }
@@ -146,7 +160,7 @@ export default function Watch() {
                   )}
                 </div>
               )}
-              {data && <Controlbar {...data} />}
+              {currentVideo && <Controlbar {...(data ?? currentVideo)} />}
             </div>
             <div
               className={cn("flex flex-col gap-1", {
@@ -154,7 +168,7 @@ export default function Watch() {
               })}
             >
               <h2 className="text-xl font-bold">{data?.title}</h2>
-              {data && <PlayerStats {...data} />}
+              {currentVideo && <PlayerStats {...(data ?? currentVideo)} />}
             </div>
             <div
               className={cn("flex flex-col gap-4", {
@@ -162,7 +176,7 @@ export default function Watch() {
               })}
             >
               {channel && <ChannelCard size="xs" {...channel} />}
-              {!isTwitch && data?.description && (
+              {!data?.link?.includes("twitch") && data?.description && (
                 <PlayerDescription description={data.description} />
               )}
               <div className="flex @screen-lg:hidden">