From 72b2e756f7802ec0bee76c627e189e607273394f Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Sat, 13 Jun 2020 16:39:57 -0400
Subject: [PATCH] Revert "Show indicator on current playing song. Fixes #128"

This implementation causes performance issues
---
 ui/src/album/AlbumSongs.js       |  27 +++++++++----
 ui/src/audioplayer/Player.js     |  15 +++----
 ui/src/audioplayer/queue.js      |  25 +-----------
 ui/src/common/SongTitleField.js  |  65 -------------------------------
 ui/src/common/index.js           |   2 -
 ui/src/icons/playing-dark.gif    | Bin 2349 -> 0 bytes
 ui/src/icons/playing-light.gif   | Bin 2349 -> 0 bytes
 ui/src/playlist/PlaylistSongs.js |   3 +-
 ui/src/song/SongList.js          |   3 +-
 9 files changed, 31 insertions(+), 109 deletions(-)
 delete mode 100644 ui/src/common/SongTitleField.js
 delete mode 100644 ui/src/icons/playing-dark.gif
 delete mode 100644 ui/src/icons/playing-light.gif

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}
                 />
               )}
-              <SongTitleField
-                source="title"
-                sortable={false}
-                showTrackNumbers={!isDesktop}
-              />
+              {isDesktop && <TextField source="title" sortable={false} />}
+              {!isDesktop && (
+                <FunctionField
+                  source="title"
+                  render={trackName}
+                  sortable={false}
+                />
+              )}
               {isDesktop && <TextField source="artist" sortable={false} />}
               <DurationField source="duration" sortable={false} />
               <SongContextMenu
diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 164562f26..53d38dcf7 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -5,7 +5,7 @@ import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
 import subsonic from '../subsonic'
-import { scrobble, syncQueue, progress } from './queue'
+import { scrobble, syncQueue } from './queue'
 import themes from '../themes'
 import { makeStyles } from '@material-ui/core/styles'
 
@@ -100,12 +100,8 @@ const Player = () => {
   }
 
   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 (
       <ReactJkMusicPlayer
@@ -131,6 +131,7 @@ const Player = () => {
         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 && (
-        <img
-          src={theme.palette.type === 'light' ? PlayingLight : PlayingDark}
-          className={classes.playingIcon}
-          alt="playing"
-        />
-      )}
-      <FunctionField
-        {...props}
-        source="title"
-        render={trackName}
-        sortable={false}
-      />
-    </>
-  )
-}
-
-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 9413d54af30faf16de0fdc6061cf74c349218830..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2349
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

diff --git a/ui/src/icons/playing-light.gif b/ui/src/icons/playing-light.gif
deleted file mode 100644
index 40bb3c428effcaec4d98a94f5c8e6731c590bdb1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2349
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

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 && <TextField source="id" label={'#'} />}
-                <SongTitleField source="title" showTrackNumbers={false} />
+                <TextField source="title" />
                 {isDesktop && <AlbumLinkField source="album" />}
                 {isDesktop && <TextField source="artist" />}
                 <DurationField
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index a9d64642d..1cc5495f2 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -18,7 +18,6 @@ import {
   SongDatagrid,
   SongDetails,
   QuickFilter,
-  SongTitleField,
 } from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
@@ -84,7 +83,7 @@ const SongList = (props) => {
             rowClick={handleRowClick}
             contextAlwaysVisible={!isDesktop}
           >
-            <SongTitleField source="title" showTrackNumbers={false} />
+            <TextField source="title" />
             {isDesktop && <AlbumLinkField source="album" />}
             <TextField source="artist" />
             {isDesktop && <NumberField source="trackNumber" />}