Support gif playlists

[AAverin]

Would be nice to display a list of gifs one after another in a playlist manner – useful to showcase product features

[benwiley4000]

Hm, not sure how generic this use case is. Would it be difficult to do it by having a list of gifs available in the parent component and store the selected gif as component state in the parent?

[benwiley4000]

@AAverin what do you think about my suggestion?

[AAverin]

@benwiley4000 Hey Ben. I switched my solution to YouTube embeds for now, because gifs were too heavy and they were loading with the page. In general yes, I think everybody can wrap around the player to support playlist, or it could be another separate component, provided by the library

[benwiley4000]

Alright thanks for the update!

For the record, here's an example of what a custom component could look like. I think it's a bit too specific to be included with the library though, unless I start getting many requests for this sort of thing.

class GifPlaylist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0,
    };
  }

  next() {
    this.setState(state => {
      if (state.selectedIndex + 1 === this.props.playlist.length) {
        return {
          selectedIndex: 0,
        };
      }
      return {
        selectedIndex: state.selectedIndex + 1,
      };
    });
  }

  render() {
    const selected = this.props.playlist[this.state.selectedIndex];
    return (
      <>
        <button onClick={() => this.next()}>Next</button>
        <GifPlayer gif={selected.gif} still={selected.still} />
      </>
    );
  }
}