videopool.ts

import React, { Component, Fragment, useState, useEffect, useRef } from 'react'

const VideoPool = () => {
    const videoSrc = 'data:video/mp4;base64,AAAAFGZ0eXBNU05WAAACAE1TTlYAAAOUbW9vdgAAAGxtdmhkAAAAAM9ghv7PYIb+AAACWAAACu8AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAnh0cmFrAAAAXHRraGQAAAAHz2CG/s9ghv4AAAABAAAAAAAACu8AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAFAAAAA4AAAAAAHgbWRpYQAAACBtZGhkAAAAAM9ghv7PYIb+AAALuAAANq8AAAAAAAAAIWhkbHIAAAAAbWhscnZpZGVBVlMgAAAAAAABAB4AAAABl21pbmYAAAAUdm1oZAAAAAAAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAVdzdGJsAAAAp3N0c2QAAAAAAAAAAQAAAJdhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAFAAOABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAEmNvbHJuY2xjAAEAAQABAAAAL2F2Y0MBTUAz/+EAGGdNQDOadCk/LgIgAAADACAAAAMA0eMGVAEABGjuPIAAAAAYc3R0cwAAAAAAAAABAAAADgAAA+gAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAADgAAAAEAAABMc3RzegAAAAAAAAAAAAAADgAAAE8AAAAOAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA4AAAAOAAAAFHN0Y28AAAAAAAAAAQAAA7AAAAA0dXVpZFVTTVQh0k/Ou4hpXPrJx0AAAAAcTVREVAABABIAAAAKVcQAAAAAAAEAAAAAAAAAqHV1aWRVU01UIdJPzruIaVz6ycdAAAAAkE1URFQABAAMAAAAC1XEAAACHAAeAAAABBXHAAEAQQBWAFMAIABNAGUAZABpAGEAAAAqAAAAASoOAAEAZABlAHQAZQBjAHQAXwBhAHUAdABvAHAAbABhAHkAAAAyAAAAA1XEAAEAMgAwADAANQBtAGUALwAwADcALwAwADYAMAA2ACAAMwA6ADUAOgAwAAABA21kYXQAAAAYZ01AM5p0KT8uAiAAAAMAIAAAAwDR4wZUAAAABGjuPIAAAAAnZYiAIAAR//eBLT+oL1eA2Nlb/edvwWZflzEVLlhlXtJvSAEGRA3ZAAAACkGaAQCyJ/8AFBAAAAAJQZoCATP/AOmBAAAACUGaAwGz/wDpgAAAAAlBmgQCM/8A6YEAAAAJQZoFArP/AOmBAAAACUGaBgMz/wDpgQAAAAlBmgcDs/8A6YEAAAAJQZoIBDP/AOmAAAAACUGaCQSz/wDpgAAAAAlBmgoFM/8A6YEAAAAJQZoLBbP/AOmAAAAACkGaDAYyJ/8AFBAAAAAKQZoNBrIv/4cMeQ=='
    return <div className="videopool" style={{ display: 'none' }}>
      {
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((it) =>
          <video
            key={it}
            className="video" src={videoSrc} playsInline crossOrigin='anonymous' disablePictureInPicture
            style={{ width: '100%', height: '100%', border: '1px solid lightgray', borderRadius: '3px' }}
          />
        )
      }
    </div>
  }
  VideoPool.activate = () => {
    document.querySelectorAll('.videopool .video').forEach((el: HTMLVideoElement) => el.play())
    VideoPool.activate = () => { }
  }

  const VideoPoolItem = ({ onVideoRef = (v: HTMLVideoElement) => { } }) => {
    const originalVideoRef = useRef<HTMLVideoElement>(null)
    const [state, setState] = useState<{ pooled: HTMLVideoElement | null }>({ pooled: null })
    useEffect(() => {
      if (!originalVideoRef.current) { return }
      const newVideo = document.querySelectorAll('.videopool .video')[0] as HTMLVideoElement
      originalVideoRef.current.replaceWith(newVideo)
      setState((state) => ({ ...state, pooled: newVideo }))
      onVideoRef(newVideo)
      return () => {
        if (!state.pooled) { return }
        state.pooled.parentNode?.removeChild(state.pooled)
        document.querySelector('.videopool')?.appendChild(state.pooled)
        setState((state) => ({ ...state, pooled: null }))
      }
    }, [originalVideoRef])
    return <video ref={originalVideoRef} />
  }

  export { VideoPool, VideoPoolItem}