diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js index 5122447c..c5ca28a3 100644 --- a/ui/src/album/AlbumDetails.js +++ b/ui/src/album/AlbumDetails.js @@ -18,7 +18,7 @@ import { DurationField, formatRange, SizeField, - StarButton, + LoveButton, } from '../common' const useStyles = makeStyles((theme) => ({ @@ -66,7 +66,7 @@ const useStyles = makeStyles((theme) => ({ width: '100%', height: '100%', }, - starButton: { + loveButton: { top: theme.spacing(-0.2), left: theme.spacing(0.5), }, @@ -160,12 +160,12 @@ const AlbumDetails = ({ record }) => { {record.name} - diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js index 10ed0860..3f585dac 100644 --- a/ui/src/album/AlbumList.js +++ b/ui/src/album/AlbumList.js @@ -11,7 +11,7 @@ import { Pagination, useTranslate, } from 'react-admin' -import StarIcon from '@material-ui/icons/Star' +import FavoriteIcon from '@material-ui/icons/Favorite' import { withWidth } from '@material-ui/core' import { List, QuickFilter, Title, useAlbumsPerPage } from '../common' import AlbumListActions from './AlbumListActions' @@ -38,7 +38,7 @@ const AlbumFilter = (props) => { } + label={} defaultValue={true} /> diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js index c871c6d6..ad8f11f5 100644 --- a/ui/src/album/AlbumListView.js +++ b/ui/src/album/AlbumListView.js @@ -9,7 +9,7 @@ import { TextField, } from 'react-admin' import { useMediaQuery } from '@material-ui/core' -import StarBorderIcon from '@material-ui/icons/StarBorder' +import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder' import { makeStyles } from '@material-ui/core/styles' import { ArtistLinkField, @@ -93,7 +93,10 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { sortByOrder={'DESC'} className={classes.contextMenu} label={ - + } /> diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js index 8bcac53a..5babb24f 100644 --- a/ui/src/album/AlbumSongs.js +++ b/ui/src/album/AlbumSongs.js @@ -10,7 +10,7 @@ import clsx from 'clsx' import { useDispatch } from 'react-redux' import { Card, useMediaQuery } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' -import StarBorderIcon from '@material-ui/icons/StarBorder' +import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder' import { playTracks } from '../actions' import { DurationField, @@ -123,7 +123,7 @@ const AlbumSongs = (props) => { sortable={false} className={classes.contextMenu} label={ - diff --git a/ui/src/album/albumLists.js b/ui/src/album/albumLists.js index f348844a..c87c4993 100644 --- a/ui/src/album/albumLists.js +++ b/ui/src/album/albumLists.js @@ -3,7 +3,7 @@ import LibraryAddIcon from '@material-ui/icons/LibraryAdd' import VideoLibraryIcon from '@material-ui/icons/VideoLibrary' import RepeatIcon from '@material-ui/icons/Repeat' import AlbumIcon from '@material-ui/icons/Album' -import StarIcon from '@material-ui/icons/Star' +import FavoriteIcon from '@material-ui/icons/Favorite' export default { all: { @@ -12,7 +12,7 @@ export default { }, random: { icon: ShuffleIcon, params: 'sort=random' }, starred: { - icon: StarIcon, + icon: FavoriteIcon, params: 'sort=starred_at&order=DESC&filter={"starred":true}', }, recentlyAdded: { diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js index 9b5856e0..f681e6ec 100644 --- a/ui/src/artist/ArtistList.js +++ b/ui/src/artist/ArtistList.js @@ -8,8 +8,8 @@ import { TextField, } from 'react-admin' import { useMediaQuery, withWidth } from '@material-ui/core' -import StarIcon from '@material-ui/icons/Star' -import StarBorderIcon from '@material-ui/icons/StarBorder' +import FavoriteIcon from '@material-ui/icons/Favorite' +import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder' import { AddToPlaylistDialog } from '../dialogs' import { ArtistContextMenu, @@ -43,7 +43,7 @@ const ArtistFilter = (props) => ( } + label={} defaultValue={true} /> @@ -78,7 +78,7 @@ const ArtistListView = ({ sortByOrder={'DESC'} className={classes.contextMenu} label={ - diff --git a/ui/src/audioplayer/PlayerToolbar.js b/ui/src/audioplayer/PlayerToolbar.js index e329952f..1800a34b 100644 --- a/ui/src/audioplayer/PlayerToolbar.js +++ b/ui/src/audioplayer/PlayerToolbar.js @@ -2,25 +2,25 @@ import React, { useCallback } from 'react' import { useLocation } from 'react-router-dom' import { useGetOne } from 'react-admin' import { GlobalHotKeys } from 'react-hotkeys' -import { StarButton, useToggleStar } from '../common' +import { LoveButton, useToggleLove } from '../common' import { keyMap } from '../hotkeys' -const Placeholder = () => +const Placeholder = () => const Toolbar = ({ id }) => { const location = useLocation() const resource = location.pathname.startsWith('/song') ? 'song' : 'albumSong' const { data, loading } = useGetOne(resource, id) - const [toggleStar, toggling] = useToggleStar(resource, data) + const [toggleLove, toggling] = useToggleLove(resource, data) const handlers = { - TOGGLE_STAR: useCallback(() => toggleStar(), [toggleStar]), + TOGGLE_LOVE: useCallback(() => toggleLove(), [toggleLove]), } return ( <> - - ArtistContextMenu.propTypes = { record: PropTypes.object, color: PropTypes.string, - showStar: PropTypes.bool, + showLove: PropTypes.bool, } ArtistContextMenu.defaultProps = { - showStar: true, + showLove: true, addLabel: true, } diff --git a/ui/src/common/StarButton.js b/ui/src/common/LoveButton.js similarity index 58% rename from ui/src/common/StarButton.js rename to ui/src/common/LoveButton.js index add4d6bb..7e38f7be 100644 --- a/ui/src/common/StarButton.js +++ b/ui/src/common/LoveButton.js @@ -1,24 +1,20 @@ import React, { useCallback } from 'react' import PropTypes from 'prop-types' -import StarIcon from '@material-ui/icons/Star' -import StarBorderIcon from '@material-ui/icons/StarBorder' +import FavoriteIcon from '@material-ui/icons/Favorite' +import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder' import IconButton from '@material-ui/core/IconButton' import { makeStyles } from '@material-ui/core/styles' -import { useToggleStar } from './useToggleStar' +import { useToggleLove } from './useToggleLove' const useStyles = makeStyles({ - star: { + love: { color: (props) => props.color, visibility: (props) => - props.visible === false - ? 'hidden' - : props.starred - ? 'visible' - : 'inherit', + props.visible === false ? 'hidden' : props.loved ? 'visible' : 'inherit', }, }) -export const StarButton = ({ +export const LoveButton = ({ resource, record, color, @@ -29,36 +25,36 @@ export const StarButton = ({ disabled, ...rest }) => { - const classes = useStyles({ color, visible, starred: record.starred }) - const [toggleStar, loading] = useToggleStar(resource, record) + const classes = useStyles({ color, visible, loved: record.starred }) + const [toggleLove, loading] = useToggleLove(resource, record) - const handleToggleStar = useCallback( + const handleToggleLove = useCallback( (e) => { e.preventDefault() - toggleStar() + toggleLove() e.stopPropagation() }, - [toggleStar] + [toggleLove] ) return ( ) } -StarButton.propTypes = { +LoveButton.propTypes = { resource: PropTypes.string.isRequired, record: PropTypes.object.isRequired, visible: PropTypes.bool, @@ -68,7 +64,7 @@ StarButton.propTypes = { disabled: PropTypes.bool, } -StarButton.defaultProps = { +LoveButton.defaultProps = { addLabel: true, record: {}, visible: true, diff --git a/ui/src/common/SongContextMenu.js b/ui/src/common/SongContextMenu.js index b7b50347..39acf2b4 100644 --- a/ui/src/common/SongContextMenu.js +++ b/ui/src/common/SongContextMenu.js @@ -8,7 +8,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert' import clsx from 'clsx' import { playNext, addTracks, setTrack, openAddToPlaylist } from '../actions' import subsonic from '../subsonic' -import { StarButton } from './StarButton' +import { LoveButton } from './LoveButton' import config from '../config' import { formatBytes } from '../utils' @@ -21,7 +21,7 @@ const useStyles = makeStyles({ export const SongContextMenu = ({ resource, record, - showStar, + showLove, onAddToPlaylist, className, }) => { @@ -87,7 +87,7 @@ export const SongContextMenu = ({ return ( - + @@ -114,13 +114,13 @@ SongContextMenu.propTypes = { resource: PropTypes.string.isRequired, record: PropTypes.object.isRequired, onAddToPlaylist: PropTypes.func, - showStar: PropTypes.bool, + showLove: PropTypes.bool, } SongContextMenu.defaultProps = { onAddToPlaylist: () => {}, record: {}, resource: 'song', - showStar: true, + showLove: true, addLabel: true, } diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js index fa5cc710..2a7d3516 100644 --- a/ui/src/common/SongDatagrid.js +++ b/ui/src/common/SongDatagrid.js @@ -60,7 +60,7 @@ const DiscSubtitleRow = ({ diff --git a/ui/src/common/index.js b/ui/src/common/index.js index 0861f5cf..fa952af9 100644 --- a/ui/src/common/index.js +++ b/ui/src/common/index.js @@ -18,12 +18,12 @@ export * from './SongContextMenu' export * from './SongDatagrid' export * from './SongDetails' export * from './SongTitleField' -export * from './StarButton' +export * from './LoveButton' export * from './Title' export * from './SongBulkActions' export * from './useAlbumsPerPage' export * from './useInterval' -export * from './useToggleStar' +export * from './useToggleLove' export * from './useTraceUpdate' export * from './Writable' export * from './SongSimpleList' diff --git a/ui/src/common/useToggleStar.js b/ui/src/common/useToggleLove.js similarity index 85% rename from ui/src/common/useToggleStar.js rename to ui/src/common/useToggleLove.js index b008f567..793349d9 100644 --- a/ui/src/common/useToggleStar.js +++ b/ui/src/common/useToggleLove.js @@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { useDataProvider, useNotify } from 'react-admin' import subsonic from '../subsonic' -export const useToggleStar = (resource, record = {}) => { +export const useToggleLove = (resource, record = {}) => { const [loading, setLoading] = useState(false) const notify = useNotify() @@ -24,14 +24,14 @@ export const useToggleStar = (resource, record = {}) => { }) }, [dataProvider, record.id, resource]) - const toggleStar = () => { + const toggleLove = () => { const toggle = record.starred ? subsonic.unstar : subsonic.star setLoading(true) toggle(record.id) .then(refreshRecord) .catch((e) => { - console.log('Error toggling star: ', e) + console.log('Error toggling love: ', e) notify('ra.page.error', 'warning') if (mountedRef.current) { setLoading(false) @@ -39,5 +39,5 @@ export const useToggleStar = (resource, record = {}) => { }) } - return [toggleStar, loading] + return [toggleLove, loading] } diff --git a/ui/src/hotkeys.js b/ui/src/hotkeys.js index 0310d5c4..506b1143 100644 --- a/ui/src/hotkeys.js +++ b/ui/src/hotkeys.js @@ -6,7 +6,7 @@ const keyMap = { NEXT_SONG: { name: 'next_song', sequence: 'right', group: 'Player' }, VOL_UP: { name: 'vol_up', sequence: '=', group: 'Player' }, VOL_DOWN: { name: 'vol_down', sequence: '-', group: 'Player' }, - TOGGLE_STAR: { name: 'toggle_star', sequence: 's', group: 'Player' }, + TOGGLE_LOVE: { name: 'toggle_love', sequence: 'l', group: 'Player' }, } export { keyMap } diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json index e4b380c5..5fbc4e7f 100644 --- a/ui/src/i18n/en.json +++ b/ui/src/i18n/en.json @@ -19,7 +19,7 @@ "updatedAt": "Updated at", "bitRate": "Bit rate", "discSubtitle": "Disc Subtitle", - "starred": "Starred", + "starred": "Favourite", "comment": "Comment" }, "actions": { @@ -60,7 +60,7 @@ "recentlyAdded": "Recently Added", "recentlyPlayed": "Recently Played", "mostPlayed": "Most Played", - "starred": "Starred" + "starred": "Favourites" } }, "artist": { @@ -340,7 +340,7 @@ "next_song": "Next Song", "vol_up": "Volume Up", "vol_down": "Volume Down", - "toggle_star": "Toggle Current Song's Star" + "toggle_love": "Add this track to favourites" } } } diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js index 1d5f7f51..c73ce273 100644 --- a/ui/src/song/SongList.js +++ b/ui/src/song/SongList.js @@ -7,7 +7,7 @@ import { TextField, } from 'react-admin' import { useMediaQuery } from '@material-ui/core' -import StarIcon from '@material-ui/icons/Star' +import FavoriteIcon from '@material-ui/icons/Favorite' import { DurationField, List, @@ -25,7 +25,7 @@ import { SongListActions } from './SongListActions' import { AlbumLinkField } from './AlbumLinkField' import { AddToPlaylistDialog } from '../dialogs' import { makeStyles } from '@material-ui/core/styles' -import StarBorderIcon from '@material-ui/icons/StarBorder' +import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder' const useStyles = makeStyles({ contextHeader: { @@ -50,7 +50,7 @@ const SongFilter = (props) => ( } + label={} defaultValue={true} /> @@ -115,7 +115,7 @@ const SongList = (props) => { sortByOrder={'DESC'} className={classes.contextMenu} label={ -