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

fix the video showcase

Browse source 
Please be fixed this time
This commit is contained in:
outfoxxed 2025-06-18 23:29:18 -07:00
parent 11a58d8e60
commit c0d295c289
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
1 changed files with 38 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/components/marquee/Marquee.astro
View file

@ -47,6 +47,7 @@ const videos = [
muted muted
controls controls
playsinline playsinline
preload="metadata"
> >
<source src={path} type="video/mp4"/> <source src={path} type="video/mp4"/>
</video> </video>
@ -60,18 +61,35 @@ const videos = [
</div> </div>
<script> <script>
// marquee
const videoCount = 5; // last array index const videoCount = 5; // last array index
const marquee = document.getElementById("marquee-content")!; const marquee = document.getElementById("marquee-content")!;
marquee.style.setProperty("--scroll", "0") marquee.style.setProperty("--scroll", "0")
// autoplay
window.addEventListener("load", autoplayInit, false); window.addEventListener("load", autoplayInit, false);
const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>; const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
let currentVideoIndex = 0;
let currentVideo: HTMLVideoElement | null = null;
function autoplayInit() { function autoplayInit() {
videos[0].play(); setActiveVideo(0);
}; currentVideo!.play();
}
function setActiveVideo(index: number) {
currentVideo?.pause();
currentVideoIndex = index;
currentVideo = videos[currentVideoIndex];
currentVideo.currentTime = 0;
marquee.style.setProperty("--scroll", `-${currentVideoIndex*100}%`)
}
function offsetCarousel(offset: number) {
let nextIndex = currentVideoIndex + offset;
if (nextIndex < 0) nextIndex += videoCount;
nextIndex = nextIndex % videoCount;
setActiveVideo(nextIndex);
}
const intersectionOptions = { const intersectionOptions = {
root: marquee, root: marquee,
@ -84,48 +102,36 @@ const videos = [
const video = entry.target as HTMLVideoElement; const video = entry.target as HTMLVideoElement;
if (!entry.isIntersecting) { if (!entry.isIntersecting) {
video.pause(); video.pause();
video.removeAttribute("autoplay") } else if (video === currentVideo) {
video.currentTime = 0;
} else {
video.play(); video.play();
} }
}); });
},intersectionOptions); }, intersectionOptions);
for (const video of videos) { for (const video of videos) {
observer.observe(video); observer.observe(video);
video.addEventListener("ended", () => { video.addEventListener("ended", () => {
// The "ended" event might just mean its buffering. // The "ended" event might just mean its buffering.
if (video.duration !== 0 && video.currentTime === video.duration) nextVideo(); if (video == currentVideo && video.duration !== 0 && video.currentTime === video.duration) {
offsetCarousel(1);
}
}); });
} }
const onVisibilityChange = () => { let wasPaused = false;
for(const video of videos){ document.addEventListener("visibilitychange", () => {
if(document.hidden){ if (currentVideo) {
video.pause(); if (document.hidden) {
} else { wasPaused = currentVideo.paused;
video.play(); currentVideo.pause();
} else if (!wasPaused) {
currentVideo.play();
} }
} }
} });
document.addEventListener("visibilitychange", onVisibilityChange);
function offsetCarousel(offset: number) {
const currentIndex = Number(marquee.getAttribute("data-media-index"));
let nextIndex = currentIndex + offset;
if (nextIndex < 0) nextIndex += videoCount;
nextIndex = nextIndex % videoCount;
marquee.setAttribute("data-media-index", `${nextIndex}`);
marquee.style.setProperty("--scroll", `-${nextIndex*100}%`)
}
function prevVideo() { offsetCarousel(-1) }
function nextVideo() { offsetCarousel(1) }
// left-right buttons // left-right buttons
document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", prevVideo); document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", () => offsetCarousel(-1));
document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", nextVideo); document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", () => offsetCarousel(1));
</script> </script>