// 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();
    });
}