Initial Commit

app/components/VideoPlayer.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+
+defineProps<{
+  src: string
+}>()
+
+const videoEl = ref<HTMLVideoElement | null>(null)
+const aspect = ref<number | null>(null)
+let player: Plyr | null = null
+
+onMounted(async () => {
+  if (!videoEl.value) return
+  const { default: PlyrClass } = await import('plyr')
+  player = new PlyrClass(videoEl.value, {
+    disableContextMenu: false,
+    storage: { enabled: true, key: '4brett-player' },
+  })
+})
+
+onBeforeUnmount(() => {
+  player?.destroy()
+  player = null
+})
+
+function onLoadedMetadata() {
+  const v = videoEl.value
+  if (v?.videoWidth && v.videoHeight) {
+    aspect.value = v.videoWidth / v.videoHeight
+  }
+}
+</script>
+
+<template>
+  <div
+    class="video-player mx-auto w-full max-w-4xl"
+    :style="aspect ? { maxWidth: `min(100%, 56rem, calc(80vh * ${aspect}))` } : undefined"
+  >
+    <video
+      ref="videoEl"
+      :src="src"
+      playsinline
+      controls
+      class="rounded-md"
+      @loadedmetadata="onLoadedMetadata"
+    />
+  </div>
+</template>
+
+<style scoped>
+.video-player {
+  --plyr-color-main: var(--accent);
+  --plyr-border-radius: var(--radius-md);
+}
+</style>