add like button and report button

src/app/channel/page.tsx

@@ -1,4 +1,5 @@
 import { AppQueryProps } from "@/types"
+
 import { Main } from "../main"
 import { getChannel } from "../server/actions/ai-tube-hf/getChannel"
 import { getChannelVideos } from "../server/actions/ai-tube-hf/getChannelVideos"
@@ -6,10 +7,11 @@ import { getChannelVideos } from "../server/actions/ai-tube-hf/getChannelVideos"
 export default async function ChannelPage({ searchParams: { c: channelId } }: AppQueryProps) {
   const channel = await getChannel({ channelId, neverThrow: true })
 
-  const publicVideos = await getChannelVideos({
+  const publicChannelVideos = await getChannelVideos({
     channel: channel,
     status: "published",
+    neverThrow: true,
   })
   
-  return (<Main channel={channel} publicVideos={publicVideos} />)
+  return (<Main channel={channel} publicChannelVideos={publicChannelVideos} />)
 }

src/app/interface/action-button/index.tsx

@@ -14,11 +14,13 @@ export const actionButtonClassName = cn(
 export function ActionButton({
   className,
   children,
-  href
+  href,
+  onClick,
 }: {
   className?: string
   children?: ReactNode
   href?: string
+  onClick?: () => void
 }) {
 
   const classNames = cn(
@@ -34,7 +36,11 @@ export function ActionButton({
     )
   }
   return (
-    <div className={classNames}>
+    <div className={classNames} onClick={() => {
+      try {
+        onClick?.()
+    } catch (err) {}
+    }}>
       {children}
     </div>
   )

src/app/interface/left-menu/index.tsx

@@ -5,7 +5,7 @@ import { MdVideoLibrary } from "react-icons/md"
 import { RiHome8Line } from "react-icons/ri"
 import { PiRobot } from "react-icons/pi"
 import { CgProfile } from "react-icons/cg"
-import { HiOutlineMusicNote } from "react-icons/hi"
+import { MdOutlinePlayCircleOutline } from "react-icons/md";
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
@@ -49,7 +49,7 @@ export function LeftMenu() {
         {/*
         <Link href="/music">
           <MenuItem
-            icon={<HiOutlineMusicNote className="h-5 w-5" />}
+            icon={<MdOutlinePlayCircleOutline className="h-6.5 w-6.5" />}
             selected={view === "public_music_videos"}
             >
             Music

src/app/interface/like-button/generic.tsx

@@ -0,0 +1,81 @@
+import { RiThumbUpLine } from "react-icons/ri"
+import { RiThumbUpFill } from "react-icons/ri"
+import { RiThumbDownLine } from "react-icons/ri"
+import { RiThumbDownFill } from "react-icons/ri"
+
+import { cn } from "@/lib/utils"
+
+export const likeButtonClassName = cn(
+  `flex flex-row`,
+  `items-center justify-center text-center`,
+  `h-8 lg:h-9`,
+  `rounded-2xl`,
+  `text-xs lg:text-sm font-medium`,
+  `bg-neutral-700/50 text-zinc-100`,
+)
+
+export function GenericLikeButton({
+  className,
+  onLike,
+  onDislike,
+  isLikedByUser = false,
+  isDislikedByUser = false,
+  numberOfLikes = 0,
+  numberOfDislikes = 0,
+}: {
+  className?: string
+  onLike?: () => void
+  onDislike?: () => void
+  isLikedByUser?: boolean
+  isDislikedByUser?: boolean
+  numberOfLikes?: number
+  numberOfDislikes?: number
+}) {
+
+  const classNames = cn(
+    likeButtonClassName,
+    className,
+  )
+
+
+  return (
+    <div className={classNames}>
+      <div className={cn(
+        `flex flex-row items-center justify-center`,
+        `cursor-pointer rounded-l-full overflow-hidden`,
+        `hover:bg-neutral-700/90`,
+        `space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-3 lg:pr-4 h-8 lg:h-9`
+        )}
+        onClick={() => {
+          try {
+            onLike?.()
+          } catch (err) {
+
+          }}}
+        >
+        <div>{
+          isLikedByUser ? <RiThumbUpFill /> :  <RiThumbUpLine />
+        }</div>
+        <div>{numberOfLikes}</div>
+      </div>
+      <div className={cn(
+        `flex flex-row items-center justify-center`,
+        `cursor-pointer rounded-r-full overflow-hidden`,
+        `hover:bg-neutral-700/90`,
+        `space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-3 lg:pr-4 h-8 lg:h-9`
+      )}
+      onClick={() => {
+        try {
+          onDislike?.()
+        } catch (err) {
+
+        }}}
+      >
+        <div>{
+          isDislikedByUser ? <RiThumbDownFill /> :  <RiThumbDownLine />
+        }</div>
+        <div>{numberOfDislikes}</div>
+      </div>
+    </div>
+  )
+}

src/app/interface/like-button/index.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState, useTransition } from "react"
+import { VideoInfo, VideoRating } from "@/types"
+
+import { GenericLikeButton } from "./generic"
+import { getVideoRating, rateVideo } from "@/app/server/actions/stats"
+import { useLocalStorage } from "usehooks-ts"
+import { localStorageKeys } from "@/app/state/localStorageKeys"
+import { defaultSettings } from "@/app/state/defaultSettings"
+
+export function LikeButton({
+  video
+}: {
+  video?: VideoInfo
+}) {
+  const [_pending, startTransition] = useTransition()
+
+  const [rating, setRating] = useState<VideoRating>({
+    isLikedByUser: false,
+    isDislikedByUser: false,
+    numberOfLikes: 0,
+    numberOfDislikes: 0,
+  })
+
+  const [huggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
+
+  useEffect(() => {
+    startTransition(async () => {
+      if (!video || !video?.id) { return }
+
+      const freshRating = await getVideoRating(video.id, huggingfaceApiKey)
+      setRating(freshRating)
+
+    })
+  }, [video?.id, huggingfaceApiKey])
+
+  if (!video) { return null }
+  
+  if (!huggingfaceApiKey) { return null }
+
+  const handleLike = huggingfaceApiKey ? () => {
+    // we use premeptive update
+    setRating({
+      ...rating,
+      isLikedByUser: true,
+      isDislikedByUser: false,
+      numberOfLikes: rating.numberOfLikes + 1,
+      numberOfDislikes: rating.numberOfDislikes - 1,
+    })
+    startTransition(async () => {
+      const freshRating = await rateVideo(video.id, true, huggingfaceApiKey)
+      setRating(freshRating)
+    })
+  } : undefined
+
+  const handleDislike = huggingfaceApiKey ? () => {
+    setRating({
+      ...rating,
+      isLikedByUser: false,
+      isDislikedByUser: true,
+      numberOfLikes: rating.numberOfLikes - 1,
+      numberOfDislikes: rating.numberOfDislikes + 1,
+    })
+    startTransition(async () => {
+      const freshRating = await rateVideo(video.id, false, huggingfaceApiKey)
+      setRating(freshRating)
+    })
+  } : undefined
+
+  return (
+    <GenericLikeButton
+      {...rating}
+      onLike={handleLike}
+      onDislike={handleDislike}
+    />
+  )
+}

src/app/interface/media-list/index.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@/lib/utils"
+import { MediaDisplayLayout, VideoInfo } from "@/types"
+import { TrackCard } from "../track-card"
+import { VideoCard } from "../video-card"
+
+export function MediaList({
+  items,
+  type = "video",
+  layout = "grid",
+  className = "",
+  onSelect,
+}: {
+  items: VideoInfo[]
+
+  /**
+   * Layout mode
+   * 
+   * This isn't necessarily based on screen size, it can also be:
+   * - based on the device type (eg. a smart TV)
+   * - a design choice for a particular page
+   */
+  layout?: MediaDisplayLayout
+
+  /**
+   * Content type
+   * 
+   * Used to change the way we display elements
+   */
+  type?: "video" | "track"
+
+  className?: string
+
+  onSelect?: (media: VideoInfo) => void
+}) {
+  
+  return (
+    <div
+      className={cn(
+        layout === "table"
+          ? `flex flex-col` :
+        layout === "grid"
+          ? `grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4` :
+        layout === "vertical"
+          ? `grid grid-cols-1 gap-2`
+          : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
+        className,
+      )}
+    >
+    {items.map((media, i) => {
+      const Component = type === "track" ? TrackCard : VideoCard
+    
+      return (
+        <Component
+          key={media.id}
+          media={media}
+          className="w-full"
+          layout={layout}
+          onSelect={onSelect}
+          index={i}
+        />
+      )
+    })}
+    </div>
+  )
+}

src/app/interface/recommended-videos/index.tsx

@@ -24,14 +24,14 @@ export function RecommendedVideos({
         sortBy: "random",
         niceToHaveTags: video.tags,
         ignoreVideoIds: [video.id],
-        maxVideos: 16
+        maxVideos: 16,
       }))
     })
   }, video.tags)
 
   return (
     <VideoList
-      videos={recommendedVideos}
+      items={recommendedVideos}
       layout="vertical"
     />
   )

src/app/interface/top-header/index.tsx

@@ -71,16 +71,18 @@ export function TopHeader() {
           <div className={cn(
             `flex flex-row items-center justify-start`,
             `transition-all duration-200 ease-in-out`,
-            `cursor-pointer`,
+            // `cursor-pointer`,
              "pt-2 text-3xl space-x-1",
-             "scale-80 ml-1 mb-2",
+             view === "public_music_videos" ? "pl-1" : "",
               pathway.className,
               isNormalSize
               ? "sm:scale-125 sm:ml-4 sm:mb-4" : "sm:scale-100 sm:mb-2"
             )}
+            /*
             onClick={() => {
-              setView("home")
+              setView(view === "public_music_videos" ? "public_music_videos" : "home")
             }}
+            */
             >
             <div className="mr-1">
               <div className={cn(
@@ -94,7 +96,7 @@ export function TopHeader() {
               </div>
             </div>
             <div className="font-semibold">
-              AiTube
+              {view === "public_music_videos" ? "AiTube Music" : "AiTube"}
             </div>
           </div>
         </div>

src/app/interface/track-card/index.tsx

@@ -0,0 +1,230 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import Link from "next/link"
+import { RiCheckboxCircleFill } from "react-icons/ri"
+
+import { cn } from "@/lib/utils"
+import { MediaDisplayLayout, VideoInfo } from "@/types"
+import { formatDuration } from "@/lib/formatDuration"
+import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { isCertifiedUser } from "@/app/certification"
+import { transparentImage } from "@/lib/transparentImage"
+import { DefaultAvatar } from "../default-avatar"
+
+export function TrackCard({
+  media,
+  className = "",
+  layout = "grid",
+  onSelect,
+  index
+}: {
+  media: VideoInfo
+  className?: string
+  layout?: MediaDisplayLayout
+  onSelect?: (media: VideoInfo) => void
+  index: number
+ }) {
+  const ref = useRef<HTMLVideoElement>(null)
+  const [duration, setDuration] = useState(0)
+
+  const [channelThumbnail, setChannelThumbnail] = useState(media.channel.thumbnail)
+  const [mediaThumbnail, setMediaThumbnail] = useState(
+    `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${media.id}.webp`
+  )
+  const [mediaThumbnailReady, setMediaThumbnailReady] = useState(false)
+  const [shouldLoadMedia, setShouldLoadMedia] = useState(false)
+
+  const isTable = layout === "table"
+  const isCompact = layout === "vertical"
+
+  const handlePointerEnter = () => {
+    // ref.current?.load()
+    ref.current?.play()
+  }
+  const handlePointerLeave = () => {
+    ref.current?.pause()
+    // ref.current?.load()
+  }
+  const handleLoad = () => {
+    if (ref.current?.readyState) {
+      setDuration(ref.current.duration)
+    }
+  }
+
+  const handleClick = () => {
+    onSelect?.(media)
+  }
+
+  const handleBadChannelThumbnail = () => {
+    try {
+      if (channelThumbnail) {
+        setChannelThumbnail("")
+      }
+    } catch (err) {
+      
+    }
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShouldLoadMedia(true)
+    }, index * 1500)
+  }, [index])
+
+  return (
+  <Link href={`/music?m=${media.id}`}>
+    <div
+      className={cn(
+        `w-full flex`,
+        isTable ? `flex-row h-14 space-x-2 px-2 py-2 rounded-lg` :
+        isCompact ? `flex-row h-24 py-1 space-x-2` :
+        `flex-col space-y-3`,
+        `bg-line-900`,
+        `cursor-pointer`,
+        index % 2 ? "bg-neutral-800/40" : "",
+        className,
+      )}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      // onClick={handleClick}
+      >
+        {/* THUMBNAIL BLOCK */}
+        <div
+          className={cn(
+            `flex items-center justify-center`,
+            `rounded overflow-hidden`,
+            isTable ? ` flex-col` :
+            isCompact ? ` flex-col w-42 h-42` :
+            ` flex-col aspect-square`
+          )}
+        >
+          <div className={cn(
+            `relative`,
+            `aspect-square`,
+            isTable ? "w-full h-full" : isCompact ? `w-42 h-42` : ``
+          )}>
+            {!isTable && mediaThumbnailReady && shouldLoadMedia
+              ? <video
+                // mute the video
+                muted
+
+                // prevent iOS from attempting to open the video in full screen, which is annoying
+                playsInline
+
+                ref={ref}
+                src={media.assetUrl}
+                className={cn(
+                  `w-full h-full`,
+                  `aspect-square`,
+                  duration > 0 ? `opacity-100`: 'opacity-0',
+                  `transition-all duration-500`,
+                  )}
+                onLoadedMetadata={handleLoad}
+
+              /> : null}
+            <img
+              src={mediaThumbnail}
+              className={cn(
+                `absolute`,
+                `aspect-square object-cover`,
+                `rounded-lg overflow-hidden`,
+                mediaThumbnailReady ? `opacity-100`: 'opacity-0',
+                `hover:opacity-0 w-full h-full top-0 z-30`,
+                //`pointer-events-none`,
+                `transition-all duration-500 hover:delay-300 ease-in-out`,
+              )}
+              onMouseEnter={() => {
+                setShouldLoadMedia(true)
+              }}
+              onLoad={() => {
+                setMediaThumbnailReady(true)
+              }}
+              onError={() => {
+                setMediaThumbnail(transparentImage)
+                setMediaThumbnailReady(false)
+              }}
+            />
+          </div>
+
+          {isTable ? null : <div className={cn(
+            // `aspect-video`,
+            `z-40`,
+            `w-full flex flex-row items-end justify-end`
+            )}>
+              <div className={cn(
+                `-mt-8`,
+                `mr-0`,
+              )}
+              >
+                <div className={cn(
+                  `mb-[5px]`,
+                  `mr-[5px]`,
+                  `flex flex-col items-center justify-center text-center`,
+                  `bg-neutral-900 rounded`,
+                  `text-2xs font-semibold px-[3px] py-[1px]`,
+                )}
+                >{formatDuration(duration)}</div>
+              </div>
+          </div>}
+        </div>
+
+        {/* TEXT BLOCK */}
+        <div className={cn(
+          `flex flex-row`,
+          isCompact ? `w-40 lg:w-44 xl:w-51` : `space-x-4`,
+        )}>
+          {
+          isTable || isCompact ? null
+          : channelThumbnail ? <div className="flex flex-col">
+            <div className="flex w-9 rounded-full overflow-hidden">
+              <img
+                src={channelThumbnail}
+                onError={handleBadChannelThumbnail}
+              />
+            </div>
+          </div>
+          : <DefaultAvatar
+              username={media.channel.datasetUser}
+              bgColor="#fde047"
+              textColor="#1c1917"
+              width={36}
+              roundShape
+            />}
+          <div className={cn(
+            `flex flex-col`,
+            isTable ? `justify-center` :
+            isCompact ?  `` : `flex-grow`
+          )}>
+            <h3 className={cn(
+              `text-zinc-100 mb-0 line-clamp-2`,
+              isTable ? `font-normal text-2xs md:text-xs lg:text-sm mb-0.5` : 
+              isCompact ? `font-medium text-2xs md:text-xs lg:text-sm mb-1.5` :
+              `font-medium text-base`
+            )}>{media.label}</h3>
+            <div className={cn(
+              `flex flex-row items-center`,
+              `text-neutral-400 font-normal space-x-1`,
+              isTable ? `text-2xs md:text-xs lg:text-sm` :
+              isCompact ? `text-3xs md:text-2xs lg:text-xs` : `text-sm`
+              )}>
+              <div>{media.channel.label}</div>
+              {isCertifiedUser(media.channel.datasetUser) ? <div><RiCheckboxCircleFill className="opacity-40" /></div> : null}
+            </div>
+            
+            {isTable ? null : <div className={cn(
+              `flex flex-row`,
+              `text-neutral-400 font-normal`,
+              isCompact ? `text-2xs lg:text-xs` : `text-sm`,
+              `space-x-1`
+            )}>
+            <div>{media.numberOfViews} views</div>
+            <div className="font-semibold scale-125">·</div>
+            <div>{formatTimeAgo(media.updatedAt)}</div>
+            </div>}
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}

src/app/interface/track-list/index.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps } from "react"
+
+import { MediaList } from "../media-list"
+
+export function TrackList(props: Omit<ComponentProps<typeof MediaList>, "type">) {
+  
+  return (
+    <MediaList
+      {...props}
+      type="track"
+    />
+  )
+}

src/app/interface/video-card/index.tsx

@@ -1,12 +1,11 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react"
-import dynamic from "next/dynamic"
 import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types"
+import { MediaDisplayLayout, VideoInfo } from "@/types"
 import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
@@ -14,29 +13,29 @@ import { transparentImage } from "@/lib/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
 
 export function VideoCard({
-  video,
+  media,
   className = "",
-  layout = "normal",
+  layout = "grid",
   onSelect,
   index
 }: {
-  video: VideoInfo
+  media: VideoInfo
   className?: string
-  layout?: "normal" | "compact"
-  onSelect?: (video: VideoInfo) => void
+  layout?: MediaDisplayLayout
+  onSelect?: (media: VideoInfo) => void
   index: number
  }) {
   const ref = useRef<HTMLVideoElement>(null)
   const [duration, setDuration] = useState(0)
 
-  const [channelThumbnail, setChannelThumbnail] = useState(video.channel.thumbnail)
-  const [videoThumbnail, setVideoThumbnail] = useState(
-    `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${video.id}.webp`
+  const [channelThumbnail, setChannelThumbnail] = useState(media.channel.thumbnail)
+  const [mediaThumbnail, setMediaThumbnail] = useState(
+    `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${media.id}.webp`
   )
-  const [videoThumbnailReady, setVideoThumbnailReady] = useState(false)
-  const [shouldLoadVideo, setShouldLoadVideo] = useState(false)
+  const [mediaThumbnailReady, setMediaThumbnailReady] = useState(false)
+  const [shouldLoadMedia, setShouldLoadMedia] = useState(false)
 
-  const isCompact = layout === "compact"
+  const isCompact = layout === "vertical"
 
   const handlePointerEnter = () => {
     // ref.current?.load()
@@ -53,7 +52,7 @@ export function VideoCard({
   }
 
   const handleClick = () => {
-    onSelect?.(video)
+    onSelect?.(media)
   }
 
   const handleBadChannelThumbnail = () => {
@@ -68,12 +67,12 @@ export function VideoCard({
 
   useEffect(() => {
     setTimeout(() => {
-      setShouldLoadVideo(true)
+      setShouldLoadMedia(true)
     }, index * 1500)
   }, [index])
 
   return (
-  <Link href={`/watch?v=${video.id}`}>
+  <Link href={`/watch?v=${media.id}`}>
     <div
       className={cn(
         `w-full flex`,
@@ -98,7 +97,7 @@ export function VideoCard({
             `relative w-full`,
             isCompact ? `w-42 h-[94px]` : `aspect-video`
           )}>
-            {videoThumbnailReady && shouldLoadVideo
+            {mediaThumbnailReady && shouldLoadMedia
               ? <video
                 // mute the video
                 muted
@@ -107,7 +106,7 @@ export function VideoCard({
                 playsInline
 
                 ref={ref}
-                src={video.assetUrl}
+                src={media.assetUrl}
                 className={cn(
                   `w-full h-full`,
                   `aspect-video`,
@@ -118,26 +117,26 @@ export function VideoCard({
 
               /> : null}
             <img
-              src={videoThumbnail}
+              src={mediaThumbnail}
               className={cn(
                 `absolute`,
                 `aspect-video`,
                // `aspect-video object-cover`,
                 `rounded-lg overflow-hidden`,
-                videoThumbnailReady ? `opacity-100`: 'opacity-0',
+                mediaThumbnailReady ? `opacity-100`: 'opacity-0',
                 `hover:opacity-0 w-full h-full top-0 z-30`,
                 //`pointer-events-none`,
                 `transition-all duration-500 hover:delay-300 ease-in-out`,
               )}
               onMouseEnter={() => {
-                setShouldLoadVideo(true)
+                setShouldLoadMedia(true)
               }}
               onLoad={() => {
-                setVideoThumbnailReady(true)
+                setMediaThumbnailReady(true)
               }}
               onError={() => {
-                setVideoThumbnail(transparentImage)
-                setVideoThumbnailReady(false)
+                setMediaThumbnail(transparentImage)
+                setMediaThumbnailReady(false)
               }}
             />
           </div>
@@ -180,7 +179,7 @@ export function VideoCard({
             </div>
           </div>
           : <DefaultAvatar
-              username={video.channel.datasetUser}
+              username={media.channel.datasetUser}
               bgColor="#fde047"
               textColor="#1c1917"
               width={36}
@@ -193,14 +192,14 @@ export function VideoCard({
             <h3 className={cn(
               `text-zinc-100 font-medium mb-0 line-clamp-2`,
               isCompact ? `text-2xs md:text-xs lg:text-sm mb-1.5` : `text-base`
-            )}>{video.label}</h3>
+            )}>{media.label}</h3>
             <div className={cn(
               `flex flex-row items-center`,
               `text-neutral-400 font-normal space-x-1`,
               isCompact ? `text-3xs md:text-2xs lg:text-xs` : `text-sm`
               )}>
-              <div>{video.channel.label}</div>
-              {isCertifiedUser(video.channel.datasetUser) ? <div><RiCheckboxCircleFill className="" /></div> : null}
+              <div>{media.channel.label}</div>
+              {isCertifiedUser(media.channel.datasetUser) ? <div><RiCheckboxCircleFill className="" /></div> : null}
             </div>
             
             <div className={cn(
@@ -209,9 +208,9 @@ export function VideoCard({
               isCompact ? `text-2xs lg:text-xs` : `text-sm`,
               `space-x-1`
             )}>
-            <div>{video.numberOfViews} views</div>
+            <div>{media.numberOfViews} views</div>
             <div className="font-semibold scale-125">·</div>
-            <div>{formatTimeAgo(video.updatedAt)}</div>
+            <div>{formatTimeAgo(media.updatedAt)}</div>
             </div>
           </div>
         </div>

src/app/interface/video-list/index.tsx

@@ -1,51 +1,13 @@
-import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types"
+import { ComponentProps } from "react"
 
-import { VideoCard } from "../video-card"
+import { MediaList } from "../media-list"
 
-export function VideoList({
-  videos,
-  layout = "grid",
-  className = "",
-  onSelect,
-}: {
-  videos: VideoInfo[]
-
-  /**
-   * Layout mode
-   * 
-   * This isn't necessarily based on screen size, it can also be:
-   * - based on the device type (eg. a smart TV)
-   * - a design choice for a particular page
-   */
-  layout?: "grid" | "horizontal" | "vertical"
-
-  className?: string
-
-  onSelect?: (video: VideoInfo) => void
-}) {
+export function VideoList(props: Omit<ComponentProps<typeof MediaList>, "type">) {
   
   return (
-    <div
-      className={cn(
-        layout === "grid"
-          ? `grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
-        : layout === "vertical"
-          ? `grid grid-cols-1 gap-2`
-          : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
-        className,
-      )}
-    >
-    {videos.map((video, i) => (
-      <VideoCard
-        key={video.id}
-        video={video}
-        className="w-full"
-        layout={layout === "vertical" ? "compact" : "normal"}
-        onSelect={onSelect}
-        index={i}
-      />
-    ))}
-    </div>
+    <MediaList
+      {...props}
+      type="video"
+    />
   )
 }

src/app/main.tsx

@@ -8,10 +8,12 @@ import { UserChannelView } from "./views/user-channel-view"
 import { PublicVideoView } from "./views/public-video-view"
 import { UserAccountView } from "./views/user-account-view"
 import { NotFoundView } from "./views/not-found-view"
-import { ChannelInfo, VideoInfo } from "@/types"
+import { ChannelInfo, InterfaceView, VideoInfo } from "@/types"
 import { useEffect } from "react"
 import { usePathname, useRouter } from "next/navigation"
 import { TubeLayout } from "./interface/tube-layout"
+import { PublicMusicVideosView } from "./views/public-music-videos-view"
+import { getCollectionKey } from "@/lib/getCollectionKey"
 
 // this is where we transition from the server-side space
 // and the client-side space
@@ -22,15 +24,24 @@ import { TubeLayout } from "./interface/tube-layout"
 // one benefit of doing this is that we will able to add some animations/transitions
 // more easily
 export function Main({
-  video,
+  // view,
+  publicVideo,
   publicVideos,
+  publicChannelVideos,
+  publicTracks,
+  publicTrack,
   channel,
 }: {
  // server side params
- video?: VideoInfo
+ // view?: InterfaceView
+ publicVideo?: VideoInfo
  publicVideos?: VideoInfo[]
+ publicChannelVideos?: VideoInfo[]
+ publicTracks?: VideoInfo[]
+ publicTrack?: VideoInfo
  channel?: ChannelInfo
 }) {
+  // this could be also a parameter of main, where we pass this manually
   const pathname = usePathname()
   const router = useRouter()
 
@@ -39,51 +50,80 @@ export function Main({
   const setPathname = useStore(s => s.setPathname)
   const setPublicChannel = useStore(s => s.setPublicChannel)
   const setPublicVideos = useStore(s => s.setPublicVideos)
-
-  const videoId = `${video?.id || ""}`
-  // console.log("Main video= "+ videoId)
-
-  const publicVideoIds = (publicVideos || []).map(v => v.id || "").filter(x => x)
+  const setPublicChannelVideos = useStore(s => s.setPublicChannelVideos)
+  const setPublicTracks = useStore(s => s.setPublicTracks)
+  const setPublicTrack = useStore(s => s.setPublicTrack)
 
   useEffect(() => {
     if (!publicVideos?.length) { return }
     // note: it is important to ALWAYS set the current video to videoId
     // even if it's undefined
     setPublicVideos(publicVideos)
-  }, publicVideoIds)
+  }, [getCollectionKey(publicVideos)])
+
+
+  useEffect(() => {
+    if (!publicChannelVideos?.length) { return }
+    // note: it is important to ALWAYS set the current video to videoId
+    // even if it's undefined
+    setPublicChannelVideos(publicChannelVideos)
+  }, [getCollectionKey(publicChannelVideos)])
+
+  useEffect(() => {
+    if (!publicTracks?.length) { return }
+    // note: it is important to ALWAYS set the current video to videoId
+    // even if it's undefined
+    setPublicTracks(publicTracks)
+  }, [getCollectionKey(publicTracks)])
+
 
   useEffect(() => {
     // note: it is important to ALWAYS set the current video to videoId
     // even if it's undefined
-    setPublicVideo(video)
-
-    if (videoId) {
-      // this is a hack for hugging face:
-      // we allow the ?v=<id> param on the root of the domain
-      if (pathname !== "/watch") {
-        // console.log("we are on huggingface apparently!")
-        router.replace(`/watch?v=${videoId}`)
-      }
+    setPublicTrack(publicTrack)
+
+    if (!publicTrack || !publicTrack?.id) { return }
+
+    // this is a hack for hugging face:
+    // we allow the ?v=<id> param on the root of the domain
+    if (pathname !== "/music") {
+      // console.log("we are on huggingface apparently!")
+      router.replace(`/music?m=${publicTrack.id}`)
     }
-  }, [videoId])
+  }, [publicTrack?.id])
+
+  useEffect(() => {
+    // note: it is important to ALWAYS set the current video to videoId
+    // even if it's undefined
+    setPublicVideo(publicVideo)
+
+    if (!publicVideo || !publicVideo?.id) { return }
+
+    // this is a hack for hugging face:
+    // we allow the ?v=<id> param on the root of the domain
+    if (pathname !== "/watch") {
+      // console.log("we are on huggingface apparently!")
+      router.replace(`/watch?v=${publicVideo.id}`)
+    }
+    
+  }, [publicVideo?.id])
 
-  const channelId = `${channel?.id || ""}`
-  // console.log("Main video= "+ videoId)
 
   useEffect(() => {
     // note: it is important to ALWAYS set the current video to videoId
     // even if it's undefined
     setPublicChannel(channel)
 
-    if (channelId) {
-      // this is a hack for hugging face:
-      // we allow the ?v=<id> param on the root of the domain
-      if (pathname !== "/channel") {
-        // console.log("we are on huggingface apparently!")
-        router.replace(`/channel?v=${channelId}`)
-      }
+    if (!channel || !channel?.id) { return }
+
+    // this is a hack for hugging face:
+    // we allow the ?v=<id> param on the root of the domain
+    if (pathname !== "/channel") {
+      // console.log("we are on huggingface apparently!")
+      router.replace(`/channel?v=${channel.id}`)
     }
-  }, [channelId])
+  
+  }, [channel?.id])
 
 
   // this is critical: it sync the current route (coming from server-side)
@@ -99,6 +139,7 @@ export function Main({
     <TubeLayout>
       {view === "home" && <HomeView />}
       {view === "public_video" && <PublicVideoView />}
+      {view === "public_music_videos" && <PublicMusicVideosView />}
       {view === "public_channels" && <PublicChannelsView />}
       {view === "public_channel" && <PublicChannelView />}
       {/*view === "user_videos" && <UserVideosView />*/}

src/app/music/index.tsx

@@ -1,9 +0,0 @@
-
-import { Main } from "../main"
-// import { getChannels } from "../server/actions/ai-tube-hf/getChannels"
-
-export default async function MusicPage() {
-  // const channels = await getChannels()
-
-  return (<Main />)
-}

src/app/music/page.tsx

@@ -0,0 +1,88 @@
+
+import { AppQueryProps } from "@/types"
+import { Main } from "../main"
+import { getVideos } from "../server/actions/ai-tube-hf/getVideos"
+import { getVideo } from "../server/actions/ai-tube-hf/getVideo"
+import { Metadata } from "next"
+
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
+export async function generateMetadata(
+  { params, searchParams: { m: mediaId } }: AppQueryProps,
+  // parent: ResolvingMetadata
+): Promise<Metadata> {
+  // read route params
+
+  const metadataBase = new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube')
+
+  try {
+    const publicTrack = await getVideo({ videoId: mediaId, neverThrow: true })
+
+    if (!publicTrack) {
+      throw new Error("Video not found")
+    }
+
+
+    const openGraph = {
+      //  'music.song' | 'music.album' | 'music.playlist' | 'music.radio_station' 
+      // | 'profile' | 'website' | 'video.tv_show' | 'video.other' | 'video.movie' | 'video.episode';
+      type: "music.song",
+
+      duration: publicTrack.duration,
+
+      // albums?: null | string | URL | OGAlbum | Array<string | URL | OGAlbum>;
+      musicians: [publicTrack.channel.label, "AI (MusicGen)"],
+
+      // url: "https://example.com",
+      title: `${publicTrack.channel.label} - ${publicTrack.label}` || "", // put the video title here
+      description: publicTrack.description || "", // put the vide description here
+      siteName: "AiTube Music",
+      images: [
+        `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${publicTrack.id}.webp`
+      ],
+      audio: [
+        {
+          "url": publicTrack.assetUrl
+        }
+      ]
+    }
+
+    return {
+      title: `${publicTrack.label} - AiTube Music`,
+      metadataBase,
+      openGraph,
+    }
+  } catch (err) {
+    return {
+      title: "AiTube Music",
+      metadataBase,
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: "AiTube Music", // put the video title here
+        description: "", // put the vide description here
+        siteName: "AiTube Music",
+  
+        videos: [],
+        images: [],
+      },
+    }
+  }
+}
+
+export default async function MusicPage({ searchParams: { m: mediaId } }: AppQueryProps) {
+  const publicTracks = await getVideos({
+    sortBy: "date",
+    mandatoryTags: ["music"],
+    maxVideos: 25,
+    neverThrow: true,
+  })
+
+  // at some point we will probably migrate to a getMedia({ mediaId }) instead
+  const publicTrack = await getVideo({
+    videoId: mediaId,
+    neverThrow: true
+  })
+  
+  return (<Main publicTracks={publicTracks} publicTrack={publicTrack} />)
+}

src/app/page.tsx

@@ -58,12 +58,12 @@ export async function generateMetadata(
     }
   } catch (err) {
     return {
-      title: "AI Tube - 404 Video Not Found",
+      title: "AI Tube",
       metadataBase,
       openGraph: {
         type: "website",
         // url: "https://example.com",
-        title: "AI Tube - 404 Not Found", // put the video title here
+        title: "AI Tube", // put the video title here
         description: "", // put the vide description here
         siteName: "AI Tube",
   
@@ -77,8 +77,11 @@ export async function generateMetadata(
 // we have routes but on Hugging Face we don't see them
 // so.. let's use the work around
 export default async function Page({ searchParams: { v: videoId } }: AppQueryProps) {
-  const video = await getVideo({ videoId, neverThrow: true })
+  const publicVideo = await getVideo({
+    videoId,
+    neverThrow: true
+  })
   return (
-    <Main video={video} />
+    <Main publicVideo={publicVideo} />
   )
 }

src/app/playlist/page.tsx

@@ -0,0 +1,88 @@
+
+import { AppQueryProps } from "@/types"
+import { Main } from "../main"
+import { getVideos } from "../server/actions/ai-tube-hf/getVideos"
+import { getVideo } from "../server/actions/ai-tube-hf/getVideo"
+import { Metadata } from "next"
+
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
+export async function generateMetadata(
+  { params, searchParams: { m: mediaId } }: AppQueryProps,
+  // parent: ResolvingMetadata
+): Promise<Metadata> {
+  // read route params
+
+  const metadataBase = new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube')
+
+  try {
+    const publicTrack = await getVideo({ videoId: mediaId, neverThrow: true })
+
+    if (!publicTrack) {
+      throw new Error("Video not found")
+    }
+
+
+    const openGraph = {
+      //  'music.song' | 'music.album' | 'music.playlist' | 'music.radio_station' 
+      // | 'profile' | 'website' | 'video.tv_show' | 'video.other' | 'video.movie' | 'video.episode';
+      type: "music.playlist",
+
+      songs: [], // TODO!
+
+      // albums?: null | string | URL | OGAlbum | Array<string | URL | OGAlbum>;
+      creators: [publicTrack.channel.label, "AI (MusicGen)"],
+
+      // url: "https://example.com",
+      title: `${publicTrack.channel.label} - ${publicTrack.label}` || "", // put the video title here
+      description: publicTrack.description || "", // put the vide description here
+      siteName: "AiTube Music",
+      images: [
+        `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${publicTrack.id}.webp`
+      ],
+      audio: [
+        {
+          "url": publicTrack.assetUrl
+        }
+      ]
+    }
+
+    return {
+      title: `${publicTrack.label} - AiTube Music`,
+      metadataBase,
+      openGraph,
+    }
+  } catch (err) {
+    return {
+      title: "AiTube Music",
+      metadataBase,
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: "AiTube Music", // put the video title here
+        description: "", // put the vide description here
+        siteName: "AiTube Music",
+  
+        videos: [],
+        images: [],
+      },
+    }
+  }
+}
+
+export default async function PlaylistPage({ searchParams: { m: mediaId } }: AppQueryProps) {
+  const publicTracks = await getVideos({
+    sortBy: "date",
+    mandatoryTags: ["music"],
+    maxVideos: 25,
+    neverThrow: true,
+  })
+
+  // at some point we will probably migrate to a getMedia({ mediaId }) instead
+  const publicTrack = await getVideo({
+    videoId: mediaId,
+    neverThrow: true
+  })
+  
+  return (<Main publicTracks={publicTracks} publicTrack={publicTrack} />)
+}

src/app/server/actions/ai-tube-hf/getChannelVideos.ts

@@ -12,68 +12,81 @@ import { orientationToWidthHeight } from "../utils/orientationToWidthHeight"
 export async function getChannelVideos({
   channel,
   status,
+  neverThrow,
 }: {
   channel?: ChannelInfo
 
   // filter videos by status
   status?: VideoStatus
+
+  neverThrow?: boolean
 }): Promise<VideoInfo[]> {
 
   if (!channel) { return [] }
 
-  const videos = await getVideoRequestsFromChannel({
-    channel,
-    apiKey: adminApiKey,
-    renewCache: true
-  })
+  try {
+    const videos = await getVideoRequestsFromChannel({
+      channel,
+      apiKey: adminApiKey,
+      renewCache: true
+    })
 
-  // TODO: use a database instead
-  // normally 
-  const queued = await getVideoIndex({ status: "queued" })
-  const published = await getVideoIndex({ status: "published" })
+    // TODO: use a database instead
+    // normally 
+    const queued = await getVideoIndex({ status: "queued" })
+    const published = await getVideoIndex({ status: "published" })
 
-  const validVideos = videos.map(v => {
-   let video: VideoInfo = {
-      id: v.id,
-      status: "submitted",
-      label: v.label,
-      description: v.description,
-      prompt: v.prompt,
-      thumbnailUrl: v.thumbnailUrl,
-      model: v.model,
-      lora: v.lora,
-      style: v.style,
-      voice: v.voice,
-      music: v.music,
-      assetUrl: "",
-      numberOfViews: 0,
-      numberOfLikes: 0,
-      updatedAt: v.updatedAt,
-      tags: v.tags,
-      channel,
-      duration: v.duration || 0,
-      orientation: v.orientation,
-      ...orientationToWidthHeight(v.orientation),
-    }
+    const validVideos = videos.map(v => {
+    let video: VideoInfo = {
+        id: v.id,
+        status: "submitted",
+        label: v.label,
+        description: v.description,
+        prompt: v.prompt,
+        thumbnailUrl: v.thumbnailUrl,
+        model: v.model,
+        lora: v.lora,
+        style: v.style,
+        voice: v.voice,
+        music: v.music,
+        assetUrl: "",
+        numberOfViews: 0,
+        numberOfLikes: 0,
+        numberOfDislikes: 0,
+        updatedAt: v.updatedAt,
+        tags: v.tags,
+        channel,
+        duration: v.duration || 0,
+        orientation: v.orientation,
+        ...orientationToWidthHeight(v.orientation),
+      }
 
-    if (queued[v.id]) {
-      video = queued[v.id]
-    } else if (published[v.id]) {
-      video = published[v.id]
-    }
+      if (queued[v.id]) {
+        video = queued[v.id]
+      } else if (published[v.id]) {
+        video = published[v.id]
+      }
 
-    return video
-  }).filter(video => {
-    // if no filter is requested, we always return the video
-    if (!status || typeof status === "undefined") {
-      return true
-    }
+      return video
+    }).filter(video => {
+      // if no filter is requested, we always return the video
+      if (!status || typeof status === "undefined") {
+        return true
+      }
 
-    return video.status === status
-  })
+      return video.status === status
+    })
 
-  // ask Redis for the freshest stats
-  const results = await extendVideosWithStats(validVideos)
+    // ask Redis for the freshest stats
+    const results = await extendVideosWithStats(validVideos)
+
+    return results
+  } catch (err) {
+    if (neverThrow) {
+      console.error("failed to get channel videos:", err)
+      return []
+    }
 
-  return results
+    throw err
+  }
 }

src/app/server/actions/ai-tube-hf/getVideos.ts

@@ -14,6 +14,7 @@ export async function getVideos({
   sortBy = "date",
   ignoreVideoIds = [],
   maxVideos = HARD_LIMIT,
+  neverThrow = false,
 }: {
   // the videos MUST include those tags
   mandatoryTags?: string[]
@@ -29,73 +30,84 @@ export async function getVideos({
   ignoreVideoIds?: string[]
 
   maxVideos?: number
+
+  neverThrow?: boolean
 }): Promise<VideoInfo[]> {
-  // the index is gonna grow more and more,
-  // but in the future we will use some DB eg. Prisma or sqlite
-  const published = await getVideoIndex({
-    status: "published",
-    renewCache: true
-  })
-
-
-  let allPotentiallyValidVideos = Object.values(published)
-  
-  if (ignoreVideoIds.length) {
-    allPotentiallyValidVideos = allPotentiallyValidVideos.filter(video => !ignoreVideoIds.includes(video.id))
-  }
+  try {
+    // the index is gonna grow more and more,
+    // but in the future we will use some DB eg. Prisma or sqlite
+    const published = await getVideoIndex({
+      status: "published",
+      renewCache: true
+    })
+
+
+    let allPotentiallyValidVideos = Object.values(published)
+    
+    if (ignoreVideoIds.length) {
+      allPotentiallyValidVideos = allPotentiallyValidVideos.filter(video => !ignoreVideoIds.includes(video.id))
+    }
 
-  if (sortBy === "date") {
-    allPotentiallyValidVideos.sort(((a, b) => b.updatedAt.localeCompare(a.updatedAt)))
-  } else {
-    allPotentiallyValidVideos.sort(() => Math.random() - 0.5)
-  }
+    if (sortBy === "date") {
+      allPotentiallyValidVideos.sort(((a, b) => b.updatedAt.localeCompare(a.updatedAt)))
+    } else {
+      allPotentiallyValidVideos.sort(() => Math.random() - 0.5)
+    }
 
-  let videosMatchingFilters: VideoInfo[] = allPotentiallyValidVideos
+    let videosMatchingFilters: VideoInfo[] = allPotentiallyValidVideos
 
-  // filter videos by mandatory tags, or else we return everything
-  const mandatoryTagsList = mandatoryTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)
-  if (mandatoryTagsList.length) {
-    videosMatchingFilters = allPotentiallyValidVideos.filter(video => 
-      video.tags.some(tag =>
-        mandatoryTagsList.includes(tag.toLowerCase().trim())
+    // filter videos by mandatory tags, or else we return everything
+    const mandatoryTagsList = mandatoryTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)
+    if (mandatoryTagsList.length) {
+      videosMatchingFilters = allPotentiallyValidVideos.filter(video => 
+        video.tags.some(tag =>
+          mandatoryTagsList.includes(tag.toLowerCase().trim())
+        )
       )
-    )
-  }
+    }
 
-  // filter videos by mandatory tags, or else we return everything
-  const niceToHaveTagsList = niceToHaveTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)
-  if (niceToHaveTagsList.length) {
-    videosMatchingFilters = videosMatchingFilters.filter(video => 
-      video.tags.some(tag =>
-        mandatoryTagsList.includes(tag.toLowerCase().trim())
+    // filter videos by mandatory tags, or else we return everything
+    const niceToHaveTagsList = niceToHaveTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)
+    if (niceToHaveTagsList.length) {
+      videosMatchingFilters = videosMatchingFilters.filter(video => 
+        video.tags.some(tag =>
+          mandatoryTagsList.includes(tag.toLowerCase().trim())
+        )
       )
-    )
-
-    // if we don't have enough videos
-    if (videosMatchingFilters.length < maxVideos) {
-      // count how many we need
-      const nbMissingVideos = maxVideos - videosMatchingFilters.length
-      
-      // then we try to fill the gap with valid videos from other topics
-      const videosToUseAsFiller = allPotentiallyValidVideos
-        .filter(video => !videosMatchingFilters.some(v => v.id === video.id)) // of course we don't reuse the same
-        // .sort(() => Math.random() - 0.5) // randomize them
-        .slice(0, nbMissingVideos) // and only pick those we need
-
-      videosMatchingFilters = [
-        ...videosMatchingFilters,
-        ...videosToUseAsFiller,
-      ]
+
+      // if we don't have enough videos
+      if (videosMatchingFilters.length < maxVideos) {
+        // count how many we need
+        const nbMissingVideos = maxVideos - videosMatchingFilters.length
+        
+        // then we try to fill the gap with valid videos from other topics
+        const videosToUseAsFiller = allPotentiallyValidVideos
+          .filter(video => !videosMatchingFilters.some(v => v.id === video.id)) // of course we don't reuse the same
+          // .sort(() => Math.random() - 0.5) // randomize them
+          .slice(0, nbMissingVideos) // and only pick those we need
+
+        videosMatchingFilters = [
+          ...videosMatchingFilters,
+          ...videosToUseAsFiller,
+        ]
+      }
     }
-  }
-  
+    
 
-  // we enforce the max limit of HARD_LIMIT (eg. 100)
-  const cappedVideos = videosMatchingFilters.slice(0, Math.min(HARD_LIMIT, maxVideos))
+    // we enforce the max limit of HARD_LIMIT (eg. 100)
+    const cappedVideos = videosMatchingFilters.slice(0, Math.min(HARD_LIMIT, maxVideos))
 
 
-  // finally, we ask Redis for the freshest stats
-  const videosWithStats = await extendVideosWithStats(cappedVideos)
+    // finally, we ask Redis for the freshest stats
+    const videosWithStats = await extendVideosWithStats(cappedVideos)
 
-  return videosWithStats
+    return videosWithStats
+  } catch (err) {
+    if (neverThrow) {
+      console.error("failed to get videos:", err)
+      return []
+    }
+
+    throw err
+  }
 }

src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts

@@ -148,6 +148,7 @@ ${prompt}
     assetUrl: "", // will be generated in async
     numberOfViews: 0,
     numberOfLikes: 0,
+    numberOfDislikes: 0,
     updatedAt: new Date().toISOString(),
     tags,
     channel,

src/app/server/actions/stats.ts

@@ -2,8 +2,11 @@
 
 import { Redis } from "@upstash/redis"
 
-import { redisToken, redisUrl } from "./config"
 import { developerMode } from "@/app/config"
+import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+
+import { redisToken, redisUrl } from "./config"
+import { VideoRating } from "@/types"
 
 const redis = new Redis({
   url: redisUrl,
@@ -66,3 +69,86 @@ export async function watchVideo(videoId: string): Promise<number> {
     return 0
   }
 }
+
+export async function getVideoRating(videoId: string, apiKey?: string): Promise<VideoRating> {
+  let numberOfLikes = 0
+  let numberOfDislikes = 0
+  let isLikedByUser = false
+  let isDislikedByUser = false
+
+  try {
+    // update video likes counter
+    numberOfLikes = (await redis.get<number>(`videos:${videoId}:stats:likes`)) || 0
+    numberOfDislikes = (await redis.get<number>(`videos:${videoId}:stats:dislikes`)) || 0
+  } catch (err) {
+  }
+
+  // optional: determine if the user liked or disliked the content
+  if (apiKey) {
+    try {
+      const credentials = { accessToken: apiKey }
+      
+      const user = await whoAmI({ credentials }) as unknown as WhoAmIUser
+      const isLiked = await redis.get(`users:${user.id}:tastes:videos:${videoId}`)
+      if (isLiked !== null) {
+        isLikedByUser = Boolean(isLiked)
+        isDislikedByUser = !isLikedByUser
+      }
+    } catch (err) {
+      console.error("failed to get user like status")
+    }
+  }
+
+  return {
+    isLikedByUser,
+    isDislikedByUser,
+    numberOfLikes,
+    numberOfDislikes,
+  }
+}
+
+export async function rateVideo(videoId: string, liked: boolean, apiKey: string): Promise<VideoRating> {
+  // note: we want the like to throw an exception if it failed
+  let numberOfLikes = 0
+  let numberOfDislikes = 0
+  let isLikedByUser = false
+  let isDislikedByUser = false
+
+  const credentials = { accessToken: apiKey }
+  
+  const user = await whoAmI({ credentials }) as unknown as WhoAmIUser
+
+  const hasLiked = await redis.get<boolean>(`users:${user.id}:activity:videos:${videoId}:liked`)
+  const hasAlreadyRatedAndDifferently = hasLiked !== null && liked !== hasLiked
+
+  await redis.set(`users:${user.id}:activity:videos:${videoId}:liked`, liked)
+
+  isLikedByUser = liked
+  isDislikedByUser = !liked
+
+  // if user has already rated the content, and it's different from the desired value,
+  // then we need to undo the rating
+
+  try {
+    if (liked) {
+      // update video likes counter
+      numberOfLikes = await redis.incr(`videos:${videoId}:stats:likes`)
+      if (hasAlreadyRatedAndDifferently) {
+        numberOfDislikes = await redis.decr(`videos:${videoId}:stats:dislikes`)
+      }
+    } else {
+      numberOfDislikes = await redis.incr(`videos:${videoId}:stats:dislikes`)
+      if (hasAlreadyRatedAndDifferently) {
+        numberOfLikes = await redis.decr(`videos:${videoId}:stats:likes`)
+      }
+    }
+  } catch (err) {
+  } finally {
+    return {
+      numberOfLikes,
+      numberOfDislikes,
+      isLikedByUser,
+      isDislikedByUser,
+    }
+  }
+}

src/app/server/actions/utils/parseDatasetPrompt.ts

@@ -27,7 +27,7 @@ export function parseDatasetPrompt(markdown: string, channel: ChannelInfo): Pars
       title: typeof title === "string" && title ? title : "",
       description: typeof description === "string" && description ? description : "",
       tags:
-        tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x)
+        tags && typeof tags === "string" ? tags.split("- ").map(x => x.trim()).filter(x => x)
         : (channel.tags || []),
       prompt: typeof prompt === "string" && prompt ? prompt : "",
       model: parseVideoModelName(model, channel.model),

src/app/state/useStore.ts

@@ -47,7 +47,16 @@ export const useStore = create<{
   setPublicVideo: (publicVideo?: VideoInfo) => void
 
   publicVideos: VideoInfo[]
-  setPublicVideos: (userVideos: VideoInfo[]) => void
+  setPublicVideos: (publicVideos: VideoInfo[]) => void
+
+  publicChannelVideos: VideoInfo[]
+  setPublicChannelVideos: (publicChannelVideos: VideoInfo[]) => void
+
+  publicTrack?: VideoInfo
+  setPublicTrack: (publicTrack?: VideoInfo) => void
+
+  publicTracks: VideoInfo[]
+  setPublicTracks: (publicTracks: VideoInfo[]) => void
 
   userVideo?: VideoInfo
   setUserVideo: (userVideo?: VideoInfo) => void
@@ -76,6 +85,7 @@ export const useStore = create<{
     const routes: Record<string, InterfaceView> = {
       "/": "home",
       "/watch": "public_video",
+      "/music": "public_music_videos",
       "/channels": "public_channels",
       "/channel": "public_channel",
       "/account": "user_account",
@@ -151,6 +161,26 @@ export const useStore = create<{
     })
   },
 
+
+  publicTrack: undefined,
+  setPublicTrack: (publicTrack?: VideoInfo) => {
+    set({ publicTrack })
+  },
+
+  publicTracks: [],
+  setPublicTracks: (publicTracks: VideoInfo[] = []) => {
+    set({
+      publicTracks: Array.isArray(publicTracks) ? publicTracks : [] 
+    })
+  },
+
+  publicChannelVideos: [],
+  setPublicChannelVideos: (publicChannelVideos: VideoInfo[] = []) => {
+    set({
+      publicVideos: Array.isArray(publicChannelVideos) ? publicChannelVideos : [] 
+    })
+  },
+
   userVideo: undefined,
   setUserVideo: (userVideo?: VideoInfo) => { set({ userVideo }) },
 

src/app/views/home-view/index.tsx

@@ -43,7 +43,7 @@ export function HomeView() {
      `sm:pr-4`
     )}>
       <VideoList
-        videos={publicVideos}
+        items={publicVideos}
         onSelect={handleSelect}
       />
     </div>

src/app/views/public-channel-view/index.tsx

@@ -5,14 +5,13 @@ import { useEffect, useState, useTransition } from "react"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoList } from "@/app/interface/video-list"
-import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
 import { DefaultAvatar } from "@/app/interface/default-avatar"
 
 export function PublicChannelView() {
   const [_isPending, startTransition] = useTransition()
   const publicChannel = useStore(s => s.publicChannel)
-  const publicVideos = useStore(s => s.publicVideos)
-  const setPublicVideos = useStore(s => s.setPublicVideos)
+  const publicChannelVideos = useStore(s => s.publicChannelVideos)
+  const setPublicChannelVideos = useStore(s => s.setPublicChannelVideos)
 
   const [channelThumbnail, setChannelThumbnail] = useState(publicChannel?.thumbnail || "")
 
@@ -33,16 +32,23 @@ export function PublicChannelView() {
       return
     }
 
+    // we already have all the videos we need (eg. they were rendered server-side)
+    // if (publicChannelVideos.length) { return }
+
+    // setPublicChannelVideos([])
+
+    // do we really need this? normally this was computed server-side
+    /*
     startTransition(async () => {
-      const videos = await getChannelVideos({
+      const newPublicChannelVideos = await getChannelVideos({
         channel: publicChannel,
         status: "published",
       })
-      console.log("videos:", videos)
-      setPublicVideos(videos)
+      console.log("publicChannelVideos:", newPublicChannelVideos)
+      setPublicChannelVideos(newPublicChannelVideos)
     })
+    */
 
-    setPublicVideos([])
   }, [publicChannel, publicChannel?.id])
 
   if (!publicChannel) { return null }
@@ -102,7 +108,7 @@ export function PublicChannelView() {
       </div>
 
       <VideoList
-        videos={publicVideos}
+        items={publicChannelVideos}
       />
     </div>
   )

src/app/views/public-music-videos-view/index.tsx

@@ -6,28 +6,31 @@ import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
-import { VideoList } from "@/app/interface/video-list"
+import { TrackList } from "@/app/interface/track-list"
 
 export function PublicMusicVideosView() {
   const [_isPending, startTransition] = useTransition()
   const setView = useStore(s => s.setView)
-  const setPublicVideos = useStore(s => s.setPublicVideos)
-  const setPublicVideo = useStore(s => s.setPublicVideo)
-  const publicVideos = useStore(s => s.publicVideos)
+  const setPublicTracks = useStore(s => s.setPublicTracks)
+  const setPublicTrack = useStore(s => s.setPublicTrack)
+  const publicTracks = useStore(s => s.publicTracks)
 
   useEffect(() => {
+  
+    /*
     startTransition(async () => {
-      const videos = await getVideos({
+      const newTracks = await getVideos({
         sortBy: "date",
-        mandatoryTags:["music"],
+        mandatoryTags: ["music"],
         maxVideos: 25
       })
 
-      setPublicVideos(videos)
+      setPublicVideos(newTracks)
     })
+    */
   }, [])
 
-  const handleSelect = (video: VideoInfo) => {
+  const handleSelect = (media: VideoInfo) => {
     //
     // setView("public_video")
     // setPublicVideo(video)
@@ -38,9 +41,10 @@ export function PublicMusicVideosView() {
     <div className={cn(
      `sm:pr-4`
     )}>
-      <VideoList
-        videos={publicVideos}
+      <TrackList
+        items={publicTracks}
         onSelect={handleSelect}
+        layout="table"
       />
     </div>
   )

src/app/views/public-video-view/index.tsx

@@ -11,14 +11,17 @@ import { BiCameraMovie } from "react-icons/bi"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoPlayer } from "@/app/interface/video-player"
-import { VideoInfo } from "@/types"
+
 import { ActionButton, actionButtonClassName } from "@/app/interface/action-button"
 import { RecommendedVideos } from "@/app/interface/recommended-videos"
 import { isCertifiedUser } from "@/app/certification"
 import { watchVideo } from "@/app/server/actions/stats"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { DefaultAvatar } from "@/app/interface/default-avatar"
- 
+import { LikeButton } from "@/app/interface/like-button"
+
+import { ReportModal } from "../report-modal"
+
 export function PublicVideoView() {
   const [_pending, startTransition] = useTransition()
   const video = useStore(s => s.publicVideo)
@@ -199,6 +202,9 @@ export function PublicVideoView() {
             `items-center`,
             `space-x-2`
           )}>
+
+            <LikeButton video={video} />
+
             {/* SHARE */}
             <div className={cn(
               `flex flex-row`,
@@ -249,6 +255,9 @@ export function PublicVideoView() {
               <LuScrollText />
               <span>See prompt</span>
             </ActionButton>
+
+            <ReportModal video={video} />
+
           </div>
 
         </div>

src/app/views/report-modal/index.tsx

@@ -0,0 +1,121 @@
+import { ReactNode, useState } from "react"
+import { LuShieldAlert } from "react-icons/lu"
+
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"
+
+import { ChannelInfo, VideoInfo } from "@/types"
+import { ActionButton } from "@/app/interface/action-button"
+
+// modal to report a video or channel
+export function ReportModal({
+    video,
+    channel,
+    children,
+  }: {
+    video?: VideoInfo
+    channel?: ChannelInfo
+    children?: ReactNode
+  }) {
+  const [isOpen, setOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        setOpen(open)
+      }
+    }}>
+      <DialogTrigger asChild>
+      <ActionButton onClick={() => setOpen(true)}>
+          <LuShieldAlert className="w-4 h-4" />
+          <span>Report</span>
+        </ActionButton>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[512px] text-zinc-200">
+        <DialogHeader>
+          <DialogDescription className="w-full text-center text-lg font-normal text-stone-300">
+            Report an issue with the video
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col w-full space-y-4">
+          <p className="text-sm">If you believe there is an issue with the prompt, you can ask the author to remove it or change its prompt, by creating a pull request explaining why:</p>
+
+          <div className="flex flex-row py-2">
+            {video && video.id ? <ActionButton
+              href={
+                `https://huggingface.co/datasets/${
+                  video.channel.datasetUser
+                }/${
+                  video.channel.datasetName
+                }/delete/main/prompt_${
+                  video.id
+                }.md`
+                  }
+                >
+                <span>Request author for prompt removal</span>
+              </ActionButton>
+            : null}
+          </div>
+
+          <p className="text-sm">
+            If the prompt is in violation of <a href="https://huggingface.co/content-guidelines" target="_blank">our content guidelines</a>,
+            you can flag the channel from the Hugging Face dataset page:
+          </p>
+
+          <div className="flex flex-row py-2">
+          {video && video.id ? <ActionButton
+            href={
+              `https://huggingface.co/datasets/${
+                video.channel.datasetUser
+              }/${
+                video.channel.datasetName
+              }`
+                }
+              >
+              <span>Click here to open the dataset</span>
+            </ActionButton>
+          : null}
+
+  
+          {channel && channel.id ? <ActionButton
+            href={
+              `https://huggingface.co/datasets/${
+                channel.datasetUser
+              }/${
+                channel.datasetName
+              }`
+                }
+              >
+              <span>Click here to open the dataset</span>
+            </ActionButton>
+            : null}
+          </div>
+
+          <div className="flex flex-col items-center justify-center">
+            <img src="/report.jpg" className="rounded w-[300px]" />
+          </div>
+
+            <p className="text-sm">
+            Finally, if you believe the content violates or infringes your intellectual property rights,
+            you may <span className="text-medium">send your complaint</span> to <a href="mailto:[email protected]" target="_blank" className="font-mono text-xs bg-neutral-200 rounded-lg text-neutral-700 px-1 py-0.5">[email protected]</a> with detailed and accurate information supporting your claim,
+            in addition to the possibility of flagging the allegedly infringing Content.
+            
+            You also represent and warrant that you will not knowingly provide misleading information to support your claim.
+          </p>
+          </div>
+        <DialogFooter>
+        <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setOpen(false)
+            }}
+          >
+          Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/watch/page.tsx

@@ -24,14 +24,16 @@ export async function generateMetadata(
     }
 
     return {
-      title: `${video.label} - AI Tube`,
+      title: `${video.label} - AiTube`,
       metadataBase,
       openGraph: {
-        type: "website",
+        // some cool stuff we could use here:
+        // 'video.tv_show' | 'video.other' | 'video.movie' | 'video.episode';
+        type: "video.other",
         // url: "https://example.com",
         title: video.label || "", // put the video title here
-        description: video.description || "", // put the vide description here
-        siteName: "AI Tube",
+        description: video.description || "", // put the video description here
+        siteName: "AiTube",
         images: [
           `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${video.id}.webp`
         ],
@@ -45,14 +47,14 @@ export async function generateMetadata(
     }
   } catch (err) {
     return {
-      title: "AI Tube - 404 Video Not Found",
+      title: "AiTube",
       metadataBase,
       openGraph: {
         type: "website",
         // url: "https://example.com",
-        title: "AI Tube - 404 Not Found", // put the video title here
+        title: "AiTube", // put the video title here
         description: "", // put the vide description here
-        siteName: "AI Tube",
+        siteName: "AiTube",
   
         videos: [],
         images: [],
@@ -63,9 +65,9 @@ export async function generateMetadata(
 
 
 export default async function WatchPage({ searchParams: { v: videoId } }: AppQueryProps) {
-  const video = await getVideo({ videoId, neverThrow: true })
+  const publicVideo = await getVideo({ videoId, neverThrow: true })
   // console.log("WatchPage: --> " + video?.id)
   return (
-    <Main video={video} />
+    <Main publicVideo={publicVideo} />
    )
 }

src/components/ui/dialog.tsx

@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full dark:border-neutral-800 dark:bg-neutral-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full dark:border-neutral-800 dark:bg-neutral-900",
         className
       )}
       {...props}

src/lib/getCollectionKey.ts

@@ -0,0 +1,5 @@
+// compute a "collection key" that we can use in our useEffects and such
+export function getCollectionKey(input?: any): string {
+  const collection: any[] = Array.isArray(input) ? input : [`${input || ""}`]
+  return (collection || []).map((v: any) => (v as any)?.id || JSON.stringify(v)).filter(x => x).join("--")
+}

src/types.ts

@@ -380,6 +380,13 @@ export type VideoInfo = {
    */
   numberOfLikes: number
 
+  /**
+   * Counter for the number of dislikes
+   * 
+   * Note: should be managed by the index to prevent cheating
+   */
+  numberOfDislikes: number
+
   /**
    * When was the video updated
    */
@@ -632,7 +639,21 @@ export type AppQueryProps = {
   params: { id: string }
   searchParams: {
     v?: string | string[],
+    m?: string | string[],
     c?: string | string[],
     [key: string]: string | string[] | undefined
   }
+}
+
+export type MediaDisplayLayout =
+  | "grid" // default mode, items goas back to the line
+  | "horizontal" // will be used for a "Netflix" horizontal sliding mode
+  | "vertical" // used in the right recommendation panel
+  | "table" // used when shown in a table mode
+
+export type VideoRating = {
+  isLikedByUser: boolean
+  isDislikedByUser: boolean
+  numberOfLikes: number
+  numberOfDislikes: number
 }

tailwind.config.js

@@ -47,6 +47,8 @@ module.exports = {
         'print': { 'raw': 'print' },
       },
       height: {
+        '6.5': '1.625rem', // 26px
+        7: '1.75rem', // 28px
         17: '4.25rem', // 68px
         18: '4.5rem', // 72px
         19: '4.75rem', // 76px
@@ -57,6 +59,8 @@ module.exports = {
         26: '6.5rem', // 104px
       },
       width: {
+        '6.5': '1.625rem', // 26px
+        7: '1.75rem', // 28px
         17: '4.25rem', // 68px
         18: '4.5rem', // 72px
         19: '4.75rem', // 76px