urlscan.io logo urlscan.io
SecurityTrails logo

app.vidget.com.br Open in urlscan Pro
91.108.125.8  Public Scan

Back to summary
URL: https://app.vidget.com.br/UI-Vidget/app.js?v=1732531571985&location=https%3A%2F%2Fwww.lindacasa.com.br%2Fjogo-de-lencol-ch...
Submission: On November 28 via api from US — Scanned from CA

Form analysis 0 forms found in the DOM

Text Content

console.log('%cVidget%cV1.0', 'padding:1px 3px; color: lightgreen; background-color: black', 'padding:1px 3px 1px 0px; color: orange; background-color: black');

// Função para adicionar dinamicamente o CSS ao documento
function injectCSS(cssString) {
    const style = document.createElement('style');
    style.textContent = cssString;
    document.head.appendChild(style);
}


// Adiciona a fonte Google Fonts dinamicamente
const fontLink = document.createElement('link');
fontLink.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
fontLink.rel = 'stylesheet';
document.head.appendChild(fontLink);

// Conteúdo CSS convertido para string (sem @import de fontes, pois estamos usando Google Fonts)
const cssString = `

    #vidget__container {
       width: 19vw;
    height: calc(18vw* 1.7692);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
        position: fixed;
        z-index: 999999999;
        font-family: 'Inter-Bold'; /* Fonte vinda do Google Fonts */
        font-size: 16px;
        bottom: 20px;
        border-radius: 1rem;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.35)
    }

    #vidget__container.minimized .vidget__progress-container {
    display: none;
}

#vidget__container.minimized #share-button {
    display: none !important;
}

    .article-content {
        display: flex;
        gap: .5rem;
    }

    .btn-close {
        padding: 0;
        z-index: 999;
    }

    .full-mode-article p:first-of-type {
    margin-top: 10px !important;
    }

    .full-mode-article p {
        margin-bottom: 20px !important;
    }
        #vidget__container article p {
        font-family: 'Inter' !important;
    }

     #vidget__container.no-border article {
     margin-left: 3px !important;}
    
        
    @media screen and (max-width: 768px) {
        #vidget__container {
            width: 100% !important;
            height: 100% !important;
            margin-left: 0px;
            border-radius: 1rem;
            z-index: 99999999999;
            bottom: 0px !important;
        }

       


        #vidget__container.minimized {
            bottom: 20px !important;
        }



#vidget__container.minimized video{
        top: 0px !important;

        }

      
        #vidget__container article div a[data-vidget-url]{
            width: calc(100% - 10vw - 52px) !important; /* Ajustado */
            font-size: 0.4em !important;
            bottom: 0px !important;
            padding: 2px 3px !important;
        }

        #vidget__container article {
            width: 100% !important;
            height: fit-content !important;
            bottom: 0 !important;
            margin: 10px 0px 4px 0px !important;
        }

        #vidget__container article p {
            line-height: 16px !important;
            font-size: .7em !important;
            font-family: 'Inter' !important;
        }

        .article-content {
            gap: .35rem;
        }

        #vidget__container.minimized .vidget__video-container {
            width: 18vw;
            height: 18vw;
            border-radius: 50% !important;
            
        }

        #vidget__container.minimized .vidget__video-container.no-box-shadow {
            width: 18vw;
            height: 18vw;
        }

        #vidget__container.minimized video, #vidget__container.minimized div[data-vidget-video-overlay] {
            width: 19vw !important;
            height: 19vw !important;
        }

        #vidget__container.minimized {
            width: 19vw !important;
            height: 19vw !important;
            box-shadow: none;
        }
    }

    
.vidget__progress-container {
    position: absolute;
    top: 6px;
    left: 0;
    z-index: 99999;
    width: 90%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    margin-left: 15px;
    border-radius: 2rem;
}

.vidget__progress-bar {
    height: 2px;
    background-color: rgba(255, 255, 255, 0.90);
    width: 0%; /* Inicialmente zero */
    transition: width 1s linear;
    border-radius: 2rem;
}


    #vidget__container article p {
        line-height: 18px !important;
        font-size: .8em !important;
        font-weight: 300;
        text-wrap: wrap;
        position: relative;
    }

    #vidget__container.minimized {
        width: 8.5vw;
        height: 8.5vw;
        border-radius: 50% !important;
    }

    #vidget__container.minimized.shadow-applied {
    width: 8vw;
    height: 8vw;
}


    #vidget__container.minimized .vidget__video-container {
        border-radius: 50% !important;
        width: fit-content;
    }

    #vidget__container.minimized.no-border .vidget__video-container {
        width: 8.5vw;
    }

    #vidget__container article {
        width: 98%;
        height: fit-content;
        bottom: 0;
        margin: 10px auto;
        border-radius: 5px;
        display: flex;
    }

    #vidget__container.no-border article {
        width: 100%;
    }



    .vidget__video-container {
        transition: transform 0.5s ease-in-out;
        height: 100%;
        width: 100%;
    }

    #vidget__container.minimized .vidget__video-container {
        height: auto;
    }

    .video-fade-out {
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    .video-fade-in {
        opacity: 1;
        transition: opacity 0.5s ease-in;
    }

    #vidget__container.minimized video {
        width: 8vw;
        height: 8vw;
    }

    #vidget__container.minimized div[data-vidget-video-overlay] {
        width: 8.5vw;
        height: 8.5vw;
    }

    #vidget__container.minimized article,
    #vidget__container.minimized button {
        display: none;
    }

    div[data-vidget-video-overlay] {
        width: 100%;
        height: 102%;
    }

    #vidget__container video {
    width: 100%;
    border-radius: 0.75rem;
        object-fit: cover;
    height: 100%;
    width: 100%;
    top: 0;
    }

    #vidget__container video.with-border {
    max-width: 100%;
    width: 100%;
    height: 95vh;
    max-height: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
    top: 0px;
}

    #vidget__container article{
        position: absolute;
        background: #1515159e;
        backdrop-filter: blur(5px);
            z-index: 99999999;
    }

    #vidget__container button {
    position: absolute;
        }

    .btn-close {
    cursor: pointer;}

    .btn-close img {
    position: relative;
    width: 100%;
    }

    .btn-close {
    background: url('https://app.vidget.com.br/assets/public/i-close-icon.svg') no-repeat center !important;
    border-radius: 50%;
    padding: .75rem;
    top: 15px !important;
    background-size: 100% !important;
}

    #vidget__container article img {
        width: 35% !important;
        max-width: 100%;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        height: 100px;
    }

    #vidget__container article div {
        padding: 4px;
        line-height: 18px;
        color: #fff;
    }

    #vidget__container article div > * {
        margin: 0;
        padding: 0;
        width: 100%;
        margin-bottom: .25rem;
        font-family: 'Inter';
         
    }

    #vidget__container article div p[data-vidget-price] {
        font-size: 0.8em;
            font-family: 'Inter';
    }

    #vidget__container article div a[data-vidget-url] {
        position: relative;
        bottom: 0;
        width: calc(100% - 10vw + 20px);
        color: #fff;
        padding: 3px 10px;
        border: 1px solid #fff;
        border-radius: 3px;
        font-size: 0.6em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.5;
    }

    #vidget__container article div a[data-vidget-url]:hover {
        opacity: 1;
    }

    #vidget__container button {
        top: 10px;
        right: -5px;
        border: none;
        width: 20px;
        height: 20px;
    }


    .navigation-arrows {
        position: absolute;
        top: 50%;
        width: calc(100% - 10px);
        z-index: 999999;
        display: flex;
        flex-direction: column;
    }

    .prev-arrow, .next-arrow {
        background-color: transparent;
        border: none;
        font-size: 24px;
        color: white;
        cursor: pointer;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .prev-arrow {
        top: 30px !important;
        transform: rotate(-90deg);
    }

    .next-arrow {
         top: -25px !important;
        transform: rotate(-90deg);
    }

    .navigation-arrows img {
        pointer-events: none;
    }
    .prev-arrow {
        background: url('https://app.vidget.com.br/assets/public/i-prev-arrow.svg') no-repeat center;
        border-radius: 50%;
        top: 10px !important;
    }

    .next-arrow {
        background: url('https://app.vidget.com.br/assets/public/i-next-arrow.svg') no-repeat center;
        border-radius: 50%;
    }

    #sound-on {
        background: url('https://app.vidget.com.br/assets/public/i-sound.svg') no-repeat center;
    right: 0px !important;
    border-radius: 50%;
    padding: 1rem;
    top: 40px !important;
    cursor: pointer;
    background-size: 75%;
    z-index: 999999;
        }
    
        #share-button {
        background: url('https://app.vidget.com.br/assets/public/i-share-white.svg') no-repeat center;
    right: 0px !important;
    border-radius: 50%;
    padding: 1rem;
    top: 70px !important;
    cursor: pointer;
    background-size: 18px;
    z-index: 999999;
        }

    #sound-off {
        background: url('https://app.vidget.com.br/assets/public/i-mute.svg') no-repeat center;
    right: 0px !important;
    border-radius: 50%;
    padding: 1rem;
    top: 40px !important;
    cursor: pointer;
    background-size: 75%;
    z-index: 999999;
    }

    #video-slider {
    overflow: hidden;
    position: relative;
    height: 100%; /* Ajuste conforme necessário */
}

.video-item {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}


    
    .btn-close {
    right: 5px !important;
    background: transparent;
}


    @media screen and (max-width: 768px) {
        .prev-arrow, .next-arrow {
            font-size: 20px;
        }

            .prev-arrow {
        background: url('https://app.vidget.com.br/assets/public/i-prev-arrow-mob.svg') no-repeat center;
        
    }

    .prev-arrow, .next-arrow {
        padding: 1.25rem
    }

    .next-arrow {
        background: url('https://app.vidget.com.br/assets/public/i-next-arrow-mob.svg') no-repeat center;
        top: -75px !important;
    }

    #sound-on {
        background: url('https://app.vidget.com.br/assets/public/i-sound-mob.svg') no-repeat center;
       top: 80px !important;
       padding: 1.5rem;
       right: 5px !important;
       background-size: 100% !important;
    }

    #sound-off {
        background: url('https://app.vidget.com.br/assets/public/i-mute-mob.svg') no-repeat center;
     padding: 1.5rem;
       right: 5px !important;
       top: 80px !important;
       background-size: 100% !important;
        }  

    .btn-close {
    background: url('https://app.vidget.com.br/assets/public/i-close-icon-mob.svg') no-repeat center !important;
    padding: 1.5rem;
        border-radius: 50%;
        background-size: 100% !important;
}

    #vidget__container video {
      height: 100vh;
    }

    #vidget__container video.with-border {    
        height: 100vh;
    }

        #vidget__container article img {
            width: 35% !important;
            max-width: 100%;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            object-fit: cover;
        }

        #vidget__container article div {
            padding: 5px;
            line-height: 18px;
            color: #fff;
        }

        #vidget__container article div > * {
            margin: 0;
            padding: 0;
            width: 100%;
        }
    }
    `;

// Injeta o CSS no documento
injectCSS(cssString);

const additionalCSS = `
    .vidget__video-container {
        position: relative;
        overflow: hidden;
    }
    
    .vidget__video-container video {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: top 1.6s ease-out;
    }
`;

injectCSS(additionalCSS);

/** Get Params */
const vidget__script_url = new URL(document.currentScript.src);
const vidget__location_param = decodeURIComponent(vidget__script_url.searchParams.get('location'));
const vidget__storage_url = 'https://phxkpzehxsbteunlmdoq.supabase.co/storage/v1/object/public/vidget::videos';

/** Init Video Container */
const vidget__container = document.createElement('div');
vidget__container.id = 'vidget__container';
vidget__container.classList.add('minimized');  // Adiciona a classe 'minimized' logo na criação
document.body.appendChild(vidget__container);
/** Create overlay for full-screen mode */
const fullScreenOverlay = document.createElement('div');
fullScreenOverlay.id = 'fullScreenOverlay';
fullScreenOverlay.style.position = 'fixed';
fullScreenOverlay.style.top = '0';
fullScreenOverlay.style.left = '0';
fullScreenOverlay.style.width = '100vw';
fullScreenOverlay.style.height = '100vh';
fullScreenOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';  // Fundo esmaecido
fullScreenOverlay.style.display = 'none';  // Inicia escondido
fullScreenOverlay.style.zIndex = '999';  // Garante que fique sobre outros elementos
document.body.appendChild(fullScreenOverlay);

setTimeout(() => {
    vidget__container.classList.add('minimized');
}, 1250);

/** Init Supabase CDN */
const vidget__supabase_script = document.createElement('script');
vidget__supabase_script.type = 'text/javascript';
vidget__supabase_script.src = 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js';
document.body.appendChild(vidget__supabase_script);

vidget__supabase_script.onload = function () {

    if (typeof supabase === 'undefined') {
        console.error('Supabase is not defined.');
        return;
    }

    const vidget__supabase_instance = supabase.createClient(
        'https://phxkpzehxsbteunlmdoq.supabase.co',
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBoeGtwemVoeHNidGV1bmxtZG9xIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDMxNjg2MDcsImV4cCI6MjAxODc0NDYwN30.oEfBNB49pgdWuGIDYoZf78J9nzZyzrfwZ6cX_OPOF3A'
    );

    vidget__init(vidget__supabase_instance);
};

/** Init Vidget CSS */
const vidget__css_source = document.createElement('link');
vidget__css_source.rel = 'stylesheet';
const timestamp = new Date().getTime(); // Obtém o timestamp atual
var basePath = window.location.pathname.includes('/UI-Vidget/') ? '/UI-Vidget/' : '/';
vidget__css_source.href = `https://app.vidget.com.br${basePath}app.css?ts=${timestamp}`;

// vidget__css_source.href = `https://app.vidget.com.br/UI-Vidget/app.css?ts=${timestamp}`;  Adiciona o timestamp à URL
document.head.appendChild(vidget__css_source);

let videoSet = [];
/** Init */
async function vidget__init(vidget__supabase_instance) {
    vidget__getVideosByUrl(vidget__supabase_instance, vidget__location_param)
        .then(response => {
            if (response && response.length > 0) {
                videoSet = response;
                vidget__container.innerHTML = ''; // Limpa o conteúdo do contêiner antes de adicionar os vídeos
                vidget__initializeVideoOverlay(vidget__supabase_instance, response);
                preloadAdjacentVideos(0);
            } else {
                vidget__container.style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Error during video initialization:', error);
        });
}

function preloadAdjacentVideos(index) {
    const nextIndex = (index + 1) % videoSet.length;
    const prevIndex = (index - 1 + videoSet.length) % videoSet.length;
    [nextIndex, prevIndex].forEach(i => {
        const video = document.createElement('video');
        video.src = `${vidget__storage_url}/${videoSet[i].url}`;
        video.preload = 'auto';
        video.style.display = 'none'; // Oculta o vídeo enquanto pré-carrega
        document.body.appendChild(video);
    });
}


function convertTextToLinks(text) {
    // Esta regex captura URLs completas com protocolos e também possíveis domínios com caminhos.
    const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]|(?:\b[a-z][a-z0-9-]*\.)+[a-z]{2,}\/[-A-Z0-9+&@#\/%=~_|!:,.;]*\/?)/ig;

    return text.replace(urlRegex, function (url) {
        if (!/^https?:\/\//i.test(url)) {
            // Se não começar com http:// ou https://, assuma que é um domínio solto e adicione http://
            return `<a href="http://${url}" target="_blank" style="color: #fff; text-decoration: underline; font-weight: 500; max-width: 100%; white-space: wrap; overflow: hidden; width: 100%; display: block;">${url}</a>`;
        }
        // Corta o 'http://' ou 'https://' do texto visível do link
        const displayUrl = url.replace(/^https?:\/\//, '');
        return `<a href="${url}" target="_blank" style="color: #fff; text-decoration: underline; font-weight: 500; max-width: 100%; white-space: wrap; overflow: hidden; width: 100%; display: block;">${displayUrl}</a>`;
    });
}




function vidget__video_markup(productUrl, metadata = {}, image_url_from_set = null) {
    console.log("URL da imagem do conjunto de vídeos:", image_url_from_set);

    const { description, productPrice, title, productCardPrice, image_url, type } = metadata;

    // Usar 'image_url_from_set' se disponível; caso contrário, usar 'image_url' ou uma imagem padrão
    const imageUrl = image_url_from_set || image_url;

    // Condiciona a exibição da div de imagem baseada no tipo de metadata
    const imageDiv = imageUrl && type === 'productCard' ?
        `<img src="${imageUrl}" alt="Produto" data-vidget-img>` :
        `<div style="display: none;"></div>`;

    // Aplica padding ao parágrafo de descrição apenas quando o tipo é 'description'
    const descriptionStyle = type === 'description' ? 'padding: 0px 12px;' : '';

    // Prepara o HTML dos detalhes do produto apenas se não for 'empty-field'
    let productDetailsHTML = '';
    if (type !== 'empty-field') {
        productDetailsHTML = `
        <div class="d-flex gap-2 article-content">
            ${imageDiv}
            <div class="div1">
                <div class="div2" style="${descriptionStyle}">
                    <p data-vidget-title class="mb-2">${title ? title : '&nbsp;'}</p>
                    ${productPrice ? `<p>R$ ${productPrice}</p>` : ''}
                    ${description ? `<p class="mb-1" style="color: #fff">${convertTextToLinks(description)}</p>` : ''}
                    <p data-vidget-price>${productCardPrice ? `R$ ${productCardPrice}` : ' '}</p>
                </div>
                ${productUrl ? `<a href="${productUrl}" data-vidget-url>Ver produto</a>` : ''}
            </div>
        </div>`;
    }

    const navigationArrows = `
    <div class="navigation-arrows">
    <button class="prev-arrow"></button>
    <button class="next-arrow"></button>
    </div>`;

    const progressBarHTML = `
    <div class="vidget__progress-container">
        ${videoSet.map(() => `<div class="vidget__progress-bar"></div>`).join('')}
    </div>`;

    // Retorna o markup final com ou sem <article> dependendo do tipo
    return `
    <div id="vidget__video-overlay" data-vidget-video-overlay>
     ${progressBarHTML} 
        <video  playsinline muted loop ></video>
        ${type !== 'empty-field' ? `<article>${productDetailsHTML}</article>` : ''}
        ${navigationArrows}
        
        <button class="btn-sound" id="sound-on">
       
    
</button>
<button class="btn-sound" id="sound-off"  style="display: none;">
   
</button>

 <button id="share-button">

        </button>
<button class="btn-close"></button>
    </div>`;
}

function initializeProgressBar(videoElement, index) {
    const progressBar = document.querySelectorAll('.vidget__progress-bar')[index];
    const updateProgress = () => {
        const percent = (videoElement.currentTime / videoElement.duration) * 100;
        progressBar.style.width = `${percent}%`;
    };

    videoElement.addEventListener('timeupdate', updateProgress);

    // Resetar a progress bar quando o vídeo acabar
    videoElement.addEventListener('ended', () => {
        progressBar.style.width = '0%';
        // Move para o próximo vídeo, se houver
        changeVideo(videoSet, 1);
    });
}


/** Função para esconder o vídeo e reexibir após 20 segundos */
async function vidget__hide_video_overlay() {
    let vidget__video_player = vidget__container.querySelector('video');
    if (vidget__video_player) {
        vidget__video_player.pause();
        vidget__video_player.src = '';
        console.log("Vídeo pausado e fonte removida.");
    } else {
        console.log("Nenhum vídeo encontrado para pausar.");
    }

    vidget__container.style.display = 'none';
    console.log("Widget ocultado.");

    // Define o temporizador para reexibir o widget após 20 segundos
    setTimeout(() => {
        console.log("Temporizador concluído, tentando mostrar o widget novamente.");
        vidget__show_video_overlay();
    }, 20000); // 20000 milissegundos = 20 segundos
}

/** Função para mostrar o vídeo */
function vidget__show_video_overlay() {
    let vidget__video_player = vidget__container.querySelector('video');
    if (vidget__video_player && vidget__video_player.src) {
        vidget__container.style.display = 'block';
        vidget__video_player.play();
        console.log("Widget mostrado e vídeo reproduzido.");
    } else {
        console.log("Nenhum vídeo disponível para carregar ou vídeo sem fonte.");
        // Se necessário, chame a função para carregar os vídeos ou inicializar o widget novamente
    }
}

let videosWithImageUrls;

/** Query video data */
// async function vidget__getVideosByUrl(vidget__supabase_instance, vidget__target_url) {
//     if (!vidget__target_url) { return null; }

//     // Extrai a URL base sem parâmetros
//     const urlObject = new URL(vidget__target_url);
//     const baseUrl = urlObject.origin + urlObject.pathname;

//     let { data: videos, error: errorVideos } = await vidget__supabase_instance
//         .from('vidget::videos')
//         .select(`title, url, metadata, id, video_set_id`)
//         .eq('metadata->>urlVideoSet', baseUrl);

//     if (errorVideos) {
//         console.error('Error fetching videos by URL:', errorVideos);
//         return null;
//     }

//     if (videos.length === 0) {
//         console.log("Nenhum vídeo encontrado para a URL especificada.");
//         // return null;
//     }

//     let videoSetIds = videos.map(video => video.video_set_id);
//     let uniqueVideoSetIds = [...new Set(videoSetIds)];

//     let { data: videoSets, error: errorVideoSets } = await vidget__supabase_instance
//         .from('vidget::video_sets')
//         .select(`id, image_url, status`)
//         .in('id', uniqueVideoSetIds);

//     if (errorVideoSets) {
//         console.error('Error fetching video sets:', errorVideoSets);
//         return null;
//     }

//     let activeVideoSets = videoSets.filter(set => set.status === 'active');

//     let videosWithImageUrls = videos.map(video => {
//         let videoSet = activeVideoSets.find(set => set.id === video.video_set_id);
//         return {
//             ...video,
//             image_url_from_set: videoSet ? videoSet.image_url : null
//         };
//     });

//     return videosWithImageUrls;
// }

// ATIVO  E INATIVO - ANTIGO
// async function vidget__getVideosByUrl(vidget__supabase_instance, vidget__target_url) {
//     if (!vidget__target_url) { return null; }

//     // Primeiro tenta com a URL normalizada
//     let baseUrl = normalizeUrl(vidget__target_url);
//     let videos = await fetchVideosByURL(vidget__supabase_instance, baseUrl);

//     // Se não encontrar vídeos com a URL normalizada, tenta com a URL base original
//     if (!videos || videos.length === 0) {
//         const urlObject = new URL(vidget__target_url);
//         baseUrl = urlObject.origin + urlObject.pathname;
//         videos = await fetchVideosByURL(vidget__supabase_instance, baseUrl);
//     }

//     if (!videos || videos.length === 0) {
//         console.log("Nenhum vídeo encontrado para a URL especificada.");
//         return null;
//     }

//     let videoSetIds = videos.map(video => video.video_set_id);
//     let uniqueVideoSetIds = [...new Set(videoSetIds)];

//     let { data: videoSets, error: errorVideoSets } = await vidget__supabase_instance
//         .from('vidget::video_sets')
//         .select(`id, image_url, status`)
//         .in('id', uniqueVideoSetIds);

//     if (errorVideoSets) {
//         console.error('Error fetching video sets:', errorVideoSets);
//         return null;
//     }

//     let activeVideoSets = videoSets.filter(set => set.status === 'active');

//     let videosWithImageUrls = videos.map(video => {
//         let videoSet = activeVideoSets.find(set => set.id === video.video_set_id);
//         return {
//             ...video,
//             image_url_from_set: videoSet ? videoSet.image_url : null
//         };
//     });

//     return videosWithImageUrls;
// }
async function vidget__getVideosByUrl(vidget__supabase_instance, vidget__target_url) {
    if (!vidget__target_url) { return null; }

    // Primeiro tenta com a URL normalizada
    let baseUrl = normalizeUrl(vidget__target_url);
    let videos = await fetchVideosByURL(vidget__supabase_instance, baseUrl);

    // Se não encontrar vídeos com a URL normalizada, tenta com a URL base original
    if (!videos || videos.length === 0) {
        const urlObject = new URL(vidget__target_url);
        baseUrl = urlObject.origin + urlObject.pathname;
        videos = await fetchVideosByURL(vidget__supabase_instance, baseUrl);
    }

    if (!videos || videos.length === 0) {
        console.log("Nenhum vídeo encontrado para a URL especificada.");
        return null;
    }

    let videoSetIds = videos.map(video => video.video_set_id);
    let uniqueVideoSetIds = [...new Set(videoSetIds)];

    let { data: videoSets, error: errorVideoSets } = await vidget__supabase_instance
        .from('vidget::video_sets')
        .select(`id, image_url, status`)
        .in('id', uniqueVideoSetIds);

    if (errorVideoSets) {
        console.error('Error fetching video sets:', errorVideoSets);
        return null;
    }

    let activeVideoSets = videoSets.filter(set => set.status === 'active');

    let videosWithImageUrls = videos.map(video => {
        let videoSet = activeVideoSets.find(set => set.id === video.video_set_id);
        return {
            ...video,
            image_url_from_set: videoSet ? videoSet.image_url : null
        };
    });

    return videosWithImageUrls;
}

async function fetchVideosByURL(vidget__supabase_instance, url) {
    try {
        // Primeira tentativa: buscar em urlVideoSets (array)
        let { data: videosFromArray, error: errorFromArray } = await vidget__supabase_instance
            .from('vidget::videos')
            .select('title, url, metadata, id, video_set_id')
            .filter('metadata->urlVideoSets', 'cs', `["${url}"]`);

        // Se não encontrou em urlVideoSets, tenta urlVideoSet (string)
        if (!videosFromArray || videosFromArray.length === 0) {
            console.log('Não encontrou em urlVideoSets, tentando urlVideoSet');

            let { data: videosFromSingle, error: errorFromSingle } = await vidget__supabase_instance
                .from('vidget::videos')
                .select('title, url, metadata, id, video_set_id')
                .eq('metadata->>urlVideoSet', url); // Usando ->> para string e eq direto

            if (errorFromSingle) {
                console.error('Error fetching videos from urlVideoSet:', errorFromSingle);
                return null;
            }

            return videosFromSingle;
        }

        return videosFromArray;
    } catch (error) {
        console.error('Error in fetchVideosByURL:', error);
        return null;
    }
}

/** Função para normalizar URLs */
function normalizeUrl(url) {
    let urlObj = new URL(url);
    let normalizedUrl = urlObj.origin + urlObj.pathname;

    // Remove trailing slash
    normalizedUrl = normalizedUrl.replace(/\/$/, '');
    // Convert to lower case
    normalizedUrl = normalizedUrl.toLowerCase();

    // If the pathname is '/busca', include the entire query string
    if (urlObj.pathname === '/busca') {
        normalizedUrl += urlObj.search;
    } else {
        // Check if 'variant_id' exists in the query parameters
        if (urlObj.searchParams.has('variant_id')) {
            // Include 'variant_id' in the query string
            let variantId = urlObj.searchParams.get('variant_id');
            normalizedUrl += '?variant_id=' + variantId;
        }
    }

    return normalizedUrl;
}



/** Função auxiliar para buscar vídeos por URL */
// async function fetchVideosByURL(vidget__supabase_instance, url) {
//     // Primeiro tenta buscar vídeos usando o array urlVideoSets
//     let { data: videosFromArray, error: errorFromArray } = await vidget__supabase_instance
//         .from('vidget::videos')
//         .select(`title, url, metadata, id, video_set_id`)
//         .contains('metadata->>urlVideoSets', [url]);

//     // Se não encontrou nada no array ou houve erro, tenta o campo urlVideoSet tradicional
//     if (!videosFromArray || videosFromArray.length === 0 || errorFromArray) {
//         let { data: videosFromSingle, error: errorFromSingle } = await vidget__supabase_instance
//             .from('vidget::videos')
//             .select(`title, url, metadata, id, video_set_id`)
//             .eq('metadata->>urlVideoSet', url);

//         if (errorFromSingle) {
//             console.error('Error fetching videos by URL:', errorFromSingle);
//             return null;
//         }

//         return videosFromSingle;
//     }

//     return videosFromArray;
// }



/** Get Video Data */
async function vidget__getVideoById(vidget__supabase_instance, vidget__video_id = null) {

    let query = vidget__supabase_instance
        .from('vidget::videos')
        .select('title, url, metadata, id')
        .eq('id', vidget__video_id)
        .single();

    const { data, error } = await query;

    if (error) {
        console.error('Error fetching videos:', error);
        return null;
    }

    return data;
}


async function vidget__bind_target_url(button, vidget_object) {
    if (button && vidget_object && vidget_object.metadata && vidget_object.metadata.productUrl) {
        let productUrl = vidget_object.metadata.productUrl.trim();

        // Verifica se a URL do produto começa com 'www'. Se sim, adiciona 'https://' na frente.
        // Isso também cobre os casos em que já começa com 'http://' ou 'https://'
        if (productUrl.startsWith('www')) {
            productUrl = 'https://' + productUrl;
        }

        // Atribui a URL ajustada ao href do botão e configura para abrir em uma nova aba
        button.setAttribute('href', productUrl);
        button.setAttribute('target', '_blank');
    } else {
        // Se productUrl não estiver definido, você pode optar por esconder o botão ou tratar de outra forma
        console.log('URL do produto não definida ou botão não fornecido.');
    }
}


async function vidget__bind_product_img(image, vidget_object) {
    image.src = (vidget_object.title) ? vidget_object.metadata.productImage : 'https://app.vidget.com.br/public/no-picture.png';
}

async function vidget__bind_product_data(elements, vidget_object) {
    elements[0].innerHTML = vidget_object.title;
    elements[1].innerHTML = (vidget_object.price) ? `R$ ${vidget_object.price}` : 'R$ 0,00';

    // Aplica as posições do overlay
    if (vidget_object.overlayPosition && vidget_object.overlayPosition.bottom) {
        vidget__container.style.bottom = vidget_object.overlayPosition.bottom;
    }
    if (vidget_object.overlayPosition && vidget_object.overlayPosition.left) {
        vidget__container.style.left = vidget_object.overlayPosition.left;
    }
    if (vidget_object.overlayPosition && vidget_object.overlayPosition.right) {
        vidget__container.style.right = vidget_object.overlayPosition.right;
    }

    // Aplica as cores do overlay ou o box-shadow
    if (!vidget_object.overlayColor) {
        vidget__container.style.boxShadow = vidget_object.boxShadow;
        vidget__container.style.borderColor = '';
        vidget__container.style.borderStyle = '';
        vidget__container.style.borderWidth = '';
    } else {
        vidget__container.style.boxShadow = '';
        vidget__container.style.borderColor = vidget_object.overlayColor;
        vidget__container.style.borderStyle = 'solid';
        vidget__container.style.borderWidth = '4px';
    }
}


let arrowsClicked = false;
let videoPlayer;
let currentVideoElement;
/** Initialize Video Overlay */
/** Initialize Video Overlay */
async function vidget__initializeVideoOverlay(vidget__supabase_instance, videoSet) {
    let videoContainer = document.querySelector('.vidget__video-container');
    if (!videoContainer) {
        videoContainer = document.createElement('div');
        videoContainer.className = 'vidget__video-container';
        vidget__container.appendChild(videoContainer);
    } else {
        videoContainer.innerHTML = ''; // Limpa o container para recarregar elementos
    }

    const { overlayColor, overlayPosition, productUrl, description, price, image_url, whatsappButton } = videoSet[0].metadata;

    applyOverlayStyles(overlayColor, overlayPosition);
    videoContainer.innerHTML = vidget__video_markup(productUrl, videoSet[0].metadata, videoSet[0].image_url_from_set);

    const closeButton = document.querySelector('.btn-close');
    closeButton.addEventListener('click', () => {
        console.log("Minimizando o widget.");
        toggleVidget();
    });

    const shareButton = document.getElementById('share-button');
    if (whatsappButton) {
        shareButton.style.display = 'block';
    } else {
        shareButton.style.display = 'none';
    }

    // Adiciona o evento de clique ao botão de compartilhamento
    shareButton.addEventListener('click', () => {
        toggleSharePopup();  // Função para exibir o popup
    });

    const prevArrow = document.querySelector('.prev-arrow');
    const nextArrow = document.querySelector('.next-arrow');

    // Mostra ou esconde as setas de navegação baseado na quantidade de vídeos
    if (videoSet.length > 1) {
        prevArrow.style.display = '';
        nextArrow.style.display = '';

        prevArrow.addEventListener('click', (event) => {
            event.stopPropagation();
            changeVideo(videoSet, -1);
            arrowsClicked = true; // Define que uma seta foi clicada
            event.preventDefault();
        });

        nextArrow.addEventListener('click', (event) => {
            event.stopPropagation();
            changeVideo(videoSet, 1);
            arrowsClicked = true; // Define que uma seta foi clicada
            event.preventDefault();
        });
    } else {
        prevArrow.style.display = 'none';
        nextArrow.style.display = 'none';
    }

    let videoPlayer = videoContainer.querySelector('video') || createVideoPlayer(videoContainer, videoSet[0].url);
    currentVideoElement = videoPlayer; // Atualiza o elemento de vídeo atual

    if (!videoPlayer) {
        videoPlayer = document.createElement('video');
        videoPlayer.autoplay = true;
        videoPlayer.muted = true;
        videoContainer.appendChild(videoPlayer);
    }

    if (videoSet.length > 0) {
        videoPlayer.src = `${vidget__storage_url}/${videoSet[0].url}`;
        videoPlayer.load();
        videoPlayer.oncanplay = () => {
            videoPlayer.play();
            initializeProgressBar(videoPlayer, 0);
        };
    }

    if (videoPlayer) {
        videoPlayer.onplay = async () => {
            const videoId = videoSet[0].id;
            await incrementViews(vidget__supabase_instance, videoId);
        };

        const soundOnButton = document.querySelector('#sound-on');
        const soundOffButton = document.querySelector('#sound-off');

        soundOnButton.addEventListener('click', () => {
            currentVideoElement.muted = false;
            updateSoundIcons(false);
        });

        soundOffButton.addEventListener('click', () => {
            currentVideoElement.muted = true;
            updateSoundIcons(true);
        });

        setTimeout(() => {
            const productButton = videoContainer.querySelector('[data-vidget-url]');
            if (productButton) {
                productButton.addEventListener('click', async () => {
                    const videoId = videoSet[0].id;
                    await incrementClicks(vidget__supabase_instance, videoId);
                });
            }
        }, 100);
    }
}


function toggleSharePopup() {
    // Remove popup existente se houver
    let existingPopup = document.getElementById('share-popup');
    if (existingPopup) {
        existingPopup.remove();
        return;
    }

    // Obtém os dados dos metadados do vídeo atual
    const currentMetadata = videoSet[currentVideoIndex].metadata;
    const numberWhats = currentMetadata.numberWhats || "";
    const msgDataWhats = currentMetadata.msgDataWhats || "";

    // Formata o número do WhatsApp (remove caracteres especiais)
    const formattedNumber = numberWhats.replace(/\D/g, '');

    // Obtém a URL atual e cria a mensagem completa
    const currentUrl = window.location.href;
    const fullMessage = `${msgDataWhats} ${currentUrl}`;

    // Cria a URL do WhatsApp com o número e mensagem
    const whatsappUrl = `https://wa.me/${formattedNumber}?text=${encodeURIComponent(fullMessage)}`;

    const sharePopup = document.createElement('div');
    sharePopup.id = 'share-popup';
    const isFullScreen = vidget__container.style.width === '530px';
    sharePopup.style.cssText = `
        width: 95%;
         max-width: ${isFullScreen ? '100%' : '369px'};
        padding: 10px;
        background: white;
        border-radius: 20px;
        position: absolute;
         top: ${isFullScreen ? '90%' : '80%'};
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        z-index: 10000;`;

    sharePopup.innerHTML = `
        <div style="width: 100%; justify-content: space-between; align-items: center; display: flex;">
            <div style="color: black; font-size: 16px; font-family: 'Inter'; font-weight: 500;">Compartilhar</div>
            <div style="width: 24px; height: 24px; padding: 7px; display: flex; justify-content: center; align-items: center; cursor: pointer;" id="close-share-popup">
                <div >
                <img style="width: 100%;" src="https://app.vidget.com.br/assets/public/i-close.svg">
                </div>
            </div>
        </div>
        <div style="display: flex; align-items: center; gap: 10px; width: 100%;">
            <div style="flex: 1; padding: 20px 10px; background: rgba(255, 255, 255, 0.12); border: 2px solid #8AB4F8;     max-width: 70%; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;" id="copy-link-button">
                <div style="color: black; font-size: 16px; font-family: 'Inter'; text-wrap: nowrap; text-overflow: ellipsis; max-width: 80%; overflow: hidden;">${currentUrl}</div>
                <div style="width: 24px; height: 24px;">
                    <img src="https://app.vidget.com.br/assets/public/i-copy-blue.svg">
                </div>
            </div>
            <div style="flex: 1; background: white; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;" id="whatsapp-share-button">
                <div style="width: 40px; height: 40px; position: relative;">
                    <img src="https://app.vidget.com.br/assets/public/i-whatsapp.svg" style="position: absolute; top: 7px; left: 8px; width: 24px; height: 24px;">
                </div>
                <div style="color: black; font-size: 12px; font-family: 'Inter';">Enviar no WhatsApp</div>
            </div>
        </div>`;

    const vidgetContainer = document.getElementById('vidget__container');
    vidgetContainer.appendChild(sharePopup);

    // Event listeners
    document.getElementById('close-share-popup').addEventListener('click', () => {
        sharePopup.remove();
    });

    document.getElementById('whatsapp-share-button').addEventListener('click', () => {
        window.open(whatsappUrl, '_blank');
    });

    document.getElementById('copy-link-button').addEventListener('click', (event) => {
        event.stopPropagation();
        navigator.clipboard.writeText(currentUrl).then(() => {
            alert('Link copiado para a área de transferência!');
        });
        event.stopPropagation();
    });
}




// function setupArrowListeners(videoSet) {
//     const prevArrow = document.querySelector('.prev-arrow');
//     const nextArrow = document.querySelector('.next-arrow');

//     prevArrow.addEventListener('click', (event) => handleArrowClick(event, videoSet, -1));
//     nextArrow.addEventListener('click', (event) => handleArrowClick(event, videoSet, 1));
// }

// /** Handle Arrow Clicks */
// function handleArrowClick(event, videoSet, direction) {
//     event.stopPropagation();  // Impede que o evento se propague para elementos pai
//     console.log("Seta clicada, direção:", direction);
//     changeVideo(videoSet, direction);
// }




function setupCloseButtonListener() {
    const closeButton = document.querySelector('.btn-close');
    if (closeButton) {
        closeButton.addEventListener('click', (event) => {
            event.stopPropagation();
            toggleVidget(event); // Passa 'event' como argumento
        });
    }
}


async function incrementViews(supabaseInstance, videoId) {
    try {
        const { data, error: fetchError } = await supabaseInstance
            .from('vidget::videos')
            .select('metadata')
            .eq('id', videoId)
            .single();

        if (fetchError) throw fetchError;

        // Incrementa a contagem de visualizações
        const updatedViews = (data.metadata.views || 0) + 1;

        data.metadata.views = updatedViews;


        // Captura a data atual no formato 'YYYY-MM-DD'
        const currentDate = new Date().toISOString().split('T')[0];

        // Verifica se já existe um objeto 'dailyViews' nos metadados
        if (!data.metadata.dailyViews) {
            data.metadata.dailyViews = {};
        }

        // Incrementa a contagem de visualizações para a data atual
        data.metadata.dailyViews[currentDate] = (data.metadata.dailyViews[currentDate] || 0) + 1;

        const { error: updateError } = await supabaseInstance
            .from('vidget::videos')
            .update({ metadata: data.metadata })
            .eq('id', videoId);

        if (updateError) throw updateError;

        console.log('Visualizações incrementadas com sucesso.');
    } catch (error) {
        console.error('Erro ao incrementar visualizações:', error);
    }
}

async function incrementClicks(supabaseInstance, videoId) {
    try {
        const { data, error: fetchError } = await supabaseInstance
            .from('vidget::videos')
            .select('metadata')
            .eq('id', videoId)
            .single();

        if (fetchError) throw fetchError;

        // Incrementa a contagem de cliques
        const updatedClicks = (data.metadata.clicks || 0) + 1;
        data.metadata.clicks = updatedClicks;

        // Captura a data atual no formato 'YYYY-MM-DD'
        const currentDate = new Date().toISOString().split('T')[0];

        // Verifica se já existe um objeto 'dailyClicks' nos metadados
        if (!data.metadata.dailyClicks) {
            data.metadata.dailyClicks = {};
        }

        // Incrementa a contagem de cliques para a data atual
        data.metadata.dailyClicks[currentDate] = (data.metadata.dailyClicks[currentDate] || 0) + 1;

        const { error: updateError } = await supabaseInstance
            .from('vidget::videos')
            .update({ metadata: data.metadata })
            .eq('id', videoId);

        if (updateError) throw updateError;

        console.log('Cliques incrementados com sucesso.');
    } catch (error) {
        console.error('Erro ao incrementar cliques:', error);
    }
}



function slideVideoElement(videoElement, direction) {
    const height = videoElement.clientHeight; // Pega a altura do vídeo para calcular o deslocamento
    const translateY = direction > 0 ? -height : height; // Determina a direção do slide

    // Ativa a transição para deslizar o vídeo
    videoElement.style.transition = 'transform 3s ease-in-out';
    videoElement.style.transform = `translateY(${translateY}px)`;

    // Aguarda a transição completar antes de resetar
    setTimeout(() => {
        // Desativa a transição para o reset
        videoElement.style.transition = 'none';
        // Reseta a posição sem visibilidade
        videoElement.style.transform = `translateY(${-translateY}px)`;

        // Delay curto para evitar flicker
        setTimeout(() => {
            videoElement.style.transition = 'transform 3s ease-in-out';
            videoElement.style.transform = 'translateY(0)';
        }, 50); // Delay curto para garantir que a transição seja reiniciada sem ser vista
    }, 3000); // Duração da transição para garantir que ela complete
}


let currentVideoIndex = 0; // Defina currentVideoIndex como uma variável global

function changeVideo(videoSet, direction) {
    const videoContainer = document.querySelector('.vidget__video-container');
    const currentVideo = videoContainer.querySelector('video');
    const nextVideoIndex = (currentVideoIndex + direction + videoSet.length) % videoSet.length;
    const nextVideoUrl = `${vidget__storage_url}/${videoSet[nextVideoIndex].url}`;

    const nextVideo = document.createElement('video');
    nextVideo.setAttribute('playsinline', '');
    nextVideo.setAttribute('webkit-playsinline', '');
    nextVideo.loop = true;
    nextVideo.src = nextVideoUrl;
    nextVideo.classList.add('video-item');
    nextVideo.autoplay = true;
    nextVideo.muted = currentVideo.muted;
    nextVideo.style.position = 'absolute';
    nextVideo.style.top = direction > 0 ? 'calc(100% + 4px)' : 'calc(-100% - 4px)';
    nextVideo.style.left = '0';
    nextVideo.style.width = '100%';
    nextVideo.style.height = '100%';
    nextVideo.style.transition = 'top 0.5s cubic-bezier(0.4, 0, 0.2, 1)';

    videoContainer.appendChild(nextVideo);
    currentVideoElement = nextVideo;

    // Atualiza ícones de som
    nextVideo.muted = currentVideo.muted;
    updateSoundIcons(nextVideo.muted);

    // Detecta se é iOS
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    // Função para garantir que o vídeo está reproduzindo
    const ensurePlayback = () => {
        const playPromise = nextVideo.play();
        if (playPromise !== undefined) {
            playPromise.catch(() => {
                nextVideo.play().catch(() => {});
            });
        }
    };

    // Garante que o próximo vídeo esteja carregado
    nextVideo.onloadeddata = () => {
        requestAnimationFrame(() => {
            nextVideo.style.top = '0';
            currentVideo.style.top = direction > 0 ? 'calc(-100% - 4px)' : 'calc(100% + 4px)';
            currentVideo.style.transition = 'top 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
            
            if (isIOS) ensurePlayback();
        });

        // Remove o vídeo anterior após a transição completa
        setTimeout(() => {
            currentVideo.remove();
            initializeProgressBar(nextVideo, nextVideoIndex);
            
            if (isIOS) ensurePlayback();
        }, 500);
    };

    // Força play no iOS após um curto delay
    if (isIOS) {
        setTimeout(ensurePlayback, 100);
    }

    currentVideoIndex = nextVideoIndex;
}



function cleanupVideo(videoElement) {
    videoElement.removeEventListener('timeupdate', updateProgress);
    videoElement.removeEventListener('ended', onVideoEnd);
}

function checkAndApplyShadowClass() {
    const vidgetContainer = document.getElementById('vidget__container');
    const boxShadowStyle = window.getComputedStyle(vidgetContainer).boxShadow;

    // Verifica se há algum box-shadow aplicado (diferente de 'none')
    if (boxShadowStyle !== 'none') {
        vidgetContainer.classList.add('shadow-applied');
    } else {
        vidgetContainer.classList.remove('shadow-applied');
    }
}

function applyOverlayStyles(borderColor, positionInput) {
    // Seleciona o container principal (#vidget__container) para aplicar os estilos
    const vidgetContainer = document.getElementById('vidget__container');

    // Adiciona '#' ao `borderColor` se ele estiver presente e não começar com '#'
    if (borderColor && !borderColor.startsWith('#')) {
        borderColor = `#${borderColor}`;
    }

    // Verifica se o borderColor está vazio ou nulo, e aplica box-shadow se for o caso
    if (!borderColor) {
        vidgetContainer.style.boxShadow = '2px 2px 12px 6px rgba(0, 0, 0, 0.25)';
        vidgetContainer.style.borderColor = '';
        vidgetContainer.style.borderStyle = '';
        vidgetContainer.style.borderWidth = '';
    } else {
        vidgetContainer.style.boxShadow = '';
        vidgetContainer.style.borderColor = borderColor;
        vidgetContainer.style.borderStyle = 'solid';
        vidgetContainer.style.borderWidth = '4px';
    }
    vidgetContainer.style.borderRadius = '1rem';
    checkAndApplyShadowClass();

    let positions;

    // Determina se positionInput é um objeto ou uma string e processa adequadamente
    if (typeof positionInput === 'object') {
        positions = positionInput; // Usa diretamente se for objeto
    } else if (typeof positionInput === 'string') {
        // Converte string em objeto se for string
        positions = positionInput.split(';').reduce((acc, curr) => {
            const [key, value] = curr.split(':');
            if (key && value) {
                acc[key.trim()] = value.trim();
            }
            return acc;
        }, {});
    } else {
        console.error('Unsupported type for positionInput:', typeof positionInput);
        return; // Encerra a função se o tipo não for suportado
    }

    // Aplica posições (como left, right, bottom) ao vidgetContainer, não ao container argumento
    Object.keys(positions).forEach(key => {
        const value = positions[key];
        if (value) {
            vidgetContainer.style[key] = value;
        }
    });
}





function createVideoPlayer(container, videoSrc) {
    const video = document.createElement('video');
    video.autoplay = true;
    video.muted = true; // Inicialmente mudo
    video.loop = true;
    video.playsInline = true;
    video.src = `${vidget__storage_url}/${videoSrc}`;
    container.appendChild(video);
    return video;
}

function loadVideoSequence(videoPlayer, videoSet) {
    let currentVideoIndex = 0;

    // Adiciona o source do primeiro vídeo
    videoPlayer.src = `${vidget__storage_url}/${videoSet[currentVideoIndex].url}`;

    // Remove o evento anterior se ele foi adicionado anteriormente
    videoPlayer.onended = null;

    // Adiciona o evento 'ended' ao video player
    videoPlayer.onended = () => {
        currentVideoIndex = (currentVideoIndex + 1) % videoSet.length;
        videoPlayer.src = `${vidget__storage_url}/${videoSet[currentVideoIndex].url}`;
        videoPlayer.play();
    };

    videoPlayer.play(); // Começa a reprodução do primeiro vídeo
}

function bindProductDetails(container, productUrl, description, price) {
    // Vincula o URL do produto
    const productButton = container.querySelector('a[data-vidget-url]');
    if (productButton) {
        productButton.href = productUrl.startsWith('http') ? productUrl : `https://${productUrl}`;
        productButton.style.display = productUrl ? '' : 'none';
    }

    // Vincula a descrição e preço do produto
    const productDescription = container.querySelector('p[data-vidget-description]');
    if (productDescription) productDescription.textContent = description || '';
    const productPrice = container.querySelector('p[data-vidget-price]');
    if (productPrice) productPrice.textContent = price ? `R$ ${price}` : '';
}


// cobrir erros de http do botão do video
async function vidget__bind_target_url(button, vidget_object) {
    if (button && vidget_object.metadata.productUrl) {
        let productUrl = vidget_object.metadata.productUrl;
        if (!productUrl.startsWith('http://') && !productUrl.startsWith('https://')) {
            productUrl = 'https://' + productUrl;
        }
        button.href = productUrl;
        button.target = '_blank';
    }
}

// Adicione isso ao final do seu arquivo app.js
const vidgetContainer = document.getElementById('vidget__container');
let isExpanded = true;
let dragStartTime;
let isDragging = false;

vidgetContainer.addEventListener('mousedown', (e) => {
    if (e.target.tagName === 'BUTTON') return;

    dragStartTime = new Date().getTime();
    if (vidgetContainer.classList.contains('minimized')) {
        let startX = e.clientX;
        let startY = e.clientY;
        let origX = vidgetContainer.offsetLeft;
        let origY = vidgetContainer.offsetTop;
        let deltaX = startX - origX;
        let deltaY = startY - origY;

        function onMouseMove(e) {
            isDragging = true;
            vidgetContainer.style.left = (e.clientX - deltaX) + 'px';
            vidgetContainer.style.top = (e.clientY - deltaY) + 'px';
        }

        document.addEventListener('mousemove', onMouseMove);
    }

    function onMouseUp(e) {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
        let endTime = new Date().getTime();

        if (!isDragging || endTime - dragStartTime < 200) {
            if (vidgetContainer.classList.contains('minimized')) {
                toggleVidget();
            } else {
                const videoElement = vidgetContainer.querySelector('video');
                if (videoElement) {
                    if (videoElement.paused) {
                        videoElement.play();
                    } else {
                        videoElement.pause();
                    }
                }
            }
        }
        isDragging = false;
    }

    document.addEventListener('mouseup', onMouseUp);
});

// Adiciona eventos de swipe
let touchStartY = 0;
const SWIPE_THRESHOLD = 50;

vidgetContainer.addEventListener('touchstart', (e) => {
    if (vidgetContainer.classList.contains('minimized')) return;
    touchStartY = e.touches[0].clientY;
});

vidgetContainer.addEventListener('touchmove', (e) => {
    if (vidgetContainer.classList.contains('minimized')) return;
    e.preventDefault();
});

vidgetContainer.addEventListener('touchend', (e) => {
    if (vidgetContainer.classList.contains('minimized')) return;

    const touchEndY = e.changedTouches[0].clientY;
    const swipeDistance = touchEndY - touchStartY;

    if (Math.abs(swipeDistance) >= SWIPE_THRESHOLD) {
        if (swipeDistance > 0) {
            changeVideo(videoSet, -1);
        } else {
            changeVideo(videoSet, 1);
        }
    }
});

function toggleProgressBarVisibility(show) {
    const progressBarContainer = document.querySelector('.vidget__progress-container');
    if (progressBarContainer) {
        progressBarContainer.style.display = show ? 'flex' : 'none';
    }
}

function updateVideoStyles() {
    const vidgetContainer = document.getElementById('vidget__container');
    const videoElement = vidgetContainer.querySelector('video');

    // Verifica se borderColor está definido e aplica a classe 'with-border'
    if (vidgetContainer.style.borderColor) {
        videoElement.classList.add('with-border');
    } else {
        videoElement.classList.remove('with-border');
    }
}



let storedHorizontalPosition = null; // Armazena a posição horizontal atual (left ou right)
let toggleLock = false;

function toggleVidget() {
    if (toggleLock) return;
    toggleLock = true;

    console.log("Alternando estado do vidget");
    if (!videoSet.length || typeof currentVideoIndex === 'undefined' || !videoSet[currentVideoIndex]) {
        console.error("Dados do vídeo não disponíveis.");
        toggleLock = false;  // Libera o toggle para novas chamadas
        toggleProgressBarVisibility(false); // Esconde a barra de progresso se não há dados
        return; // Sai da função se não houver dados
    }

    const vidgetContainer = document.getElementById('vidget__container');
    const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
    const videoElement = vidgetContainer.querySelector('video');
    const articleElement = vidgetContainer.querySelector('article');
    const metadata = videoSet[currentVideoIndex].metadata;
    const expandMode = metadata.expandMode;

    if (vidgetContainer.classList.contains('minimized')) {
        if (expandMode === 'full') {
            expandToFullScreen(vidgetContainer, videoContainer, videoElement, articleElement);
        } else {
            expandToFreeMode(vidgetContainer, videoContainer, videoElement, articleElement);
        }
        toggleProgressBarVisibility(true); // Mostra a barra de progresso ao expandir
        updateVideoStyles();  // Atualiza estilos de vídeo sempre, independente da existência de borderColor

        // Verifica se o article existe antes de manipular
        if (articleElement) {
            articleElement.style.marginLeft = videoContainer.style.borderColor ? "0" : "3.33px";
        }
    } else {
        minimizeVidget(vidgetContainer, videoContainer, videoElement, articleElement);
        toggleProgressBarVisibility(false); // Esconde a barra de progresso ao minimizar

        // Verifica se o article existe antes de manipular
        if (articleElement) {
            articleElement.style.marginLeft = "0";  // Remove a margem ao minimizar
        }
    }

    setTimeout(() => {
        toggleLock = false;  // Libera o toggle após um atraso para garantir a conclusão da transição
    }, 500);  // Ajuste o tempo conforme necessário para sua transição
}


function minimizeVidget(vidgetContainer, videoContainer, videoElement, articleElement) {
    console.log("Minimizing the vidget");
    resetStyles(vidgetContainer, videoContainer, videoElement, articleElement);

    // Re-apply the overlayPosition to maintain the position when minimized
    const metadata = videoSet[currentVideoIndex].metadata;
    const overlayPosition = metadata.overlayPosition;
    applyOverlayStyles(null, overlayPosition);

    const shareButton = document.getElementById('share-button' && 'share-popup');
    if (shareButton) {
        shareButton.style.display = 'none';
    }
    vidgetContainer.classList.add('minimized');
}

function updateSharePopupStyles() {
    const sharePopup = document.getElementById('share-popup');
    if (sharePopup) {
        const isFullScreen = vidget__container.style.width === '530px';

        sharePopup.style.maxWidth = isFullScreen ? '100%' : '369px';
        sharePopup.style.top = isFullScreen ? '90%' : '80%';
    }
}

function updateSoundIcons(isMuted) {
    const soundOnButton = document.querySelector('#sound-on');
    const soundOffButton = document.querySelector('#sound-off');
    if (soundOnButton && soundOffButton) {
        if (isMuted) {
            soundOnButton.style.display = '';
            soundOffButton.style.display = 'none';
        } else {
            soundOnButton.style.display = 'none';
            soundOffButton.style.display = '';
        }
    }
}

function expandToFullScreen(vidgetContainer, videoContainer, videoElement, articleElement) {
    console.log("Expandindo em modo tela cheia");
    document.getElementById('fullScreenOverlay').style.display = 'block';  // Mostra o overlay
    document.body.style.overflow = 'hidden';  // Impede rolagem da página
    vidgetContainer.style.position = 'fixed';
    vidgetContainer.style.top = '50%';
    vidgetContainer.style.left = '50%';
    vidgetContainer.style.transform = 'translate(-50%, -50%)';
    vidgetContainer.style.width = '530px';
    vidgetContainer.style.height = '98vh';
    videoContainer.style.width = '100%';

    const metadata = videoSet[currentVideoIndex].metadata;
    const shareButton = document.getElementById('share-button');
    if (shareButton && metadata.whatsappButton) {
        shareButton.style.display = 'block';
    }

    updateSharePopupStyles();

    if (articleElement) {
        articleElement.style.display = 'block';
        articleElement.classList.add('full-mode-article');  // Adiciona a classe
        articleElement.style.fontSize = '2em';
        articleElement.style.height = 'fit-content';
    }
    videoElement.muted = false;
    updateSoundIcons(false);
    videoElement.play();
    vidgetContainer.classList.remove('minimized');
}

function expandToFreeMode(vidgetContainer, videoContainer, videoElement, articleElement) {
    console.log("Expandindo em modo livre");
    resetStyles(vidgetContainer, videoContainer, videoElement, articleElement);  // Reseta os estilos se estava anteriormente em full screen
    videoContainer.style.width = '100%';
    videoContainer.style.height = '100%';

    const metadata = videoSet[currentVideoIndex].metadata;
    const overlayPosition = metadata.overlayPosition;
    applyOverlayStyles(null, overlayPosition);

    const shareButton = document.getElementById('share-button');
    if (shareButton && metadata.whatsappButton) {
        shareButton.style.display = 'block';
    }

    if (window.innerWidth < 768) {
        vidgetContainer.style.right = '0';
        vidgetContainer.style.left = '0';
    }

    if (articleElement) {
        articleElement.style.display = 'block';
    }

    videoElement.muted = false;
    updateSoundIcons(false);
    videoElement.play();
    vidgetContainer.classList.remove('minimized');
}


function resetStyles(vidgetContainer, videoContainer, videoElement, articleElement) {
    document.getElementById('fullScreenOverlay').style.display = 'none';  // Esconde o overlay
    document.body.style.overflow = '';  // Restaura rolagem da página
    vidgetContainer.style.position = '';
    vidgetContainer.style.top = '';
    vidgetContainer.style.left = '';
    vidgetContainer.style.transform = '';
    vidgetContainer.style.width = '';
    vidgetContainer.style.height = '';
    videoContainer.style.width = '';
    videoContainer.style.height = '';
    vidgetContainer.style.right = '';
    if (articleElement) {
        articleElement.style.display = 'none';
        articleElement.classList.remove('full-mode-article');  // Remove a classe
    }
    videoElement.muted = true;
}

// Função auxiliar para verificar se o elemento possui box-shadow
function hasBoxShadow(element) {
    const style = window.getComputedStyle(element);
    return style.boxShadow !== 'none' && style.boxShadow !== '';
}


// function toggleVidget() {
//     console.log("Tentando alternar o vidget, arrowsClicked:", arrowsClicked, "toggleLock:", toggleLock);

//     // Permitir fechar ou expandir mesmo durante o bloqueio, se especificado
//     if (toggleLock && !allowToggleDuringTransition) {
//         console.log('Operação abortada devido ao bloqueio ativo');
//         return;
//     }

//     executeToggle();
// }

// function executeToggle() {
//     toggleLock = true;  // Bloqueia novas chamadas até que a transição esteja completa
//     allowToggleDuringTransition = false;  // Reseta a permissão para ações durante a transição

//     console.log("Alternando estado do vidget");

//     const vidgetContainer = document.getElementById('vidget__container');
//     const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
//     const videoElement = vidgetContainer.querySelector('video');
//     const articleElement = vidgetContainer.querySelector('article');
//     const metadata = videoSet[currentVideoIndex].metadata;
//     const expandMode = metadata.expandMode;

//     if (vidgetContainer.classList.contains('minimized')) {
//         if (expandMode === 'full') {
//             expandToFullScreen(vidgetContainer, videoContainer, videoElement, articleElement);
//         } else {
//             expandToFreeMode(vidgetContainer, videoContainer, videoElement, articleElement);
//         }
//         allowToggleDuringTransition = true;  // Permite ação durante a transição
//     } else {
//         minimizeVidget(vidgetContainer, videoContainer, videoElement, articleElement);
//         allowToggleDuringTransition = true;  // Permite ação durante a transição
//     }

//     // Libera o bloqueio após a transição
//     setTimeout(() => {
//         toggleLock = false;
//         console.log("Toggle lock liberado após a transição");
//     }, 13000); // Ajuste conforme a duração da animação ou transição
// }
// function toggleVidget() {
//     console.log("Alternando estado do vidget");
//     if (!videoSet.length || typeof currentVideoIndex === 'undefined' || !videoSet[currentVideoIndex]) {
//         console.error("Dados do vídeo não disponíveis.");
//         return; // Sai da função se não houver dados
//     }

//     const vidgetContainer = document.getElementById('vidget__container');
//     const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
//     const videoElement = vidgetContainer.querySelector('video');
//     const articleElement = vidgetContainer.querySelector('article');

//     const metadata = videoSet[currentVideoIndex].metadata;
//     const expandMode = metadata.expandMode;

//     if (vidgetContainer.classList.contains('minimized')) {
//         console.log("Expandindo o vidget");

//         // Modo de expansão em tela cheia
//         if (expandMode === 'full') {
//             console.log("Expandindo em modo tela cheia");
//             document.body.style.overflow = 'hidden'; // Impede rolagem da página
//             vidgetContainer.style.position = 'fixed';
//             vidgetContainer.style.top = '0';
//             vidgetContainer.style.left = '0';
//             vidgetContainer.style.width = '100vw';
//             vidgetContainer.style.height = '100vh';
//             vidgetContainer.style.backgroundColor = 'rgba(0,0,0,0.5)'; // Fundo esmaecido
//             videoContainer.style.width = '100%';
//             videoContainer.style.height = '100%';
//             articleElement.style.width = '100%';
//             articleElement.style.display = '';
//             videoElement.muted = false;
//             videoElement.play();
//         } else {
//             // Modo de expansão livre
//             videoContainer.style.width = '';
//             videoContainer.style.height = '';
//             videoElement.style.width = '';
//             videoElement.style.height = '';
//             if (hasBoxShadow(videoContainer)) {
//                 console.log("Elemento possui box-shadow, ajustando largura do artigo para 103%");
//                 articleElement.style.width = '103%';
//                 videoContainer.classList.remove('no-box-shadow');
//             } else {
//                 console.log("Elemento não possui box-shadow, ajustando largura do artigo para 100%");
//                 articleElement.style.width = '100%';
//                 videoContainer.classList.add('no-box-shadow');
//             }
//             articleElement.style.display = '';
//             videoElement.muted = false;
//             videoElement.play();
//             vidgetContainer.style.bottom = '20px'; // Adiciona a distância fixa do bottom
//             vidgetContainer.style.top = '';
//             vidgetContainer.style.position = ''; // Remove fixed positioning if previously set
//             vidgetContainer.style.backgroundColor = ''; // Clear background dimming if previously set
//             document.body.style.overflow = ''; // Re-enable scrolling
//         }
//         vidgetContainer.classList.remove('minimized');
//     } else {
//         console.log("Minimizando o vidget");
//         minimizeVidget();
//     }
// }

// function minimizeVidget() {
//     const vidgetContainer = document.getElementById('vidget__container');
//     const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
//     const articleElement = vidgetContainer.querySelector('article');
//     const videoElement = vidgetContainer.querySelector('video');

//     // Armazenar a posição horizontal atual
//     storedHorizontalPosition = {};
//     if (vidgetContainer.style.left !== '') {
//         storedHorizontalPosition.left = vidgetContainer.style.left;
//     } else if (vidgetContainer.style.right !== '') {
//         storedHorizontalPosition.right = vidgetContainer.style.right;
//     }

//     if (window.innerWidth < 768) {
//         if (hasBoxShadow(videoContainer)) {
//             videoContainer.style.setProperty('width', '18vw', 'important');
//             videoContainer.style.setProperty('height', '18vw', 'important');
//         } else {
//             videoContainer.style.setProperty('width', '20vw', 'important');
//             videoContainer.style.setProperty('height', '20vw', 'important');
//         }
//     } else {
//         videoContainer.style.width = '';
//         videoContainer.style.height = '';
//     }
//     articleElement.style.width = '100%';  // Assegure que a largura volte para 100% quando minimizado
//     articleElement.style.display = 'none';
//     videoElement.muted = true;
//     vidgetContainer.classList.add('minimized');
// }



// function minimizeVidget() {
//     const vidgetContainer = document.getElementById('vidget__container');
//     const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
//     const articleElement = vidgetContainer.querySelector('article');
//     const videoElement = vidgetContainer.querySelector('video');

//     // Armazenar a posição horizontal atual
//     storedHorizontalPosition = {};
//     if (vidgetContainer.style.left !== '') {
//         storedHorizontalPosition.left = vidgetContainer.style.left;
//     } else if (vidgetContainer.style.right !== '') {
//         storedHorizontalPosition.right = vidgetContainer.style.right;
//     }

//     if (window.innerWidth < 768) {
//         if (hasBoxShadow(videoContainer)) {
//             videoContainer.style.setProperty('width', '18vw', 'important');
//             videoContainer.style.setProperty('height', '18vw', 'important');
//         } else {
//             videoContainer.style.setProperty('width', '20vw', 'important');
//             videoContainer.style.setProperty('height', '20vw', 'important');
//         }
//     } else {
//         videoContainer.style.width = '';
//         videoContainer.style.height = '';
//     }
//     articleElement.style.width = '100%';  // Assegure que a largura volte para 100% quando minimizado
//     articleElement.style.display = 'none';
//     videoElement.muted = true;
//     vidgetContainer.classList.add('minimized');
// }


// function toggleVidget() {
//     console.log("Alternando estado do vidget");
//     const vidgetContainer = document.getElementById('vidget__container');
//     const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
//     const videoElement = vidgetContainer.querySelector('video');
//     const articleElement = vidgetContainer.querySelector('article');

//     if (vidgetContainer.classList.contains('minimized')) {
//         console.log("Expandindo o vidget");
//         videoContainer.style.width = '';
//         videoContainer.style.height = '';
//         videoElement.style.width = '';
//         videoElement.style.height = '';
//         if (hasBoxShadow(videoContainer)) {
//             console.log("Elemento possui box-shadow, ajustando largura do artigo para 103%");
//             articleElement.style.width = '103%';
//             videoContainer.classList.remove('no-box-shadow');
//         } else {
//             console.log("Elemento não possui box-shadow, ajustando largura do artigo para 100%");
//             articleElement.style.width = '100%';
//             videoContainer.classList.add('no-box-shadow');
//         }
//         articleElement.style.display = '';
//         videoElement.muted = false;
//         videoElement.play();
//         vidgetContainer.classList.remove('minimized');
//         vidgetContainer.style.bottom = '20px'; // Adiciona a distância fixa do bottom
//         vidgetContainer.style.top = ''; // Garante que a posição top não interfira

//         // Restaurar a posição horizontal armazenada
//         if (storedHorizontalPosition) {
//             if (storedHorizontalPosition.left !== undefined) {
//                 vidgetContainer.style.left = storedHorizontalPosition.left;
//                 vidgetContainer.style.right = '';
//             } else if (storedHorizontalPosition.right !== undefined) {
//                 vidgetContainer.style.right = storedHorizontalPosition.right;
//                 vidgetContainer.style.left = '';
//             }
//         }
//     } else {
//         console.log("Minimizando o vidget");

//         // Armazenar a posição horizontal atual
//         storedHorizontalPosition = {};
//         if (vidgetContainer.style.left !== '') {
//             storedHorizontalPosition.left = vidgetContainer.style.left;
//         } else if (vidgetContainer.style.right !== '') {
//             storedHorizontalPosition.right = vidgetContainer.style.right;
//         }

//         if (window.innerWidth < 768) {
//             if (hasBoxShadow(videoContainer)) {
//                 videoContainer.style.setProperty('width', '18vw', 'important');
//                 videoContainer.style.setProperty('height', '18vw', 'important');
//             } else {
//                 videoContainer.style.setProperty('width', '20vw', 'important');
//                 videoContainer.style.setProperty('height', '20vw', 'important');
//             }
//         } else {
//             videoContainer.style.width = '';
//             videoContainer.style.height = '';
//         }
//         articleElement.style.width = '100%';  // Assegure que a largura volte para 100% quando minimizado
//         articleElement.style.display = 'none';
//         videoElement.muted = true;
//         vidgetContainer.classList.add('minimized');
//     }
// }



// function updateVidgetStyles() {
//     setTimeout(() => {
//         console.log("Atualizando estilos do vidget");
//         const vidgetContainer = document.getElementById('vidget__container');
//         const videoContainer = vidgetContainer.querySelector('.vidget__video-container');
//         const videoElement = vidgetContainer.querySelector('video');
//         const articleElement = vidgetContainer.querySelector('#vidget__container article');

//         if (vidgetContainer.classList.contains('minimized')) {
//             console.log("Vidget está minimizado");
//             if (window.innerWidth < 768) {
//                 if (hasBoxShadow(videoContainer)) {
//                     console.log("Elemento possui box-shadow, ajustando largura do artigo para 103%");
//                     articleElement.style.setProperty('width', '103%', 'important');
//                     videoContainer.classList.remove('no-box-shadow');
//                     videoContainer.style.setProperty('width', '18vw', 'important');
//                     videoContainer.style.setProperty('height', '18vw', 'important');
//                 } else {
//                     console.log("Elemento não possui box-shadow, ajustando largura do artigo para 100%");
//                     articleElement.style.setProperty('width', '100%', 'important');
//                     videoContainer.classList.add('no-box-shadow');
//                     videoContainer.style.setProperty('width', '20vw', 'important');
//                     videoContainer.style.setProperty('height', '20vw', 'important');
//                 }
//             } else {
//                 videoContainer.style.width = '';
//                 videoContainer.style.height = '';
//             }
//             articleElement.style.display = 'none';
//             videoElement.muted = true;
//         } else {
//             console.log("Vidget não está minimizado");
//             videoContainer.style.width = '';
//             videoContainer.style.height = '';
//             articleElement.style.width = '';
//             articleElement.style.display = '';
//             videoElement.muted = false;
//         }
//     }, 500);
// }



/**
 * Init GTM Script
 */

// var script = document.createElement('script');
// script.type = 'text/javascript';
// script.src = 'https://app.vidget.com.br/UI-Vidget/app.js?v=' + new Date().getTime() + '&location=' + encodeURIComponent(window.location);
// document.body.appendChild(script);