refactor: extract setForwardedRef/useMixedRef

src/common/hooks/mixed-ref.ts

@@ -0,0 +1,25 @@
+import type { ForwardedRef } from 'react'
+
+export function setForwardedRef<T>(forwardedRef: ForwardedRef<T>, value: T) {
+  if (!forwardedRef) return
+  if (typeof forwardedRef === 'function') {
+    forwardedRef(value)
+  } else {
+    forwardedRef.current = value
+  }
+}
+
+export function useMixedRef<T>(forwardedRef: ForwardedRef<T>) {
+  const ref = useRef<T | null>(null)
+  return useMemo(() => {
+    return {
+      get current() {
+        return ref.current
+      },
+      set current(val: T | null) {
+        ref.current = val
+        setForwardedRef(forwardedRef, val)
+      },
+    }
+  }, [ref])
+}

src/components/VideoCard/child-components/RecoverableVideo.tsx

@@ -1,36 +1,22 @@
-import { useEventListener, useUnmount } from 'ahooks'
+import { useMixedRef } from '$common/hooks/mixed-ref'
+import { useEventListener } from 'ahooks'
 import type { ComponentProps, ComponentRef, MutableRefObject } from 'react'
 
 export const RecoverableVideo = forwardRef<
   ComponentRef<'video'>,
   ComponentProps<'video'> & { currentTimeRef: MutableRefObject<number | undefined> }
->(({ currentTimeRef, ...videoProps }, forwardRef) => {
-  const ref = useRef<ComponentRef<'video'>>(null)
-
-  const syncForwardedRef = () => {
-    forwardRef &&
-      (typeof forwardRef === 'function'
-        ? forwardRef(ref.current)
-        : (forwardRef.current = ref.current))
-  }
-
+>(({ currentTimeRef, ...videoProps }, forwardedRef) => {
+  const ref = useMixedRef<ComponentRef<'video'> | null>(forwardedRef)
   const mounted = useRef(false)
 
   useMount(() => {
-    syncForwardedRef()
-
     // set initial time
     if (ref.current && typeof currentTimeRef.current === 'number') {
       ref.current.currentTime = currentTimeRef.current
     }
-
     mounted.current = true
   })
 
-  useUnmount(() => {
-    syncForwardedRef()
-  })
-
   useEventListener(
     'timeupdate',
     () => {
@@ -40,5 +26,5 @@ export const RecoverableVideo = forwardRef<
     { target: ref },
   )
 
-  return <video ref={ref} {...videoProps} />
+  return <video {...videoProps} ref={ref} />
 })

src/components/VideoCard/child-components/VideoCardActions.tsx

@@ -1,3 +1,4 @@
+import { setForwardedRef } from '$common/hooks/mixed-ref'
 import { colorPrimaryValue } from '$components/css-vars'
 import { css as _css, css } from '@emotion/react'
 import { useHover } from 'ahooks'
@@ -92,13 +93,7 @@ export const VideoCardActionButton = memo(
         {...divProps}
         ref={(el) => {
           triggerRef.current = el
-          if (forwardedRef) {
-            if (typeof forwardedRef === 'function') {
-              forwardedRef(el)
-            } else {
-              forwardedRef.current = el
-            }
-          }
+          setForwardedRef(forwardedRef, el)
         }}
         css={[S.button(visible, active)]}
         className={clsx('action-button', className)}