client/src/routes/Music.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
   import { API, apiFetch, withToken } from "../utils/api.js";
   import { musicCount } from "../stores/musicStore.js";
   import { cleanFileName } from "../utils/filename.js";
@@ -76,7 +76,7 @@
   }
 
   // Player functions
-  function playTrack(item, index) {
+  async function playTrack(item, index) {
     if (currentTrack?.id === item.id) {
       togglePlay();
       return;
@@ -87,13 +87,13 @@
     duration = item.mediaInfo?.format?.duration || 0;
     isPlaying = true;
 
-    if (audioEl) {
-      audioEl.src = streamURL(item);
-      audioEl.play().catch((err) => {
-        console.error("Play error:", err);
-        isPlaying = false;
-      });
-    }
+    await tick();
+    if (!audioEl) return;
+    audioEl.src = streamURL(item);
+    audioEl.play().catch((err) => {
+      console.error("Play error:", err);
+      isPlaying = false;
+    });
   }
 
   function togglePlay() {
@@ -212,14 +212,14 @@
       <div class="view-toggle">
         <button
           class="view-btn {viewMode === 'list' ? 'active' : ''}"
-          on:click={() => viewMode = 'list'}
+          on:click={() => (viewMode = "list")}
           title="Liste görünümü"
         >
           <i class="fa-solid fa-list"></i>
         </button>
         <button
           class="view-btn {viewMode === 'grid' ? 'active' : ''}"
-          on:click={() => viewMode = 'grid'}
+          on:click={() => (viewMode = "grid")}
           title="Grid görünümü"
         >
           <i class="fa-solid fa-border-all"></i>
@@ -248,7 +248,7 @@
         <i class="fa-solid fa-music"></i>
         <p>Henüz müzik dosyası yok.</p>
       </div>
-    {:else if viewMode === 'list'}
+    {:else if viewMode === "list"}
       <!-- List View -->
       <div class="music-list">
         <div class="list-header">
@@ -292,7 +292,9 @@
               <div class="row-source">{sourceLabel(item)}</div>
             </div>
             <div class="row-time">
-              {formatDuration(item.mediaInfo?.format?.duration || item.duration)}
+              {formatDuration(
+                item.mediaInfo?.format?.duration || item.duration,
+              )}
             </div>
             <div class="row-actions" on:click|stopPropagation>
               <button
@@ -344,7 +346,9 @@
               <div class="card-title">{cleanFileName(item.title)}</div>
               <div class="card-source">{sourceLabel(item)}</div>
               <div class="card-duration">
-                {formatDuration(item.mediaInfo?.format?.duration || item.duration)}
+                {formatDuration(
+                  item.mediaInfo?.format?.duration || item.duration,
+                )}
               </div>
             </div>
           </div>
@@ -426,7 +430,11 @@
         <!-- Volume & Extra -->
         <div class="player-extra">
           <div class="volume-wrapper">
-            <button class="control-btn volume-icon" on:click={toggleMute} title="Ses">
+            <button
+              class="control-btn volume-icon"
+              on:click={toggleMute}
+              title="Ses"
+            >
               {#if isMuted}
                 <i class="fa-solid fa-volume-xmark"></i>
               {:else if volume < 0.3}
@@ -618,8 +626,12 @@
   }
 
   @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
 
   /* === List View === */
@@ -690,13 +702,27 @@
     animation: equalizer 0.8s ease-in-out infinite;
   }
 
-  .playing-indicator .bar-1 { animation-delay: 0s; height: 8px; }
-  .playing-indicator .bar-2 { animation-delay: 0.2s; height: 12px; }
-  .playing-indicator .bar-3 { animation-delay: 0.4s; height: 6px; }
+  .playing-indicator .bar-1 {
+    animation-delay: 0s;
+    height: 8px;
+  }
+  .playing-indicator .bar-2 {
+    animation-delay: 0.2s;
+    height: 12px;
+  }
+  .playing-indicator .bar-3 {
+    animation-delay: 0.4s;
+    height: 6px;
+  }
 
   @keyframes equalizer {
-    0%, 100% { transform: scaleY(0.5); }
-    50% { transform: scaleY(1); }
+    0%,
+    100% {
+      transform: scaleY(0.5);
+    }
+    50% {
+      transform: scaleY(1);
+    }
   }
 
   .row-thumb {
@@ -879,8 +905,13 @@
   }
 
   @keyframes pulse {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 51, 0.4); }
-    50% { box-shadow: 0 0 0 8px rgba(245, 179, 51, 0); }
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 rgba(245, 179, 51, 0.4);
+    }
+    50% {
+      box-shadow: 0 0 0 8px rgba(245, 179, 51, 0);
+    }
   }
 
   .card-info {
@@ -1131,7 +1162,11 @@
     height: 4px;
     border-radius: 2px;
     cursor: pointer;
-    background: linear-gradient(to right, var(--yellow) var(--fill, 100%), #e5e5e5 var(--fill, 100%));
+    background: linear-gradient(
+      to right,
+      var(--yellow) var(--fill, 100%),
+      #e5e5e5 var(--fill, 100%)
+    );
     position: relative;
   }