fix: Fix video player CLS

content/the-art-of-dithering-and-retro-shading-web.mdx

@@ -2,7 +2,7 @@
 title: 'The Art of Dithering and Retro Shading for the Web'
 subtitle: A detailed walkthrough of the inner workings of dithering and other shading techniques to give a retro look and feel to your WebGL and React Three Fiber work.
 date: '2024-08-06T08:00:00.000Z'
-updated: '2024-08-06T08:00:00.000Z'
+updated: '2024-08-08T08:00:00.000Z'
 categories: []
 slug: the-art-of-dithering-and-retro-shading-web
 type: 'blogPost'
@@ -19,7 +19,6 @@ Taking the time to build, combine, and experiment with custom post-processing ef
   autoPlay
   muted
   loop
-  controls={true}
   width={700}
   height={476}
 />
@@ -49,7 +48,7 @@ Today, dithering is more an artistic choice than a workaround. Many artists or g
   </Anchor>}'s art, which I'm an absolute fan of.
 - {<Anchor favicon discreet href="https://twitter.com/aweusmeuh">
   @aweusmeuh
-    </Anchor>}'s use of the original Game Boy camera for experimental photography which features
+  </Anchor>}'s use of the original Game Boy camera for experimental photography which features
 a sublime dithering effect.
 
 <Image
@@ -505,21 +504,21 @@ I also used [this scene to try using a custom texture to define an arbitrary col
 To experiment with [contrasting aesthetics](https://rauno.me/craft/contrasting-aesthetics), I also wanted to try out ordered dithering and color quantization on some of my Raymarching work from last year. The ordered pattern contrasts nicely with the more organic nature of some of those scenes, especially at lower resolutions. Below are two examples that I particularily enjoyed:
 
 <VideoPlayer
+  alt="Example of dithering, 8-bit color quantization, and pixelization applied on top of a Volumetric Raymarched scene"
   src="https://d2xl4m2ghaywko.cloudfront.net/dithered-clouds.mp4"
   autoPlay
   muted
   loop
-  controls={true}
   width={700}
   height={425}
 />
 
 <VideoPlayer
+  alt="Example of dithering, 2-bit color quantization, and pixelization applied on top of a Raymarched scene"
   src="https://d2xl4m2ghaywko.cloudfront.net/dithered-blob.mp4"
   autoPlay
   muted
   loop
-  controls={true}
   width={700}
   height={425}
 />

core/components/MDX/Image/Image.tsx

@@ -34,7 +34,7 @@ const Image = (props: ImageProps) => {
             sizes="100vw"
             style={{
               border: border
-                ? '3px solid oklch(from var(--gray-500) l c h / 70%)'
+                ? '2px solid oklch(from var(--gray-500) l c h / 70%)'
                 : 'none',
             }}
           />

core/components/VideoPlayer/VideoPlayer.styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '@maximeheckel/design-system';
+
+export const Video = styled('video', {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  objectFit: 'cover',
+});
+
+export const VideoContainer = styled('figure', {
+  position: 'relative',
+  margin: '0 auto',
+  background: 'var(--emphasis)',
+  borderRadius: 'var(--border-radius-3)',
+  border: '2px solid var(--border-color)',
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+  transform: 'scale(1) translateZ(0)',
+});

core/components/VideoPlayer/VideoPlayer.tsx

@@ -1,5 +1,7 @@
-import { styled, useTheme } from '@maximeheckel/design-system';
-import React from 'react';
+import { useDebouncedValue } from '@maximeheckel/design-system';
+import { useInView, useReducedMotion } from 'framer-motion';
+import React, { useRef } from 'react';
+import * as S from './VideoPlayer.styles';
 
 interface VideoPlayerProps {
   autoPlay?: boolean;
@@ -9,56 +11,50 @@ interface VideoPlayerProps {
   muted?: boolean;
   width?: number;
   height?: number;
+  alt?: string;
   src: string;
 }
 
-const StyledVideo = styled('video', {
-  margin: '0 auto',
-  background: 'var(--emphasis)',
-  borderRadius: 'var(--border-radius-3)',
-  border: '4px solid var(--border-color)',
-  maxWidth: '100%',
-  height: 'auto',
-});
-
-const getDisplayedPoster = (poster: string, dark: boolean) => {
-  if (dark) {
-    return `/static/posters/${poster}_dark.png`;
-  }
-
-  return `/static/posters/${poster}_light.png`;
-};
-
 const VideoPlayer = (props: VideoPlayerProps) => {
-  const { autoPlay, controls, loop, muted, width, height, poster, src } = props;
-  const { dark } = useTheme();
-  const [currentPoster, setCurrentPoster] = React.useState<string | undefined>(
-    undefined
-  );
-
-  React.useEffect(() => {
-    if (poster) {
-      if (!poster.includes('.png') && !poster.includes('https')) {
-        setCurrentPoster(getDisplayedPoster(poster, dark));
-      } else {
-        setCurrentPoster(poster);
-      }
-    }
-  }, [dark, poster]);
+  const {
+    alt,
+    autoPlay,
+    controls = false,
+    loop,
+    muted,
+    width,
+    height,
+    src,
+  } = props;
+
+  const ref = useRef(null);
+  const isReducedMotionEnabled = useReducedMotion();
+  const isInView = useInView(ref, {
+    amount: 0.1,
+  });
+
+  const debouncedIsInView = useDebouncedValue(isInView, 200);
 
   return (
-    <StyledVideo
-      autoPlay={autoPlay}
-      poster={currentPoster}
-      width={width}
-      height={height}
-      controls={controls}
-      loop={loop || false}
-      muted={muted}
-      playsInline
+    <S.VideoContainer
+      ref={ref}
+      css={{
+        aspectRatio: `${width} / ${height}`,
+      }}
     >
-      <source src={src} type="video/mp4" />
-    </StyledVideo>
+      {debouncedIsInView ? (
+        <S.Video
+          aria-label={alt}
+          autoPlay={autoPlay}
+          controls={controls || isReducedMotionEnabled || false}
+          loop={loop || isReducedMotionEnabled || false}
+          muted={muted}
+          playsInline
+        >
+          <source src={src} type="video/mp4" />
+        </S.Video>
+      ) : null}
+    </S.VideoContainer>
   );
 };