From 7d2382d56bf4b4186e566191cbbb1662a6a15d30 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 3 Aug 2024 16:35:03 +0800
Subject: [PATCH] fix: unify player actions icons

Signed-off-by: Innei <i@innei.in>
---
 icons/mgc/volume_mute_cute_re.svg             |   1 +
 .../src/modules/feed-column/corner-player.tsx | 112 +++++++++---------
 .../src/modules/feed-column/index.tsx         |   2 +-
 3 files changed, 58 insertions(+), 57 deletions(-)
 create mode 100644 icons/mgc/volume_mute_cute_re.svg

diff --git a/icons/mgc/volume_mute_cute_re.svg b/icons/mgc/volume_mute_cute_re.svg
new file mode 100644
index 000000000..39a56b332
--- /dev/null
+++ b/icons/mgc/volume_mute_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" fill-opacity=".01" d="M24 0v24H0V0z"/><path stroke="#10161F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.879 9.879 19 12m0 0 2.121 2.121M19 12.002l-2.121 2.12M19 12.002l2.121-2.122M6.995 16.296 9.498 18.3c1.807 1.445 2.71 2.168 3.537 1.812.826-.355.92-1.468 1.11-3.694.253-2.991.253-5.843 0-8.834-.19-2.226-.284-3.34-1.11-3.694-.827-.355-1.73.367-3.537 1.813L6.995 7.704a3.634 3.634 0 0 1-2.27.796v0A2.725 2.725 0 0 0 2 11.225v1.55A2.725 2.725 0 0 0 4.725 15.5v0c.825 0 1.626.28 2.27.796"/></svg>
\ No newline at end of file
diff --git a/src/renderer/src/modules/feed-column/corner-player.tsx b/src/renderer/src/modules/feed-column/corner-player.tsx
index f18f3f99a..9867a2a32 100644
--- a/src/renderer/src/modules/feed-column/corner-player.tsx
+++ b/src/renderer/src/modules/feed-column/corner-player.tsx
@@ -36,7 +36,7 @@ export const CornerPlayer = () => {
       {show && (
         <m.div
           key="corner-player"
-          className="group relative z-10 !-mt-8 !mb-0 w-full px-px"
+          className="group relative z-10 !-mt-8 !mb-0 w-full pr-px"
           initial={{ y: 50, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           exit={{ y: 50, opacity: 0 }}
@@ -105,60 +105,6 @@ const CornerPlayerImpl = () => {
 
   return (
     <>
-      {/* advanced controls */}
-      <div className="z-10 flex translate-y-10 justify-between border-t bg-theme-modal-background-opaque p-1 opacity-0 transition-all duration-200 ease-in-out group-hover:translate-y-0 group-hover:opacity-100">
-        <div className="flex items-center">
-          <ActionIcon
-            className="i-mingcute-close-fill"
-            onClick={() => Player.close()}
-            label="Close"
-          />
-          <ActionIcon
-            className="i-mingcute-external-link-line"
-            onClick={() =>
-              navigateToEntry({
-                entryId: entry.entries.id,
-                feedId: feed.id,
-                view: FeedViewType.Audios,
-              })}
-            label="Open Entry"
-          />
-        </div>
-        <div className="flex items-center">
-          <ActionIcon
-            label="Download"
-            onClick={() => {
-              window.open(Player.get().src, "_blank")
-            }}
-          >
-            <i className="i-mgc-download-2-cute-re" />
-          </ActionIcon>
-          <ActionIcon label={<PlaybackRateSelector />} labelDelayDuration={0}>
-            <PlaybackRateButton />
-          </ActionIcon>
-          <ActionIcon
-            className={cn(
-              playerValue.isMute ?
-                "i-mingcute-volume-mute-fill text-red-500" :
-                "i-mingcute-volume-fill",
-            )}
-            onClick={() => Player.toggleMute()}
-            label={<VolumeSlider />}
-            labelDelayDuration={0}
-          />
-          <ActionIcon
-            className="i-mingcute-back-2-fill"
-            onClick={() => Player.back(10)}
-            label="Back 10s"
-          />
-          <ActionIcon
-            className="i-mingcute-forward-2-fill"
-            onClick={() => Player.forward(10)}
-            label="Forward 10s"
-          />
-        </div>
-      </div>
-
       <div className="relative flex border-y bg-theme-modal-background backdrop-blur transition-all duration-200 ease-in-out">
         {/* play cover */}
         <div className="relative h-full">
@@ -205,6 +151,60 @@ const CornerPlayerImpl = () => {
           <PlayerProgress />
         </div>
       </div>
+
+      {/* advanced controls */}
+      <div className="absolute inset-x-0 top-0 z-[-1] flex justify-between border-t bg-theme-modal-background-opaque p-1 opacity-0 transition-all duration-200 ease-in-out group-hover:-translate-y-full group-hover:opacity-100">
+        <div className="flex items-center">
+          <ActionIcon
+            className="i-mgc-close-cute-re"
+            onClick={() => Player.close()}
+            label="Close"
+          />
+          <ActionIcon
+            className="i-mgc-external-link-cute-re"
+            onClick={() =>
+              navigateToEntry({
+                entryId: entry.entries.id,
+                feedId: feed.id,
+                view: FeedViewType.Audios,
+              })}
+            label="Open Entry"
+          />
+        </div>
+        <div className="flex items-center">
+          <ActionIcon
+            label="Download"
+            onClick={() => {
+              window.open(Player.get().src, "_blank")
+            }}
+          >
+            <i className="i-mgc-download-2-cute-re" />
+          </ActionIcon>
+          <ActionIcon label={<PlaybackRateSelector />} labelDelayDuration={0}>
+            <PlaybackRateButton />
+          </ActionIcon>
+          <ActionIcon
+            className={cn(
+              playerValue.isMute ?
+                "i-mgc-volume-off-cute-re text-red-500" :
+                "i-mgc-volume-cute-re",
+            )}
+            onClick={() => Player.toggleMute()}
+            label={<VolumeSlider />}
+            labelDelayDuration={0}
+          />
+          <ActionIcon
+            className="i-mgc-back-2-cute-re"
+            onClick={() => Player.back(10)}
+            label="Back 10s"
+          />
+          <ActionIcon
+            className="i-mgc-forward-2-cute-re"
+            onClick={() => Player.forward(10)}
+            label="Forward 10s"
+          />
+        </div>
+      </div>
     </>
   )
 }
@@ -356,7 +356,7 @@ const PlaybackRateButton = () => {
     <span
       className={cn(
         char.length > 1 ? "text-[9px]" : "text-xs",
-        "block font-mono font-bold",
+        "block font-mono",
       )}
     >
       {char}
diff --git a/src/renderer/src/modules/feed-column/index.tsx b/src/renderer/src/modules/feed-column/index.tsx
index fb4b744d5..f886fab71 100644
--- a/src/renderer/src/modules/feed-column/index.tsx
+++ b/src/renderer/src/modules/feed-column/index.tsx
@@ -227,7 +227,7 @@ export function FeedColumn({ children }: PropsWithChildren) {
             className={cn(
               active === index && item.className,
               "flex flex-col items-center gap-1 text-xl",
-              "hover:!bg-theme-vibrancyBg",
+              ELECTRON ? "hover:!bg-theme-vibrancyBg" : "",
               showSidebarUnreadCount && "h-11",
             )}
             onClick={(e) => {