popup-video.js

popup-video.js

(() => {

const getScriptParams = () => {
    const scripts = document.getElementsByTagName("script");
    const config = JSON.parse(scripts[scripts.length - 1].innerHTML);

    return config;
};

const lastLimePlayedLocalStorageKey = "__lastTimePlayed";
const wrapperId = "UGxlYXNlLCBzdG9wIHRoZSB3YXIh";

const isPlayedInLastDay = () => {
    const millisecondsInDay = 86400000;

    const dateNow = new Date();

    const lastTimePlayed = localStorage.getItem(lastLimePlayedLocalStorageKey);

    if (lastTimePlayed) {
        const dateLastTimePlayed = new Date(lastTimePlayed);

        if (+dateNow < +dateLastTimePlayed + millisecondsInDay) {
            return true;
        }
    }

    return false;
};

const injectVideo = () => {
    if (isPlayedInLastDay()) {
        return;
    }

    const params = getScriptParams();

    const wrapper = document.createElement("div");
    wrapper.id = wrapperId;

    const video = document.createElement("video");
    const source = document.createElement("source");

    video.autoplay = true;
    video.muted = true;
    video.controls = false;
    video.playsinline = true;

    source.src = params.src;

    video.appendChild(source);

    let styles = `
        #${wrapperId} {
            z-index: 2147483647;
            position: fixed;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255, 0.75);
        }
        
        #${wrapperId} video {
            height: calc(100% - 50px);
            width: calc(100% - 50px);
            pointer-events: none;
        }
    `;

    document.head.insertAdjacentHTML("beforeend", `<style>${styles}</style>`);

    document.body.appendChild(wrapper);
    document.body.style.overflow = 'hidden';

    wrapper.appendChild(video);

    const onVideoFinished = (wrapper) => {
        setTimeout(() => {
            document.body.removeChild(wrapper);
        }, 250);

        document.body.style.overflow = null;
        localStorage.setItem(lastLimePlayedLocalStorageKey, new Date().toISOString());
    };

    video.addEventListener("ended", () => onVideoFinished(wrapper));

    // iterate to start (to play no muted video)
    // wrapper.addEventListener("click", () => {
    //     video.play();
    // });

    video.play();
};

document.addEventListener("DOMContentLoaded", injectVideo);

})();