feat(ui): Improve player ui when player is stopping

FoxxMD · Oct 16, 2024 · 3bc72ce · 3bc72ce
1 parent 3142101
commit 3bc72ce
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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))}