remove unnecessary memos

components/Captcha/Captcha.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 import { useHasMounted } from "../../hooks/use-has-mounted";
 import { useTheme } from "../../hooks/use-theme";
@@ -40,4 +39,4 @@ const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) =
   );
 };
 
-export default memo(Captcha);
+export default Captcha;

components/Comments/Comments.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react";
 import Giscus from "@giscus/react";
 import { useTheme } from "../../hooks/use-theme";
 import { styled } from "../../lib/styles/stitches.config";
@@ -10,7 +9,7 @@ const Wrapper = styled("div", {
   marginTop: "2em",
   paddingTop: "2em",
   borderTop: "2px solid $light",
-  minHeight: "300px",
+  minHeight: "360px",
 });
 
 export type CommentsProps = ComponentProps<typeof Wrapper> & {
@@ -35,4 +34,4 @@ const Comments = ({ title, ...rest }: CommentsProps) => {
   );
 };
 
-export default memo(Comments);
+export default Comments;

components/ThemeToggle/ThemeToggle.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, memo } from "react";
+import { useEffect, useId } from "react";
 import { useFirstMountState, useMedia } from "react-use";
 import { useSpring, animated, Globals } from "@react-spring/web";
 import { useTheme } from "../../hooks/use-theme";
@@ -157,4 +157,4 @@ const ThemeToggle = ({ className }: ThemeToggleProps) => {
   );
 };
 
-export default memo(ThemeToggle);
+export default ThemeToggle;

components/Video/Video.tsx

@@ -23,51 +23,48 @@ export type VideoProps = Partial<FilePlayerProps> & {
     // at least one is required:
     webm?: string;
     mp4?: string;
+    // optional:
+    vtt?: string;
+    image?: string;
   };
-  thumbnail?: string;
-  subs?: string;
   autoplay?: boolean;
   className?: string;
 };
 
-const Video = ({ src, thumbnail, subs, autoplay, className, ...rest }: VideoProps) => {
+const Video = ({ src, autoplay, className, ...rest }: VideoProps) => {
   // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
   const hasMounted = useHasMounted();
 
-  const url = [
+  const files: FilePlayerProps["url"] = [
+    // @ts-ignore
     src.webm && {
       src: src.webm,
       type: "video/webm",
     },
+    // @ts-ignore
     src.mp4 && {
       src: src.mp4,
       type: "video/mp4",
     },
   ];
 
-  const config = {
-    file: {
-      attributes: {
-        controlsList: "nodownload",
-        preload: "metadata",
-        autoPlay: !!autoplay,
-        muted: !!autoplay,
-        loop: !!autoplay,
-      },
+  const config: FilePlayerProps["config"] = {
+    attributes: {
+      controlsList: "nodownload",
+      preload: "metadata",
+      poster: src.image, // thumbnail
+      autoPlay: autoplay,
+      loop: !!autoplay,
+      muted: !!autoplay, // no sound when autoplaying
+      controls: !autoplay, // only show controls when not autoplaying
     },
   };
 
-  if (thumbnail) {
-    // @ts-ignore
-    config.file.attributes.poster = thumbnail;
-  }
-
-  if (subs) {
-    // @ts-ignore
-    config.file.tracks = [
+  if (src.vtt) {
+    config.tracks = [
       {
         kind: "subtitles",
-        src: subs,
+        src: src.vtt,
         srcLang: "en",
         label: "English",
         default: true,
@@ -77,7 +74,7 @@ const Video = ({ src, thumbnail, subs, autoplay, className, ...rest }: VideoProp
 
   return (
     <Wrapper className={className}>
-      {hasMounted && <Player width="100%" height="100%" url={url} controls={!autoplay} config={config} {...rest} />}
+      {hasMounted && <Player width="100%" height="100%" url={files} config={{ file: config }} {...rest} />}
     </Wrapper>
   );
 };