Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +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 ? videoState.buffering ?
<BufferingLoader className={styles['layer']} /> <BufferingLoader className={styles['layer']} />
: :
error !== null ? 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
} }
<div <div
className={styles['layer']} className={styles['layer']}
onClick={onVideoClick} onClick={onVideoClick}
onDoubleClick={onVideoDoubleClick} 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 ? subtitlesMenuOpen || infoMenuOpen ?
<div className={styles['layer']} /> <div className={styles['layer']} />

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

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