Quick Brick Player Manager

The player manager allows to interact with the app's player, triggering some functionality, and subscribing to events

It is a singleton and can be imported from the utilities package

import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
info

Because of the way "singletons" are implemented in javascript, it is advised to always reference the @applicaster/zapp-react-native-utils package in peerDependencies inside your plugin's package.json, and | or define the usable version as a wildcard.

This will prevent your plugin from importing the playerManager in your plugin's own version of @applicaster/zapp-react-native-utils which would lead to unexpected behaviour and broken functionality

Interact with the player

playerManager.play

Will cause the player to play if the video is buffered and ready to play

playerManager.pause

Will pause playback

playerManager.seeking

playerManager.seeking(timestampInSecondsFromStart);

will cause the player to play from the given position;

playerManager.getDuration

returns the duration of the content played in seconds

playerManager.getState

returns the player state

type PlayerState = {
showControls: boolean;
currentTime: number; // in seconds
duration: number; // in seconds
paused: boolean;
playing: boolean;
subtitles: [string];
audioTracks: [string];
subtitlesLanguage: "Off" | string;
audioTrackLanguage?: string;
showNativeSubtitles: boolean;
rate: number; // 0 when not playing, 1 when playing at normal speed
};

playerManager.getCurrentTime

returns the item's current time position in seconds

playerManager.toggleSubtitles

enables selected subtitles if available

playerManager.setLanguage

sets the language for either the audio track or the subtitles

type PlayerLanguageType = {
type: "text" | "audio";
locale: string;
};
const playerLanguage: PlayerLanguageType = {
type: "text",
locale: "en",
};
playerManager.setLanguage(playerLanguage);

Player events

Subscribing to player events

in order to subscribe to player events, you can use the on and removeHandler methods of the player manager. These methods return the instance of the player manager, so you can chain subscription & unsubscription calls

import { useEffect } from "react";
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
function useCustomPlayerHook() {
const onLoadHandler = (...args) => {
/* ... */
};
const onProgressHandler = (...args) => {
/* ... */
};
const onCloseHandler = (...args) => {
/* ... */
};
useEffect(() => {
playerManager
.on("onload", onLoadHandler)
.on("progress", onProgressHandler)
.on("close", onCloseHandler);
return () => {
playerManager
.removeHandler("onload", onLoadHandler)
.removeHandler("progress", onProgressHandler)
.removeHandler("close", onCloseHandler);
};
}, []);
}

Here are the available events, and their associated payload:

loadstart

(onLoadStartEvent) => void should be invoked when the loading of the video starts, with the following payload:

onLoadStartEvent: {
isNetwork: Boolean,
type: string,
uri: string,
}

load

(onLoadEvent) => void should be invoked when the video is loaded and playback can start, with the following payload:

onLoadEvent: {
currentPosition: Float,
duration: Float,
naturalSize: { width: Float, height: Float, orientation: "portrait" | "landscape" },
audioTracks: [{ index: Int, title: String, language: String, type: String }],
textTracks: [{ index: Int, title: String, language: String, type: String }],
}

language prop is 2-letters ISO 639-1 type prop is the mime-type

error

(error) => void should be invoked when the playback is throwing an error. This will trigger the display of an error screen in the app

play

() => void invoked when the player starts playing

pause

() => void invoked when the player pauses

progress

(onVideoProgressEvent) => void should be invoked every second and provide the player's heartbeat, along with the following payload:

onVideoProgressEvent : {
currentTime: Float,
playableDuration: Float,
seekableDuration: Float,
}

seeked

(onSeekEvent) => void should be invoked when the seek operation completes

onSeekEvent : {
currentTime: Float,
seekTime: Float
}

ended

() => void should be called when the playback has reached the end of the video

onFullscreenPlayerWillPresent

() => void should invoked before setting the player to fullscreen

onFullscreenPlayerDidPresent

() => void should invoked after setting the player to fullscreen

onFullscreenPlayerWillDismiss

() => void should be invoked before dismissing fullscreen

onFullscreenPlayerDismiss

() => void should be invoked after dismissing fullscreen

ratechange

({ playbackRate: true }) => void should be invoked when the playback rate of the video changes