upgrade dependencies

README.md

@@ -25,5 +25,18 @@ During development we can use a path like this to quickly test:
 ```
  "@aitube/timeline": "file:/Users/jbilcke/Projects/Typescript_Libraries/aitube-timeline",
 ```
-   
+
+Your local copy of the aitube-timelien will have to be built using:
+
+```bash
+bun run build:dev
+```
+
+to build with the jsxDEV enabled.
+
+If you don't, you will see errors and warnings such as
+
+```
+app-index.js:33 Warning: Each child in a list should have a unique "key" prop.
+```
 

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@aitube/clap": "0.0.23",
-        "@aitube/timeline": "0.0.3",
+        "@aitube/timeline": "0.0.4",
         "@huggingface/hub": "^0.15.0",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.4",
@@ -84,9 +84,12 @@
       }
     },
     "node_modules/@aitube/timeline": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.3.tgz",
-      "integrity": "sha512-lqyPkPjYbWJUpqj5xewvZCxZMNgVCszRxTHQ285KoOQzE6buR9lMtptLcFxREQ/XkDrr1NA7ouDxxnqnkK3r/g==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.4.tgz",
+      "integrity": "sha512-vnwPyt3mFIbXdeK1OTeqXI4WkUkHwgGNI+beBXaLf/neHHVE0vcXx3gQyLaqYIb6oBkaZkFRUcyUNThjAxJWEw==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
       "peerDependencies": {
         "@aitube/clap": "0.0.23",
         "@radix-ui/react-slider": "^1.1.2",
@@ -2693,9 +2696,9 @@
       }
     },
     "node_modules/@react-three/fiber": {
-      "version": "8.16.6",
-      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.16.6.tgz",
-      "integrity": "sha512-sKEqocYKRI3deW7z9CAVjedDID1an2i8FwxQVv2reMJxzIxIlyxCYXMIAqXBCgHTFtVX2hWGTZYhLL5nyne8kA==",
+      "version": "8.16.7",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.16.7.tgz",
+      "integrity": "sha512-D9z/HmTupS/Z3YqBK+rxPgm3Ou7VvOB8J57+AW7JG2FmhCY4u65Gd6r8i8y61BR/paCk0DCPyyJ5w7FiUEHXgA==",
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -2859,9 +2862,9 @@
       "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
     },
     "node_modules/@types/three": {
-      "version": "0.164.1",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.164.1.tgz",
-      "integrity": "sha512-dR/trWDhyaNqJV38rl1TonlCA9DpnX7OPYDWD81bmBGn/+uEc3+zNalFxQcV4FlPTeDBhCY3SFWKvK6EJwL88g==",
+      "version": "0.165.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.165.0.tgz",
+      "integrity": "sha512-AJK8JZAFNBF0kBXiAIl5pggYlzAGGA8geVYQXAcPCEDRbyA+oEjkpUBcJJrtNz6IiALwzGexFJGZG2yV3WsYBw==",
       "peer": true,
       "dependencies": {
         "@tweenjs/tween.js": "~23.1.1",
@@ -4114,6 +4117,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -4260,9 +4272,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.787",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.787.tgz",
-      "integrity": "sha512-d0EFmtLPjctczO3LogReyM2pbBiiZbnsKnGF+cdZhsYzHm/A0GV7W94kqzLD8SN4O3f3iHlgLUChqghgyznvCQ=="
+      "version": "1.4.788",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.788.tgz",
+      "integrity": "sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -7768,9 +7780,9 @@
       }
     },
     "node_modules/three-stdlib": {
-      "version": "2.30.2",
-      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.30.2.tgz",
-      "integrity": "sha512-R4HRbSRfTwEIJPAybj3XnunXF0esGiCTol8p7n0hxKX0x6Ta44ESPHKoQn/uvZmgPNrtNxLsH3YWjywyF6Z2Mw==",
+      "version": "2.30.3",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.30.3.tgz",
+      "integrity": "sha512-rYr8PqMljMza+Ct8kQk90Y7y+YcWoPu1thfYv5YGCp0hytNRbxSQWXY4GpdTGymCj3bDggEBpxso53C3pPwhIw==",
       "dependencies": {
         "@types/draco3d": "^1.4.0",
         "@types/offscreencanvas": "^2019.6.4",

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@aitube/clap": "0.0.23",
-    "@aitube/timeline": "0.0.3",
+    "@aitube/timeline": "0.0.4",
     "@huggingface/hub": "^0.15.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",

src/app/layout.tsx

@@ -14,11 +14,12 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" style={{ overscrollBehaviorX: "none"}}>
       <body className={cn(
         `h-full w-full overflow-none dark`,
        inter.className
-        )}>
+        )}
+        style={{ overscrollBehaviorX: "none" }}>
         {children}
       </body>
     </html>

src/app/main.tsx

@@ -46,13 +46,13 @@ export function Main() {
         w-screen h-screen
         overflow-hidden
         items-center justify-center
-        bg-stone-700
+        bg-[rgb(58,54,50)]
         `
       )}
         >
         {clap
         ? <ClapTimeline
-          showFPS
+          showFPS={false}
           className={cn(
 
           )}

src/lib/hooks/useDebounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

src/lib/utils/debounceAsync.ts

@@ -0,0 +1,66 @@
+/*
+
+Here's how you can use the `debounceAsync` function:
+
+```typescript
+async function fetchData(query: string): Promise<string> {
+  // Simulating an API call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(`Results for ${query}`);
+    }, 500);
+  });
+}
+
+const debouncedFetchData = debounceAsync(fetchData, 300);
+
+(async () => {
+  try {
+    console.log(await debouncedFetchData("query 1")); // This will be ignored
+    console.log(await debouncedFetchData("query 2")); // This will be ignored
+    console.log(await debouncedFetchData("query 3")); // This will return "Results for query 3"
+  } catch (error) {
+    console.error(error);
+  }
+})();
+```
+
+The `debounceAsync` function takes a Promise-based function `func` and a `wait` time as its arguments.
+It returns a debounced version of the given function that, when called multiple times within the specified wait time, will only execute the last call.
+*/
+
+type DebouncedFunction<T extends any[], R> = ((...args: T) => R) & {
+  clear: () => void
+}
+
+export function debounceAsync<T extends any[], R>(
+  func: (...args: T) => Promise<R>,
+  wait: number
+): DebouncedFunction<T, Promise<R | undefined>> {
+  let timeout: NodeJS.Timeout | undefined
+
+  const debounced = (...args: T) => {
+    return new Promise<R | undefined>((resolve, reject) => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+
+      timeout = setTimeout(async () => {
+        try {
+          const result = await func(...args)
+          resolve(result)
+        } catch (error) {
+          reject(error)
+        }
+      }, wait)
+    })
+  }
+
+  debounced.clear = () => {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+  }
+
+  return debounced
+}

src/lib/utils/debounceSync.ts

@@ -0,0 +1,59 @@
+type DebouncedFunctionSync<T extends any[], R> = ((...args: T) => R) & {
+  clear: () => void
+}
+
+/**
+ * Example usage:
+ * ```typescript
+ *   function fetchDataSync(query: string): string {
+ *     return `Results for ${query}`;
+ *   }
+ *
+ *   const debouncedFetchDataSync = debounceSync(fetchDataSync, 300);
+ *
+ *   try {
+ *    console.log(debouncedFetchDataSync("query 1")); // This will be ignored
+ *     console.log(debouncedFetchDataSync("query 2")); // This will be ignored
+ *     console.log(debouncedFetchDataSync("query 3")); // This will return "Results for query 3"
+ *   } catch (error) {
+ *     console.error(error);
+ *   }
+ * ```
+ *
+ * Note that the synchronous version of the debounce function will return
+ * the result of the last function call or `undefined` if the function was
+ * not called within the specified wait time. You should also be aware that
+ * this synchronous version may cause blocking if the debounced function
+ * takes a long time to execute.
+ *
+ * @param func
+ * @param wait
+ * @returns
+ */
+export function debounceSync<T extends any[], R>(
+  func: (...args: T) => R,
+  wait: number
+): DebouncedFunctionSync<T, R | undefined> {
+  let timeout: NodeJS.Timeout | undefined
+
+  const debounced = (...args: T): R | undefined => {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+
+    let result: R | undefined
+    timeout = setTimeout(() => {
+      result = func(...args)
+    }, wait)
+
+    return result
+  }
+
+  debounced.clear = () => {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+  }
+
+  return debounced
+}