Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-31 07:38:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Player): fix markup hierarchy, remove gap and declare flex props in style

Browse source
This commit is contained in:
Tim 2021-07-15 10:46:50 +02:00
parent 89832951ec
commit 3ce8a57bc3
2 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/routes/Player/Player.js
View file

@ -428,29 +428,32 @@ const Player = ({ urlParams, queryParams }) => {
videoState.buffering ?
<BufferingLoader className={styles['layer']} />
:
error !== null ?
<div className={classnames(styles['layer'], styles['error-layer'])}>
<div className={styles['error-label']}>{error.message}</div>
{
playlist ?
<div className={styles['error-details']}>
<Button className={styles['error-details-button']} title={'Download MU3 Playlist'} href={playlist.file} download={playlist.name}>
<Icon className={styles['icon']} icon={'ic_downloads'} />
<div className={styles['label']}>Download Playlist</div>
</Button>
</div>
:
null
}
</div>
:
null
null
}
<div
className={styles['layer']}
onClick={onVideoClick}
onDoubleClick={onVideoDoubleClick}
/>
{
error !== null ?
<div className={classnames(styles['layer'], styles['error-layer'])}>
<div className={styles['error-label']}>{error.message}</div>
{
playlist ?
<div className={styles['error-details']}>
<Button className={styles['error-details-button']} title={'Download MU3 Playlist'} href={playlist.file} download={playlist.name}>
<Icon className={styles['icon']} icon={'ic_downloads'} />
<div className={styles['label']}>Download Playlist</div>
</Button>
</div>
:
null
}
</div>
:
null
}
{
subtitlesMenuOpen || infoMenuOpen ?
<div className={styles['layer']} />

6
src/routes/Player/styles.less
View file

@ -38,7 +38,6 @@ html:not(.active-slider-within) {
bottom: 0;
&.error-layer {
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
@ -55,8 +54,7 @@ html:not(.active-slider-within) {
}
.error-details {
display: flex;
gap: 0.8rem;
flex: 0 1 auto;
font-size: 1.5rem;
margin-top: 1.5rem;
color: @color-surface-light5-90;
@ -66,7 +64,6 @@ html:not(.active-slider-within) {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
height: 3.5rem;
padding: 0.5rem 1rem;
font-weight: 500;
@ -80,6 +77,7 @@ html:not(.active-slider-within) {
.icon {
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
fill: @color-surface-light5-90;
}
}