Swap origin and label, add fallback for url check, translate origin, and handle text overflow for long labels

This commit is contained in:
ArtificialSloth 2024-11-20 05:26:48 -05:00
parent faca365925
commit ffdb2fd5d4
2 changed files with 10 additions and 9 deletions

View file

@ -204,14 +204,13 @@ 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-origin']}>
{track.origin}
{
typeof track.label === 'string' && !track.label.startsWith('http') ?
<div className={styles['variant-label']}>{track.label}</div>
:
null
<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 ?

View file

@ -40,14 +40,16 @@
background-color: var(--overlay-color);
}
.language-label, .variant-origin {
.language-label, .variant-label {
flex: 1;
max-height: 2.4em;
font-size: 1.1rem;
text-wrap: nowrap;
text-overflow: ellipsis;
color: var(--primary-foreground-color);
}
.variant-origin .variant-label {
.variant-label .variant-origin {
color: var(--color-placeholder-text);
}