diff --git a/ui/package-lock.json b/ui/package-lock.json index 7ff42c763..851723f3b 100644 --- a/ui/package-lock.json +++ b/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", diff --git a/ui/package.json b/ui/package.json index f9902ff94..b901036fe 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js index d06ce4eb7..88244d479 100644 --- a/ui/src/audioplayer/Player.js +++ b/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] )