feat: add canplay event

Author: xiabaoying

packages/griffith-message/README-zh-Hans.md

@@ -69,6 +69,7 @@ dispatchMessage(target: Window, name: ACTIONS, data?: object): void
 
 | `messageName`               | 说明                               | `data`                                           |
 | --------------------------- | ---------------------------------- | ------------------------------------------------ |
+| `EVENTS.CANPLAY`            | 可播放                             | 见下表                                           |
 | `EVENTS.PLAY`               | 播放                               | 见下表                                           |
 | `EVENTS.PLAYING`            | 从暂停或缓冲中恢复播放             | 见下表                                           |
 | `EVENTS.PAUSE`              | 暂停                               | 见下表                                           |

packages/griffith-message/README.md

@@ -69,6 +69,7 @@ Events received from the player
 
 | `messageName`               | Description                          | `data`                                           |
 | --------------------------- | ------------------------------------ | ------------------------------------------------ |
+| `EVENTS.CANPLAY`            | canplay                              | see DOM type data table                          |
 | `EVENTS.PLAY`               | Play                                 | see DOM type data table                          |
 | `EVENTS.PLAYING`            | Resume playback from pause or buffer | see DOM type data table                          |
 | `EVENTS.PAUSE`              | Pause                                | see DOM type data table                          |

packages/griffith-message/src/constants/events.ts

@@ -8,6 +8,7 @@ enum DOM {
   TIMEUPDATE = 'event/dom/timeupdate',
   ERROR = 'event/dom/error',
   WAITING = 'event/dom/waiting',
+  CANPLAY = 'event/dom/canplay',
 }
 
 // custom events
@@ -68,6 +69,7 @@ export type EventParamsMap = {
   [EVENTS.PAUSE]: Listen<DOMEventParams>
   [EVENTS.ENDED]: Listen<DOMEventParams>
   [EVENTS.TIMEUPDATE]: Listen<DOMEventParams>
+  [EVENTS.CANPLAY]: Listen<DOMEventParams>
   [EVENTS.ERROR]: Listen<DOMEventParams>
   [EVENTS.WAITING]: Listen<DOMEventParams>
   [EVENTS.QUALITY_CHANGE]: Listen<{quality: Quality; prevQuality: Quality}>

packages/griffith/src/components/VideoWithMessage.tsx

@@ -17,6 +17,7 @@ const eventMap: EventPair[] = [
   [EVENTS.TIMEUPDATE, 'onTimeUpdate'],
   [EVENTS.ERROR, 'onError'],
   [EVENTS.WAITING, 'onWaiting'],
+  [EVENTS.CANPLAY, 'onCanPlay'],
 ]
 
 function serializeDOMException(exception?: MediaError | null) {