https://resources.better.org.uk/assets/gll_component_library/controllers/video_stopper_controller-a1f0ce39.js

1import { Controller } from "@hotwired/stimulus"
2import { Turbo } from "@hotwired/turbo-rails"
3
4
5// Connects to data-controller="video-stopper"
6export default class extends Controller {
7  connect() {
8    this.handleClick = this.handleClick.bind(this);
9    
10    // Remove any existing identical event listeners before adding a new one
11    document.removeEventListener('click', this.handleClick, true);    
12    document.addEventListener('click', this.handleClick, true);
13  }
14
15  disconnect() {
16    document.removeEventListener('click', this.handleClick, true);
17  }
18
19  handleClick(event) {
20    const link = event.target.closest('a');
21
22    if (link && link.href && !link.hasAttribute('data-turbo-method') && link.target !== '_blank') {
23      event.preventDefault();
24      const videos = document.querySelectorAll('video');
25      videos.forEach(video => {
26        video.muted = true;
27        video.pause();
28        const sources = video.querySelectorAll('source');
29        sources.forEach(source => source.remove());
30        video.load();
31      });
32      Turbo.visit(link.href);
33    }
34  }
35}