feat: add dispatchRef, respond ACTIONS.PLAYER.PLAY

Author: ambar

example/src/MP4Page.tsx

@@ -1,5 +1,10 @@
-import React, {useState, useLayoutEffect, useContext} from 'react'
-import PlayerContainer, {MessageContext, EVENTS} from 'griffith'
+import React, {
+  useRef,
+  useState,
+  useLayoutEffect,
+  useContext,
+} from 'react'
+import PlayerContainer, {MessageContext, ACTIONS, EVENTS} from 'griffith'
 import Logo from './Logo'
 import {logEvent} from './utils'
 
@@ -36,10 +41,11 @@ const props = {
   autoplay: true,
   shouldObserveResize: true,
   src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
-  onEvent: logEvent,
 }
 
+const shouldLoop = new URLSearchParams(location.search).has('loop')
 const canShowLogo = new URLSearchParams(location.search).has('logo')
+
 /** 常规通讯方式，建议直接使用 `onEvent` 替代 */
 const LogoListener = () => {
   const [isLogoVisible, setIsLogoVisible] = useState(false)
@@ -52,10 +58,24 @@ const LogoListener = () => {
   return canShowLogo && isLogoVisible ? <Logo /> : null
 }
 
-const App = () => (
-  <PlayerContainer {...props}>
-    <LogoListener />
-  </PlayerContainer>
-)
+const App = () => {
+  const dispatchRef = useRef()
+  return (
+    <PlayerContainer
+      {...props}
+      dispatchRef={dispatchRef}
+      onEvent={(e, data) => {
+        if (shouldLoop && e === EVENTS.DOM.ENDED) {
+          dispatchRef.current?.(ACTIONS.PLAYER.PLAY)
+        }
+        logEvent(e, data)
+      }}
+    >
+      <LogoListener />
+      <button onClick={() => dispatchRef.current?.(ACTIONS.PLAYER.PLAY)}>Play</button>
+      <button onClick={() => dispatchRef.current?.(ACTIONS.PLAYER.PAUSE)}>Pause</button>
+    </PlayerContainer>
+  )
+}
 
 export default App

packages/griffith-message/index.d.ts

@@ -12,6 +12,7 @@ declare const ACTIONS: {
   }
 }
 
+// TODO：合并这两项，与 ACTIONS 不对称
 declare const EVENTS: {
   DOM: {
     PLAY: string

packages/griffith/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import {EVENTS} from 'griffith-message'
+import {EVENTS, ACTIONS} from 'griffith-message'
 
 type RealQuality = 'ld' | 'sd' | 'hd' | 'fhd'
 
@@ -24,7 +24,8 @@ interface PlayerContainerProps {
     message: string
   }
   onBeforePlay?: (src: string) => Promise<void>
-  onEvent?: (type: string) => void
+  onEvent?: (type: string, data?: any) => void
+  dispatchRef?: React.Ref<MessageContextValue['dispatchAction']>,
   shouldObserveResize?: boolean
   initialObjectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
   useMSE?: boolean
@@ -41,7 +42,7 @@ interface MessageContextValue {
     eventName: string,
     eventHandler: (data: any) => void
   ) => Subscription
-  dispatchAction: (actionName: string, data: any) => void
+  dispatchAction: (actionName: string, data?: any) => void
 }
 
 type Quality = 'auto' | RealQuality
@@ -74,4 +75,4 @@ declare const Layer: React.ComponentType
 
 export default PlayerContainer
 
-export {VideoSourceContext, MessageContext, Layer, EVENTS}
+export {VideoSourceContext, MessageContext, Layer, EVENTS, ACTIONS}

packages/griffith/src/components/Player/Player.js

@@ -106,20 +106,17 @@ class Player extends Component {
       this.setState({volume: historyVolume})
     }
 
-    this.pauseActionSubscription = this.props.subscribeAction(
-      ACTIONS.PLAYER.PAUSE,
-      this.handlePauseAction
-    )
-
-    this.timeUpdateActionSubscription = this.props.subscribeAction(
-      ACTIONS.PLAYER.TIME_UPDATE,
-      ({currentTime}) => this.handleSeek(currentTime)
-    )
-
-    this.showControllerActionSubscription = this.props.subscribeAction(
-      ACTIONS.PLAYER.SHOW_CONTROLLER,
-      this.handleShowController
-    )
+    this.actionSubscriptions_ = [
+      this.props.subscribeAction(ACTIONS.PLAYER.PLAY, this.handlePlay),
+      this.props.subscribeAction(ACTIONS.PLAYER.PAUSE, this.handlePauseAction),
+      this.props.subscribeAction(ACTIONS.PLAYER.TIME_UPDATE, ({currentTime}) =>
+        this.handleSeek(currentTime)
+      ),
+      this.props.subscribeAction(
+        ACTIONS.PLAYER.SHOW_CONTROLLER,
+        this.handleShowController
+      ),
+    ]
 
     if (this.videoRef.current.root) {
       if (this.props.muted) {
@@ -191,9 +188,7 @@ class Player extends Component {
   }
 
   componentWillUnmount() {
-    this.pauseActionSubscription.unsubscribe()
-    this.timeUpdateActionSubscription.unsubscribe()
-    this.showControllerActionSubscription.unsubscribe()
+    this.actionSubscriptions_.forEach(s => s.unsubscribe())
   }
 
   handlePauseAction = ({dontApplyOnFullScreen} = {}) => {

packages/griffith/src/components/PlayerContainer/PlayerContainer.js

@@ -20,6 +20,7 @@ const PlayerContainer = ({
   error,
   onBeforePlay = () => Promise.resolve(),
   onEvent,
+  dispatchRef,
   shouldObserveResize,
   children,
   initialObjectFit = 'contain',
@@ -40,7 +41,12 @@ const PlayerContainer = ({
 }) => (
   <ObjectFitProvider initialObjectFit={initialObjectFit}>
     <PositionProvider shouldObserveResize={shouldObserveResize}>
-      <MessageProvider id={id} enableCrossWindow={standalone} onEvent={onEvent}>
+      <MessageProvider
+        id={id}
+        enableCrossWindow={standalone}
+        onEvent={onEvent}
+        dispatchRef={dispatchRef}
+      >
         <InternalContext.Consumer>
           {({emitEvent, subscribeAction}) => (
             <VideoSourceProvider
@@ -109,6 +115,9 @@ PlayerContainer.propTypes = {
   }),
   onBeforePlay: PropTypes.func,
   onEvent: PropTypes.func,
+  dispatchRef: PropTypes.shape({
+    current: PropTypes.func,
+  }),
   initialObjectFit: PropTypes.oneOf(VALID_FIT),
   useMSE: PropTypes.bool,
   defaultQuality: PropTypes.oneOf(['ld', 'sd', 'hd', 'fhd']),

packages/griffith/src/contexts/Message/MessageContext.js

@@ -23,6 +23,10 @@ export class MessageProvider extends React.PureComponent {
     id: PropTypes.string.isRequired,
     enableCrossWindow: PropTypes.bool,
     targetOrigin: PropTypes.string.isRequired,
+    onEvent: PropTypes.func,
+    dispatchRef: PropTypes.shape({
+      current: PropTypes.func,
+    }),
   }
 
   static defaultProps = {
@@ -40,6 +44,9 @@ export class MessageProvider extends React.PureComponent {
 
     this.subscribeCrossWindowMessage = subscribeMessage
     this.dispatchCrossWindowMessage = dispatchMessage
+    if (this.props.dispatchRef) {
+      this.props.dispatchRef.current = this.externalContextValue.dispatchAction
+    }
   }
 
   componentDidMount() {

packages/griffith/src/index.js

@@ -3,4 +3,4 @@ export {ExternalContext as MessageContext} from './contexts/Message'
 export {VideoSourceContext} from './contexts/VideoSource'
 export {default as Controller} from './components/Controller'
 export {default as Layer} from './components/Layer'
-export {EVENTS} from 'griffith-message'
+export {EVENTS, ACTIONS} from 'griffith-message'