copy of vimeo embed react component

gistfile1.txt

import React from "react";

import Vimeo from "/imports/api/video/vimeo/vimeo";
// @ts-expect-error TS(7016): Could not find a declaration file for module '@vim... Remove this comment to see the full error message
import VimeoPlayer from "@vimeo/player";
import VimeoLogging from "./vimeo-logging";

type Props = {
    video: any;
    videoLocation?: string;
};

export default class VimeoVideoEmbed extends React.Component<Props> {
  player: any;

  componentDidMount() {
    this.updatePlayer();
  }

  shouldComponentUpdate(nextProps: Props) {
    if (nextProps.video === this.props.video) {
      return false;
    }
    return true;
  }

  componentDidUpdate() {
    this.updatePlayer();
  }

  componentWillUnmount() {
    (VimeoLogging as any).detachPlayer();
  }

  setPlaybackRate = (rate: any) => {
    this.player
      .setPlaybackRate(rate)
      .then((setRate: any) => {
        logger.debug("New playback rate set", setRate);
      })
      .catch((error: any) => {
        logger.warn(`Error setting Vimeo playback rate ${error}`);
      });
  };

  updatePlayer() {
    if ((Vimeo as any).videoIsNewlyUploaded(this.props.video)) {
      return;
    }
    if (this.player == null) {
      const options = {
        id: `https://player.vimeo.com/video/${this.props.video._id}`,
        portrait: false,
        title: false,
        byline: false,
        // @ts-expect-error TS(2304): Cannot find name 'Meteor'.
        color: Meteor.settings.public.colors.brandPrimary,
        speed: true,
        autoplay: false,
      };

      try {
        this.player = new VimeoPlayer(
          `vimeo-player-${this.props.video._id}`,
          options
        );
        (VimeoLogging as any).attachPlayer(this.player, this.props.videoLocation);
      } catch (err) {
        logger.error(
          `Error when creating new vimeo player and attaching ${err}`,
          { err }
        );
        throw err;
      }
    } else {
      try {
        this.player.loadVideo(this.props.video._id);
      } catch (err) {
        logger.error(`Error when loading vimeo vid ${err}`, { err });
        throw err;
      }
    }
  }

  renderNewVideo() {
    return (
      <div className="panel panel-danger">
        <div className="panel-heading text-center">
          <h4>Oh snap! Still processing this video.</h4>
        </div>
        <div className="panel-body">
          <p>
            This video was recently uploaded, and it takes between 5-45 minutes
            to ensure video processing is complete. Try again soon.
          </p>
        </div>
      </div>
    );
  }

  render() {
    if ((Vimeo as any).videoIsNewlyUploaded(this.props.video)) {
      try {
        // TODO This doesn't work as intended and leaves the previous video still partially embeded
        if (this.player) {
          this.player.unload();
        }
      } catch (err) {
        logger.error(`Error when unload video ${err}`, { err });
        throw err;
      }

      return this.renderNewVideo();
    }

    return (
      <div>
        <div
          className="vimeo-embed-container"
          id={`vimeo-player-${this.props.video._id}`}
        />
      </div>
    );
  }
}