feat: add video size for events payload (#299)

zhihu · Mar 27, 2023 · 93506b9 · 93506b9
1 parent 6936fc9
commit 93506b9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/packages/griffith-message/README-zh-Hans.md b/packages/griffith-message/README-zh-Hans.md
@@ -97,6 +97,8 @@ dispatchMessage(target: Window, name: ACTIONS, data?: object): void
 | ------------- | --------------------------------------------------------- | -------------------------------------------------- |
 | `currentTime` | `number`                                                  | 当前时间                                           |
 | `duration`    | `number`                                                  | 视频总时长                                         |
+| `videoWidth`  | `number`                                                  | 视频宽度                                           |
+| `videoHeight` | `number`                                                  | 视频高度                                           |
 | `error`       | `{code: number, message: string, name: stirng}` 或 `null` | [`HTMLMediaElement.error`][htmlmediaelement-error] |
 
 [htmlmediaelement-error]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error 'HTMLMediaElement.error'

diff --git a/packages/griffith-message/README.md b/packages/griffith-message/README.md
@@ -97,6 +97,8 @@ Events received from the player
 | ------------- | --------------------------------------------------------- | -------------------------------------------------- |
 | `currentTime` | `number`                                                  | Current time                                       |
 | `duration`    | `number`                                                  | Total video duration                               |
+| `videoWidth`  | `number`                                                  | Video Width                                        |
+| `videoHeight` | `number`                                                  | Video Height                                       |
 | `error`       | `{code: number, message: string, name: stirng}` or `null` | [`HTMLMediaElement.error`][htmlmediaelement-error] |
 
 [htmlmediaelement-error]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error 'HTMLMediaElement.error'

diff --git a/packages/griffith-message/src/constants/events.ts b/packages/griffith-message/src/constants/events.ts
@@ -49,9 +49,11 @@ export const EVENTS = {
 
 export type EVENTS = DOM | PLAYER
 
-type DOMEventParams = {
+export type DOMEventParams = {
   currentTime: number
   duration: number
+  videoWidth: number
+  videoHeight: number
   error: {code: number; message: string; name: string} | null
 }
 

diff --git a/packages/griffith/src/components/VideoWithMessage.tsx b/packages/griffith/src/components/VideoWithMessage.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useContext, useEffect, useMemo, useRef} from 'react'
 import {EVENTS} from 'griffith-message'
+import type {DOMEventParams} from 'griffith-message'
 import {InternalMessageContext} from '../contexts/MessageContext'
 import ObjectFitContext from '../contexts/ObjectFitContext'
 import PositionContext from '../contexts/PositionContext'
@@ -28,11 +29,14 @@ function serializeDOMException(exception?: MediaError | null) {
   return {code, message, name: (exception as any).name}
 }
 
-function getMediaEventPayload(event: VideoEvent) {
-  const {currentTime, duration, error} = event.currentTarget as HTMLVideoElement
+function getMediaEventPayload(event: VideoEvent): DOMEventParams {
+  const {currentTime, duration, error, videoWidth, videoHeight} =
+    event.currentTarget as HTMLVideoElement
   return {
     currentTime,
     duration,
+    videoWidth,
+    videoHeight,
     error: serializeDOMException(error),
   }
 }