wait for slide to load before starting, fixes #3

6 years ago · 78c13a285b
3 changed files with 32 additions and 6 deletions
--- a/example/example.js
+++ b/example/example.js
@ -1,6 +1,6 @@
 class Slide {
    constructor(slide, idx) {
-        this.isInit = false
+        this.isAudioLoaded = this.isVideoLoaded = false
        this.el = slide
        this.idx = idx
        this.duration = slide.dataset.duration
@ -32,8 +32,8 @@ class Slide {
                container: this.videoContainer
            })

-            videoEmbed.on('init', (data) => {
-                this.isVideoInit = true
+            videoEmbed.on('loaded', () => {
+                this.isVideoLoaded = true
            })

            videoEmbed.on('playing', (positionData) => {
@ -50,8 +50,8 @@ class Slide {
                container: this.audioContainer
            })

-            audioEmbed.on('init', (data) => {
-                this.isAudioInit = true
+            audioEmbed.on('loaded', () => {
+                this.isAudioLoaded = true
            })

            audioEmbed.on('playing', (positionData) => {
@ -64,6 +64,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 +88,7 @@ class Slide {
    }

    start() {
+        console.log('called start', this.isReady())
        if (this.zooms) {
            this.startZoom()
        } else if (this.video && this.video.length) {
@ -174,7 +188,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
--- a/example/index.html
+++ b/example/index.html
@ -2,6 +2,11 @@
 <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="video" data-volume="0.9" data-url_0="https://pad.ma/BVF/editor/F#embed"
+        ></div>
+
 </div>
 <div class="slide" data-duration="10">
    <div class="title">FROM JANTA COLONY TO JANTA COLONY</div>
--- a/index.html
+++ b/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>