Match page background with the background color of the video

match-bg-with-video-bg-color.tsx

/* External dependencies */
import React from 'react';
import { Col, Row, Text } from 'atomize';

/* Local dependencies */
import './under-construction.scss';
import videoSrc from '../../assets/video/under-construction.mp4';

export default class UnderConstruction extends React.PureComponent {
  video: React.RefObject<HTMLVideoElement>;

  constructor(props) {
    super(props);

    this.video = React.createRef();
  }

  public render() {
    const title = 'Under Construction';
    /*
      containerWidth: {
          xs: "540px",
          sm: "720px",
          md: "960px",
          lg: "1156px",
          xl: "1200px"
      },
    */
    const columnSize = { xs: 12, lg: 6 };

    return (
      <Row>
        <Col size={columnSize}>
          <video
            className="video-player"
            height="100%"
            width="100%"
            loop
            muted
            autoPlay
            playsInline
            onPlay={this.onPlay}
            onCanPlay={this.onPlay}
            ref={this.video}
          >
            <source src={videoSrc} type="video/mp4" />
          </video>
        </Col>
        <Col d="flex" align="center" size={columnSize} justify="center">
          <Text id="under_construction_header" tag="h1" textSize="display1">
            {title}
          </Text>
        </Col>
      </Row>
    );
  }

  private onPlay = () => {
    const vid = this.video.current;

    if (vid) {
      if (vid.parentElement) {
        // draw first pixel of video to a canvas
        // then get pixel color from that canvas
        const canvas = document.createElement('canvas');
        canvas.width = 1;
        canvas.height = 1;

        const ctx = canvas.getContext('2d');

        ctx.drawImage(vid, 0, 0, 1, 1);

        const givenColor = ctx.getImageData(0, 0, 1, 1).data;
        const nativeColor = [84, 94, 224];

        // if (this.isColorInRange(nativeColor, givenColor)) {
          const [r, g, b] = givenColor;

          document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        // }
      }
    }
  }

  private isColorInRange(expectedColor, givenColor) {
    const THRESHOLD = 40;

    for (let i = 0; i < 3; ++i) {
        if (((expectedColor[i] - THRESHOLD) > givenColor[i])
        || ((expectedColor[i] + THRESHOLD) < givenColor[i])) {
            return false;
        }
    }

    return true;
  }
}