Merge pull request #775 from Stremio/feat/player-audio-tracks-label

Player: add label to audio tracks
Stremio · Dec 27, 2024 · a8a8d65 · a8a8d65
2 parents e82632b + ac54bd4
commit a8a8d65
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less
@@ -20,38 +20,56 @@
         .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 {
+                flex: none;
                 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 {
                     flex: none;
                     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
@@ -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 ?