From 62c1ea045b65def07d65315ee006e033dde6b08b Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sat, 24 Aug 2024 12:57:58 +0200
Subject: [PATCH] fix: correct optical size of player icons

---
 common/views/Player/Player.svelte | 36 +++++++++++++++----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte
index 426c65f..a33474e 100644
--- a/common/views/Player/Player.svelte
+++ b/common/views/Player/Player.svelte
@@ -1155,7 +1155,7 @@
       </div>
     </div>
     <div class='d-flex col-4 justify-content-center'>
-      <span class='icon'><Users size='3rem' class='pt-5' /> </span>
+      <span class='icon'><Users size='3rem' class='pt-5' strokeWidth={3} /> </span>
       <span class='stats'>{torrent.peers || 0}</span>
       <span class='icon'><ArrowDown size='3rem' /></span>
       <span class='stats'>{fastPrettyBytes(torrent.down)}/s</span>
@@ -1245,16 +1245,16 @@
       {#if playbackRate !== 1}
         <div class='ts mr-auto'>x{playbackRate.toFixed(1)}</div>
       {/if}
-      <span class='icon ctrl m-5 keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}>
-        <Keyboard size='2rem' />
+      <span class='icon ctrl mr-5 d-flex align-items-center keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}>
+        <Keyboard size='2.5rem' strokeWidth={2.5} />
       </span>
       {#if SUPPORTS.isAndroid}
         <span class='material-symbols-outlined ctrl' use:click={() => (isLocked = true)}> lock </span>
       {/if}
       {#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
         <div class='dropdown dropup with-arrow' use:click={toggleDropdown}>
-          <span class='icon ctrl m-5' title='Audio Tracks'>
-            <ListMusic size='2rem' />
+          <span class='icon ctrl mr-5 d-flex align-items-center' title='Audio Tracks'>
+            <ListMusic size='2.5rem' strokeWidth={2.5} />
           </span>
           <div class='dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize'>
             {#each video.audioTracks as track}
@@ -1268,8 +1268,8 @@
       {/if}
       {#if 'videoTracks' in HTMLVideoElement.prototype && video?.videoTracks?.length > 1}
         <div class='dropdown dropup with-arrow'>
-          <span class='icon ctrl m-5' title='Video Tracks'>
-            <ListVideo size='2rem' />
+          <span class='icon ctrl mr-5 d-flex align-items-center' title='Video Tracks'>
+            <ListVideo size='2.5rem' strokeWidth={2.5} />
           </span>
           <div class='dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize'>
             {#each video.videoTracks as track}
@@ -1283,8 +1283,8 @@
       {/if}
       {#if subHeaders?.length}
         <div class='subtitles dropdown dropup with-arrow' use:click={toggleDropdown}>
-          <span class='icon ctrl m-5' title='Subtitles [C]'>
-            <Captions size='2rem' />
+          <span class='icon ctrl mr-5 d-flex align-items-center' title='Subtitles [C]'>
+            <Captions size='2.5rem'strokeWidth={2.5} />
           </span>
           <div class='dropdown-menu dropdown-menu-right ctrl custom-radio p-10 pb-5 text-capitalize'>
             <input name='subtitle-radio-set' type='radio' id='subtitle-off-radio' value='off' checked={subHeaders && subs?.current === -1} />
@@ -1302,28 +1302,28 @@
         </div>
       {/if}
       {#if 'PresentationRequest' in window && canCast && current}
-        <span class='icon ctrl m-5' title='Cast Video [D]' data-name='toggleCast' use:click={toggleCast}>
+        <span class='icon ctrl mr-5 d-flex align-items-center' title='Cast Video [D]' data-name='toggleCast' use:click={toggleCast}>
           {#if presentationConnection}
-            <Cast size='2rem' fill='white' strokeWidth={0} />
+            <Cast size='2.5rem' fill='white' strokeWidth={0} />
           {:else}
-            <Cast size='2rem' />
+            <Cast size='2.5rem'strokeWidth={2.5} />
           {/if}
         </span>
       {/if}
       {#if 'pictureInPictureEnabled' in document}
-        <span class='icon ctrl m-5' title='Popout Window [P]' data-name='togglePopout' use:click={togglePopout}>
+        <span class='icon ctrl mr-5 d-flex align-items-center' title='Popout Window [P]' data-name='togglePopout' use:click={togglePopout}>
           {#if pip}
-            <PictureInPicture size='2rem' />
+            <PictureInPicture size='2.5rem' strokeWidth={2.5} />
           {:else}
-            <PictureInPicture2 size='2rem' />
+            <PictureInPicture2 size='2.5rem'strokeWidth={2.5} />
           {/if}
         </span>
       {/if}
-      <span class='icon ctrl m-5' title='Fullscreen [F]' data-name='toggleFullscreen' use:click={toggleFullscreen}>
+      <span class='icon ctrl mr-5 d-flex align-items-center' title='Fullscreen [F]' data-name='toggleFullscreen' use:click={toggleFullscreen}>
         {#if isFullscreen}
-          <Minimize size='2rem' />
+          <Minimize size='2.5rem' strokeWidth={2.5} />
         {:else}
-          <Maximize size='2rem' />
+          <Maximize size='2.5rem' strokeWidth={2.5} />
         {/if}
       </span>
     </div>