Made the Player behaviour more consistent

2021-07-02 14:07:03 -04:00
parent 26b5e6b1b4
commit ace5c905eb
14 changed files with 374 additions and 377 deletions
@@ -0,0 +1,41 @@
+import React from 'react'
+import { useMediaQuery } from '@material-ui/core'
+import { Link } from 'react-router-dom'
+import clsx from 'clsx'
+import { QualityInfo } from '../common'
+import useStyle from './styles'
+
+const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
+  const classes = useStyle()
+  const className = classes.audioTitle
+  const isDesktop = useMediaQuery('(min-width:810px)')
+
+  if (!audioInfo.song) {
+    return ''
+  }
+
+  const song = audioInfo.song
+  const qi = { suffix: song.suffix, bitRate: song.bitRate }
+
+  return (
+    <Link to={`/album/${song.albumId}/show`} className={className}>
+      <span>
+        <span className={clsx(classes.songTitle, 'songTitle')}>
+          {song.title}
+        </span>
+        {isDesktop && (
+          <QualityInfo record={qi} className={classes.qualityInfo} />
+        )}
+      </span>
+      {!isMobile && (
+        <div className={classes.artistAlbum}>
+          <span className={clsx(classes.songInfo, 'songInfo')}>
+            {`${song.artist} - ${song.album}`}
+          </span>
+        </div>
+      )}
+    </Link>
+  )
+})
+
+export default AudioTitle