feat: Major Upgrade to Video.js v8 — Chapters Functionality, Fixes and Improvements

frontend-tools/video-editor/client/src/lib/logger.ts

@@ -3,29 +3,29 @@
  * but always shows errors, warnings, and info messages.
  */
 const logger = {
-  /**
-   * Logs debug messages only in development environment
-   */
-  debug: (...args: any[]) => {
-    if (process.env.NODE_ENV === "development") {
-      console.debug(...args);
-    }
-  },
+    /**
+     * Logs debug messages only in development environment
+     */
+    debug: (...args: any[]) => {
+        if (process.env.NODE_ENV === 'development') {
+            console.debug(...args);
+        }
+    },
 
-  /**
-   * Always logs error messages
-   */
-  error: (...args: any[]) => console.error(...args),
+    /**
+     * Always logs error messages
+     */
+    error: (...args: any[]) => console.error(...args),
 
-  /**
-   * Always logs warning messages
-   */
-  warn: (...args: any[]) => console.warn(...args),
+    /**
+     * Always logs warning messages
+     */
+    warn: (...args: any[]) => console.warn(...args),
 
-  /**
-   * Always logs info messages
-   */
-  info: (...args: any[]) => console.info(...args)
+    /**
+     * Always logs info messages
+     */
+    info: (...args: any[]) => console.info(...args),
 };
 
 export default logger;

frontend-tools/video-editor/client/src/lib/queryClient.ts

@@ -1,55 +1,51 @@
-import { QueryClient, QueryFunction } from "@tanstack/react-query";
+import { QueryClient, QueryFunction } from '@tanstack/react-query';
 
 async function throwIfResNotOk(res: Response) {
-  if (!res.ok) {
-    const text = (await res.text()) || res.statusText;
-    throw new Error(`${res.status}: ${text}`);
-  }
+    if (!res.ok) {
+        const text = (await res.text()) || res.statusText;
+        throw new Error(`${res.status}: ${text}`);
+    }
 }
 
-export async function apiRequest(
-  method: string,
-  url: string,
-  data?: unknown | undefined
-): Promise<Response> {
-  const res = await fetch(url, {
-    method,
-    headers: data ? { "Content-Type": "application/json" } : {},
-    body: data ? JSON.stringify(data) : undefined,
-    credentials: "include"
-  });
-
-  await throwIfResNotOk(res);
-  return res;
-}
-
-type UnauthorizedBehavior = "returnNull" | "throw";
-export const getQueryFn: <T>(options: { on401: UnauthorizedBehavior }) => QueryFunction<T> =
-  ({ on401: unauthorizedBehavior }) =>
-  async ({ queryKey }) => {
-    const res = await fetch(queryKey[0] as string, {
-      credentials: "include"
+export async function apiRequest(method: string, url: string, data?: unknown | undefined): Promise<Response> {
+    const res = await fetch(url, {
+        method,
+        headers: data ? { 'Content-Type': 'application/json' } : {},
+        body: data ? JSON.stringify(data) : undefined,
+        credentials: 'include',
     });
 
-    if (unauthorizedBehavior === "returnNull" && res.status === 401) {
-      return null;
-    }
-
     await throwIfResNotOk(res);
-    return await res.json();
-  };
+    return res;
+}
+
+type UnauthorizedBehavior = 'returnNull' | 'throw';
+export const getQueryFn: <T>(options: { on401: UnauthorizedBehavior }) => QueryFunction<T> =
+    ({ on401: unauthorizedBehavior }) =>
+    async ({ queryKey }) => {
+        const res = await fetch(queryKey[0] as string, {
+            credentials: 'include',
+        });
+
+        if (unauthorizedBehavior === 'returnNull' && res.status === 401) {
+            return null;
+        }
+
+        await throwIfResNotOk(res);
+        return await res.json();
+    };
 
 export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      queryFn: getQueryFn({ on401: "throw" }),
-      refetchInterval: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-      retry: false
+    defaultOptions: {
+        queries: {
+            queryFn: getQueryFn({ on401: 'throw' }),
+            refetchInterval: false,
+            refetchOnWindowFocus: false,
+            staleTime: Infinity,
+            retry: false,
+        },
+        mutations: {
+            retry: false,
+        },
     },
-    mutations: {
-      retry: false
-    }
-  }
 });

frontend-tools/video-editor/client/src/lib/timeUtils.ts

@@ -2,33 +2,33 @@
  * Format seconds to HH:MM:SS.mmm format with millisecond precision
  */
 export const formatDetailedTime = (seconds: number): string => {
-  if (isNaN(seconds)) return "00:00:00.000";
+    if (isNaN(seconds)) return '00:00:00.000';
 
-  const hours = Math.floor(seconds / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-  const remainingSeconds = Math.floor(seconds % 60);
-  const milliseconds = Math.round((seconds % 1) * 1000);
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    const milliseconds = Math.round((seconds % 1) * 1000);
 
-  const formattedHours = String(hours).padStart(2, "0");
-  const formattedMinutes = String(minutes).padStart(2, "0");
-  const formattedSeconds = String(remainingSeconds).padStart(2, "0");
-  const formattedMilliseconds = String(milliseconds).padStart(3, "0");
+    const formattedHours = String(hours).padStart(2, '0');
+    const formattedMinutes = String(minutes).padStart(2, '0');
+    const formattedSeconds = String(remainingSeconds).padStart(2, '0');
+    const formattedMilliseconds = String(milliseconds).padStart(3, '0');
 
-  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}.${formattedMilliseconds}`;
+    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}.${formattedMilliseconds}`;
 };
 
 /**
  * Format seconds to MM:SS format - now uses the detailed format with hours and milliseconds
  */
 export const formatTime = (seconds: number): string => {
-  // Use the detailed format instead of the old MM:SS format
-  return formatDetailedTime(seconds);
+    // Use the detailed format instead of the old MM:SS format
+    return formatDetailedTime(seconds);
 };
 
 /**
  * Format seconds to HH:MM:SS format - now uses the detailed format with milliseconds
  */
 export const formatLongTime = (seconds: number): string => {
-  // Use the detailed format
-  return formatDetailedTime(seconds);
+    // Use the detailed format
+    return formatDetailedTime(seconds);
 };

frontend-tools/video-editor/client/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+    return twMerge(clsx(inputs));
 }

frontend-tools/video-editor/client/src/lib/videoUtils.ts

@@ -3,45 +3,42 @@
  * Returns a CSS color based on the segment position
  */
 export const generateSolidColor = (time: number, duration: number): string => {
-  // Use the time position to create different colors
-  // This gives each segment a different color without needing an image
-  const position = Math.min(Math.max(time / (duration || 1), 0), 1);
+    // Use the time position to create different colors
+    // This gives each segment a different color without needing an image
+    const position = Math.min(Math.max(time / (duration || 1), 0), 1);
 
-  // Calculate color based on position
-  // Use an extremely light blue-based color palette
-  const hue = 210; // Blue base
-  const saturation = 40 + Math.floor(position * 20); // 40-60% (less saturated)
-  const lightness = 85 + Math.floor(position * 8); // 85-93% (extremely light)
+    // Calculate color based on position
+    // Use an extremely light blue-based color palette
+    const hue = 210; // Blue base
+    const saturation = 40 + Math.floor(position * 20); // 40-60% (less saturated)
+    const lightness = 85 + Math.floor(position * 8); // 85-93% (extremely light)
 
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 };
 
 /**
  * Legacy function kept for compatibility
  * Now returns a data URL for a solid color square instead of a video thumbnail
  */
-export const generateThumbnail = async (
-  videoElement: HTMLVideoElement,
-  time: number
-): Promise<string> => {
-  return new Promise((resolve) => {
-    // Create a small canvas for the solid color
-    const canvas = document.createElement("canvas");
-    canvas.width = 10; // Much smaller - we only need a color
-    canvas.height = 10;
+export const generateThumbnail = async (videoElement: HTMLVideoElement, time: number): Promise<string> => {
+    return new Promise((resolve) => {
+        // Create a small canvas for the solid color
+        const canvas = document.createElement('canvas');
+        canvas.width = 10; // Much smaller - we only need a color
+        canvas.height = 10;
 
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      // Get the solid color based on time
-      const color = generateSolidColor(time, videoElement.duration);
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            // Get the solid color based on time
+            const color = generateSolidColor(time, videoElement.duration);
 
-      // Fill with solid color
-      ctx.fillStyle = color;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-    }
+            // Fill with solid color
+            ctx.fillStyle = color;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
 
-    // Convert to data URL (much smaller now)
-    const dataUrl = canvas.toDataURL("image/png", 0.5);
-    resolve(dataUrl);
-  });
+        // Convert to data URL (much smaller now)
+        const dataUrl = canvas.toDataURL('image/png', 0.5);
+        resolve(dataUrl);
+    });
 };