example/example.css

@@ -17,14 +17,6 @@ body {
     height: 100%;
 }
 
-#overlay {
-    z-index: 9999;
-    background: transparent;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
 .slide {
     z-index: 0;
     position: absolute;

example/example.js

@@ -4,7 +4,6 @@ class Slide {
         this.el = slide
         this.idx = idx
         this.duration = slide.dataset.duration
-        this.durationMs = parseInt(this.duration)  * 1000
         const video = slide.querySelector('.video')
         if (video) {
             this.video = load_urls(video.dataset)
@@ -101,8 +100,6 @@ class Slide {
 
     start() {
         console.log('called start', this.isReady())
-        this.timeout = setTimeout(next, this.durationMs)
-        this.startTime = new Date()
         if (this.zooms) {
             this.startZoom()
         } else if (this.video && this.video.length) {
@@ -129,52 +126,15 @@ class Slide {
         return this
     }
 
-    pause() {
+    startZoom() {
-        clearTimeout(this.timeout)
-        this.pauseTime = new Date()
-        if (this.zooms) {
-            this.pauseZoom()
-        } else if (this.video && this.video.length) {
-            this.pauseVideo()
-        }
-        if (this.audio) {
-            this.pauseAudio()
-        }
-    }
-
-    resume() {
-
-        const offset = this.pauseTime - this.startTime
-        const timeout = this.durationMs - offset
-
-        this.timeout = setTimeout(next, timeout)
-
-        // "Fake" the start time in case the user pauses and resumes again.
-        // NOTE: This seems like a bit of a hack, but the other way seemed convoluted
-        this.startTime = new Date() - offset
-
-        if (this.zooms) {
-            this.resumeZoom()
-        } else if (this.video && this.video.length) {
-            this.resumeVideo()
-        }
-        if (this.audio) {
-            this.resumeAudio()
-        }
-    }
-
-    startZoom(offset) {
-        offset = offset || 0
         for (var i=1; i<this.zooms.length; i++) {
             this.zoomTimeouts = [];
             ((j) => {
-                const timeout = Math.round(1000 * (this.duration / this.zooms.length) * j) - offset
-                if (timeout < 0) return
                 this.zoomTimeouts.push(setTimeout(() => {
                     this.videoEmbed.postMessage('options', {
                         'area': this.zooms[j]
                     })
-                }, timeout))
+                }, Math.round(1000 * (this.duration / this.zooms.length) * j)))
             })(i);
         }
         return this
@@ -197,47 +157,8 @@ class Slide {
         return this
     }
 
-    pauseZoom() {
-        this.zoomTimeouts.forEach(clearTimeout)
-        return this       
-    }
-
-    pauseVideo() {
-        this.videoEmbed.postMessage('options', {
-            'paused': true
-        })
-        return this
-    }
-
-    pauseAudio() {
-        this.audioEmbed.postMessage('options', {
-            'paused': true
-        })
-        return this
-    }
-
-    resumeZoom() {
-        const offset = this.pauseTime - this.startTime
-        this.startZoom(offset)
-        return this
-    }
-
-    resumeVideo() {
-        this.videoEmbed.postMessage('options', {
-            'paused': false
-        })
-        return this
-    }
-
-    resumeAudio() {
-        this.audioEmbed.postMessage('options', {
-            'paused': false
-        })
-        return this
-    }
-
     resetZoom() {
-        this.zoomTimeouts.forEach(clearTimeout)
+        this.zoomTimeouts.forEach(timeout => clearTimeout(timeout))
         this.videoEmbed.postMessage('options', {
             'area': this.zooms[0]
         })
@@ -267,8 +188,6 @@ var slides = [],
     activeAudio,
     timeout;
 
-let globalIsPaused = false
-
 let textbUrl = new URLSearchParams(window.location.search).get('textb') || 'https://textb.org/r/housingplaylist2/'
 
 // use raw version of page
@@ -296,33 +215,12 @@ function loadYaml(txt) {
         .join('')
     document.body.innerHTML = `
         <div class="base"></div>
-        <div id="overlay"></div>
         ${html}
     `
     return true
 }
 
 
-function globalPause() {
-    if (globalIsPaused) return;
-    slides[current].pause()
-    globalIsPaused = true
-}
-
-function globalResume() {
-    if (!globalIsPaused) return;
-    slides[current].resume()
-    globalIsPaused = false
-}
-
-function togglePause() {
-    if (globalIsPaused) {
-        globalResume()
-    } else {
-        globalPause()
-    }
-}
-
 function init() {
     document.querySelectorAll('.slide').forEach(function(slide, idx) {
         slides.push(new Slide(slide, idx))
@@ -346,7 +244,7 @@ function go(idx) {
         clearTimeout(timeout)
         timeout = null
     }
-    // timeout = setTimeout(next, Math.round(slides[current].duration) * 1000)
+    timeout = setTimeout(next, Math.round(slides[current].duration) * 1000)
 
     slides[old].stop()
     slides[current].start()
@@ -400,7 +298,5 @@ document.addEventListener('keydown', function(event) {
     } else if (event.key == 'ArrowLeft') {
         previous()
         event.preventDefault()
-    } else if (event.keyCode === 32) { // spacebar
-        togglePause()
     }
 }, false)