we can now post comments

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

@@ -8,23 +8,31 @@ export const actionButtonClassName = cn(
   `rounded-2xl`,
   `cursor-pointer`,
   `text-xs lg:text-sm font-medium`,
-  `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`,
 )
 
 export function ActionButton({
   className,
   children,
   href,
+
+  // by default most buttons are just secondary ("neutral") buttons
+  variant = "secondary",
   onClick,
 }: {
   className?: string
   children?: ReactNode
   href?: string
+  variant?: "primary" | "secondary" | "ghost"
   onClick?: () => void
 }) {
 
   const classNames = cn(
     actionButtonClassName,
+      variant === "ghost"
+      ? `bg-transparent hover:bg-transparent text-zinc-100`
+      : variant === "primary"
+      ? `bg-lime-700/80 hover:bg-lime-700 text-zinc-100`
+      : `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`,
     className,
   )
 

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

@@ -1,22 +1,26 @@
 import { cn } from "@/lib/utils"
-import { VideoComment } from "@/types"
+import { CommentInfo } from "@/types"
 import { useEffect, useState } from "react"
 import { DefaultAvatar } from "../default-avatar"
+import { formatTimeAgo } from "@/lib/formatTimeAgo"
 
 export function CommentCard({
   comment,
   replies = []
 }: {
-  comment?: VideoComment,
-  replies: VideoComment[]
+  comment?: CommentInfo,
+  replies: CommentInfo[]
 }) {
 
-  const [userThumbnail, setUserThumbnail] = useState(comment?.user?.thumbnail || "")
+  const isLongContent = (comment?.message.length || 0) > 370
+
+  const [userThumbnail, setUserThumbnail] = useState(comment?.userInfo?.thumbnail || "")
+  const [isExpanded, setExpanded] = useState(false)
 
   useEffect(() => {
-    setUserThumbnail(comment?.user?.thumbnail || "")
+    setUserThumbnail(comment?.userInfo?.thumbnail || "")
   
-  }, [comment?.user?.thumbnail])
+  }, [comment?.userInfo?.thumbnail])
 
   if (!comment) { return null }
 
@@ -33,33 +37,67 @@ export function CommentCard({
 
   return (
     <div className={cn(
-      `flex flex-col`,
+      `flex flex-col w-full`,
 
     )}>
       {/* THE COMMENT INFO - HORIZONTAL */}
       <div className={cn(
-      `flex flex-col`,
+      `flex flex-row w-full`,
+      // `space-x-3`
 
       )}>
-          <div
+        <div 
+        // className="flex flex-col w-10 pr-13 overflow-hidden"
+         className="flex flex-none flex-col w-10 pr-13 overflow-hidden">
+        {
+            userThumbnail ? 
+              <div className="flex w-9 rounded-full overflow-hidden">
+                <img
+                  src={userThumbnail}
+                  onError={handleBadUserThumbnail}
+                />
+            </div>
+            : <DefaultAvatar
+                username={comment?.userInfo?.userName}
+                bgColor="#fde047"
+                textColor="#1c1917"
+                width={36}
+                roundShape
+              />}
+        </div>
+
+        {/* USER INFO AND ACTUAL MESSAGE */}
+        <div
           className={cn(
-            `flex flex-col items-center justify-center`,
-            `rounded-full overflow-hidden`,
-            `w-26 h-26`
+            `flex flex-col items-start justify-center`,
+            `space-y-1.5`,
           )}
         >
-         {comment.user.thumbnail
-          ? <img
-              src={comment.user.thumbnail}
-              onError={handleBadUserThumbnail}
-            />
-          : <DefaultAvatar
-              username={comment.user.userName}
-              bgColor="#fde047"
-              textColor="#1c1917"
-              width={104}
-              roundShape
-            />}
+          <div className="flex flex-row space-x-3">
+            <div className="text-xs font-medium text-zinc-100">@{comment?.userInfo?.userName}</div>
+            <div className="text-xs font-medium text-neutral-400">{formatTimeAgo(comment.updatedAt)}</div>
+          </div>
+          <p className={cn(
+            `text-sm font-normal`,
+            `shrink`,
+            `overflow-hidden break-words`,
+            isExpanded ? `` : `line-clamp-4`
+          )}>{
+           comment.message
+          }</p>
+          {isLongContent && 
+            <div className={cn(
+            `flex`,
+            `text-sm font-medium text-neutral-400`,
+            `cursor-pointer`,
+            `hover:underline`
+            )}
+            onClick={() => {
+              setExpanded(!isExpanded)
+            }}
+            >
+              {isExpanded ? 'Read less' : 'Read more'}
+            </div>}
         </div>
       </div>
 

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

@@ -1,18 +1,19 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { VideoComment } from "@/types"
+import { CommentInfo } from "@/types"
 import { CommentCard } from "../comment-card"
 
 export function CommentList({
   comments = []
 }: {
-  comments: VideoComment[]
+  comments: CommentInfo[]
 }) {
 
   return (
     <div className={cn(
       `flex flex-col`,
+      `pt-6`,
       `w-full space-y-4`
     )}>
       {comments.map(comment => (

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

@@ -33,13 +33,13 @@ export function GenericLikeButton({
   numberOfDislikes?: number
 }) {
 
-  const hasAlreadyVoted = isLikedByUser || isDislikedByUser
-
   const classNames = cn(
     likeButtonClassName,
     className,
   )
 
+  const nbLikes = Math.max(0, numberOfLikes)
+  const nbDislikes = Math.max(0, numberOfDislikes)
 
   return (
     <div className={classNames}>
@@ -47,7 +47,7 @@ export function GenericLikeButton({
         `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`
+        `space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-1 lg:pr-1 h-8 lg:h-9`
         )}
         onClick={() => {
           try {
@@ -57,15 +57,17 @@ export function GenericLikeButton({
           }}}
         >
         <div>{
-          isLikedByUser ? <RiThumbUpFill /> :  <RiThumbUpLine />
+          isLikedByUser
+          ? <RiThumbUpFill className="w-5 h-5" />
+          : <RiThumbUpLine className="w-5 h-5" />
         }</div>
-        <div>{formatLargeNumber(Math.max(0, numberOfLikes))}</div>
+        <div>{nbLikes > 0 ? formatLargeNumber(nbLikes) : ""}</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`
+        `space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-2 lg:pr-3 h-8 lg:h-9`
       )}
       onClick={() => {
         try {
@@ -74,10 +76,13 @@ export function GenericLikeButton({
 
         }}}
       >
+        <div className="border-l border-l-zinc-600 h-[70%]">&nbsp;</div>
         <div>{
-          isDislikedByUser ? <RiThumbDownFill /> :  <RiThumbDownLine />
+          isDislikedByUser
+          ? <RiThumbDownFill className="w-5 h-5" />
+          : <RiThumbDownLine className="w-5 h-5" />
         }</div>
-        <div>{formatLargeNumber(Math.max(0, numberOfDislikes))}</div>
+        <div>{nbDislikes > 0 ? formatLargeNumber(numberOfDislikes) : ""}</div>
       </div>
     </div>
   )

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

@@ -39,7 +39,7 @@ export function MediaList({
         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` :
+          ? `grid grid-cols-1 gap-x-4 gap-y-5 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`,

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

@@ -77,7 +77,9 @@ export function VideoCard({
     <div
       className={cn(
         `w-full flex`,
-        isCompact ? `flex-row h-24 py-1 space-x-2` : `flex-col space-y-3`,
+        isCompact 
+        ? `space-x-2`
+        : `flex-col space-y-3`,
         `bg-line-900`,
         `cursor-pointer`,
         className,
@@ -90,13 +92,14 @@ export function VideoCard({
         <div
           className={cn(
             `flex flex-col items-center justify-center`,
-            `rounded-xl overflow-hidden`,
-            isCompact ? `w-42 h-[94px]` : `aspect-video`
+            isCompact ? `` : ``
           )}
         >
           <div className={cn(
             `relative w-full`,
-            isCompact ? `w-42 h-[94px]` : `aspect-video`
+            `aspect-video`,
+           //  `aspect-video rounded-xl overflow-hidden`,
+           isCompact ? `w-42 h-24` : ``
           )}>
             {mediaThumbnailReady && shouldLoadMedia
               ? <video
@@ -110,7 +113,8 @@ export function VideoCard({
                 src={media.assetUrl}
                 className={cn(
                   `w-full h-full`,
-                  `aspect-video`,
+                  `object-cover`,
+                  `rounded-xl overflow-hidden aspect-video`,
                   duration > 0 ? `opacity-100`: 'opacity-0',
                   `transition-all duration-500`,
                   )}
@@ -121,9 +125,8 @@ export function VideoCard({
               src={mediaThumbnail}
               className={cn(
                 `absolute`,
-                `aspect-video`,
-               // `aspect-video object-cover`,
-                `rounded-lg overflow-hidden`,
+                `object-cover`,
+                `rounded-xl overflow-hidden aspect-video`,
                 mediaThumbnailReady ? `opacity-100`: 'opacity-0',
                 `hover:opacity-0 w-full h-full top-0 z-30`,
                 //`pointer-events-none`,
@@ -167,6 +170,7 @@ export function VideoCard({
         {/* TEXT BLOCK */}
         <div className={cn(
           `flex flex-row`,
+          `flex-none`,
           isCompact ? `w-40 lg:w-44 xl:w-51` : `space-x-4`,
         )}>
           {
@@ -192,12 +196,12 @@ 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`
+              isCompact ? `text-sm mb-1.5` : `text-base`
             )}>{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`
+              isCompact ? `text-xs` : `text-sm`
               )}>
               <div>{media.channel.label}</div>
               {isCertifiedUser(media.channel.datasetUser) ? <div><RiCheckboxCircleFill className="" /></div> : null}
@@ -206,7 +210,7 @@ export function VideoCard({
             <div className={cn(
               `flex flex-row`,
               `text-neutral-400 font-normal`,
-              isCompact ? `text-2xs lg:text-xs` : `text-sm`,
+              isCompact ? `text-xs` : `text-sm`,
               `space-x-1`
             )}>
             <div>{formatLargeNumber(media.numberOfViews)} views</div>

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

@@ -8,9 +8,11 @@ import { VideoInfo } from "@/types"
 
 export function VideoPlayer({
   video,
+  enableShortcuts = true,
   className = ""
  }: {
   video?: VideoInfo
+  enableShortcuts?: boolean
   className?: string
 }) {
 
@@ -37,6 +39,9 @@ export function VideoPlayer({
               url: video.assetUrl,
             }
           ]}
+
+          keyboardShortcut={enableShortcuts}
+
           subtitles={[]}
           // poster="https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/poster.png"
         />

src/app/server/actions/comments.ts

@@ -0,0 +1,64 @@
+"use server"
+
+import { v4 as uuidv4 } from "uuid"
+
+import { CommentInfo, StoredCommentInfo } from "@/types"
+import { stripHtml } from "@/lib/stripHtml"
+import { getCurrentUser, getUsers } from "./users"
+import { redis } from "./redis"
+
+export async function submitComment(videoId: string, rawComment: string, apiKey: string): Promise<CommentInfo> {
+
+  // trim, remove HTML, limit the length
+  const message = stripHtml(rawComment).trim().slice(0, 1024).trim()
+
+  if (!message) { throw new Error("comment is empty") }
+
+  const user = await getCurrentUser(apiKey)
+
+  const storedComment: StoredCommentInfo = {
+    id: uuidv4(),
+    userId: user.id,
+    inReplyTo: undefined, // undefined means in reply to OP
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    message,
+    numberOfLikes: 0,
+    numberOfReplies: 0,
+    likedByOriginalPoster: false,
+  }
+
+  await redis.lpush(`videos:${videoId}:comments`, storedComment)
+
+  const fullComment: CommentInfo = {
+    ...storedComment,
+    userInfo: {
+      ...user,
+
+      // important: we erase all information about the API token!
+      hfApiToken: undefined,
+    },
+  }
+
+  return fullComment
+}
+
+
+export async function getComments(videoId: string): Promise<CommentInfo[]> {
+  try {
+    const rawList = await redis.lrange<StoredCommentInfo>(`videos:${videoId}:comments`, 0, 100)
+
+    const storedComments = Array.isArray(rawList) ? rawList : []
+
+    const usersById = await getUsers(storedComments.map(u => u.userId))
+
+    const comments: CommentInfo[] = storedComments.map(storedComment => ({
+      ...storedComment,
+      userInfo: (usersById as any)[storedComment.userId] || undefined,
+    }))
+
+    return comments
+  } catch (err) {
+    return []
+  }
+}

src/app/server/actions/redis.ts

@@ -0,0 +1,9 @@
+import { Redis } from "@upstash/redis"
+
+import { redisToken, redisUrl } from "./config"
+
+export const redis = new Redis({
+  url: redisUrl,
+  token: redisToken
+})
+

src/app/server/actions/stats.ts

@@ -1,17 +1,9 @@
 "use server"
 
-import { Redis } from "@upstash/redis"
-
 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,
-  token: redisToken
-})
+import { redis } from "./redis";
 
 export async function getStatsForVideos(videoIds: string[]): Promise<Record<string, { numberOfViews: number; numberOfLikes: number; numberOfDislikes: number}>> {
   if (!Array.isArray(videoIds)) {

src/app/server/actions/users.ts

@@ -0,0 +1,70 @@
+"use server"
+
+import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import {  UserInfo } from "@/types"
+import { adminApiKey } from "./config"
+import { redis } from "./redis"
+
+export async function getCurrentUser(apiKey: string): Promise<UserInfo> {
+  if (!apiKey) {
+    throw new Error(`the apiKey is required`)
+  }
+
+  const credentials = { accessToken: apiKey }
+  
+  const huggingFaceUser = await whoAmI({ credentials }) as unknown as WhoAmIUser
+
+  const id = huggingFaceUser.id
+
+  const user: UserInfo = {
+    id,
+    type: apiKey === adminApiKey ? "admin" : "normal",
+    userName: huggingFaceUser.name,
+    fullName: huggingFaceUser.fullname,
+    thumbnail: huggingFaceUser.avatarUrl,
+    channels: [],
+    hfApiToken: apiKey,
+  }
+  
+  await redis.set(`users:${id}`, user)
+  
+  return user
+}
+
+export async function getUser(id: string): Promise<UserInfo | undefined> {
+  const maybeUser = await redis.get<UserInfo>(id)
+
+  if (maybeUser?.id) {
+    const publicFacingUser: UserInfo = {
+      ...maybeUser,
+      hfApiToken: undefined, // <-- important!
+    }
+    delete publicFacingUser.hfApiToken
+    return publicFacingUser
+  }
+
+  return undefined
+}
+
+export async function getUsers(ids: string[]): Promise<Record<string, UserInfo>> {
+  try {
+    const maybeUsers = await redis.mget<UserInfo[]>(ids.map(userId => `users:${userId}`))
+
+    const usersById: Record<string, UserInfo> = {}
+
+    maybeUsers.forEach((user, index) => {
+      if (user?.id) {
+        const publicFacingUser: UserInfo = {
+          ...user,
+          hfApiToken: undefined, // <-- important!
+        }
+        delete publicFacingUser.hfApiToken
+        usersById[user.id] = publicFacingUser
+      }
+    })
+
+    return usersById
+  } catch (err) {
+    return {}
+  }
+}

src/app/state/useStore.ts

@@ -2,7 +2,7 @@
 
 import { create } from "zustand"
 
-import { ChannelInfo, VideoInfo, InterfaceDisplayMode, InterfaceView, InterfaceMenuMode, InterfaceHeaderMode } from "@/types"
+import { ChannelInfo, VideoInfo, InterfaceDisplayMode, InterfaceView, InterfaceMenuMode, InterfaceHeaderMode, CommentInfo, UserInfo } from "@/types"
 
 export const useStore = create<{
   displayMode: InterfaceDisplayMode
@@ -17,7 +17,10 @@ export const useStore = create<{
   view: InterfaceView
   setView: (view?: InterfaceView) => void
 
-  setPathname: (patname: string) => void
+  setPathname: (pathname: string) => void
+
+  currentUser?: UserInfo
+  setCurrentUser: (currentUser?: UserInfo) => void
 
   publicChannel?: ChannelInfo
   setPublicChannel: (setPublicChannel?: ChannelInfo) => void
@@ -46,6 +49,9 @@ export const useStore = create<{
   publicVideo?: VideoInfo
   setPublicVideo: (publicVideo?: VideoInfo) => void
 
+  publicComments: CommentInfo[]
+  setPublicComments: (publicComment: CommentInfo[]) => void
+
   publicVideos: VideoInfo[]
   setPublicVideos: (publicVideos: VideoInfo[]) => void
 
@@ -95,6 +101,11 @@ export const useStore = create<{
     set({ view: routes[pathname] || "not_found" })
   },
 
+  currentUser: undefined,
+  setCurrentUser: (currentUser?: UserInfo) => {
+    set({ currentUser })
+  },
+  
   headerMode: "normal",
   setHeaderMode: (headerMode: InterfaceHeaderMode) => {
     set({ headerMode })
@@ -154,6 +165,11 @@ export const useStore = create<{
     set({ publicVideo })
   },
 
+  publicComments: [],
+  setPublicComments: (publicComments: CommentInfo[]) => {
+    set({ publicComments })
+  },
+
   publicVideos: [],
   setPublicVideos: (publicVideos: VideoInfo[] = []) => {
     set({

src/app/state/userCurrentUser.ts

@@ -0,0 +1,48 @@
+import { useEffect, useTransition } from "react"
+
+import { UserInfo } from "@/types"
+
+import { useStore } from "./useStore"
+import { useLocalStorage } from "usehooks-ts"
+import { localStorageKeys } from "./localStorageKeys"
+import { defaultSettings } from "./defaultSettings"
+import { getCurrentUser } from "../server/actions/users"
+
+export function useCurrentUser(): UserInfo | undefined {
+  const [_pending, startTransition] = useTransition()
+
+  const currentUser = useStore(s => s.currentUser)
+  const setCurrentUser = useStore(s => s.setCurrentUser)
+
+  const [huggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
+  useEffect(() => {
+    startTransition(async () => {
+
+      // no key
+      if (!huggingfaceApiKey) {
+        setCurrentUser(undefined)
+        return
+      }
+
+      // already logged-in
+      if (currentUser?.id) {
+        return
+      }
+      try {
+
+        const user = await getCurrentUser(huggingfaceApiKey)
+
+        setCurrentUser(user)
+      } catch (err) {
+        console.error("failed to log in:", err)
+        setCurrentUser(undefined)
+      }
+    })
+  
+  }, [huggingfaceApiKey, currentUser?.id])
+
+  return currentUser
+}

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

@@ -22,9 +22,36 @@ import { LikeButton } from "@/app/interface/like-button"
 
 import { ReportModal } from "../report-modal"
 import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { CommentList } from "@/app/interface/comment-list"
+import { Input } from "@/components/ui/input"
+import useLocalStorage from "usehooks-ts/dist/esm/useLocalStorage/useLocalStorage"
+import { localStorageKeys } from "@/app/state/localStorageKeys"
+import { defaultSettings } from "@/app/state/defaultSettings"
+import { getComments, submitComment } from "@/app/server/actions/comments"
+import { useCurrentUser } from "@/app/state/userCurrentUser"
 
 export function PublicVideoView() {
   const [_pending, startTransition] = useTransition()
+
+  const [commentDraft, setCommentDraft] = useState("")
+  const [isCommenting, setCommenting] = useState(false)
+  const [isFocusedOnInput, setFocusedOnInput] = useState(false)
+
+  const currentUser = useCurrentUser()
+
+ const [userThumbnail, setUserThumbnail] = useState("")
+  
+  useEffect(() => {
+    setUserThumbnail(currentUser?.thumbnail || "")
+  
+  }, [currentUser?.thumbnail])
+
+  const handleBadUserThumbnail = () => {
+    if (userThumbnail) {
+      setUserThumbnail("")
+    }
+  }
+
   const video = useStore(s => s.publicVideo)
 
   const videoId = `${video?.id || ""}`
@@ -34,6 +61,10 @@ export function PublicVideoView() {
   const [channelThumbnail, setChannelThumbnail] = useState(`${video?.channel.thumbnail || ""}`)
   const setPublicVideo = useStore(s => s.setPublicVideo)
 
+  const publicComments = useStore(s => s.publicComments)
+
+  const setPublicComments = useStore(s => s.setPublicComments)
+
   // we inject the current videoId in the URL, if it's not already present
   // this is a hack for Hugging Face iframes
   useEffect(() => {
@@ -62,12 +93,8 @@ export function PublicVideoView() {
 
 
   const handleBadChannelThumbnail = () => {
-    try {
-      if (channelThumbnail) {
-        setChannelThumbnail("")
-      }
-    } catch (err) {
-      
+    if (channelThumbnail) {
+      setChannelThumbnail("")
     }
   }
 
@@ -86,28 +113,65 @@ export function PublicVideoView() {
 
   }, [video?.id])
 
+
+  useEffect(() => {
+    startTransition(async () => {
+      if (!video || !video.id) {
+        return
+      }
+      const comments = await getComments(videoId)
+      setPublicComments(comments)
+    })
+
+  }, [video?.id])
+
+  const [huggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
+  
   if (!video) { return null }
 
+  const handleSubmitComment = () => {
+
+    startTransition(async () => {
+      if (!commentDraft || !huggingfaceApiKey || !videoId) { return }
+    
+      const limitedSizeComment = commentDraft.trim().slice(0, 1024).trim()
+
+      const comment = await submitComment(video.id, limitedSizeComment, huggingfaceApiKey)
+
+      setPublicComments(
+        [comment].concat(publicComments)
+      )
+
+      setCommentDraft("")
+      setFocusedOnInput(false)
+      setCommenting(false)
+    })
+  }
+  
   return (
     <div className={cn(
       `w-full`,
-      `flex flex-row`
+      `flex flex-col lg:flex-row`
     )}>
       <div className={cn(
         `flex-grow`,
         `flex flex-col`,
         `transition-all duration-200 ease-in-out`,
-        `px-2 sm:px-0`
+        `px-2 xl:px-0`
       )}>
         {/** VIDEO PLAYER - HORIZONTAL */}
         <VideoPlayer
           video={video}
+          enableShortcuts={!isFocusedOnInput}
           className="mb-4"
         />
 
         {/** VIDEO TITLE - HORIZONTAL */}
         <div className={cn(
-          `flex flew-row space-x-2`,
+          `flex flex-row space-x-2`,
           `transition-all duration-200 ease-in-out`,
           `text-lg lg:text-xl text-zinc-100 font-medium mb-0 line-clamp-2`,
           `mb-2`,
@@ -133,7 +197,7 @@ export function PublicVideoView() {
           `transition-all duration-200 ease-in-out`,
           `items-start xl:items-center`,
           `justify-between`,
-          `mb-4`,
+          `mb-2 lg:mb-3`,
         )}>
           {/** LEFT PART OF THE TOOLBAR */}
           <div className={cn(
@@ -217,17 +281,19 @@ export function PublicVideoView() {
               <CopyToClipboard
                 text={`https://jbilcke-hf-ai-tube.hf.space/watch?v=${video.id}`}
                 onCopy={() => setCopied(true)}>
-                <div className={actionButtonClassName}>
+                <div className={cn(
+                  actionButtonClassName,
+                  `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`
+                )}>
                   <div className="flex items-center justify-center">
                     {
-                      copied ? <LuCopyCheck className="w-4 h-4" />
-                      : <PiShareFatLight className="w-5 h-5" />
+                      copied ? <LuCopyCheck className="w-5 h-5" />
+                      : <PiShareFatLight className="w-6 h-6" />
                     }
                   </div>
-                  <div>
-                    {
-                      copied ? "Link copied!" : "Share video"
-                    }</div>
+                  <span>
+                      {copied ? "Copied!" : "Share"}
+                  </span>
                 </div>
               </CopyToClipboard>
             </div>
@@ -241,8 +307,13 @@ export function PublicVideoView() {
                 : "https://huggingface.co/hotshotco/Hotshot-XL"
               }
             >
-              <BiCameraMovie />
-              <span>Made with {video.model}</span>
+              <BiCameraMovie className="w-5 h-5" />
+              <span className="hidden 2xl:inline">
+                Made with {video.model}
+              </span>
+              <span className="inline 2xl:hidden">
+                {video.model}
+              </span>
             </ActionButton>
 
             <ActionButton
@@ -256,8 +327,10 @@ export function PublicVideoView() {
                 }.md`
               }
             >
-              <LuScrollText />
-              <span>See prompt</span>
+              <LuScrollText className="w-5 h-5" />
+              <span>
+                Source
+              </span>
             </ActionButton>
 
             <ReportModal video={video} />
@@ -274,18 +347,146 @@ export function PublicVideoView() {
           `bg-neutral-700/50`,
           `text-sm text-zinc-100`,
         )}>
+
+          {/* DESCRIPTION BLOCK */}
           <div className="flex flex-row space-x-2 font-medium mb-1">
             <div>{formatLargeNumber(video.numberOfViews)} views</div>
             <div>{formatTimeAgo(video.updatedAt).replace("about ", "")}</div>
           </div>
           <p>{video.description}</p>
         </div>
+
+        {/* COMMENTS */}
+        <div className={cn(
+          `flex-col font-medium mb-1 py-6`,
+        )}>
+
+          <div className="flex flex-row text-xl text-zinc-100 w-full mb-4">
+            {Number(publicComments?.length || 0).toLocaleString()} Comment{
+            Number(publicComments?.length || 0) === 1 ? '' : 's'
+            }
+          </div>
+          
+          {/* COMMENT INPUT BLOCK - HORIZONTAL */}
+          {currentUser && <div className="flex flex-row w-full">
+            
+            {/* AVATAR */}
+            <div 
+              // className="flex flex-col w-10 pr-13 overflow-hidden"
+              className="flex flex-none flex-col w-10 pr-13 overflow-hidden">
+              {
+              userThumbnail ? 
+                <div className="flex w-9 rounded-full overflow-hidden">
+                  <img
+                    src={userThumbnail}
+                    onError={handleBadUserThumbnail}
+                  />
+              </div>
+              : <DefaultAvatar
+                  username={currentUser?.userName}
+                  bgColor="#fde047"
+                  textColor="#1c1917"
+                  width={36}
+                  roundShape
+                />}
+            </div>
+
+            {/* COMMENT INPUTS AND BUTTONS - VERTICAL */}
+            <div className="flex flex-col flex-grow">
+              <Input
+                placeholder="Add a comment.."
+                type="text"
+                className={cn(
+                  `w-full`,
+                  `rounded-none`,
+                  `border-l-transparent border-r-transparent border-t-transparent dark:border-l-transparent dark:border-r-transparent dark:border-t-transparent`,
+                  `border-b border-b-zinc-600 dark:border-b dark:border-b-zinc-600`,
+                  `hover:pt-[2px] hover:pb-[1px] hover:border-b-2 hover:border-b-zinc-200 dark:hover:border-b-2 dark:hover:border-b-zinc-200`,
+                  
+                  `outline-transparent ring-transparent ring-offset-transparent`,
+                  `dark:outline-transparent dark:ring-transparent dark:ring-offset-transparent`,
+                  `focus-visible:outline-transparent focus-visible:ring-transparent focus-visible:ring-offset-transparent`,
+                  `dark:focus-visible:outline-transparent dark:focus-visible:ring-transparent dark:focus-visible:ring-offset-transparent`,
+                  
+                  `font-normal`,
+                  `pl-0 h-8`,
+
+                  `mb-3`
+                )}
+                onChange={(x) => {
+                  if (!isFocusedOnInput) {
+                    setFocusedOnInput(true)
+                  }
+                  if (!isCommenting) {
+                    setCommenting(true)
+                  }
+                  setCommentDraft(x.target.value)
+                }}
+                value={commentDraft}
+                onFocus={() => {
+                  if (!isFocusedOnInput) {
+                    setFocusedOnInput(true)
+                  }
+                  if (!isCommenting) {
+                    setCommenting(true)
+                  }
+                }}
+
+                onBlur={() => {
+                  setFocusedOnInput(false)
+                }}
+                onKeyDown={({ key }) => {
+                  if (key === 'Enter') {
+                    handleSubmitComment()
+                  } else {
+                    if (!isFocusedOnInput) {
+                      setFocusedOnInput(true)
+                    }
+                    if (!isCommenting) {
+                      setCommenting(true)
+                    }
+                  }
+                }}
+              />
+          
+              <div className={cn(
+                `flex-row space-x-3 w-full justify-end`,
+                isCommenting ? `flex` : `hidden`
+              )}>
+                <div className="flex flex-row space-x-3">
+                <ActionButton
+                  variant="ghost"
+                  onClick={() => {
+                    setCommentDraft("")
+                    setCommenting(false)
+                    setFocusedOnInput(false)
+                  }}
+                  >Cancel</ActionButton>
+                <ActionButton
+                  variant={commentDraft ? "primary" : "secondary"}
+                  onClick={handleSubmitComment}
+                  >Comment</ActionButton>
+                </div>
+              </div>
+            </div>
+          </div>}
+
+          <CommentList
+            comments={publicComments}
+          />
+        </div>
+
       </div>
+
       <div className={cn(
-        `w-40 sm:w-56 md:w-64 lg:w-72 xl:w-[450px]`,
+
+        // this one is very important to make sure the right panel is not compressed
+        `flex flex-col`,
+        `flex-none`,
+        `pl-2 lg:pl-4 lg:pr-2`,
+
+        `w-full md:w-[360px] lg:w-[400px] xl:w-[450px]`,
         `transition-all duration-200 ease-in-out`,
-        `hidden sm:flex flex-col`,
-        `pl-5 pr-1 sm:pr-2 md:pr-3 lg:pr-4 xl:pr-6 2xl:pr-8`,
       )}>
        <RecommendedVideos video={video} />
       </div>

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

@@ -27,7 +27,7 @@ export function ReportModal({
     }}>
       <DialogTrigger asChild>
       <ActionButton onClick={() => setOpen(true)}>
-          <LuShieldAlert className="w-4 h-4" />
+          <LuShieldAlert className="w-5 h-5" />
           <span>Report</span>
         </ActionButton>
       </DialogTrigger>

src/lib/stripHtml.ts

@@ -0,0 +1,16 @@
+export function stripHtml(input: string) {
+  try {
+    return (
+      `${input || ""}`
+        .replace(/<style[^>]*>.*<\/style>/g, '')
+        // Remove script tags and content
+        .replace(/<script[^>]*>.*<\/script>/g, '')
+        // Remove all opening, closing and orphan HTML tags
+        .replace(/<[^>]+>/g, '')
+        // Remove leading spaces and repeated CR/LF
+        .replace(/([\r\n]+ +)+/g, '')
+    )
+  } catch (err) {
+    return ""
+  }
+}

src/types.ts

@@ -506,32 +506,31 @@ export type CollectionInfo = {
   items: Array<VideoInfo>[]
 }
 
-export type PublicUserInfo = {
+export type UserInfo = {
   id: string
 
-  type: "normal" | "admin"
+  type: "creator" | "normal" | "admin"
 
   userName: string
 
-  firstName: string
-
-  lastName: string
-
+  fullName: string
+  
   thumbnail: string
 
   channels: ChannelInfo[]
-}
-
-export type PrivateUserInfo = PublicUserInfo & {
 
-  // the Hugging Face API token is confidential!
-  hfApiToken: string
+  // the Hugging Face API token is confidential,
+  // and will only be available for the current user
+  hfApiToken?: string
 }
 
-export type VideoComment = {
+export type CommentInfo = {
   id: string
   
-  user: PublicUserInfo
+  userId: string
+
+  // only populated when rendering
+  userInfo?: UserInfo
 
   // if the video comment is in response to another comment,
   // then "inReplyTo" will contain the other video comment id
@@ -542,12 +541,17 @@ export type VideoComment = {
   message: string
 
   // how many likes did the comment receive
-  nbLikes: number
+  numberOfLikes: number
 
-  // if the comment was appreciated by the video owner
-  appreciated: number
+  // how many replies did the comment receive
+  numberOfReplies: number
+
+  // if the comment was appreciated by the original content poster
+  likedByOriginalPoster: boolean
 }
 
+export type StoredCommentInfo = Omit<CommentInfo, "userInfo">
+
 export type VideoGenerationModel =
   | "HotshotXL"
   | "SVD"

tailwind.config.js

@@ -46,6 +46,9 @@ module.exports = {
       screens: {
         'print': { 'raw': 'print' },
       },
+      spacing: {
+        '13': '3.25rem', // 52px
+      },
       height: {
         '6.5': '1.625rem', // 26px
         7: '1.75rem', // 28px