Merge pull request #688 from ArtificialSloth/feat/subtitles-track-label

feat: Add label to subtitle tracks

Author: tymmesyde

src/routes/Player/SubtitlesMenu/SubtitlesMenu.js

@@ -204,7 +204,15 @@ 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-label']}>
+                                        {
+                                            typeof track.label === 'string' && !track.label.startsWith('http') ?
+                                                track.label
+                                                :
+                                                track.lang
+                                        }
+                                        <div className={styles['variant-origin']}>{t(track.origin)}</div>
+                                    </div>
                                     {
                                         props.selectedSubtitlesTrackId === track.id || props.selectedExtraSubtitlesTrackId === track.id ?
                                             <div className={styles['icon']} />

src/routes/Player/SubtitlesMenu/styles.less

@@ -47,6 +47,15 @@
                     color: var(--primary-foreground-color);
                 }
 
+                .language-label, .variant-label, .variant-origin {
+                    text-wrap: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .variant-label .variant-origin {
+                    color: var(--color-placeholder-text);
+                }
+
                 .icon {
                     flex: none;
                     width: 0.5rem;