fix: Disable Segment Tools and Reset Preview State During Playback (#1305)

* fix: Disable Segment Tools and Reset Preview State During Playback

* chore: remove some unnecessary comments

* chore: build assets

* fix: do not display the handles (left/right) on preview mode

* fix: Disable all tools on preview mode (undo, redo, reset, etc.)

* Update README.md

* feat: Prettier configuration for video editor

* Update README.md

* Update .prettierrc

* style: Format entire codebase (video-editor) with Prettier

* fix: During segments playback mode, disable button interactions but keep hover working

* feat: Add yarn format

* prettier format

* Update package.json

* feat: Install prettier and improve formatting

* build assets

* Update version.py 6.2.0

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

@@ -7,25 +7,25 @@ const logger = {
    * Logs debug messages only in development environment
    */
   debug: (...args: any[]) => {
-    if (process.env.NODE_ENV === 'development') {
+    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;
+export default logger;

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

@@ -10,13 +10,13 @@ async function throwIfResNotOk(res: Response) {
 export async function apiRequest(
   method: string,
   url: string,
-  data?: unknown | undefined,
+  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",
+    credentials: "include"
   });
 
   await throwIfResNotOk(res);
@@ -24,13 +24,11 @@ export async function apiRequest(
 }
 
 type UnauthorizedBehavior = "returnNull" | "throw";
-export const getQueryFn: <T>(options: {
-  on401: UnauthorizedBehavior;
-}) => QueryFunction<T> =
+export const getQueryFn: <T>(options: { on401: UnauthorizedBehavior }) => QueryFunction<T> =
   ({ on401: unauthorizedBehavior }) =>
   async ({ queryKey }) => {
     const res = await fetch(queryKey[0] as string, {
-      credentials: "include",
+      credentials: "include"
     });
 
     if (unauthorizedBehavior === "returnNull" && res.status === 401) {
@@ -48,10 +46,10 @@ export const queryClient = new QueryClient({
       refetchInterval: false,
       refetchOnWindowFocus: false,
       staleTime: Infinity,
-      retry: false,
+      retry: false
     },
     mutations: {
-      retry: false,
-    },
-  },
+      retry: false
+    }
+  }
 });

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

@@ -3,17 +3,17 @@
  */
 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}`;
 };
 

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

@@ -2,20 +2,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 => {
+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}%)`;
 };
 
@@ -24,27 +21,27 @@ export const generateSolidColor = (
  * Now returns a data URL for a solid color square instead of a video thumbnail
  */
 export const generateThumbnail = async (
-  videoElement: HTMLVideoElement, 
+  videoElement: HTMLVideoElement,
   time: number
 ): Promise<string> => {
   return new Promise((resolve) => {
     // Create a small canvas for the solid color
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = 10; // Much smaller - we only need a color
     canvas.height = 10;
-    
-    const ctx = canvas.getContext('2d');
+
+    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);
+    const dataUrl = canvas.toDataURL("image/png", 0.5);
     resolve(dataUrl);
   });
 };