From b7069a3c75a051b48cef145dcf6f6aeb11bfbe74 Mon Sep 17 00:00:00 2001
From: Rune Botten <rbotten@gmail.com>
Date: Tue, 1 Feb 2022 09:15:10 -0800
Subject: [PATCH] fix: Silence typescript errors and update VideoPlayer from
 class to function component and use hooks for ref and state mgmt

---
 src/components/VideoPlayer.tsx | 33 ++++++++++++---------------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 8f4c046..22af6fd 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -1,23 +1,17 @@
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
 
-export default class VideoPlayer extends React.Component<
-  VideoJsPlayerOptions,
-  any
-> {
-  videoNode?: HTMLVideoElement;
-  player?: VideoJsPlayer;
-  componentDidMount() {
-    this.player = videojs(this.videoNode, this.props);
-  }
+const VideoPlayer = (props:VideoJsPlayerOptions) => {
+  const videoNode = useRef<HTMLVideoElement>(null)
+  const [player, setPlayer] = useState<VideoJsPlayer>()
 
-  componentWillUnmount() {
-    if (this.player) {
-      this.player.dispose();
+  useEffect(() => {
+    if (videoNode.current) {
+      setPlayer(videojs(videoNode.current, props))
     }
-  }
+    return () => player?.dispose()
+  }, [videoNode])
 
-  render() {
     return (
       <div>
         <link
@@ -27,14 +21,11 @@ export default class VideoPlayer extends React.Component<
         <div data-vjs-player style={{ marginBottom: '16px' }}>
           <video
             className="video-js vjs-16-9 vjs-big-play-centered"
-            ref={node => {
-              if (node) {
-                this.videoNode = node;
-              }
-            }}
+            ref={videoNode}
           ></video>
         </div>
       </div>
     );
-  }
 }
+
+export default VideoPlayer