Files
2026-03-25 17:28:35 +01:00

57 lines
2.0 KiB
JavaScript

"use strict";
import { useRef } from 'react';
import { isVideoPlayerSource } from "../utils/sourceUtils.js";
import { VideoPlayer } from '../VideoPlayer';
import { useManagedInstance } from "./useManagedInstance.js";
const sourceEqual = (a, b) => {
if (isVideoPlayerSource(a) && isVideoPlayerSource(b)) {
return a.equals(b);
}
return JSON.stringify(a) === JSON.stringify(b);
};
/**
* Creates a `VideoPlayer` instance and manages its lifecycle.
*
* if `initializeOnCreation` is true (default), the `setup` function will be called when the player is started loading source.
* if `initializeOnCreation` is false, the `setup` function will be called when the player is created. changes made to player made before initializing will be overwritten when initializing.
*
* @param source - The source of the video to play
* @param setup - A function to setup the player
* @returns The `VideoPlayer` instance
*/
export const useVideoPlayer = (source, setup) => {
const setupCalled = useRef(false);
return useManagedInstance({
factory: () => {
const player = new VideoPlayer(source);
if (setup === undefined) {
return player;
}
if (player.source.config.initializeOnCreation !== false) {
// if source is small video, it can happen that onLoadStart is called before we set event from JS
// Thats why we adding event listener and calling setup once if player is loading or ready to play
// That way we ensure that setup is always called
const callSetupOnce = () => {
if (!setupCalled.current) {
setupCalled.current = true;
setup?.(player);
}
};
player.addEventListener('onLoadStart', callSetupOnce);
player.addEventListener('onStatusChange', callSetupOnce);
} else {
setup?.(player);
}
return player;
},
cleanup: player => {
player.__destroy();
setupCalled.current = false;
},
dependenciesEqualFn: sourceEqual
}, [JSON.stringify(source)]);
};
//# sourceMappingURL=useVideoPlayer.js.map