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

WIP marquee and some refactoring

Browse source
This commit is contained in:
Oleksandr 2025-12-17 20:13:00 +02:00
parent eca995ca2c
commit 2ca3604414
Signed by: Xanazf
GPG key ID: 821EEC32761AC17C
6 changed files with 406 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,124 +14,4 @@ import MarqueeContent from "./MarqueeContent.astro";
<MarqueeContent/>
</div>
<script>
const marquee = document.getElementById("marquee-content")!;
marquee.style.setProperty("--scroll", "0")
marquee.style.setProperty("--mult", "1")
window.addEventListener("load", autoplayInit, false);
let videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
const videoCount = videos.length;
const lastVideoIndex = videos[videos.length - 1]
let currentVideoIndex = 0;
let currentVideo: HTMLVideoElement | null = null;
function autoplayInit() {
setActiveVideo(0);
currentVideo.play();
currentVideo.style.animationPlayState = "running";
}
function setActiveVideo(index: number) {
if (currentVideo) {
currentVideo.pause();
}
currentVideoIndex = index;
if (index === videos.length - 1) {
console.log("shift")
const shifted = videos.item(0);
marquee.firstElementChild.remove()
const video_div = document.createElement("div");
video_div.classList.add("marquee-item");
console.log("shift: ",video_div.classList.toString())
shifted.setAttribute("data-media-index", (index+1).toString())
video_div.appendChild(shifted);
marquee.appendChild(video_div);
videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
currentVideoIndex = index - 1;
console.log("shift", marquee)
}
currentVideo = videos[currentVideoIndex];
currentVideo.currentTime = 0;
marquee.style.setProperty("--scroll", `-${currentVideoIndex*100}%`)
marquee.style.setProperty("--mult", `${currentVideoIndex + 1}`)
}
function offsetCarousel(offset: number) {
let nextIndex = currentVideoIndex + offset;
// if (nextIndex < 0) nextIndex += videoCount;
// nextIndex = nextIndex % videoCount;
setActiveVideo(nextIndex);
}
const intersectionOptions = {
root: marquee,
rootMargin: "0px",
threshold: 0.1,
};
const mult = marquee.style.getPropertyValue("--mult") ?? 0;
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const video = entry.target as HTMLVideoElement;
if (!entry.isIntersecting) {
video.pause();
video.style.animationName = "none";
void video.offsetWidth;
video.style.animationName = "fade";
video.style.animationDuration = "0.3s";
video.style.animationTimingFunction = "ease-in-out";
video.style.animationFillMode = "forwards";
video.style.animationDirection = "reverse";
} else if (video === currentVideo) {
video.play();
video.style.animationName = "none";
void video.offsetWidth;
video.style.animationName = "fade";
video.style.animationDuration = "0.3s";
video.style.animationTimingFunction = "ease-in-out";
video.style.animationFillMode = "forwards";
video.style.animationPlayState = "running";
video.style.animationDirection = "normal";
}
});
}, intersectionOptions);
for (const video of videos) {
observer.observe(video);
video.addEventListener("ended", () => {
// The "ended" event might just mean its buffering.
if (video == currentVideo && video.duration !== 0 && video.currentTime === video.duration) {
offsetCarousel(1);
}
});
}
let wasPaused = false;
document.addEventListener("visibilitychange", () => {
if (currentVideo) {
if (document.hidden) {
wasPaused = currentVideo.paused;
currentVideo.pause();
} else if (!wasPaused) {
currentVideo.play();
}
}
});
// left-right buttons
document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", () => offsetCarousel(-1));
document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", () => offsetCarousel(1));
</script>
<script src="@config/styling/marquee_old.ts"/>