react-native-youtube-bridge
Version:
🎥 Easy-to-use YouTube player for React Native with cross-platform support
117 lines (112 loc) • 4.06 kB
JavaScript
;
import { useEffect, useRef, useState } from 'react';
import { INTERNAL_SET_MUTE_TRACKING, INTERNAL_SET_PROGRESS_INTERVAL } from "../modules/YoutubePlayer.js";
const DEFAULT_PROGRESS_INTERVAL = 1000;
/**
* @param player - The Youtube player instance.
* @param eventType - The type of event to subscribe to. `progress` event is not supported.
* @param defaultValue - The default value to return if the event is not triggered.
* @returns The event data.
* @example
* ```ts
* const player = useYouTubePlayer('AbZH7XWDW_k');
* const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1);
* ```
*/
/**
* @param player - The Youtube player instance.
* @param eventType - The type of event to subscribe to.
* @param callback - The callback to call when the event is triggered.
* @param deps - The dependencies to watch for changes.
* @returns void
* @example
* ```ts
* const player = useYouTubePlayer('AbZH7XWDW_k');
* useYouTubeEvent(player, 'ready', (playerInfo) => {
* console.log('Player is ready!');
* console.log('rates', playerInfo.availablePlaybackRates);
* console.log('vol', playerInfo.volume);
* console.log('muted', playerInfo.muted);
* });
* ```
*/
/**
* @param player - The Youtube player instance.
* @param eventType - `progress` event only.
* @param throttleMs - The throttle time in milliseconds (default 1000ms).
* @returns The event data.
* @example
* ```ts
* const player = useYouTubePlayer('AbZH7XWDW_k');
* const progress = useYouTubeEvent(player, 'progress', 1000);
* ```
*/
/**
* @param player - The Youtube player instance.
* @param eventType - The type of event to subscribe to.
* @param callbackOrThrottleOrDefaultValue - The callback to call when the event is triggered. If it is a number, it will be used as the throttle time in milliseconds for `progress` event.
* @param deps - The dependencies to watch for changes.
* @returns The event data. If it is a callback, it will return void.
*/
function useYouTubeEvent(player, eventType, callbackOrThrottleOrDefaultValue, deps) {
const isProgress = eventType === 'progress';
const isCallback = typeof callbackOrThrottleOrDefaultValue === 'function';
const getThrottleMs = () => {
if (!isProgress) {
return undefined;
}
return typeof callbackOrThrottleOrDefaultValue === 'number' ? callbackOrThrottleOrDefaultValue : DEFAULT_PROGRESS_INTERVAL;
};
const getDefaultValue = () => {
if (isCallback || isProgress) {
return null;
}
return callbackOrThrottleOrDefaultValue ?? null;
};
const throttleMs = getThrottleMs();
const defaultValue = getDefaultValue();
const callbackRef = useRef(isCallback ? callbackOrThrottleOrDefaultValue : null);
const [data, setData] = useState(defaultValue);
useEffect(() => {
if (isCallback) {
callbackRef.current = callbackOrThrottleOrDefaultValue;
}
// oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
}, [callbackOrThrottleOrDefaultValue, isCallback, ...(deps ?? [])]);
useEffect(() => {
if (typeof throttleMs === 'number' && player) {
player[INTERNAL_SET_PROGRESS_INTERVAL](throttleMs);
}
}, [throttleMs, player]);
useEffect(() => {
if (!player || eventType !== 'muteChange') {
return;
}
player[INTERNAL_SET_MUTE_TRACKING](true);
return () => {
player[INTERNAL_SET_MUTE_TRACKING](false);
};
}, [player, eventType]);
useEffect(() => {
if (!player) {
return;
}
const unsubscribe = player.subscribe(eventType, eventData => {
if (isCallback && callbackRef.current) {
callbackRef.current(eventData);
return;
}
if (!isCallback) {
setData(eventData);
}
});
return () => {
setData(defaultValue ?? null);
unsubscribe();
};
// oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
}, [player, eventType, isCallback]);
return isCallback ? undefined : data;
}
export default useYouTubeEvent;
//# sourceMappingURL=useYouTubeEvent.js.map