🇺🇦 Let’s support the people of Ukraine, together.

import wixAnimations from 'wix-animations';

$w.onReady(function () {
    initIntro();
    initSkipOpening();
    monitorMainVideoProgress();
});

function initIntro() {
    showIntroVideo();

    $w('#introCoverShape').onClick(() => {
        hideStartScreen();

        setTimeout(() => {
            playMainVideo();
        }, 1300) // Time of delay
    });

}

function showIntroVideo() {
    wixAnimations.timeline()
        .add($w('#introVideo'), { opacity: 1, duration: 2000 })
        .play();
}

let videoEnded = false;

function monitorMainVideoProgress() {
   
    $w('#mainVideo').onProgress(event => {
        console.log(event)
        const videoEndedTime = 22 //second
        const currentTime = event.target.currentTime;

        if (currentTime > videoEndedTime) {
            if (!videoEnded) {
                showEndScreen();
                videoEnded = true;
            }
        } else {
            videoEnded = false;
        }
    });

    //  $w('#mainVideo').onEnded(() => {
    //      showEndScreen();
    //  });

}

function hideStartScreen() {
    wixAnimations.timeline().add($w('#startScreen'), { opacity: 0, duration: 2000 }).play();
}

function showEndScreen() {
    wixAnimations.timeline().add($w('#videoScreen'), { opacity: 0, duration: 1000 }).play(); // Hide main video
    $w('#pageSection01').expand();
    hideSkipOpeningButton();
}

function playMainVideo() {
    const video = $w('#mainVideo');
    video.unmute();
    video.play();

    const soundBtn = $w('#soundBtn');

    soundBtn.onClick(() => {
        if (video.isMuted) {
            video.unmute();
            soundBtn.label = 'Turn Off Sound';
        } else {
            video.mute();
            soundBtn.label = 'Turn On Sound';
        }
    })
}

function pauseMainVideo() {
    $w('#mainVideo').mute();
    $w('#mainVideo').pause();
}

function hideSkipOpeningButton() {
    $w('#skipOpeningBtn').hide('fade', { duration: 1000 });
}

function initSkipOpening() {
    $w('#skipOpeningBtn').onClick(() => {
        hideStartScreen();
        showEndScreen();
        pauseMainVideo();
        hideSkipOpeningButton();
    })
}