From bcdae3581b1f5a06d1fea827adb86dcf2bf7fc9b Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Tue, 29 Oct 2024 19:38:45 +0800
Subject: [PATCH 1/3] fix: volume slider triggers swipe gesture

---
 src/pages/Player/Audio/Audio.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/Player/Audio/Audio.tsx b/src/pages/Player/Audio/Audio.tsx
index 31954ff..3913345 100644
--- a/src/pages/Player/Audio/Audio.tsx
+++ b/src/pages/Player/Audio/Audio.tsx
@@ -57,6 +57,11 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   )
 
   const bind = useDrag(({ down, movement: [, my], last, event }) => {
+    const element = event.target as HTMLElement
+
+    if (element.classList.contains('MuiSlider-thumb'))
+      return
+
     if ('pointerType' in event && event.pointerType !== 'touch') {
       return
     }

From 10b3000cf20e3d7c7b3b324f2eaff98d73418fd7 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Tue, 29 Oct 2024 19:46:41 +0800
Subject: [PATCH 2/3] feat: implement highlighting for lyrics at the same time
 to support translated text

---
 src/components/Lyrics/Lyrics.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/Lyrics/Lyrics.tsx b/src/components/Lyrics/Lyrics.tsx
index d572f00..d2cae8d 100644
--- a/src/components/Lyrics/Lyrics.tsx
+++ b/src/components/Lyrics/Lyrics.tsx
@@ -6,7 +6,16 @@ import { t } from '@lingui/macro'
 const Lyrics = ({ lyrics, currentTime }: { lyrics: string, currentTime: number }) => {
   const theme = useTheme()
   const lyricsRef = useRef<HTMLDivElement>(null)
-  const lyricLineHeight = 48
+
+  const isMobile = useMediaQuery('(max-height: 600px) or (max-width: 600px)')
+
+  const xs = useMediaQuery(theme.breakpoints.up('xs'))
+  const sm = useMediaQuery(theme.breakpoints.up('sm'))
+  const md = useMediaQuery(theme.breakpoints.up('md'))
+  const lg = useMediaQuery(theme.breakpoints.up('lg'))
+  const xl = useMediaQuery(theme.breakpoints.up('xl'))
+
+  const lyricLineHeight = xl ? 44 : lg ? 46 : md ? 48 : sm ? 48 : xs ? 48 : 50
 
   type Lyrics = {
     time: number,
@@ -59,8 +68,6 @@ const Lyrics = ({ lyrics, currentTime }: { lyrics: string, currentTime: number }
     config: { mass: 2, tension: 300, friction: 25 },
   })
 
-  const isMobile = useMediaQuery('(max-height: 600px) or (max-width: 600px)')
-
   return (
     <div key={'lyrics'} style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
       {
@@ -87,26 +94,26 @@ const Lyrics = ({ lyrics, currentTime }: { lyrics: string, currentTime: number }
           >
             <div style={{ height: '30%' }} />
             {
-              lyricsList.map((item, index) =>
+              lyricsList.map((item) =>
                 <div
                   key={item.time + item.text}
                   style={{
                     display: 'flex',
                     justifyContent: 'start',
                     alignItems: 'center',
-                    height: index === currentLyricIndex ? lyricLineHeight * 1.6 : lyricLineHeight,
-                    paddingLeft: index === currentLyricIndex
+                    height: item.time === lyricsList[currentLyricIndex].time ? lyricLineHeight * 1.6 : lyricLineHeight,
+                    paddingLeft: item.time === lyricsList[currentLyricIndex].time
                       ? isMobile ? 0 : '1rem'
                       : isMobile ? '1rem' : '2rem',
                   }}
                 >
                   <p
                     style={{
-                      fontSize: index === currentLyricIndex
+                      fontSize: item.time === lyricsList[currentLyricIndex].time
                         ? isMobile ? '1.5rem' : '1.5rem'
                         : isMobile ? '1rem' : '1.2rem',
-                      color: index === currentLyricIndex ? theme.palette.text.primary : theme.palette.text.secondary,
-                      fontWeight: index === currentLyricIndex ? 'bold' : 'normal',
+                      color: item.time === lyricsList[currentLyricIndex].time ? theme.palette.text.primary : theme.palette.text.secondary,
+                      fontWeight: item.time === lyricsList[currentLyricIndex].time ? 'bold' : 'normal',
                       transition: 'font-size 0.3s ease-out, color 0.3s ease, font-weight 0.3s ease',
                     }}
                   >

From 5cbdb44b1019cc80d79fbc1b32c3383cae50aa39 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Tue, 29 Oct 2024 20:29:11 +0800
Subject: [PATCH 3/3] fix: lyrics highlighting logic

---
 package-lock.json                |  4 ++--
 package.json                     |  2 +-
 src/components/Lyrics/Lyrics.tsx | 18 +++++++++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d6c39ea..4810988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "omp",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "omp",
-      "version": "1.9.0",
+      "version": "1.9.1",
       "dependencies": {
         "@azure/msal-browser": "3.26.1",
         "@azure/msal-react": "2.1.1",
diff --git a/package.json b/package.json
index 1b2d298..9a7d8b0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "omp",
   "description": "OneDrive Media Player",
   "private": true,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "scripts": {
     "dev": "webpack serve",
     "build": "node update-version-info.mjs && webpack --mode=production --node-env=production",
diff --git a/src/components/Lyrics/Lyrics.tsx b/src/components/Lyrics/Lyrics.tsx
index d2cae8d..7fb3dc9 100644
--- a/src/components/Lyrics/Lyrics.tsx
+++ b/src/components/Lyrics/Lyrics.tsx
@@ -68,6 +68,8 @@ const Lyrics = ({ lyrics, currentTime }: { lyrics: string, currentTime: number }
     config: { mass: 2, tension: 300, friction: 25 },
   })
 
+  const isHighlight = (time: number) => lyricsList[currentLyricIndex] && time === lyricsList[currentLyricIndex].time
+
   return (
     <div key={'lyrics'} style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
       {
@@ -101,19 +103,25 @@ const Lyrics = ({ lyrics, currentTime }: { lyrics: string, currentTime: number }
                     display: 'flex',
                     justifyContent: 'start',
                     alignItems: 'center',
-                    height: item.time === lyricsList[currentLyricIndex].time ? lyricLineHeight * 1.6 : lyricLineHeight,
-                    paddingLeft: item.time === lyricsList[currentLyricIndex].time
+                    height: isHighlight(item.time)
+                      ? lyricLineHeight * 1.6
+                      : lyricLineHeight,
+                    paddingLeft: isHighlight(item.time)
                       ? isMobile ? 0 : '1rem'
                       : isMobile ? '1rem' : '2rem',
                   }}
                 >
                   <p
                     style={{
-                      fontSize: item.time === lyricsList[currentLyricIndex].time
+                      fontSize: isHighlight(item.time)
                         ? isMobile ? '1.5rem' : '1.5rem'
                         : isMobile ? '1rem' : '1.2rem',
-                      color: item.time === lyricsList[currentLyricIndex].time ? theme.palette.text.primary : theme.palette.text.secondary,
-                      fontWeight: item.time === lyricsList[currentLyricIndex].time ? 'bold' : 'normal',
+                      color: isHighlight(item.time)
+                        ? theme.palette.text.primary
+                        : theme.palette.text.secondary,
+                      fontWeight: isHighlight(item.time)
+                        ? 'bold'
+                        : 'normal',
                       transition: 'font-size 0.3s ease-out, color 0.3s ease, font-weight 0.3s ease',
                     }}
                   >