Use Bunny Player with Vue and Nuxt

declare module "player.js" {
  export type PlayerEvent =
    | "ready"
    | "play"
    | "pause"
    | "ended"
    | "timeupdate"
    | "progress"
    | "seeked"
    | "error"
    | "playbackratechange";

  export type TimeUpdate = { seconds: number; duration: number };
  export type Progress = { percent: number; seconds: number; duration: number };
  /** Present when a command fails. Empty when the media itself errors. */
  export type PlayerError = { code: number; msg: string };

  export class Player {
    constructor(iframe: HTMLIFrameElement | string);

    on(event: "ready", callback: () => void): void;
    on(event: "timeupdate", callback: (data: TimeUpdate) => void): void;
    on(event: "progress", callback: (data: Progress) => void): void;
    on(event: "playbackratechange", callback: (rate: number) => void): void;
    on(event: "error", callback: (error?: PlayerError) => void): void;
    on(event: PlayerEvent, callback: (data?: unknown) => void): void;
    off(event: PlayerEvent, callback?: (...args: never[]) => void): void;
    supports(kind: "method" | "event", name: string | string[]): boolean;
    /** Send a raw command, for methods player.js does not expose such as setPlaybackRate. Getters answer through the callback. */
    send(message: { method: string; value?: unknown }, callback?: (value: unknown) => void): void;

    play(): void;
    pause(): void;
    mute(): void;
    unmute(): void;
    setVolume(percent: number): void;
    setCurrentTime(seconds: number): void;
    setLoop(loop: boolean): void;

    getPaused(callback: (paused: boolean) => void): void;
    getMuted(callback: (muted: boolean) => void): void;
    getVolume(callback: (percent: number) => void): void;
    getDuration(callback: (seconds: number) => void): void;
    getCurrentTime(callback: (seconds: number) => void): void;
    getLoop(callback: (loop: boolean) => void): void;
  }

  const playerjs: {
    Player: typeof Player;
    addEvent(elem: EventTarget, type: string, handler: EventListener): void;
  };
  export default playerjs;
}

<script setup lang="ts">
import { computed, onMounted, ref, shallowRef, watch } from "vue";
import type { Player, TimeUpdate } from "player.js";

type PlayerJs = (typeof import("player.js"))["default"];

const props = withDefaults(
  defineProps<{
    libraryId: string;
    videoId: string;
    params?: Record<string, string | number | boolean>;
    title?: string;
  }>(),
  { title: "Video player" },
);

const emit = defineEmits<{
  ready: [player: Player];
  play: [];
  pause: [];
  ended: [];
  timeupdate: [time: TimeUpdate];
}>();

const iframe = ref<HTMLIFrameElement | null>(null);
const playerjs = shallowRef<PlayerJs | null>(null);
const player = shallowRef<Player | null>(null);

const src = computed(() => {
  const query = new URLSearchParams(
    Object.entries(props.params ?? {}).map(([key, value]) => [key, String(value)]),
  ).toString();
  return `https://player.mediadelivery.net/embed/${props.libraryId}/${props.videoId}${query ? `?${query}` : ""}`;
});

onMounted(async () => {
  // player.js reads window when imported, so load it in the browser only.
  playerjs.value = (await import("player.js")).default;
});

// The iframe is keyed by src, so this runs for every new iframe element,
// right after it is inserted and before it has finished loading.
watch(
  iframe,
  (el, _previous, onCleanup) => {
    const pjs = playerjs.value;
    if (!el || !pjs) return;

    // player.js never removes the window listener each Player adds,
    // so grab it while constructing and remove it on cleanup.
    let onMessage: EventListener = () => {};
    const addEvent = pjs.addEvent;
    pjs.addEvent = (elem, type, handler) => addEvent(elem, type, (onMessage = handler));
    const instance = new pjs.Player(el);
    pjs.addEvent = addEvent;

    instance.on("ready", () => emit("ready", instance));
    instance.on("play", () => emit("play"));
    instance.on("pause", () => emit("pause"));
    instance.on("ended", () => emit("ended"));
    instance.on("timeupdate", (time) => emit("timeupdate", time));

    player.value = instance;
    onCleanup(() => {
      window.removeEventListener("message", onMessage);
      player.value = null;
    });
  },
  { flush: "post" },
);

defineExpose({ player });
</script>

<template>
  <iframe
    v-if="playerjs"
    ref="iframe"
    :key="src"
    :src="src"
    :title="title"
    class="bunny-player"
    allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
    allowfullscreen
  />
  <!-- Hold the space until player.js is loaded so the iframe cannot
       finish loading before the Player exists. -->
  <div v-else class="bunny-player" aria-hidden="true" />
</template>

<style scoped>
.bunny-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
</style>