上映会のし組み作り（#295） (#296)

#295

#295

#295

#295

#295

#295

#295

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #296

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
@@ -21,7 +21,7 @@ import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
 import type { FC } from 'react'
 
-import type { User } from '@/types'
+import type { NiconicoViewerHandle, User } from '@/types'
 
 type Props = { user: User | null }
 
@@ -38,6 +38,8 @@ export default (({ user }: Props) => {
 
   const qc = useQueryClient ()
 
+  const embedRef = useRef<NiconicoViewerHandle> (null)
+
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
@@ -120,7 +122,10 @@ export default (({ user }: Props) => {
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}
 
-		<PostEmbed post={post}/>
+		<PostEmbed
+		    ref={embedRef}
+		    post={post}
+		    onLoadComplete={() => embedRef.current?.play ()}/>
 		<Button onClick={() => changeViewedFlg.mutate ()}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>