React 18 (#863)

* gymnastics to make theme script work with react 18 hydration

* try next 12.1.3 canary to fix SSG head tags?

* revert theme script changes

* next 12.1.3-canary.3

* double-revert some of the use-theme.tsx changes

* separate theme restoration script & move to _document

* bump next

* bump next (again)

* clean up some theme stuff

* use hashed image URLs in webmanifest and feeds

* text experimental react config

* Update ThemeScript.tsx

* switch selfie image to `layout="raw"`

* use `layout="raw"` for all non-imported images

* revert raw images in some places, messes up responsiveness

* fix nitpicky "no divs inside buttons" html validation error

* fix react-player hydration errors

* fix hydration errors from server/client time zone differences

* clean up hydration fixes

* Update format-date.ts

* last-minute cleanup

components/Video/Video.tsx

@@ -1,16 +1,17 @@
 import ReactPlayer from "react-player/file";
+import { useHasMounted } from "../../hooks/use-has-mounted";
 import { styled } from "../../lib/styles/stitches.config";
 import type { FilePlayerProps } from "react-player/file";
 
 const Wrapper = styled("div", {
   position: "relative",
   paddingTop: "56.25%",
+});
 
-  "& > div": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-  },
+const Player = styled(ReactPlayer, {
+  position: "absolute",
+  top: 0,
+  left: 0,
 
   "& video": {
     borderRadius: "$rounded",
@@ -30,6 +31,9 @@ export type VideoProps = Partial<FilePlayerProps> & {
 };
 
 const Video = ({ src, thumbnail, subs, autoplay, className, ...rest }: VideoProps) => {
+  // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
+  const hasMounted = useHasMounted();
+
   const url = [
     src.webm && {
       src: src.webm,
@@ -73,15 +77,17 @@ const Video = ({ src, thumbnail, subs, autoplay, className, ...rest }: VideoProp
 
   return (
     <Wrapper className={className}>
-      <ReactPlayer
-        width="100%"
-        height="100%"
-        url={url}
-        controls={!autoplay}
-        // @ts-ignore
-        config={config}
-        {...rest}
-      />
+      {hasMounted && (
+        <Player
+          width="100%"
+          height="100%"
+          url={url}
+          controls={!autoplay}
+          // @ts-ignore
+          config={config}
+          {...rest}
+        />
+      )}
     </Wrapper>
   );
 };