griffith-message
TypeScript icon, indicating that this package has built-in type declarations

1.30.0 • Public • Published

griffith-message

English | 简体中文

Griffith message communication plugin

Usage

import {EVENTS, ACTIONS, createMessageHelper} from 'griffith-message'

const helper = createMessageHelper()
// register event listener
helper.subscribeMessage(EVENTS.PLAY, (r) => {
  r.currentTime
})
helper.subscribeMessage(EVENTS.QUALITY_CHANGE, (r) => {
  r.quality
})
// dispatch action to player
helper.dispatchMessage(window, ACTIONS.SET_VOLUME, {volume: 0.5})
// dispose all event listeners
helper.dispose()

createMessageHelper

Cross-window communication

createMessageHelper(id?, targetOrigin?, shouldValidateId?)
Name Type Description
id string | number Unique identifier, each message will contain this id, the receiver can be used to verify.
targetOrigin object The targetOrigin parameter when sending a message. If it is not empty, it will check if the origin of the sent message is the same.
shouldValidateId boolean Will check if the id of the incoming message is the same as the id of the first parameter.

subscribeMessage

subscribeMessage(name: EVENTS, (data?: object, source?: MessageEventSource) => void): () => void
Name Type Description
name EVENTS Message Name
data object Message attached data
source MessageEventSource Message Event Source

dispatchMessage

dispatchMessage(target: Window, name: ACTIONS, data?: object): void
Name Type Description
target Window Target Window
name ACTIONS Message Name
data object Message attached data

EVENTS

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
EVENTS.ENDED Ended see DOM type data table
EVENTS.TIMEUPDATE Timeupdate see DOM type data table
EVENTS.ERROR Error see DOM type data table
EVENTS.WAITING Buffer see DOM type data table
EVENTS.REQUEST_PLAY User starts playback null
EVENTS.QUALITY_CHANGE Play quality switching {quality: string, prevQuality: string}
EVENTS.PLAY_COUNT Playback null
EVENTS.PLAY_FAILED Play failed {currentTime: number}
EVENTS.ENTER_FULLSCREEN Enter Fullscreen null
EVENTS.EXIT_FULLSCREEN Exit Fullscreen null
EVENTS.ENTER_PIP Enter Picture in Picture null
EVENTS.EXIT_PIP Exit Picture in Picture null
EVENTS.SHOW_CONTROLLER Show Controller null
EVENTS.HIDE_CONTROLLER Hide Controller null
EVENTS.HOVER_PROGRESS_DOT Mouse hover progress dot {startTime: number, left: number, top: number}
EVENTS.LEAVE_PROGRESS_DOT Mouse leave progress dot null
EVENTS.SUBSCRIPTION_READY Action subscription ready void

DOM type data

Name Type Description
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

ACTIONS

Actions sent to the player

messageName Description data
ACTIONS.PLAY Play void
ACTIONS.PAUSE Pause {dontApplyOnFullScreen: boolean} Whether to apply to full screen video
ACTIONS.SET_VOLUME Set the volume {volume: number} Volume value from 0 to 1
ACTIONS.ENTER_FULLSCREEN Enter fullScreen void
ACTIONS.EXIT_FULLSCREEN Exit fullscreen void
ACTIONS.TIME_UPDATE Set current time {currentTime: number} Set the current playback time
ACTIONS.SHOW_CONTROLLER Show Controller void

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i griffith-message

      Weekly Downloads

      148

      Version

      1.30.0

      License

      MIT

      Unpacked Size

      36.6 kB

      Total Files

      10

      Last publish

      Collaborators

      • zhihu-fe