From 3011bdcbb61c8643deeef0602524032059f46627 Mon Sep 17 00:00:00 2001
From: bazamel <basunako@gmail.com>
Date: Wed, 8 Jul 2026 19:51:53 +0700
Subject: [PATCH] added video testimonial + customer story component / content

---
 app/components/VideoCustomerStory.vue    | 131 +++++++++++++++++++++++
 app/components/VideoTestimonial.vue      | 131 +++++++++++++++++++++++
 app/composables/useVideoCustomerStory.js |  14 +++
 app/composables/useVideoTestimonial.js   |  14 +++
 app/pages/index.vue                      |   4 +
 content.config.ts                        |   4 +-
 content/en_pages.json                    |  42 +++++++-
 7 files changed, 338 insertions(+), 2 deletions(-)
 create mode 100644 app/components/VideoCustomerStory.vue
 create mode 100644 app/components/VideoTestimonial.vue
 create mode 100644 app/composables/useVideoCustomerStory.js
 create mode 100644 app/composables/useVideoTestimonial.js

diff --git a/app/components/VideoCustomerStory.vue b/app/components/VideoCustomerStory.vue
new file mode 100644
index 00000000..b5d08836
--- /dev/null
+++ b/app/components/VideoCustomerStory.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="video-wrapper">
+    <iframe
+      ref="playerRef"
+      class="video-iframe"
+      :src="videoUrl"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+
+    <button
+      class="play-pause-overlay"
+      type="button"
+      :aria-label="isPlaying ? 'Pause video' : 'Play video'"
+      @click="togglePlay"
+    >
+      <svg v-if="!isPlaying" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+      <svg v-else viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  slug: String
+})
+
+const { locale } = useI18n()
+const slug = computed(() => props.slug)
+
+const { queryVideoCustomerStory } = useVideoCustomerStory(slug, locale)
+
+const { data: customerStory } = await useAsyncData(
+  `video-customer-story-${locale.value}-${slug.value}`,
+  queryVideoCustomerStory,
+  { watch: [locale, slug] }
+)
+
+const playerRef = ref(null)
+const isPlaying = ref(false)
+
+// Build the embed URL with controls hidden and the JS API enabled
+const videoUrl = computed(() => {
+  const rawUrl = customerStory.value?.meta?.url
+  if (!rawUrl) return ''
+  const url = new URL(rawUrl)
+  url.searchParams.set('controls', '0')
+  url.searchParams.set('enablejsapi', '1')
+  url.searchParams.set('modestbranding', '1')
+  url.searchParams.set('playsinline', '1')
+  url.searchParams.set('rel', '0')
+  if (typeof window !== 'undefined') {
+    // required for the postMessage API to work reliably
+    url.searchParams.set('origin', window.location.origin)
+  }
+  return url.toString()
+})
+
+function postCommand(func) {
+  playerRef.value?.contentWindow?.postMessage(
+    JSON.stringify({ event: 'command', func, args: [] }),
+    '*'
+  )
+}
+
+function togglePlay() {
+  postCommand(isPlaying.value ? 'pauseVideo' : 'playVideo')
+  isPlaying.value = !isPlaying.value
+}
+
+// Keep the button state in sync with actual player state
+function handleMessage(event) {
+  if (typeof event.data !== 'string') return
+  try {
+    const data = JSON.parse(event.data)
+    if (data.event === 'infoDelivery' && typeof data.info?.playerState === 'number') {
+      // 1 = playing, 2 = paused, 0 = ended
+      if (data.info.playerState === 1) isPlaying.value = true
+      else if (data.info.playerState === 2 || data.info.playerState === 0) isPlaying.value = false
+    }
+  } catch {
+    // ignore non-JSON messages from other sources
+  }
+}
+
+onMounted(() => window.addEventListener('message', handleMessage))
+onBeforeUnmount(() => window.removeEventListener('message', handleMessage))
+</script>
+
+<style scoped>
+.video-wrapper {
+  position: relative;
+  width: 720px;
+  height: 1280px;
+  max-width: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+.video-iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.play-pause-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.play-pause-overlay svg {
+  width: 72px;
+  height: 72px;
+  fill: rgba(255, 255, 255, 0.9);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+}
+</style>
\ No newline at end of file
diff --git a/app/components/VideoTestimonial.vue b/app/components/VideoTestimonial.vue
new file mode 100644
index 00000000..f037270f
--- /dev/null
+++ b/app/components/VideoTestimonial.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="video-wrapper">
+    <iframe
+      ref="playerRef"
+      class="video-iframe"
+      :src="videoUrl"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+
+    <button
+      class="play-pause-overlay"
+      type="button"
+      :aria-label="isPlaying ? 'Pause video' : 'Play video'"
+      @click="togglePlay"
+    >
+      <svg v-if="!isPlaying" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+      <svg v-else viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  slug: String
+})
+
+const { locale } = useI18n()
+const slug = computed(() => props.slug)
+
+const { queryVideoTestimonial } = useVideoTestimonial(slug, locale)
+
+const { data: customerStory } = await useAsyncData(
+  `video-testimonial-${locale.value}-${slug.value}`,
+  queryVideoTestimonial,
+  { watch: [locale, slug] }
+)
+
+const playerRef = ref(null)
+const isPlaying = ref(false)
+
+// Build the embed URL with controls hidden and the JS API enabled
+const videoUrl = computed(() => {
+  const rawUrl = customerStory.value?.meta?.url
+  if (!rawUrl) return ''
+  const url = new URL(rawUrl)
+  url.searchParams.set('controls', '0')
+  url.searchParams.set('enablejsapi', '1')
+  url.searchParams.set('modestbranding', '1')
+  url.searchParams.set('playsinline', '1')
+  url.searchParams.set('rel', '0')
+  if (typeof window !== 'undefined') {
+    // required for the postMessage API to work reliably
+    url.searchParams.set('origin', window.location.origin)
+  }
+  return url.toString()
+})
+
+function postCommand(func) {
+  playerRef.value?.contentWindow?.postMessage(
+    JSON.stringify({ event: 'command', func, args: [] }),
+    '*'
+  )
+}
+
+function togglePlay() {
+  postCommand(isPlaying.value ? 'pauseVideo' : 'playVideo')
+  isPlaying.value = !isPlaying.value
+}
+
+// Keep the button state in sync with actual player state
+function handleMessage(event) {
+  if (typeof event.data !== 'string') return
+  try {
+    const data = JSON.parse(event.data)
+    if (data.event === 'infoDelivery' && typeof data.info?.playerState === 'number') {
+      // 1 = playing, 2 = paused, 0 = ended
+      if (data.info.playerState === 1) isPlaying.value = true
+      else if (data.info.playerState === 2 || data.info.playerState === 0) isPlaying.value = false
+    }
+  } catch {
+    // ignore non-JSON messages from other sources
+  }
+}
+
+onMounted(() => window.addEventListener('message', handleMessage))
+onBeforeUnmount(() => window.removeEventListener('message', handleMessage))
+</script>
+
+<style scoped>
+.video-wrapper {
+  position: relative;
+  width: 720px;
+  height: 1280px;
+  max-width: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+.video-iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.play-pause-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.play-pause-overlay svg {
+  width: 72px;
+  height: 72px;
+  fill: rgba(255, 255, 255, 0.9);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+}
+</style>
\ No newline at end of file
diff --git a/app/composables/useVideoCustomerStory.js b/app/composables/useVideoCustomerStory.js
new file mode 100644
index 00000000..5bd58556
--- /dev/null
+++ b/app/composables/useVideoCustomerStory.js
@@ -0,0 +1,14 @@
+export function useVideoCustomerStory(slug, locale) {
+  async function queryVideoCustomerStory() {
+    let res = await queryCollection('jsonPages')
+      .where('lang', '=', locale.value)
+      .where('pageType', '=', 'video_testimonials')
+      .all()
+
+    res = res.filter(t => t.stem.split('/')[2] == slug.value)
+
+    return res[0]
+  }
+
+  return { queryVideoCustomerStory }
+}
diff --git a/app/composables/useVideoTestimonial.js b/app/composables/useVideoTestimonial.js
new file mode 100644
index 00000000..68dd8536
--- /dev/null
+++ b/app/composables/useVideoTestimonial.js
@@ -0,0 +1,14 @@
+export function useVideoTestimonial(slug, locale) {
+  async function queryVideoTestimonial() {
+    let res = await queryCollection('jsonPages')
+      .where('lang', '=', locale.value)
+      .where('pageType', '=', 'video_testimonials')
+      .all()
+
+    res = res.filter(t => t.stem.split('/')[2] == slug.value)
+
+    return res[0]
+  }
+
+  return { queryVideoTestimonial }
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 22f91ddb..54e468b4 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -32,6 +32,8 @@
 
     <UserLogos />
 
+    <VideoCustomerStory slug="miyu-1"/>
+
     <div class="production-success" id="flow" :style="flowBackground">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         <path
@@ -487,6 +489,8 @@
 </template>
 
 <script setup>
+import VideoCustomerStory from '~/components/VideoCustomerStory.vue'
+
 const { locale } = useI18n()
 const slug = ref('index')
 
diff --git a/content.config.ts b/content.config.ts
index 2a4a0066..f9830412 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -19,7 +19,9 @@ const COLLECTIONS = [
   { key: 'audiences' },
   { key: 'studios' },
   { key: 'testimonials' },
-  { key: 'customer_stories' }
+  { key: 'customer_stories' },
+  { key: 'video_testimonials' },
+  { key: 'video_customer_stories' }
 ]
 
 const loadPages = async lang => {
diff --git a/content/en_pages.json b/content/en_pages.json
index 9eb06cd0..63e058fd 100644
--- a/content/en_pages.json
+++ b/content/en_pages.json
@@ -3790,5 +3790,45 @@
       "quote": "I knew that if I brought in a new tool, I needed to address a need that hadn't been identified by the core team already in place. The main challenge right away was not to constrain them.",
       "category": "Feature Films (2D)"
     }
+  },
+  "video_testimonials": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    }
+  },
+  "video_customer_stories": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/wLf0wgiQa1M?si=ZSBA1ty9aMhGV88U"
+    }
   }
-}
+}
\ No newline at end of file