From be2afb94ae3df72d4c3de767c75443a4bda5dd70 Mon Sep 17 00:00:00 2001 From: Deluan Date: Sat, 13 Jun 2020 13:44:01 -0400 Subject: [PATCH] Show indicator on current playing song. Fixes #128 --- ui/src/album/AlbumSongs.js | 27 +++++--------- ui/src/audioplayer/Player.js | 15 ++++---- ui/src/audioplayer/queue.js | 25 +++++++++++-- ui/src/common/SongTitleField.js | 58 +++++++++++++++++++++++++++++++ ui/src/common/index.js | 2 ++ ui/src/icons/playing.gif | Bin 0 -> 2349 bytes ui/src/playlist/PlaylistSongs.js | 3 +- ui/src/song/SongList.js | 3 +- 8 files changed, 102 insertions(+), 31 deletions(-) create mode 100644 ui/src/common/SongTitleField.js create mode 100644 ui/src/icons/playing.gif diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js index 1ff5418ab..7b64a4fe1 100644 --- a/ui/src/album/AlbumSongs.js +++ b/ui/src/album/AlbumSongs.js @@ -2,7 +2,6 @@ import React from 'react' import { BulkActionsToolbar, DatagridLoading, - FunctionField, ListToolbar, TextField, useListController, @@ -15,9 +14,10 @@ import StarBorderIcon from '@material-ui/icons/StarBorder' import { playTracks } from '../audioplayer' import { DurationField, - SongDetails, - SongDatagrid, SongContextMenu, + SongDatagrid, + SongDetails, + SongTitleField, } from '../common' import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' @@ -62,14 +62,6 @@ 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) @@ -132,14 +124,11 @@ const AlbumSongs = (props) => { sortable={false} /> )} - {isDesktop && } - {!isDesktop && ( - - )} + {isDesktop && } { } const OnAudioProgress = (info) => { - const progress = (info.currentTime / info.duration) * 100 - if (isNaN(info.duration) || progress < 90) { + if (info.ended) { + document.title = 'Navidrome' + } + dispatch(progress(info)) + const pos = (info.currentTime / info.duration) * 100 + if (isNaN(info.duration) || pos < 90) { return } const item = queue.queue.find((item) => item.trackId === info.trackId) @@ -120,10 +124,6 @@ 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 e5f3d74dd..27f245b5c 100644 --- a/ui/src/audioplayer/queue.js +++ b/ui/src/audioplayer/queue.js @@ -6,6 +6,7 @@ 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 @@ -88,13 +89,30 @@ const scrobble = (id, submit) => ({ submit, }) +const progress = (audioInfo) => ({ + type: PLAYER_PROGRESS, + data: audioInfo, +}) + const playQueueReducer = ( - previousState = { queue: [], clear: true, playing: false }, + previousState = { queue: [], clear: true, playing: false, current: {} }, payload ) => { - let queue + let queue, current 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) => { @@ -109,10 +127,12 @@ 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) => { @@ -156,6 +176,7 @@ export { playTracks, syncQueue, scrobble, + progress, shuffleTracks, playQueueReducer, } diff --git a/ui/src/common/SongTitleField.js b/ui/src/common/SongTitleField.js new file mode 100644 index 000000000..173a02078 --- /dev/null +++ b/ui/src/common/SongTitleField.js @@ -0,0 +1,58 @@ +import { makeStyles } from '@material-ui/core/styles' +import React from 'react' +import { useSelector } from 'react-redux' +import get from 'lodash.get' +import playing from '../icons/playing.gif' +import { FunctionField } from 'react-admin' +import PropTypes from 'prop-types' + +const useStyles = makeStyles({ + playingIcon: { + width: '20px', + height: '20px', + verticalAlign: 'text-top', + marginTop: '-2px', + paddingRight: '3px', + }, +}) + +const SongTitleField = ({ showTrackNumbers, ...props }) => { + 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 ae720cc86..0ccf8336e 100644 --- a/ui/src/common/index.js +++ b/ui/src/common/index.js @@ -12,6 +12,7 @@ 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' @@ -28,6 +29,7 @@ export { SongDetails, SongDatagrid, SongDatagridRow, + SongTitleField, DocLink, formatRange, ArtistLinkField, diff --git a/ui/src/icons/playing.gif b/ui/src/icons/playing.gif new file mode 100644 index 0000000000000000000000000000000000000000..40bb3c428effcaec4d98a94f5c8e6731c590bdb1 GIT binary patch literal 2349 zcmb`J`#;lr9LJ|{Ds^;`=9Wvjji#;8lE--xrLk$aL+z%ivbs+SQ7o@->&l=FTtAuHVcPo~8A)sab z@aRD_z6u3Ruv!BMeFg010Dv3-{5Jsdt{5!6{6gKcKxQWlJnT6g+ZTL)x8;U|ibO<8 ze1FD0m7X^q9=)e37>XY%Un8q>*8TW=uDW_0iPFv%bpuq|GmC_4*n|6Ab|y^_@+M3u zJKmOOfLiy5590p*@JV#@raeMm1h~)R&TqvL_=9~v2QSu^4tnHRKW(R{;(SXl)9p&0 z^Gb=25O)6Klj?YF?fHj70lIQePrfKfI7+u%^oB+^7Q}*Fk;(SzNm4x+vTLa(8k}{1 zygHx9W+2Cf-5eJnyqGXrkjs^DaTw9Vy`+fsc-D-uK%89eTzhBqqnsI_8jp%3M@5>W zV*Rs<#IVQZapjyQ=500&S)$c?Y)fikvuI2)n&75l zJ8{NRad7eoBnaCm%<%B;UsdG+acxC>3r&Hw4&$}bdwMjQcms}+O}m)ZT3t4nR2sr? zjF??^oasIPAki;BeJhEAwi0qn$T)6a>D7X|^mt#@a(LABF}MJ~)XaJ07p89GoocT2 z6%agO5xux(FuHp-qgJzX2$d3qauE)P2`1P7C%$V>Vwws(;9?um#mn(e@@?83Yz!;R^4bJV{Q+cRm;a2}! zRqD{0d}m*qjbM`MT6cc_cK9-SF~QC%g%b6`sspqjyQd*V4)1+w8!u@{kxmLKD1#9J zp;r3F-OLjQTK=rCHA-G2Vkiz&2uxg7moLMT-yFX(0%Vtl@U^Hrz`+LZBRl+=cq>Os z;+@0UnADR|^Z_C5hq-D?Z(m0}LtF9$BF8C~IHy>MNYb{po1!kJ*t9EDn*~fCY+&w! z%-N(jT3Reb^=9chs7<~+S@y`w3bs!}7AfTb?xMcTjy9aWTld(VxOYyZ*_ zBOZBfosLD4vfJ6Q3L%v=>jU-1D-R@Ofk|$j5gs8W$q98DPn!JQ8FTxltvb^e{R|}D z*#^oGn#{`?k>!~Mib|k3!(wxF+kuamyVhk$TM$oSxpABSo?!dd$nOQ^;KWc(9wYQG z`7>e6Cm0TNJ98r{;Da2-$2>F~5*QA_UVgG|C+ zftvP|Eygw`wD6?OHOlnM7;&6!tY#0N9FoKOsHSf)atGeP;K-~|{TUtQDUo3{AJSpx z_L<0H*^WM`;H!^NUGK(^<~A1k(*#k8rqlz24HqefzPEU0;O1vwG%To8^U!kF2|%r66*}8hW|L;{>Y+T*ffr z37BiY#V;*&kwZH4CpxE6W+;)2=wF{qX)>cXM$J|4*~an>i~}$EnL*aI2K5 zRRv*6F|~PY&JK;rr>Q5_H{j|=AY!{#Q(JlJ!QKB#-z!MC9#p#`8pY>%j(jKM-1#5x zTo~;?pN`%WJOFOBzMl+x6Q{N*kn`!A%Kll*3)zTrG(El)L4Ie3^@*Rx6MI&bv_`H1 nr}hRIj$8JHfz!H_ZB)r%+kUE6I}y<^YR1zrZZiMlZ-mZ2g`vz5 literal 0 HcmV?d00001 diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js index 4a03c35d3..6f4a57ceb 100644 --- a/ui/src/playlist/PlaylistSongs.js +++ b/ui/src/playlist/PlaylistSongs.js @@ -19,6 +19,7 @@ import { SongDetails, SongContextMenu, SongDatagrid, + SongTitleField, } from '../common' import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' import { AlbumLinkField } from '../song/AlbumLinkField' @@ -160,7 +161,7 @@ const PlaylistSongs = (props) => { contextAlwaysVisible={!isDesktop} > {isDesktop && } - + {isDesktop && } {isDesktop && } { rowClick={handleRowClick} contextAlwaysVisible={!isDesktop} > - + {isDesktop && } {isDesktop && }