added a view counter

.env

@@ -1,6 +1,8 @@
 
 NEXT_PUBLIC_SHOW_BETA_FEATURES="false"
 
+NEXT_PUBLIC_DEVELOPER_MODE="false"
+
 ADMIN_HUGGING_FACE_API_TOKEN=""
 ADMIN_HUGGING_FACE_USERNAME=""
 
@@ -9,6 +11,8 @@ AI_TUBE_ROBOT_API="https://jbilcke-hf-ai-tube-robot.hf.space"
 UPSTASH_REDIS_REST_URL=""
 UPSTASH_REDIS_REST_TOKEN=""
 
+WINNERS=""
+x
 # ----------- CENSORSHIP -------
 ENABLE_CENSORSHIP=
 FINGERPRINT_KEY=

src/app/config.ts

@@ -4,4 +4,8 @@ export const showBetaFeatures = `${
 
 
 export const defaultVideoModel = "SVD"
-export const defaultVoice = "Julian"
+export const defaultVoice = "Julian"
+
+export const developerMode = `${
+  process.env.NEXT_PUBLIC_DEVELOPER_MODE || ""
+}`.trim().toLowerCase() === "true"

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

@@ -213,7 +213,7 @@ export function VideoCard({
               isCompact ? `text-2xs lg:text-xs` : `text-sm`,
               `space-x-1`
             )}>
-            <div>0 views</div>
+            <div>{video.numberOfViews} views</div>
             <div className="font-semibold scale-125">·</div>
             <div>{formatTimeAgo(video.updatedAt)}</div>
             </div>

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

@@ -0,0 +1,14 @@
+"use server"
+
+import { VideoInfo } from "@/types"
+import { getNumberOfViewsForVideos } from "../stats"
+
+export async function extendVideosWithStats(videos: VideoInfo[]): Promise<VideoInfo[]> {
+  
+  const stats = await getNumberOfViewsForVideos(videos.map(v => v.id))
+
+  return videos.map(v => {
+    v.numberOfViews = stats[v.id] || 0
+    return v
+  })
+}

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

@@ -5,6 +5,7 @@ import { ChannelInfo, VideoInfo, VideoStatus } from "@/types"
 import { getVideoRequestsFromChannel  } from "./getVideoRequestsFromChannel"
 import { adminApiKey } from "../config"
 import { getVideoIndex } from "./getVideoIndex"
+import { extendVideosWithStats } from "./extendVideosWithStats"
 
 // return 
 export async function getChannelVideos({
@@ -28,7 +29,7 @@ export async function getChannelVideos({
   const queued = await getVideoIndex({ status: "queued" })
   const published = await getVideoIndex({ status: "published" })
 
-  return videos.map(v => {
+  const validVideos = videos.map(v => {
    let video: VideoInfo = {
       id: v.id,
       status: "submitted",
@@ -57,10 +58,16 @@ export async function getChannelVideos({
 
     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
   })
+
+  // ask Redis for the freshest stats
+  const results = await extendVideosWithStats(validVideos)
+
+  return results
 }

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

@@ -3,6 +3,7 @@
 import { VideoInfo } from "@/types"
 
 import { getVideoIndex } from "./getVideoIndex"
+import { getNumberOfViewsForVideo } from "../stats"
 
 export async function getVideo({
   videoId,
@@ -25,6 +26,8 @@ export async function getVideo({
       throw new Error(`cannot get the video, nothing found for id "${id}"`)
     }
 
+    video.numberOfViews = await getNumberOfViewsForVideo(video.id)
+
     return video
   } catch (err) {
     if (neverThrow) {

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

@@ -3,6 +3,7 @@
 import { VideoInfo } from "@/types"
 
 import { getVideoIndex } from "./getVideoIndex"
+import { extendVideosWithStats } from "./extendVideosWithStats"
 
 const HARD_LIMIT = 100
 
@@ -90,5 +91,11 @@ export async function getVideos({
   
 
   // we enforce the max limit of HARD_LIMIT (eg. 100)
-  return videosMatchingFilters.slice(0, Math.min(HARD_LIMIT, maxVideos))
+  const cappedVideos = videosMatchingFilters.slice(0, Math.min(HARD_LIMIT, maxVideos))
+
+
+  // finally, we ask Redis for the freshest stats
+  const videosWithStats = await extendVideosWithStats(cappedVideos)
+
+  return videosWithStats
 }

src/app/server/actions/config.ts

@@ -7,3 +7,10 @@ export const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`
 export const adminCredentials: Credentials = { accessToken: adminApiKey }
 
 export const aiTubeRobotApi = `${process.env.AI_TUBE_ROBOT_API || ""}`
+
+export const redisUrl = `${process.env.UPSTASH_REDIS_REST_URL || ""}`
+export const redisToken = `${process.env.UPSTASH_REDIS_REST_TOKEN || ""}`
+
+export const developerMode = `${
+  process.env.NEXT_PUBLIC_DEVELOPER_MODE || ""
+}`.trim().toLowerCase() === "true"

src/app/server/actions/stats.ts

@@ -0,0 +1,68 @@
+"use server"
+
+import { Redis } from "@upstash/redis"
+
+import { redisToken, redisUrl } from "./config"
+import { developerMode } from "@/app/config"
+
+const redis = new Redis({
+  url: redisUrl,
+  token: redisToken
+})
+
+export async function getNumberOfViewsForVideos(videoIds: string[]): Promise<Record<string, number>> {
+  if (!Array.isArray(videoIds)) {
+    return {}
+  }
+
+  try {
+    
+    const stats: Record<string, number> = {}
+
+    const ids: string[] = []
+
+    for (const videoId of videoIds) {
+      ids.push(`videos:${videoId}:stats:views`)
+      stats[videoId] = 0
+    }
+
+
+    const values = await redis.mget<number[]>(...ids)
+
+    values.forEach((nbViews, i) => {
+      const videoId = ids[i]
+      stats[videoId] = nbViews || 0
+    })
+
+    return stats
+  } catch (err) {
+    return {}
+  }
+}
+
+export async function getNumberOfViewsForVideo(videoId: string): Promise<number> {
+  try {
+    const key = `videos:${videoId}:stats`
+
+    const result = await redis.get<number>(key) || 0
+
+    return result
+  } catch (err) {
+    return 0
+  }
+}
+
+
+export async function watchVideo(videoId: string): Promise<number> {
+  if (developerMode) {
+    return getNumberOfViewsForVideo(videoId)
+  }
+
+  try {
+    const result = await redis.incr(`videos:${videoId}:stats:views`)
+    
+    return result
+  } catch (err) {
+    return 0
+  }
+}

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState, useTransition } from "react"
 import dynamic from "next/dynamic"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 import { PiShareFatLight } from "react-icons/pi"
@@ -16,12 +16,15 @@ 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"
 
 const DefaultAvatar = dynamic(() => import("../../interface/default-avatar"), {
   loading: () => null,
 })
  
 export function PublicVideoView() {
+  const [_pending, startTransition] = useTransition()
   const video = useStore(s => s.publicVideo)
 
   const videoId = `${video?.id || ""}`
@@ -67,6 +70,17 @@ export function PublicVideoView() {
     }
   }
 
+  useEffect(() => {
+    if (!videoId) {
+      return
+    }
+
+    startTransition(async () => {
+      await watchVideo(videoId)
+    })
+
+  }, [videoId])
+
   if (!video) { return null }
 
   return (
@@ -244,8 +258,12 @@ export function PublicVideoView() {
           `transition-all duration-200 ease-in-out`,
           `rounded-xl`,
           `bg-neutral-700/50`,
-          `text-sm`,
+          `text-sm text-zinc-100`,
         )}>
+          <div className="flex flex-row space-x-2 font-medium mb-1">
+            <div>{video.numberOfViews} views</div>
+            <div>{formatTimeAgo(video.updatedAt).replace("about ", "")}</div>
+          </div>
           <p>{video.description}</p>
         </div>
       </div>

src/lib/getChannelRating.ts

@@ -0,0 +1,12 @@
+import { ChannelInfo } from "@/types"
+
+const winners = new Set(`${process.env.WINNERS || ""}`.toLowerCase().split(",").map(x => x.trim()).filter(x => x))
+
+// TODO: replace by a better algorithm
+export function getChannelRating(channel: ChannelInfo) {
+  if (winners.has(channel.datasetUser.toLowerCase())) { return 0 }
+
+  // TODO check views statistics to determine clusters
+  
+  return 5
+}