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, toggleSettingsMenu } = useSettings();
  // ...
};

Returns

Value	Type	Description
videoTrack	VideoTrack | null	The current video quality setting.
videoTracks	VideoTrack[]	The list of available video qualities.
setVideoTrack	(newVideoTrack: VideoTrack | null) => void	A function to set the video quality.
getVideoTracks	(videoTracks: VideoTrack[]) => void	A function to get the 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 audio track.
getAudioTracks	(audioTracks: AudioTrack[]) => void	A function to get the 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 subtitle track.
getTextTracks	(textTracks: TextTrack[]) => void	A function to get the 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.
toggleSettingsMenu	() => void	A function to toggle the visibility of the settings menu.
settingsTapGesture	Gesture.Tap()	A gesture object for handling single taps to toggle the settings menu. This can be used with a GestureDetector component.

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 { isSettingsMenuVisible, toggleSettingsMenu, settingsTapGesture, setVideoTrack, videoTracks } = useSettings();

  const handleQualityChange = () => {
    // Example: set quality to the first available track
    if (videoTracks.length > 0) {
      setVideoTrack(videoTracks[0]);
    }
  };

  return (
    <GestureDetector gesture={settingsTapGesture}>
      <GearIcon />
    </GestureDetector>
  );
};

export default MySettingsButton;