@ribajs/bs5/dist/components/bs5-slide-video/bs5-slide-video.component.js

Bootstrap 5 module for Riba.js

import { Component } from "@ribajs/core";
import { Bs5SliderComponent } from "../bs5-slider/bs5-slider.component.js";
import { VideoComponent } from "@ribajs/extras/src/components/index.js";
export class Bs5SlideVideoComponent extends Component {
    static tagName = "bs5-slide-video";
    scope = {
        autoplay: false,
    };
    slider = null;
    videoCo = null;
    videoEl = null;
    slideEl = null;
    static get observedAttributes() {
        return ["autoplay"];
    }
    connectedCallback() {
        super.connectedCallback();
        this.init(Bs5SlideVideoComponent.observedAttributes);
        this.onSlideEnd = this.onSlideEnd.bind(this);
    }
    onSlideEnd(event) {
        this.debug("[Bs5SlideVideoComponent] onSlideEnd", event, this.slideEl?.classList);
        if (this.scope.autoplay) {
            this.playIfActive();
        }
    }
    playIfActive() {
        if (this.slideEl?.classList.contains("active")) {
            if (this.videoCo) {
                this.videoCo.play();
            }
            else if (this.videoEl) {
                this.videoEl.play();
            }
        }
    }
    async waitForUserInteraction() {
        return new Promise((resolve) => {
            const removeEventListeners = () => {
                document.removeEventListener("click", clickHandler);
                document.removeEventListener("scroll", scrollHandler);
                document.removeEventListener("mousemove", mouseMoveHandler);
            };
            const clickHandler = () => {
                removeEventListeners();
                resolve("click");
            };
            const scrollHandler = () => {
                removeEventListeners();
                resolve("scroll");
            };
            const mouseMoveHandler = () => {
                removeEventListeners();
                resolve("mousemove");
            };
            document.addEventListener("click", clickHandler);
            document.addEventListener("scroll", scrollHandler);
            document.addEventListener("mousemove", mouseMoveHandler);
        });
    }
    addEventListeners() {
        this.slider?.addEventListener(Bs5SliderComponent.EVENTS.scrollended, this.onSlideEnd);
    }
    removeEventListeners() {
        this.slider?.removeEventListener(Bs5SliderComponent.EVENTS.scrollended, this.onSlideEnd);
    }
    async beforeBind() {
        await super.beforeBind();
        this.addEventListeners();
    }
    async afterBind() {
        if (this.scope.autoplay) {
            if (this.slideEl?.classList.contains("active")) {
                const event = await this.waitForUserInteraction();
                console.debug("[Bs5SlideVideoComponent] event", event);
                if (this.slideEl?.classList.contains("active")) {
                    this.playIfActive();
                }
            }
        }
        await super.beforeBind();
    }
    async beforeTemplate() {
        this.slider = this.closest(Bs5SliderComponent.tagName);
        this.videoCo = this.querySelector(VideoComponent.tagName);
        this.videoEl = this.querySelector("video");
        this.slideEl = this.closest(".slide");
    }
    template() {
        return null;
    }
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LXNsaWRlLXZpZGVvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2JzNS1zbGlkZS12aWRlby9iczUtc2xpZGUtdmlkZW8uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLE1BQU0sY0FBYyxDQUFDO0FBQzNELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQVl4RSxNQUFNLE9BQU8sc0JBQXVCLFNBQVEsU0FBUztJQUM1QyxNQUFNLENBQUMsT0FBTyxHQUFHLGlCQUFpQixDQUFDO0lBRW5DLEtBQUssR0FBVTtRQUNwQixRQUFRLEVBQUUsS0FBSztLQUNoQixDQUFDO0lBRUYsTUFBTSxHQUE4QixJQUFJLENBQUM7SUFDekMsT0FBTyxHQUEwQixJQUFJLENBQUM7SUFDdEMsT0FBTyxHQUE0QixJQUFJLENBQUM7SUFDeEMsT0FBTyxHQUF1QixJQUFJLENBQUM7SUFFbkMsTUFBTSxLQUFLLGtCQUFrQjtRQUMzQixPQUFPLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVTLGlCQUFpQjtRQUN6QixLQUFLLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUMxQixJQUFJLENBQUMsSUFBSSxDQUFDLHNCQUFzQixDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFDckQsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRVMsVUFBVSxDQUFDLEtBQWtCO1FBQ3JDLElBQUksQ0FBQyxLQUFLLENBQ1IscUNBQXFDLEVBQ3JDLEtBQUssRUFDTCxJQUFJLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FDeEIsQ0FBQztRQUVGLElBQUksSUFBSSxDQUFD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