@twick/live-player - v0.14.0
Table of contents
Functions
Variables
Functions
LivePlayer
▸ LivePlayer(props): Element
LivePlayer is a React component that wraps around the @twick/player-react player. Supports dynamic project variables, external control for playback, time seeking, volume and quality adjustment, and lifecycle callbacks.
Parameters
| Name | Type | Description |
|---|---|---|
props | LivePlayerProps | Props to control the player and respond to its state |
Returns
Element
A configured player UI component
Example
<LivePlayer
playing={true}
projectData={{ text: "Hello World" }}
videoSize={{ width: 720, height: 1280 }}
onTimeUpdate={(time) => console.log('Current time:', time)}
onPlayerReady={(player) => console.log('Player ready:', player)}
/>
Defined in
LivePlayerProvider
▸ LivePlayerProvider(props): Element
Provider component for the Live Player context. Manages the global state for live player instances including playback state, timing, and volume controls. Automatically handles seek time updates when pausing to maintain playback position.
Parameters
| Name | Type | Description |
|---|---|---|
props | Object | Component props containing children to wrap |
props.children | ReactNode | - |
Returns
Element
Context provider with live player state management
Example
<LivePlayerProvider>
<YourApp />
</LivePlayerProvider>
Defined in
context/live-player-context.tsx:59
useLivePlayerContext
▸ useLivePlayerContext(): LivePlayerContextType
Hook to access the Live Player context. Provides access to player state, timing controls, and volume management. Must be used within a LivePlayerProvider component.
Returns
LivePlayerContextType
LivePlayerContextType object with all player state and controls
Throws
Error if used outside of LivePlayerProvider
Example
const {
playerState,
currentTime,
setPlayerState,
setCurrentTime
} = useLivePlayerContext();
// Control playback
setPlayerState(PLAYER_STATE.PLAYING);
// Update current time
setCurrentTime(30.5);
Defined in
context/live-player-context.tsx:112
getBaseProject
▸ getBaseProject(videoSize, playerId): Object
Generates a base project structure for the Twick Live Player. Creates a minimal project configuration object with the specified video dimensions. Used as a starting point for building or loading video compositions.
Parameters
| Name | Type | Description |
|---|---|---|
videoSize | Object | Object containing the width and height of the video |
videoSize.width | number | - |
videoSize.height | number | - |
playerId | string | Unique identifier for the player instance |
Returns
Object
Base project object with the specified video dimensions
| Name | Type |
|---|---|
playerId | string |
input | { properties: { width: number = videoSize.width; height: number = videoSize.height } } |
input.properties | { width: number = videoSize.width; height: number = videoSize.height } |
input.properties.width | number |
input.properties.height | number |
Example
const project = getBaseProject({ width: 720, height: 1280 }, "player-123");
// project = { playerId: "player-123", input: { properties: { width: 720, height: 1280 } } }
Defined in
generateId
▸ generateId(): string
Generates a unique identifier for player instances. Creates a random string using base36 encoding for use as player IDs and other unique identifiers.
Returns
string
A unique identifier string
Example
const id = generateId();
// id = "abc123def456"
Defined in
Variables
PLAYER_STATE
• Const PLAYER_STATE: Object
Player state constants for the Live Player. Defines the different states that a player can be in during playback.
Example
import { PLAYER_STATE } from '@twick/live-player';
if (playerState === PLAYER_STATE.PLAYING) {
console.log('Player is currently playing');
}
Type declaration
| Name | Type | Description |
|---|---|---|
REFRESH | "Refresh" | Player is refreshing/reloading content |
PLAYING | "Playing" | Player is actively playing content |
PAUSED | "Paused" | Player is paused |