Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-11 10:11:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Player: add label to audio tracks
This commit is contained in:
Tim 2024-12-27 13:15:59 +01:00 committed by GitHub
commit a8a8d6552d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/routes/Player/AudioMenu/AudioMenu.less
View file

@ -20,30 +20,49 @@
.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 {
@ -51,7 +70,6 @@
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
margin-left: 1rem;
background-color: var(--secondary-accent-color);
}
}

9
src/routes/Player/AudioMenu/AudioMenu.tsx
View file

@ -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 ?