Plug BadTVShader into React Three Fiber

I've been building a scene in R3f and wanted to pull in the awesome Bad TV Shader by Felix Turner and have it affect a video stream on a plane. It took me a while to figure this out so I'm going to write it down here.

import { VideoTexture } from "three";
import { useFrame } from "react-three-fiber";

const TV = ({ videoElement }) => {
  /* Create a ref to access the shader later*/
  const shaderRef = useRef();

  /* Update the shader's time uniform value every frame */
  useFrame(() => {
    if (shaderRef.current) {
      shaderRef.current.uniforms.time.value += 0.04;
    }
  });

  /* Create a ThreeJS Video Texture for a given preconfigured video element */
  const videoTexture = new VideoTexture(videoElement);

  return (
    <mesh>
      <planeGeometry args={[0.4, 0.3, 20, 1]} />
      <shaderMaterial
        /* Set shader ref */
        ref={shaderRef}
        /* Pass the shader into the args array */
        args={[BadTVShader]}
        /* Attach ShaderMaterial to the mesh as a material */
        attach="material"
        /* Set the uniform value for tDiffuse to the video texture */
        uniforms-tDiffuse-value={videoTexture}
      />
    </mesh>
  );
};