Split software arch desc for easier manintenance. Many fixes related to next video playing and remote playback

src/lib/components/player/Controls.svelte

@@ -75,26 +75,7 @@
 </script>
 
 <div class="flex items-center gap-4">
-  <!-- Shuffle -->
-  <button
-    onclick={(e) => {
-      e.stopPropagation();
-      onToggleShuffle?.();
-    }}
-    ontouchstart={(e) => e.stopPropagation()}
-    ontouchmove={(e) => e.stopPropagation()}
-    ontouchend={(e) => e.stopPropagation()}
-    class="p-2 rounded-full transition-colors {shuffle
-      ? 'text-[var(--color-jellyfin)]'
-      : 'text-gray-400 hover:text-white'}"
-    title="Shuffle"
-  >
-    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-      <path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" />
-    </svg>
-  </button>
-
-  <!-- Sleep Timer -->
+  <!-- Sleep Timer (above shuffle) -->
   {#if !$sleepTimerActive}
     <button
       onclick={(e) => {
@@ -117,6 +98,25 @@
     <SleepTimerIndicator onClick={onSleepTimerClick} />
   {/if}
 
+  <!-- Shuffle -->
+  <button
+    onclick={(e) => {
+      e.stopPropagation();
+      onToggleShuffle?.();
+    }}
+    ontouchstart={(e) => e.stopPropagation()}
+    ontouchmove={(e) => e.stopPropagation()}
+    ontouchend={(e) => e.stopPropagation()}
+    class="p-2 rounded-full transition-colors {shuffle
+      ? 'text-[var(--color-jellyfin)]'
+      : 'text-gray-400 hover:text-white'}"
+    title="Shuffle"
+  >
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" />
+    </svg>
+  </button>
+
   <!-- Previous -->
   <button
     onclick={(e) => {