cmをトーク単位で制御できるようにする変更

src/components/Page5.tsx

@@ -0,0 +1,72 @@
+import { Optional } from '@/utils/types'
+import { TalkView } from './models/talkView'
+import { useContext } from 'react'
+import { PageCtx } from './models/pageContext'
+import VideoPlaylist, { Playlist } from './VideoPlaylist'
+
+type Props = { view: Optional<TalkView> }
+
+// CM スポンサーがいない時には 各 source をコメントアウトする
+
+const cmList: Record<string, { src: string; type: string }> = {
+  cyberagent: {
+    src: 'https://pub-ac15e822806e471884e2b63b26f353c6.r2.dev/cyberagent.mp4',
+    type: 'video/mp4',
+  },
+  saasusplatform: {
+    src: 'https://pub-ac15e822806e471884e2b63b26f353c6.r2.dev/o11ycon2025/saasusplatform.mp4',
+    type: 'video/mp4',
+  },
+  monotaro1: {
+    src: 'https://pub-ac15e822806e471884e2b63b26f353c6.r2.dev/monotaro1.mp4',
+    type: 'video/mp4',
+  },
+  monotaro2: {
+    src: 'https://pub-ac15e822806e471884e2b63b26f353c6.r2.dev/monotaro2.mp4',
+    type: 'video/mp4',
+  },
+}
+
+export default function Page({ view }: Props) {
+  const { goNextPage } = useContext(PageCtx)
+  const playlist: Playlist = []
+
+  const cmIds = view?.getCmIds()
+  let cmids: string[]
+
+  if (cmIds === undefined) {
+    // undefined の場合: すべてのCMを再生
+    cmids = Object.keys(cmList)
+    console.log('CM IDs (undefined - using all):', cmids)
+  } else if (cmIds.length === 0) {
+    // 空配列の場合: CMをスキップして次のページへ
+    console.log('CM IDs (empty - skipping):', cmIds)
+    return goNextPage()
+  } else {
+    // 配列に値がある場合: 指定されたCMを再生
+    cmids = cmIds
+    console.log('CM IDs (specified):', cmids)
+  }
+
+  cmids.forEach((cmid) => {
+    const cm = cmList[cmid]
+    if (cm) {
+      playlist.push({
+        sources: [
+          {
+            src: cm.src,
+            type: cm.type,
+          },
+        ],
+      })
+    }
+  })
+
+  console.log('Page5 playlist:', playlist)
+
+  return (
+    <div className="w-full h-full">
+      <VideoPlaylist onEnded={goNextPage} playlist={playlist}></VideoPlaylist>
+    </div>
+  )
+}

src/components/models/talkView.ts

@@ -104,6 +104,10 @@ export class TalkView {
       talk.speakers.map((s) => s.id).includes(speaker.id)
     )
   }
+
+  getCmIds(): string[] | undefined {
+    return this.selectedTalk.cmIds
+  }
 }
 
 type TimeSlot = {

src/data/talks.ts

@@ -15,6 +15,7 @@ export const talks: Talk[] = [
     startTime: '2025-10-27T10:00:00',
     endTime: '2025-10-27T10:10:00',
     conferenceDayId: 1,
+    cmIds: ['cyberagent'],
   },
   {
     id: 102,
@@ -31,6 +32,7 @@ export const talks: Talk[] = [
     startTime: '2025-10-27T10:10:00',
     endTime: '2025-10-27T11:00:00',
     conferenceDayId: 1,
+    cmIds: ['monotaro1', 'monotaro2'],
   },
   {
     id: 103,
@@ -47,6 +49,7 @@ export const talks: Talk[] = [
     startTime: '2025-10-27T11:20:00',
     endTime: '2025-10-27T11:50:00',
     conferenceDayId: 1,
+    cmIds: []
   },
   {
     id: 201,
@@ -79,6 +82,7 @@ export const talks: Talk[] = [
     startTime: '2025-10-27T11:20:00',
     endTime: '2025-10-27T11:50:00',
     conferenceDayId: 1,
+    cmIds: []
   },
   {
     id: 104,

src/data/types.ts

@@ -13,6 +13,7 @@ export type Talk = {
   talkCategory?: string | undefined
   conferenceDayId?: (number | null) | undefined
   showOnTimetable?: boolean | undefined
+  cmIds?: string[] | undefined
 }
 
 export type Track = {

src/pages/break/talks/[talkId].tsx

@@ -3,6 +3,7 @@ import Page1 from '@/components/Page1'
 import Page2, { AvatarPreLoader } from '@/components/Page2'
 import Page3 from '@/components/Page3'
 import Page4 from '@/components/Page4'
+import Page5 from '@/components/Page5'
 import { PageCtx, PageCtxProvider } from '@/components/models/pageContext'
 import { TalkView } from '@/components/models/talkView'
 import config, { extendConfig } from '@/config'
@@ -12,6 +13,7 @@ import { tracks } from '@/data/tracks'
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useMemo } from 'react'
 import Image from 'next/image'
+import { ReactElement } from 'react'
 
 function updateCache() {
   if (navigator.serviceWorker && navigator.serviceWorker.controller) {
@@ -22,6 +24,8 @@ function updateCache() {
 function Pages() {
   const router = useRouter()
   const { talkId } = router.query
+  const isDk = router.asPath.includes('break-dk')
+
   useEffect(() => {
     extendConfig(router.query as Record<string, string>)
   }, [router.query])
@@ -34,21 +38,25 @@ function Pages() {
     }
     return TalkView.withoutDk(talkId as string, talks, tracks, speakers)
   }, [talkId])
+  interface PageProps {
+    view: ReturnType<typeof TalkView.withoutDk> | null
+    isDk?: boolean
+  }
 
-  const pages = [
+  const pages: ReactElement<PageProps>[] = [
     <Page1 key={1} view={view} isDk={false} />,
     <Page2 key={2} view={view} isDk={false} />,
     <Page3 key={3} view={view} isDk={false} />,
-    // <Page4 key={4} view={view} />,
+    isDk ? <Page4 key={4} view={view} /> : <Page5 key={4} view={view} />,
   ]
   useEffect(() => {
     setTotalPage(pages.length)
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   const audioSrc = '/pek2025/pek2025_intermission.mp3'
 
-  const shouldPlayAudio = current !== pages.length // Page4を使用しない場合
-  // const shouldPlayAudio = current !== pages.length - 1
+  // const shouldPlayAudio = current !== pages.length // Page4を使用しない場合
+  const shouldPlayAudio = current !== pages.length - 1
 
   if (!view && config.debug) {
     return <div className="text-white">Loading...</div>