90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
|
|
||
|
|
(function() {
|
||
|
|
|
||
|
|
window.jsonToHTML = getHTML
|
||
|
|
|
||
|
|
function getHTML(slideData) {
|
||
|
|
let video = audio = ''
|
||
|
|
if (!slideData.title) slideData.title = ''
|
||
|
|
title = `
|
||
|
|
<div class="title">
|
||
|
|
${slideData.title}
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
if (slideData.video) {
|
||
|
|
video = getVideoHtml(slideData.video)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (slideData.audio) {
|
||
|
|
audio = getAudioHtml(slideData.audio)
|
||
|
|
}
|
||
|
|
|
||
|
|
const duration = `data-duration="${slideData.duration ? slideData.duration : 5}"`
|
||
|
|
return `
|
||
|
|
<div class="slide" ${duration}>
|
||
|
|
${title}
|
||
|
|
${video}
|
||
|
|
${audio}
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
function getVideoHtml(videoData) {
|
||
|
|
let urls = []
|
||
|
|
let volume = ''
|
||
|
|
if (typeof(videoData) === 'string') {
|
||
|
|
urls.push(videoData)
|
||
|
|
} else { // video is an object
|
||
|
|
if (videoData.hasOwnProperty('url')) {
|
||
|
|
urls.push(videoData.url)
|
||
|
|
} else if (videoData.hasOwnProperty('zoom')) {
|
||
|
|
urls = videoData.zoom
|
||
|
|
}
|
||
|
|
if (videoData.volume) {
|
||
|
|
volume = `data-volume="${videoData.volume}"`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const urlsHtml = urls.map((url, index) => {
|
||
|
|
return `data-url_${index}="${makeEmbed(url)}"`
|
||
|
|
}).join('\n')
|
||
|
|
return `
|
||
|
|
<div class="video" ${urlsHtml} ${volume}> </div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
function getAudioHtml(audioData) {
|
||
|
|
let url = continueStr = volume = ''
|
||
|
|
|
||
|
|
// short circuit to return an empty div if audioData is null or not an object
|
||
|
|
// this is useful for user to specify empty audio track to cause existing
|
||
|
|
// audio to pause
|
||
|
|
if (!audioData || !(typeof(audioData === 'object'))) {
|
||
|
|
return `<div class="audio></div>`
|
||
|
|
}
|
||
|
|
|
||
|
|
if (audioData.url) {
|
||
|
|
url = `data-url="${makeEmbed(audioData.url)}"`
|
||
|
|
}
|
||
|
|
|
||
|
|
if (audioData.volume) {
|
||
|
|
volume = `data-volume="${audioData.volume}"`
|
||
|
|
}
|
||
|
|
|
||
|
|
if (audioData['continue']) {
|
||
|
|
continueStr = `data-continue="true"`
|
||
|
|
}
|
||
|
|
|
||
|
|
return `
|
||
|
|
<div class="audio" ${url} ${volume} ${continueStr}></div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
function makeEmbed(url) {
|
||
|
|
if (!url.endsWith('#embed')) {
|
||
|
|
return `${url}#embed`
|
||
|
|
} else {
|
||
|
|
return url
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
})();
|