super_video/src/views/film/midterm-shooting/on-site/time-lapse.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ImgButton } from '@/components/Button'
import { Video } from '@/components'
import QuestionQuiz, {
  type Question,
} from '@/components/QuestionQuiz/QuestionQuiz.vue'
import {
  getBackgroundImage,
  getPublicPath,
  IMAGE_PATHS,
  getVideoPoster,
} from '@/utils'
import { useFilmStore } from '@/stores/modules/film'

const router = useRouter()
const filmStore = useFilmStore()

// 延时拍摄视频 URL（占位，后续可替换）
const timeLapseVideoUrl = getPublicPath(
  'video/film/on-site/xianchangpaishe_yanshipaishe.mp4',
)

const handleBack = () => {
  router.back()
}

// 交互一 & 交互二：选择题
const questions = ref<Question[]>([
  {
    id: 1,
    title: '观察判断',
    description:
      '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
    options: [
      { id: 'a', label: '建筑的外形结构' },
      { id: 'b', label: '天空的颜色' },
      { id: 'c', label: '时间的变化' },
      { id: 'd', label: '画面的清晰度' },
    ],
    correctOptionId: 'c',
    mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
    explanation:
      '有些变化虽然一直存在，但在正常速度下，并不容易被观众明显感知。延时拍摄适合把时间中的连续变化压缩呈现，让时间流动变得更清楚。',
  },
  {
    id: 2,
    title: '方法选择',
    description:
      '如果希望在很短时间内，让观众明显感知“时间正在流动”，你会选择哪种拍摄方式？',
    options: [
      { id: 'a', label: '手持拍摄' },
      { id: 'b', label: '慢动作拍摄' },
      { id: 'c', label: '延时拍摄' },
      { id: 'd', label: '推拉镜头' },
    ],
    correctOptionId: 'c',
    mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
    explanation:
      '延时拍摄能够压缩时间，让原本缓慢发生的变化在短时间内被清晰看到；手持、慢动作或推拉镜头都不能直接强化时间流逝感。',
  },
])

const showObserveStep = ref(false)
const videoPlaying = ref(false) // 视频播放状态

// 答题完成，进入交互三（视频）
const handleQuestionsComplete = () => {
  showObserveStep.value = true
  filmStore.markViewed('FilmOnsiteTimeLapse')
}
</script>

<template>
  <div class="relative w-full h-full overflow-hidden">
    <!-- 背景 -->
    <div
      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
      :style="{ backgroundImage: getBackgroundImage('film/on-site/现场拍摄') }"
    ></div>

    <!-- 交互一 & 交互二：选择题 -->
    <QuestionQuiz
      v-if="!showObserveStep"
      :questions="questions"
      @complete="handleQuestionsComplete"
    />
    <!-- 交互三：观察型 - 播放视频 -->
    <div
      v-if="showObserveStep"
      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
    >
      <div
        class="max-w-screen-2xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
      >
        <div class="flex gap-8">
          <!-- 总结文本内容 -->
          <div class="w-2/6 text-2xl leading-10 opacity-90 space-y-3">
            <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
            <p>
              在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。
            </p>

            <p>
              <span>延时拍摄的主要目的</span>
              ，
              <span>是交代时间流逝与环境状态</span>
              。
            </p>
            <p>
              <span>这里的拍摄对象是江边的建筑群与天空</span>
              。
              <span>通过固定机位的连续拍摄</span>
              ，
              <span>将原本需要较长时间才能观察到的</span>
              <span>天空变化和光影移动</span>
              ，
              <span>压缩到一个较短的镜头中呈现</span>
              。
            </p>
            <p>
              <span>这种处理方式</span>
              ，
              <span>非常适合放置在视频片头阶段</span>
              ，
              <span>用于快速建立时间感与空间环境</span>
              ，
              <span>而不会占用过多时长</span>
              。
            </p>
          </div>
          <div
            class="flex-1 rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]"
          >
            <Video
              class="w-full h-full"
              :src="timeLapseVideoUrl"
              :poster="getVideoPoster(timeLapseVideoUrl)"
              v-model="videoPlaying"
              :muted="false"
              :volume="1"
              :controls="true"
              :hideNativeControls="true"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <ImgButton
      class="absolute right-0 top-0 z-50"
      :image="IMAGE_PATHS.COMPONENTS.BACK"
      @click="handleBack"
    />
  </div>
</template>