From 3bc72ce88138a5bf167c20c5db6575391cc959c6 Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Wed, 16 Oct 2024 13:56:05 +0000
Subject: [PATCH] feat(ui): Improve player ui when player is stopping

---
 src/client/components/player/Player.tsx          | 6 +++---
 src/client/components/player/PlayerTimestamp.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/components/player/Player.tsx b/src/client/components/player/Player.tsx
index 2321f6bc..c2c858f5 100644
--- a/src/client/components/player/Player.tsx
+++ b/src/client/components/player/Player.tsx
@@ -81,12 +81,12 @@ const Player = (props: PlayerProps) => {
                         <FontAwesomeIcon color="black" icon={viewMode === 'playlist' ? faTimes : faBars}/>
                     </button>
                 <section className="player__body">
-                    <p className="title">{track}</p>
-                    <p className="subtitle">{artists.join(' / ')}</p>
+                    <p className="title">{calculated !== 'stopped' ? track : '-'}</p>
+                    <p className="subtitle">{calculated !== 'stopped' ? artists.join(' / ') : '-'}</p>
                     <PlayerTimestamp duration={duration} current={data.position || 0} />
                     <div className="flex">
                         <p className="stats flex-1 text-left">Status: {capitalize(calculated)}</p>
-                        <p className="stats flex-1 text-right">Listened: {listenedDuration.toFixed(0)}s{durPer}</p>
+                        <p className="stats flex-1 text-right">Listened: {calculated !== 'stopped' ? `${listenedDuration.toFixed(0)}s` : '-'}{durPer}</p>
                     </div>
                 </section>
                     <PlayerInfo data={data} isVisible={viewMode === 'playlist'} />
diff --git a/src/client/components/player/PlayerTimestamp.tsx b/src/client/components/player/PlayerTimestamp.tsx
index c353f6aa..ec229cfc 100644
--- a/src/client/components/player/PlayerTimestamp.tsx
+++ b/src/client/components/player/PlayerTimestamp.tsx
@@ -23,7 +23,7 @@ const Timestamp = (props: TimestampProps) => {
                 {convertTime(Math.floor(props.current))}
             </div>
             <div className="timestamp__progress">
-                <div style={{ width: Math.floor((props.current / props.duration) * 100) + "%" }}></div>
+                <div style={{ width: (props.current === 0 && props.duration === 0 ? 0 : Math.floor((props.current / props.duration) * 100)) + "%" }}></div>
             </div>
             <div className="timestamp__total">
                 {convertTime(Math.floor(props.duration) - Math.floor(props.current))}