quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

fix: layout jump on video loading

Browse source
This commit is contained in:
Oleksandr 2026-02-17 19:02:00 +02:00
parent 10edd8f19d
commit 0727eccb71
Signed by: Xanazf
GPG key ID: 821EEC32761AC17C
2 changed files with 28 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/marquee/MarqueeContent.astro
View file

@ -44,18 +44,21 @@ const videos = [
{videos.map(({ author, source, installable, path }, index) => { {videos.map(({ author, source, installable, path }, index) => {
return ( return (
<div class=`marquee-item`> <div class=`marquee-item`>
<video <div class="marquee-item-spacing marquee-item-content video-wrapper">
data-media-index={index} <video
data-media-author={author} data-media-index={index}
id="showcase-video" data-media-author={author}
class="marquee-item-spacing marquee-item-content" id="showcase-video"
muted muted
controls controls
playsinline playsinline
preload="metadata" preload="metadata"
> style="opacity: 0; transition: opacity 0.5s"
<source src={path} type="video/mp4"/> onloadeddata="this.style.opacity='1'"
</video> >
<source src={path} type="video/mp4"/>
</video>
</div>
<p> <p>
Configuration by <Fragment set:html={author}/> Configuration by <Fragment set:html={author}/>
{source && !installable && <>(<a href={source}>source code</a>)</>} {source && !installable && <>(<a href={source}>source code</a>)</>}

18
src/styles/components/marquee.css
View file

@ -67,16 +67,28 @@
padding-inline: 0.5rem; padding-inline: 0.5rem;
box-sizing: border-box; box-sizing: border-box;
will-change: opacity; will-change: opacity;
width: 100vw;
flex: 0 0 100vw;
& > * { & > * {
z-index: 11; z-index: 11;
} }
& video { & .video-wrapper {
position: relative; position: relative;
width: 100%;
max-width: 75rem; max-width: 75rem;
aspect-ratio: 16 / 9;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
background-color: hsl(var(--bg-700));
overflow: hidden;
& video {
width: 100%;
height: 100%;
object-fit: cover;
}
} }
} }
@ -173,9 +185,5 @@
@media not (min-width: 83rem) { @media not (min-width: 83rem) {
.marquee-scroll-arrow { .marquee-scroll-arrow {
height: unset; height: unset;
& > div {
background-color: #55555580;
}
} }
} }