feat: typed vue component

[miaulightouch]

well-typed component for vue

for typescript usage, you need @types/ovenplayer@^0.10.8 installed.

usage:

<template>
  <OvenPlayer ref="player" :config="config" @state-changed="OnStateChanged" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import OvenPlayer from 'ovenplayer-vue3';
import type { OvenPlayerEvents, OvenPlayerConfig } from 'ovenplayer';

// OvenPlayer component instance
const ovenplayer = ref<InstanceType<typeof OvenPlayer>>();

// set config
const config = ref<OvenPlayerConfig>({
  autoStart: true,
  autoFallback: true,
  controls: false,
  disableSeekUI: true,
  mute: true
});

// state changed event handler
const OnStateChanged = (data: OvenPlayerEvents['stateChanged']) => {
  if (!ovenplayer.value?.playerInstance) return;
  if (!data.newstate) return;
  console.log('quality', ovenplayer.value.playerInstance.getQualityLevels());
};
</script>