padmaEmbeds/example/example.js

217 lines
5.0 KiB
JavaScript

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.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.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
})
}
function start_audio(data) {
data.audioEmbed.postMessage('options', {
'paused': false
})
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)