From 6e62448b88b708ec4a1ddbc508b19b7536cc7add Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Wed, 20 Sep 2023 23:07:40 +0000
Subject: [PATCH] fix other places of duration display (and other minor fixes)
 (#249)

* fix other places of duration display

* add back comma

* add max-width for image
---
 src/main/features/linux/mpris.ts                               | 2 +-
 src/remote/components/remote-container.tsx                     | 2 +-
 .../features/player/components/full-screen-player-image.tsx    | 3 ++-
 .../features/player/components/full-screen-player-queue.tsx    | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/main/features/linux/mpris.ts b/src/main/features/linux/mpris.ts
index 16c63c5f..bc21595c 100644
--- a/src/main/features/linux/mpris.ts
+++ b/src/main/features/linux/mpris.ts
@@ -145,7 +145,7 @@ ipcMain.on('update-song', (_event, args: SongUpdate) => {
 
         mprisPlayer.metadata = {
             'mpris:artUrl': upsizedImageUrl,
-            'mpris:length': song.duration ? Math.round((song.duration || 0) * 1e6) : null,
+            'mpris:length': song.duration ? Math.round((song.duration || 0) * 1e3) : null,
             'mpris:trackid': song.id
                 ? mprisPlayer.objectPath(`track/${song.id?.replace('-', '')}`)
                 : '',
diff --git a/src/remote/components/remote-container.tsx b/src/remote/components/remote-container.tsx
index b09b29d2..24a0154a 100644
--- a/src/remote/components/remote-container.tsx
+++ b/src/remote/components/remote-container.tsx
@@ -45,7 +45,7 @@ export const RemoteContainer = () => {
                         <Title order={2}>Artist: {song.artistName}</Title>
                     </Group>
                     <Group position="apart">
-                        <Title order={3}>Duration: {formatDuration(song.duration * 1000)}</Title>
+                        <Title order={3}>Duration: {formatDuration(song.duration)}</Title>
                         {song.releaseDate && (
                             <Title order={3}>
                                 Released: {new Date(song.releaseDate).toLocaleDateString()}
diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
index 1d723ce6..870c22a2 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -24,6 +24,7 @@ const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
     object-position: 50% 100%;
     filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
     border-radius: 5px;
+    max-width: 100%;
 `;
 
 const ImageContainer = styled(motion.div)`
@@ -42,7 +43,7 @@ interface TransparentMetadataContainer {
 
 const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
     padding: 1rem;
-    background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
+    background: rgb(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     border-radius: 5px;
 
     h1 {
diff --git a/src/renderer/features/player/components/full-screen-player-queue.tsx b/src/renderer/features/player/components/full-screen-player-queue.tsx
index f956547f..e856cd63 100644
--- a/src/renderer/features/player/components/full-screen-player-queue.tsx
+++ b/src/renderer/features/player/components/full-screen-player-queue.tsx
@@ -50,7 +50,7 @@ const GridContainer = styled.div<TransparendGridContainerProps>`
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-columns: 1fr;
     padding: 1rem;
-    background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
+    background: rgb(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     border-radius: 5px;
 `;