diff --git a/ui/package-lock.json b/ui/package-lock.json
index 851723f3..23956d3c 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -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",
diff --git a/ui/package.json b/ui/package.json
index b901036f..b429de9c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -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",
diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 88244d47..ad84e2f9 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -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 (
+
+ {title}
+
+ )
+}
+
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
- ) : (
-
- {title}
-
- )
- },
- [classes.audioTitle]
- )
-
const defaultOptions = {
theme: playerTheme,
bounds: 'body',
@@ -84,6 +76,9 @@ const Player = () => {
top: 300,
left: 120,
},
+ renderAudioTitle: (audioInfo) => (
+
+ ),
locale: {
playListsText: translate('player.playListsText'),
openText: translate('player.openText'),