Fix linter and fix lint issues (#10141)

web/src/components/player/MsePlayer.tsx

@@ -37,8 +37,10 @@ function MSEPlayer({
   const videoRef = useRef<HTMLVideoElement>(null);
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTIDRef = useRef<number | null>(null);
-  const ondataRef = useRef<((data: any) => void) | null>(null);
-  const onmessageRef = useRef<{ [key: string]: (msg: any) => void }>({});
+  const ondataRef = useRef<((data: ArrayBufferLike) => void) | null>(null);
+  const onmessageRef = useRef<{
+    [key: string]: (msg: { value: string; type: string }) => void;
+  }>({});
   const msRef = useRef<MediaSource | null>(null);
 
   const wsURL = useMemo(() => {
@@ -49,7 +51,7 @@ function MSEPlayer({
     const currentVideo = videoRef.current;
 
     if (currentVideo) {
-      currentVideo.play().catch((er: any) => {
+      currentVideo.play().catch((er: { name: string }) => {
         if (er.name === "NotAllowedError" && !currentVideo.muted) {
           currentVideo.muted = true;
           currentVideo.play().catch(() => {});
@@ -59,16 +61,19 @@ function MSEPlayer({
   };
 
   const send = useCallback(
-    (value: any) => {
+    (value: object) => {
       if (wsRef.current) wsRef.current.send(JSON.stringify(value));
     },
-    [wsRef]
+    [wsRef],
   );
 
   const codecs = useCallback((isSupported: (type: string) => boolean) => {
     return CODECS.filter((codec) =>
-      isSupported(`video/mp4; codecs="${codec}"`)
+      isSupported(`video/mp4; codecs="${codec}"`),
     ).join();
+
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onConnect = useCallback(() => {
@@ -76,6 +81,8 @@ function MSEPlayer({
 
     setWsState(WebSocket.CONNECTING);
 
+    // TODO may need to check this later
+    // eslint-disable-next-line
     connectTS = Date.now();
 
     wsRef.current = new WebSocket(wsURL);
@@ -110,6 +117,8 @@ function MSEPlayer({
     onmessageRef.current = {};
 
     onMse();
+    // only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onClose = useCallback(() => {
@@ -135,11 +144,11 @@ function MSEPlayer({
         () => {
           send({
             type: "mse",
-            // @ts-ignore
+            // @ts-expect-error for typing
             value: codecs(MediaSource.isTypeSupported),
           });
         },
-        { once: true }
+        { once: true },
       );
 
       if (videoRef.current) {
@@ -156,7 +165,7 @@ function MSEPlayer({
             value: codecs(MediaSource.isTypeSupported),
           });
         },
-        { once: true }
+        { once: true },
       );
       videoRef.current!.src = URL.createObjectURL(msRef.current!);
       videoRef.current!.srcObject = null;
@@ -184,6 +193,7 @@ function MSEPlayer({
             }
           }
         } catch (e) {
+          // eslint-disable-next-line no-console
           console.debug(e);
         }
       });
@@ -201,6 +211,7 @@ function MSEPlayer({
           try {
             sb?.appendBuffer(data);
           } catch (e) {
+            // eslint-disable-next-line no-console
             console.debug(e);
           }
         }
@@ -217,7 +228,7 @@ function MSEPlayer({
     const MediaSourceConstructor =
       "ManagedMediaSource" in window ? window.ManagedMediaSource : MediaSource;
 
-    // @ts-ignore
+    // @ts-expect-error for typing
     msRef.current = new MediaSourceConstructor();
 
     if ("hidden" in document && visibilityCheck) {
@@ -241,7 +252,7 @@ function MSEPlayer({
             }
           });
         },
-        { threshold: visibilityThreshold }
+        { threshold: visibilityThreshold },
       );
       observer.observe(videoRef.current!);
     }
@@ -251,6 +262,8 @@ function MSEPlayer({
     return () => {
       onDisconnect();
     };
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled, onDisconnect, onConnect]);
 
   return (