diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js index 7b64a4fe1..1ff5418ab 100644 --- a/ui/src/album/AlbumSongs.js +++ b/ui/src/album/AlbumSongs.js @@ -2,6 +2,7 @@ import React from 'react' import { BulkActionsToolbar, DatagridLoading, + FunctionField, ListToolbar, TextField, useListController, @@ -14,10 +15,9 @@ import StarBorderIcon from '@material-ui/icons/StarBorder' import { playTracks } from '../audioplayer' import { DurationField, - SongContextMenu, - SongDatagrid, SongDetails, - SongTitleField, + SongDatagrid, + SongContextMenu, } from '../common' import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' @@ -62,6 +62,14 @@ const useStylesListToolbar = makeStyles({ }, }) +const trackName = (r) => { + const name = r.title + if (r.trackNumber) { + return r.trackNumber.toString().padStart(2, '0') + ' ' + name + } + return name +} + const AlbumSongs = (props) => { const classes = useStyles(props) const classesToolbar = useStylesListToolbar(props) @@ -124,11 +132,14 @@ const AlbumSongs = (props) => { sortable={false} /> )} - + {isDesktop && } + {!isDesktop && ( + + )} {isDesktop && } { } const OnAudioProgress = (info) => { - if (info.ended) { - document.title = 'Navidrome' - } - dispatch(progress(info)) - const pos = (info.currentTime / info.duration) * 100 - if (isNaN(info.duration) || pos < 90) { + const progress = (info.currentTime / info.duration) * 100 + if (isNaN(info.duration) || progress < 90) { return } const item = queue.queue.find((item) => item.trackId === info.trackId) @@ -124,6 +120,10 @@ const Player = () => { } } + const onAudioEnded = () => { + document.title = 'Navidrome' + } + if (authenticated && options.audioLists.length > 0) { return ( { onAudioListsChange={OnAudioListsChange} onAudioProgress={OnAudioProgress} onAudioPlay={OnAudioPlay} + onAudioEnded={onAudioEnded} /> ) } diff --git a/ui/src/audioplayer/queue.js b/ui/src/audioplayer/queue.js index 27f245b5c..e5f3d74dd 100644 --- a/ui/src/audioplayer/queue.js +++ b/ui/src/audioplayer/queue.js @@ -6,7 +6,6 @@ const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK' const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE' const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE' const PLAYER_PLAY_TRACKS = 'PLAYER_PLAY_TRACKS' -const PLAYER_PROGRESS = 'PLAYER_PROGRESS' const mapToAudioLists = (item) => { // If item comes from a playlist, id is mediaFileId @@ -89,30 +88,13 @@ const scrobble = (id, submit) => ({ submit, }) -const progress = (audioInfo) => ({ - type: PLAYER_PROGRESS, - data: audioInfo, -}) - const playQueueReducer = ( - previousState = { queue: [], clear: true, playing: false, current: {} }, + previousState = { queue: [], clear: true, playing: false }, payload ) => { - let queue, current + let queue const { type, data } = payload switch (type) { - case PLAYER_PROGRESS: - queue = previousState.queue - current = data.ended - ? {} - : { - trackId: data.trackId, - paused: data.paused, - } - return { - ...previousState, - current, - } case PLAYER_ADD_TRACKS: queue = previousState.queue Object.keys(data).forEach((id) => { @@ -127,12 +109,10 @@ const playQueueReducer = ( playing: true, } case PLAYER_SYNC_QUEUE: - current = data.length > 0 ? previousState.current : {} return { ...previousState, queue: data, clear: false, - current, } case PLAYER_SCROBBLE: const newQueue = previousState.queue.map((item) => { @@ -176,7 +156,6 @@ export { playTracks, syncQueue, scrobble, - progress, shuffleTracks, playQueueReducer, } diff --git a/ui/src/common/SongTitleField.js b/ui/src/common/SongTitleField.js deleted file mode 100644 index fb6de5ae5..000000000 --- a/ui/src/common/SongTitleField.js +++ /dev/null @@ -1,65 +0,0 @@ -import { makeStyles } from '@material-ui/core/styles' -import React from 'react' -import PropTypes from 'prop-types' -import { useSelector } from 'react-redux' -import { FunctionField } from 'react-admin' -import get from 'lodash.get' -import { useTheme } from '@material-ui/core/styles' -import PlayingLight from '../icons/playing-light.gif' -import PlayingDark from '../icons/playing-dark.gif' - -const useStyles = makeStyles({ - playingIcon: { - width: '20px', - height: '20px', - verticalAlign: 'text-top', - marginTop: '-2px', - paddingRight: '3px', - }, -}) - -const SongTitleField = ({ showTrackNumbers, ...props }) => { - const theme = useTheme() - const classes = useStyles() - const { record } = props - const currentTrack = useSelector((state) => get(state, 'queue.current', {})) - const currentId = currentTrack.trackId - const paused = currentTrack.paused - const isCurrent = - currentId && - !paused && - (currentId === record.id || currentId === record.mediaFileId) - - const trackName = (r) => { - const name = r.title - if (r.trackNumber && showTrackNumbers) { - return r.trackNumber.toString().padStart(2, '0') + ' ' + name - } - return name - } - - return ( - <> - {isCurrent && ( - playing - )} - - - ) -} - -SongTitleField.propTypes = { - record: PropTypes.object, - showTrackNumbers: PropTypes.bool, -} - -export default SongTitleField diff --git a/ui/src/common/index.js b/ui/src/common/index.js index 0ccf8336e..ae720cc86 100644 --- a/ui/src/common/index.js +++ b/ui/src/common/index.js @@ -12,7 +12,6 @@ import DocLink from './DocLink' import List from './List' import { SongDatagrid, SongDatagridRow } from './SongDatagrid' import SongContextMenu from './SongContextMenu' -import SongTitleField from './SongTitleField' import QuickFilter from './QuickFilter' import useAlbumsPerPage from './useAlbumsPerPage' @@ -29,7 +28,6 @@ export { SongDetails, SongDatagrid, SongDatagridRow, - SongTitleField, DocLink, formatRange, ArtistLinkField, diff --git a/ui/src/icons/playing-dark.gif b/ui/src/icons/playing-dark.gif deleted file mode 100644 index 9413d54af..000000000 Binary files a/ui/src/icons/playing-dark.gif and /dev/null differ diff --git a/ui/src/icons/playing-light.gif b/ui/src/icons/playing-light.gif deleted file mode 100644 index 40bb3c428..000000000 Binary files a/ui/src/icons/playing-light.gif and /dev/null differ diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js index 6f4a57ceb..4a03c35d3 100644 --- a/ui/src/playlist/PlaylistSongs.js +++ b/ui/src/playlist/PlaylistSongs.js @@ -19,7 +19,6 @@ import { SongDetails, SongContextMenu, SongDatagrid, - SongTitleField, } from '../common' import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' import { AlbumLinkField } from '../song/AlbumLinkField' @@ -161,7 +160,7 @@ const PlaylistSongs = (props) => { contextAlwaysVisible={!isDesktop} > {isDesktop && } - + {isDesktop && } {isDesktop && } { rowClick={handleRowClick} contextAlwaysVisible={!isDesktop} > - + {isDesktop && } {isDesktop && }