Use new renderAudioTitle (to avoid the [Object object] song title on iOS)

This commit is contained in:
Deluan
2020-10-13 11:20:30 -04:00
parent 0c095f6d5d
commit 0ff89679ba
3 changed files with 30 additions and 49 deletions
+13 -26
View File
@@ -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
View File
@@ -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",
+16 -21
View File
@@ -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'),