上映会改修 (#302) (#357)

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

frontend/src/components/NicoViewer.tsx

@@ -1,11 +1,11 @@
 import { forwardRef,
-         useCallback,
-         useEffect,
-         useImperativeHandle,
-         useLayoutEffect,
-         useMemo,
-         useRef,
-         useState } from 'react'
+	 useCallback,
+	 useEffect,
+	 useImperativeHandle,
+	 useLayoutEffect,
+	 useMemo,
+	 useRef,
+	 useState } from 'react'
 
 import type { CSSProperties, ForwardedRef } from 'react'
 
@@ -14,10 +14,20 @@ import type { NiconicoMetadata, NiconicoVideoInfo, NiconicoViewerHandle } from '
 type NiconicoPlayerMessage =
     | { eventName: 'enterProgrammaticFullScreen' }
     | { eventName: 'exitProgrammaticFullScreen' }
-    | { eventName: 'loadComplete'; playerId?: string; data: { videoInfo: NiconicoVideoInfo } }
-    | { eventName: 'playerMetadataChange'; playerId?: string; data: NiconicoMetadata }
-    | { eventName: 'playerStatusChange' | 'statusChange'; playerId?: string; data?: unknown }
-    | { eventName: 'error'; playerId?: string; data?: unknown; code?: string; message?: string }
+    | { eventName: 'loadComplete'
+	playerId?:  string
+	data:       { videoInfo: NiconicoVideoInfo } }
+    | { eventName: 'playerMetadataChange'
+	playerId?:  string
+	data:       NiconicoMetadata }
+    | { eventName: 'playerStatusChange' | 'statusChange'
+	playerId?:  string
+	data?:      unknown }
+    | { eventName: 'error'
+	playerId?:  string
+	data?:      unknown
+	code?:      string
+	message?:   string }
 
 type NiconicoCommand =
     | { eventName: 'play'; sourceConnectorType: 1; playerId: string }
@@ -30,6 +40,7 @@ type NiconicoCommand =
 	data: { commentVisibility: boolean } }
 
 const EMBED_ORIGIN = 'https://embed.nicovideo.jp'
+const LOAD_COMPLETE_TIMEOUT_MS = 8_000
 
 type Props = {
     id:                 string
@@ -37,14 +48,18 @@ type Props = {
     height:             number
     style?:             CSSProperties
     onLoadComplete?:    (info: NiconicoVideoInfo) => void
-    onMetadataChange?:  (meta: NiconicoMetadata) => void }
+    onMetadataChange?:  (meta: NiconicoMetadata) => void
+    onError?:           (data: unknown) => void }
 
 
 export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle>) => {
-  const { id, width, height, style = { }, onLoadComplete, onMetadataChange } = props
+  const { id, width, height, style = { }, onLoadComplete, onMetadataChange, onError } = props
 
   const iframeRef = useRef<HTMLIFrameElement> (null)
-  const playerId = useMemo (() => `nico-${ id }-${ Math.random ().toString (36).slice (2) }`, [id])
+  const loadCompleteTimerRef = useRef<ReturnType<typeof setTimeout> | null> (null)
+  const playerId = useMemo (
+      () => `nico-${ id }-${ Math.random ().toString (36).slice (2) }`,
+      [id])
 
   const [screenWidth, setScreenWidth] = useState<CSSProperties['width']> ()
   const [screenHeight, setScreenHeight] = useState<CSSProperties['height']> ()
@@ -64,21 +79,39 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
   const styleFullScreen: CSSProperties =
       fullScreen
       ? { top: 0,
-          left: landscape ? 0 : '100%',
-          position: 'fixed',
-          width: screenWidth,
-          height: screenHeight,
-          zIndex: 2_147_483_647,
-          maxWidth: 'none',
-          transformOrigin: '0% 0%',
-          transform: landscape ? 'none' : 'rotate(90deg)',
-          WebkitTransformOrigin: '0% 0%',
-          WebkitTransform: landscape ? 'none' : 'rotate(90deg)' }
+	  left: landscape ? 0 : '100%',
+	  position: 'fixed',
+	  width: screenWidth,
+	  height: screenHeight,
+	  zIndex: 2_147_483_647,
+	  maxWidth: 'none',
+	  transformOrigin: '0% 0%',
+	  transform: landscape ? 'none' : 'rotate(90deg)',
+	  WebkitTransformOrigin: '0% 0%',
+	  WebkitTransform: landscape ? 'none' : 'rotate(90deg)' }
       : { }
 
   const margedStyle: CSSProperties =
       { border: 'none', maxWidth: '100%', ...style, ...styleFullScreen }
 
+  const clearLoadCompleteTimer = useCallback (() => {
+    if (!(loadCompleteTimerRef.current))
+      return
+
+    clearTimeout (loadCompleteTimerRef.current)
+    loadCompleteTimerRef.current = null
+  }, [])
+
+  const startLoadCompleteTimer = useCallback (() => {
+    clearLoadCompleteTimer ()
+    loadCompleteTimerRef.current = setTimeout (() => {
+      onError?.({
+	  eventName: 'loadCompleteTimeout',
+	  reason:    'niconico video length was not reported by embed',
+      })
+    }, LOAD_COMPLETE_TIMEOUT_MS)
+  }, [clearLoadCompleteTimer, onError])
+
   const postToPlayer = useCallback ((message: NiconicoCommand) => {
     const win = iframeRef.current?.contentWindow
     if (!(win))
@@ -132,21 +165,21 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
   useEffect (() => {
     const onMessage = (event: MessageEvent<NiconicoPlayerMessage>) => {
       if (!(iframeRef.current)
-          || (event.source !== iframeRef.current.contentWindow)
-          || (event.origin !== EMBED_ORIGIN))
-        return
+	  || (event.source !== iframeRef.current.contentWindow)
+	  || (event.origin !== EMBED_ORIGIN))
+	return
 
       const data = event.data
 
       if (!(data)
 	  || typeof data !== 'object'
 	  || !('eventName' in data))
-        return
+	return
 
       if (('playerId' in data)
 	  && data.playerId
 	  && data.playerId !== playerId)
-        return
+	return
 
       if (data.eventName === 'enterProgrammaticFullScreen')
 	{
@@ -162,6 +195,7 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
 
       if (data.eventName === 'loadComplete')
 	{
+	  clearLoadCompleteTimer ()
 	  onLoadComplete?.(data.data.videoInfo)
 	  return
 	}
@@ -173,13 +207,19 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
 	}
 
       if (data.eventName === 'error')
-        console.error ('niconico player error:', data)
+	{
+	  clearLoadCompleteTimer ()
+	  console.error ('niconico player error:', data)
+	  onError?.(data)
+	}
     }
 
     addEventListener ('message', onMessage)
 
     return () => removeEventListener ('message', onMessage)
-  }, [onLoadComplete, onMetadataChange, playerId])
+  }, [clearLoadCompleteTimer, onError, onLoadComplete, onMetadataChange, playerId])
+
+  useEffect (() => clearLoadCompleteTimer, [clearLoadCompleteTimer])
 
   useLayoutEffect (() => {
     if (!(fullScreen))
@@ -192,7 +232,7 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
 
     const pollingResize = () => {
       if (ended)
-        return
+	return
 
       const isLandscape = innerWidth >= innerHeight
       const windowWidth = `${ isLandscape ? innerWidth : innerHeight }px`
@@ -206,9 +246,9 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
 
     const startPollingResize = () => {
       if (requestAnimationFrame)
-        requestAnimationFrame (pollingResize)
+	requestAnimationFrame (pollingResize)
       else
-        pollingResize ()
+	pollingResize ()
     }
 
     startPollingResize ()
@@ -231,9 +271,10 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
       <iframe
 	  ref={iframeRef}
 	  src={src}
-	  width={width}
-	  height={height}
-	  style={margedStyle}
-	  allowFullScreen
-	  allow="autoplay"/>)
+		  width={width}
+		  height={height}
+		  style={margedStyle}
+		  onLoad={startLoadCompleteTimer}
+		  allowFullScreen
+		  allow="autoplay"/>)
 })