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

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

@@ -0,0 +1,31 @@
+/**
+ * A consistent logger utility that only outputs debug messages in development
+ * 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);
+        }
+    },
+
+    /**
+     * Always logs error messages
+     */
+    error: (...args: any[]) => console.error(...args),
+
+    /**
+     * Always logs warning messages
+     */
+    warn: (...args: any[]) => console.warn(...args),
+
+    /**
+     * Always logs info messages
+     */
+    info: (...args: any[]) => console.info(...args),
+};
+
+export default logger;

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

@@ -0,0 +1,51 @@
+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}`);
+    }
+}
+
+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',
+        });
+
+        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,
+        },
+        mutations: {
+            retry: false,
+        },
+    },
+});

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

@@ -0,0 +1,34 @@
+/**
+ * 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';
+
+    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');
+
+    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);
+};
+
+/**
+ * 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);
+};

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * Generate a solid color background for a segment
+ * 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);
+
+    // 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}%)`;
+};