padmaEmbeds/example/example.js

class Slide {
    constructor(slide, idx) {
        this.isInit = false
        this.el = slide
        this.idx = idx
        this.duration = slide.dataset.duration
        const video = slide.querySelector('.video')
        if (video) {
            this.video = load_urls(video.dataset)
            this.videoVolume = video.dataset.volume ? parseFloat(video.dataset.volume) : 1
            this.videoContainer = video
            if (this.video.length > 1) {
                this.zooms = this.video.map(url => url.split('/').pop().split('#')[0].split(',').map(a => Math.round(a)))
            }
        }
        const audio = slide.querySelector('.audio')
        if (audio) {
            this.audio = audio.dataset.url // audio does not need to be an array
            this.audioVolume = audio.dataset.volume ? parseFloat(audio.dataset.volume) : 1
            this.audioContainer = audio
            this.audioContinue = !!audio.dataset.continue
        }
        this.initEmbeds()        
        return this      
    }

    initEmbeds() {
        if (this.video) {
            const videoEmbed = this.videoEmbed = new PandoraEmbed({
                id: 'slide-' + this.idx,
                url: this.video[0],
                container: this.videoContainer
            })

            videoEmbed.on('init', (data) => {
                this.isVideoInit = true
            })

            videoEmbed.on('playing', (positionData) => {
                if (!this.videoStart) {
                    this.videoStart = positionData.position
                }
            })
        }

        if (this.audio) {
            const audioEmbed = this.audioEmbed = new PandoraEmbed({
                id: 'audio-' + this.idx,
                url: this.audio,
                container: this.audioContainer
            })

            audioEmbed.on('init', (data) => {
                this.isAudioInit = true
            })

            audioEmbed.on('playing', (positionData) => {
                if (!this.audioStart) {
                    this.audioStart = positionData.position
                }
            })
        }

        return this;
    }

    sendToBack() {
        this.el.style.zIndex = 0
        return this
    }

    bringToFront() {
        this.el.style.zIndex = 10
        return this
    }

    start() {
        if (this.zooms) {
            this.startZoom()
        } else if (this.video && this.video.length) {
            this.startVideo()
        }
        if (this.audioContainer) { // if there is an audio container, we always stop current audio
            reset_active_audio()
        }
        if (this.audio) {
            this.startAudio()
        }
        return this
    }

    stop() {
        if (this.zooms) {
            this.resetZoom()
        } else if (this.video && this.video.length) {
            this.resetVideo()
        }
        if (this.audio && !this.audioContinue) {
            this.resetAudio()
        }        
        return this
    }

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

    startVideo() {
        this.videoEmbed.postMessage('options', {
            'paused': false,
            'volume': this.videoVolume
        })
        return this
    }

    startAudio() {
        this.audioEmbed.postMessage('options', {
            'paused': false,
            'volume': this.audioVolume
        })
        activeAudio = this
        return this
    }

    resetZoom() {
        this.zoomTimeouts.forEach(timeout => clearTimeout(timeout))
        this.videoEmbed.postMessage('options', {
            'area': this.zooms[0]
        })
        return this
    }

    resetVideo() {
        this.videoEmbed.postMessage('options', {
            'paused': true,
            'position': this.start || 0
        })
        return this
    }

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

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


init()

function init() {
    document.querySelectorAll('.slide').forEach(function(slide, idx) {
        slides.push(new Slide(slide, idx))
    })
    go(0)
}

function go(idx) {
    var old = current
    slides[current].sendToBack()
    slides[idx].bringToFront()
    current = idx
    if (timeout) {
        clearTimeout(timeout)
        timeout = null
    }
    timeout = setTimeout(next, Math.round(slides[current].duration) * 1000)

    slides[old].stop()
    slides[current].start()
}

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 load_urls(dataset) {
    var urls = [], idx = 0
    while (dataset['url_' + idx]) {
        urls.push(dataset['url_' + idx])
        idx += 1
    }
    return urls
}


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_active_audio() {
    if (activeAudio) {
        activeAudio.resetAudio()
    }
}

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