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

fix video ordering issues in homepage carousel

Browse source
This commit is contained in:
outfoxxed 2024-12-09 00:46:36 -08:00
parent 691eac48ba
commit 508fd31f99
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
1 changed files with 19 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,14 +10,14 @@ const videos = [
author: '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>', author: '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
path: "/assets/showcase/pfaj-bdeblase.mp4", path: "/assets/showcase/pfaj-bdeblase.mp4",
}, },
{
author: '<a href="https://github.com/flick0">flicko</a>',
path: "/assets/showcase/flicko.mp4",
},
{ {
author: '<a href="https://vaxry.net">vaxry</a>', author: '<a href="https://vaxry.net">vaxry</a>',
path: "/assets/showcase/vaxry.mp4", path: "/assets/showcase/vaxry.mp4",
}, },
{
author: '<a href="https://github.com/flick0">flicko</a>',
path: "/assets/showcase/flicko.mp4",
},
]; ];
--- ---
<div class="marquee"> <div class="marquee">
@ -53,7 +53,7 @@ const videos = [
<script> <script>
// marquee // marquee
const dataNum = 3; // last array index const videoCount = 4; // 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")
@ -63,7 +63,6 @@ const videos = [
function autoplayInit() { function autoplayInit() {
videos[0].play(); videos[0].play();
videos[0].setAttribute("data-active", "");
}; };
const intersectionOptions = { const intersectionOptions = {
@ -78,18 +77,16 @@ const videos = [
if (!entry.isIntersecting) { if (!entry.isIntersecting) {
video.pause(); video.pause();
video.removeAttribute("autoplay") video.removeAttribute("autoplay")
video.removeAttribute("data-active")
video.currentTime = 0; video.currentTime = 0;
} else { } else {
video.play(); video.play();
video.setAttribute("data-active","")
} }
}); });
},intersectionOptions); },intersectionOptions);
for (const video of videos) { for (const video of videos) {
observer.observe(video); observer.observe(video);
video.addEventListener("ended", onVideoEnded) video.addEventListener("ended", nextVideo)
} }
const onVisibilityChange = () => { const onVisibilityChange = () => {
@ -103,76 +100,20 @@ const videos = [
} }
document.addEventListener("visibilitychange", onVisibilityChange); 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;
function onVideoEnded() { marquee.setAttribute("data-media-index", `${nextIndex}`);
const currentIndex = marquee.getAttribute("data-media-index"); marquee.style.setProperty("--scroll", `-${nextIndex*100}%`)
const currentIndexNum = Number(currentIndex);
if(currentIndexNum !== dataNum){
const newIndex = currentIndexNum + 1;
marquee.setAttribute("data-media-index", `${newIndex}`);
marquee.style.setProperty("--scroll", `-${newIndex*100}%`)
} else {
marquee.setAttribute("data-media-index", "0");
marquee.style.setProperty("--scroll", "0")
}
} }
function prevVideo() { offsetCarousel(-1) }
function nextVideo() { offsetCarousel(1) }
// left-right buttons // left-right buttons
const scrollLeft = document.getElementById("marquee-scroll-left")!; document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", prevVideo);
const scrollRight = document.getElementById("marquee-scroll-right")!; document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", nextVideo);
const scrollMaxPercent = dataNum*100;
scrollLeft.addEventListener("mousedown", () => {
const dataScroll = marquee.getAttribute("data-scroll")!;
const hashMap = {
"first": () => {
const scrollToLast = `-${scrollMaxPercent}%`;
marquee.setAttribute("data-scroll", scrollToLast);
},
"lt0": () => {
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
const oldNumScroll = Number(oldDataScroll)
const newScroll = oldNumScroll - 100;
newScroll <= scrollMaxPercent && newScroll > 0 ?
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
: marquee.setAttribute("data-scroll", "0")
}
}
hashMap[dataScroll === "0" ?
"first"
: "lt0"
]()
const updatedScroll = marquee.getAttribute("data-scroll")!;
const mediaIndex = updatedScroll.indexOf("%") !== -1 ? updatedScroll.slice(1, -3) : "0";
marquee.setAttribute("data-media-index", mediaIndex);
marquee.style.setProperty("--scroll", updatedScroll)
})
scrollRight.addEventListener("mousedown", () => {
const dataScroll = marquee.getAttribute("data-scroll")!;
const hashMap = {
"last": () => {
const scrollToFirst = "0";
marquee.setAttribute("data-scroll", scrollToFirst);
},
"mt0": () => {
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
const oldNumScroll = Number(oldDataScroll)
const newScroll = oldNumScroll + 100;
newScroll <= scrollMaxPercent ?
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
: marquee.setAttribute("data-scroll", "0")
}
}
hashMap[dataScroll === `${scrollMaxPercent}` ?
"last"
: "mt0"
]()
const updatedScroll = marquee.getAttribute("data-scroll")!;
const mediaIndex = updatedScroll.indexOf("%") !== -1 ? updatedScroll.slice(1, -3) : "0";
marquee.setAttribute("data-media-index", mediaIndex);
marquee.style.setProperty("--scroll", updatedScroll);
})
</script> </script>