rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added DOM interaction listener

Browse source
This commit is contained in:
liyunze 2024-08-04 10:59:00 +10:00
parent 8a0e5dc356
commit bb79b3c590
1 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/sections/MoreProjects.svelte
View file

@ -4,6 +4,17 @@
onMount(() => {
const videos = document.querySelectorAll<HTMLVideoElement>(".playable");
let userInteracted = false;
const handleUserInteraction = () => {
userInteracted = true;
document.removeEventListener("click", handleUserInteraction);
document.removeEventListener("keydown", handleUserInteraction);
};
document.addEventListener("click", handleUserInteraction);
document.addEventListener("keydown", handleUserInteraction);
videos.forEach((video) => {
// Ensure the video element supports play and pause methods
if (
@ -11,6 +22,11 @@
typeof video.pause === "function"
) {
video.addEventListener("mouseenter", () => {
if (userInteracted) {
video.volume = 0.1;
} else {
video.muted = true;
}
video.play();
});
@ -18,24 +34,14 @@
video.pause();
video.currentTime = 0;
});
// Check if the screen width is less than or equal to 768px (mobile screen size)
if (window.innerWidth <= 768) {
video.muted = true;
video.autoplay = true;
video.play();
}
}
videos.forEach((video) => {
if (window.innerWidth < 1025) {
video.muted = true;
video.play();
}
});
});
// On screen size change
window.addEventListener("resize", () => {
videos.forEach((video) => {
if (window.innerWidth < 1025) {
video.muted = true;
video.play();
}
});
});
});
</script>