@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
38 lines (35 loc) • 1.36 kB
JavaScript
import { useCallback, useContext, useSyncExternalStore } from 'react';
import { PlayerContext } from '@theoplayer/react-native-ui';
import { PlayerEventType } from 'react-native-theoplayer';
const TEXT_TRACK_CHANGE_EVENTS = [PlayerEventType.LOADED_DATA, PlayerEventType.TEXT_TRACK_LIST];
/**
* Retain first chapters track encountered in the textTracks list.
*/
function filterChaptersTrack(textTracks) {
return textTracks && textTracks.find(isChaptersTrack);
}
/**
* Query whether a track is a valid chapters track.
*/
function isChaptersTrack(textTrack) {
return textTrack.kind === 'chapters';
}
/**
* Returns a chapters track, if available.
*
* This hook must only be used in a component mounted inside a {@link THEOplayerDefaultUi} or {@link UiContainer},
* or alternatively any other component that provides a {@link PlayerContext}.
*
* @group Hooks
*/
export const useChaptersTrack = () => {
const {
player
} = useContext(PlayerContext);
const subscribe = useCallback(callback => {
TEXT_TRACK_CHANGE_EVENTS.forEach(event => player?.addEventListener(event, callback));
return () => TEXT_TRACK_CHANGE_EVENTS.forEach(event => player?.removeEventListener(event, callback));
}, [player]);
return useSyncExternalStore(subscribe, () => filterChaptersTrack(player.textTracks));
};
//# sourceMappingURL=useChaptersTrack.js.map