feat: replace emoji icons with Lucide SVG components

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/PlayerControls.svelte

@@ -17,6 +17,20 @@
     getPlaybackRate,
   } from '$lib/transport/playback';
   import { formatTime } from '$lib/utils/time';
+  import {
+    VolumeX,
+    Volume1,
+    Volume2,
+    Rewind,
+    FastForward,
+    Pause,
+    Play,
+    Scissors,
+    Captions,
+    PictureInPicture2,
+    Maximize,
+    Minimize,
+  } from '@lucide/svelte';
 
   let {
     visible,
@@ -158,7 +172,7 @@
           title={isMuted ? 'Unmute' : 'Mute'}
           type="button"
         >
-          {#if isMuted || volume === 0}🔇{:else if volume < 0.5}🔉{:else}🔊{/if}
+          {#if isMuted || volume === 0}<VolumeX size={16} />{:else if volume < 0.5}<Volume1 size={16} />{:else}<Volume2 size={16} />{/if}
         </button>
         <input
           type="range"
@@ -178,19 +192,19 @@
           onclick={() => seekBy(-10)}
           title="Skip back 10s"
           type="button"
-        >⏪</button>
+        ><Rewind size={16} /></button>
         <button
           class="ctrl-btn play-btn"
           onclick={togglePlayPause}
           title={session.isPlaying ? 'Pause' : 'Play'}
           type="button"
-        >{session.isPlaying ? '❚❚' : '▶'}</button>
+        >{#if session.isPlaying}<Pause size={18} />{:else}<Play size={18} />{/if}</button>
         <button
           class="ctrl-btn"
           onclick={() => seekBy(10)}
           title="Skip forward 10s"
           type="button"
-        >⏩</button>
+        ><FastForward size={16} /></button>
       </div>
 
       <!-- Right group: settings -->
@@ -219,7 +233,7 @@
             oncontextmenu={handleCCContextMenu}
             title={captionsEnabled ? 'Hide captions' : 'Show captions'}
             type="button"
-          >CC</button>
+          ><Captions size={16} /></button>
         {/if}
 
         <button
@@ -228,7 +242,7 @@
           onclick={handlePiP}
           title="Picture-in-Picture"
           type="button"
-        >⧉</button>
+        ><PictureInPicture2 size={16} /></button>
 
         <button
           class="ctrl-btn"
@@ -236,7 +250,7 @@
           onclick={handleFullscreen}
           title={fullscreenActive ? 'Exit fullscreen' : 'Fullscreen'}
           type="button"
-        >{fullscreenActive ? '⤓' : '⛶'}</button>
+        >{#if fullscreenActive}<Minimize size={16} />{:else}<Maximize size={16} />{/if}</button>
       </div>
     </div>