feat: default category images

chore: video/stream-tile split

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>