From c20fcf15323238c82c80d640794c27302647efe4 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 27 Dec 2024 11:52:13 +0100
Subject: [PATCH 1/2] feat(Player): add label to audio tracks

---
 src/routes/Player/AudioMenu/AudioMenu.less | 37 ++++++++++++++++------
 src/routes/Player/AudioMenu/AudioMenu.tsx  |  9 ++++--
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less
index 1887a1e7c..46e671f44 100644
--- a/src/routes/Player/AudioMenu/AudioMenu.less
+++ b/src/routes/Player/AudioMenu/AudioMenu.less
@@ -20,30 +20,48 @@
         .list {
             flex: 1;
             align-self: stretch;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
             overflow-y: auto;
             padding: 0 1rem;
-            padding-bottom: 0.5rem;
+            padding-bottom: 1rem;
 
             .option {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                height: 3.5rem;
+                gap: 1rem;
+                height: 4rem;
                 padding: 0 1.5rem;
-                margin-bottom: 0.5rem;
                 border-radius: var(--border-radius);
 
                 &:global(.selected), &:hover {
                     background-color: var(--overlay-color);
                 }
 
-                .label {
+                .info {
                     flex: 1;
-                    max-height: 2.4em;
-                    font-size: 1.1rem;
-                    color: var(--primary-foreground-color);
-                    text-wrap: nowrap;
-                    text-overflow: ellipsis;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.25rem;
+
+                    .lang, .label {
+                        flex: auto;
+                        text-wrap: nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    .lang {
+                        font-size: 1.1rem;
+                        line-height: 1.5rem;
+                        color: var(--primary-foreground-color);
+                    }
+
+                    .label {
+                        font-size: 0.9rem;
+                        color: var(--color-placeholder-text);
+                    }
                 }
 
                 .icon {
@@ -51,7 +69,6 @@
                     width: 0.5rem;
                     height: 0.5rem;
                     border-radius: 100%;
-                    margin-left: 1rem;
                     background-color: var(--secondary-accent-color);
                 }
             }
diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx
index 93ffa57b1..92f9c3c01 100644
--- a/src/routes/Player/AudioMenu/AudioMenu.tsx
+++ b/src/routes/Player/AudioMenu/AudioMenu.tsx
@@ -40,8 +40,13 @@ const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackS
                                 data-id={id}
                                 onClick={onAudioTrackClick}
                             >
-                                <div className={styles['label']}>
-                                    { languages.label(lang) }
+                                <div className={styles['info']}>
+                                    <div className={styles['lang']}>
+                                        {languages.label(lang)}
+                                    </div>
+                                    <div className={styles['label']}>
+                                        {label}
+                                    </div>
                                 </div>
                                 {
                                     selectedAudioTrackId === id ?

From ac54bd4ac9df493b4638c6c4f3c6c9be36b7facd Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 27 Dec 2024 13:10:04 +0100
Subject: [PATCH 2/2] fix(Player): audio track layout issue

---
 src/routes/Player/AudioMenu/AudioMenu.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less
index 46e671f44..344ec13e7 100644
--- a/src/routes/Player/AudioMenu/AudioMenu.less
+++ b/src/routes/Player/AudioMenu/AudioMenu.less
@@ -28,6 +28,7 @@
             padding-bottom: 1rem;
 
             .option {
+                flex: none;
                 display: flex;
                 flex-direction: row;
                 align-items: center;