work in progress on the comment system

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

@@ -1,5 +1,4 @@
 import { useState } from "react"
-import dynamic from "next/dynamic"
 
 import { RiCheckboxCircleFill } from "react-icons/ri"
 import { IoAdd } from "react-icons/io5"
@@ -7,12 +6,8 @@ import { IoAdd } from "react-icons/io5"
 import { cn } from "@/lib/utils"
 import { ChannelInfo } from "@/types"
 import { isCertifiedUser } from "@/app/certification"
-import Link from "next/link"
+import { DefaultAvatar } from "../default-avatar"
 
-const DefaultAvatar = dynamic(() => import("../default-avatar"), {
-  loading: () => null,
-})
- 
 export function ChannelCard({
   channel,
   onClick,

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

@@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils"
+import { VideoComment } from "@/types"
+import { useEffect, useState } from "react"
+import { DefaultAvatar } from "../default-avatar"
+
+export function CommentCard({
+  comment,
+  replies = []
+}: {
+  comment?: VideoComment,
+  replies: VideoComment[]
+}) {
+
+  const [userThumbnail, setUserThumbnail] = useState(comment?.user?.thumbnail || "")
+
+  useEffect(() => {
+    setUserThumbnail(comment?.user?.thumbnail || "")
+  
+  }, [comment?.user?.thumbnail])
+
+  if (!comment) { return null }
+
+  const handleBadUserThumbnail = () => {
+    try {
+      if (userThumbnail) {
+        setUserThumbnail("")
+      }
+    } catch (err) {
+      
+    }
+  }
+
+
+  return (
+    <div className={cn(
+      `flex flex-col`,
+
+    )}>
+      {/* THE COMMENT INFO - HORIZONTAL */}
+      <div className={cn(
+      `flex flex-col`,
+
+      )}>
+          <div
+          className={cn(
+            `flex flex-col items-center justify-center`,
+            `rounded-full overflow-hidden`,
+            `w-26 h-26`
+          )}
+        >
+         {comment.user.thumbnail
+          ? <img
+              src={comment.user.thumbnail}
+              onError={handleBadUserThumbnail}
+            />
+          : <DefaultAvatar
+              username={comment.user.userName}
+              bgColor="#fde047"
+              textColor="#1c1917"
+              width={104}
+              roundShape
+            />}
+        </div>
+      </div>
+
+      {/* THE REPLIES */}
+      {/* TODO */}
+    </div>
+  )
+}

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

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

src/app/interface/default-avatar/impl.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import RSA from "react-string-avatar"
+
+export type DefaultAvatarProps = {
+  username?: string
+  initials?: string
+  bgColor?: string
+  textColor?: string
+  roundShape?: boolean
+  cornerRadius?: number
+  pictureFormat?: string
+  pictureResolution?: number
+  width?: number
+  pixelated?: boolean
+  wrapper?: boolean
+  wrapperStyle?: Record<string, any>
+}
+
+export type DefaultAvatarComponent = (props: DefaultAvatarProps) => JSX.Element
+
+const ReactStringAvatar = RSA as DefaultAvatarComponent
+
+
+export default function DefaultAvatarImpl({
+  username,
+  initials: customInitials,
+  ...props
+}: DefaultAvatarProps): JSX.Element {
+
+  const usernameInitials = `${username || ""}`
+    .trim()
+    .replaceAll("_", " ")
+    .replaceAll("-", " ")
+    .replace(/([a-z])([A-Z])/g, '$1 $2') // split the camel case
+    .split(" ") // split words
+    .map(u => u.trim()[0]) // take first char
+    .slice(0, 2) // keep first 2 chars
+    .join("")
+    .toUpperCase()
+
+  return (
+    <ReactStringAvatar
+      initials={customInitials || usernameInitials}
+      {...props}
+    />
+  )
+}

src/app/interface/default-avatar/index.tsx

@@ -1,48 +1,7 @@
 "use client"
 
-import RSA from "react-string-avatar"
+import dynamic from "next/dynamic"
 
-export type DefaultAvatarProps = {
-  username?: string
-  initials?: string
-  bgColor?: string
-  textColor?: string
-  roundShape?: boolean
-  cornerRadius?: number
-  pictureFormat?: string
-  pictureResolution?: number
-  width?: number
-  pixelated?: boolean
-  wrapper?: boolean
-  wrapperStyle?: Record<string, any>
-}
-
-export type DefaultAvatarComponent = (props: DefaultAvatarProps) => JSX.Element
-
-const ReactStringAvatar = RSA as DefaultAvatarComponent
-
-
-export default function DefaultAvatar({
-  username,
-  initials: customInitials,
-  ...props
-}: DefaultAvatarProps): JSX.Element {
-
-  const usernameInitials = `${username || ""}`
-    .trim()
-    .replaceAll("_", " ")
-    .replaceAll("-", " ")
-    .replace(/([a-z])([A-Z])/g, '$1 $2') // split the camel case
-    .split(" ") // split words
-    .map(u => u.trim()[0]) // take first char
-    .slice(0, 2) // keep first 2 chars
-    .join("")
-    .toUpperCase()
-
-  return (
-    <ReactStringAvatar
-      initials={customInitials || usernameInitials}
-      {...props}
-    />
-  )
-}
+export const DefaultAvatar = dynamic(() => import("./impl"), {
+  loading: () => null,
+})

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

@@ -11,11 +11,7 @@ import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
 import { transparentImage } from "@/lib/transparentImage"
-
-const DefaultAvatar = dynamic(() => import("../default-avatar"), {
-  loading: () => null,
-})
- 
+import { DefaultAvatar } from "../default-avatar"
 
 export function VideoCard({
   video,
@@ -184,12 +180,12 @@ export function VideoCard({
             </div>
           </div>
           : <DefaultAvatar
-            username={video.channel.datasetUser}
-            bgColor="#fde047"
-            textColor="#1c1917"
-            width={36}
-            roundShape
-          />}
+              username={video.channel.datasetUser}
+              bgColor="#fde047"
+              textColor="#1c1917"
+              width={36}
+              roundShape
+            />}
           <div className={cn(
             `flex flex-col`,
             isCompact ?  `` : `flex-grow`

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

@@ -1,16 +1,12 @@
 "use client"
 
 import { useEffect, useState, useTransition } from "react"
-import dynamic from "next/dynamic"
 
 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"
-
-const DefaultAvatar = dynamic(() => import("../../interface/default-avatar"), {
-  loading: () => null,
-})
+import { DefaultAvatar } from "@/app/interface/default-avatar"
 
 export function PublicChannelView() {
   const [_isPending, startTransition] = useTransition()
@@ -66,12 +62,12 @@ export function PublicChannelView() {
             className="w-full h-full overflow-hidden object-cover"
           />
         : <DefaultAvatar
-          username={publicChannel.datasetUser}
-          bgColor="#fde047"
-          textColor="#1c1917"
-          width={160}
-          roundShape
-        />}
+            username={publicChannel.datasetUser}
+            bgColor="#fde047"
+            textColor="#1c1917"
+            width={160}
+            roundShape
+          />}
       </div>
 
       {/* CHANNEL INFO - HORIZONTAL */}

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

@@ -1,7 +1,6 @@
 "use client"
 
 import { useEffect, useState, useTransition } from "react"
-import dynamic from "next/dynamic"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 import { PiShareFatLight } from "react-icons/pi"
 import CopyToClipboard from "react-copy-to-clipboard"
@@ -18,10 +17,7 @@ import { RecommendedVideos } from "@/app/interface/recommended-videos"
 import { isCertifiedUser } from "@/app/certification"
 import { watchVideo } from "@/app/server/actions/stats"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
-
-const DefaultAvatar = dynamic(() => import("../../interface/default-avatar"), {
-  loading: () => null,
-})
+import { DefaultAvatar } from "@/app/interface/default-avatar"
  
 export function PublicVideoView() {
   const [_pending, startTransition] = useTransition()
@@ -160,12 +156,12 @@ export function PublicVideoView() {
                   </div>
                 </div>
                 : <DefaultAvatar
-                  username={video.channel.datasetUser}
-                  bgColor="#fde047"
-                  textColor="#1c1917"
-                  width={36}
-                  roundShape
-                />}
+                    username={video.channel.datasetUser}
+                    bgColor="#fde047"
+                    textColor="#1c1917"
+                    width={36}
+                    roundShape
+                  />}
               </div>
             </a>
 

src/types.ts

@@ -441,6 +441,48 @@ export type VideoInfo = {
   orientation: VideoOrientation
 }
 
+export type PublicUserInfo = {
+  id: string
+
+  type: "normal" | "admin"
+
+  userName: string
+
+  firstName: string
+
+  lastName: string
+
+  thumbnail: string
+
+  channels: ChannelInfo[]
+}
+
+export type PrivateUserInfo = PublicUserInfo & {
+
+  // the Hugging Face API token is confidential!
+  hfApiToken: string
+}
+
+export type VideoComment = {
+  id: string
+  
+  user: PublicUserInfo
+
+  // if the video comment is in response to another comment,
+  // then "inReplyTo" will contain the other video comment id
+  inReplyTo?: string
+
+  createdAt: string
+  updatedAt: string
+  message: string
+
+  // how many likes did the comment receive
+  nbLikes: number
+
+  // if the comment was appreciated by the video owner
+  appreciated: number
+}
+
 export type VideoGenerationModel =
   | "HotshotXL"
   | "SVD"
@@ -473,6 +515,7 @@ export type InterfaceView =
   | "public_music_videos" // public music videos - it's a special category, because music is *cool*
   | "not_found"
 
+
 export type Settings = {
   huggingfaceApiKey: string
 }