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

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

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

@ -20,38 +20,56 @@
.list { .list {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow-y: auto; overflow-y: auto;
padding: 0 1rem; padding: 0 1rem;
padding-bottom: 0.5rem; padding-bottom: 1rem;
.option { .option {
flex: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 3.5rem; gap: 1rem;
height: 4rem;
padding: 0 1.5rem; padding: 0 1.5rem;
margin-bottom: 0.5rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
&:global(.selected), &:hover { &:global(.selected), &:hover {
background-color: var(--overlay-color); background-color: var(--overlay-color);
} }
.label { .info {
flex: 1; flex: 1;
max-height: 2.4em; display: flex;
font-size: 1.1rem; flex-direction: column;
color: var(--primary-foreground-color); gap: 0.25rem;
.lang, .label {
flex: auto;
text-wrap: nowrap; text-wrap: nowrap;
text-overflow: ellipsis; 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 { .icon {
flex: none; flex: none;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
border-radius: 100%; border-radius: 100%;
margin-left: 1rem;
background-color: var(--secondary-accent-color); background-color: var(--secondary-accent-color);
} }
} }

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

@ -40,9 +40,14 @@ const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackS
data-id={id} data-id={id}
onClick={onAudioTrackClick} onClick={onAudioTrackClick}
> >
<div className={styles['label']}> <div className={styles['info']}>
<div className={styles['lang']}>
{languages.label(lang)} {languages.label(lang)}
</div> </div>
<div className={styles['label']}>
{label}
</div>
</div>
{ {
selectedAudioTrackId === id ? selectedAudioTrackId === id ?
<div className={styles['icon']} /> <div className={styles['icon']} />