feat: add useEvent API

zhihu · Sep 16, 2021 · fa4b671 · fa4b671
1 parent aac7c3e
commit fa4b671
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 28 deletions.
diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
@@ -58,32 +58,19 @@ const useQuery = () => {
   return query
 }
 
-/** 常规通讯方式，建议直接使用 `onEvent` 替代 */
-const LogoListener: React.FC<{shouldShowLogo: boolean}> = ({
-  shouldShowLogo,
-}) => {
-  const [isLogoVisible, setIsLogoVisible] = useState(false)
-  const {subscribeEvent} = useContext(MessageContext)
-  useLayoutEffect(() => {
-    return subscribeEvent(EVENTS.PLAY_COUNT, () => {
-      setIsLogoVisible(true)
-    }).unsubscribe
-  }, [subscribeEvent])
-  return shouldShowLogo && isLogoVisible ? <Logo /> : null
-}
-
 const App = () => {
-  const messageContextRef = useMessageContextRef()
   const query = useQuery()
-  const loop = 'loop' in query
+  const messageContextRef = useMessageContextRef()
+  const [isLogoVisible, setIsLogoVisible] = useState(false)
 
-  useEffect(() => {
-    return messageContextRef.subscribeEvent(EVENTS.ENDED, () => {
-      if (loop) {
-        messageContextRef.dispatchAction(ACTIONS.PLAY)
-      }
-    }).unsubscribe
-  }, [messageContextRef, loop])
+  messageContextRef.useEvent(EVENTS.PLAY_COUNT, () => {
+    setIsLogoVisible(true)
+  })
+  messageContextRef.useEvent(EVENTS.ENDED, () => {
+    if ('loop' in query) {
+      messageContextRef.dispatchAction(ACTIONS.PLAY)
+    }
+  })
 
   return (
     <>
@@ -101,7 +88,7 @@ const App = () => {
         messageContextRef={messageContextRef}
         onEvent={logEvent}
       >
-        <LogoListener shouldShowLogo={'logo' in query} />
+        {'logo' in query && isLogoVisible && <Logo />}
       </Player>
       <button
         onClick={() => {

diff --git a/packages/griffith/src/contexts/MessageContext.tsx b/packages/griffith/src/contexts/MessageContext.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useLayoutEffect, useRef} from 'react'
 import EventEmitter from 'eventemitter3'
 import {
   ACTIONS,
@@ -67,13 +67,22 @@ type MessageProviderProps = {
 
 type MessageHelper = ReturnType<typeof createMessageHelper>
 
+const useHandler = <T extends (...args: any[]) => any>(handler: T) => {
+  const handlerRef = useRef<T>(handler)
+  handlerRef.current = handler
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return useRef(((...args: any[]) => handlerRef.current(...args)) as T).current
+}
+
 /**
  *
  * Retrieve `MessageContext` from outside of Player
  *
  * ```js
  * const messageContextRef = useMessageContextRef()
  *
+ * messageContextRef.useEvent(EVENTS.PLAY, () => {})
+ *
  * render(
  *  <>
  *    <Player messageContextRef={messageContextRef} />
@@ -83,16 +92,33 @@ type MessageHelper = ReturnType<typeof createMessageHelper>
  * ```
  */
 export const useMessageContextRef = () => {
-  const ref = useRef({}).current as MessageContextRef
-  useEffect(() => {
+  const extra = {
+    useEvent<T extends keyof EventParamsMap>(
+      name: T,
+      listener: EventParamsMap[T]
+    ) {
+      const handler = useHandler(listener)
+      useLayoutEffect(
+        () => ref.subscribeEvent(name, handler).unsubscribe,
+        [name, handler]
+      )
+    },
+  }
+  const ref = useRef(extra).current as MessageContextRef &
+    MessageContextValue &
+    typeof extra
+
+  // Player mount 中触发了事件，确保在它之前开始监听
+  useLayoutEffect(() => {
     if (!ref.current) {
       throw new Error(
         'Missing ref value, please pass it to Player, eg. `<Player messageContextRef={messageContextRef} />`'
       )
     }
     Object.assign(ref, ref.current)
   }, [ref])
-  return ref as MessageContextRef & MessageContextValue
+
+  return ref
 }
 
 export class MessageProvider extends React.PureComponent<MessageProviderProps> {