padmaEmbeds/lib/json-to-html.js

90 lines
2.4 KiB
JavaScript
Raw Normal View History

(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
}
}
})();