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

Merge pull request #500 from Stremio/refactor-meta-details-stream-videos

Browse source 
Update style of video and stream
This commit is contained in:
Tim 2023-11-03 12:27:08 +01:00 committed by GitHub
commit 4845df68cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 ?
<div className={styles['progress-bar-container']}>
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
<div className={styles['progress-bar-background']} />
</div>
:
null

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

@ -58,13 +58,26 @@
.progress-bar-container {
flex: 0 0 100%;
position: relative;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
.progress-bar {
z-index: 1;
position: relative;
height: 0.4rem;
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 ?
<div className={styles['progress-bar-container']}>
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
<div className={styles['progress-bar-background']} />
</div>
:
null

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

@ -29,7 +29,7 @@
.thumbnail-container {
flex: none;
position: relative;
border-radius: var(--border-radius);
border-radius: 0.3rem;
overflow: hidden;
.thumbnail {
@ -55,14 +55,28 @@
.progress-bar-container {
position: absolute;
bottom: 0;
width: 100%;
background-color: var(--overlay-color);
bottom: 0.5rem;
left: 0.5rem;
right: 0.5rem;
border-radius: var(--border-radius);
.progress-bar {
z-index: 1;
position: relative;
height: 0.4rem;
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;
}
}
}