zhihu · ambar · Aug 10, 2021 · Aug 10, 2021 · Aug 10, 2021
diff --git a/example/src/App.jsx → example/src/App.tsx b/example/src/App.jsx → example/src/App.tsx
diff --git a/example/src/FMP4Page.jsx → example/src/FMP4Page.tsx b/example/src/FMP4Page.jsx → example/src/FMP4Page.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PlayerContainer from 'griffith'
+import {logEvent} from './utils'
 
 const duration = 182
 
@@ -34,6 +35,7 @@ const props = {
   shouldObserveResize: true,
   src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
   useMSE: true,
+  onEvent: logEvent,
 }
 
 const App = () => <PlayerContainer {...props} />

diff --git a/example/src/HLSPage.jsx → example/src/HLSPage.tsx b/example/src/HLSPage.jsx → example/src/HLSPage.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PlayerContainer from 'griffith'
+import {logEvent} from './utils'
 
 const sources = {
   // 注意，这里手动提供了 auto 品质的 source，因此会无视 useAutoQuality 的配置
@@ -24,6 +25,7 @@ const props = {
   autoplay: true,
   hiddenTimeline: true,
   hiddenTime: true,
+  onEvent: logEvent,
 }
 
 const App = () => <PlayerContainer {...props} />

diff --git a/example/src/IframePage.jsx → example/src/IframePage.tsx b/example/src/IframePage.jsx → example/src/IframePage.tsx
diff --git a/example/src/InlinePage.jsx → example/src/InlinePage.tsx b/example/src/InlinePage.jsx → example/src/InlinePage.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PlayerContainer, {Layer} from 'griffith'
+import {logEvent} from './utils'
 
 const watermarkStyle = {
   backgroundColor: 'rgba(255, 255, 255, 0.5)',
@@ -10,12 +11,16 @@ const watermarkStyle = {
   display: 'inline-block',
 }
 
-const VideoCard = ({data, height = 'auto', objectFit}) => (
+const VideoCard = ({
+  data,
+  height = 'auto',
+  objectFit,
+}: Partial<{data: any; height: number | string; objectFit: string}>) => (
   <div
     className="VideoCard"
     style={{height, width: '320px', margin: '20px auto'}}
   >
-    <PlayerContainer {...data} initialObjectFit={objectFit}>
+    <PlayerContainer {...data} initialObjectFit={objectFit} onEvent={logEvent}>
       <Layer>
         <span style={watermarkStyle}>水印示例</span>
       </Layer>

diff --git a/example/src/MP4Page.jsx → example/src/MP4Page.tsx b/example/src/MP4Page.jsx → example/src/MP4Page.tsx
@@ -1,6 +1,7 @@
 import React, {useState, useLayoutEffect, useContext} from 'react'
 import PlayerContainer, {MessageContext, EVENTS} from 'griffith'
 import Logo from './Logo'
+import {logEvent} from './utils'
 
 const duration = 182
 
@@ -35,8 +36,7 @@ const props = {
   autoplay: true,
   shouldObserveResize: true,
   src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
-  // eslint-disable-next-line no-console
-  onEvent: console.log.bind(null, 'onEvent:'),
+  onEvent: logEvent,
 }
 
 const canShowLogo = new URLSearchParams(location.search).has('logo')

diff --git a/example/src/utils.js b/example/src/utils.js
@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+
+import throttle from 'lodash/throttle'
+import {EVENTS} from 'griffith'
+
+const createGroupedLogger = (label = 'Log', wait = 100) => {
+  const logs = []
+  const flush = throttle(() => {
+    console.groupCollapsed?.(`[Click to expand]: ${label}, ${logs.length} logs`)
+    let log
+    while ((log = logs.shift())) {
+      console.info(...log)
+    }
+    console.groupEnd?.()
+  }, wait)
+  return (...args) => {
+    logs.push(args)
+    flush()
+  }
+}
+
+const groupedLogger = createGroupedLogger('TIMEUPDATE', 2000)
+
+export const logEvent = (e, data) => {
+  const args = ['onEvent', e, data]
+  if (e === EVENTS.DOM.TIMEUPDATE) {
+    groupedLogger(...args)
+  } else {
+    console.log(...args)
+  }
+}
diff --git a/package.json b/package.json
@@ -42,9 +42,10 @@
     "build:lib": "lerna run build --ignore example --ignore website",
     "deploy:website": "lerna run --scope website deploy",
     "build": "yarn build:lib",
-    "build:watch": "lerna run build:watch --stream --parallel",
+    "build:watch": "lerna run build --parallel --ignore example --ignore website --ignore griffith-standalone -- --watch",
     "release": "yarn build && lerna publish",
-    "start": "yarn workspace example run start"
+    "start": "yarn workspace example run start",
+    "dev": "yarn build:watch & yarn start"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",

diff --git a/packages/griffith-message/index.d.ts b/packages/griffith-message/index.d.ts
@@ -7,6 +7,7 @@ declare const ACTIONS: {
     EXIT_FULLSCREEN: string
     ENTER_PIP: string
     EXIT_PIP: string
+    TIME_UPDATE: string
     SHOW_CONTROLLER: string
   }
 }

diff --git a/packages/griffith-message/src/constants/events.js b/packages/griffith-message/src/constants/events.js
@@ -1,3 +1,4 @@
+// pair to native DOM events, see https://mdn.io/video
 export const DOM = {
   PLAY: 'event/dom/play',
   PLAYING: 'event/dom/playing',
@@ -8,6 +9,7 @@ export const DOM = {
   WAITING: 'event/dom/waiting',
 }
 
+// custom events
 export const PLAYER = {
   QUALITY_CHANGE: 'event/player/quality-change',
   REQUEST_PLAY: 'event/player/request-play',

diff --git a/packages/griffith/index.d.ts b/packages/griffith/index.d.ts
@@ -19,8 +19,8 @@ interface PlayerContainerProps {
   title?: string
   cover: string
   duration: number
-  sources: {[key in RealQuality]: PlaySource}
-  error: {
+  sources: {[key in RealQuality]?: PlaySource}
+  error?: {
     message: string
   }
   onBeforePlay?: (src: string) => Promise<void>

diff --git a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js
@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import noop from 'lodash/noop'
-import {sequence} from 'griffith-utils'
 import Player from '../Player'
 import {
   VideoSourceProvider,
@@ -42,11 +40,11 @@ const PlayerContainer = ({
 }) => (
   <ObjectFitProvider initialObjectFit={initialObjectFit}>
     <PositionProvider shouldObserveResize={shouldObserveResize}>
-      <MessageProvider id={id} enableCrossWindow={standalone}>
+      <MessageProvider id={id} enableCrossWindow={standalone} onEvent={onEvent}>
         <InternalContext.Consumer>
           {({emitEvent, subscribeAction}) => (
             <VideoSourceProvider
-              onEvent={sequence(emitEvent, onEvent || noop)}
+              onEvent={emitEvent}
               sources={sources}
               id={id}
               defaultQuality={defaultQuality}
@@ -73,7 +71,7 @@ const PlayerContainer = ({
                       title={title}
                       duration={duration}
                       error={error}
-                      onEvent={sequence(emitEvent, onEvent || noop)}
+                      onEvent={emitEvent}
                       subscribeAction={subscribeAction}
                       onBeforePlay={() => onBeforePlay(currentSrc)}
                     />

diff --git a/packages/griffith/src/components/Video/VideoWithMessage.js b/packages/griffith/src/components/Video/VideoWithMessage.js
@@ -31,6 +31,7 @@ function getMediaEventPayload(event) {
   }
 }
 
+// TODO：这个文件只是做了一层方法拦截，触发播放事件，删除这些封装，简化逻辑
 const VideoWithMessage = React.forwardRef((props, ref) => {
   const renderChildren = (emitEvent, objectFit, updateVideoSize) => {
     const newProps = {}

diff --git a/packages/griffith/src/contexts/Message/MessageContext.js b/packages/griffith/src/contexts/Message/MessageContext.js
@@ -58,21 +58,22 @@ export class MessageProvider extends React.PureComponent {
 
   emitEvent = (eventName, data) => {
     this.emitter.emit(eventName, {__type__: EVENT_TYPE, data})
+    this.props.onEvent?.(eventName, data)
     if (this.props.enableCrossWindow) {
       this.dispatchCrossWindowMessage(window.parent, eventName, data)
     }
   }
 
   subscribeEvent = (eventName, listener) => {
-    const realLisener = ({__type__, data} = {}) => {
+    const realListener = ({__type__, data} = {}) => {
       if (__type__ === EVENT_TYPE) {
         listener(data)
       }
     }
-    this.emitter.on(eventName, realLisener)
+    this.emitter.on(eventName, realListener)
 
     return {
-      unsubscribe: () => this.emitter.off(eventName, realLisener),
+      unsubscribe: () => this.emitter.off(eventName, realListener),
     }
   }
 
@@ -81,32 +82,32 @@ export class MessageProvider extends React.PureComponent {
   }
 
   subscribeAction = (eventName, listener) => {
-    const realLisener = ({__type__, data}) => {
+    const realListener = ({__type__, data}) => {
       if (__type__ === ACTION_TYPE) {
         listener(data)
       }
     }
-    this.emitter.on(eventName, realLisener)
+    this.emitter.on(eventName, realListener)
 
     return {
-      unsubscribe: () => this.emitter.off(eventName, realLisener),
+      unsubscribe: () => this.emitter.off(eventName, realListener),
     }
   }
 
+  internalContextValue = {
+    emitEvent: this.emitEvent,
+    subscribeAction: this.subscribeAction,
+  }
+
+  externalContextValue = {
+    dispatchAction: this.dispatchAction,
+    subscribeEvent: this.subscribeEvent,
+  }
+
   render() {
     return (
-      <InternalContext.Provider
-        value={{
-          emitEvent: this.emitEvent,
-          subscribeAction: this.subscribeAction,
-        }}
-      >
-        <ExternalContext.Provider
-          value={{
-            dispatchAction: this.dispatchAction,
-            subscribeEvent: this.subscribeEvent,
-          }}
-        >
+      <InternalContext.Provider value={this.internalContextValue}>
+        <ExternalContext.Provider value={this.externalContextValue}>
           {this.props.children}
         </ExternalContext.Provider>
       </InternalContext.Provider>