@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
57 lines • 2.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useMediaProgressBar = void 0;
const react_1 = require("react");
const keyboard_utility_1 = require("../../../utils/keyboard/keyboard.utility");
const useMediaProgressBar = ({ playingExternal, circular, currentBar, barsNum, onBarChange, onFinish, onBarClick, onBarKeyDown, }) => {
//playing prop is managed between the user and the component itself
const [playing, setplaying] = (0, react_1.useState)(playingExternal);
const barRef = (0, react_1.useRef)(null);
const progressBarRef = (0, react_1.useRef)(null);
//We are checking if user has changed "playing" prop
(0, react_1.useEffect)(() => {
setplaying(playingExternal);
}, [playingExternal]);
//function called when a bar ends
const handleBarEnd = (0, react_1.useCallback)(() => {
if (circular || currentBar !== barsNum - 1) {
onBarChange?.(currentBar + 1);
}
else {
//If it is the last one
const playingFinal = false;
setplaying(playingFinal);
onFinish?.(playingFinal);
}
}, [currentBar, barsNum, onBarChange]);
const handleClickBar = (index, event) => {
onBarChange?.(index, event);
onBarClick?.(index, event);
};
const handleKeyDownBar = (index, event) => {
if ((0, keyboard_utility_1.isKeySpacePressed)(event.key) || (0, keyboard_utility_1.isKeyEnterPressed)(event.key)) {
event.preventDefault();
onBarChange?.(index, event);
onBarKeyDown?.(index, event);
}
};
(0, react_1.useEffect)(() => {
//Call handleBarEnd when animation ends
if (progressBarRef.current && playing) {
progressBarRef.current.addEventListener('animationend', handleBarEnd);
}
return () => {
progressBarRef.current?.removeEventListener('animationend', handleBarEnd);
};
}, [playing, handleBarEnd]);
return {
playing,
barRef,
progressBarRef,
handleBarEnd,
handleClickBar,
handleKeyDownBar,
};
};
exports.useMediaProgressBar = useMediaProgressBar;
//# sourceMappingURL=useMediaProgressBar.js.map