feat: Video Trimmer and more

frontend-tools/video-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/video-editor/client/src/lib/queryClient.ts

@@ -0,0 +1,57 @@
+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/video-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/video-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/video-editor/client/src/lib/videoUtils.ts

@@ -0,0 +1,50 @@
+/**
+ * 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}%)`;
+};
+
+/**
+ * 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;
+    
+    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);
+    }
+    
+    // Convert to data URL (much smaller now)
+    const dataUrl = canvas.toDataURL('image/png', 0.5);
+    resolve(dataUrl);
+  });
+};