Skip to content

Commit

Permalink
show collab members in placeholder card
Browse files Browse the repository at this point in the history
  • Loading branch information
@sphinxrave
sphinxrave committed Dec 29, 2024
1 parent 9c066a3 commit bc43c25
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 117 deletions.
248 changes: 131 additions & 117 deletions packages/react/src/components/video/VideoCardPlaceholder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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) {
Expand Down
13 changes: 13 additions & 0 deletions packages/react/src/store/settings.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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[]) => {
Expand Down

0 comments on commit bc43c25

Please sign in to comment.