#10, #15 完了

frontend/src/components/NicoViewer.tsx

@@ -15,23 +15,23 @@ const NicoViewer: React.FC = (props: Props) => {
   const iframeRef = useRef<HTMLIFrameElement> (null)
   const [screenWidth, setScreenWidth] = useState<CSSProperties['width']> ()
   const [screenHeight, setScreenHeight] = useState<CSSProperties['height']> ()
-  const [isLandscape, setIsLandScape] = useState<boolean> (false)
-  const [isFullScreen, setIsFullScreen] = useState<boolean> (false)
+  const [landscape, setLandscape] = useState<boolean> (false)
+  const [fullScreen, setFullScreen] = useState<boolean> (false)
 
   const src = `https://embed.nicovideo.jp/watch/${id}?persistence=1&oldScript=1&referer=&from=0&allowProgrammaticFullScreen=1`;
 
-  const styleFullScreen: CSSProperties = isFullScreen ? {
+  const styleFullScreen: CSSProperties = fullScreen ? {
     top: 0,
-    left: isLandscape ? 0 : '100%',
+    left: landscape ? 0 : '100%',
     position: 'fixed',
     width: screenWidth,
     height: screenHeight,
     zIndex: 2147483647,
     maxWidth: 'none',
     transformOrigin: '0% 0%',
-    transform: isLandscape ? 'none' : 'rotate(90deg)',
+    transform: landscape ? 'none' : 'rotate(90deg)',
     WebkitTransformOrigin: '0% 0%',
-    WebkitTransform: isLandscape ? 'none' : 'rotate(90deg)',
+    WebkitTransform: landscape ? 'none' : 'rotate(90deg)',
   } : {};
 
   const margedStyle = {
@@ -45,38 +45,40 @@ const NicoViewer: React.FC = (props: Props) => {
     const onMessage = (event: MessageEvent<any>) => {
       if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) return;
       if (event.data.eventName === 'enterProgrammaticFullScreen') {
-        setIsFullScreen(true);
+        setFullScreen(true);
       } else if (event.data.eventName === 'exitProgrammaticFullScreen') {
-        setIsFullScreen(false);
+        setFullScreen(false);
       }
     };
 
-    window.addEventListener('message', onMessage);
+    addEventListener('message', onMessage);
 
     return () => {
-      window.removeEventListener('message', onMessage);
+      removeEventListener('message', onMessage);
     };
   }, []);
 
   useLayoutEffect(() => {
-    if (!isFullScreen) return;
+    if (!(fullScreen))
+      return
 
-    const initialScrollX = window.scrollX;
-    const initialScrollY = window.scrollY;
-    let timer: NodeJS.Timeout;
-    let ended = false;
+    const initialScrollX = window.scrollX
+    const initialScrollY = window.scrollY
+    let timer: NodeJS.Timeout
+    let ended = false
 
     const pollingResize = () => {
-      if (ended) return;
+      if (ended)
+        return
 
-      const isLandscape = window.innerWidth >= window.innerHeight;
-      const windowWidth = `${isLandscape ? window.innerWidth : window.innerHeight}px`;
-      const windowHeight = `${isLandscape ? window.innerHeight : window.innerWidth}px`;
+      const landscape = window.innerWidth >= window.innerHeight
+      const windowWidth = `${landscape ? window.innerWidth : window.innerHeight}px`
+      const windowHeight = `${landscape ? window.innerHeight : window.innerWidth}px`
 
-      setIsLandScape(isLandscape);
-      setScreenWidth(windowWidth);
-      setScreenHeight(windowHeight);
-      timer = setTimeout(startPollingResize, 200);
+      setLandScape (Landscape)
+      setScreenWidth (windowWidth)
+      setScreenHeight (windowHeight)
+      timer = setTimeout (startPollingResize, 200)
     }
 
     const startPollingResize = () => {
@@ -94,12 +96,13 @@ const NicoViewer: React.FC = (props: Props) => {
       ended = true;
       window.scrollTo(initialScrollX, initialScrollY);
     };
-  }, [isFullScreen]);
+  }, [fullScreen]);
 
   useEffect(() => {
-    if (!isFullScreen) return;
-    window.scrollTo(0, 0);
-  }, [screenWidth, screenHeight, isFullScreen]);
+    if (!(fullScreen))
+      return
+    scrollTo (0, 0)
+  }, [screenWidth, screenHeight, fullScreen])
 
   return <iframe ref={iframeRef}
                  src={src}