castopod/app/Resources/js/audio-player.ts

import {
  VmAudio,
  VmCaptions,
  VmClickToPlay,
  VmControl,
  VmControls,
  VmCurrentTime,
  VmDefaultControls,
  VmDefaultSettings,
  VmDefaultUi,
  VmEndTime,
  VmFile,
  VmIcon,
  VmIconLibrary,
  VmLoadingScreen,
  VmMenu,
  VmMenuItem,
  VmMenuRadio,
  VmMenuRadioGroup,
  VmMuteControl,
  VmPlaybackControl,
  VmPlayer,
  VmScrubberControl,
  VmSettings,
  VmSettingsControl,
  VmSkeleton,
  VmSlider,
  VmSubmenu,
  VmTime,
  VmTimeProgress,
  VmTooltip,
  VmUi,
  VmVolumeControl,
} from "@vime/core";
import "@vime/core/themes/default.css";
import "@vime/core/themes/light.css";
import { html, render } from "lit";
import "./modules/play-episode-button";

const player = html`<div
  id="castopod-audio-player"
  class="fixed bottom-0 left-0 flex flex-col w-full bg-elevated border-t border-subtle sm:flex-row z-50"
  data-episode="-1"
  style="display: none;"
>
  <div class="flex items-center">
    <img src="" alt="" class="h-[52px] w-[52px]" loading="lazy" />
    <div class="flex flex-col px-2">
      <p
        class="text-sm w-48 truncate font-semibold"
        title=""
        id="castopod-player-title"
      ></p>
      <p
        class="text-xs w-48 truncate"
        title=""
        id="castopod-player-podcast"
      ></p>
    </div>
  </div>
  <vm-player
    id="castopod-vm-player"
    theme="light"
    language="en"
    icons="castopod-icons"
    class="flex-1"
    style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"
  >
    <vm-audio preload="none" id="testing-audio">
      <source src="" type="" />
    </vm-audio>
    <vm-ui>
      <vm-icon-library name="castopod-icons"></vm-icon-library>
      <vm-controls full-width>
        <vm-playback-control></vm-playback-control>
        <vm-volume-control></vm-volume-control>
        <vm-current-time></vm-current-time>
        <vm-scrubber-control></vm-scrubber-control>
        <vm-end-time></vm-end-time>
        <vm-settings-control></vm-settings-control>
        <vm-default-settings></vm-default-settings>
      </vm-controls>
    </vm-ui>
  </vm-player>
</div>`;

render(player, document.body);

// Register Castopod's icons library
const library: HTMLVmIconLibraryElement | null = document.querySelector(
  'vm-icon-library[name="castopod-icons"]'
);
if (library) {
  library.resolver = (iconName) => `/assets/icons/${iconName}.svg`;
}

// Vime elements for audio player
customElements.define("vm-player", VmPlayer);
customElements.define("vm-file", VmFile);
customElements.define("vm-audio", VmAudio);
customElements.define("vm-ui", VmUi);
customElements.define("vm-default-ui", VmDefaultUi);
customElements.define("vm-click-to-play", VmClickToPlay);
customElements.define("vm-captions", VmCaptions);
customElements.define("vm-loading-screen", VmLoadingScreen);
customElements.define("vm-default-controls", VmDefaultControls);
customElements.define("vm-default-settings", VmDefaultSettings);
customElements.define("vm-controls", VmControls);
customElements.define("vm-playback-control", VmPlaybackControl);
customElements.define("vm-volume-control", VmVolumeControl);
customElements.define("vm-scrubber-control", VmScrubberControl);
customElements.define("vm-current-time", VmCurrentTime);
customElements.define("vm-end-time", VmEndTime);
customElements.define("vm-settings-control", VmSettingsControl);
customElements.define("vm-time-progress", VmTimeProgress);
customElements.define("vm-control", VmControl);
customElements.define("vm-icon", VmIcon);
customElements.define("vm-icon-library", VmIconLibrary);
customElements.define("vm-tooltip", VmTooltip);
customElements.define("vm-mute-control", VmMuteControl);
customElements.define("vm-slider", VmSlider);
customElements.define("vm-time", VmTime);
customElements.define("vm-menu", VmMenu);
customElements.define("vm-menu-item", VmMenuItem);
customElements.define("vm-submenu", VmSubmenu);
customElements.define("vm-menu-radio-group", VmMenuRadioGroup);
customElements.define("vm-menu-radio", VmMenuRadio);
customElements.define("vm-settings", VmSettings);
customElements.define("vm-skeleton", VmSkeleton);