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 && (
-
- )}
-
- >
- )
-}
-
-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 && }