https://podread.app/assets/controllers/audio_preview_controller-f0f37367.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static values = { url: String }
5  static targets = ["button", "playIcon", "pauseIcon"]
6
7  connect() {
8    this.audio = new Audio(this.urlValue)
9    this.onEnded = () => this.showPlayIcon()
10    this.onPause = () => this.showPlayIcon()
11    this.onPlay = () => this.showPauseIcon()
12
13    this.audio.addEventListener("ended", this.onEnded)
14    this.audio.addEventListener("pause", this.onPause)
15    this.audio.addEventListener("play", this.onPlay)
16  }
17
18  disconnect() {
19    if (this.audio) {
20      this.audio.removeEventListener("ended", this.onEnded)
21      this.audio.removeEventListener("pause", this.onPause)
22      this.audio.removeEventListener("play", this.onPlay)
23      this.audio.pause()
24      this.audio = null
25    }
26  }
27
28  toggle(event) {
29    event.preventDefault()
30
31    if (this.audio.paused) {
32      // Stop any other playing previews
33      this.application.controllers
34        .filter(c => c.identifier === "audio-preview" && c !== this)
35        .forEach(c => c.audio?.pause())
36      this.audio.play()
37    } else {
38      this.audio.pause()
39    }
40  }
41
42  restart(event) {
43    event.preventDefault()
44    this.audio.currentTime = 0
45    this.audio.play()
46  }
47
48  stopPropagation(event) {
49    event.stopPropagation()
50  }
51
52  showPlayIcon() {
53    if (this.hasPlayIconTarget && this.hasPauseIconTarget) {
54      this.playIconTarget.classList.remove("hidden")
55      this.pauseIconTarget.classList.add("hidden")
56    }
57  }
58
59  showPauseIcon() {
60    if (this.hasPlayIconTarget && this.hasPauseIconTarget) {
61      this.playIconTarget.classList.add("hidden")
62      this.pauseIconTarget.classList.remove("hidden")
63    }
64  }
65}