From 42ca0550ae1b9c6d4013ffe96d2f7fed69968074 Mon Sep 17 00:00:00 2001
From: ArtificialSloth <ArtificialSloth+git@gmail.com>
Date: Sun, 22 Sep 2024 00:17:06 -0400
Subject: [PATCH] feat/subtitles-track-label

---
 src/routes/Player/SubtitlesMenu/SubtitlesMenu.js | 5 ++++-
 src/routes/Player/SubtitlesMenu/styles.less      | 6 +++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index 0130c58e2..23b44eb35 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -204,7 +204,10 @@ const SubtitlesMenu = React.memo((props) => {
                         <div className={styles['variants-list']}>
                             {subtitlesTracksForLanguage.map((track, index) => (
                                 <Button key={index} title={track.label} className={classnames(styles['variant-option'], { 'selected': props.selectedSubtitlesTrackId === track.id || props.selectedExtraSubtitlesTrackId === track.id })} data-id={track.id} data-origin={track.origin} data-embedded={track.embedded} onClick={subtitlesTrackOnClick}>
-                                    <div className={styles['variant-label']}>{track.origin}</div>
+                                    <div className={styles['variant-origin']}>
+                                        {track.origin}
+                                        <div className={styles['variant-label']}>{track.label}</div>
+                                    </div>
                                     {
                                         props.selectedSubtitlesTrackId === track.id || props.selectedExtraSubtitlesTrackId === track.id ?
                                             <div className={styles['icon']} />
diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
index 3f397b068..c9034286c 100644
--- a/src/routes/Player/SubtitlesMenu/styles.less
+++ b/src/routes/Player/SubtitlesMenu/styles.less
@@ -40,13 +40,17 @@
                     background-color: var(--overlay-color);
                 }
 
-                .language-label, .variant-label {
+                .language-label, .variant-origin {
                     flex: 1;
                     max-height: 2.4em;
                     font-size: 1.1rem;
                     color: var(--primary-foreground-color);
                 }
 
+                .variant-origin .variant-label {
+                    color: var(--color-placeholder-text);
+                }
+
                 .icon {
                     flex: none;
                     width: 0.5rem;