Skip to content

Commit

Permalink
Merge branch 'next' of https://github.com/HolodexNet/Holodex into next
Browse files Browse the repository at this point in the history
  • Loading branch information
@sphinxrave
sphinxrave committed Jun 29, 2024
2 parents 22f2a84 + 97a704c commit 2a38f8e
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 94 deletions.
224 changes: 131 additions & 93 deletions packages/react/src/components/channel/ChannelCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { formatCount } from "@/lib/time";
import { Button } from "@/shadcn/ui/button";
import { ReactNode } from "react";
import { ReactNode, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { ChannelMenu } from "./ChannelMenu";
import { ChannelImg } from "./ChannelImg";
import { TopicBadge } from "../topic/TopicBadge";
import { ChannelSocials } from "./ChannelSocials";
import type { SetOptional } from "type-fest";
import { Link, useNavigate } from "react-router-dom";

type WithNonOptional<T, NonOptionalKeys extends keyof T> = Pick<
T,
Expand Down Expand Up @@ -49,45 +50,74 @@ export function ChannelCard({
inactive,
}: ChannelCardProps) {
const { t } = useTranslation();
const navigate = useNavigate();

const channelHref = `/channel/${id}`;

const goToChannelClickHandler = useCallback(
(evt: React.MouseEvent<HTMLElement, MouseEvent>) => {
if ((evt.target as HTMLElement).closest("a")) {
console.info("no action b/c closest element is a link.", evt);
return;
}
console.info("JS video click handling", evt);
// clicked a non-link part of the channel card.
if (evt.ctrlKey) {
/** Control clicking a non-link part always goes to the external link no matter what the context */
window.open(channelHref, "_blank");
evt.preventDefault();
evt.stopPropagation();
} else {
navigate(channelHref);
evt.preventDefault();
evt.stopPropagation();
}
},
[channelHref, navigate],
);

switch (size) {
case "xs":
case "sm":
return (
<div className="flex items-center gap-4 rounded-lg bg-base-3 p-4">
<ChannelImg
className={`h-12 w-12 ${inactive && "opacity-80 saturate-50"}`}
channelId={id}
/>
<div className="flex flex-col overflow-hidden">
<div className="text-xs text-base-11">
{org}
{group && ` / ${group}`}
</div>
<div className="line-clamp-1 text-lg font-bold">{name}</div>
<div className="text-sm text-base-11">
{showSubscribers &&
t("component.channelInfo.subscriberCount", {
n: formatCount(subscriber_count ?? "0"),
})}
{showVideoCount &&
` / ${t("component.channelInfo.videoCount", {
0: video_count ?? "0",
})}`}
{showClipCount &&
` / ${t("component.channelInfo.clipCount", {
n: clip_count ?? "0",
})}`}
</div>
{size === "sm" && (
<div className="mt-1 flex max-w-full gap-1 overflow-x-auto">
{top_topics?.map((topic) => (
<TopicBadge size="sm" topic={topic} />
))}
<div
className="flex items-center gap-4 rounded-lg bg-base-3 p-4 hover:cursor-pointer"
onClick={goToChannelClickHandler}
>
<Link to={channelHref} className="flex grow items-center gap-4">
<ChannelImg
className={`h-12 w-12 ${inactive && "opacity-80 saturate-50"}`}
channelId={id}
/>
<div className="flex flex-col overflow-hidden">
<div className="text-xs text-base-11">
{org}
{group && ` / ${group}`}
</div>
)}
</div>
<div className="grow" />
<div className="line-clamp-1 text-lg font-bold">{name}</div>
<div className="text-sm text-base-11">
{showSubscribers &&
t("component.channelInfo.subscriberCount", {
n: formatCount(subscriber_count ?? "0"),
})}
{showVideoCount &&
` / ${t("component.channelInfo.videoCount", {
0: video_count ?? "0",
})}`}
{showClipCount &&
` / ${t("component.channelInfo.clipCount", {
n: clip_count ?? "0",
})}`}
</div>
{size === "sm" && (
<div className="mt-1 flex max-w-full gap-1 overflow-x-auto">
{top_topics?.map((topic) => (
<TopicBadge size="sm" topic={topic} />
))}
</div>
)}
</div>
</Link>
{children ?? (
<ChannelSocials
size="sm"
Expand All @@ -103,39 +133,42 @@ export function ChannelCard({
return (
// Set min-height because react-virtuoso will break if the height is not fixed
<div
className={
"group relative flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4"
}
className="group relative flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4 hover:cursor-pointer"
onClick={goToChannelClickHandler}
>
<ChannelMenu
{...{
id,
name,
type,
english_name,
org,
group,
lang,
photo,
}}
<Link
to={channelHref}
className="flex grow flex-col items-center gap-2"
>
<Button
size="icon-lg"
variant="ghost"
className="absolute right-4 top-4 hidden rounded-full group-hover:flex"
<ChannelMenu
{...{
id,
name,
type,
english_name,
org,
group,
lang,
photo,
}}
>
<div className="i-heroicons:ellipsis-vertical" />
</Button>
</ChannelMenu>
<ChannelImg
className={`-z-0 -mb-36 mt-4 h-32 w-32 opacity-20 blur-2xl ${inactive ? "brightness-75 saturate-50" : "saturate-150"}`}
channelId={id}
/>
<ChannelImg
className={`z-10 h-24 w-24 ${inactive && "brightness-75 saturate-50"}`}
channelId={id}
/>
{/* {inactive && (
<Button
size="icon-lg"
variant="ghost"
className="absolute right-4 top-4 hidden rounded-full group-hover:flex"
>
<div className="i-heroicons:ellipsis-vertical" />
</Button>
</ChannelMenu>
<ChannelImg
className={`-z-0 -mb-36 mt-4 h-32 w-32 opacity-20 blur-2xl ${inactive ? "brightness-75 saturate-50" : "saturate-150"}`}
channelId={id}
/>
<ChannelImg
className={`z-10 h-24 w-24 ${inactive && "brightness-75 saturate-50"}`}
channelId={id}
/>
{/* {inactive && (
<div
className="i-fa:graduation-cap absolute z-10 h-24 w-24 text-[40px] leading-10"
style={{
Expand All @@ -144,37 +177,42 @@ export function ChannelCard({
}}
></div>
)} */}
<div
className={`${inactive && "text-base-10"} z-10 line-clamp-2 text-center text-lg font-bold`}
>
{name}
</div>
<div className="flex flex-col items-center">
<div className="whitespace-nowrap text-sm text-base-11">
{t("component.channelInfo.subscriberCount", {
n: formatCount(subscriber_count ?? "0"),
})}
<div
className={`${inactive && "text-base-10"} z-10 line-clamp-2 text-center text-lg font-bold`}
>
{name}
</div>
<div className="flex flex-col items-center">
<div className="whitespace-nowrap text-sm text-base-11">
{t("component.channelInfo.subscriberCount", {
n: formatCount(subscriber_count ?? "0"),
})}
</div>
<div className="flex flex-wrap justify-center gap-x-1 gap-y-0 text-sm text-base-11">
<span className="whitespace-nowrap">
{t("component.channelInfo.videoCount", {
0: video_count ?? 0,
})}
</span>
<span>/</span>
<span className="whitespace-nowrap">
{t("component.channelInfo.clipCount", {
n: clip_count ?? "0",
})}
</span>
</div>
</div>
<div className="flex flex-wrap justify-center gap-x-1 gap-y-0 text-sm text-base-11">
<span className="whitespace-nowrap">
{t("component.channelInfo.videoCount", { 0: video_count ?? 0 })}
</span>
<span>/</span>
<span className="whitespace-nowrap">
{t("component.channelInfo.clipCount", { n: clip_count ?? "0" })}
</span>
<div className="mt-1 flex flex-wrap justify-center gap-0.5">
{top_topics?.map((topic) => (
<TopicBadge
size="sm"
topic={topic}
className="border-base-7 capitalize text-base-10 "
/>
))}
</div>
</div>
<div className="mt-1 flex flex-wrap justify-center gap-0.5">
{top_topics?.map((topic) => (
<TopicBadge
size="sm"
topic={topic}
className="border-base-7 capitalize text-base-10 "
/>
))}
</div>
<div className="flex grow" />
</Link>

{children ?? (
<ChannelSocials
id={id}
Expand Down
8 changes: 7 additions & 1 deletion packages/react/src/routes/watch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
} from "@/store/player";
import { queueAtom } from "@/store/queue";
import { useAtom, useAtomValue } from "jotai";
import { useEffect } from "react";
import { Helmet } from "react-helmet-async";
import { useLocation, useParams } from "react-router-dom";

Expand Down Expand Up @@ -53,7 +54,7 @@ export default function Watch() {
});

const queue = useAtomValue(queueAtom);
const miniPlayer = useAtomValue(miniPlayerAtom);
const [miniPlayer, setMiniPlayer] = useAtom(miniPlayerAtom);
const theaterMode = useAtomValue(theaterModeAtom);
const [chatOpen, setChatOpen] = useAtom(chatOpenAtom);
const [tlOpen, setTLOpen] = useAtom(tlOpenAtom);
Expand All @@ -62,6 +63,11 @@ export default function Watch() {
const smOrMd = !useIsLgAndUp();

const url = idToVideoURL(id!, currentVideo?.link);

useEffect(() => {
setMiniPlayer(false);
}, []);

return (
<>
<Helmet>
Expand Down

0 comments on commit 2a38f8e

Please sign in to comment.