Hooks
Settings Hooks
useSettings()
A hook for managing video settings such as videoTrack, audio tracks, and subtitle tracks, and controlling the visibility of a settings menu.
Usage
import { useSettings } from 'react-native-video-toolkit';
export const MyComponent = () => {
const { isSettingsMenuVisible, setSettingsMenuVisible } = useSettings();
// ...
};Returns
| Value | Type | Description |
|---|---|---|
videoTrack | CustomVideoTrack | VideoTrack | null | The current video quality. null is Auto (adaptive), the default with the player's own tracks. |
videoTracks | (CustomVideoTrack | VideoTrack)[] | The list of available video qualities. |
setVideoTrack | (newVideoTrack: CustomVideoTrack | VideoTrack | null) => void | A function to set the current video quality. |
setAvailableVideoTracks | (videoTracks: (CustomVideoTrack | VideoTrack)[]) => void | A function to set the list of available video qualities. |
audioTrack | AudioTrack | null | The current audio track setting. |
audioTracks | AudioTrack[] | The list of available audio tracks. |
setAudioTrack | (newAudioTrack: AudioTrack | null) => void | A function to set the current audio track. |
setAvailableAudioTracks | (audioTracks: AudioTrack[]) => void | A function to set the list of available audio tracks. |
textTrack | TextTrack | null | The current subtitle track setting. |
textTracks | TextTrack[] | The list of available subtitle tracks. |
setTextTrack | (newTextTrack: TextTrack | null) => void | A function to set the current subtitle track. |
setAvailableTextTracks | (textTracks: TextTrack[]) => void | A function to set the list of available subtitle tracks. |
isSettingsMenuVisible | boolean | A boolean indicating whether the settings menu is currently visible. |
openSettings | () => void | A function to explicitly open the settings menu. |
closeSettings | () => void | A function to explicitly close the settings menu. |
setSettingsMenuVisible | (visible: boolean) => void | A function to explicitly set the visibility of the settings menu. |
When a new source loads, the viewer's choices carry over the way the next episode of a show keeps them: the audio and subtitle tracks stay on the same language when the new source has it, subtitles stay off if they were off, and a picked quality stays when the new source has the same height. Otherwise the first audio and subtitle tracks and Auto quality apply. Tracks never carry over by index, since the same index can be a different language in another source.
Example
import { useSettings, VideoPlayer } from 'react-native-video-toolkit';
import { GestureDetector } from 'react-native-gesture-handler';
import React from 'react';
import { View, Button } from 'react-native';
const MySettingsButton = () => {
const { openSettings } = useSettings();
const handleQualityChange = () => {
// Example: set quality to the first available track
if (videoTracks.length > 0) {
setVideoTrack(videoTracks[0]);
}
};
return <BaseIconButton IconComponent={SettingsIcon} onTap={openSettings} />;
};
export default MySettingsButton;