Compare commits
No commits in common. "master" and "refactor-class" have entirely different histories.
master
...
refactor-c
|
|
@ -57,5 +57,4 @@ body {
|
|||
|
||||
.audio iframe {
|
||||
height: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
class Slide {
|
||||
constructor(slide, idx) {
|
||||
this.isAudioLoaded = this.isVideoLoaded = false
|
||||
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)
|
||||
if (this.video.length > 1 || this.video[0].includes('document')) {
|
||||
this.isDocument = true
|
||||
}
|
||||
this.videoVolume = video.dataset.volume ? parseFloat(video.dataset.volume) : 1
|
||||
this.videoContainer = video
|
||||
if (this.video.length > 1) {
|
||||
|
|
@ -35,15 +32,8 @@ class Slide {
|
|||
container: this.videoContainer
|
||||
})
|
||||
|
||||
videoEmbed.on('init', () => {
|
||||
if (this.isDocument) {
|
||||
this.isVideoLoaded = true
|
||||
}
|
||||
})
|
||||
|
||||
videoEmbed.on('loaded', () => {
|
||||
console.log('loaded called on embed')
|
||||
this.isVideoLoaded = true
|
||||
videoEmbed.on('init', (data) => {
|
||||
this.isVideoInit = true
|
||||
})
|
||||
|
||||
videoEmbed.on('playing', (positionData) => {
|
||||
|
|
@ -60,9 +50,8 @@ class Slide {
|
|||
container: this.audioContainer
|
||||
})
|
||||
|
||||
audioEmbed.on('loaded', () => {
|
||||
console.log('loaded called on audio embed')
|
||||
this.isAudioLoaded = true
|
||||
audioEmbed.on('init', (data) => {
|
||||
this.isAudioInit = true
|
||||
})
|
||||
|
||||
audioEmbed.on('playing', (positionData) => {
|
||||
|
|
@ -75,19 +64,6 @@ class Slide {
|
|||
return this;
|
||||
}
|
||||
|
||||
isReady() {
|
||||
console.log('isReady called');
|
||||
if (this.video && this.audio) {
|
||||
return this.isVideoLoaded && this.isAudioLoaded
|
||||
} else if (this.video) {
|
||||
return this.isVideoLoaded
|
||||
} else if (this.audio) {
|
||||
return this.isAudioLoaded
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
sendToBack() {
|
||||
this.el.style.zIndex = 0
|
||||
return this
|
||||
|
|
@ -99,7 +75,6 @@ class Slide {
|
|||
}
|
||||
|
||||
start() {
|
||||
console.log('called start', this.isReady())
|
||||
if (this.zooms) {
|
||||
this.startZoom()
|
||||
} else if (this.video && this.video.length) {
|
||||
|
|
@ -188,38 +163,8 @@ var slides = [],
|
|||
activeAudio,
|
||||
timeout;
|
||||
|
||||
let textbUrl = new URLSearchParams(window.location.search).get('textb') || 'https://textb.org/r/housingplaylist2/'
|
||||
|
||||
// use raw version of page
|
||||
textbUrl = textbUrl.replace('/t/', '/r/')
|
||||
if (!textbUrl.endsWith('/')) textbUrl += '/'
|
||||
|
||||
fetch(textbUrl)
|
||||
.then(response => response.text())
|
||||
.then(loadYaml)
|
||||
.then(init)
|
||||
.catch(err => {
|
||||
console.log('error', err)
|
||||
alert('error loading YAML')
|
||||
})
|
||||
|
||||
|
||||
function loadYaml(txt) {
|
||||
const html = txt.split('\n\n')
|
||||
.filter(chunk => chunk.trim())
|
||||
.map(chunk => {
|
||||
const obj = jsyaml.load(chunk)
|
||||
return obj
|
||||
})
|
||||
.map(jsonToHTML)
|
||||
.join('')
|
||||
document.body.innerHTML = `
|
||||
<div class="base"></div>
|
||||
${html}
|
||||
`
|
||||
return true
|
||||
}
|
||||
|
||||
init()
|
||||
|
||||
function init() {
|
||||
document.querySelectorAll('.slide').forEach(function(slide, idx) {
|
||||
|
|
@ -229,14 +174,7 @@ function init() {
|
|||
}
|
||||
|
||||
function go(idx) {
|
||||
if (!slides[idx].isReady()) {
|
||||
console.log('slide not ready');
|
||||
return setTimeout(() => {
|
||||
go(idx)
|
||||
}, 250)
|
||||
}
|
||||
var old = current
|
||||
|
||||
slides[current].sendToBack()
|
||||
slides[idx].bringToFront()
|
||||
current = idx
|
||||
|
|
|
|||
|
|
@ -1,9 +1,48 @@
|
|||
<meta charset="utf-8">
|
||||
<script src="../lib/PandoraEmbed.js"></script>
|
||||
<link type="text/css" href="example.css" rel="stylesheet" />
|
||||
<div class="base">
|
||||
</div>
|
||||
<div class="slide" data-duration="10">
|
||||
<div class="title">FROM JANTA COLONY TO JANTA COLONY</div>
|
||||
</div>
|
||||
<div class="slide" data-duration="10">
|
||||
<div class="title">
|
||||
At first, three stories from the year 1950 in Bombay
|
||||
</div>
|
||||
<div class="audio" data-volume="0.4" data-continue="true" data-url="https://pad.ma/BVF/editor/F#embed"></div>
|
||||
</div>
|
||||
<div class="slide" data-duration="10">
|
||||
<div class="title">
|
||||
ONE
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide" data-duration="60">
|
||||
<div class="title">
|
||||
The "rationing" of living space
|
||||
</div>
|
||||
<div class="video"
|
||||
data-url_0="https://pad.ma/documents/AFL/0,0,6580,3763#embed"
|
||||
data-url_1="https://pad.ma/documents/AFL/1568,1461,3352,2401#embed"
|
||||
></div>
|
||||
<div class="audio"></div> <!-- signal to stop playing audio -->
|
||||
</div>
|
||||
<div class="slide" data-duration="10">
|
||||
<div class="title">
|
||||
The Times of India on 23rd July
|
||||
</div>
|
||||
<div class="video"
|
||||
data-url_0="https://pad.ma/documents/ADZ/0,0,6554,5409#embed",
|
||||
data-url_1="https://pad.ma/documents/ADZ/3836,2088,6401,3440#embed"
|
||||
></div>
|
||||
</div>
|
||||
<div class="slide" data-duration="15">
|
||||
<div class="video" data-volume="0.9" data-url_0="https://pad.ma/BVF/editor/F#embed"
|
||||
></div>
|
||||
|
||||
<!-- YAML parser from: https://github.com/nodeca/js-yaml-->
|
||||
<script src="../lib/js-yaml.min.js"></script>
|
||||
|
||||
<script src="../lib/json-to-html.js"></script>
|
||||
</div>
|
||||
<div class="slide" data-duration="15">
|
||||
<div class="video" data-url_0="https://indiancine.ma/AKDP/editor/BFR#embed"
|
||||
></div>
|
||||
</div>
|
||||
<script src="example.js"></script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Subscribe to events from pad.ma iframe embed</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe width="640" height="360" src="https://pad.ma/BVF/editor/F#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
|
||||
<iframe width="640" height="360" src="http://pandora/documents/I/649,254,1289,723#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
|
||||
<button id="setUrl">
|
||||
Set Iframe URL
|
||||
</button>
|
||||
|
|
|
|||
1
lib/js-yaml.min.js
vendored
1
lib/js-yaml.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,90 +0,0 @@
|
|||
|
||||
(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
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user