watch page has mentions list

HolodexNet · Dec 29, 2024 · d540af9 · d540af9
1 parent bc43c25
commit d540af9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
@@ -97,7 +97,7 @@ export function ChannelCard({
             className="flex grow items-center gap-2 md:gap-4"
           >
             <ChannelImg
-              className={`h-12 w-auto md:h-20 lg:h-full ${inactive && "opacity-80 saturate-50"}`}
+              className={`h-12 w-auto md:h-20 lg:h-24 ${inactive && "opacity-80 saturate-50"}`}
               channelId={id}
             />
             <div className="flex flex-col overflow-hidden">

diff --git a/packages/react/src/components/player/MentionsCard.tsx b/packages/react/src/components/player/MentionsCard.tsx
@@ -0,0 +1,17 @@
+import { ChannelImg } from "../channel/ChannelImg";
+
+export function Mentions({ mentions }: { mentions: ShortChannel[] }) {
+  return (
+    <div className="flex flex-row gap-2 rounded-lg bg-base-3 p-4">
+      {mentions.map((mention) => (
+        <ChannelImg
+          key={mention.id}
+          className="h-14"
+          channelId={mention.id}
+          photo={mention.photo}
+          size={40}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
@@ -3,8 +3,9 @@ import { ChatModal } from "@/components/chat/ChatModal";
 import { PlayerWrapper } from "@/components/layout/PlayerWrapper";
 import { ChatCard } from "@/components/player/ChatCard";
 import { Controlbar } from "@/components/player/Controlbar";
-import { PlayerDescription } from "@/components/player/PlayerDescription";
-import { PlayerRecommendations } from "@/components/player/PlayerRecommendations";
+import { Mentions } from "@/components/player/MentionsCard";
+import { PlayerDescription as Description } from "@/components/player/PlayerDescription";
+import { PlayerRecommendations as Recommendations } from "@/components/player/PlayerRecommendations";
 import { PlayerStats } from "@/components/player/PlayerStats";
 import { QueueList } from "@/components/player/QueueList";
 import { useIsLgAndUp } from "@/hooks/useBreakpoint";
@@ -50,7 +51,7 @@ export function Watch() {
     enabled: !!currentVideo,
     placeholderData: () => {
       if (location.state?.video && location.state?.video.channel)
-        return location.state?.video;
+        return location.state?.video.channel;
     },
   });
 
@@ -134,12 +135,15 @@ export function Watch() {
               })}
             >
               {channel && <ChannelCard size="xs" variant="list" {...channel} />}
+              {currentVideo?.mentions && (
+                <Mentions mentions={currentVideo.mentions} />
+              )}
               {!currentVideo?.link?.includes("twitch") &&
                 currentVideo?.description && (
-                  <PlayerDescription description={currentVideo.description} />
+                  <Description description={currentVideo.description} />
                 )}
               <div className="flex @screen-lg:hidden">
-                <PlayerRecommendations {...currentVideo} />
+                <Recommendations {...currentVideo} />
               </div>
             </div>
           </div>
@@ -156,7 +160,7 @@ export function Watch() {
                   <ChatCard {...currentVideo} />
                 </div>
               )}
-              <PlayerRecommendations {...currentVideo} />
+              <Recommendations {...currentVideo} />
             </div>
           )}
         </div>