---
import { MuxPlayer } from '@mux/mux-player-astro';
---
<template id="tiny-theme">
  <media-controller>
    <slot name="media" slot="media"></slot>
    <media-control-bar>
      <media-play-button></media-play-button>
    </media-control-bar>
  </media-controller>
</template>
<MuxPlayer
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  theme="tiny-theme"
/>

---
import { MuxPlayer } from '@mux/mux-player-astro';
---

<MuxPlayer
  playbackId="your-audio-playback-id"
  audio
  metadata={{
    video_title: 'My Podcast Episode',
  }}
/>

---
import { MuxPlayer } from '@mux/mux-player-astro';
---

<MuxPlayer
  playbackId="your-live-playback-id"
  streamType="live"
  targetLiveWindow={Infinity}
  title="Live Stream"
/>

---
import { MuxPlayer } from '@mux/mux-player-astro';
---

<MuxPlayer
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  primaryColor="#ff6b35"
  secondaryColor="#ffffff"
  accentColor="#0066cc"
/>

---
import { MuxPlayer } from '@mux/mux-player-astro';
---

<MuxPlayer
  id="my-player"
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
/>

<script>
  import type { MuxPlayerElement } from '@mux/mux-player-astro';

  const player = document.getElementById('my-player') as MuxPlayerElement;

  player.addEventListener('play', (event) => {
    console.log('Player started playing!');
  });

  player.addEventListener('pause', (event) => {
    console.log('Player paused!');
  });

  player.addEventListener('timeupdate', (event) => {
    console.log('Current time: ', player.currentTime);
  });

  player.addEventListener('ended', (event) => {
    console.log('Video ended!');
  });
</script>