padmaEmbeds/example/example.js

var slides = [],
    slideData = [],
    current = 0,
    activeAudio,
    timeout;


init()

function init() {
    document.querySelectorAll('.slide').forEach(function(slide) {
        slides.push(slide)
        var data = slideData[slides.length - 1] = load_slide(slide);
        data.idx = slides.length - 1;
        if (data.video && data.video.length) {
            data.embed = init_embed(data)
        }
        if (data.audio) {
            data.audioEmbed = init_audio_embed(data)
        }
    })
    go(0)
}

function go(idx) {
    var old = current
    slides[current].style.zIndex = 0
    slides[idx].style.zIndex = 10
    current = idx
    if (timeout) {
        clearTimeout(timeout)
        timeout = null
    }
    timeout = setTimeout(next, Math.round(slides[current].dataset.duration) * 1000)

    stop(old)
    start(current)
}

function next() {
    var idx = (current + 1) % slides.length
    console.log(current, idx)
    go(idx)
}

function previous() {
    var idx = (current - 1) % slides.length
    if (idx < 0) {
        idx += slides.length
    }
    go(idx)
}

function start(idx) {
    var data = slideData[idx]
    console.log('start', current, data)
    if (data.zooms) {
        start_zoom(data)
    } else if (data.video && data.video.length) {
        start_video(data)
    }
    if (data.audioContainer) { // if there is an audio container, we always stop current audio
        reset_active_audio();
    }
    if (data.audio) {
        start_audio(data)
    }
}

function stop(idx) {
    var data = slideData[idx]
    console.log(current, data)
    if (data.zooms) {
        reset_zoom(data)
    } else if (data.video && data.video.length) {
        reset_video(data)
    }
    if (data.audio && !data.audioContinue) {
        reset_audio(data)
    }
}

function load_urls(dataset) {
    var urls = [], idx = 0
    while (dataset['url_' + idx]) {
        urls.push(dataset['url_' + idx])
        idx += 1
    }
    return urls
}

function load_slide(slide) {
    var data = {}
    data.duration = slide.dataset.duration
    var video = slide.querySelector('.video')
    if (video) {
        data.video = load_urls(video.dataset)
        data.videoVolume = video.dataset.volume ? parseFloat(video.dataset.volume) : 1        
        data.container = video

        // assumes documents if length > 1
        if (data.video.length > 1) {
            data.zooms = data.video.map(url => url.split('/').pop().split('#')[0].split(',').map(a => Math.round(a)))
        }
    }
    var audio = slide.querySelector('.audio')
    if (audio) {
        data.audio = audio.dataset.url // audio does not need to be an array
        data.audioVolume = audio.dataset.volume ? parseFloat(audio.dataset.volume) : 1
        data.audioContainer = audio
        console.log('continue', audio.dataset.continue)
        data.audioContinue = !!audio.dataset.continue
    }
    return data
}

function init_embed(data) {
    var embed = window.currentEmbed = new PandoraEmbed({
        id: 'slide-' + data.idx,
        url: data.video[0],
        container: data.container
    });
    embed.on('init', function(data) {

    });
    embed.on('playing', function(positionData) {
        if (!slideData[data.idx].start) {
            slideData[data.idx].start = positionData.position;
        }
    });

    return embed;
}

function init_audio_embed(data) {
    return new PandoraEmbed({
        id: 'slide-audio-' + data.idx,
        url: data.audio,
        container: data.audioContainer 
    })
}

window.addEventListener('blur', function(){
    setTimeout(function(){
        // using the 'setTimout' to let the event pass the run loop
        if (document.activeElement instanceof HTMLIFrameElement) {
            window.focus();
        }
    },0);
}, false);


function reset_zoom(data) {
    data.zoomTimeouts.forEach(timeout => clearTimeout(timeout))
    data.embed.postMessage('options', {
        'area': data.zooms[0]
    })
}

function start_zoom(data) {
    // console.log('start zoon', Math.round(1000 * data.duration / 2))

    for (var i=1; i<data.zooms.length; i++) {
        data.zoomTimeouts = [];
        (function(j) {
            data.zoomTimeouts.push(setTimeout(function() {
                data.embed.postMessage('options', {
                    'area': data.zooms[j]
                })
            }, Math.round(1000 * (data.duration / data.zooms.length) * j)))
        })(i)
    }
}


function start_video(data) {
    data.embed.postMessage('options', {
        'paused': false,
        'volume': data.videoVolume
    })
}

function start_audio(data) {
    data.audioEmbed.postMessage('options', {
        'paused': false,
        'volume': data.audioVolume
    })
    activeAudio = data
}

function reset_video(data) {
    data.embed.postMessage('options', {
        'paused': true,
        'position': data.start || 0
    })
}

function reset_audio(data) {
    data.audioEmbed.postMessage('options', {
        'paused': true,
        'position': 0 //FIXME: figure correct audio reset
    })
    activeAudio = null;
}

function reset_active_audio() {
    if (activeAudio) {
        reset_audio(activeAudio)
    }
}

document.addEventListener('keydown', function(event) {
    if (event.key == 'ArrowRight') {
        next()
        event.preventDefault()
    } else if (event.key == 'ArrowLeft') {
        previous()
        event.preventDefault()
    }
}, false)