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

ui/package-lock.json

@@ -12977,9 +12977,9 @@
       }
     },
     "rc-motion": {
-      "version": "2.3.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.3.2.tgz",
-      "integrity": "sha512-UAB2gwS9c1DuCFKVCimAkL2JUEGCwzgCbb+VslhIMFg6vY7oyMxYIQ6hkoji1PzgDEw0tHIhP+a17R6Y5DGMrQ==",
+      "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",
+      "version": "9.5.3",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.5.3.tgz",
-      "integrity": "sha512-MbGH2f2/Kv7jUeBHQp8rcXLUrNdFR3YLyuMR77WcjQrEIMly/zoBuie/VZaWoPXWHlsB3H91ETktF88EfS/PkQ==",
+      "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",
+      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.0.7.tgz",
-      "integrity": "sha512-L/xIX5OO7a/bdTH0yYT9mwAsV6oM1inAqAbLjoUzpcIW+UUE3jjVOjm5VaKDfHd41rzDzOfN05URmhet5QzXKQ==",
+      "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",
+      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.18.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.19.0.tgz",
-      "integrity": "sha512-8ljgaNp3YO2ac8svFUVDJIvSLx4m49f1cmQboLibua0IXGlKIF38/iPC+whrSv6e413gyDUJwuZ+eaBTJkP94g==",
+      "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",

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",

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 (
+    <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'),