separate user account classes

src/app/certification.ts

@@ -0,0 +1,12 @@
+// for the moment only Hugging Face employees can be certified,
+// but it might be given to a select few high-profile partners
+// normal users don't need to be certified to enjoy the platform
+export const certifiedUsers = new Set([
+  "jbilcke-hf",
+  "merve",
+  "xenova"
+])
+
+export function isCertifiedUser(username: string): boolean {
+  return certifiedUsers.has(username.trim().toLowerCase())
+}

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

@@ -1,10 +1,15 @@
 import { useState } from "react"
+import dynamic from "next/dynamic"
 
 import { cn } from "@/lib/utils"
 import { ChannelInfo } from "@/types"
+import { isCertifiedUser } from "@/app/certification"
+import { RiCheckboxCircleFill } from "react-icons/ri"
 
-const defaultChannelThumbnail = "/huggingface-avatar.jpeg"
-
+const DefaultAvatar = dynamic(() => import("../default-avatar"), {
+  loading: () => null,
+})
+ 
 export function ChannelCard({
   channel,
   onClick,
@@ -18,8 +23,8 @@ export function ChannelCard({
 
   const handleBadChannelThumbnail = () => {
     try {
-      if (channelThumbnail !== defaultChannelThumbnail) {
-        setChannelThumbnail(defaultChannelThumbnail)
+      if (channelThumbnail) {
+        setChannelThumbnail("")
       }
     } catch (err) {
       
@@ -52,10 +57,18 @@ export function ChannelCard({
           `w-26 h-26`
         )}
       >
-        <img
-          src={channelThumbnail}
-          onError={handleBadChannelThumbnail}
-        />
+        {channelThumbnail ? 
+          <img
+            src={channelThumbnail}
+            onError={handleBadChannelThumbnail}
+          />
+        : <DefaultAvatar
+          username={channel.datasetUser}
+          bgColor="#fde047"
+          textColor="#1c1917"
+          width={104}
+          roundShape
+        />}
       </div>
 
       <div className={cn(
@@ -70,8 +83,9 @@ export function ChannelCard({
           } target="_blank">@{channel.datasetUser}</a>
         </div>
         */}
-        <div className="text-center text-xs font-medium">
-          @{channel.datasetUser}
+        <div className="flex flex-row items-center space-x-0.5">
+          <div className="flex flex-row items-center text-center text-xs font-medium">@{channel.datasetUser}</div>
+          {isCertifiedUser(channel.datasetUser) ? <div className="text-xs text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
         </div>
         <div className="flex flex-row items-center justify-center text-neutral-400">
           <div className="text-center text-xs">{0} videos</div>

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

@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
 import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { isCertifiedUser } from "@/app/certification"
 
 const DefaultAvatar = dynamic(() => import("../default-avatar"), {
   loading: () => null,
@@ -150,7 +151,7 @@ export function VideoCard({
               isCompact ? `text-xs` : `text-sm`
               )}>
               <div>{video.channel.label}</div>
-              <div><RiCheckboxCircleFill className="" /></div>
+              {isCertifiedUser(video.channel.datasetUser) ? <div><RiCheckboxCircleFill className="" /></div> : null}
             </div>
             
             <div className={cn(

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

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useState } 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"
@@ -14,7 +15,12 @@ import { VideoPlayer } from "@/app/interface/video-player"
 import { VideoInfo } from "@/types"
 import { ActionButton } from "@/app/interface/action-button"
 import { RecommendedVideos } from "@/app/interface/recommended-videos"
+import { isCertifiedUser } from "@/app/certification"
 
+const DefaultAvatar = dynamic(() => import("../../interface/default-avatar"), {
+  loading: () => null,
+})
+ 
 
 export function PublicVideoView() {
   const video = useStore(s => s.publicVideo)
@@ -23,6 +29,8 @@ export function PublicVideoView() {
 
   const [copied, setCopied] = useState<boolean>(false)
 
+  const [channelThumbnail, setChannelThumbnail] = useState(`${video?.channel.thumbnail || ""}`)
+
   // we inject the current videoId in the URL, if it's not already present
   // this is a hack for Hugging Face iframes
   useEffect(() => {
@@ -48,6 +56,18 @@ export function PublicVideoView() {
       }, 2000)
     }
   }, [copied])
+
+
+  const handleBadChannelThumbnail = () => {
+    try {
+      if (channelThumbnail) {
+        setChannelThumbnail("")
+      }
+    } catch (err) {
+      
+    }
+  }
+
   if (!video) { return null }
 
   return (
@@ -104,9 +124,22 @@ export function PublicVideoView() {
               `mr-3`
             )}>
               <div className="flex w-10 rounded-full overflow-hidden">
-                <img
-                  src="huggingface-avatar.jpeg"
-                />
+              {
+                channelThumbnail ? <div className="flex flex-col">
+                  <div className="flex w-9 rounded-full overflow-hidden">
+                    <img
+                      src={channelThumbnail}
+                      onError={handleBadChannelThumbnail}
+                    />
+                  </div>
+                </div>
+                : <DefaultAvatar
+                  username={video.channel.datasetUser}
+                  bgColor="#fde047"
+                  textColor="#1c1917"
+                  width={36}
+                  roundShape
+                />}
               </div>
             </div>
 
@@ -119,7 +152,7 @@ export function PublicVideoView() {
                 `text-zinc-100 text-base font-medium space-x-1`,
                 )}>
                 <div>{video.channel.label}</div>
-                <div className="text-sm text-neutral-400"><RiCheckboxCircleFill className="" /></div>
+                {isCertifiedUser(video.channel.datasetUser) ? <div className="text-sm text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
               </div>
               <div className={cn(
                 `flex flex-row items-center`,