diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 2f365806b..b22449832 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
@@ -23,13 +23,16 @@ const Player = () => {
const theme = themes[currentTheme] || themes.DarkTheme
const playerTheme = (theme.player && theme.player.theme) || 'dark'
- const audioTitle = (audioInfo) => (
-
- {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
-
+ const audioTitle = useCallback(
+ (audioInfo) => (
+
+ {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
+
+ ),
+ [classes.audioTitle]
)
const defaultOptions = {
@@ -80,56 +83,70 @@ const Player = () => {
},
}
- const addQueueToOptions = (queue) => {
+ const dataProvider = useDataProvider()
+ const dispatch = useDispatch()
+ const queue = useSelector((state) => state.queue)
+ const { authenticated } = useAuthState()
+
+ const options = useMemo(() => {
return {
...defaultOptions,
clearPriorAudioLists: queue.clear,
audioLists: queue.queue.map((item) => item),
}
- }
+ }, [queue.clear, queue.queue, defaultOptions])
- const dataProvider = useDataProvider()
- const dispatch = useDispatch()
- const queue = useSelector((state) => state.queue)
- const options = addQueueToOptions(queue)
- const { authenticated } = useAuthState()
+ const OnAudioListsChange = useCallback(
+ (currentPlayIndex, audioLists) => {
+ dispatch(syncQueue(currentPlayIndex, audioLists))
+ },
+ [dispatch]
+ )
- const OnAudioListsChange = (currentPlayIndex, audioLists) => {
- dispatch(syncQueue(currentPlayIndex, audioLists))
- }
+ const OnAudioProgress = useCallback(
+ (info) => {
+ if (info.ended) {
+ document.title = 'Navidrome'
+ }
+ const progress = (info.currentTime / info.duration) * 100
+ if (isNaN(info.duration) || progress < 90) {
+ return
+ }
+ const item = queue.queue.find((item) => item.trackId === info.trackId)
+ if (item && !item.scrobbled) {
+ dispatch(scrobble(info.trackId, true))
+ subsonic.scrobble(info.trackId, true)
+ }
+ },
+ [dispatch, queue.queue]
+ )
- const OnAudioProgress = (info) => {
- if (info.ended) {
- document.title = 'Navidrome'
- }
- const progress = (info.currentTime / info.duration) * 100
- if (isNaN(info.duration) || progress < 90) {
- return
- }
- const item = queue.queue.find((item) => item.trackId === info.trackId)
- if (item && !item.scrobbled) {
- dispatch(scrobble(info.trackId, true))
- subsonic.scrobble(info.trackId, true)
- }
- }
+ const OnAudioPlay = useCallback(
+ (info) => {
+ dispatch(currentPlaying(info))
+ if (info.duration) {
+ document.title = `${info.name} - ${info.singer} - Navidrome`
+ dispatch(scrobble(info.trackId, false))
+ subsonic.scrobble(info.trackId, false)
+ }
+ },
+ [dispatch]
+ )
- const OnAudioPlay = (info) => {
- dispatch(currentPlaying(info))
- if (info.duration) {
- document.title = `${info.name} - ${info.singer} - Navidrome`
- dispatch(scrobble(info.trackId, false))
- subsonic.scrobble(info.trackId, false)
- }
- }
+ const onAudioPause = useCallback(
+ (info) => {
+ dispatch(currentPlaying(info))
+ },
+ [dispatch]
+ )
- const onAudioPause = (info) => {
- dispatch(currentPlaying(info))
- }
-
- const onAudioEnded = (currentPlayId, audioLists, info) => {
- dispatch(currentPlaying(info))
- dataProvider.getOne('keepalive', { id: info.trackId })
- }
+ const onAudioEnded = useCallback(
+ (currentPlayId, audioLists, info) => {
+ dispatch(currentPlaying(info))
+ dataProvider.getOne('keepalive', { id: info.trackId })
+ },
+ [dispatch, dataProvider]
+ )
if (authenticated && options.audioLists.length > 0) {
return (