<template>
  <div class="fc-canvas fc-canvas--video" @click.self="$emit('close-request')">
    <video
      v-if="playable" :src="src" controls playsinline preload="metadata"
      class="fc-canvas__video"
      @click.stop
    />
    <div v-else class="fc-canvas__unsupported" @click.stop>
      <v-icon size="56" icon="mdi-video-off-outline" />
      <h3 class="fc-canvas__unsupported-title">Format not browser-playable</h3>
      <p>
        This video isn't in a format the browser can play natively
        (<code>{{ mime }}</code>). Transcoding to MP4 lands in FC-2e —
        until then, you can download the original.
      </p>
      <v-btn :href="src" download variant="tonal" rounded="pill">
        <v-icon start>mdi-download</v-icon>
        Download original
      </v-btn>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

defineEmits(['close-request'])
const props = defineProps({ src: String, mime: String })

const BROWSER_PLAYABLE = new Set([
  'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime'
])
const playable = computed(() => BROWSER_PLAYABLE.has(props.mime))
</script>

<style scoped>
.fc-canvas {
  flex: 1;
  /* Transparent so the viewer's haze shows through (parallels
     ImageCanvas — both sit inside ImageViewer's blurred backdrop). */
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.fc-canvas__video { max-width: 100%; max-height: 100%; }
.fc-canvas__unsupported {
  text-align: center;
  max-width: 520px;
  padding: 32px;
  color: rgb(var(--v-theme-on-surface));
}
.fc-canvas__unsupported-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  margin: 12px 0 8px;
}
code {
  background: rgb(var(--v-theme-surface-light));
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
</style>
