Feature request slideData: Reuse setInterval for individual slide durations

[raLaaaa]

Hey there,

I'm currently trying to implement a feature which allows me to have different durations for different slides.
For instance: I want one slide to be displayed 10 seconds and one slide to be displayed 5 seconds.

     setInterval(() => {
      this.nextStep();
    }, 5000); //or use a timer variable

I'm currently using the setInterval method on my mounted function.
Furthermore I have overwritten the nextStep function in order to check which slide is currently displayed and to adapt the duration of the slide.

   nextStep() {
      this.slides.forEach(function(slide) {
        slide.direction = "next";
      });
      this.$root.direction = "next";
      const self = this;
      this.$nextTick(function() {
        if (self.step >= self.currentSlide.steps) {
          self.nextSlide();
        } else {
          self.step++;
        }
      });
      //adapt timer variable regarding of corresponding slide duration

However I figured out that I have to reuse setInterval() after I adapted the duration (which is obvious because it's only called in the mount method once). This leads to weird effects though. Could you give me a hint how to achieve different durations for different slides?

EDIT:

It looks like I just forgot to call clearInterval. How ever is there an easier option to achieve that?

[yaodingyd]

Can you scale steps for each slide? For example, you have a fixed time interval to call nextStep on mounted. We use first slide as base to measure time, steps increment by 1, then if you want second slide to take twice as long, then steps increment by 2, and so on for three times as long, four times as long...for each step.

[Zulko]

A long time ago I had this intention to add an attribute "slideData" to slides, which is an object with any kind of data that external plugins/widgets can use. Then it's easy to have a widget navigator(currentSlide) which can react to new slides, for instance by setting a setInterval with delay currentSlide.slideData.duration.

[yaodingyd]

@raLaaaa is your issue resolved now?

[raLaaaa]

Hey, sorry for the late response and thanks for your help.
I was able to figure it out!

@Zulko how comes you ended up not implementing "slideData" ?

[Zulko]

Because I'm lazy :)

Also I got swamped in other projects, with very little use of the library (I usually do PDF slideshows now) so it's better if people who seem use it more, like @yaodingyd, take care of the project.

I had lots of plans for Eagle at some point, mostly fun features (including slides with auto-play and audio, a timer that skips your slides automatically or warns you when you are running out of time, slides that can be synchronized between computers via a server...).

[yaodingyd]

reopen to tracking possible feature

[leastbad]

@Zulko for what it's worth, I have found vue-plyr to be a great solution for easily dropping in audio and video to slides.

@raLaaaa do you have a link to your implementation for advancing slides on a timer? I am very new to Vue and something seemingly simple has a significant learning curve. I would love to be able to include a mixin that would allow me to pass :countdown='5' to a slide directive, for a five second delay before advancing.

[yaodingyd]

@pjforde1978 You can check this out https://codesandbox.io/s/0qxk0llro0

[leastbad]

@yaodingyd Thank you so much for putting that example together. I got it working as advertised, and ultimately realized that this is half the job - I now need to figure out something similar for steps. You've given me an excellent starting point.

[BigWillie]

This is brilliant - just what I came here to find out

[yaodingyd]

PR welcome