fix: CR comments

IEduStu · Sep 17, 2024 · ed078e1 · ed078e1
1 parent b791e7e
commit ed078e1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 27 deletions.
diff --git a/src/App/styles.less b/src/App/styles.less
@@ -41,7 +41,7 @@
     --outer-glow: 0px 0px 30px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
 
-    background-color: #161523;
+    background-color: #161523; // copied from WebpackPwaManifest config (see webpack.config.js)
 }
 
 * {

diff --git a/src/common/useFullscreen.js b/src/common/useFullscreen.js
@@ -14,41 +14,41 @@ const useFullscreen = (videoElementRef) => {
         return null;
     }, [videoElementRef]);
 
-    const videoElement = getVideoElement();
-    const [fullscreen, setFullscreen] = React.useState(document.fullscreenElement === document.documentElement || (videoElement && videoElement.webkitDisplayingFullscreen));
+    const [fullscreen, setFullscreen] = React.useState(() => {
+        const videoElement = getVideoElement();
+        return document.fullscreenElement === document.documentElement || (videoElement && videoElement.webkitDisplayingFullscreen)
+    });
     const requestFullscreen = React.useCallback(() => {
-        if (document.documentElement.requestFullscreen)
+        if (document.documentElement.requestFullscreen) {
             document.documentElement.requestFullscreen();
-        else {
+        } else {
             const videoElement = getVideoElement();
-            if (videoElement && videoElement.webkitEnterFullscreen)
+            if (videoElement && videoElement.webkitEnterFullscreen) {
                 videoElement.webkitEnterFullscreen();
+            }
         }
-    }, [videoElementRef]);
+    }, [getVideoElement]);
     const exitFullscreen = React.useCallback(() => {
-        if (document.exitFullscreen)
+        if (document.exitFullscreen) {
             document.exitFullscreen();
-        else {
+        } else {
             const videoElement = getVideoElement();
-            if (videoElement && videoElement.webkitEnterFullscreen)
+            if (videoElement && videoElement.webkitExitFullscreen) {
                 videoElement.webkitExitFullscreen();
+            }
         }
-    }, [videoElementRef]);
+    }, [getVideoElement]);
     const toggleFullscreen = React.useCallback(() => {
-        if (fullscreen) {
-            exitFullscreen();
-        } else {
-            requestFullscreen();
-        }
+        fullscreen ? exitFullscreen() : requestFullscreen();
     }, [fullscreen, exitFullscreen, requestFullscreen]);
     React.useEffect(() => {
         const videoElement = getVideoElement();
 
         const onFullscreenChange = () => {
             setFullscreen(document.fullscreenElement === document.documentElement || (videoElement && videoElement.webkitDisplayingFullscreen));
         };
-        document.addEventListener('fullscreenchange', onFullscreenChange);
 
+        document.addEventListener('fullscreenchange', onFullscreenChange);
         if (videoElement && videoElement.addEventListener) {
             videoElement.addEventListener('webkitenterfullscreen', onFullscreenChange);
             videoElement.addEventListener('webkitendfullscreen', onFullscreenChange);
@@ -57,12 +57,13 @@ const useFullscreen = (videoElementRef) => {
         return () => {
             document.removeEventListener('fullscreenchange', onFullscreenChange);
 
-            if (videoElement && videoElement.addEventListener) {
+            if (videoElement && videoElement.removeEventListener) {
                 videoElement.removeEventListener('webkitenterfullscreen', onFullscreenChange);
                 videoElement.removeEventListener('webkitendfullscreen', onFullscreenChange);
             }
         };
     }, []);
+
     return [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen];
 };
 

diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
@@ -83,15 +83,16 @@ const MetaDetails = ({ urlParams, queryParams }) => {
     return (
         <div className={styles['metadetails-container']}>
             {
-                canRenderBackground &&
-                <div className={styles['background-image-layer']}>
-                    <Image
-                        className={styles['background-image']}
-                        src={metaDetails.metaItem.content.content.background}
-                        renderFallback={renderBackgroundImageFallback}
-                        alt={' '}
-                    />
-                </div>
+                canRenderBackground
+                    ? <div className={styles['background-image-layer']}>
+                        <Image
+                            className={styles['background-image']}
+                            src={metaDetails.metaItem.content.content.background}
+                            renderFallback={renderBackgroundImageFallback}
+                            alt={' '}
+                        />
+                    </div>
+                    : null
             }
             <HorizontalNavBar
                 className={styles['nav-bar']}