RUWIO/src/components/FullscreenPreview.vue

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { PhPause, PhPlay, PhSkipBack, PhX } from '@phosphor-icons/vue'
import { useSceneStore } from '@/stores/scene'
import { mountPlayer, type PlayerHandle } from '@/lib/exportPlayer'
import { t } from '@/i18n'

const props = defineProps<{ modelValue: boolean }>()
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()

const store = useSceneStore()

const frameEl = ref<HTMLDivElement | null>(null)
const rootEl = ref<HTMLDivElement | null>(null)
const progressTrackEl = ref<HTMLDivElement | null>(null)
const localTime = ref(0)
const playing = ref(false)
const showControls = ref(false)
const scrubbing = ref(false)

const HOVER_ZONE_PX = 160
let isClosing = false
let player: PlayerHandle | null = null

const aspect = computed(
  () => `${store.scene.canvas.width} / ${store.scene.canvas.height}`,
)

const rangeIn = computed(() => store.playbackIn)
const rangeOut = computed(() => store.playbackOut)

// ---- lifecycle ----

async function startPreview() {
  destroyPlayer()
  await nextTick()
  const el = frameEl.value
  if (!el) return
  playing.value = true
  showControls.value = false
  const start = rangeIn.value
  const end = rangeOut.value
  const head = store.playhead
  const initialTime = head < start || head >= end ? start : head
  player = mountPlayer(el, store.scene, {
    loop: true,
    onFrame(time: number, paused: boolean) {
      localTime.value = time
      playing.value = !paused
    },
  })
  player.seek(initialTime)
  requestBrowserFullscreen()
}

function stopPreview() {
  destroyPlayer()
  playing.value = false
  showControls.value = false
  exitBrowserFullscreen()
}

function destroyPlayer() {
  if (player) {
    player.destroy()
    player = null
  }
}

async function requestBrowserFullscreen() {
  const el = rootEl.value
  if (!el) return
  if (document.fullscreenElement === el) return
  try {
    await el.requestFullscreen?.()
  } catch {
    /* user gesture missing or not supported — gracefully keep overlay */
  }
}

function exitBrowserFullscreen() {
  if (document.fullscreenElement) {
    isClosing = true
    document.exitFullscreen?.().catch(() => {
      /* ignore */
    })
  }
}

function onFullscreenChange() {
  if (!props.modelValue) return
  if (document.fullscreenElement === rootEl.value) return
  if (isClosing) {
    isClosing = false
    return
  }
  close()
}

function onRootMouseMove(e: MouseEvent) {
  const nearBottom = e.clientY > window.innerHeight - HOVER_ZONE_PX
  if (nearBottom || scrubbing.value) showControls.value = true
  else showControls.value = false
}

function onRootMouseLeave() {
  if (!scrubbing.value) showControls.value = false
}

// ---- transport controls ----

const progressPct = computed(() => {
  const start = rangeIn.value
  const end = rangeOut.value
  const len = end - start
  if (len <= 0) return 0
  return Math.max(0, Math.min(1, (localTime.value - start) / len)) * 100
})

function seekFromEvent(e: PointerEvent) {
  const el = progressTrackEl.value
  if (!el || !player) return
  const rect = el.getBoundingClientRect()
  if (rect.width <= 0) return
  const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
  const start = rangeIn.value
  const end = rangeOut.value
  player.seek(start + ratio * (end - start))
}

function onProgressPointerDown(e: PointerEvent) {
  const el = e.currentTarget as HTMLElement
  el.setPointerCapture(e.pointerId)
  scrubbing.value = true
  if (player) player.pause()
  seekFromEvent(e)
}

function onProgressPointerMove(e: PointerEvent) {
  if (!scrubbing.value) return
  seekFromEvent(e)
}

function onProgressPointerUp(e: PointerEvent) {
  const el = e.currentTarget as HTMLElement
  if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId)
  scrubbing.value = false
}

function close() {
  emit('update:modelValue', false)
}

function toggle() {
  if (player) player.toggle()
}

function rewind() {
  if (player) {
    player.seek(rangeIn.value)
    player.play()
  }
}

function onKeyDown(e: KeyboardEvent) {
  if (!props.modelValue) return
  if (e.key === 'Escape') {
    e.preventDefault()
    close()
    return
  }
  if (e.code === 'Space') {
    e.preventDefault()
    toggle()
  }
}

watch(
  () => props.modelValue,
  (v) => {
    if (v) startPreview()
    else stopPreview()
  },
)

onMounted(() => {
  document.addEventListener('keydown', onKeyDown)
  document.addEventListener('fullscreenchange', onFullscreenChange)
  if (props.modelValue) startPreview()
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', onKeyDown)
  document.removeEventListener('fullscreenchange', onFullscreenChange)
  destroyPlayer()
  exitBrowserFullscreen()
})

const timeLabel = computed(() => {
  const end = rangeOut.value || 0
  return `${localTime.value.toFixed(2)}s / ${end.toFixed(2)}s`
})
</script>

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div
        v-if="modelValue"
        ref="rootEl"
        class="fs-root"
        :class="{ 'controls-visible': showControls || scrubbing }"
        @mousemove="onRootMouseMove"
        @mouseleave="onRootMouseLeave"
        @dblclick.self="close"
      >
        <div ref="frameEl" class="fs-frame" :style="{ aspectRatio: aspect }"></div>

        <div class="fs-controls" @mousedown.stop>
          <div
            ref="progressTrackEl"
            class="fs-progress"
            @pointerdown="onProgressPointerDown"
            @pointermove="onProgressPointerMove"
            @pointerup="onProgressPointerUp"
            @pointercancel="onProgressPointerUp"
          >
            <div class="fs-progress-track">
              <div class="fs-progress-fill" :style="{ width: progressPct + '%' }"></div>
            </div>
            <div class="fs-progress-handle" :style="{ left: progressPct + '%' }"></div>
          </div>
          <div class="fs-toolbar">
            <button class="fs-btn" v-tooltip="playing ? t('fullscreen.pause') : t('fullscreen.play')" @click="toggle">
              <PhPause v-if="playing" :size="15" weight="fill" />
              <PhPlay v-else :size="15" weight="fill" />
            </button>
            <button class="fs-btn" v-tooltip="t('fullscreen.jumpToStart')" @click="rewind">
              <PhSkipBack :size="15" weight="fill" />
            </button>
            <span class="fs-time">{{ timeLabel }}</span>
            <div class="fs-spacer"></div>
            <button class="fs-btn close" v-tooltip="t('fullscreen.close')" @click="close">
              <PhX :size="15" weight="bold" />
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.fs-root {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.fs-frame {
  position: relative;
  width: min(100vw, 100vh * (16 / 9));
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-frame :deep(video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.fs-frame :deep(canvas) {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.fs-controls {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  width: min(720px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 10px;
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 10;
}

.fs-root.controls-visible .fs-controls {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.fs-progress {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.fs-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.fs-progress-fill {
  height: 100%;
  background: var(--accent, #6ea8ff);
  border-radius: 999px;
  transition: width 60ms linear;
}

.fs-progress-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: #fff;
  border: 2px solid var(--accent, #6ea8ff);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.fs-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fs-spacer {
  flex: 1;
}

.fs-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
}

.fs-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fs-btn.close:hover {
  background: rgba(255, 85, 85, 0.2);
  color: #ff7a7a;
}

.fs-time {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  padding: 0 6px;
  min-width: 96px;
  text-align: center;
}


.fade-enter-active,
.fade-leave-active {
  transition: opacity 160ms var(--ease, ease);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>