optimization and comments

components/BackToTop.tsx

@@ -10,40 +10,28 @@ export default function BackToTop() {
   const [showButton, setShowButton] = useState(false)
   const buttonText = 'Go back to the top of the page'
 
+  // Effect to handle scroll events.
   useEffect(() => {
-    // Handle scroll event.
+    // Scroll event handler.
     const scrollHandler = () => {
-      // If the user has scrolled down 200px, show the button.
-      if (window.scrollY > 200) {
-        setShowButton(true)
-      } else {
-        setShowButton(false)
-      }
+      setShowButton(window.scrollY > 200)
     }
 
     // Add event listener.
     window.addEventListener('scroll', scrollHandler)
 
-    // Clean up event listener.
+    // Cleanup event listener.
     return () => window.removeEventListener('scroll', scrollHandler)
   }, [])
 
-  /**
-   * Scroll to the top of the page.
-   */
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
       behavior: 'smooth'
     })
   }
 
-  // No button? Bail.
-  if (!showButton) {
-    return null
-  }
-
-  return (
+  return showButton ? (
     <button
       aria-label={buttonText}
       className="button fixed bottom-8 right-6"
@@ -53,5 +41,5 @@ export default function BackToTop() {
       <IconArrowUp height="32" width="32" />
       <span className="sr-only">{buttonText}</span>
     </button>
-  )
+  ) : null
 }

components/BossButton.tsx

@@ -13,6 +13,7 @@ export default function BossButton() {
   const buttonText =
     'The boss button. Click or press Escape to quickly navigate to DuckDuckGo.'
 
+  // Effect for the boss button.
   useEffect(() => {
     // On initial load, show the button if the viewport is wider than 768px.
     if (window.innerWidth > 768) {
@@ -46,11 +47,7 @@ export default function BossButton() {
     }
   }, [router])
 
-  if (!showButton) {
-    return null
-  }
-
-  return (
+  return showButton ? (
     <button
       aria-label={buttonText}
       className="fixed right-6 top-8 z-10"
@@ -59,5 +56,5 @@ export default function BossButton() {
     >
       <IconDoorExit aria-hidden="true" height="32" width="32" />
     </button>
-  )
+  ) : null
 }

components/HlsPlayer.tsx

@@ -14,7 +14,7 @@ export default function HlsPlayer(props: HlsPlayerProps) {
   const videoRef = useRef<HTMLMediaElement>(null)
 
   /**
-   * Initialize Hls.js.
+   * Effect for initializing Hls.js.
    *
    * @see https://github.com/video-dev/hls.js/#embedding-hlsjs
    */
@@ -36,7 +36,7 @@ export default function HlsPlayer(props: HlsPlayerProps) {
   }, [props.src, videoRef])
 
   /**
-   * Pause this video if another starts playing.
+   * Effect for pausing.
    */
   useEffect(() => {
     const video = videoRef.current