From 54c8ee9d94638060b0c491afb397176d461ee081 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Mon, 3 Nov 2025 23:55:49 +0200
Subject: [PATCH] fix: Audio file / media: desktop Safari, and on iPhone
 Safari, Chrome and FireFox: Not possible to trim audio

closes 144
---
 .../client/src/components/VideoPlayer.tsx     | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx b/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
index d49a7387..36fcacfe 100644
--- a/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
+++ b/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
@@ -47,14 +47,24 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
     const posterImage = isValidPoster ? mediaPosterUrl : (isAudioFile ? AUDIO_POSTER_URL : undefined);
 
-    // Detect iOS device
+    // Detect iOS device and Safari browser
     useEffect(() => {
         const checkIOS = () => {
             const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
             return /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;
         };
 
+        const checkSafari = () => {
+            const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
+            return /Safari/.test(userAgent) && !/Chrome/.test(userAgent) && !/Chromium/.test(userAgent);
+        };
+
         setIsIOS(checkIOS());
+        
+        // Store Safari detection globally for other components
+        if (typeof window !== 'undefined') {
+            (window as any).isSafari = checkSafari();
+        }
 
         // Check if video was previously initialized
         if (typeof window !== 'undefined') {
@@ -345,7 +355,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
         <div className="video-player-container">
             <video
                 ref={videoRef}
-                preload="auto"
+                preload="metadata"
                 crossOrigin="anonymous"
                 onClick={handleVideoClick}
                 playsInline
@@ -356,7 +366,10 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
                 poster={posterImage}
             >
                 <source src={sampleVideoUrl} type="video/mp4" />
-                <p>Your browser doesn't support HTML5 video.</p>
+                {/* Safari fallback for audio files */}
+                <source src={sampleVideoUrl} type="audio/mp4" />
+                <source src={sampleVideoUrl} type="audio/mpeg" />
+                <p>Your browser doesn't support HTML5 video or audio.</p>
             </video>
 
             {/* iOS First-play indicator - only shown on first visit for iOS devices when not initialized */}