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