From 1f547efb12d6cbe7687e86925ad80bd85fac3dfd Mon Sep 17 00:00:00 2001
From: armin <arminyahyaa@gmail.com>
Date: Tue, 6 Apr 2021 15:05:18 +0430
Subject: [PATCH] fix: add generic typing to createHTMLMediaHook. no typecheck
 problem with ref anymore.

---
 src/factory/createHTMLMediaHook.ts | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/factory/createHTMLMediaHook.ts b/src/factory/createHTMLMediaHook.ts
index bd384f50..0f805755 100644
--- a/src/factory/createHTMLMediaHook.ts
+++ b/src/factory/createHTMLMediaHook.ts
@@ -27,25 +27,20 @@ export interface HTMLMediaControls {
   seek: (time: number) => void;
 }
 
-type createHTMLMediaHookReturn = [
-  React.ReactElement<HTMLMediaProps>,
-  HTMLMediaState,
-  HTMLMediaControls,
-  { current: HTMLAudioElement | null }
-];
+type MediaPropsWithRef<T> = HTMLMediaProps & { ref?: React.MutableRefObject<T | null> };
 
-export default function createHTMLMediaHook(tag: 'audio' | 'video') {
+export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVideoElement>(tag: 'audio' | 'video') {
   return (
     elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>
-  ): createHTMLMediaHookReturn => {
-    let element: React.ReactElement<any> | undefined;
-    let props: HTMLMediaProps;
+) => {
+  let element: React.ReactElement<MediaPropsWithRef<T>> | undefined;
+  let props: MediaPropsWithRef<T>;
 
     if (React.isValidElement(elOrProps)) {
       element = elOrProps;
       props = element.props;
     } else {
-      props = elOrProps as HTMLMediaProps;
+      props = elOrProps;
     }
 
     const [state, setState] = useSetState<HTMLMediaState>({
@@ -56,7 +51,7 @@ export default function createHTMLMediaHook(tag: 'audio' | 'video') {
       muted: false,
       volume: 1,
     });
-    const ref = useRef<HTMLAudioElement | null>(null);
+		const ref = useRef<T | null>(null);
 
     const wrapEvent = (userEvent, proxyEvent?) => {
       return (event) => {
@@ -234,6 +229,6 @@ export default function createHTMLMediaHook(tag: 'audio' | 'video') {
       }
     }, [props.src]);
 
-    return [element, state, controls, ref];
-  };
-}
+		return [element, state, controls, ref] as const;
+  }
+};