Merge branch 'fetch-textb' of sanj/padmaEmbeds into master

example/example.css

@@ -57,4 +57,5 @@ body {
 
 .audio iframe {
     height: 0;
+    border: 0;
 }

example/example.js

@@ -1,12 +1,15 @@
 class Slide {
     constructor(slide, idx) {
-        this.isInit = false
+        this.isAudioLoaded = this.isVideoLoaded = 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) {
@@ -32,8 +35,15 @@ class Slide {
                 container: this.videoContainer
             })
 
-            videoEmbed.on('init', (data) => {
-                this.isVideoInit = true
+            videoEmbed.on('init', () => {
+                if (this.isDocument) {
+                    this.isVideoLoaded = true
+                }
+            })
+
+            videoEmbed.on('loaded', () => {
+                console.log('loaded called on embed')
+                this.isVideoLoaded = true
             })
 
             videoEmbed.on('playing', (positionData) => {
@@ -50,8 +60,9 @@ class Slide {
                 container: this.audioContainer
             })
 
-            audioEmbed.on('init', (data) => {
-                this.isAudioInit = true
+            audioEmbed.on('loaded', () => {
+                console.log('loaded called on audio embed')
+                this.isAudioLoaded = true
             })
 
             audioEmbed.on('playing', (positionData) => {
@@ -64,6 +75,19 @@ 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
@@ -75,6 +99,7 @@ class Slide {
     }
 
     start() {
+        console.log('called start', this.isReady())
         if (this.zooms) {
             this.startZoom()
         } else if (this.video && this.video.length) {
@@ -163,8 +188,38 @@ 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) {
@@ -174,7 +229,14 @@ 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

example/index.html

@@ -1,48 +1,9 @@
 <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>
 
-</div>
-<div class="slide" data-duration="15">
-    <div class="video" data-url_0="https://indiancine.ma/AKDP/editor/BFR#embed"
-        ></div>
-</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>
 <script src="example.js"></script>

index.html

@@ -4,7 +4,7 @@
 		<title>Subscribe to events from pad.ma iframe embed</title>
 	</head>
 	<body>
-		<iframe width="640" height="360" src="http://pandora/documents/I/649,254,1289,723#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
+		<iframe width="640" height="360" src="https://pad.ma/BVF/editor/F#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
 		<button id="setUrl">
 			Set Iframe URL
 		</button>

lib/json-to-html.js

@@ -0,0 +1,90 @@
+
+(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
+        }
+    }
+
+})();