VideoPlayer using React and Typescript

Question

Being new to typescript , I have been struggling with its implementation lately using it on the webpart.tsx file

With the help of the posts here , was able to get to the point where the video plays without any issues. Below is the code that was developed so far.

export default class VideoPlayer extends React.Component<IVideoPlayerProps> {

  public VideoPlayer : React.RefObject<HTMLVideoElement>;

  constructor(props:IVideoPlayerProps){
  
  super(props)

  this.VideoPlayer = React.createRef();
  this.PlayVideo = this.PlayVideo.bind(this);

  }

  //Function to play the video
  public PlayVideo()
  {
    
    //let vid : HTMLVideoElement = document.getElementById("myVideo");
    //var change = document.getElementById("PlayVideo");
    var isPlaying = false;
    
    //Get the saved time from local storage
    var PausedTime = localStorage.getItem('CaptureTime');
    
    if (isPlaying) {
    this.VideoPlayer.current.pause();
    
    //Storing the paused time to local storage
    localStorage.setItem('CaptureTime', this.VideoPlayer.current.currentTime.toString());
    //change.innerHTML = "Play";
    this.VideoPlayer.current.innerHTML  = "Play";

  } 
  
  else {

    //this.VideoPlayer.current.currentTime = parseInt(PausedTime);
    this.VideoPlayer.current.play();
      //change.innerHTML = "Pause";  
    this.VideoPlayer.current.innerHTML  = "Pause";
  }
  isPlaying = !isPlaying;    

}

  public render(): React.ReactElement<IVideoPlayerProps> {
    return (
      
    <div>
          <video ref={this.VideoPlayer} width="400" height="400" controls>
          <source src="video.mp4" type="video/mp4"/>
          Your browser does not support HTML5 video
          </video><br/>
          <div>
          <PrimaryButton text="Play" onClick={this.PlayVideo.bind(this)}/>      
          </div>
    </div>

    );
  }
}

The end goal here is to capture the time from the video element when the video is stopped and store/retrieve the paused time from the local storage and change the button text when the video is played and vice versa. I have implemented all these aspects in the code , However this would only play the video and would not stop it nor would it change the button text.

The code would not give me any errors in console and network tab under XHR.

Would really appreciate if anyone here could help me out with this. Also please let me know if more details are required

Thanks in Advance

Answer 1

you could try 2 options,

1. When scaffolding your project [during yo @microsoft/sharepoint process], there is actually an option to choose between what framework you will use. Options were, 'No Javascript Framework', 'React' and 'Knockout'.

Try working your code on a 'No JavaScript Framework' scaffold.

2. React has its unique way of rendering things. I suggest you look at React , specially its props and states concepts.

Hope it helps! Happy SharePointing!