From bc43c25395ccc06be7d8aff12110a633996a055d Mon Sep 17 00:00:00 2001
From: sphinxrave <62570796+sphinxrave@users.noreply.github.com>
Date: Sat, 28 Dec 2024 17:50:10 -0800
Subject: [PATCH] show collab members in placeholder card

---
 .../components/video/VideoCardPlaceholder.tsx | 248 +++++++++---------
 packages/react/src/store/settings.ts          |  13 +
 2 files changed, 144 insertions(+), 117 deletions(-)

diff --git a/packages/react/src/components/video/VideoCardPlaceholder.tsx b/packages/react/src/components/video/VideoCardPlaceholder.tsx
index 250279cc3..082a6d3b4 100644
--- a/packages/react/src/components/video/VideoCardPlaceholder.tsx
+++ b/packages/react/src/components/video/VideoCardPlaceholder.tsx
@@ -20,6 +20,7 @@ import {
 import { userAtom } from "@/store/auth";
 import { VideoCardType } from "./VideoCard";
 import { VideoCardCountdownToLive } from "./VideoCardCountdownToLive";
+import { useNamePrefFn } from "@/store/settings";
 
 export default function VideoCardPlaceholder({
   open,
@@ -34,6 +35,7 @@ export default function VideoCardPlaceholder({
   const isSmall = useAtomValue(siteIsSmallAtom);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const user = useAtomValue(userAtom);
+  const nameFn = useNamePrefFn();
 
   const thumbnailSrc =
     video.type === "placeholder" && video.thumbnail
@@ -52,131 +54,143 @@ export default function VideoCardPlaceholder({
   };
 
   const content = useMemo(
-    () => (
-      <div className="grid gap-6">
-        <VideoThumbnail
-          src={thumbnailSrc}
-          alt="Stream Thumbnail"
-          className="aspect-video max-h-[50vh] w-full rounded-sm bg-black object-cover"
-        />
-        <div className="grid gap-2 px-4">
-          <h2 className="text-2xl font-bold">{video.title}</h2>
-          <div className="flex items-center gap-2 text-base-10">
-            <div className="i-heroicons:user -mb-1 mr-1 inline-block text-sm" />
-            <span>{video.channel.name}</span>
-          </div>
-          <div className="flex items-center gap-2 text-base-10">
-            <div className="i-heroicons:clock -mb-1 mr-1 inline-block text-sm" />
-            <VideoCardCountdownToLive video={video} />
+    () =>
+      open && (
+        <div className="flex flex-col space-y-4">
+          <VideoThumbnail
+            src={thumbnailSrc}
+            alt="Stream Thumbnail"
+            className="aspect-video max-h-[50vh] w-full rounded-sm bg-black object-cover"
+          />
+          <div className="mx-4 grid gap-2">
+            <h2 className="text-2xl font-bold">{video.title}</h2>
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(400px,1fr))]">
+              <div className="items-center font-semibold text-base-10">
+                <div className="i-heroicons:user -mb-1 mr-3 inline-block text-sm" />
+                <span>{nameFn(video.channel)}</span>
+              </div>
+              {video.mentions &&
+                video.mentions.map((mention) => (
+                  <div className="items-center text-base-9">
+                    <div className="i-heroicons:user-plus -mb-1 mr-3 inline-block text-sm" />
+                    <span>{nameFn(mention)}</span>
+                  </div>
+                ))}
+            </div>
+            <div className="flex items-center gap-2 text-base-10">
+              <div className="i-heroicons:clock -mb-1 mr-1 inline-block text-sm" />
+              <VideoCardCountdownToLive video={video} />
+            </div>
           </div>
-        </div>
-        <div className="grid gap-4 px-4 pb-4">
-          <Button size="lg" variant="default" className="h-12 py-4" asChild>
-            <a href={video.link} target="_blank" rel="noopener noreferrer">
-              <div
-                className={
-                  video.placeholderType === "scheduled-yt-stream"
-                    ? "i-logos:youtube-icon mr-1"
-                    : "i-heroicons:arrow-top-right-on-square mr-1"
-                }
-              />
-              {video.placeholderType === "scheduled-yt-stream"
-                ? t("component.placeholderVideo.scheduledEvent")
-                : video.placeholderType === "external-stream"
-                  ? t("component.placeholderVideo.streamPageBtn")
-                  : t("component.placeholderVideo.eventPageBtn")}
-            </a>
-          </Button>
-          <div className="flex flex-row">
-            <div className="grow text-sm text-muted">
-              {t("component.placeholderVideo.creditTitleText")}{" "}
-              {video.credits?.discord &&
-                t("component.placeholderVideo.discordCredit", {
-                  user: video.credits.discord.user,
-                  guild: (
+          <div className="flex flex-col gap-4 p-4">
+            <Button size="lg" variant="default" className="h-12 py-4" asChild>
+              <a href={video.link} target="_blank" rel="noopener noreferrer">
+                <div
+                  className={
+                    video.placeholderType === "scheduled-yt-stream"
+                      ? "i-logos:youtube-icon mr-1"
+                      : "i-heroicons:arrow-top-right-on-square mr-1"
+                  }
+                />
+                {video.placeholderType === "scheduled-yt-stream"
+                  ? t("component.placeholderVideo.scheduledEvent")
+                  : video.placeholderType === "external-stream"
+                    ? t("component.placeholderVideo.streamPageBtn")
+                    : t("component.placeholderVideo.eventPageBtn")}
+              </a>
+            </Button>
+            <div className="flex flex-row">
+              <div className="grow text-sm text-muted">
+                {t("component.placeholderVideo.creditTitleText")}{" "}
+                {video.credits?.discord &&
+                  t("component.placeholderVideo.discordCredit", {
+                    user: video.credits.discord.user,
+                    guild: (
+                      <strong>
+                        <a
+                          href={`https://discord.gg/${video.credits.discord.link}`}
+                          className="inline-block"
+                        >
+                          <div className="i-logos:discord-icon mr-1 inline-block" />
+                          {video.credits.discord.guildName}
+                        </a>
+                      </strong>
+                    ),
+                  })}
+                {video.credits?.datasource && (
+                  <span>
+                    {t("component.placeholderVideo.datasourceCredit", {
+                      0: video.credits.datasource.name,
+                    })}
                     <strong>
-                      <a
-                        href={`https://discord.gg/${video.credits.discord.link}`}
-                        className="inline-block"
-                      >
-                        <div className="i-logos:discord-icon mr-1 inline-block" />
-                        {video.credits.discord.guildName}
+                      <a href={video.credits.datasource.link}>
+                        <div className="i-heroicons:arrow-top-right-on-square mr-1 inline-block" />
+                        {video.credits.datasource.link}
                       </a>
                     </strong>
-                  ),
-                })}
-              {video.credits?.datasource && (
-                <span>
-                  {t("component.placeholderVideo.datasourceCredit", {
-                    0: video.credits.datasource.name,
-                  })}
-                  <strong>
-                    <a href={video.credits.datasource.link}>
-                      <div className="i-heroicons:arrow-top-right-on-square mr-1 inline-block" />
-                      {video.credits.datasource.link}
-                    </a>
-                  </strong>
-                </span>
-              )}
-              {video.credits?.bot && (
-                <span>
-                  {t("component.placeholderVideo.botCredit", {
-                    0: video.credits.bot.name,
-                    1: video.credits.bot.user,
-                  })}
-                  <strong>
-                    <a href={video.credits.bot.link}>
-                      <div className="i-heroicons:arrow-top-right-on-square mr-1 inline-block" />
-                      {video.credits.bot.link}
-                    </a>
-                  </strong>
-                </span>
-              )}
-              {video.credits?.editor && (
-                <span>
-                  {t("component.placeholderVideo.editorCredit", {
-                    0: video.credits.editor.name,
-                  })}
-                </span>
+                  </span>
+                )}
+                {video.credits?.bot && (
+                  <span>
+                    {t("component.placeholderVideo.botCredit", {
+                      0: video.credits.bot.name,
+                      1: video.credits.bot.user,
+                    })}
+                    <strong>
+                      <a href={video.credits.bot.link}>
+                        {video.credits.bot.link}
+                        <div className="i-heroicons:arrow-top-right-on-square mr-1 inline-block" />
+                      </a>
+                    </strong>
+                  </span>
+                )}
+                {video.credits?.editor && (
+                  <span>
+                    {t("component.placeholderVideo.editorCredit", {
+                      0: video.credits.editor.name,
+                    })}
+                  </span>
+                )}
+              </div>
+              {user && user.role !== "user" && (
+                <div className="flex flex-row flex-nowrap items-center gap-2 pl-6">
+                  <code className="my-2 rounded-md bg-base-3 px-2 py-1 text-sm text-muted">
+                    {video.id}
+                  </code>
+                  <Button variant="default" className="" asChild>
+                    <a href={`/add_placeholder?id=${video.id}`}>Edit</a>
+                  </Button>
+                  <AlertDialog
+                    open={showDeleteConfirm}
+                    onOpenChange={setShowDeleteConfirm}
+                  >
+                    <AlertDialogTrigger asChild>
+                      <Button variant="destructive" className="">
+                        Delete
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          This action cannot be undone.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={deletePlaceholder}>
+                          Delete
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
               )}
             </div>
-            {user && user.role !== "user" && (
-              <div className="pl-6">
-                <code className="text-sm">{video.id}</code>
-                <Button variant="default" className="m-2" asChild>
-                  <a href={`/add_placeholder?id=${video.id}`}>Edit</a>
-                </Button>
-                <AlertDialog
-                  open={showDeleteConfirm}
-                  onOpenChange={setShowDeleteConfirm}
-                >
-                  <AlertDialogTrigger asChild>
-                    <Button variant="destructive" className="m-2">
-                      Delete
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-                      <AlertDialogDescription>
-                        This action cannot be undone.
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>Cancel</AlertDialogCancel>
-                      <AlertDialogAction onClick={deletePlaceholder}>
-                        Delete
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              </div>
-            )}
           </div>
         </div>
-      </div>
-    ),
-    [thumbnailSrc, video, t, user, showDeleteConfirm],
+      ),
+    [open, thumbnailSrc, video, nameFn, t, user, showDeleteConfirm],
   );
 
   if (isSmall) {
diff --git a/packages/react/src/store/settings.ts b/packages/react/src/store/settings.ts
index 9fa612572..ff3cac157 100644
--- a/packages/react/src/store/settings.ts
+++ b/packages/react/src/store/settings.ts
@@ -1,6 +1,7 @@
 import { GET_ON_INIT } from "@/lib/consts";
 import { atom, useAtomValue } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { useCallback } from "react";
 
 // Define the interface for the new settings state
 export interface HolodexSettings {
@@ -61,6 +62,18 @@ export function usePreferredName({
   return useEnglishName ? english_name || name : name;
 }
 
+export function useNamePrefFn() {
+  const useEnglishName = useAtomValue(englishNameAtom);
+
+  const prefFn = useCallback(
+    ({ name, english_name }: { name?: string; english_name?: string }) =>
+      useEnglishName ? english_name || name : name,
+    [useEnglishName],
+  );
+
+  return prefFn;
+}
+
 export const clipLanguageAtom = atom(
   (get) => get(settingsAtom).clipLanguage,
   (get, set, newValue: string[]) => {