Only link from current playing song title to album view if not in iOS.

Ideally the react-player should accept a Link as the audioTitle

ui/package-lock.json

@@ -13427,6 +13427,14 @@
         }
       }
     },
+    "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",
@@ -15903,6 +15911,11 @@
         "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,6 +14,7 @@
     "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",

ui/src/audioplayer/Player.js

@@ -5,6 +5,9 @@ import { Link } from 'react-router-dom'
 import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
 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,
@@ -14,10 +17,8 @@ import {
   clearQueue,
 } from './queue'
 import themes from '../themes'
-import { makeStyles } from '@material-ui/core/styles'
 import config from '../config'
 import PlayerToolbar from './PlayerToolbar'
-import Hotkeys from 'react-hot-keys'
 
 const useStyle = makeStyles((theme) => ({
   audioTitle: {
@@ -45,14 +46,22 @@ const Player = () => {
   const classes = useStyle({ visible })
 
   const audioTitle = useCallback(
-    (audioInfo) => (
-      <Link
-        to={`/album/${audioInfo.albumId}/show`}
-        className={classes.audioTitle}
-      >
-        {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
-      </Link>
-    ),
+    (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]
   )