async function formClick(ev) {
    ev.preventDefault();

    let { target } = ev;

    let fetched = await fetch(target.action, {
        'method': 'POST',
        'body': new FormData(target)
    });

    let json = await fetched.json();

    document.querySelector('.form-message').textContent = json.message;

    if (json.redirect) {
        setTimeout(function () {
            window.location.href = json.redirect;
        }, 2000);
    }
}

function moveBar(e, bar, vid) {
    let rect = bar.getBoundingClientRect();
    let prog = ((e.pageX - rect.x) / rect.width);

    vid.currentTime = prog * vid.duration;
}

function prog(vid, bar) {
    bar.querySelector('div').style.width = `${vid.currentTime / vid.duration * 100}%`;
}

function controls(vid) {
    let bar = vid.querySelector('.progressbar');
    let video = vid.querySelector('video');
    let play = vid.querySelector('.play');

    video.onclick = play.onclick = () => {

        play.querySelector('img').src = !video.paused ? '/static/img/play.svg' : '/static/img/stop.svg';

        if (video.paused) {
            video.play();
            return;
        }
        video.pause();
    }

    bar.onclick = (e) => moveBar(e, bar, video);

    video.addEventListener('timeupdate', () => prog(video,bar));
}

window.onload = function () {
    document.addEventListener('submit', formClick);
    for (let vid of document.querySelectorAll('.video-wrapper')) {
        controls(vid);
    }
}