feat: default category images

chore: video/stream-tile split

src/element/category/category-tile.tsx

@@ -21,8 +21,8 @@ export function CategoryTile({
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-8 max-lg:flex-col">
-        <div className="max-lg:h-[140px] lg:h-[200px] xl:h-[250px]">
-          {game?.cover && <img src={game?.cover} className="object-fit aspect-[3/4] h-full rounded-xl" />}
+        <div className="max-lg:h-[140px] lg:h-[200px] xl:h-[250px] aspect-[3/4]">
+          {game?.cover && <img src={game?.cover} className="object-fit w-full h-full rounded-xl" />}
           {!game?.cover && game?.className && (
             <div className={classNames("aspect-[3/4] h-full rounded-xl", game.className)} />
           )}

src/element/stream/stream-tile.tsx

@@ -1,7 +1,7 @@
 import { NostrEvent, NostrLink } from "@snort/system";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
-import { getName } from "./profile";
+import { getName } from "../profile";
 
 import { StreamState } from "@/const";
 import useImgProxy from "@/hooks/img-proxy";
@@ -10,15 +10,14 @@ import { extractStreamInfo, getHost, profileLink } from "@/utils";
 import { useUserProfile } from "@snort/system-react";
 import classNames from "classnames";
 import { useState } from "react";
-import { Avatar } from "./avatar";
-import Logo from "./logo";
-import { useContentWarning } from "./nsfw";
-import PillOpaque from "./pill-opaque";
-import { RelativeTime } from "./relative-time";
-import { StatePill } from "./state-pill";
-import { VideoDuration } from "./video/duration";
+import { Avatar } from "../avatar";
+import Logo from "../logo";
+import { useContentWarning } from "../nsfw";
+import PillOpaque from "../pill-opaque";
+import { RelativeTime } from "../relative-time";
+import { StatePill } from "../state-pill";
 
-export function VideoTile({
+export function StreamTile({
   ev,
   showAuthor = true,
   showStatus = true,
@@ -33,7 +32,7 @@ export function VideoTile({
   style: "list" | "grid";
   className?: string;
 }) {
-  const { title, image, status, participants, contentWarning, duration, recording, ends } = extractStreamInfo(ev);
+  const { title, image, status, participants, contentWarning, recording, ends } = extractStreamInfo(ev);
   const host = getHost(ev);
   const hostProfile = useUserProfile(host);
   const isGrownUp = useContentWarning();
@@ -68,7 +67,7 @@ export function VideoTile({
               }}
             />
           ) : (
-            <Logo className="text-white aspect-video" />
+            <Logo className="text-white aspect-video h-inherit mx-auto text-layer-3" width={60} />
           )}
           <span className="flex flex-col justify-between absolute top-0 h-full right-2 items-end py-2">
             {showStatus && <StatePill state={status as StreamState} />}
@@ -77,11 +76,6 @@ export function VideoTile({
                 <FormattedMessage defaultMessage="{n} viewers" values={{ n: formatSats(Number(participants)) }} />
               </PillOpaque>
             )}
-            {duration && (
-              <PillOpaque>
-                <VideoDuration value={duration} />
-              </PillOpaque>
-            )}
           </span>
         </div>
       </Link>

src/element/video-grid-sorted.tsx

@@ -5,7 +5,7 @@ import { NostrEvent, TaggedNostrEvent } from "@snort/system";
 import { ReactNode, useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import VideoGrid from "./video-grid";
-import { VideoTile } from "./video-tile";
+import { StreamTile } from "./stream/stream-tile";
 import { CategoryTile } from "./category/category-tile";
 import { Link } from "react-router-dom";
 import Pill from "./pill";
@@ -75,7 +75,7 @@ export default function VideoGridSorted({
           {live
             .filter(e => !mutedHosts.has(getHost(e)))
             .map(e => (
-              <VideoTile ev={e} key={e.id} style="grid" />
+              <StreamTile ev={e} key={e.id} style="grid" />
             ))}
         </VideoGrid>
       )}
@@ -112,7 +112,7 @@ function GridSection({ header, items }: { header: ReactNode; items: Array<Tagged
       </div>
       <VideoGrid>
         {items.map(e => (
-          <VideoTile ev={e} key={e.id} style="grid" />
+          <StreamTile ev={e} key={e.id} style="grid" />
         ))}
       </VideoGrid>
     </>

src/element/video/video-tile.tsx

@@ -0,0 +1,104 @@
+import { NostrEvent, NostrLink } from "@snort/system";
+import { useUserProfile } from "@snort/system-react";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import { useState } from "react";
+
+import useImgProxy from "@/hooks/img-proxy";
+import { getHost, profileLink } from "@/utils";
+import { Avatar } from "../avatar";
+import Logo from "../logo";
+import { useContentWarning } from "../nsfw";
+import PillOpaque from "../pill-opaque";
+import { RelativeTime } from "../relative-time";
+import { VideoInfo } from "@/service/video/info";
+import { VideoDuration } from "./duration";
+import { getName } from "../profile";
+
+export function VideoTile({
+  ev,
+  showAuthor = true,
+  showAvatar = true,
+  style,
+  className,
+}: {
+  ev: NostrEvent;
+  showAuthor?: boolean;
+  showAvatar?: boolean;
+  style: "list" | "grid";
+  className?: string;
+}) {
+  const video = VideoInfo.parse(ev);
+  const host = getHost(ev);
+  const hostProfile = useUserProfile(host);
+  const isGrownUp = useContentWarning();
+  const { proxy } = useImgProxy();
+
+  const link = NostrLink.fromEvent(ev);
+  const poster = video.bestPoster();
+  const bestVideo = video.bestVideo();
+  const [hasImg, setHasImage] = useState(true);
+  return (
+    <div
+      className={classNames("flex gap-2", className, {
+        "flex-col": style === "grid",
+        "flex-row": style === "list",
+      })}>
+      <Link
+        to={`/${link.encode()}`}
+        className={classNames(
+          {
+            "blur transition": video.contentWarning !== undefined,
+            "hover:blur-none": isGrownUp,
+          },
+          "h-full",
+        )}
+        state={ev}>
+        <div className="h-inherit relative aspect-video bg-layer-1 rounded-xl overflow-hidden">
+          {hasImg ? (
+            <img
+              loading="lazy"
+              className="w-full h-inherit object-cover"
+              src={proxy(poster?.url ?? bestVideo?.url ?? "")}
+              onError={() => {
+                setHasImage(false);
+              }}
+            />
+          ) : (
+            <Logo className="text-white aspect-video h-inherit mx-auto text-layer-3" width={60} />
+          )}
+          <span className="flex flex-col justify-between absolute top-0 h-full right-2 items-end py-2">
+            {video.duration && (
+              <PillOpaque>
+                <VideoDuration value={video.duration} />
+              </PillOpaque>
+            )}
+          </span>
+        </div>
+      </Link>
+      <div className="flex gap-3">
+        {showAuthor && showAvatar && (
+          <Link to={profileLink(hostProfile, host)}>
+            <Avatar pubkey={host} user={hostProfile} />
+          </Link>
+        )}
+        <div className="flex flex-col break-words min-w-0">
+          <span className="font-medium" title={video.title}>
+            {(video.title?.length ?? 0) > 50 ? `${video.title?.slice(0, 47)}...` : video.title}
+          </span>
+          {showAuthor && (
+            <span className="text-layer-4">
+              {getName(host, hostProfile)}
+              {video.publishedAt && (
+                <>
+                  {" · "}
+                  <RelativeTime from={video.publishedAt * 1000} suffix={true} />
+                </>
+              )}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/hooks/game-info.ts

@@ -17,6 +17,7 @@ export default function useGameInfo(gameId?: string, gameInfo?: GameInfo) {
             name: ix.name,
             genres: ix.tags,
             className: ix.className,
+            cover: ix.cover,
           });
         }
       } else {

src/pages/category.tsx

@@ -8,6 +8,12 @@ import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router-dom";
 
+import IRLImage from "@/images/irl.jpeg";
+import GamingImage from "@/images/gaming.jpeg";
+import MusicImage from "@/images/music.jpeg";
+import TalkImage from "@/images/talk.jpeg";
+import ArtImage from "@/images/art.jpeg";
+
 export const AllCategories = [
   {
     id: "irl",
@@ -16,6 +22,7 @@ export const AllCategories = [
     tags: ["irl"],
     priority: 0,
     className: "bg-category-gradient-1",
+    cover: IRLImage,
   },
   {
     id: "gaming",
@@ -24,6 +31,7 @@ export const AllCategories = [
     tags: ["gaming"],
     priority: 0,
     className: "bg-category-gradient-2",
+    cover: GamingImage,
   },
   {
     id: "music",
@@ -32,6 +40,7 @@ export const AllCategories = [
     tags: ["music", "radio"],
     priority: 0,
     className: "bg-category-gradient-3",
+    cover: MusicImage,
   },
   {
     id: "talk",
@@ -40,6 +49,7 @@ export const AllCategories = [
     tags: ["talk"],
     priority: 0,
     className: "bg-category-gradient-4",
+    cover: TalkImage,
   },
   {
     id: "art",
@@ -48,6 +58,7 @@ export const AllCategories = [
     tags: ["art"],
     priority: 0,
     className: "bg-category-gradient-5",
+    cover: ArtImage,
   },
   {
     id: "gambling",
@@ -86,7 +97,7 @@ export default function Category() {
       <div className="min-w-0 w-[calc(100dvw-2rem)] overflow-x-scroll scrollbar-hidden">
         <div className="flex gap-4">
           {AllCategories.map(a => (
-            <CategoryLink key={a.id} id={a.id} name={a.name} icon={a.icon} />
+            <CategoryLink key={a.id} id={`internal:${a.id}`} name={a.name} icon={a.icon} />
           ))}
         </div>
       </div>

src/pages/profile-page.css

@@ -47,22 +47,6 @@
   box-shadow: 0 0 0 2px black;
 }
 
-.stream-item .video-tile h3 {
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  margin: 6px 0 0 0;
-}
-
-.stream-item .timestamp {
-  color: #adadad;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-}
-
 .profile-page .live-button span {
   display: none;
 }

src/pages/profile-page.tsx

@@ -8,7 +8,7 @@ import { FormattedMessage } from "react-intl";
 
 import { Icon } from "@/element/icon";
 import { SendZapsDialog } from "@/element/send-zap";
-import { VideoTile } from "@/element/video-tile";
+import { StreamTile } from "@/element/stream/stream-tile";
 import { FollowButton } from "@/element/follow-button";
 import { MuteButton } from "@/element/mute-button";
 import { useProfile } from "@/hooks/profile";
@@ -147,7 +147,7 @@ function ProfileStreamList({ streams }: { streams: Array<TaggedNostrEvent> }) {
     <VideoGrid>
       {streams.map(ev => (
         <div key={ev.id} className="flex flex-col gap-1">
-          <VideoTile ev={ev} showAuthor={false} showStatus={false} style="grid" />
+          <StreamTile ev={ev} showAuthor={false} showStatus={false} style="grid" />
           <span className="text-neutral-500">
             <FormattedMessage
               defaultMessage="Streamed on {date}"

src/pages/video.tsx

@@ -13,7 +13,7 @@ import { FormattedMessage } from "react-intl";
 
 import { useMemo } from "react";
 import classNames from "classnames";
-import { VideoTile } from "@/element/video-tile";
+import { StreamTile } from "@/element/stream/stream-tile";
 import { VIDEO_KIND } from "@/const";
 import { VideoInfo } from "@/service/video/info";
 import { VideoPlayerContextProvider, useVideoPlayerContext } from "@/element/video/context";
@@ -125,7 +125,7 @@ function UpNext({ pubkey, exclude }: { pubkey: string; exclude: Array<NostrLink>
         <FormattedMessage defaultMessage="More Videos" />
       </h3>
       {sorted.map(a => (
-        <VideoTile ev={a} key={a.id} showStatus={false} style="list" className="h-[100px]" showAvatar={false} />
+        <StreamTile ev={a} key={a.id} showStatus={false} style="list" className="h-[100px]" showAvatar={false} />
       ))}
     </div>
   );

src/pages/videos.tsx

@@ -1,10 +1,10 @@
 import { VIDEO_KIND } from "@/const";
 import VideoGrid from "@/element/video-grid";
-import { VideoTile } from "@/element/video-tile";
 import { findTag } from "@/utils";
 import { RequestBuilder } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 import { FormattedMessage } from "react-intl";
+import { VideoTile } from "@/element/video/video-tile";
 
 export function VideosPage() {
   const rb = new RequestBuilder("videos");
@@ -26,7 +26,7 @@ export function VideosPage() {
       <br />
       <VideoGrid>
         {sorted.map(a => (
-          <VideoTile ev={a} key={a.id} showStatus={false} style="grid" />
+          <VideoTile ev={a} key={a.id} style="grid" />
         ))}
       </VideoGrid>
     </div>

src/service/video/info.ts

@@ -106,7 +106,7 @@ export class VideoInfo {
    */
   bestPoster(): MediaPayload | undefined {
     const best = this.media
-      .filter(a => a.dimensions && (a.image?.length ?? 0) > 0)
+      .filter(a => (a.image?.length ?? 0) > 0)
       .sort((a, b) => {
         const aSize = a.dimensions![0] * a.dimensions![1];
         const bSize = b.dimensions![0] * b.dimensions![1];