Run script based on specific link clicked using Swup.js

Question

I'm using video backgrounds throughout an app/kiosk we are building and trying to get specific scripts to run based on the target element that was clicked. Depending on the item clicked, videos are displayed and act as a transition between pages. Each page has a looping video as the background. Regardless of those details I'm having trouble understanding the above thread on how to have scripts fire using the swup.on(clickLink) event and using delegateTarget.

I currently have this working just to test out the basics:

function videoSwaps() {
   $('.video-02').addClass('visible-video');
   $('#video-player-02')[0].play();
   console.log("Video Replaced");   
}

swup.on('clickLink', videoSwaps);

Now though I'm looking to have different video swaps happen depending on which link/button a user clicks.

Approaching it this way breaks the swup transition:

$('.btn-video-02').click(function(){
    $('.video-02').addClass('visible-video');
    $('#video-player-02')[0].play();
    console.log("Video Replaced");  
      }
 });

Answer 1

In swup 4, you can access the element and the event that triggered a visit in each hook handler:

swup.hooks.on('visit:start', (visit) => {
  console.log('Clicked link', visit.trigger.el);
  console.log('Click event', visit.trigger.event);
});