Update media browser UI with fade-in animations and improvements

- Add fade-in animation for thumbnail loading to prevent layout shifts
- Add loading state indicators for thumbnails
- Improve media browser CSS styling
- Enhance JavaScript for smoother thumbnail loading experience

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

media_server/static/index.html

@@ -11,6 +11,42 @@
     <!-- Clear Token Button -->
     <button class="clear-token-btn" onclick="clearToken()" data-i18n-title="auth.logout.title" data-i18n="auth.logout" title="Clear saved token">Logout</button>
 
+    <!-- Mini Player (sticky) -->
+    <div class="mini-player hidden" id="mini-player">
+        <div class="mini-player-info">
+            <img id="mini-album-art" class="mini-album-art" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E" alt="Album Art">
+            <div class="mini-track-details">
+                <div id="mini-track-title" class="mini-track-title">No media playing</div>
+                <div id="mini-artist" class="mini-artist"></div>
+            </div>
+        </div>
+        <div class="mini-controls">
+            <button class="mini-control-btn" onclick="togglePlayPause()" id="mini-btn-play-pause" title="Play/Pause">
+                <svg viewBox="0 0 24 24" id="mini-play-pause-icon">
+                    <path d="M8 5v14l11-7z"/>
+                </svg>
+            </button>
+        </div>
+        <div class="mini-progress-container">
+            <div class="mini-time-display">
+                <span id="mini-current-time">0:00</span>
+                <span id="mini-total-time">0:00</span>
+            </div>
+            <div class="mini-progress-bar" id="mini-progress-bar">
+                <div class="mini-progress-fill" id="mini-progress-fill"></div>
+            </div>
+        </div>
+        <div class="mini-volume-container">
+            <button class="mini-control-btn" onclick="toggleMute()" id="mini-btn-mute" title="Mute">
+                <svg viewBox="0 0 24 24" id="mini-mute-icon">
+                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
+                </svg>
+            </button>
+            <input type="range" id="mini-volume-slider" class="mini-volume-slider" min="0" max="100" value="50">
+            <div class="mini-volume-display" id="mini-volume-display">50%</div>
+        </div>
+    </div>
+
     <!-- Auth Modal -->
     <div id="auth-overlay" class="hidden">
         <div class="auth-modal">