preparing transition to user-generated content + gaussians

.env

@@ -1,4 +1,6 @@
 
+NEXT_PUBLIC_DOMAIN="https://aitube.at"
+
 NEXT_PUBLIC_SHOW_BETA_FEATURES="false"
 
 NEXT_PUBLIC_DEVELOPER_MODE="false"

README.md

@@ -1,5 +1,5 @@
 ---
-title: AI Tube
+title: AiTube
 emoji: 🍿
 colorFrom: red
 colorTo: red
@@ -9,7 +9,7 @@ app_port: 3000
 disable_embedding: false
 ---
 
-# 🍿 AI Tube
+# 🍿 AiTube
 
 ## FAQ
 
@@ -19,7 +19,7 @@ There will be a UI to edit them in the future
 
 ### How often videos are generated?
 
-There is a script (called the AI Tube Robot - code is also available, see my profile) which checks the Hugging Face platform every 5 minutes for new content.
+There is a script (called the AiTube Robot - code is also available, see my profile) which checks the Hugging Face platform every 5 minutes for new content.
 
 However, once it starts generating a video, the bot will be kept busy for an hour or so (sometimes more),
 and during this time the other videos will wait patiently.
@@ -27,7 +27,7 @@ and during this time the other videos will wait patiently.
 ### My video failed to generate! Is it lost?
 
 That's the beauty of the dataset system: as long as you keep your video in your dataset,
-and it is not published yet (is not visible on the AI Tube home page), then for the AI Tube Robot it will still be marked as "TODO".
+and it is not published yet (is not visible on the AiTube home page), then for the AiTube Robot it will still be marked as "TODO".
 
 So.. you normally have nothing to do (unless your video config or channel config is really damaged or invalid).
 
@@ -42,7 +42,7 @@ This delay will be reduced in the future.
 
 ### Videos are taking too long to generate
 
-AI Tube is about generating videos in the background, slowly.
+AiTube is about generating videos in the background, slowly.
 
 It's the whole concept: to generate multi-minutes videos, with lot of stuff like audio, speech etc
 (if you are only interested in generate a 2 to 4 sec silent video, I suggest you use ComfyUI, Automatic1111 stable-diffusion-webui, or RunwayML or Pika Labs if your prefer commercial services).
@@ -70,9 +70,9 @@ This is all new technology based on research tools, so sometimes they can crash,
 
 This is a bug, it will be fixed in the future but I haven't had the opportunity to take a look yet (the cause is that I don't generate the video based on audio length yet).
 
-### Can I clone AI Tube or download it to run on my machine?
+### Can I clone AiTube or download it to run on my machine?
 
-AI Tube is designed to be a unique community and platform, not a downloadable tool or app.
+AiTube is designed to be a unique community and platform, not a downloadable tool or app.
 Maybe one day there will be an offline version (similar to how my latent browser project worked), but for the moment the focus is on developing it as a community rather than a tool that can be cloned, rebranded, wrapped into ads by someone else etc.
 
 ### My video has been generated, but I don't see it anymore

package.json

@@ -10,27 +10,34 @@
   },
   "dependencies": {
     "@huggingface/hub": "0.12.3-oauth",
-    "@huggingface/inference": "^2.6.4",
     "@jcoreio/async-throttle": "^1.6.0",
-    "@photo-sphere-viewer/core": "^5.5.1",
-    "@photo-sphere-viewer/video-plugin": "^5.5.1",
+    "@photo-sphere-viewer/core": "^5.7.2",
+    "@photo-sphere-viewer/equirectangular-video-adapter": "^5.7.2",
+    "@photo-sphere-viewer/gyroscope-plugin": "^5.7.2",
+    "@photo-sphere-viewer/markers-plugin": "^5.7.2-fix.1",
+    "@photo-sphere-viewer/overlays-plugin": "^5.7.2",
+    "@photo-sphere-viewer/resolution-plugin": "^5.7.2",
+    "@photo-sphere-viewer/settings-plugin": "^5.7.2",
+    "@photo-sphere-viewer/stereo-plugin": "^5.7.2",
+    "@photo-sphere-viewer/video-plugin": "^5.7.2",
+    "@photo-sphere-viewer/visible-range-plugin": "^5.7.2",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.3",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-toast": "^1.1.4",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/web": "^9.7.3",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "20.4.2",
@@ -39,49 +46,49 @@
     "@types/uuid": "^9.0.2",
     "@upstash/query": "^0.0.2",
     "@upstash/redis": "^1.28.3",
-    "alchemy-sdk": "^3.1.2",
-    "autoprefixer": "10.4.14",
-    "class-variance-authority": "^0.6.1",
-    "clsx": "^2.0.0",
-    "cmdk": "^0.2.0",
+    "alchemy-sdk": "^3.2.1",
+    "autoprefixer": "10.4.19",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
     "cookies-next": "^2.1.2",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.6.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
     "fastest-levenshtein": "^1.0.16",
+    "gsplat": "^1.2.3",
     "hash-wasm": "^4.11.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.260.0",
     "markdown-yaml-metadata-parser": "^3.0.0",
     "minisearch": "^6.3.0",
-    "next": "^14.1.0",
-    "photo-sphere-viewer-lensflare-plugin": "^2.0.1",
+    "next": "^14.1.4",
+    "photo-sphere-viewer-lensflare-plugin": "^2.1.2",
     "pick": "^0.0.1",
-    "postcss": "8.4.26",
-    "qs": "^6.11.2",
+    "postcss": "8.4.38",
+    "qs": "^6.12.0",
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
-    "react-photo-sphere-viewer": "^4.0.2-psv5.4.4",
+    "react-photo-sphere-viewer": "^5.0.2-psv5.7.1",
     "react-smooth-scroll-hook": "^1.3.4",
     "react-string-avatar": "^1.2.2",
     "react-tuby": "^0.1.24",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window-infinite-loader": "^1.0.9",
-    "replicate": "^0.17.0",
     "sbd": "^1.0.19",
     "sentence-splitter": "^4.3.0",
-    "sharp": "^0.32.5",
-    "styled-components": "^6.0.7",
-    "tailwind-merge": "^2.1.0",
-    "tailwindcss": "3.4.1",
+    "sharp": "^0.33.3",
+    "styled-components": "^6.1.8",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "temp-dir": "^3.0.0",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "type-fest": "^4.8.2",
-    "typescript": "5.1.6",
+    "typescript": "5.4.4",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.1",
     "yaml": "^2.3.4",

src/app/api/login/route.ts

@@ -3,12 +3,12 @@ import { NextResponse, NextRequest } from "next/server"
 
 const defaultState = JSON.stringify({
   nonce: "",
-  redirectUri: "https://aitube.at/api/login",
+  redirectUri: `${process.env.NEXT_PUBLIC_DOMAIN}/api/login`,
   state: JSON.stringify({ redirectTo: "/" })
 })
 
 export async function GET(req: NextRequest) {
- // we are going to pass the whole thing unchanged to the AI Tube frontend
+ // we are going to pass the whole thing unchanged to the AiTube frontend
  const params = req.url.split("/api/login").pop() || ""
 
   
@@ -26,7 +26,7 @@ export async function GET(req: NextRequest) {
     state // <-- this is defined by us!
   } = JSON.parse(`${query.state || defaultState}`)
 
-  // this is the path of the AI Tube page which the user was browser
+  // this is the path of the AiTube page which the user was browser
   // eg. this can be /account, /, or nothing
   // const redirectTo = `${state.redirectTo || "/"}`
 
@@ -35,11 +35,11 @@ export async function GET(req: NextRequest) {
   const redirectTo = "/account"
 
 
-  return NextResponse.redirect(`https://aitube.at${redirectTo}${params}`)
+  return NextResponse.redirect(`${process.env.NEXT_PUBLIC_DOMAIN}${redirectTo}${params}`)
 }
 
 export async function POST(req: NextRequest, res: NextResponse) {
-  // we are going to pass the whole thing unchanged to the AI Tube frontend
+  // we are going to pass the whole thing unchanged to the AiTube frontend
   const params = req.url.split("/api/login").pop() || ""
 
   
@@ -57,7 +57,7 @@ export async function POST(req: NextRequest, res: NextResponse) {
     state // <-- this is defined by us!
   } = JSON.parse(`${query.state || defaultState}`)
 
-  // this is the path of the AI Tube page which the user was browser
+  // this is the path of the AiTube page which the user was browser
   // eg. this can be /account, /, or nothing
   // const redirectTo = `${state.redirectTo || "/"}`
 
@@ -66,5 +66,5 @@ export async function POST(req: NextRequest, res: NextResponse) {
   const redirectTo = "/account"
 
 
-  return NextResponse.redirect(`https://aitube.at${redirectTo}${params}`)
+  return NextResponse.redirect(`${process.env.NEXT_PUBLIC_DOMAIN}${redirectTo}${params}`)
 }

src/app/api/media/[mediaId]/route.ts

@@ -0,0 +1,76 @@
+import { NextResponse, NextRequest } from "next/server"
+
+import { getVideo } from "@/app/server/actions/ai-tube-hf/getVideo"
+import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType";
+
+export async function GET(req: NextRequest) {
+  const mediaId = req.url.split("/").pop() || ""
+  const media = await getVideo({ videoId: mediaId, neverThrow: true })
+  if (!media) {
+    return new NextResponse("media not found", { status: 404 });
+  }
+  const isEquirectangular = parseMediaProjectionType(media) === "equirectangular"
+  
+  const html = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>${media.label} - AiTube</title>
+    <meta name="description" content="${media.description}<">
+    <script src="/aframe/aframe-master.js"></script>
+    <script src="/aframe/play-on-click.js"></script>
+    <script src="/aframe/hide-on-play.js"></script>
+  </head>
+  <body>
+    <a-scene>
+      <a-assets>
+        <video
+          id="video"
+          loop
+          crossorigin="anonymous"
+          playsinline
+          webkit-playsinline
+          src="${media.assetUrlHd || media.assetUrl}">
+        </video>
+      </a-assets>
+      ${
+        isEquirectangular
+        ? `
+      <a-videosphere
+        rotation="0 -90 0"
+        src="#video"
+        play-on-click>
+      </a-videosphere>
+      ` :
+      `<a-video
+        src="#video"
+        width="${
+        3 // 1024
+      }" height="${
+        1.6875 // 576
+      }"
+      play-on-click>
+      </a-video>`
+      }
+      <a-camera>
+        <a-entity
+          position="0 0 -1.5"
+          text="align: center;
+                width: 6;
+                wrapCount: 100;
+                color: white;
+                value: Click or tap to start video"
+          hide-on-play="#video">
+        </a-entity>
+      </a-camera>
+    </a-scene>
+  </body>
+</html>`
+
+  return new NextResponse(html, {
+     status: 200,
+    headers: new Headers({ "content-type": "text/html" }),
+  })
+}

src/app/api/video/[videoId]/route.ts

@@ -1,18 +1,19 @@
 import { NextResponse, NextRequest } from "next/server"
 
 import { getVideo } from "@/app/server/actions/ai-tube-hf/getVideo"
-import { parseProjectionFromLoRA } from "@/app/server/actions/utils/parseProjectionFromLoRA";
+import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType";
 
+/**
+ * @deprecated
+ */
 export async function GET(req: NextRequest) {
+  
   const videoId = req.url.split("/").pop() || ""
   const video = await getVideo({ videoId, neverThrow: true })
   if (!video) {
     return new NextResponse("video not found", { status: 404 });
   }
-  const isEquirectangular = (
-    video.projection === "equirectangular" ||
-    parseProjectionFromLoRA(video.lora) === "equirectangular"
-  )
+  const isEquirectangular = parseMediaProjectionType(video) === "equirectangular"
   
   const html = `
 <!DOCTYPE html>
@@ -20,7 +21,7 @@ export async function GET(req: NextRequest) {
   <head>
     <meta charset="utf-8">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <title>${video.label} - AI Tube</title>
+    <title>${video.label} - AiTube</title>
     <meta name="description" content="${video.description}<">
     <script src="/aframe/aframe-master.js"></script>
     <script src="/aframe/play-on-click.js"></script>

src/app/embed/page.tsx

@@ -17,29 +17,29 @@ export async function generateMetadata(
   const metadataBase = new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube')
 
   try {
-    const video = await getVideo({ videoId, neverThrow: true })
+    const media = await getVideo({ videoId, neverThrow: true })
 
-    if (!video) {
-      throw new Error("Video not found")
+    if (!media) {
+      throw new Error("Media not found")
     }
 
     return {
-      title: `${video.label} - AiTube`,
+      title: `${media.label} - AiTube`,
       metadataBase,
       openGraph: {
         // some cool stuff we could use here:
         // 'video.tv_show' | 'video.other' | 'video.movie' | 'video.episode';
         type: "video.other",
         // url: "https://example.com",
-        title: video.label || "", // put the video title here
-        description: video.description || "", // put the video description here
+        title: media.label || "", // put the video title here
+        description: media.description || "", // put the video description here
         siteName: "AiTube",
         images: [
-          `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${video.id}.webp`
+          `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${media.id}.webp`
         ],
         videos: [
           {
-            "url": video.assetUrlHd || video.assetUrl
+            "url": media.assetUrlHd || media.assetUrl
           }
         ],
         // images: ['/some-specific-page-image.jpg', ...previousImages],
@@ -47,11 +47,11 @@ export async function generateMetadata(
       twitter: {
         card: "player",
         site: "@flngr",
-        description: video.description || "", 
-        images: `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${video.id}.webp`,
+        description: media.description || "", 
+        images: `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${media.id}.webp`,
         players: {
-          playerUrl: `https://jbilcke-hf-ai-tube.hf.space/embed?v=${video.id}`,
-          streamUrl: `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${video.id}.mp4`,
+          playerUrl: `${process.env.NEXT_PUBLIC_DOMAIN}/embed?v=${media.id}`,
+          streamUrl: `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${media.id}.mp4`,
           width: 1024,
           height: 576
         }
@@ -76,7 +76,14 @@ export async function generateMetadata(
 }
 
 
-export default async function Embed({ searchParams: { v: videoId } }: AppQueryProps) {
+export default async function Embed({
+  searchParams: {
+    v: videoId
+
+    // TODO add:
+    // m: mediaId
+  }
+}: AppQueryProps) {
   const publicVideo = await getVideo({ videoId, neverThrow: true })
   // console.log("WatchPage: --> " + video?.id)
   return (

src/app/interface/about/index.tsx

@@ -43,14 +43,14 @@ export function About() {
       </DialogTrigger>
       <DialogContent className="sm:max-w-[800px]">
         <DialogHeader>
-          <DialogTitle>AI Tube</DialogTitle>
+          <DialogTitle>AiTube</DialogTitle>
           <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
-            What is AI Tube?
+            What is AiTube?
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4 text-stone-200 text-base">
         <p className="">
-          AI Tube is a sandbox platform launched in Nov 2023 to experiment with autonomous creation of long videos. The videos are generated from single text prompts by humans and by AI robots. 
+          AiTube is a sandbox platform launched in Nov 2023 to experiment with autonomous creation of long videos. The videos are generated from single text prompts by humans and by AI robots. 
         </p>
         <p>
           To my knowledge, is the first platform to operate this way. As a research sandbox, it features other experiments such as being the first platform to autonomously generate VR videos using AI (<a href="api/video/37b626a8-3eb9-4127-8d91-20837bc08ae7" target="_blank" className="underline">open this example</a> with a WebXR-compatible device eg. an iPhone).

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

@@ -112,6 +112,7 @@ export function CollectionCard({
                   `flex flex-col items-center justify-center text-center`,
                   `bg-neutral-900 rounded`,
                   `text-2xs font-semibold px-[3px] py-[1px]`,
+                  isFinite(duration) && !isNaN(duration) && duration > 0 ? 'opacity-100' : 'opacity-0'
                 )}
                 >{formatDuration(duration)}</div>
               </div>

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

@@ -3,7 +3,7 @@
 import AutoSizer from "react-virtualized-auto-sizer"
 
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 import { VideoSphereViewer } from "./viewer"
 
@@ -11,7 +11,7 @@ export function EquirectangularVideoPlayer({
   video,
   className = "",
  }: {
-  video?: VideoInfo
+  video?: MediaInfo
   className?: string
 }) {
 

src/app/interface/equirectangular-video-player/viewer.tsx

@@ -1,14 +1,21 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react"
-import AutoSizer from "react-virtualized-auto-sizer"
-import { PanoramaPosition, PluginConstructor, Point, Position, SphericalPosition, Viewer } from "@photo-sphere-viewer/core"
-import { EquirectangularVideoAdapter, LensflarePlugin, ReactPhotoSphereViewer, ResolutionPlugin, SettingsPlugin, VideoPlugin } from "react-photo-sphere-viewer"
+import { useEffect, useRef } from "react"
+import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
 
-import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { Viewer } from "@photo-sphere-viewer/core"
+
+import { EquirectangularVideoAdapter } from "@photo-sphere-viewer/equirectangular-video-adapter"
+
+import { SettingsPlugin } from "@photo-sphere-viewer/settings-plugin"
+import { ResolutionPlugin } from "@photo-sphere-viewer/resolution-plugin"
+import { VideoPlugin } from "@photo-sphere-viewer/video-plugin"
 
-type PhotoSpherePlugin = (PluginConstructor | [PluginConstructor, any])
+import "@photo-sphere-viewer/settings-plugin/index.css"
+import "@photo-sphere-viewer/video-plugin/index.css"
+
+import { cn } from "@/lib/utils"
+import { MediaInfo } from "@/types/general"
 
 export function VideoSphereViewer({
   video,
@@ -17,7 +24,7 @@ export function VideoSphereViewer({
   height,
   muted = false,
  }: {
-  video: VideoInfo
+  video: MediaInfo
   className?: string
   width: number
   height: number
@@ -64,15 +71,16 @@ export function VideoSphereViewer({
         // plugins={[[LensflarePlugin, { lensflares: [] }]]}
 
         adapter={[EquirectangularVideoAdapter, { muted }]}
+
         navbar="video"
         src="" 
         plugins={[
+          [SettingsPlugin, {}],
           [VideoPlugin, {
             muted,
             // progressbar: true,
             bigbutton: false
           }],
-          // SettingsPlugin,
           [ResolutionPlugin, {
             defaultResolution: 'HD',
             resolutions: [

src/app/interface/gsplat/index.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from "react"
+import * as SPLAT from "gsplat"
+
+type GsplatStatus =
+  | "idle"
+  | "loading"
+  | "loaded"
+  | "failed"
+
+export function Gsplat({
+  url,
+  width,
+  height,
+  className = "" }: {
+  url: string
+  width?: number
+  height?: number
+  className?: string
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const sceneRef = useRef<SPLAT.Scene>()
+  const cameraRef = useRef<SPLAT.Camera>()
+  const controlsRef = useRef<SPLAT.OrbitControls>()
+  const rendererRef = useRef<SPLAT.WebGLRenderer>()
+  const frameIdRef = useRef<number>(0)
+  const statusRef = useRef<GsplatStatus>("idle")
+
+  function animate() {
+    const renderer = rendererRef.current
+    const scene = sceneRef.current
+    const camera = cameraRef.current
+    const controls = controlsRef.current
+    if (!scene || !renderer || !camera || !controls) { return }
+
+
+    controls.update()
+    renderer.render(scene, camera)
+    frameIdRef.current = requestAnimationFrame(animate)
+  }
+
+  async function loadScene() {
+    const canvas = canvasRef.current
+    if (!canvas) { return }
+
+    const status = statusRef.current
+    if (!status || status === "loaded" || status === "loading" || status === "failed") {
+      console.log(`Gsplat: a scene is already loading or loaded: skipping..`)
+      return
+    }
+
+    statusRef.current = "loading"
+
+    try {
+      const renderer = rendererRef.current = new SPLAT.WebGLRenderer(canvas)
+      
+      let fileUrl = url.trim()
+      let fileExt = fileUrl.toLowerCase().split(".").pop() || "splat"
+      const isVideo = fileExt === "splatv"
+
+      if (isVideo) {
+        console.log("Gsplat: loading video splat..")
+
+        renderer.addProgram(new SPLAT.VideoRenderProgram(renderer))
+
+        const scene = sceneRef.current = new SPLAT.Scene()
+        const camera = cameraRef.current = new SPLAT.Camera()
+        const controls = controlsRef.current = new SPLAT.OrbitControls(camera, renderer.canvas)
+    
+        await SPLAT.SplatvLoader.LoadAsync(url, scene, camera, (progress) => {
+          console.log(`${Math.round(progress * 100)}%`)
+        })
+
+        controls.setCameraTarget(camera.position.add(camera.forward.multiply(5)))
+      } else {
+        console.log("Gsplat: loading static splat..")
+        const scene = sceneRef.current = new SPLAT.Scene()
+        const camera = cameraRef.current = new SPLAT.Camera()
+        const controls = controlsRef.current = new SPLAT.OrbitControls(camera, renderer.canvas)
+    
+        await SPLAT.Loader.LoadAsync(url, scene, (progress) => {
+          console.log(`${Math.round(progress * 100)}%`)
+        })
+      }
+      
+      console.log("Gsplat: finished loading! rendering..")
+      statusRef.current = "loaded"
+    } catch (err) {
+      console.error(`Gsplat: failed to load the content`)
+      statusRef.current = "failed"
+      return
+    }
+   
+    animate()
+  };
+
+  useEffect(() => {
+    if (!canvasRef.current) { return }
+    loadScene()
+    return () => { cancelAnimationFrame(frameIdRef?.current || 0) }
+  }, [])
+
+  // responsive width and height
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const renderer = rendererRef.current
+
+    if (!canvas || !renderer) { return }
+
+    // renderer.setSize(canvas.clientWidth, canvas.clientHeight)
+    renderer.setSize(
+      width || canvas.clientWidth,
+      height || canvas.clientHeight
+    )
+  }, [width, height])
+  return (
+    <div style={{ width, height }} className={className}>
+      <canvas ref={canvasRef} style={{ width, height}}></canvas>
+    </div>
+  );
+}

src/app/interface/left-menu/index.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link"
-import { TbBrandDiscord } from "react-icons/tb"
+import { TbBrandDiscord, TbOctahedron } from "react-icons/tb"
 import { AiOutlineQuestionCircle } from "react-icons/ai"
 import { GrChannel } from "react-icons/gr"
-import { MdVideoLibrary } from "react-icons/md"
+import { MdOutlineLiveTv, MdOutlineVideogameAsset, MdVideoLibrary } from "react-icons/md"
 import { RiHome8Line } from "react-icons/ri"
 import { PiRobot } from "react-icons/pi"
 import { CgProfile } from "react-icons/cg"
@@ -56,6 +56,32 @@ export function LeftMenu() {
             Music
           </MenuItem>
         </Link>
+        {/*
+        <Link href="/gaming">
+          <MenuItem
+            icon={<TbOctahedron className="h-6.5 w-6.5" />}
+            selected={view === "public_4d"}
+            >
+            4D
+          </MenuItem>
+        </Link>
+        <Link href="/gaming">
+          <MenuItem
+            icon={<MdOutlineVideogameAsset className="h-6.5 w-6.5" />}
+            selected={view === "public_gaming"}
+            >
+            Gaming
+          </MenuItem>
+        </Link>
+        <Link href="/live">
+          <MenuItem
+            icon={<MdOutlineLiveTv className="h-6.5 w-6.5" />}
+            selected={view === "public_live"}
+            >
+            Live
+          </MenuItem>
+        </Link>
+        */}
       </div>
       <div className={cn(
         `flex flex-col w-full`,

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

@@ -1,20 +1,20 @@
 import { useEffect, useState, useTransition } from "react"
-import { VideoInfo, VideoRating } from "@/types/general"
-
-import { GenericLikeButton } from "./generic"
-import { getVideoRating, rateVideo } from "@/app/server/actions/stats"
 import { useLocalStorage } from "usehooks-ts"
+
+import { MediaInfo, MediaRating } from "@/types/general"
+import { getMediaRating, rateMedia } from "@/app/server/actions/stats"
 import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 
+import { GenericLikeButton } from "./generic"
 export function LikeButton({
-  video
+  media
 }: {
-  video?: VideoInfo
+  media?: MediaInfo
 }) {
   const [_pending, startTransition] = useTransition()
 
-  const [rating, setRating] = useState<VideoRating>({
+  const [rating, setRating] = useState<MediaRating>({
     isLikedByUser: false,
     isDislikedByUser: false,
     numberOfLikes: 0,
@@ -28,15 +28,15 @@ export function LikeButton({
 
   useEffect(() => {
     startTransition(async () => {
-      if (!video || !video?.id) { return }
+      if (!media || !media?.id) { return }
 
-      const freshRating = await getVideoRating(video.id, huggingfaceApiKey)
+      const freshRating = await getMediaRating(media.id, huggingfaceApiKey)
       setRating(freshRating)
 
     })
-  }, [video?.id, huggingfaceApiKey])
+  }, [media?.id, huggingfaceApiKey])
 
-  if (!video) { return null }
+  if (!media) { return null }
   
   if (!huggingfaceApiKey) { return null }
 
@@ -52,7 +52,7 @@ export function LikeButton({
     })
     startTransition(async () => {
       try {
-        const freshRating = await rateVideo(video.id, true, huggingfaceApiKey)
+        const freshRating = await rateMedia(media.id, true, huggingfaceApiKey)
         // setRating(freshRating)
       } catch (err) {
         setRating(previousRating)
@@ -72,7 +72,7 @@ export function LikeButton({
     })
     startTransition(async () => {
       try {
-        const freshRating = await rateVideo(video.id, false, huggingfaceApiKey)
+        const freshRating = await rateMedia(media.id, false, huggingfaceApiKey)
         // setRating(freshRating)
       } catch (err) {
         setRating(previousRating)

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

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import { MediaDisplayLayout, VideoInfo } from "@/types/general"
+import { MediaDisplayLayout, MediaInfo } from "@/types/general"
 import { TrackCard } from "../track-card"
 import { VideoCard } from "../video-card"
 
@@ -11,7 +11,7 @@ export function MediaList({
   onSelect,
   selectedId,
 }: {
-  items: VideoInfo[]
+  items: MediaInfo[]
 
   /**
    * Layout mode
@@ -31,7 +31,7 @@ export function MediaList({
 
   className?: string
 
-  onSelect?: (media: VideoInfo) => void
+  onSelect?: (media: MediaInfo) => void
 
   selectedId?: string
 }) {

src/app/interface/{video-player → media-player}/cartesian.tsx

@@ -4,25 +4,37 @@ import { Player } from "react-tuby"
 import "react-tuby/css/main.css"
 
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 export function CartesianVideoPlayer({
-  video,
+  media,
   enableShortcuts = true,
   className = "",
   // currentTime,
  }: {
-  video: VideoInfo
+  media: MediaInfo
   enableShortcuts?: boolean
   className?: string
   // currentTime?: number
 }) {
+
+  const assetUrl = media.assetUrlHd || media.assetUrl
+
+  if (!assetUrl) {
+    return (
+      <div className={cn(
+        `w-full`,
+        `flex flex-col items-center justify-center`,
+        className
+      )}>
+    </div>
+  )}
+
   return (
     <div className={cn(
-      `w-full`,
-      `flex flex-col items-center justify-center`,
-      `rounded-xl overflow-hidden`,
-      className
+        `w-full`,
+        `flex flex-col items-center justify-center`,
+        className
       )}>
       <div className={cn(
         `w-[calc(100%+16px)]`,
@@ -36,7 +48,10 @@ export function CartesianVideoPlayer({
           src={[
             {
               quality: "Full HD",
-              url: video.assetUrlHd || video.assetUrl,
+
+              // TODO: separate the media asset URLs into separate source channels,
+              // one for each resolution
+              url: media.assetUrlHd || media.assetUrl,
             }
           ]}
 
@@ -44,7 +59,7 @@ export function CartesianVideoPlayer({
 
           subtitles={[]}
           poster={
-            `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${video.id}.webp`
+            `https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/${media.id}.webp`
           }
         />
       </div>

src/app/interface/{video-player → media-player}/equirectangular.tsx

@@ -1,23 +1,30 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef } from "react"
 
-import { PanoramaPosition, PluginConstructor, Point, Position, SphericalPosition, Viewer } from "@photo-sphere-viewer/core"
-import { EquirectangularVideoAdapter, LensflarePlugin, ReactPhotoSphereViewer, ResolutionPlugin, SettingsPlugin, VideoPlugin } from "react-photo-sphere-viewer"
+import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
 
-import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { Viewer } from "@photo-sphere-viewer/core"
 
-type PhotoSpherePlugin = (PluginConstructor | [PluginConstructor, any])
+import { EquirectangularVideoAdapter } from "@photo-sphere-viewer/equirectangular-video-adapter"
+
+import { SettingsPlugin } from "@photo-sphere-viewer/settings-plugin"
+import { ResolutionPlugin } from "@photo-sphere-viewer/resolution-plugin"
+import { VideoPlugin } from "@photo-sphere-viewer/video-plugin"
+
+import "@photo-sphere-viewer/settings-plugin/index.css"
+import "@photo-sphere-viewer/video-plugin/index.css"
+
+import { MediaInfo } from "@/types/general"
 
 export function EquirectangularVideoPlayer({
-  video,
+  media,
   className = "",
   width,
   height,
   muted = false,
  }: {
-  video: VideoInfo
+  media: MediaInfo
   className?: string
   width: number
   height: number
@@ -37,7 +44,9 @@ export function EquirectangularVideoPlayer({
     })
   }, [width, height])
 
-  if (!video.assetUrl) { return null }
+  const assetUrl = media.assetUrlHd || media.assetUrl
+
+  if (!assetUrl) { return null }
 
   return (
     <div
@@ -47,10 +56,7 @@ export function EquirectangularVideoPlayer({
       <ReactPhotoSphereViewer
 
         container=""
-        containerClass={cn(
-          "rounded-xl overflow-hidden",
-          className
-        )}
+        containerClass={className}
 
         width={`${width}px`}
         height={`${height}px`}
@@ -67,19 +73,20 @@ export function EquirectangularVideoPlayer({
         navbar="video"
         src="" 
         plugins={[
+          [SettingsPlugin, {}],
           [VideoPlugin, {
             muted,
             // progressbar: true,
             bigbutton: false
           }],
-          SettingsPlugin,
           [ResolutionPlugin, {
             defaultResolution: 'HD',
             resolutions: [
               {
                 id: 'HD',
                 label: 'Standard',
-                panorama: { source: video.assetUrlHd || video.assetUrl },
+                // TODO: separate the resolutions
+                panorama: { source: media.assetUrlHd || media.assetUrl },
               },
             ],
           }],

src/app/interface/media-player/gaussian.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import "react-tuby/css/main.css"
+
+import { MediaInfo } from "@/types/general"
+
+import { Gsplat } from "../gsplat"
+
+export function GaussianSplattingPlayer({
+  media,
+  width,
+  height,
+  enableShortcuts = true,
+  className = "",
+  // currentTime,
+ }: {
+  media: MediaInfo
+  width?: number
+  height?: number
+  enableShortcuts?: boolean
+  className?: string
+  // currentTime?: number
+}) {
+  return (
+    <Gsplat
+      url={media.assetUrlHd || media.assetUrl}
+      width={width}
+      height={height}
+      className={className}
+    />
+  )
+}

src/app/interface/{video-player → media-player}/index.tsx

@@ -3,43 +3,57 @@
 import AutoSizer from "react-virtualized-auto-sizer"
 
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
-import { parseProjectionFromLoRA } from "@/app/server/actions/utils/parseProjectionFromLoRA"
+import { MediaInfo } from "@/types/general"
+import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType"
 
 import { EquirectangularVideoPlayer } from "./equirectangular"
 import { CartesianVideoPlayer } from "./cartesian"
+import { GaussianSplattingPlayer } from "./gaussian"
 
-export function VideoPlayer({
-  video,
+export function MediaPlayer({
+  media,
   enableShortcuts = true,
   className = "",
   // currentTime,
  }: {
-  video?: VideoInfo
+  media?: MediaInfo
   enableShortcuts?: boolean
   className?: string
   // currentTime?: number
 }) {
-  // we should our video players from  misssing data
-  if (!video?.assetUrl) { return null }
+  console.log("MediaPlayer called for " + media?.assetUrl)
+  if (!media || !media?.assetUrl) { return null }
 
-  const isEquirectangular = (
-    video.projection === "equirectangular" ||
-    parseProjectionFromLoRA(video.lora) === "equirectangular"
-  )
+  // uncomment one of those to forcefully test the .splatv player!
+  // media.assetUrlHd = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/4d/flame/flame.splatv"
+  // media.assetUrlHd = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/4d/sear/sear.splatv"
+  // media.assetUrlHd = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/4d/birthday/birthday.splatv"
+
+  const projectionType = parseMediaProjectionType(media)
+  
+  if (projectionType === "gaussian") {
+    // note: for AutoSizer to work properly it needs to be inside a normal div with no display: "flex"
+    return (
+      <div className={cn(`w-full aspect-video`, className)}>
+        <AutoSizer>{({ height, width }) => (
+           <GaussianSplattingPlayer media={media} className={className} width={width} height={height} />
+          )}</AutoSizer>
+      </div>
+    )
+  }
 
-  if (isEquirectangular) {
+  if (projectionType === "equirectangular") {
     // note: for AutoSizer to work properly it needs to be inside a normal div with no display: "flex"
     return (
       <div className={cn(`w-full aspect-video`, className)}>
         <AutoSizer>{({ height, width }) => (
-           <EquirectangularVideoPlayer video={video} className={className} width={width} height={height} />
+           <EquirectangularVideoPlayer media={media} className={className} width={width} height={height} />
           )}</AutoSizer>
       </div>
     )
   }
 
   return (
-    <CartesianVideoPlayer video={video} enableShortcuts={enableShortcuts} className={className} />
+    <CartesianVideoPlayer media={media} enableShortcuts={enableShortcuts} className={className} />
   )
 }

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

@@ -3,7 +3,7 @@ import { PiTrashBold } from "react-icons/pi"
 import { TableCell, TableRow } from "@/components/ui/table"
 import { cn } from "@/lib/utils"
 import { MdLockClock } from "react-icons/md"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 import { truncate } from "./truncate"
 
 export function PendingVideoCard({
@@ -11,8 +11,8 @@ export function PendingVideoCard({
   onDelete,
   className = "",
 }: {
-  video: VideoInfo
-  onDelete?: (video: VideoInfo) => void
+  video: MediaInfo
+  onDelete?: (video: MediaInfo) => void
   className?: string
  }) {
 

src/app/interface/pending-video-list/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 
 import { PendingVideoCard } from "../pending-video-card"
@@ -9,8 +9,8 @@ export function PendingVideoList({
   onDelete,
   className = "",
 }: {
-  videos: VideoInfo[]
-  onDelete?: (video: VideoInfo) => void
+  videos: MediaInfo[]
+  onDelete?: (video: MediaInfo) => void
   className?: string
 }) {
   return (

src/app/interface/playlist-control/index.tsx

@@ -3,7 +3,7 @@ import { IoIosPause } from "react-icons/io"
 
 import { cn } from "@/lib/utils"
 import { usePlaylist } from "@/lib/usePlaylist"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 export function PlaylistControl() {
   const playlist = usePlaylist()

src/app/interface/recommended-videos/index.tsx

@@ -2,17 +2,16 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 import { VideoList } from "../video-list"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
 
 export function RecommendedVideos({
-  video,
+  media,
 }: {
-  // the video to use for the recommendations
-  video: VideoInfo
+  // the media to use for the recommendations
+  media: MediaInfo
 }) {
   const [_isPending, startTransition] = useTransition()
   const setRecommendedVideos = useStore(s => s.setRecommendedVideos)
@@ -22,12 +21,12 @@ export function RecommendedVideos({
     startTransition(async () => {
       setRecommendedVideos(await getVideos({
         sortBy: "random",
-        niceToHaveTags: video.tags,
-        ignoreVideoIds: [video.id],
+        niceToHaveTags: media.tags,
+        ignoreVideoIds: [media.id],
         maxVideos: 16,
       }))
     })
-  }, video.tags)
+  }, media.tags)
 
   return (
     <VideoList

src/app/interface/search-input/index.tsx

@@ -126,7 +126,7 @@ export function SearchInput() {
     >
       {searchAutocompleteResults.length === 0 ? <div>Nothing to show, type something and press enter</div> : null}
         {searchAutocompleteResults.map(media => (
-          <Link key={media.id} href={`https://aitube.at/watch?v=${media.id}`}>
+          <Link key={media.id} href={`${process.env.NEXT_PUBLIC_DOMAIN}/watch?v=${media.id}`}>
             <div
               className={cn(
                 `dark:hover:bg-neutral-800 hover:bg-neutral-800`,

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

@@ -5,7 +5,7 @@ import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
 import { cn } from "@/lib/utils"
-import { MediaDisplayLayout, VideoInfo } from "@/types/general"
+import { MediaDisplayLayout, MediaInfo } from "@/types/general"
 import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
@@ -22,10 +22,10 @@ export function TrackCard({
   selected,
   index
 }: {
-  media: VideoInfo
+  media: MediaInfo
   className?: string
   layout?: MediaDisplayLayout
-  onSelect?: (media: VideoInfo) => void
+  onSelect?: (media: MediaInfo) => void
   selected?: boolean
   index: number
  }) {
@@ -169,6 +169,7 @@ export function TrackCard({
                   `flex flex-col items-center justify-center text-center`,
                   `bg-neutral-900 rounded`,
                   `text-2xs font-semibold px-[3px] py-[1px]`,
+                  isFinite(duration) && !isNaN(duration) && duration > 0 ? 'opacity-100' : 'opacity-0'
                 )}
                 >{formatDuration(duration)}</div>
               </div>

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

@@ -5,7 +5,7 @@ import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
 import { cn } from "@/lib/utils"
-import { MediaDisplayLayout, VideoInfo } from "@/types/general"
+import { MediaDisplayLayout, MediaInfo } from "@/types/general"
 import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
@@ -21,10 +21,10 @@ export function VideoCard({
   selected,
   index
 }: {
-  media: VideoInfo
+  media: MediaInfo
   className?: string
   layout?: MediaDisplayLayout
-  onSelect?: (media: VideoInfo) => void
+  onSelect?: (media: MediaInfo) => void
   selected?: boolean
   index: number
  }) {
@@ -75,7 +75,7 @@ export function VideoCard({
   }, [index])
 
   return (
-  <Link href={`https://aitube.at/watch?v=${media.id}`}>
+  <Link href={`${process.env.NEXT_PUBLIC_DOMAIN}/watch?v=${media.id}`}>
     <div
       className={cn(
         `w-full flex`,
@@ -163,6 +163,7 @@ export function VideoCard({
                   `flex flex-col items-center justify-center text-center`,
                   `bg-neutral-900 rounded`,
                   `text-2xs font-semibold px-[3px] py-[1px]`,
+                  isFinite(duration) && !isNaN(duration) && duration > 0 ? 'opacity-100' : 'opacity-0'
                 )}
                 >{formatDuration(duration)}</div>
               </div>

src/app/layout.tsx

@@ -14,8 +14,8 @@ const roboto = Roboto({
 })
 
 export const metadata: Metadata = {
-  title: '🍿 AI Tube',
-  description: '🍿 AI Tube',
+  title: '🍿 AiTube',
+  description: '🍿 AiTube',
 }
 
 export default function RootLayout({

src/app/main.tsx

@@ -8,7 +8,7 @@ import { UserChannelView } from "./views/user-channel-view"
 import { PublicVideoView } from "./views/public-video-view"
 import { UserAccountView } from "./views/user-account-view"
 import { NotFoundView } from "./views/not-found-view"
-import { ChannelInfo, VideoInfo } from "@/types/general"
+import { ChannelInfo, MediaInfo } from "@/types/general"
 import { useEffect } from "react"
 import { usePathname, useRouter } from "next/navigation"
 import { TubeLayout } from "./interface/tube-layout"
@@ -35,11 +35,11 @@ export function Main({
 }: {
  // server side params
  // view?: InterfaceView
- publicVideo?: VideoInfo
- publicVideos?: VideoInfo[]
- publicChannelVideos?: VideoInfo[]
- publicTracks?: VideoInfo[]
- publicTrack?: VideoInfo
+ publicVideo?: MediaInfo
+ publicVideos?: MediaInfo[]
+ publicChannelVideos?: MediaInfo[]
+ publicTracks?: MediaInfo[]
+ publicTrack?: MediaInfo
  channel?: ChannelInfo
 }) {
   // this could be also a parameter of main, where we pass this manually

src/app/page.tsx

@@ -16,14 +16,14 @@ export async function generateMetadata(
 
   if (!videoId) {
     return {
-      title: `🍿 AI Tube`,
+      title: `🍿 AiTube`,
       metadataBase,
       openGraph: {
         type: "website",
         // url: "https://example.com",
-        title: "AI Tube",
+        title: "AiTube",
         description: "The first fully AI generated video platform",
-        siteName: "🍿 AI Tube",
+        siteName: "🍿 AiTube",
 
         videos: [],
         images: [],
@@ -39,14 +39,14 @@ export async function generateMetadata(
     }
 
     return {
-      title: `${video.label} - AI Tube`,
+      title: `${video.label} - AiTube`,
       metadataBase,
       openGraph: {
         type: "website",
         // url: "https://example.com",
         title: video.label || "", // put the video title here
         description: video.description || "", // put the vide description here
-        siteName: "AI Tube",
+        siteName: "AiTube",
   
         videos: [
           {
@@ -58,14 +58,14 @@ export async function generateMetadata(
     }
   } catch (err) {
     return {
-      title: "AI Tube",
+      title: "AiTube",
       metadataBase,
       openGraph: {
         type: "website",
         // url: "https://example.com",
-        title: "AI Tube", // put the video title here
+        title: "AiTube", // put the video title here
         description: "", // put the vide description here
-        siteName: "AI Tube",
+        siteName: "AiTube",
   
         videos: [],
         images: [],

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

@@ -1,5 +1,5 @@
 
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 import { deleteFileFromDataset } from "./deleteFileFromDataset"
 import { formatPromptFileName } from "../utils/formatPromptFileName"
@@ -9,7 +9,7 @@ export async function deleteVideoRequest({
   apiKey,
   neverThrow,
 }: {
-   video: VideoInfo
+   video: MediaInfo
    apiKey: string
    neverThrow?: boolean
 }): Promise<boolean> {

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

@@ -2,7 +2,7 @@ import { v4 as uuidv4 } from "uuid"
 import { Credentials } from "@/huggingface/hub/src"
 
 import { ClapProject } from "@/clap/types"
-import { ChannelInfo, VideoInfo, VideoRequest } from "@/types/general"
+import { ChannelInfo, MediaInfo, VideoRequest } from "@/types/general"
 import { defaultVideoModel } from "@/app/config"
 import { parseClap } from "@/clap/parseClap"
 
@@ -21,7 +21,7 @@ export async function downloadClapProject({
   credentials: Credentials
 }): Promise<{
   videoRequest: VideoRequest
-  videoInfo: VideoInfo
+  videoInfo: MediaInfo
   clapProject: ClapProject
 }> {
   // we recover the repo from the cnannel info
@@ -62,7 +62,7 @@ export async function downloadClapProject({
     }),
   }
 
-  const videoInfo: VideoInfo = {
+  const videoInfo: MediaInfo = {
     id,
     status: "submitted",
     label: videoRequest.label || "",

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

@@ -1,12 +1,12 @@
 "use server"
 
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
-import { getStatsForVideos } from "../stats"
+import { getStatsForMedias } from "../stats"
 
-export async function extendVideosWithStats(videos: VideoInfo[]): Promise<VideoInfo[]> {
+export async function extendVideosWithStats(videos: MediaInfo[]): Promise<MediaInfo[]> {
   
-  const allStats = await getStatsForVideos(videos.map(v => v.id))
+  const allStats = await getStatsForMedias(videos.map(v => v.id))
 
   return videos.map(v => {
     const stats = allStats[v.id] || {

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

@@ -1,6 +1,6 @@
 "use server"
 
-import { ChannelInfo, VideoInfo, VideoStatus } from "@/types/general"
+import { ChannelInfo, MediaInfo, VideoStatus } from "@/types/general"
 
 import { getVideoRequestsFromChannel  } from "./getVideoRequestsFromChannel"
 import { adminApiKey } from "../config"
@@ -21,7 +21,7 @@ export async function getChannelVideos({
   status?: VideoStatus
 
   neverThrow?: boolean
-}): Promise<VideoInfo[]> {
+}): Promise<MediaInfo[]> {
 
   if (!channel) { return [] }
 
@@ -38,7 +38,7 @@ export async function getChannelVideos({
     const published = await getVideoIndex({ status: "published" })
 
     const validVideos = videos.map(v => {
-    let video: VideoInfo = {
+    let video: MediaInfo = {
         id: v.id,
         status: "submitted",
         label: v.label || "",

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

@@ -1,9 +1,9 @@
 "use server"
 
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 import { getVideoIndex } from "./getVideoIndex"
-import { getStatsForVideos } from "../stats"
+import { getStatsForMedias } from "../stats"
 
 export async function getVideo({
   videoId,
@@ -11,7 +11,7 @@ export async function getVideo({
 }: {
   videoId?: string | string[] | null,
   neverThrow?: boolean
-}): Promise<VideoInfo | undefined> {
+}): Promise<MediaInfo | undefined> {
   try {
     const id = `${videoId || ""}`
 
@@ -26,7 +26,7 @@ export async function getVideo({
       throw new Error(`cannot get the video, nothing found for id "${id}"`)
     }
 
-    const allStats = await getStatsForVideos([video.id])
+    const allStats = await getStatsForMedias([video.id])
     
     const stats = allStats[video.id] || {
       numberOfViews: 0,

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

@@ -1,4 +1,4 @@
-import { VideoInfo, VideoStatus } from "@/types/general"
+import { MediaInfo, VideoStatus } from "@/types/general"
 
 import { adminUsername } from "../config"
 
@@ -11,7 +11,7 @@ export async function getVideoIndex({
 
   renewCache?: boolean
   neverThrow?: boolean
-}): Promise<Record<string, VideoInfo>> {
+}): Promise<Record<string, MediaInfo>> {
   try {
     const response = await fetch(
       `https://huggingface.co/datasets/${adminUsername}/ai-tube-index/raw/main/${status}.json`
@@ -29,7 +29,7 @@ export async function getVideoIndex({
       throw new Error("index is not an object, admin repair needed")
     }
 
-    const videos = jsonResponse as Record<string, VideoInfo>
+    const videos = jsonResponse as Record<string, MediaInfo>
 
     return videos
   } catch (err) {

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

@@ -3,7 +3,7 @@
 // import { distance } from "fastest-levenshtein"
 import MiniSearch from "minisearch"
 
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 import { getVideoIndex } from "./getVideoIndex"
 import { extendVideosWithStats } from "./extendVideosWithStats"
@@ -47,7 +47,7 @@ export async function getVideos({
   neverThrow?: boolean
 
   renewCache?: boolean
-}): Promise<VideoInfo[]> {
+}): Promise<MediaInfo[]> {
   try {
     // the index is gonna grow more and more,
     // but in the future we will use some DB eg. Prisma or sqlite
@@ -96,7 +96,7 @@ export async function getVideos({
       allPotentiallyValidVideos.sort(() => Math.random() - 0.5)
     }
 
-    let videosMatchingFilters: VideoInfo[] = allPotentiallyValidVideos
+    let videosMatchingFilters: MediaInfo[] = allPotentiallyValidVideos
 
     // filter videos by mandatory tags, or else we return everything
     const mandatoryTagsList = mandatoryTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)

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

@@ -54,7 +54,7 @@ export async function parseChannel(options: {
   
   // ignore channels which don't start with ai-tube
   if (!datasetName.startsWith(prefix)) {
-    throw new Error("this is not an AI Tube channel")
+    throw new Error("this is not an AiTube channel")
   }
 
   // ignore the video index
@@ -64,7 +64,7 @@ export async function parseChannel(options: {
 
   const slug = datasetName.replaceAll(prefix, "")
   
-  // console.log(`found an AI Tube channel: "${slug}"`)
+  // console.log(`found an AiTube channel: "${slug}"`)
 
   // TODO parse the README to get the proper label
   let label = slug.replaceAll("-", " ")

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

@@ -3,7 +3,7 @@
 import { Blob } from "buffer"
 
 import { Credentials, uploadFile, whoAmI } from "@/huggingface/hub/src"
-import { ChannelInfo, VideoGenerationModel, VideoInfo, VideoOrientation, VideoRequest } from "@/types/general"
+import { ChannelInfo, VideoGenerationModel, MediaInfo, VideoOrientation, VideoRequest } from "@/types/general"
 import { formatPromptFileName } from "../utils/formatPromptFileName"
 import { computeOrientationProjectionWidthHeight } from "../utils/computeOrientationProjectionWidthHeight"
 
@@ -41,7 +41,7 @@ export async function uploadVideoRequestToDataset({
   orientation: VideoOrientation
 }): Promise<{
   videoRequest: VideoRequest
-  videoInfo: VideoInfo
+  videoInfo: MediaInfo
 }> {
   if (!apiKey) {
     throw new Error(`the apiKey is required`)
@@ -127,7 +127,7 @@ ${prompt}
     music,
     thumbnailUrl: channel.thumbnail,
 
-    // for now AI Tube doesn't support upload of clap files
+    // for now AiTube doesn't support upload of clap files
     clapUrl: "",
 
     updatedAt: new Date().toISOString(),
@@ -141,7 +141,7 @@ ${prompt}
     }),
   }
 
-  const newVideo: VideoInfo = {
+  const newVideo: MediaInfo = {
     id,
     status: "submitted",
     label: title,
@@ -154,7 +154,7 @@ ${prompt}
     music,
     thumbnailUrl: channel.thumbnail, // will be generated in async
 
-    // for now AI Tube doesn't support upload of clap files
+    // for now AiTube doesn't support upload of clap files
     clapUrl: "",
     
     assetUrl: "", // will be generated in async

src/app/server/actions/stats.ts

@@ -2,11 +2,11 @@
 
 import { developerMode } from "@/app/config"
 import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
-import { VideoRating } from "@/types/general"
+import { MediaRating } from "@/types/general"
 import { redis } from "./redis";
 
-export async function getStatsForVideos(videoIds: string[]): Promise<Record<string, { numberOfViews: number; numberOfLikes: number; numberOfDislikes: number}>> {
-  if (!Array.isArray(videoIds)) {
+export async function getStatsForMedias(mediaIds: string[]): Promise<Record<string, { numberOfViews: number; numberOfLikes: number; numberOfDislikes: number}>> {
+  if (!Array.isArray(mediaIds)) {
     return {}
   }
 
@@ -16,11 +16,11 @@ export async function getStatsForVideos(videoIds: string[]): Promise<Record<stri
 
     const listOfRedisIDs: string[] = []
 
-    for (const videoId of videoIds) {
-      listOfRedisIDs.push(`videos:${videoId}:stats:views`)
-      listOfRedisIDs.push(`videos:${videoId}:stats:likes`)
-      listOfRedisIDs.push(`videos:${videoId}:stats:dislikes`)
-      stats[videoId] = {
+    for (const mediaId of mediaIds) {
+      listOfRedisIDs.push(`videos:${mediaId}:stats:views`)
+      listOfRedisIDs.push(`videos:${mediaId}:stats:likes`)
+      listOfRedisIDs.push(`videos:${mediaId}:stats:dislikes`)
+      stats[mediaId] = {
         numberOfViews: 0,
         numberOfLikes: 0,
         numberOfDislikes: 0,
@@ -31,7 +31,7 @@ export async function getStatsForVideos(videoIds: string[]): Promise<Record<stri
 
     let v = 0
     for (let i = 0; i < listOfRedisValues.length; i += 3) {
-      stats[videoIds[v++]] = {
+      stats[mediaIds[v++]] = {
         numberOfViews: listOfRedisValues[i] || 0,
         numberOfLikes: listOfRedisValues[i + 1] || 0,
         numberOfDislikes: listOfRedisValues[i + 2] || 0
@@ -44,15 +44,15 @@ export async function getStatsForVideos(videoIds: string[]): Promise<Record<stri
   }
 }
 
-export async function watchVideo(videoId: string): Promise<number> {
+export async function countNewMediaView(mediaId: string): Promise<number> {
   if (developerMode) {
-    const stats = await getStatsForVideos([videoId])
+    const stats = await getStatsForMedias([mediaId])
 
-    return stats[videoId].numberOfViews
+    return stats[mediaId].numberOfViews
   }
 
   try {
-    const result = await redis.incr(`videos:${videoId}:stats:views`)
+    const result = await redis.incr(`videos:${mediaId}:stats:views`)
     
     return result
   } catch (err) {
@@ -60,7 +60,7 @@ export async function watchVideo(videoId: string): Promise<number> {
   }
 }
 
-export async function getVideoRating(videoId: string, apiKey?: string): Promise<VideoRating> {
+export async function getMediaRating(mediaId: string, apiKey?: string): Promise<MediaRating> {
   let numberOfLikes = 0
   let numberOfDislikes = 0
   let isLikedByUser = false
@@ -68,8 +68,8 @@ export async function getVideoRating(videoId: string, apiKey?: string): Promise<
 
   try {
     // update video likes counter
-    numberOfLikes = (await redis.get<number>(`videos:${videoId}:stats:likes`)) || 0
-    numberOfDislikes = (await redis.get<number>(`videos:${videoId}:stats:dislikes`)) || 0
+    numberOfLikes = (await redis.get<number>(`videos:${mediaId}:stats:likes`)) || 0
+    numberOfDislikes = (await redis.get<number>(`videos:${mediaId}:stats:dislikes`)) || 0
   } catch (err) {
   }
 
@@ -79,7 +79,7 @@ export async function getVideoRating(videoId: string, apiKey?: string): Promise<
       const credentials = { accessToken: apiKey }
       
       const user = await whoAmI({ credentials }) as unknown as WhoAmIUser
-      const isLiked = await redis.get<boolean>(`users:${user.id}:activity:videos:${videoId}:liked`)
+      const isLiked = await redis.get<boolean>(`users:${user.id}:activity:videos:${mediaId}:liked`)
       if (isLiked !== null) {
         isLikedByUser = !!isLiked
         isDislikedByUser = !isLiked
@@ -97,7 +97,7 @@ export async function getVideoRating(videoId: string, apiKey?: string): Promise<
   }
 }
 
-export async function rateVideo(videoId: string, liked: boolean, apiKey: string): Promise<VideoRating> {
+export async function rateMedia(mediaId: string, liked: boolean, apiKey: string): Promise<MediaRating> {
   // note: we want the like to throw an exception if it failed
   let numberOfLikes = 0
   let numberOfDislikes = 0
@@ -108,21 +108,21 @@ export async function rateVideo(videoId: string, liked: boolean, apiKey: string)
   
   const user = await whoAmI({ credentials }) as unknown as WhoAmIUser
 
-  const hasLiked = await redis.get<boolean>(`users:${user.id}:activity:videos:${videoId}:liked`)
+  const hasLiked = await redis.get<boolean>(`users:${user.id}:activity:videos:${mediaId}:liked`)
   
   const hasAlreadyRatedTheSame =  hasLiked !== null && liked === hasLiked
 
   if (hasAlreadyRatedTheSame) {
     return {
-      numberOfLikes: await redis.get(`videos:${videoId}:stats:likes`) || 0,
-      numberOfDislikes: await redis.get(`videos:${videoId}:stats:dislikes`) || 0,
+      numberOfLikes: await redis.get(`videos:${mediaId}:stats:likes`) || 0,
+      numberOfDislikes: await redis.get(`videos:${mediaId}:stats:dislikes`) || 0,
       isLikedByUser: liked,
       isDislikedByUser: !liked
     }
   }
   const hasAlreadyRatedAndDifferently = hasLiked !== null && liked !== hasLiked
 
-  await redis.set(`users:${user.id}:activity:videos:${videoId}:liked`, liked)
+  await redis.set(`users:${user.id}:activity:videos:${mediaId}:liked`, liked)
 
   isLikedByUser = liked
   isDislikedByUser = !liked
@@ -133,14 +133,14 @@ export async function rateVideo(videoId: string, liked: boolean, apiKey: string)
   try {
     if (liked) {
       // update video likes counter
-      numberOfLikes = await redis.incr(`videos:${videoId}:stats:likes`)
+      numberOfLikes = await redis.incr(`videos:${mediaId}:stats:likes`)
       if (hasAlreadyRatedAndDifferently) {
-        numberOfDislikes = await redis.decr(`videos:${videoId}:stats:dislikes`)
+        numberOfDislikes = await redis.decr(`videos:${mediaId}:stats:dislikes`)
       }
     } else {
-      numberOfDislikes = await redis.incr(`videos:${videoId}:stats:dislikes`)
+      numberOfDislikes = await redis.incr(`videos:${mediaId}:stats:dislikes`)
       if (hasAlreadyRatedAndDifferently) {
-        numberOfLikes = await redis.decr(`videos:${videoId}:stats:likes`)
+        numberOfLikes = await redis.decr(`videos:${mediaId}:stats:likes`)
       }
     }
   } catch (err) {

src/app/server/actions/submitVideoRequest.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { ChannelInfo, VideoGenerationModel, VideoInfo, VideoOrientation } from "@/types/general"
+import { ChannelInfo, VideoGenerationModel, MediaInfo, VideoOrientation } from "@/types/general"
 
 import { uploadVideoRequestToDataset } from "./ai-tube-hf/uploadVideoRequestToDataset"
 
@@ -32,7 +32,7 @@ export async function submitVideoRequest({
   tags: string[]
   duration: number
   orientation: VideoOrientation
-}): Promise<VideoInfo> {
+}): Promise<MediaInfo> {
   if (!apiKey) {
     throw new Error(`the apiKey is required`)
   }

src/app/server/actions/utils/computeOrientationProjectionWidthHeight.ts

@@ -1,4 +1,4 @@
-import { VideoOrientation, VideoProjection } from "@/types/general"
+import { VideoOrientation, MediaProjection } from "@/types/general"
 
 import { parseVideoOrientation } from "./parseVideoOrientation"
 import { parseProjectionFromLoRA } from "./parseProjectionFromLoRA"
@@ -13,7 +13,7 @@ export function computeOrientationProjectionWidthHeight({
   orientation?: any
 }): {
   orientation: VideoOrientation
-  projection: VideoProjection
+  projection: MediaProjection
   width: number
   height: number
 } {

src/app/server/actions/utils/isAntisocial.ts

@@ -1,8 +1,8 @@
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
 const winners = new Set(`${process.env.WINNERS || ""}`.toLowerCase().split(",").map(x => x.trim()).filter(x => x))
 
-export function isAntisocial(video: VideoInfo): boolean {
+export function isAntisocial(video: MediaInfo): boolean {
 
   // some people are reported by the community for their anti-social behavior
   // this include:

src/app/server/actions/utils/isHighQuality.ts

@@ -1,6 +1,6 @@
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 
-export function isHighQuality(video: VideoInfo) {
+export function isHighQuality(video: MediaInfo) {
   const numberOfViews = Math.abs(Math.max(0, video.numberOfViews))
   const numberOfLikes = Math.abs(Math.max(0, video.numberOfLikes))
   const numberOfDislikes = Math.abs(Math.max(0, video.numberOfDislikes))

src/app/server/actions/utils/parseProjectionFromLoRA.ts

@@ -1,6 +1,6 @@
-import { VideoProjection } from "@/types/general"
+import { MediaProjection } from "@/types/general"
 
-export function parseProjectionFromLoRA(input?: any): VideoProjection {
+export function parseProjectionFromLoRA(input?: any): MediaProjection {
  const name = `${input || ""}`.trim().toLowerCase()
 
   const isEquirectangular = (

src/app/state/categories.ts

@@ -11,7 +11,7 @@ export const videoCategoriesWithLabels = {
   "Time Travel": "Time Travel", // vlogs etc
   // "gaming": "Gaming",
   // "trailers": "Trailers",
-  // "aitubers": "AI tubers",
+  // "aitubers": "AiTubers",
   // "ads": "100% Ads",
 }
 

src/app/state/useCurrentUser.ts

@@ -24,7 +24,7 @@ export function useCurrentUser({
   apiKey: string
   oauthResult?: OAuthResult
 
-  // the long standing API is a temporary solution for "PRO" users of AI Tube
+  // the long standing API is a temporary solution for "PRO" users of AiTube
   // (users who use Clap files using external tools,
   // or want ot use their own HF account to generate videos)
   longStandingApiKey: string
@@ -219,7 +219,7 @@ export function useCurrentUser({
        *
        * For Developer Applications, you can add any URL you want to the list of allowed redirect URIs at https://huggingface.co/settings/connected-applications.
        */
-      redirectUrl: "https://aitube.at/api/login",
+      redirectUrl: `${process.env.NEXT_PUBLIC_DOMAIN}/api/login`,
 
       /**
        * State to pass to the OAuth provider, which will be returned in the call to `oauthLogin` after the redirect.

src/app/state/useStore.ts

@@ -2,7 +2,7 @@
 
 import { create } from "zustand"
 
-import { ChannelInfo, VideoInfo, InterfaceDisplayMode, InterfaceView, InterfaceMenuMode, InterfaceHeaderMode, CommentInfo, UserInfo } from "@/types/general"
+import { ChannelInfo, MediaInfo, InterfaceDisplayMode, InterfaceView, InterfaceMenuMode, InterfaceHeaderMode, CommentInfo, UserInfo } from "@/types/general"
 
 export const useStore = create<{
   displayMode: InterfaceDisplayMode
@@ -28,11 +28,11 @@ export const useStore = create<{
   searchAutocompleteQuery: string
   setSearchAutocompleteQuery: (searchAutocompleteQuery?: string) => void
 
-  searchAutocompleteResults: VideoInfo[]
-  setSearchAutocompleteResults: (searchAutocompleteResults: VideoInfo[]) => void
+  searchAutocompleteResults: MediaInfo[]
+  setSearchAutocompleteResults: (searchAutocompleteResults: MediaInfo[]) => void
 
-  searchResults: VideoInfo[]
-  setSearchResults: (searchResults: VideoInfo[]) => void
+  searchResults: MediaInfo[]
+  setSearchResults: (searchResults: MediaInfo[]) => void
 
   currentUser?: UserInfo
   setCurrentUser: (currentUser?: UserInfo) => void
@@ -61,35 +61,35 @@ export const useStore = create<{
   currentModel?: string
   setCurrentModel: (currentModel?: string) => void
 
-  publicVideo?: VideoInfo
-  setPublicVideo: (publicVideo?: VideoInfo) => void
+  publicVideo?: MediaInfo
+  setPublicVideo: (publicVideo?: MediaInfo) => void
 
   publicComments: CommentInfo[]
   setPublicComments: (publicComment: CommentInfo[]) => void
 
-  publicVideos: VideoInfo[]
-  setPublicVideos: (publicVideos: VideoInfo[]) => void
+  publicVideos: MediaInfo[]
+  setPublicVideos: (publicVideos: MediaInfo[]) => void
 
-  publicChannelVideos: VideoInfo[]
-  setPublicChannelVideos: (publicChannelVideos: VideoInfo[]) => void
+  publicChannelVideos: MediaInfo[]
+  setPublicChannelVideos: (publicChannelVideos: MediaInfo[]) => void
 
-  publicTrack?: VideoInfo
-  setPublicTrack: (publicTrack?: VideoInfo) => void
+  publicTrack?: MediaInfo
+  setPublicTrack: (publicTrack?: MediaInfo) => void
 
-  publicTracks: VideoInfo[]
-  setPublicTracks: (publicTracks: VideoInfo[]) => void
+  publicTracks: MediaInfo[]
+  setPublicTracks: (publicTracks: MediaInfo[]) => void
 
-  userVideo?: VideoInfo
-  setUserVideo: (userVideo?: VideoInfo) => void
+  userVideo?: MediaInfo
+  setUserVideo: (userVideo?: MediaInfo) => void
 
-  userVideos: VideoInfo[]
-  setUserVideos: (userVideos: VideoInfo[]) => void
+  userVideos: MediaInfo[]
+  setUserVideos: (userVideos: MediaInfo[]) => void
 
-  recommendedVideos: VideoInfo[]
-  setRecommendedVideos: (recommendedVideos: VideoInfo[]) => void
+  recommendedVideos: MediaInfo[]
+  setRecommendedVideos: (recommendedVideos: MediaInfo[]) => void
 
-  // currentPrompts: VideoInfo[]
-  // setCurrentPrompts: (currentPrompts: VideoInfo[]) => void
+  // currentPrompts: MediaInfo[]
+  // setCurrentPrompts: (currentPrompts: MediaInfo[]) => void
 }>((set, get) => ({
   displayMode: "desktop",
   setDisplayMode: (displayMode: InterfaceDisplayMode) => {
@@ -127,8 +127,8 @@ export const useStore = create<{
     set({ showAutocompleteBox })
   },
 
-  searchAutocompleteResults: [] as VideoInfo[],
-  setSearchAutocompleteResults: (searchAutocompleteResults: VideoInfo[]) => {
+  searchAutocompleteResults: [] as MediaInfo[],
+  setSearchAutocompleteResults: (searchAutocompleteResults: MediaInfo[]) => {
     set({ searchAutocompleteResults })
   },
 
@@ -137,8 +137,8 @@ export const useStore = create<{
     set({ searchQuery })
   },
 
-  searchResults: [] as VideoInfo[],
-  setSearchResults: (searchResults: VideoInfo[]) => {
+  searchResults: [] as MediaInfo[],
+  setSearchResults: (searchResults: MediaInfo[]) => {
     set({ searchResults })
   },
 
@@ -202,7 +202,7 @@ export const useStore = create<{
   },
 
   publicVideo: undefined,
-  setPublicVideo: (publicVideo?: VideoInfo) => {
+  setPublicVideo: (publicVideo?: MediaInfo) => {
     set({ publicVideo })
   },
 
@@ -212,7 +212,7 @@ export const useStore = create<{
   },
 
   publicVideos: [],
-  setPublicVideos: (publicVideos: VideoInfo[] = []) => {
+  setPublicVideos: (publicVideos: MediaInfo[] = []) => {
     set({
       publicVideos: Array.isArray(publicVideos) ? publicVideos : [] 
     })
@@ -220,36 +220,36 @@ export const useStore = create<{
 
 
   publicTrack: undefined,
-  setPublicTrack: (publicTrack?: VideoInfo) => {
+  setPublicTrack: (publicTrack?: MediaInfo) => {
     set({ publicTrack })
   },
 
   publicTracks: [],
-  setPublicTracks: (publicTracks: VideoInfo[] = []) => {
+  setPublicTracks: (publicTracks: MediaInfo[] = []) => {
     set({
       publicTracks: Array.isArray(publicTracks) ? publicTracks : [] 
     })
   },
 
   publicChannelVideos: [],
-  setPublicChannelVideos: (publicChannelVideos: VideoInfo[] = []) => {
+  setPublicChannelVideos: (publicChannelVideos: MediaInfo[] = []) => {
     set({
       publicVideos: Array.isArray(publicChannelVideos) ? publicChannelVideos : [] 
     })
   },
 
   userVideo: undefined,
-  setUserVideo: (userVideo?: VideoInfo) => { set({ userVideo }) },
+  setUserVideo: (userVideo?: MediaInfo) => { set({ userVideo }) },
 
   userVideos: [],
-  setUserVideos: (userVideos: VideoInfo[] = []) => {
+  setUserVideos: (userVideos: MediaInfo[] = []) => {
     set({
       userVideos: Array.isArray(userVideos) ? userVideos : [] 
     })
   },
 
   recommendedVideos: [],
-  setRecommendedVideos: (recommendedVideos: VideoInfo[]) => {
+  setRecommendedVideos: (recommendedVideos: MediaInfo[]) => {
     set({
       recommendedVideos: Array.isArray(recommendedVideos) ? recommendedVideos : [] 
     })

src/app/views/home-view/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
 import { VideoList } from "@/app/interface/video-list"
 import { getTags } from "@/app/server/actions/ai-tube-hf/getTags"
@@ -33,7 +33,7 @@ export function HomeView() {
     })
   }, [currentTag])
 
-  const handleSelect = (video: VideoInfo) => {
+  const handleSelect = (video: MediaInfo) => {
     setView("public_video")
     setPublicVideo(video)
   }

src/app/views/public-music-videos-view/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
 import { TrackList } from "@/app/interface/track-list"
 import { PlaylistControl } from "@/app/interface/playlist-control"
@@ -34,7 +34,7 @@ export function PublicMusicVideosView() {
     */
   }, [])
 
-  const handleSelect = (media: VideoInfo) => {
+  const handleSelect = (media: MediaInfo) => {
     // console.log("going to play:", media.assetUrl.replace(".mp4", ".mp3"))
     playlist.playback({
       url: media.assetUrl.replace(".mp4", ".mp3"),