r3f video

r3f-video.ts

import React, { useEffect, useState, useRef } from 'react'
import { Vec3 } from './Types'
import { Image } from './Image'
import { useSpring } from '@react-spring/core'
import { a } from '@react-spring/three'
import { useAsset } from 'use-asset'

export const Video = ({
  src,
  position = [0, 0, 0],
  scale = [1, 1, 1],
  poster
}: {
  src: string
  position: Vec3
  scale: Vec3
  poster: string
}) => {
  const [hovered, setHovered] = useState(false)
  const [videoPlaying, setVideoPlaying] = useState(false)
  const [userInteracted, setUserInteracted] = useState(false)

  const ref = useRef()

  const { pos, ...props } = useSpring({
    pos: hovered ? [position[0], position[1], position[2] + 0.25] : position,
    config: { mass: 1, tension: 500, friction: 150, precision: 0.0001 }
  })

  useEffect(() => {
    if (userInteracted) {
      if (videoPlaying) {
        video.play()
      } else {
        video.pause()
      }
    }
  }, [videoPlaying])

  const video = useAsset(() => {
    return new Promise((resolve) => {
      const vid = document.createElement('video')
      vid.src = src
      vid.crossOrigin = 'Anonymous'
      vid.loop = true
      vid.oncanplaythrough = () => {
        resolve(vid)
      }
    });
  })

  return (
    <a.group
      ref={ref}
      position={pos}
      onPointerOver={(e) => (e.stopPropagation(), setHovered(true))}
      onPointerOut={() => setHovered(false)}
      onPointerMissed={() => setHovered(false)}
      onPointerDown={(e) => {
        e.stopPropagation()
        setUserInteracted(true)
        setVideoPlaying(!videoPlaying)
        console.log('clicked ', ref.current)
      }}>
      <mesh>
        <planeBufferGeometry args={[scale[0], scale[1]]} />
        <meshBasicMaterial>
          <videoTexture attach="map" args={[video]} />
        </meshBasicMaterial>
      </mesh>
      {!userInteracted && <Image scale={scale} src={poster} />}
    </a.group>
  )
}