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.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 = [], 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)