fix: fix audio player

Author: mateof

TelegramDownloader/Pages/Modals/AudioPlayerModal.razor

@@ -357,63 +357,60 @@
         gap: 0.25rem;
     }
 
-    .audio-progress-bar {
+    .audio-seek-slider {
         width: 100%;
         height: 6px;
+        -webkit-appearance: none;
+        appearance: none;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 3px;
         cursor: pointer;
-        position: relative;
-    }
-
-    .audio-progress-buffer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 3px;
-        transition: width 0.3s ease;
+        outline: none;
     }
 
-    .audio-progress-fill {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        background: linear-gradient(90deg, #e94560 0%, #ff6b6b 100%);
+    .audio-seek-slider::-webkit-slider-runnable-track {
+        height: 6px;
+        background: transparent;
         border-radius: 3px;
-        transition: width 0.1s linear;
     }
 
-    .audio-progress-thumb {
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
+    .audio-seek-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
         width: 14px;
         height: 14px;
         background: #fff;
         border-radius: 50%;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+        margin-top: -4px;
         transition: transform 0.1s ease, box-shadow 0.2s ease;
-        z-index: 2;
     }
 
-    .audio-progress-bar:hover .audio-progress-thumb {
-        transform: translate(-50%, -50%) scale(1.2);
+    .audio-seek-slider::-webkit-slider-thumb:hover {
+        transform: scale(1.2);
         box-shadow: 0 2px 10px rgba(233, 69, 96, 0.5);
     }
 
-    .audio-progress-thumb::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 6px;
+    .audio-seek-slider::-moz-range-track {
         height: 6px;
-        background: #e94560;
+        background: transparent;
+        border-radius: 3px;
+    }
+
+    .audio-seek-slider::-moz-range-thumb {
+        width: 14px;
+        height: 14px;
+        background: #fff;
         border-radius: 50%;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+        border: none;
+    }
+
+    .audio-seek-slider::-moz-range-thumb:hover {
+        transform: scale(1.2);
+        box-shadow: 0 2px 10px rgba(233, 69, 96, 0.5);
     }
 
     .audio-time {
@@ -765,11 +762,11 @@
                 </div>
                 <div class="audio-controls-row">
                     <div class="audio-progress-container">
-                        <div class="audio-progress-bar" @onclick="SeekAudio">
-                            <div class="audio-progress-buffer" style="width: @(bufferPercent.ToString("F1", System.Globalization.CultureInfo.InvariantCulture))%"></div>
-                            <div class="audio-progress-fill" style="width: @(progressPercent.ToString("F1", System.Globalization.CultureInfo.InvariantCulture))%"></div>
-                            <div class="audio-progress-thumb" style="left: @(progressPercent.ToString("F1", System.Globalization.CultureInfo.InvariantCulture))%"></div>
-                        </div>
+                        <input type="range" class="audio-seek-slider" min="0" max="100" step="0.1"
+                               value="@progressPercent.ToString("F1", System.Globalization.CultureInfo.InvariantCulture)"
+                               style="background: linear-gradient(to right, #e94560 0%, #e94560 @(progressPercent.ToString("F1", System.Globalization.CultureInfo.InvariantCulture))%, rgba(255,255,255,0.1) @(progressPercent.ToString("F1", System.Globalization.CultureInfo.InvariantCulture))%, rgba(255,255,255,0.1) 100%);"
+                               @oninput="SeekAudioInput"
+                               @onchange="SeekAudioChange" />
                         <div class="audio-time">
                             <span>@currentTimeDisplay</span>
                             <span>@durationDisplay</span>
@@ -780,6 +777,8 @@
                             <i class="bi @(isMuted ? "bi-volume-mute-fill" : "bi-volume-up-fill")"></i>
                         </button>
                         <input type="range" class="audio-volume-slider" min="0" max="100" value="@volume"
+                               style="background: linear-gradient(to right, #e94560 0%, #e94560 @(volume)%, rgba(255,255,255,0.1) @(volume)%, rgba(255,255,255,0.1) 100%);"
+                               @oninput="ChangeVolumeInput"
                                @onchange="ChangeVolume" />
                     </div>
                     <button class="audio-btn-visualizer @(enableVisualizer ? "active" : "")" @onclick="ToggleVisualizer" title="@(enableVisualizer ? "Disable visualizer" : "Enable visualizer")">
@@ -1019,13 +1018,38 @@
         }
     }
 
-    private async Task SeekAudio(MouseEventArgs e)
+    private async Task SeekAudioInput(Microsoft.AspNetCore.Components.ChangeEventArgs e)
+    {
+        // Preview while dragging (updates display but doesn't commit)
+        if (double.TryParse(e.Value?.ToString(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out double percent))
+        {
+            progressPercent = percent;
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
+    private async Task SeekAudioChange(Microsoft.AspNetCore.Components.ChangeEventArgs e)
     {
-        var percent = e.OffsetX / 200.0 * 100;
-        if (percent < 0) percent = 0;
-        if (percent > 100) percent = 100;
-        await JSRuntime.InvokeVoidAsync("seekAudioPlayer", percent);
-        await UpdateProgress();
+        // Commit the seek when user releases
+        if (double.TryParse(e.Value?.ToString(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out double percent))
+        {
+            if (percent < 0) percent = 0;
+            if (percent > 100) percent = 100;
+            await JSRuntime.InvokeVoidAsync("seekAudioPlayer", percent);
+            await UpdateProgress();
+        }
+    }
+
+    private async Task ChangeVolumeInput(Microsoft.AspNetCore.Components.ChangeEventArgs e)
+    {
+        // Update volume in real-time while dragging
+        if (int.TryParse(e.Value?.ToString(), out int newVolume))
+        {
+            volume = newVolume;
+            isMuted = volume == 0;
+            await JSRuntime.InvokeVoidAsync("setAudioVolume", volume / 100.0);
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     private async Task ChangeVolume(Microsoft.AspNetCore.Components.ChangeEventArgs e)

TelegramDownloader/wwwroot/js/fileUploadVue.js

@@ -871,29 +871,40 @@ window.extractAudioArtwork = (audioUrl) => {
             return;
         }
 
+        const urlLower = audioUrl.toLowerCase();
+
         // Skip artwork extraction for FLAC files - jsmediatags has issues with them
         // and they require downloading too much data
-        const urlLower = audioUrl.toLowerCase();
         if (urlLower.includes('.flac') || urlLower.includes('flac')) {
             console.log('Skipping artwork extraction for FLAC file');
             window._artworkCache[audioUrl] = null;
             resolve(null);
             return;
         }
 
+        // Skip artwork extraction for local files (not from API)
+        // jsmediatags tries to download the entire file which can hang the connection
+        const isLocalFile = !audioUrl.includes('/api/file/');
+        if (isLocalFile) {
+            console.log('Skipping artwork extraction for local file');
+            window._artworkCache[audioUrl] = null;
+            resolve(null);
+            return;
+        }
+
         // Check if jsmediatags is available
         if (typeof jsmediatags === 'undefined') {
             console.log('jsmediatags library not loaded');
             resolve(null);
             return;
         }
 
-        // Add timeout to prevent hanging
+        // Add timeout to prevent hanging (reduced from 10s to 5s)
         const timeoutId = setTimeout(() => {
             console.log('Artwork extraction timed out');
             window._artworkCache[audioUrl] = null;
             resolve(null);
-        }, 10000); // 10 second timeout
+        }, 5000); // 5 second timeout
 
         try {
             jsmediatags.read(audioUrl, {