32 lines
980 B
TypeScript
32 lines
980 B
TypeScript
// resources/js/composables/usePauseOffscreen.ts
|
|
import { onMounted, onUnmounted, type Ref } from 'vue';
|
|
|
|
export function usePauseOffscreen(
|
|
videoRef: Ref<HTMLVideoElement | HTMLVideoElement[] | undefined>,
|
|
) {
|
|
let observer: IntersectionObserver | null = null;
|
|
|
|
onMounted(() => {
|
|
observer = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
const video = entry.target as HTMLVideoElement;
|
|
if (!entry.isIntersecting && !video.paused) {
|
|
video.pause();
|
|
}
|
|
}
|
|
},
|
|
{ threshold: 0.25 }, // pause once less than 25% of the video is visible
|
|
);
|
|
|
|
const els = Array.isArray(videoRef.value)
|
|
? videoRef.value
|
|
: [videoRef.value];
|
|
els.forEach((el) => el && observer!.observe(el));
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
observer?.disconnect();
|
|
});
|
|
}
|