@adrianarroyoc/mediaplayer/src/plugins/AutoPause.ts

Proyecto del Curso Profesional de JavaScript en Platzi

import MediaPlayer from "../../MediaPlayer";

class AutoPause {
    private threshold: number;
    player: MediaPlayer;

    constructor() {
        this.threshold = .25
        this.handlerIntersection = this.handlerIntersection.bind(this)
        this.handlerVisibilityChange = this.handlerVisibilityChange.bind(this)
    }
    run(player) {
        this.player = player;

        const observer = new IntersectionObserver(this.handlerIntersection, {
            threshold: this.threshold
        });

        observer.observe(this.player.media);

        document.addEventListener("visibilitychange", this.handlerVisibilityChange);
    }

    private handlerIntersection(entries: IntersectionObserverEntry[]) {
        const entry = entries[0];

        //console.log(entry);

        const isVisible = entry.intersectionRatio >= this.threshold;

        if (isVisible) {
            this.player.play();
        } else {
            this.player.pause();
        }
    }

    private handlerVisibilityChange() {
        const isVisible = document.visibilityState === "visible";
        if (isVisible) {
            this.player.play();
        } else {
            this.player.pause();
        }
    }

}

export default AutoPause;