VideoPlayer

Custom video player with play controls, progress, volume, fullscreen, and optional keyboard shortcuts.

Overview

VideoPlayer is the shared-ui video playback component for embedded video content.

It wraps react-player with a custom control surface instead of relying on the browser's default video controls.

import { VideoPlayer } from "@fsai/shared-ui";

<VideoPlayer src={videoUrl} />;

Prop	Type	Default	Description
`src`	`string`	—	Required video source URL.
`onVideoProgress`	`(secondsPlayed: number, totalDuration: number) => void`	—	Called during playback progress updates.
`withKeyboardShortcuts`	`boolean`	`true`	Enables keyboard shortcuts when the player is focused.
`controlled`	`boolean`	`true`	Shows the custom controls and uses controlled-style playback behavior.
`className`	`string`	—	Additional root classes.
`fitToSourceAspectRatio`	`boolean`	`false`	Sizes the player to the video's actual aspect ratio when metadata is available.
`maxRenderedHeight`	`string`	—	Optional max height used with `fitToSourceAspectRatio`.

When controlled is enabled, the player includes:

Supported keyboard shortcuts:

When controlled={false}, the custom control bar is removed and the player behaves more like an ambient or looping media surface.

Representative usages:

Pattern	Path	Notes
Asset file viewer	`fsai/packages/shared-ui/src/modules/assets/components/UnifiedFileViewer/UnifiedFileViewer.tsx`	Uses `VideoPlayer` for fullscreen playback of uploaded video assets.
Learning course playback	`fsai/packages/shared-ui/src/modules/learning/components/VideoPlayer.tsx`	Wraps the shared player with progress tracking and completion logic.
Applicant portal step video	`fsai/packages/shared-ui/src/modules/applicantPortal/components/PortalVideoStep/PortalVideoStep.tsx`	Uses progress callbacks plus aspect-ratio fitting for guided portal steps.

Do use VideoPlayer when you want a consistent in-app video playback experience
Do use onVideoProgress if the screen needs playback progress for analytics or completion tracking
Do use fitToSourceAspectRatio when vertical or non-16:9 video should preserve its natural shape
Don't treat this as a generic iframe wrapper for arbitrary embeds without validating the source first