Griffith-message NPM

griffith-message

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`