Added reverse playlist button in playlist editor

[pyrolitic]

Hey, nice extension! I like how it lets you save the current playlist so you can combine this with the "play all" link and make a playlist of a creator's entire library of videos. However, the playlist ends up in reverse chronological order, so I felt it would be useful to have a way of reversing playlists.

As I wrote in the commit message the reversing operation is quite slow for large playlists. I'm not familiar with Svelte and if you know of a way to disable animations just inside reversePlaylist please let me know.

Regards,
Jonathan

[soufianesakhi]

Hello Jonathan,

Thanks for this Pull Request!
I have the same remark as you already made.
Can you search for a way to disable or change the animation to make it quicker & more user-friendly?
Not necessarily with Svelte, plain js or CSS also acceptable.
If you can't I will do it once I have more availability.

Best regards,
Soufiane

[pyrolitic]

I found a somewhat inelegant solution based on sveltejs/svelte#3300
Instead of setting animate:flip in the video list element, I set it to animate:conditionalFlip where

  function conditionalFlip(node: Element, animation: any, params?: any) : AnimationConfig {
    if(videoListAnimation) {
      // call flip as before
      return flip(node, animation, params);
    } else {
      // disable animation
      return {easing : _ => 0};
    }
  }

and videoListAnimation is a global. The problem is that if I set videoListAnimation=false at the end of reversePlaylist, it'll disable animations so I would have to set it back to true in dragstart, drop, deleteVideo and any other function that might cause a change in the list of videos. I couldn't find a way to add code that runs after reversePlaylist finishes (like some kind of callback).

Another option would be to disable animations in the videos list whenever there are more than 10 or so videos. You could say animations don't make much sense in that case since most of the videos would be offscreen at that point.

[soufianesakhi]

You were very close to the answer!
I will use a custom animation function based on flip, and set the duration to 1 second in the params.
I will also set the easing function to expoOut (fast at the start and slow easing near the end of the animation)

  const customFlip: typeof flip = (node, animation, _) => {
    return flip(node, animation, {
      duration: 1000,
      easing: expoOut,
    });
  };

[pyrolitic]

Thanks for merging my change.
I tested the current master branch and the reversing is much smoother than before.

[soufianesakhi]

This feature is now released in v2.2.0