fix the share button

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

@@ -0,0 +1,174 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { RiCheckboxCircleFill } from "react-icons/ri"
+
+import { cn } from "@/lib/utils"
+import { CollectionInfo } 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 CollectionCard({
+  collection,
+  className = "",
+  layout = "normal",
+  onSelect,
+  index
+}: {
+  collection: CollectionInfo
+  className?: string
+  layout?: "normal" | "compact"
+  onSelect?: (collection: CollectionInfo) => void
+  index: number
+ }) {
+  const [duration, setDuration] = useState(0)
+
+  const [channelThumbnail, setChannelThumbnail] = useState(collection.channel.thumbnail)
+  const [collectionThumbnail, setCollectionThumbnail] = useState(
+    `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/collections/${collection.id}.webp`
+  )
+  const [collectionThumbnailReady, setCollectionThumbnailReady] = useState(false)
+
+  const isCompact = layout === "compact"
+
+  const handleClick = () => {
+    onSelect?.(collection)
+  }
+
+  const handleBadChannelThumbnail = () => {
+    try {
+      if (channelThumbnail) {
+        setChannelThumbnail("")
+      }
+    } catch (err) {
+      
+    }
+  }
+
+
+  return (
+  <Link href={`/collection?v=${collection.id}`}>
+    <div
+      className={cn(
+        `w-full flex`,
+        isCompact ? `flex-row h-24 py-1 space-x-2` : `flex-col space-y-3`,
+        `bg-line-900`,
+        `cursor-pointer`,
+        className,
+      )}
+      >
+        {/* VIDEO BLOCK */}
+        <div
+          className={cn(
+            `flex flex-col items-center justify-center`,
+            `rounded-xl overflow-hidden`,
+            isCompact ? `w-42 h-[94px]` : `aspect-video`
+          )}
+        >
+          <div className={cn(
+            `relative w-full`,
+            isCompact ? `w-42 h-[94px]` : `aspect-video`
+          )}>
+            <img
+              src={collectionThumbnail}
+              className={cn(
+                `absolute`,
+                `aspect-video`,
+               // `aspect-video object-cover`,
+                `rounded-lg overflow-hidden`,
+                collectionThumbnailReady ? `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`,
+              )}
+              onLoad={() => {
+                setCollectionThumbnailReady(true)
+              }}
+              onError={() => {
+                setCollectionThumbnail(transparentImage)
+                setCollectionThumbnailReady(false)
+              }}
+            />
+          </div>
+
+          <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`,
+        )}>
+          {
+          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={collection.channel.datasetUser}
+              bgColor="#fde047"
+              textColor="#1c1917"
+              width={36}
+              roundShape
+            />}
+          <div className={cn(
+            `flex flex-col`,
+            isCompact ?  `` : `flex-grow`
+          )}>
+            <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`
+            )}>{collection.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>{collection.channel.label}</div>
+              {isCertifiedUser(collection.channel.datasetUser) ? <div><RiCheckboxCircleFill className="" /></div> : null}
+            </div>
+            
+            <div className={cn(
+              `flex flex-row`,
+              `text-neutral-400 font-normal`,
+              isCompact ? `text-2xs lg:text-xs` : `text-sm`,
+              `space-x-1`
+            )}>
+            <div>{collection.numberOfViews} views</div>
+            <div className="font-semibold scale-125">·</div>
+            <div>{formatTimeAgo(collection.updatedAt)}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils"
+import { CollectionInfo } from "@/types"
+
+import { CollectionCard } from "../collection-card"
+
+export function CollectionList({
+  collections = [],
+  layout = "grid",
+  className = "",
+  onSelect,
+}: {
+  collections: CollectionInfo[]
+
+  /**
+   * 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?: (collection: CollectionInfo) => void
+}) {
+  
+  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,
+      )}
+    >
+    {collections.map((collection, i) => (
+      <CollectionCard
+        key={collection.id}
+        collection={collection}
+        className="w-full"
+        layout={layout === "vertical" ? "compact" : "normal"}
+        onSelect={onSelect}
+        index={i}
+      />
+    ))}
+    </div>
+  )
+}

src/app/music/index.tsx

@@ -0,0 +1,9 @@
+
+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/views/public-music-videos-view/index.tsx

@@ -11,7 +11,6 @@ import { VideoList } from "@/app/interface/video-list"
 export function PublicMusicVideosView() {
   const [_isPending, startTransition] = useTransition()
   const setView = useStore(s => s.setView)
-  const currentTag = useStore(s => s.currentTag)
   const setPublicVideos = useStore(s => s.setPublicVideos)
   const setPublicVideo = useStore(s => s.setPublicVideo)
   const publicVideos = useStore(s => s.publicVideos)
@@ -20,17 +19,19 @@ export function PublicMusicVideosView() {
     startTransition(async () => {
       const videos = await getVideos({
         sortBy: "date",
-        mandatoryTags: currentTag ? [currentTag] : [],
+        mandatoryTags:["music"],
         maxVideos: 25
       })
 
       setPublicVideos(videos)
     })
-  }, [currentTag])
+  }, [])
 
   const handleSelect = (video: VideoInfo) => {
-    setView("public_video")
-    setPublicVideo(video)
+    //
+    // setView("public_video")
+    // setPublicVideo(video)
+    console.log("play the track in the background, but don't reload everything")
   }
 
   return (

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

@@ -205,7 +205,7 @@ export function PublicVideoView() {
               `items-center`
             )}>
               <CopyToClipboard
-                text={`https://huggingface.co/spaces/jbilcke-hf/ai-tube?v=${video.id}`}
+                text={`https://jbilcke-hf-ai-tube.hf.space/watch?v=${video.id}`}
                 onCopy={() => setCopied(true)}>
                 <div className={actionButtonClassName}>
                   <div className="flex items-center justify-center">

src/types.ts

@@ -441,6 +441,64 @@ export type VideoInfo = {
   orientation: VideoOrientation
 }
 
+export type CollectionInfo = {
+  /**
+   * UUID (v4)
+   */
+  id: string
+
+  /**
+   * Human readable title for the video
+   */
+  label: string
+
+  /**
+   * Human readable description for the video
+   */
+  description: string
+
+  /**
+   * URL to the video thumbnail
+   */
+  thumbnailUrl: string
+
+  /**
+   * Counter for the number of views
+   * 
+   * Note: should be managed by the index to prevent cheating
+   */
+  numberOfViews: number
+
+  /**
+   * Counter for the number of likes
+   * 
+   * Note: should be managed by the index to prevent cheating
+   */
+  numberOfLikes: number
+
+  /**
+   * When was the video updated
+   */
+  updatedAt: string
+
+  /**
+   * Arbotrary string tags to label the content
+   */
+  tags: string[]
+
+  /**
+   * The owner channel
+   */
+  channel: ChannelInfo
+
+  /**
+   * Collection duration
+   */
+  duration: number
+
+  items: Array<VideoInfo>[]
+}
+
 export type PublicUserInfo = {
   id: string