@remotion/player
Version:
React component for embedding a Remotion preview into your app
42 lines (41 loc) • 1.56 kB
JavaScript
import { useCallback, useMemo } from 'react';
import { cancellablePromise } from './cancellable-promise.js';
import { delay } from './delay.js';
import { useCancellablePromises } from './use-cancellable-promises.js';
const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
const api = useCancellablePromises();
const handleClick = useCallback(async (e) => {
// UnSupported double click on touch.(mobile)
if (e.nativeEvent.pointerType === 'touch') {
onClick(e);
return;
}
api.clearPendingPromises();
const waitForClick = cancellablePromise(delay(200));
api.appendPendingPromise(waitForClick);
try {
await waitForClick.promise;
api.removePendingPromise(waitForClick);
onClick(e);
}
catch (errorInfo) {
const info = errorInfo;
api.removePendingPromise(waitForClick);
if (!info.isCanceled) {
throw info.error;
}
}
}, [api, onClick]);
const handleDoubleClick = useCallback(() => {
api.clearPendingPromises();
onDoubleClick();
}, [api, onDoubleClick]);
const returnValue = useMemo(() => {
if (!doubleClickToFullscreen) {
return [onClick, () => undefined];
}
return [handleClick, handleDoubleClick];
}, [doubleClickToFullscreen, handleClick, handleDoubleClick, onClick]);
return returnValue;
};
export { useClickPreventionOnDoubleClick };