Web SDK (incl. UX)

Event System

6min

The NativeWaves SDK uses events to communicate between the playback business logic and the playback UI. The custom events are emitted as window events, so they can be accessed from the outside.
webToNative => Events being dispatched by the playback system
nativeToWeb => Events emitted into the playback system
Here a quick example on how to emit and listen for events:
TypeScript
// listening
window.addEventListener('webToNative',(event) => {
  console.log('nativewaves event', event.detail)
})

// emitting
const customEvent = new CustomEvent('nativeToWeb', {
  detail: {
    type: 'SEEK_REQUEST',
    payload: {
      value: 10 // seek to 10s in the currently playing video
    }
  },
})
window.dispatchEvent(customEvent)

// listening
window.addEventListener('webToNative',(event) => {
  console.log('nativewaves event', event.detail)
})

// emitting
const customEvent = new CustomEvent('nativeToWeb', {
  detail: {
    type: 'SEEK_REQUEST',
    payload: {
      value: 10 // seek to 10s in the currently playing video
    }
  },
})
window.dispatchEvent(customEvent)
﻿
Events
Here you can find an overview of all available events that can be sent using the event system, separated into three event categories:
Player Events
Experience Events
Sync Events
Player Events
This category bundles all events related to video and audio playback on a player level, e.g. play, pause, seek, ....
type
payload
description
INIT
volume?: number
muted?: boolean
duration?: number
isPlaying?: boolean
isLive?: boolean
isUsingSync?: boolean
currentTime?: number
videoEntityId?: string
audioEntityId?: string
initialize player data
PLAY
-
Start video playback
PAUSE
-
Pause video playback
REPLAY
-
Start video playback from the beginning
PLAYER_UPDATE
currentTime?: number
duration?: number
isPlaying?: boolean
isBuffering?: boolean
isSeeking?: boolean
isLive?: boolean
volume?: number
muted?: boolean
src?: string
fullscreen?: boolean
notify ui about player data changes
PLAYER_UPDATE_REQUEST
-
forces player to send it's current state
TIME_UPDATE
currentTime: number
duration: number
notify web about the most recent currentTime and duration
SEEK
value: number
notify about seek
SEEK_SUCCESS
accurate?: boolean
counter?: number
duration?: number
delay?: number
isLive?: boolean
isSyncActive?: boolean
currentTime: number
notify about successful seek
SEEK_FAILED
error: any
notify about seek failure
JUMP
value: number
notify about jump
JUMP_SUCCESS
accurate?: boolean
counter?: number
duration?: number
delay?: number
isLive?: boolean
currentTime: number
notify about successful jump
JUMP_FAILED
error: any
notify about jump failure
UNMUTE
-
notify about unmute
MUTE
-
notify about mute
VOLUME_SET
-
notify volume set
READY
-
notify about ready
BUFFERING_START
-
notify about buffering start
BUFFERING_END
-
notify about buffering end
THROW_ERROR
error: any
notify about error
FULLSCREEN_REQUEST
-
request fullscreen
FULLSCREEN_EXIT
-
exit fullscreen
Experience Events
This category bundles events related to the manifest playback like setting the manifest id, changing entities, ....
type
payload
description
PLAYBACK_UPDATE
currentTime?: number
duration?: number
isPlaying?: boolean
isLive?: boolean
isChangingEntity?: boolean
hasVideoContent?: boolean
hasEnded?: boolean
volume?: number
muted?: boolean
notify ui about playback data changes
PROGRAM_ID_SET
programId: string
set program
PROGRAM_LOADED
-
called after program successfully loaded
PROGRAM_LOADING_FAILED
error: any
called after failed program load
ENTITY_VIDEO_SET
entityId: string

prevEntityId?: string 
set entity
(prevEntityId is deprecated. not used any more)
ENTITY_VIDEO_SET_SUCCESS
entityId: string
called after successfully entity change
ENTITY_VIDEO_SET_FAILED
error: any
called after failed entity change
ENTITY_AUDIO_SET
entityId: string
set audio entity
ENTITY_AUDIO_SET_SUCCESS
entityId: string
called after successfully audio entity change
ENTITY_AUDIO_SET_FAILED
error: any
called after failed audio entity change
LIVE_GO
-
called after liveGo
SYNC_GO
-
called after syncGo
EXIT_WEBVIEW
-
tells mobile to close webview
Sync Events
This category bundles all events that are related to the NativeWaves second screen sync like enabling/disabling the sync, starting the sync, stoping the sync, ....
type
payload
description
SYNC_ENABLE
-
used to enable the sync (setting the enabled flag to true)
SYNC_DISABLE
-
used to disable the sync (setting the enabled flag to false)
SYNC_REQUEST
showIntroAgain?: boolean
This will start a sync task on native
SYNC_SUCCESS
currentTime: number
ts?: number
called after Sync was successful
currentTime returns the currentPosition of the new syncTimeline, in seconds
SYNC_FAILED
error: any
called after Sync has failed
SYNC_STOP
-
This will stop all sync tasks on native and clear all active syncTimelines.
If a resync is stopped, native will stop all sync tasks but keep all active syncTimelines as is
SYNC_DISMISS_ERROR
-
dismiss sync error
﻿

type	payload	description
INIT	volume?: number muted?: boolean duration?: number isPlaying?: boolean isLive?: boolean isUsingSync?: boolean currentTime?: number videoEntityId?: string audioEntityId?: string	initialize player data
PLAY	-	Start video playback
PAUSE	-	Pause video playback
REPLAY	-	Start video playback from the beginning
PLAYER_UPDATE	currentTime?: number duration?: number isPlaying?: boolean isBuffering?: boolean isSeeking?: boolean isLive?: boolean volume?: number muted?: boolean src?: string fullscreen?: boolean	notify ui about player data changes
PLAYER_UPDATE_REQUEST	-	forces player to send it's current state
TIME_UPDATE	currentTime: number duration: number	notify web about the most recent currentTime and duration
SEEK	value: number	notify about seek
SEEK_SUCCESS	accurate?: boolean counter?: number duration?: number delay?: number isLive?: boolean isSyncActive?: boolean currentTime: number	notify about successful seek
SEEK_FAILED	error: any	notify about seek failure
JUMP	value: number	notify about jump
JUMP_SUCCESS	accurate?: boolean counter?: number duration?: number delay?: number isLive?: boolean currentTime: number	notify about successful jump
JUMP_FAILED	error: any	notify about jump failure
UNMUTE	-	notify about unmute
MUTE	-	notify about mute
VOLUME_SET	-	notify volume set
READY	-	notify about ready
BUFFERING_START	-	notify about buffering start
BUFFERING_END	-	notify about buffering end
THROW_ERROR	error: any	notify about error
FULLSCREEN_REQUEST	-	request fullscreen
FULLSCREEN_EXIT	-	exit fullscreen

type	payload	description
PLAYBACK_UPDATE	currentTime?: number duration?: number isPlaying?: boolean isLive?: boolean isChangingEntity?: boolean hasVideoContent?: boolean hasEnded?: boolean volume?: number muted?: boolean	notify ui about playback data changes
PROGRAM_ID_SET	programId: string	set program
PROGRAM_LOADED	-	called after program successfully loaded
PROGRAM_LOADING_FAILED	error: any	called after failed program load
ENTITY_VIDEO_SET	entityId: string prevEntityId?: string	set entity (prevEntityId is deprecated. not used any more)
ENTITY_VIDEO_SET_SUCCESS	entityId: string	called after successfully entity change
ENTITY_VIDEO_SET_FAILED	error: any	called after failed entity change
ENTITY_AUDIO_SET	entityId: string	set audio entity
ENTITY_AUDIO_SET_SUCCESS	entityId: string	called after successfully audio entity change
ENTITY_AUDIO_SET_FAILED	error: any	called after failed audio entity change
LIVE_GO	-	called after liveGo
SYNC_GO	-	called after syncGo
EXIT_WEBVIEW	-	tells mobile to close webview

type	payload	description
SYNC_ENABLE	-	used to enable the sync (setting the enabled flag to true)
SYNC_DISABLE	-	used to disable the sync (setting the enabled flag to false)
SYNC_REQUEST	showIntroAgain?: boolean	This will start a sync task on native
SYNC_SUCCESS	currentTime: number ts?: number	called after Sync was successful currentTime returns the currentPosition of the new syncTimeline, in seconds
SYNC_FAILED	error: any	called after Sync has failed
SYNC_STOP	-	This will stop all sync tasks on native and clear all active syncTimelines. If a resync is stopped, native will stop all sync tasks but keep all active syncTimelines as is
SYNC_DISMISS_ERROR	-	dismiss sync error

Getting Started

Guides & Tutorials