上映会ニコニコ・バグ修正 (#358) (#359)

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

frontend/src/components/PostEmbed.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import YoutubeEmbed from 'react-youtube'
 
 import NicoViewer from '@/components/NicoViewer'
@@ -36,6 +36,17 @@ const PostEmbed: FC<Props> = ({
   const dialogue = useDialogue ()
   const [framed, setFramed] = useState (false)
   const [youtubePlayer, setYoutubePlayer] = useState<YouTubePlayer | null> (null)
+  const niconicoVideoReadyRef = useRef (false)
+
+  const notifyNiconicoVideoReady = useCallback ((durationMs: number) => {
+    if (niconicoVideoReadyRef.current
+	|| !(Number.isFinite (durationMs))
+	|| durationMs <= 0)
+      return
+
+    niconicoVideoReadyRef.current = true
+    onVideoReady?.(durationMs)
+  }, [onVideoReady])
 
   const reportYoutubePlayback = useCallback (async (player: YouTubePlayer) => {
     const currentTime = await player.getCurrentTime ()
@@ -80,15 +91,20 @@ const PostEmbed: FC<Props> = ({
   }
 
   const handleNiconicoLoadComplete = (info: NiconicoVideoInfo) => {
-    onVideoReady?.(info.lengthInSeconds * 1_000)
+    notifyNiconicoVideoReady (info.lengthInSeconds * 1_000)
     onLoadComplete?.(info)
   }
 
   const handleNiconicoMetadataChange = (meta: NiconicoMetadata) => {
+    notifyNiconicoVideoReady (meta.duration)
     onPlaybackChange?.(meta.currentTime)
     onMetadataChange?.(meta)
   }
 
+  useEffect (() => {
+    niconicoVideoReadyRef.current = false
+  }, [post.url])
+
   useEffect (() => {
     if (!(youtubePlayer) || !(onPlaybackChange))
       return