poster image fix

frontend-tools/chapters-editor/client/src/components/IOSVideoPlayer.tsx

@@ -42,9 +42,10 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
         // Check if the media is an audio file and set poster image
         const isAudioFile = url.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
         
-        // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty
+        // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty, null, or "None"
         const mediaPosterUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.posterUrl) || '';
-        setPosterImage(mediaPosterUrl || (isAudioFile ? '/audio-poster.jpg' : undefined));
+        const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
+        setPosterImage(isValidPoster ? mediaPosterUrl : (isAudioFile ? '/audio-poster.jpg' : undefined));
     }, [videoRef]);
 
     // Function to jump 15 seconds backward

frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx

@@ -41,9 +41,10 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     // Check if the media is an audio file
     const isAudioFile = sampleVideoUrl.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
     
-    // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty
+    // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty, null, or "None"
     const mediaPosterUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.posterUrl) || '';
-    const posterImage = mediaPosterUrl || (isAudioFile ? '/audio-poster.jpg' : undefined);
+    const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
+    const posterImage = isValidPoster ? mediaPosterUrl : (isAudioFile ? '/audio-poster.jpg' : undefined);
 
     // Detect iOS device and Safari browser
     useEffect(() => {

frontend-tools/chapters-editor/vite.chapters-editor.config.ts

@@ -2,12 +2,33 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path, { dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { copyFileSync, mkdirSync } from 'fs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+// Plugin to copy audio-poster.jpg to build output
+const copyAudioPoster = () => {
+    return {
+        name: 'copy-audio-poster',
+        closeBundle() {
+            const outDir = path.resolve(__dirname, '../../../static/video_editor');
+            const sourceFile = path.resolve(__dirname, 'client/public/audio-poster.jpg');
+            const destFile = path.resolve(outDir, 'audio-poster.jpg');
+
+            try {
+                mkdirSync(outDir, { recursive: true });
+                copyFileSync(sourceFile, destFile);
+                console.log('✓ Copied audio-poster.jpg to build output');
+            } catch (error) {
+                console.error('Error copying audio-poster.jpg:', error);
+            }
+        },
+    };
+};
+
 export default defineConfig({
-    plugins: [react()],
+    plugins: [react(), copyAudioPoster()],
     resolve: {
         alias: {
             '@': path.resolve(__dirname, 'client', 'src'),

frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx

@@ -42,9 +42,10 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
         // Check if the media is an audio file and set poster image
         const isAudioFile = url.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
         
-        // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty
+        // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty, null, or "None"
         const mediaPosterUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.posterUrl) || '';
-        setPosterImage(mediaPosterUrl || (isAudioFile ? '/audio-poster.jpg' : undefined));
+        const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
+        setPosterImage(isValidPoster ? mediaPosterUrl : (isAudioFile ? '/audio-poster.jpg' : undefined));
     }, [videoRef]);
 
     // Function to jump 15 seconds backward

frontend-tools/video-editor/client/src/components/TimelineControls.tsx

@@ -1132,7 +1132,6 @@ const TimelineControls = ({
                         endTime: parseTimeString(seg.endTime),
                         thumbnail: '',
                     }));
-                    console.log('convertedSegments', convertedSegments);
 
                     // Dispatch event to update segments
                     const updateEvent = new CustomEvent('update-segments', {

frontend-tools/video-editor/client/src/components/VideoPlayer.tsx

@@ -41,9 +41,10 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     // Check if the media is an audio file
     const isAudioFile = sampleVideoUrl.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
     
-    // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty
+    // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty, null, or "None"
     const mediaPosterUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.posterUrl) || '';
-    const posterImage = mediaPosterUrl || (isAudioFile ? '/audio-poster.jpg' : undefined);
+    const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
+    const posterImage = isValidPoster ? mediaPosterUrl : (isAudioFile ? '/audio-poster.jpg' : undefined);
 
     // Detect iOS device
     useEffect(() => {