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

example/example.css

@@ -0,0 +1,61 @@
+body {
+    background-color: black;
+    color: white;
+    font-family: sans-serif;
+    font-size: 18px;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    width: 100%;
+}
+
+.base {
+    z-index: 1;
+    background: black;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.slide {
+    z-index: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-shadow:
+        -2px -2px 0 #000,
+        2px -2px 0 #000,
+        -2px 2px 0 #000,
+        2px 2px 0 #000;
+
+}
+.title {
+    font-size: 48px;
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-top: 30%;
+    text-align: center;
+
+    position: fixed;
+    z-index: 10;
+    height: 56px;
+    width: 100%;
+}
+
+.video {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+.video iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.audio iframe {
+    height: 0;
+    border: 0;
+}

example/example.js

@@ -0,0 +1,302 @@
+class Slide {
+    constructor(slide, idx) {
+        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) {
+                this.zooms = this.video.map(url => url.split('/').pop().split('#')[0].split(',').map(a => Math.round(a)))
+            }
+        }
+        const audio = slide.querySelector('.audio')
+        if (audio) {
+            this.audio = audio.dataset.url // audio does not need to be an array
+            this.audioVolume = audio.dataset.volume ? parseFloat(audio.dataset.volume) : 1
+            this.audioContainer = audio
+            this.audioContinue = !!audio.dataset.continue
+        }
+        this.initEmbeds()        
+        return this      
+    }
+
+    initEmbeds() {
+        if (this.video) {
+            const videoEmbed = this.videoEmbed = new PandoraEmbed({
+                id: 'slide-' + this.idx,
+                url: this.video[0],
+                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('playing', (positionData) => {
+                if (!this.videoStart) {
+                    this.videoStart = positionData.position
+                }
+            })
+        }
+
+        if (this.audio) {
+            const audioEmbed = this.audioEmbed = new PandoraEmbed({
+                id: 'audio-' + this.idx,
+                url: this.audio,
+                container: this.audioContainer
+            })
+
+            audioEmbed.on('loaded', () => {
+                console.log('loaded called on audio embed')
+                this.isAudioLoaded = true
+            })
+
+            audioEmbed.on('playing', (positionData) => {
+                if (!this.audioStart) {
+                    this.audioStart = positionData.position
+                }
+            })
+        }
+
+        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
+    }
+
+    bringToFront() {
+        this.el.style.zIndex = 10
+        return this
+    }
+
+    start() {
+        console.log('called start', this.isReady())
+        if (this.zooms) {
+            this.startZoom()
+        } else if (this.video && this.video.length) {
+            this.startVideo()
+        }
+        if (this.audioContainer) { // if there is an audio container, we always stop current audio
+            reset_active_audio()
+        }
+        if (this.audio) {
+            this.startAudio()
+        }
+        return this
+    }
+
+    stop() {
+        if (this.zooms) {
+            this.resetZoom()
+        } else if (this.video && this.video.length) {
+            this.resetVideo()
+        }
+        if (this.audio && !this.audioContinue) {
+            this.resetAudio()
+        }        
+        return this
+    }
+
+    startZoom() {
+        for (var i=1; i<this.zooms.length; i++) {
+            this.zoomTimeouts = [];
+            ((j) => {
+                this.zoomTimeouts.push(setTimeout(() => {
+                    this.videoEmbed.postMessage('options', {
+                        'area': this.zooms[j]
+                    })
+                }, Math.round(1000 * (this.duration / this.zooms.length) * j)))
+            })(i);
+        }
+        return this
+    }
+
+    startVideo() {
+        this.videoEmbed.postMessage('options', {
+            'paused': false,
+            'volume': this.videoVolume
+        })
+        return this
+    }
+
+    startAudio() {
+        this.audioEmbed.postMessage('options', {
+            'paused': false,
+            'volume': this.audioVolume
+        })
+        activeAudio = this
+        return this
+    }
+
+    resetZoom() {
+        this.zoomTimeouts.forEach(timeout => clearTimeout(timeout))
+        this.videoEmbed.postMessage('options', {
+            'area': this.zooms[0]
+        })
+        return this
+    }
+
+    resetVideo() {
+        this.videoEmbed.postMessage('options', {
+            'paused': true,
+            'position': this.start || 0
+        })
+        return this
+    }
+
+    resetAudio() {
+        this.audioEmbed.postMessage('options', {
+            'paused': true,
+            'position': 0 //FIXME: figure correct audio reset
+        })
+        activeAudio = null;
+        return this
+    }
+}
+
+var slides = [],
+    current = 0,
+    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
+}
+
+
+function init() {
+    document.querySelectorAll('.slide').forEach(function(slide, idx) {
+        slides.push(new Slide(slide, idx))
+    })
+    go(0)
+}
+
+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
+    if (timeout) {
+        clearTimeout(timeout)
+        timeout = null
+    }
+    timeout = setTimeout(next, Math.round(slides[current].duration) * 1000)
+
+    slides[old].stop()
+    slides[current].start()
+}
+
+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 load_urls(dataset) {
+    var urls = [], idx = 0
+    while (dataset['url_' + idx]) {
+        urls.push(dataset['url_' + idx])
+        idx += 1
+    }
+    return urls
+}
+
+
+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_active_audio() {
+    if (activeAudio) {
+        activeAudio.resetAudio()
+    }
+}
+
+document.addEventListener('keydown', function(event) {
+    if (event.key == 'ArrowRight') {
+        next()
+        event.preventDefault()
+    } else if (event.key == 'ArrowLeft') {
+        previous()
+        event.preventDefault()
+    }
+}, false)

example/index.html

@@ -0,0 +1,9 @@
+<meta charset="utf-8">
+<script src="../lib/PandoraEmbed.js"></script>
+<link type="text/css" href="example.css" rel="stylesheet" />
+
+<!-- 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://10.0.3.230/A/editor/C#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/PandoraEmbed.js

@@ -16,7 +16,7 @@ var PandoraEmbed = function(options) {
     this.boundFns = {};
     var width = options.width || 640;
     var height = options.height || 360;
-    var container = options.container || document;
+    var container = options.container || document.body;
     if (!options.url) {
         alert('no embed url specified');
         return;
@@ -40,7 +40,7 @@ var PandoraEmbed = function(options) {
         init();
     });
 
-    window.addEventListener('message', that.listener.bind(this), false);
+    window.addEventListener('message', this.listener.bind(this), false);
     container.appendChild($iframe);
     return this;
 };

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