https://citizenfreak.com/assets/controllers/plyr_video_controller-aaba667b.js

1import { Controller } from '@hotwired/stimulus'
2import Plyr from 'plyr'
3
4export default class extends Controller {
5  static targets = ['video']
6
7  connect () {
8    const video = this.hasVideoTarget ? this.videoTarget : this.element.querySelector('video')
9    if (!video) return
10
11    this.player = new Plyr(video, {
12      controls: [
13        'play-large',
14        'play',
15        'progress',
16        'current-time',
17        'duration',
18        'mute',
19        'volume',
20        'captions',
21        'settings',
22        'pip',
23        'airplay',
24        'fullscreen'
25      ],
26      settings: ['captions', 'speed'],
27      captions: {
28        active: true,
29        language: 'auto',
30        update: true
31      },
32      speed: {
33        selected: 1,
34        options: [0.75, 1, 1.25, 1.5, 2]
35      },
36      keyboard: { focused: true, global: false },
37      fullscreen: { enabled: true, fallback: true, iosNative: true }
38    })
39  }
40
41  disconnect () {
42    if (this.player) {
43      this.player.destroy()
44      this.player = null
45    }
46  }
47}