Skip to content

Latest commit

 

History

History
 
 

griffith-message

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README-zh-Hans.md
README-zh-Hans.md
 
 
README.md
README.md
 
 
jest.config.js
jest.config.js
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

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