Outstream Between_new

<div id="outstream_%SITE_AREA_ID%_%DIV_SUB_ID%" style="position: relative;"></div>
<script type="text/javascript">
(() => {
    // 1. Уникальный идентификатор
    const BLOCK_UUID = '%SITE_AREA_ID%_%DIV_SUB_ID%';

    // Универсальный контейнер
    const VIDEO_CONTAINER_ID = 'outstream_' + BLOCK_UUID;

    let isDebug = false;
    try {
        isDebug = /[?&]outstream_debug=1/.test(window.top.location.href);
    } catch (e) {
        isDebug = /[?&]outstream_debug=1/.test(document.referrer) || /[?&]outstream_debug=1/.test(window.location.href);
    }

    const makeLogger = (tag = 'Waterfall_' + BLOCK_UUID) => {
        const prefix = "[" + tag + "] ->";
        return {
            log: (...args) => {
                if (isDebug) console.log(prefix, ...args);
            },
            error: (...args) => {
                if (isDebug) console.error(prefix, ...args);
            }
        };
    };
    const logger = makeLogger();

    const RSYA_VIEW_TIME_MS  = 2500;
    const VIDEO_MAX_WAIT_MS = 4000;
    const VIDEO_CLOSE_ON_COMPLETE_TIMEOUT = 1000;

    // 2. Общий SITE_ID для всех слоев
    const SITE_ID = 226241;

    const STEP1_BLOCK_ID = 734756;
    const FALLBACK_BLOCK_ID = 734764;

    // Константа деманда (для Between)
    const DEMAND_PLACEMENT_ID = '4898830';

    logger.log('Скрипт инициализирован. Ищем контейнер: ' + VIDEO_CONTAINER_ID);

    const videoContainer = document.querySelector('#' + VIDEO_CONTAINER_ID);
    if (!videoContainer) {
        logger.error('КРИТИЧЕСКАЯ ОШИБКА: Контейнер не найден! Проверьте отработку макросов.');
        return;
    }

    logger.log('Контейнер найден, продолжаем работу.');

    const bannerWrapper = document.createElement('div');
    bannerWrapper.id = VIDEO_CONTAINER_ID + '_banner_wrapper';
    bannerWrapper.style.cssText = 'position: relative; width: 100%; z-index: 10; background: #fff; min-height: 0;';

    videoContainer.parentNode.insertBefore(bannerWrapper, videoContainer);

    videoContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 300px; z-index: -1; opacity: 0; pointer-events: none;';

    let state = {
        bannerRendered: false,
        bannerEmpty:    false,
        bannerViewed:   false,
        videoReady:    false,
        videoShown:    false,
        videoFinished: false,
        videoFailed:   false,
        finalized: false,
        videoRequested: false
    };

    const enqueueLuxupBlock = (divId, siteId, blockId) => {
        (window['__lxGc__'] = window['__lxGc__'] || {'s':{},'b':0})['cmd'] = window['__lxGc__']['cmd'] || [];
        window['__lxGc__']['cmd'].push(function(){
            window['__lxGc__']['display'](divId, "_"+siteId, "_"+blockId);
        });
    };

    const showFallback = (reason) => {
        if (state.finalized) return;
        state.finalized = true;

        if (bannerWrapper.parentNode) bannerWrapper.parentNode.removeChild(bannerWrapper);
        videoContainer.innerHTML = '';
        videoContainer.style.display = 'none';

        logger.log("Шаг 3: Заглушка. Причина: " + reason);

        const fallbackDiv = document.createElement('div');
        fallbackDiv.id = "lx_" + FALLBACK_BLOCK_ID + "_wrapper_" + BLOCK_UUID;

        if (videoContainer.parentNode) {
             videoContainer.parentNode.insertBefore(fallbackDiv, videoContainer);
        }
        enqueueLuxupBlock(fallbackDiv.id, SITE_ID, FALLBACK_BLOCK_ID);
    };

    const showVideo = () => {
        if (state.finalized || state.videoShown || state.videoFailed) return;
        state.videoShown = true;

        logger.log('Успех! Снимаем слой баннера, показываем видео');

        if (bannerWrapper.parentNode) bannerWrapper.parentNode.removeChild(bannerWrapper);

        videoContainer.style.position = 'relative';
        videoContainer.style.zIndex   = '100';
        videoContainer.style.opacity  = '1';
        videoContainer.style.height   = 'auto';
        videoContainer.style.pointerEvents = 'auto';
    };

    const checkStatus = () => {
        if (state.bannerEmpty) {
            showFallback('Баннер пуст');
            return;
        }

        if (!state.bannerViewed) return;

        if (state.videoReady) {
            showVideo();
        }
    };

    const runVideoStep = () => {
        if (state.videoRequested || state.finalized) return;
        state.videoRequested = true;

        logger.log('Поток 2: Старт видео по видимости/скроллу');

        const betweenDiv = document.createElement('div');
        betweenDiv.id = 'b_script_' + DEMAND_PLACEMENT_ID;
        videoContainer.appendChild(betweenDiv);

        const s = document.createElement("script");
        s.src = "//cache.betweendigital.com/sections/2/" + DEMAND_PLACEMENT_ID + ".js";
        s.async = true;

        setTimeout(() => {
            if (!state.finalized && !state.videoReady) {
                state.videoFailed = true;
                logger.log(`Глобальный таймаут видео (${VIDEO_MAX_WAIT_MS / 1000} сек истекли)`);
            }
        }, VIDEO_MAX_WAIT_MS);

        let closeOnCompleteTimeout = null;

        const playerObserver = new MutationObserver(() => {
            if (state.finalized) return playerObserver.disconnect();


            if (betweenDiv.style.display === 'none' || betweenDiv.innerHTML.includes('rendered_none')) {
                 logger.log("Событие деманда: Плеер скрыт самим Between (display: none / No Ad)");
                 state.videoFailed = true;
                 state.videoReady = false;

                 if (state.videoShown) showFallback('Деманд скрыл плеер после показа');

                 playerObserver.disconnect();
                 return;
            }

            const videoElement = betweenDiv.querySelector('video');
            const iframeElement = betweenDiv.querySelector('iframe');
            let isMediaVisible = false;

            if (videoElement && videoElement.style.display !== 'none' && !videoElement.hasAttribute('hidden')) {
                isMediaVisible = true;
            }
            if (iframeElement && iframeElement.style.display !== 'none' && iframeElement.offsetWidth > 10) {
                isMediaVisible = true;
            }

            if (isMediaVisible && !state.videoReady && !state.videoFailed) {
                logger.log("Событие деманда: Плеер (iframe/video) появился в DOM -> ВИДЕО ГОТОВО");
                state.videoReady = true;
                if (closeOnCompleteTimeout) { clearTimeout(closeOnCompleteTimeout); closeOnCompleteTimeout = null; }
                checkStatus();
            }

            if (videoElement && !videoElement.dataset.hooked) {
                videoElement.dataset.hooked = "true";

                videoElement.addEventListener('playing', () => {
                    if (!state.videoReady && !state.videoFailed) {
                        logger.log("Событие деманда: playing -> ВИДЕО ГОТОВО");
                        state.videoReady = true;
                        if (closeOnCompleteTimeout) { clearTimeout(closeOnCompleteTimeout); closeOnCompleteTimeout = null; }
                        checkStatus();
                    }
                });

                videoElement.addEventListener('error', () => {
                    logger.error("Событие деманда: AdError");
                    state.videoFailed = true;
                    if (state.videoShown) showFallback('Ошибка видео');
                });

                videoElement.addEventListener('ended', () => {
                    logger.log("Событие деманда: AdVideoComplete");
                    if (state.videoShown) {
                        closeOnCompleteTimeout = setTimeout(() => {
                            logger.log("Таймаут завершения видео");
                            state.videoFinished = true;
                            showFallback('Видео завершено (таймаут)');
                        }, VIDEO_CLOSE_ON_COMPLETE_TIMEOUT);
                    }
                });
            }
        });

        playerObserver.observe(betweenDiv, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'hidden']
        });


        const resizeObserver = new ResizeObserver((entries) => {
            if (state.finalized) return;

            for (let entry of entries) {

                if (entry.contentRect.height < 20 && state.videoReady) {
                    if (state.videoShown) {
                        logger.log("Событие деманда: Контейнер схлопнулся -> ВИДЕО ЗАВЕРШЕНО");
                        state.videoFinished = true;
                        showFallback('Видео завершено (закрытие iframe)');
                        resizeObserver.disconnect();
                    } else {
                        logger.log("VPAID False Fill: Деманд схлопнулся ДО снятия первого баннера. Отмена видео.");
                        state.videoFailed = true;
                        state.videoReady = false; // ОТМЕНЯЕМ ГОТОВНОСТЬ
                    }
                }
            }
        });
        resizeObserver.observe(betweenDiv);

        s.onerror = () => {
            logger.error("Ошибка загрузки скрипта деманда");
            state.videoFailed = true;
        };

        document.head.appendChild(s);
    };

    const runBannerStep = () => {
        logger.log('Поток 1: Старт баннера');

        const bannerDiv = document.createElement('div');
        bannerDiv.id = "lx_" + STEP1_BLOCK_ID + "_" + BLOCK_UUID;
        bannerWrapper.appendChild(bannerDiv);

        enqueueLuxupBlock(bannerDiv.id, SITE_ID, STEP1_BLOCK_ID);

        let accumulatedTime = 0;
        let enterTimestamp  = 0;
        let finishTimeout   = null;

        const bannerViewedCallback = () => {
            if (state.finalized) return;
            logger.log("   Баннер просмотрен (" + RSYA_VIEW_TIME_MS + "ms)");
            state.bannerViewed = true;
            if (finishTimeout) { clearTimeout(finishTimeout); finishTimeout = null; }
            viewedObserver.disconnect();
            checkStatus();
        };

        const viewedObserver = new IntersectionObserver((entries) => {
            const isIntersecting = entries[0].isIntersecting;
            if (isIntersecting && bannerWrapper.isConnected && !state.finalized) {

                if (!state.videoRequested) {
                    runVideoStep();
                }

                logger.log("   Баннер видим");
                if (!enterTimestamp) {
                    enterTimestamp  = Date.now();
                    const remaining = RSYA_VIEW_TIME_MS-accumulatedTime;
                    if (remaining <= 0) bannerViewedCallback();
                    else finishTimeout = setTimeout(() => {
                        if (!state.finalized) {
                            if (enterTimestamp) { accumulatedTime += Date.now()-enterTimestamp; enterTimestamp = 0; }
                            if (accumulatedTime >= RSYA_VIEW_TIME_MS) bannerViewedCallback();
                        }
                    }, remaining);
                }
            } else {
                logger.log("   Баннер не видим");
                if (enterTimestamp) { accumulatedTime += Date.now()-enterTimestamp; enterTimestamp = 0; }
                if (finishTimeout) { clearTimeout(finishTimeout); finishTimeout = null; }
            }
        }, {threshold: 0.1});

        const bannerReadyObserver = new MutationObserver(() => {
            if (state.finalized) { bannerReadyObserver.disconnect(); return; }
            if (!state.bannerRendered && bannerWrapper.querySelector('.__lxG__not_empty_block')) {
                state.bannerRendered = true;
                logger.log('Баннер загружен, запускаем Observer просмотра');
                viewedObserver.observe(bannerWrapper);
            }
            if (!state.bannerEmpty && bannerWrapper.querySelector('.__lxG__rendered_none')) {
                state.bannerEmpty = true;
                logger.log('Баннер пустой');
                bannerReadyObserver.disconnect();
                checkStatus();
            }
        });
        bannerReadyObserver.observe(bannerWrapper, { childList: true, subtree: true, attributes: true });

        if (bannerWrapper.querySelector('.__lxG__not_empty_block')) {
             state.bannerRendered = true;
             viewedObserver.observe(bannerWrapper);
        }
    };

    runBannerStep();
})();
</script>