import { VideoPlayer } from '@uhg-abyss/mobile/ui/VideoPlayer';

Setup

VideoPlayer requires react-native-video to be install as a dependency. To start, follow the react-native-video installation directions.

Basic usage

VideoPlayer can be used with a single source prop. In this configuration it will use the native controls in iOS, and abyss specific controls for Android.

VideoPlayer is built around react-native-video, and thus has the ability to consume any prop available in react-native-video except fullscreen.

<VideoPlayer source={video} />

Customization

You can use the thumbnail prop to display a custom thumbnail before the video is started.

<VideoPlayer
  source={video}
  thumbnail={
    <Brandmark size={300} affiliate="uhc" variant="lockup" color="blue" />
  }
/>

Subtitles/CC

Be sure to add closed captions to your video via the textTrack prop.

Closed Captions are required for accessibility. You can provide multiple text tracks, and select the default one using the selectedTextTrack prop.

<VideoPlayer
  source={TestVid}
  videoTitle="Test Video"
  selectedTextTrack={{ type: 'index', value: 0 }}
  textTracks={[
    {
      title: 'english',
      language: 'en',
      uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
    },
  ]}
/>

Accessibility

• Closed Captions is required for all videos.
• Be sure to provide an videoTitle prop to the VideoPlayer component. This will be used as the A11y title for the video.
• It is recommended to provide a text transcript on the same page as the video player.

VideoPlayer Props

Prop Name	Type	Default	Description
onEnd	function	-	Callback ran on video end
onLoad	function	-	Callback ran on video load
source	uri	-	The video source
thumbnail	node	-	Override that will place a custom video thumbnail over the video
videoTitle	string	-	The A11y title for the video

VideoPlayer Classes

Class Name	Description
abyss-video-player-android-controls-back-button	VideoPlayer android controls skip back button
abyss-video-player-android-controls-back-button-icon	VideoPlayer android controls skip back button icon
abyss-video-player-android-controls-bottom-wrapper	VideoPlayer android controls bottom wrapper (time slider, CC, fullscreen & duration)
abyss-video-player-android-controls-center-wrapper	VideoPlayer android controls center wrapper (skip & play/pause buttons)
abyss-video-player-android-controls-close-button	VideoPlayer android controls close button
abyss-video-player-android-controls-close-button-icon	VideoPlayer android controls close button icon
abyss-video-player-android-controls-duration-current-text	VideoPlayer android controls current time text
abyss-video-player-android-controls-duration-remaining-text	VideoPlayer android controls duration left time wrapper
abyss-video-player-android-controls-forward-button	VideoPlayer android controls skip forward button
abyss-video-player-android-controls-forward-button-icon	VideoPlayer android controls skip forward button
abyss-video-player-android-controls-full-screen-button	VideoPlayer android controls full screen button
abyss-video-player-android-controls-full-screen-button-icon	VideoPlayer android controls full screen button icon
abyss-video-player-android-controls-overlay	VideoPlayer android controls overlay
abyss-video-player-android-controls-pause-button	VideoPlayer android controls play/pause button
abyss-video-player-android-controls-pause-button-icon	VideoPlayer android controls play/pause button icon
abyss-video-player-android-controls-slider-background	VideoPlayer android controls slider background
abyss-video-player-android-controls-slider-foreground	VideoPlayer android controls slider foreground
abyss-video-player-android-controls-slider-thumb	VideoPlayer android controls slider thumb
abyss-video-player-android-controls-subtitle-button	VideoPlayer android controls subtitle button
abyss-video-player-android-controls-subtitle-button-icon	VideoPlayer android controls subtitle button icon
abyss-video-player-android-controls-time-wrapper	VideoPlayer android controls duration time wrapper
abyss-video-player-duration-text	VideoPlayer duration text
abyss-video-player-duration-wrapper	VideoPlayer duration text wrapper
abyss-video-player-full-screen-wrapper	Wrapper for the full screen modal (Modal for android | View for iOS)
abyss-video-player-play-button	VideoPlayer Play button
abyss-video-player-play-button-icon	VideoPlayer Play button icon
abyss-video-player-root	VideoPlayer root
abyss-video-player-thumbnail-custom-wrapper	VideoPlayer custom thumbnail wrapper
abyss-video-player-thumbnail-duration-text	VideoPlayer thumbnail duration text
abyss-video-player-thumbnail-overlay	VideoPlayer thumbnail overlay
abyss-video-player-thumbnail-play-button	VideoPlayer thumbnail play/pause button
abyss-video-player-thumbnail-wrapper	VideoPlayer thumbnail wrapper
abyss-video-player-video	Video component
abyss-video-player-wrapper	Fullscreen wrapper for the video component

Search tokens

'VideoPlayer' Tokens

Token Name	Value
video-player.color.surface.overlay	rgba(50, 51, 52, .4)