diff --git a/package-lock.json b/package-lock.json index 1cd9698d16..6491e03442 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50122,7 +50122,7 @@ "react-full-screen": "^1.0.1", "react-hifi": "^2.2.1", "react-hls-player": "^3.0.1", - "react-hot-loader": "^4.12", + "react-hot-loader": "^4.13.1", "react-i18next": "^11.12.0", "react-image": "^2.2.2", "react-list": "^0.8.13", diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json index a142ca28b2..490504e2fc 100644 --- a/packages/i18n/src/locales/en.json +++ b/packages/i18n/src/locales/en.json @@ -365,7 +365,11 @@ "play-next": "Play next", "play-now": "Play now", "playlist-toast-body": "{{artist}} - {{track}} has been added to playlist.", - "playlist-toast-title": "Track added to playlist" + "playlist-toast-title": "Track added to playlist", + "track-toast-clipboard-success-title": "Copied to clipboard!", + "track-toast-clipboard-success-subtitle": "Track name successfully copied to clipboard.", + "track-toast-clipboard-error-title": "Failed to copy!", + "track-toast-clipboard-error-subtitle": "Oof, something went wrong." }, "track-table": { "add-selected-tracks-to-queue": "Add selected to queue", diff --git a/packages/ui/lib/components/TrackInfo/index.tsx b/packages/ui/lib/components/TrackInfo/index.tsx index ef2c92c63a..023b796cac 100644 --- a/packages/ui/lib/components/TrackInfo/index.tsx +++ b/packages/ui/lib/components/TrackInfo/index.tsx @@ -1,5 +1,9 @@ import React from 'react'; import { Icon } from 'semantic-ui-react'; +import { Tooltip } from '@nuclear/ui'; +import * as ActionToast from '../../../../app/app/actions/toasts' +import { useDispatch } from 'react-redux' +import { useTranslation } from 'react-i18next'; import Cover from '../Cover'; import styles from './styles.scss'; @@ -26,16 +30,46 @@ const TrackInfo: React.FC = ({ removeFromFavorites, isFavorite = false, hasTracks = false -}) => ( -
- - { - hasTracks && +}) => { + const dispatch = useDispatch(); + const { t } = useTranslation('track-popup'); + + const CopyTextToClipboard = async () => { + try { + await navigator.clipboard.writeText(track); + dispatch(ActionToast. + success(t('track-toast-clipboard-success-title'), + t('track-toast-clipboard-success-subtitle'), + null, + {} + ) + ); + } catch (err) { + dispatch(ActionToast. + error(t('track-toast-clipboard-error-title'), + t('track-toast-clipboard-error-subtitle'), + null, + {} + ) + ); + } + }; + + return ( +
+ + { + hasTracks && <>
-
- {track} -
+ CopyTextToClipboard()}> + {track} +
+ } + />
{artist}
@@ -51,8 +85,9 @@ const TrackInfo: React.FC = ({ />
- } -
-); + } + + ); +} export default TrackInfo; diff --git a/packages/ui/lib/components/TrackInfo/styles.scss b/packages/ui/lib/components/TrackInfo/styles.scss index 386458198c..7bf53c7992 100644 --- a/packages/ui/lib/components/TrackInfo/styles.scss +++ b/packages/ui/lib/components/TrackInfo/styles.scss @@ -47,4 +47,8 @@ cursor: pointer; } } + + #track_name:hover { + cursor: pointer; + } }