wait for slide to load before starting, fixes #3

This commit is contained in:
Sanjay Bhangar 2018-03-17 15:47:13 +05:30
parent 67cce94580
commit 78c13a285b
3 changed files with 32 additions and 6 deletions

View File

@ -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

View File

@ -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>

View File

@ -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>