How to check added custom errors are working in videojs player

Question

I'm a newbie to React JS, I tried to add custom error messages in videoJS player using videojs-errors plugin. I want to check whether the overridden custom error is working. Tried to match the same type of the error object but it shows the error "Property 'customErrors' is missing in type '{ 4: { headline: string; message: string; }; }[]' but required in type 'PlayerErrors'."

Here is the interface I have created to add the expected type of the error object.

PlayerErrors.ts

export interface PlayerErrors{
    customErrors: {
        [key: number]: {
          headline: string;
          message: string;
        }
      }
}

Here is the App.tsx

import React, { Component } from 'react';
import videojs, { VideoJsPlayer } from 'video.js';
import { PlayerCallbacks, PlayerOptions, PlayerErrors } from './interfaces';
import 'videojs-contrib-quality-levels';
import 'videojs-max-quality-selector';
import 'videojs-youtube/dist/Youtube.min.js';
import './plugins/Cuepoints/Core';
import './App.css';
import 'video.js/dist/video-js.css';
import 'videojs-max-quality-selector/dist/videojs-max-quality-selector.css';
import 'videojs-errors/dist/videojs-errors.css';
import 'videojs-errors';

type Props = {
  options: PlayerOptions;
  playerId: string;
  customErrors?: PlayerErrors;
} & PlayerCallbacks;

class App extends Component<Props> {
  player?: VideoJsPlayer;

  currentTime = 0;
  startPosition = 0;
  previousTime = 0;

  componentDidMount() {
    this.initPlayer();

    this.registerCallbacks();
  }

  componentDidUpdate(prevProps: Props) {
    if (prevProps !== this.props && this.props.options.sources !== prevProps.options.sources) {
      this.player?.src(this.props.options.sources ?? []);
      this.player?.poster(this.props.options.poster ?? '');
    }

    if (prevProps !== this.props && this.props.options.theme !== prevProps.options.theme) {
      if (!this.props.options.theme) {
        this.player?.removeClass(prevProps.options.theme ?? '');
      } else {
        prevProps.options.theme && this.player?.removeClass(prevProps.options.theme ?? '');
        this.player?.addClass(this.props.options.theme ?? '');
      }
    }
  }

  componentWillUnmount() {
    this.dispose();
  }

  initPlayer = () => {
    const { playerId, options } = this.props;
    if (!options.playbackRates) {
      options.playbackRates =
        options.sources &&
        options.sources.length &&
        options.sources[0].type &&
        options.sources[0].type === 'video/youtube'
          ? [0.5, 0.75, 1, 1.5, 2]
          : [0.5, 0.75, 1, 1.5, 2, 3];
    }

    this.player = videojs(playerId, options);
    this.player.maxQualitySelector({ displayMode: 1 });

    this.player?.errors(this.props.customErrors);
  };

  dispose = () => {
    if (this.player) {
      this.player.dispose();

      this.player = undefined;
    }
  };

  render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <div data-vjs-player>
          <video
            id={this.props.playerId}
            className={`video-js ${this.props.options.bigPlayButtonCentered && 'vjs-big-play-centered'}`}></video>
        </div>
      </div>
    );
  }
}

export default App;

And here Is the file I used to check with a custom error message.

    import React, { Component } from 'react';
    import MediaPlayer from './App';
    import { PlayerOptions, PlayerErrors } from './interfaces';
    
    type Props = {};
    
    type State = {
      options: PlayerOptions;
      customErrors?: PlayerErrors;
    };
    
    class Standalone extends Component<Props, State> {
      player: any;
    
      state: State = {
        customErrors: [{
          4: {
            headline: ' headline: This is an override for the generic MEDIA_ERR_SRC_NOT_SUPPORTED',
            message: 'message: This is a custom error message'
          }}],
        options: {
          theme: '',
          controls: true,
          html5: true,
          fill: true,
          bigPlayButtonCentered: true,
          techOrder: ['html5', 'youtube'],
          sources: [
            {
              src:
                'https://path.m3u8'
            }
          ] //[{ type: 'video/youtube', src: 'https://www.youtube.com/watch?v=L5CV53wCWO0' }]
        }
      };
 render() {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
        <div style={{ width: '1200px', height: '600px' }}>
          <MediaPlayer
            options={this.state.options}
            customErrors={this.state.customErrors}
            playerId={'mediaPlayerStandalone'}
            onReady={this.onReady}
            onPlay={this.onPlay}
            onPause={this.onPause}
            onTimeUpdate={this.onTimeUpdate}
            onSeeked={this.onSeeked}
            onSeeking={this.onSeeking}
            onEnd={this.onEnd}
          />
        </div>
      </div>
    );
  }
}

export default Standalone;

This is a snapshot of the error.

enter image description here

So how can I check my custom error msg is working?

Answer 1

You just update interface PlayerErrors like this:

export interface PlayerErrors {
  [key: number]: {
    headline: string,
    message: string,
  };
}