{"version":3,"file":"play-episode-button-NzC1eZR8.js","sources":["../../app/Resources/js/modules/play-episode-button.ts"],"sourcesContent":["import { css, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\n@customElement(\"play-episode-button\")\nexport class PlayEpisodeButton extends LitElement {\n  @property()\n  id = \"0\";\n\n  @property()\n  src = \"\";\n\n  @property()\n  mediaType = \"\";\n\n  @property()\n  title!: string;\n\n  @property()\n  podcast!: string;\n\n  @property()\n  imageSrc!: string;\n\n  @property()\n  playLabel!: string;\n\n  @property()\n  playingLabel!: string;\n\n  @property({ attribute: false })\n  _castopodAudioPlayer!: HTMLDivElement;\n\n  @property({ attribute: false })\n  _audio!: HTMLAudioElement;\n\n  @state()\n  isPlaying!: boolean;\n\n  @state()\n  _playbackSpeed = 1;\n\n  @state()\n  _events = [\n    {\n      name: \"canplay\",\n      onEvent: (event: Event): void => {\n        (event.target as HTMLAudioElement)?.play();\n      },\n    },\n    {\n      name: \"play\",\n      onEvent: (): void => {\n        this.isPlaying = true;\n      },\n    },\n    {\n      name: \"pause\",\n      onEvent: (): void => {\n        this.isPlaying = false;\n      },\n    },\n    {\n      name: \"ratechange\",\n      onEvent: (event: Event): void => {\n        this._playbackSpeed = (event.target as HTMLAudioElement)?.playbackRate;\n      },\n    },\n  ];\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n\n    await this._elementReady(\"div[id=castopod-audio-player]\");\n    await this._elementReady(\"div[id=castopod-audio-player] audio\");\n\n    this._castopodAudioPlayer = document.body.querySelector(\n      \"div[id=castopod-audio-player]\"\n    ) as HTMLDivElement;\n\n    this._audio = this._castopodAudioPlayer.querySelector(\n      \"audio\"\n    ) as HTMLAudioElement;\n  }\n\n  private _elementReady(selector: string) {\n    return new Promise((resolve) => {\n      const element = document.querySelector(selector);\n      if (element) {\n        resolve(element);\n      }\n      new MutationObserver((_, observer) => {\n        // Query for elements matching the specified selector\n        Array.from(document.querySelectorAll(selector)).forEach((element) => {\n          resolve(element);\n          //Once we have resolved we don't need the observer anymore.\n          observer.disconnect();\n        });\n      }).observe(document.documentElement, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  play(): void {\n    const currentlyPlayingEpisode = this._castopodAudioPlayer.dataset.episode;\n\n    const isCurrentEpisode = currentlyPlayingEpisode === this.id;\n\n    if (currentlyPlayingEpisode === \"-1\") {\n      this._showPlayer();\n    }\n\n    if (isCurrentEpisode) {\n      this._audio.play();\n    } else {\n      const playingEpisodeButton = document.querySelector(\n        `play-episode-button[id=\"${currentlyPlayingEpisode}\"]`\n      ) as PlayEpisodeButton;\n      if (playingEpisodeButton) {\n        this._flushLastPlayButton(playingEpisodeButton);\n      }\n\n      this._loadEpisode();\n    }\n  }\n\n  pause(): void {\n    this._audio.pause();\n  }\n\n  private _showPlayer(): void {\n    this._castopodAudioPlayer.style.display = \"\";\n    document.body.classList.add(\"pb-[105px]\", \"sm:pb-[52px]\");\n  }\n\n  private _flushLastPlayButton(playingEpisodeButton: PlayEpisodeButton): void {\n    playingEpisodeButton.isPlaying = false;\n\n    for (const event of playingEpisodeButton._events) {\n      playingEpisodeButton._audio.removeEventListener(\n        event.name,\n        event.onEvent,\n        false\n      );\n    }\n\n    this._playbackSpeed = playingEpisodeButton._playbackSpeed;\n  }\n\n  private _loadEpisode(): void {\n    this._castopodAudioPlayer.dataset.episode = this.id;\n\n    this._audio.src = this.src;\n    this._audio.load();\n    this._audio.playbackRate = this._playbackSpeed;\n    for (const event of this._events) {\n      this._audio.addEventListener(event.name, event.onEvent, false);\n    }\n\n    const img: HTMLImageElement | null =\n      this._castopodAudioPlayer.querySelector(\"img\");\n\n    if (img) {\n      img.src = this.imageSrc;\n      img.alt = this.title;\n    }\n\n    const episodeTitle: HTMLParagraphElement | null =\n      this._castopodAudioPlayer.querySelector('p[id=\"castopod-player-title\"]');\n\n    if (episodeTitle) {\n      episodeTitle.title = this.title;\n      episodeTitle.innerHTML = this.title;\n    }\n\n    const podcastTitle: HTMLParagraphElement | null =\n      this._castopodAudioPlayer.querySelector(\n        'p[id=\"castopod-player-podcast\"]'\n      );\n\n    if (podcastTitle) {\n      podcastTitle.title = this.podcast;\n      podcastTitle.innerHTML = this.podcast;\n    }\n  }\n\n  static styles = css`\n    button {\n      background-color: hsl(var(--color-accent-base));\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      padding: 0.5rem 0.5rem;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      border: 2px solid transparent;\n      border-radius: 9999px;\n\n      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    }\n\n    button:hover {\n      background-color: hsl(var(--color-accent-hover));\n    }\n\n    button:focus {\n      outline: none;\n      box-shadow:\n        0 0 0 2px hsl(var(--color-background-base)),\n        0 0 0 4px hsl(var(--color-accent-base));\n    }\n\n    button.playing {\n      background-color: hsl(var(--color-background-base));\n      border: 2px solid hsl(var(--color-accent-base));\n    }\n\n    button.playing:hover {\n      background-color: hsl(var(--color-background-elevated));\n    }\n\n    button.playing svg {\n      color: hsl(var(--color-accent-base));\n    }\n\n    svg {\n      font-size: 1.5rem;\n      color: hsl(var(--color-accent-contrast));\n    }\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    .animate-spin {\n      animation: spin 3s linear infinite;\n    }\n  `;\n\n  render(): TemplateResult<1> {\n    return html`<button\n      class=\"${this.isPlaying ? \"playing\" : \"\"}\"\n      @click=\"${this.isPlaying ? this.pause : this.play}\"\n      title=\"${this.isPlaying ? this.playingLabel : this.playLabel}\"\n    >\n      ${this.isPlaying\n        ? html`<svg\n            class=\"animate-spin\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            width=\"1em\"\n            height=\"1em\"\n          >\n            <g>\n              <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n              <path\n                d=\"M13 9.17A3 3 0 1 0 15 12V2.458c4.057 1.274 7 5.064 7 9.542 0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c.337 0 .671.017 1 .05v7.12z\"\n              />\n            </g>\n          </svg>`\n        : html`<svg\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            width=\"1em\"\n            height=\"1em\"\n          >\n            <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n            <path\n              d=\"M7.752 5.439l10.508 6.13a.5.5 0 0 1 0 .863l-10.508 6.13A.5.5 0 0 1 7 18.128V5.871a.5.5 0 0 1 .752-.432z\"\n            />\n          </svg>`}\n    </button>`;\n  }\n}\n"],"names":["PlayEpisodeButton","LitElement","event","_a","selector","resolve","element","_","observer","currentlyPlayingEpisode","isCurrentEpisode","playingEpisodeButton","img","episodeTitle","podcastTitle","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}