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

refactor(MetaDetails): update style of video and stream

Browse source
This commit is contained in:
Tim 2023-11-02 15:31:40 +01:00
parent 4e92992e58
commit 6bc3b1cee9
4 changed files with 34 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/routes/MetaDetails/StreamsList/Stream/Stream.js
View file

@ -97,6 +97,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
progress !== null && !isNaN(progress) && progress > 0 ? progress !== null && !isNaN(progress) && progress > 0 ?
<div className={styles['progress-bar-container']}> <div className={styles['progress-bar-container']}>
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} /> <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
<div className={styles['progress-bar-background']} />
</div> </div>
: :
null null

15
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -58,13 +58,26 @@
.progress-bar-container { .progress-bar-container {
flex: 0 0 100%; flex: 0 0 100%;
position: relative;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--overlay-color);
.progress-bar { .progress-bar {
z-index: 1;
position: relative;
height: 0.4rem; height: 0.4rem;
background-color: var(--primary-accent-color); background-color: var(--primary-accent-color);
} }
.progress-bar-background {
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-foreground-color);
opacity: 0.2;
}
} }
} }

1
src/routes/MetaDetails/VideosList/Video/Video.js
View file

@ -89,6 +89,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
progress !== null && !isNaN(progress) && progress > 0 ? progress !== null && !isNaN(progress) && progress > 0 ?
<div className={styles['progress-bar-container']}> <div className={styles['progress-bar-container']}>
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} /> <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
<div className={styles['progress-bar-background']} />
</div> </div>
: :
null null

22
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -29,7 +29,7 @@
.thumbnail-container { .thumbnail-container {
flex: none; flex: none;
position: relative; position: relative;
border-radius: var(--border-radius); border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
.thumbnail { .thumbnail {
@ -55,14 +55,28 @@
.progress-bar-container { .progress-bar-container {
position: absolute; position: absolute;
bottom: 0; bottom: 0.5rem;
width: 100%; left: 0.5rem;
background-color: var(--overlay-color); right: 0.5rem;
border-radius: var(--border-radius);
.progress-bar { .progress-bar {
z-index: 1;
position: relative;
height: 0.4rem; height: 0.4rem;
background-color: var(--primary-accent-color); background-color: var(--primary-accent-color);
} }
.progress-bar-background {
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-foreground-color);
opacity: 0.2;
}
} }
} }