Merge pull request #123 from nini22P/next

v1.9.1
nini22P · Oct 29, 2024 · a8d29a0 · a8d29a0
2 parents d22730d + 5cbdb44
commit a8d29a0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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,7 +68,7 @@ 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)')
+  const isHighlight = (time: number) => lyricsList[currentLyricIndex] && time === lyricsList[currentLyricIndex].time
 
   return (
     <div key={'lyrics'} style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
@@ -87,26 +96,32 @@ 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: isHighlight(item.time)
+                      ? lyricLineHeight * 1.6
+                      : lyricLineHeight,
+                    paddingLeft: isHighlight(item.time)
                       ? isMobile ? 0 : '1rem'
                       : isMobile ? '1rem' : '2rem',
                   }}
                 >
                   <p
                     style={{
-                      fontSize: index === currentLyricIndex
+                      fontSize: isHighlight(item.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: 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',
                     }}
                   >

diff --git 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
     }