Is there a way to programmatically pause and resume?

[drastick]

I have videos in my slides and would like to pause flickity while the video is playing and then resume it once the video is done.

[desandro]

By 'pause' do you mean disable dragging, or pause autoPlay ?

---

[@desandro edit]

See metafizzy/flickity-docs#5 (comment) for the Player API

[drastick]

Pause autoPlay. So while the video is playing it does not try going to the next slide but when the video is done I can programatically restart autoPlay.

[drastick]

Overall I think it would be good to provide methods for stop, play and pause. I think I saw in another issue that you had said you didn't think it would be a good user experience to continue animating after a user clicked on a slide. Not that I disagree with you, but I think that should be up to the person implementing Flickity and not a choice of the library itself. This is especially true because of the commercial licensing and people paying for the library. If someone pays to use this they should be able to chose how they use it.

[drastick]

This seems as easy as this:

// -------------------------- Flickity -------------------------- //

// utils.extend( Flickity.defaults, {
//   autoPlay: false
// });

Flickity.createMethods.push('_createPlayer');

Flickity.prototype._createPlayer = function() {
  this.player = new Player( this );

  this.on( 'activate', this.activatePlayer );
  this.on( 'uiChange', this.stop );
  this.on( 'pointerDown', this.stop );
  this.on( 'deactivate', this.deactivatePlayer );
};

Flickity.prototype.activatePlayer = function() {
  if ( !this.options.autoPlay ) {
    return;
  }
  this.player.play();
  eventie.bind( this.element, 'mouseenter', this );
  this.isMouseenterBound = true;
};

Flickity.prototype.stop = function() {
  this.player.stop();
};

Flickity.prototype.play = function() {
  this.player.play();
};

Flickity.prototype.pause = function() {
  this.player.pause();
};

Flickity.prototype.unpause = function() {
  this.player.unpause();
};

Flickity.prototype.deactivatePlayer = function() {
  this.player.stop();
  if ( this.isMouseenterBound ) {
    eventie.unbind( this.element, 'mouseenter', this );
    delete this.isMouseenterBound;
  }
};

[adam-h]

You can just use flickity_instance.activatePlayer() and flickity_instance.deactivatePlayer() to play and pause respectively. Not ideal as the events have to be bound and unbound, but it works until play and pause methods are exposed.

[pesla]

+1!

[marcandrews]

I'm quite new to JS. Can someone please post a complete example of how to pause autoplay?

[drastick]

<div class="main-gallery">...</div>

$('.main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

var flkty = Flickity.data( $('.main-gallery')[0] );

flkty.deactivatePlayer();

[marcandrews]

Thanks!

[jonburger]

@desandro edit: this code is not recommended

flkty.on('settle', function() {
    if (!flkty.player.isPlaying) {
        flkty.activatePlayer();
    }
});

[benbonnet]

@drastick Not sure if I got it right
stuck with Can't find variable: Player

[desandro]

v1.2.0 has added proper auto-play API: playPlayer, stopPlayer, pausePlayer, unpausePlayer.

Closing this issue as resolved 🐳

[am05mhz]

v1.2.0 has added proper auto-play API: playPlayer, stopPlayer, pausePlayer, unpausePlayer.

Closing this issue as resolved

the link is incorrect, it points to localhost, should be this https://flickity.metafizzy.co/api.html#player