Use new renderAudioTitle (to avoid the [Object object] song title on iOS)
This commit is contained in:
Generated
+13
-26
@@ -12977,9 +12977,9 @@
|
||||
}
|
||||
},
|
||||
"rc-motion": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.3.1.tgz",
|
||||
"integrity": "sha512-UAB2gwS9c1DuCFKVCimAkL2JUEGCwzgCbb+VslhIMFg6vY7oyMxYIQ6hkoji1PzgDEw0tHIhP+a17R6Y5DGMrQ==",
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.3.2.tgz",
|
||||
"integrity": "sha512-F81I4WzFW6JkfxWfkMnzT1uY09YKIodM66zh+Xsi/2BqiT1ZdFZtd2HB9wqwXpofflpZj4x6bMG6dyJ+2o5Jvw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.11.1",
|
||||
"classnames": "^2.2.1",
|
||||
@@ -13002,9 +13002,9 @@
|
||||
}
|
||||
},
|
||||
"rc-slider": {
|
||||
"version": "9.5.1",
|
||||
"resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.5.1.tgz",
|
||||
"integrity": "sha512-MbGH2f2/Kv7jUeBHQp8rcXLUrNdFR3YLyuMR77WcjQrEIMly/zoBuie/VZaWoPXWHlsB3H91ETktF88EfS/PkQ==",
|
||||
"version": "9.5.3",
|
||||
"resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.5.3.tgz",
|
||||
"integrity": "sha512-ADatCsY9LUiPzm2v165/ZACmHrvhmDsmh8TpJtaAYB+xuRjLhlbFASZ11ZeuWPn8oMXT6L08OzNce4F3by/Ivw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.10.1",
|
||||
"classnames": "^2.2.5",
|
||||
@@ -13078,9 +13078,9 @@
|
||||
}
|
||||
},
|
||||
"rc-trigger": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.0.6.tgz",
|
||||
"integrity": "sha512-L/xIX5OO7a/bdTH0yYT9mwAsV6oM1inAqAbLjoUzpcIW+UUE3jjVOjm5VaKDfHd41rzDzOfN05URmhet5QzXKQ==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.0.7.tgz",
|
||||
"integrity": "sha512-4QzwHL0IaXmSZnMfJV45dR3Cy4XgsQy2m0LySBAFiZYaH5EN3qnq2lOtg5aU4T36g4146fHpfGa7mtJpCgkwhg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"classnames": "^2.2.6",
|
||||
@@ -13427,14 +13427,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-device-detect": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.13.1.tgz",
|
||||
"integrity": "sha512-XTPgAMsUVHC5lMNUGiAeO2UfAfhMfjq0CBUM67eHnc9XfO7iESh6h/cffKV8VGgrZBX+dyuqJl23bLLHoav5Ig==",
|
||||
"requires": {
|
||||
"ua-parser-js": "^0.7.21"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
|
||||
@@ -13547,15 +13539,15 @@
|
||||
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
|
||||
},
|
||||
"react-jinke-music-player": {
|
||||
"version": "4.18.3",
|
||||
"resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.18.3.tgz",
|
||||
"integrity": "sha512-8ljgaNp3YO2ac8svFUVDJIvSLx4m49f1cmQboLibua0IXGlKIF38/iPC+whrSv6e413gyDUJwuZ+eaBTJkP94g==",
|
||||
"version": "4.19.0",
|
||||
"resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.19.0.tgz",
|
||||
"integrity": "sha512-EPVuVTiOHdPkNp3lajMp7k+/RZ+hU8As5fJuxHG10zx4WWBIWnTCPYkun7TERHUiHsearie8Xy4Nd5b5D3gGjg==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.6",
|
||||
"downloadjs": "^1.4.7",
|
||||
"is-mobile": "^2.2.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"rc-slider": "^9.5.1",
|
||||
"rc-slider": "^9.5.3",
|
||||
"rc-switch": "^3.2.1",
|
||||
"react-drag-listview": "^0.1.7",
|
||||
"react-draggable": "^4.4.3",
|
||||
@@ -15911,11 +15903,6 @@
|
||||
"typescript-compare": "^0.0.2"
|
||||
}
|
||||
},
|
||||
"ua-parser-js": {
|
||||
"version": "0.7.22",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
|
||||
"integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
|
||||
},
|
||||
"unicode-canonical-property-names-ecmascript": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
|
||||
|
||||
+1
-2
@@ -14,14 +14,13 @@
|
||||
"ra-data-json-server": "^3.8.5",
|
||||
"react": "^16.13.1",
|
||||
"react-admin": "^3.8.5",
|
||||
"react-device-detect": "^1.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-drag-listview": "^0.1.7",
|
||||
"react-ga": "^3.1.2",
|
||||
"react-hot-keys": "^2.6.0",
|
||||
"react-icons": "^3.11.0",
|
||||
"react-image-lightbox": "^5.1.1",
|
||||
"react-jinke-music-player": "^4.18.3",
|
||||
"react-jinke-music-player": "^4.19.0",
|
||||
"react-measure": "^2.5.2",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-scripts": "^3.4.3",
|
||||
|
||||
@@ -7,7 +7,6 @@ import ReactJkMusicPlayer from 'react-jinke-music-player'
|
||||
import 'react-jinke-music-player/assets/index.css'
|
||||
import Hotkeys from 'react-hot-keys'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { isIOS } from 'react-device-detect'
|
||||
import subsonic from '../subsonic'
|
||||
import {
|
||||
scrobble,
|
||||
@@ -32,6 +31,19 @@ const useStyle = makeStyles((theme) => ({
|
||||
|
||||
let audioInstance = null
|
||||
|
||||
const audioTitle = (audioInfo) => {
|
||||
return audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''
|
||||
}
|
||||
|
||||
const AudioTitle = ({ audioInfo, className }) => {
|
||||
const title = audioTitle(audioInfo)
|
||||
return (
|
||||
<Link to={`/album/${audioInfo.albumId}/show`} className={className}>
|
||||
{title}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
const Player = () => {
|
||||
const translate = useTranslate()
|
||||
const currentTheme = useSelector((state) => state.theme)
|
||||
@@ -45,26 +57,6 @@ const Player = () => {
|
||||
const visible = authenticated && queue.queue.length > 0
|
||||
const classes = useStyle({ visible })
|
||||
|
||||
const audioTitle = useCallback(
|
||||
(audioInfo) => {
|
||||
const title = audioInfo.name
|
||||
? `${audioInfo.name} - ${audioInfo.singer}`
|
||||
: ''
|
||||
// TODO Ideally the react-player should accept a Link as the audioTitle
|
||||
return isIOS ? (
|
||||
title
|
||||
) : (
|
||||
<Link
|
||||
to={`/album/${audioInfo.albumId}/show`}
|
||||
className={classes.audioTitle}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
[classes.audioTitle]
|
||||
)
|
||||
|
||||
const defaultOptions = {
|
||||
theme: playerTheme,
|
||||
bounds: 'body',
|
||||
@@ -84,6 +76,9 @@ const Player = () => {
|
||||
top: 300,
|
||||
left: 120,
|
||||
},
|
||||
renderAudioTitle: (audioInfo) => (
|
||||
<AudioTitle audioInfo={audioInfo} className={classes.audioTitle} />
|
||||
),
|
||||
locale: {
|
||||
playListsText: translate('player.playListsText'),
|
||||
openText: translate('player.openText'),
|
||||
|
||||
Reference in New Issue
Block a user