brunosimon
124 lines
2.7 KiB
JavaScript
124 lines
2.7 KiB
JavaScript
import speaker from '../assets/videos/speaker.mp4'
|
|
import audience from '../assets/videos/audience.mp4'
|
|
|
|
export default class Demo
|
|
{
|
|
constructor()
|
|
{
|
|
this.step = 0
|
|
this.$container = document.querySelector('.js-demo')
|
|
|
|
// Speaker
|
|
this.$speaker = this.$container.querySelector('.js-speaker')
|
|
|
|
this.$speakerVideo = document.createElement('video')
|
|
this.$speakerVideo.src = speaker
|
|
this.$speakerVideo.height = 300
|
|
|
|
this.$speaker.appendChild(this.$speakerVideo)
|
|
|
|
this.speakerCurrentTime = 0
|
|
|
|
// Audience
|
|
this.$audience = this.$container.querySelector('.js-audience')
|
|
|
|
this.$audienceVideo = document.createElement('video')
|
|
this.$audienceVideo.src = audience
|
|
this.$audienceVideo.height = 300
|
|
|
|
this.$audience.appendChild(this.$audienceVideo)
|
|
|
|
this.audienceCurrentTime = 0
|
|
|
|
// Go step
|
|
window.setTimeout(() =>
|
|
{
|
|
this.goStep(0)
|
|
}, 1000)
|
|
|
|
/**
|
|
* Loop
|
|
*/
|
|
this.setLoop()
|
|
}
|
|
|
|
/**
|
|
* Set loop
|
|
*/
|
|
setLoop()
|
|
{
|
|
const loop = () =>
|
|
{
|
|
window.requestAnimationFrame(loop)
|
|
|
|
this.loop()
|
|
}
|
|
|
|
loop()
|
|
}
|
|
|
|
/**
|
|
* Loop
|
|
*/
|
|
loop()
|
|
{
|
|
if(this.speakerCurrentTime < 7 && this.$speakerVideo.currentTime >= 7)
|
|
{
|
|
this.goStep(2)
|
|
}
|
|
|
|
if(this.audienceCurrentTime < 0.85 && this.$audienceVideo.currentTime >= 0.85)
|
|
{
|
|
this.goStep(3)
|
|
}
|
|
|
|
if(this.speakerCurrentTime < 15.5 && this.$speakerVideo.currentTime >= 15.5)
|
|
{
|
|
this.goStep(4)
|
|
}
|
|
|
|
if(this.speakerCurrentTime < 17.5 && this.$speakerVideo.currentTime >= 17.5)
|
|
{
|
|
this.goStep(5)
|
|
}
|
|
|
|
this.speakerCurrentTime = this.$speakerVideo.currentTime
|
|
this.audienceCurrentTime = this.$audienceVideo.currentTime
|
|
}
|
|
|
|
/**
|
|
* Go to step
|
|
*/
|
|
goStep(index)
|
|
{
|
|
console.log(index)
|
|
// // Remove old step class
|
|
// if(this.step !== null)
|
|
// {
|
|
// this.$container.classList.remove(`step-${this.step}`)
|
|
// }
|
|
|
|
// Add new step class
|
|
this.step = index
|
|
this.$container.classList.add(`step-${this.step}`)
|
|
|
|
// Cases
|
|
switch(this.step)
|
|
{
|
|
case 0:
|
|
this.$speakerVideo.play()
|
|
.then(() =>
|
|
{
|
|
this.goStep(1)
|
|
})
|
|
break
|
|
|
|
case 1:
|
|
break
|
|
|
|
case 2:
|
|
this.$audienceVideo.play()
|
|
break
|
|
}
|
|
}
|
|
} |