upgrade libs

package-lock.json

@@ -8,8 +8,8 @@
       "name": "@jbilcke-hf/ai-stories-factory",
       "version": "0.0.0",
       "dependencies": {
-        "@aitube/clap": "0.0.10",
-        "@aitube/client": "0.0.15",
+        "@aitube/clap": "0.0.14",
+        "@aitube/client": "0.0.17",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@aitube/clap": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.10.tgz",
-      "integrity": "sha512-pj855yWhUJ0QTJIaxMJhg0PwC3JaHsScJ5rQ8iqog7zDBWNNJR9MPBtFDYRuIs3vmUsGVxHwSlIBz5I1VjMF8w==",
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.14.tgz",
+      "integrity": "sha512-i4mq3YFecWVOTS/p5QaSQ0VJfurKXlyRc8FJMqKI6P/7rpf4vE4IL+jBKa4HPsYeNt85/KOt3MJKEFVtgiWGfQ==",
       "dependencies": {
         "pure-uuid": "^1.8.1",
         "yaml": "^2.4.1"
@@ -77,14 +77,14 @@
       }
     },
     "node_modules/@aitube/client": {
-      "version": "0.0.15",
-      "resolved": "https://registry.npmjs.org/@aitube/client/-/client-0.0.15.tgz",
-      "integrity": "sha512-lGmdsBqjNVStBxZSH+Iig/nOyPdSpqpqU6M0OvOBMTwR4rohSvIQ7TnFJGvoc4WEFciNoCc6Vg6Q5W99ovG+fg==",
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@aitube/client/-/client-0.0.17.tgz",
+      "integrity": "sha512-waRA1k2pqKI7uOXUnBs6y056JY2h7LO+kzKDcHBiNSAyC0ZvSvP7VqTia2fxpF99rik6HgmC3N0AslObP4T6Zw==",
       "dependencies": {
         "query-string": "^9.0.0"
       },
       "peerDependencies": {
-        "@aitube/clap": "0.0.10"
+        "@aitube/clap": "0.0.14"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -3742,9 +3742,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.756",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
-      "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw=="
+      "version": "1.4.757",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.757.tgz",
+      "integrity": "sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -3752,9 +3752,9 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
+      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -4596,9 +4596,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
-      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.4.tgz",
+      "integrity": "sha512-ofbkKj+0pjXjhejr007J/fLf+sW+8H7K5GCm+msC8q3IpvgjobpyPqSRFemNyIMxklC0zeJpi7VDFna19FacvQ==",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
       },
@@ -6380,9 +6380,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz",
-      "integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
       "peerDependencies": {
         "react": "*"
       }

package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aitube/clap": "0.0.10",
-    "@aitube/client": "0.0.15",
+    "@aitube/clap": "0.0.14",
+    "@aitube/client": "0.0.17",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",

src/app/main.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useTransition } from 'react'
 import { IoMdPhonePortrait } from 'react-icons/io'
-import { ClapProject } from '@aitube/clap'
+import { ClapProject, ClapMediaOrientation } from '@aitube/clap'
 import Image from 'next/image'
 import { useFilePicker } from 'use-file-picker'
 import { DeviceFrameset } from 'react-device-frameset'
@@ -26,7 +26,6 @@ import { fileToBase64 } from '@/lib/base64/fileToBase64'
 import { Input } from '@/components/ui/input'
 import { Field } from '@/components/form/field'
 import { Label } from '@/components/form/label'
-import { VideoOrientation } from './types'
 import { getParam } from '@/lib/utils/getParam'
 
 export function Main() {
@@ -319,9 +318,9 @@ export function Main() {
 
   // note: we are interested in the *current* video orientation,
   // not the requested video orientation requested for the next video
-  const isLandscape = currentVideoOrientation === VideoOrientation.LANDSCAPE
-  const isPortrait = currentVideoOrientation === VideoOrientation.PORTRAIT
-  const isSquare = currentVideoOrientation === VideoOrientation.SQUARE
+  const isLandscape = currentVideoOrientation === ClapMediaOrientation.LANDSCAPE
+  const isPortrait = currentVideoOrientation === ClapMediaOrientation.PORTRAIT
+  const isSquare = currentVideoOrientation === ClapMediaOrientation.SQUARE
 
   return (
     <div className={cn(
@@ -593,7 +592,7 @@ export function Main() {
                         >
                           <div className={cn(
                             `transition-all duration-200 ease-in-out`,
-                            orientation === VideoOrientation.LANDSCAPE ? `rotate-90` : `rotate-0`
+                            orientation === ClapMediaOrientation.LANDSCAPE ? `rotate-90` : `rotate-0`
                           )}>
                             <IoMdPhonePortrait size={24} />
                           </div>

src/app/server/aitube/createClap.ts

@@ -1,25 +1,23 @@
 "use server"
 
-import { ClapProject } from "@aitube/clap"
+import { ClapProject, ClapMediaOrientation } from "@aitube/clap"
 import { createClap as apiCreateClap } from "@aitube/client"
 
-import { VideoOrientation } from "../../types"
-
 import { getToken } from "./getToken"
 import { RESOLUTION_LONG, RESOLUTION_SHORT } from "./config"
 
 export async function createClap({
   prompt = "",
-  orientation = VideoOrientation.PORTRAIT,
+  orientation = ClapMediaOrientation.PORTRAIT,
 }: {
   prompt: string
-  orientation: VideoOrientation
+  orientation: ClapMediaOrientation
 }): Promise<ClapProject> {
   const clap: ClapProject = await apiCreateClap({
     prompt,
 
-    height: orientation === VideoOrientation.PORTRAIT ? RESOLUTION_LONG : RESOLUTION_SHORT,
-    width: orientation === VideoOrientation.PORTRAIT ? RESOLUTION_SHORT : RESOLUTION_LONG,
+    height: orientation === ClapMediaOrientation.PORTRAIT ? RESOLUTION_LONG : RESOLUTION_SHORT,
+    width: orientation === ClapMediaOrientation.PORTRAIT ? RESOLUTION_SHORT : RESOLUTION_LONG,
 
     token: await getToken()
   })

src/app/store.ts

@@ -1,13 +1,11 @@
 "use client"
 
-import { ClapProject, parseClap, serializeClap } from "@aitube/clap"
+import { ClapProject, parseClap, serializeClap, ClapMediaOrientation } from "@aitube/clap"
 import { create } from "zustand"
 
 import { GlobalStatus, TaskStatus } from "@/types"
 import { getVideoOrientation } from "@/lib/utils/getVideoOrientation"
-import { parseVideoOrientation } from "@/lib/utils/parseVideoOrientation"
 
-import { VideoOrientation } from "./types"
 import { RESOLUTION_LONG, RESOLUTION_SHORT } from "./server/aitube/config"
 
 export const useStore = create<{
@@ -18,7 +16,7 @@ export const useStore = create<{
 
   // the desired orientation for the next video
   // but this won't impact the actual orientation of the fake device container
-  orientation: VideoOrientation
+  orientation: ClapMediaOrientation
 
   status: GlobalStatus
   parseGenerationStatus: TaskStatus
@@ -32,11 +30,11 @@ export const useStore = create<{
 
   // orientation of the currently loaded video (which can be different from `orientation`)
   // it will impact the actual orientation of the fake device container
-  currentVideoOrientation: VideoOrientation
+  currentVideoOrientation: ClapMediaOrientation
   progress: number
   error: string
   toggleOrientation: () => void
-  setCurrentVideoOrientation: (currentVideoOrientation: VideoOrientation) => void
+  setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => void
   setMainCharacterImage: (mainCharacterImage: string) => void
   setMainCharacterVoice: (mainCharacterVoice: string) => void
   setStoryPromptDraft: (storyPromptDraft: string) => void
@@ -62,7 +60,7 @@ export const useStore = create<{
   mainCharacterVoice: "",
   storyPromptDraft: "Yesterday I was at my favorite pizza place and..",
   storyPrompt: "",
-  orientation: VideoOrientation.PORTRAIT,
+  orientation: ClapMediaOrientation.PORTRAIT,
   status: "idle",
   parseGenerationStatus: "idle",
   storyGenerationStatus: "idle",
@@ -72,15 +70,15 @@ export const useStore = create<{
   videoGenerationStatus: "idle",
   currentClap: undefined,
   currentVideo: "",
-  currentVideoOrientation: VideoOrientation.PORTRAIT,
+  currentVideoOrientation: ClapMediaOrientation.PORTRAIT,
   progress: 0,
   error: "",
   toggleOrientation: () => {
     const { orientation: previousOrientation, currentVideoOrientation, currentVideo } = get()
     const orientation =
-      previousOrientation === VideoOrientation.LANDSCAPE
-      ? VideoOrientation.PORTRAIT
-      : VideoOrientation.LANDSCAPE
+      previousOrientation === ClapMediaOrientation.LANDSCAPE
+      ? ClapMediaOrientation.PORTRAIT
+      : ClapMediaOrientation.LANDSCAPE
 
     set({
       orientation,
@@ -92,7 +90,7 @@ export const useStore = create<{
         : orientation
     })
   },
-  setCurrentVideoOrientation: (currentVideoOrientation: VideoOrientation) => { set({ currentVideoOrientation }) },
+  setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => { set({ currentVideoOrientation }) },
   setMainCharacterImage: (mainCharacterImage: string) => { set({ mainCharacterImage }) },
   setMainCharacterVoice: (mainCharacterVoice: string) => { set({ mainCharacterVoice }) },
   setStoryPromptDraft: (storyPromptDraft: string) => { set({ storyPromptDraft }) },
@@ -161,8 +159,8 @@ export const useStore = create<{
     // let's use the UI settings for now
     const { orientation } = get()
 
-    currentClap.meta.height = orientation === VideoOrientation.LANDSCAPE ? RESOLUTION_SHORT : RESOLUTION_LONG
-    currentClap.meta.width = orientation === VideoOrientation.PORTRAIT ? RESOLUTION_SHORT : RESOLUTION_LONG
+    currentClap.meta.height = orientation === ClapMediaOrientation.LANDSCAPE ? RESOLUTION_SHORT : RESOLUTION_LONG
+    currentClap.meta.width = orientation === ClapMediaOrientation.PORTRAIT ? RESOLUTION_SHORT : RESOLUTION_LONG
 
     set({
       currentClap,

src/app/types.ts

@@ -1,5 +0,0 @@
-export enum VideoOrientation {
-  PORTRAIT = "portrait",
-  LANDSCAPE = "landscape",
-  SQUARE = "square"
-}

src/lib/utils/getVideoOrientation.ts

@@ -1,4 +1,4 @@
-import { VideoOrientation } from "@/app/types"
+import { ClapMediaOrientation } from "@aitube/clap"
 
 /**
  * Determine the video orientation from a video URL (data-uri or hosted)
@@ -6,14 +6,14 @@ import { VideoOrientation } from "@/app/types"
  * @param url 
  * @returns 
  */
-export async function getVideoOrientation(url: string): Promise<VideoOrientation> {
-  return new Promise<VideoOrientation>(resolve => {
+export async function getVideoOrientation(url: string): Promise<ClapMediaOrientation> {
+  return new Promise<ClapMediaOrientation>(resolve => {
     const video = document.createElement('video')
     video.addEventListener( "loadedmetadata", function () {
       resolve(
-        this.videoHeight < this.videoWidth ? VideoOrientation.LANDSCAPE :
-        this.videoHeight > this.videoWidth ? VideoOrientation.PORTRAIT :
-        VideoOrientation.SQUARE
+        this.videoHeight < this.videoWidth ? ClapMediaOrientation.LANDSCAPE :
+        this.videoHeight > this.videoWidth ? ClapMediaOrientation.PORTRAIT :
+        ClapMediaOrientation.SQUARE
       )
     }, false)
     video.src = url

src/lib/utils/parseVideoOrientation.ts

@@ -1,11 +0,0 @@
-import { VideoOrientation } from "@/app/types"
-
-export function parseVideoOrientation(input?: any): VideoOrientation {
-  const orientation = `${input || ""}`.trim().toLowerCase() || "square"
-
-  return (
-    (orientation === "vertical" || orientation === "portrait") ? VideoOrientation.PORTRAIT
-    : (orientation === "horizontal" || orientation === "landscape") ? VideoOrientation.LANDSCAPE
-    : VideoOrientation.SQUARE
-  )
-}