init commit

This commit is contained in:
Carlos
2026-02-21 10:33:18 +01:00
parent c863a943ed
commit 9d955bf338
9512 changed files with 2015317 additions and 1305 deletions

View File

@@ -0,0 +1,9 @@
import type { StandardLonghandProperties } from 'csstype';
import type { Size } from './use-element-size.js';
export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
currentSize: Size | null;
width: StandardLonghandProperties["width"] | undefined;
height: StandardLonghandProperties["height"] | undefined;
compositionWidth: number;
compositionHeight: number;
}) => React.CSSProperties;

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.calculatePlayerSize = void 0;
const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, compositionHeight, }) => {
if (width !== undefined && height === undefined) {
return {
aspectRatio: [compositionWidth, compositionHeight].join('/'),
};
}
// Opposite: If has height specified, evaluate the height and specify a default width.
if (height !== undefined && width === undefined) {
return {
// Aspect ratio CSS prop will work
aspectRatio: [compositionWidth, compositionHeight].join('/'),
};
}
if (!currentSize) {
return {
width: compositionWidth,
height: compositionHeight,
};
}
return {
width: compositionWidth,
height: compositionHeight,
};
};
exports.calculatePlayerSize = calculatePlayerSize;

View File

@@ -0,0 +1,5 @@
export type CancellablePromise = {
promise: Promise<unknown>;
cancel: () => void;
};
export declare const cancellablePromise: (promise: Promise<unknown>) => CancellablePromise;

View File

@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cancellablePromise = void 0;
const cancellablePromise = (promise) => {
let isCanceled = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise
.then((value) => {
if (isCanceled) {
reject({ isCanceled, value });
return;
}
resolve(value);
})
.catch((error) => {
reject({ isCanceled, error });
});
});
return {
promise: wrappedPromise,
cancel: () => {
isCanceled = true;
},
};
};
exports.cancellablePromise = cancellablePromise;

View File

@@ -0,0 +1 @@
export declare const delay: (n: number) => Promise<unknown>;

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.delay = void 0;
/* eslint-disable no-promise-executor-return */
const delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
exports.delay = delay;

View File

@@ -0,0 +1 @@
export declare const IS_NODE: boolean;

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IS_NODE = void 0;
exports.IS_NODE = typeof document === 'undefined';

View File

@@ -0,0 +1,10 @@
import type { AnyZodObject, z } from 'zod';
export type PropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
inputProps?: z.input<Schema> & Props;
} : {
inputProps: Props;
} : {} extends Props ? {
inputProps: z.input<Schema>;
} : {
inputProps: z.input<Schema> & Props;
};

View File

@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -0,0 +1,7 @@
import type { CancellablePromise } from './cancellable-promise.js';
declare const useCancellablePromises: () => {
appendPendingPromise: (promise: CancellablePromise) => void;
removePendingPromise: (promise: CancellablePromise) => void;
clearPendingPromises: () => void[];
};
export { useCancellablePromises };

View File

@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCancellablePromises = void 0;
const react_1 = require("react");
const useCancellablePromises = () => {
const pendingPromises = (0, react_1.useRef)([]);
const appendPendingPromise = (0, react_1.useCallback)((promise) => {
pendingPromises.current = [...pendingPromises.current, promise];
}, []);
const removePendingPromise = (0, react_1.useCallback)((promise) => {
pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
}, []);
const clearPendingPromises = (0, react_1.useCallback)(() => pendingPromises.current.map((p) => p.cancel()), []);
const api = (0, react_1.useMemo)(() => ({
appendPendingPromise,
removePendingPromise,
clearPendingPromises,
}), [appendPendingPromise, clearPendingPromises, removePendingPromise]);
return api;
};
exports.useCancellablePromises = useCancellablePromises;

View File

@@ -0,0 +1,7 @@
import type { SyntheticEvent } from 'react';
type ReturnVal = {
handlePointerDown: (e: SyntheticEvent<Element, PointerEvent> | PointerEvent) => void;
handleDoubleClick: () => void;
};
declare const useClickPreventionOnDoubleClick: (onClick: (e: PointerEvent | SyntheticEvent<Element, PointerEvent>) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => ReturnVal;
export { useClickPreventionOnDoubleClick };

View File

@@ -0,0 +1,53 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useClickPreventionOnDoubleClick = void 0;
const react_1 = require("react");
const cancellable_promise_js_1 = require("./cancellable-promise.js");
const delay_js_1 = require("./delay.js");
const use_cancellable_promises_js_1 = require("./use-cancellable-promises.js");
const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
const api = (0, use_cancellable_promises_js_1.useCancellablePromises)();
const handleClick = (0, react_1.useCallback)(async (e) => {
// UnSupported double click on touch.(mobile)
if (e instanceof PointerEvent
? e.pointerType === 'touch'
: e.nativeEvent.pointerType === 'touch') {
onClick(e);
return;
}
api.clearPendingPromises();
const waitForClick = (0, cancellable_promise_js_1.cancellablePromise)((0, delay_js_1.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 handlePointerDown = (0, react_1.useCallback)(() => {
document.addEventListener('pointerup', (newEvt) => {
handleClick(newEvt);
}, {
once: true,
});
}, [handleClick]);
const handleDoubleClick = (0, react_1.useCallback)(() => {
api.clearPendingPromises();
onDoubleClick();
}, [api, onDoubleClick]);
const returnValue = (0, react_1.useMemo)(() => {
if (!doubleClickToFullscreen) {
return { handlePointerDown: onClick, handleDoubleClick: () => undefined };
}
return { handlePointerDown, handleDoubleClick };
}, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
return returnValue;
};
exports.useClickPreventionOnDoubleClick = useClickPreventionOnDoubleClick;

View File

@@ -0,0 +1,5 @@
export default function useComponentVisible(initialIsVisible: boolean): {
ref: import("react").RefObject<HTMLDivElement | null>;
isComponentVisible: boolean;
setIsComponentVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
};

View File

@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = useComponentVisible;
const react_1 = require("react");
// hook to hide a popup/modal when clicked outside
function useComponentVisible(initialIsVisible) {
const [isComponentVisible, setIsComponentVisible] = (0, react_1.useState)(initialIsVisible);
const ref = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
document.addEventListener('pointerup', handleClickOutside, true);
return () => {
document.removeEventListener('pointerup', handleClickOutside, true);
};
}, []);
return { ref, isComponentVisible, setIsComponentVisible };
}

View File

@@ -0,0 +1,16 @@
export type Size = {
width: number;
height: number;
left: number;
top: number;
windowSize: {
width: number;
height: number;
};
refresh: () => void;
};
export declare const updateAllElementsSizes: () => void;
export declare const useElementSize: (ref: React.RefObject<HTMLElement | null>, options: {
triggerOnWindowResize: boolean;
shouldApplyCssTransforms: boolean;
}) => Size | null;

View File

@@ -0,0 +1,144 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useElementSize = exports.updateAllElementsSizes = void 0;
const react_1 = require("react");
let elementSizeHooks = [];
const updateAllElementsSizes = () => {
for (const listener of elementSizeHooks) {
listener();
}
};
exports.updateAllElementsSizes = updateAllElementsSizes;
const useElementSize = (ref, options) => {
const [size, setSize] = (0, react_1.useState)(() => {
if (!ref.current) {
return null;
}
const rect = ref.current.getClientRects();
if (!rect[0]) {
return null;
}
return {
width: rect[0].width,
height: rect[0].height,
left: rect[0].x,
top: rect[0].y,
windowSize: {
height: window.innerHeight,
width: window.innerWidth,
},
};
});
const observer = (0, react_1.useMemo)(() => {
if (typeof ResizeObserver === 'undefined') {
return null;
}
return new ResizeObserver((entries) => {
// The contentRect returns the width without any `scale()`'s being applied. The height is wrong
const { contentRect, target } = entries[0];
// The clientRect returns the size with `scale()` being applied.
const newSize = target.getClientRects();
if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
setSize(null);
return;
}
const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
const width = options.shouldApplyCssTransforms || probableCssParentScale === 0
? newSize[0].width
: newSize[0].width * (1 / probableCssParentScale);
const height = options.shouldApplyCssTransforms || probableCssParentScale === 0
? newSize[0].height
: newSize[0].height * (1 / probableCssParentScale);
setSize((prevState) => {
const isSame = prevState &&
prevState.width === width &&
prevState.height === height &&
prevState.left === newSize[0].x &&
prevState.top === newSize[0].y &&
prevState.windowSize.height === window.innerHeight &&
prevState.windowSize.width === window.innerWidth;
if (isSame) {
return prevState;
}
return {
width,
height,
left: newSize[0].x,
top: newSize[0].y,
windowSize: {
height: window.innerHeight,
width: window.innerWidth,
},
};
});
});
}, [options.shouldApplyCssTransforms]);
const updateSize = (0, react_1.useCallback)(() => {
if (!ref.current) {
return;
}
const rect = ref.current.getClientRects();
if (!rect[0]) {
setSize(null);
return;
}
setSize((prevState) => {
const isSame = prevState &&
prevState.width === rect[0].width &&
prevState.height === rect[0].height &&
prevState.left === rect[0].x &&
prevState.top === rect[0].y &&
prevState.windowSize.height === window.innerHeight &&
prevState.windowSize.width === window.innerWidth;
if (isSame) {
return prevState;
}
return {
width: rect[0].width,
height: rect[0].height,
left: rect[0].x,
top: rect[0].y,
windowSize: {
height: window.innerHeight,
width: window.innerWidth,
},
};
});
}, [ref]);
(0, react_1.useEffect)(() => {
if (!observer) {
return;
}
const { current } = ref;
if (current) {
observer.observe(current);
}
return () => {
if (current) {
observer.unobserve(current);
}
};
}, [observer, ref, updateSize]);
(0, react_1.useEffect)(() => {
if (!options.triggerOnWindowResize) {
return;
}
window.addEventListener('resize', updateSize);
return () => {
window.removeEventListener('resize', updateSize);
};
}, [options.triggerOnWindowResize, updateSize]);
(0, react_1.useEffect)(() => {
elementSizeHooks.push(updateSize);
return () => {
elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
};
}, [updateSize]);
return (0, react_1.useMemo)(() => {
if (!size) {
return null;
}
return { ...size, refresh: updateSize };
}, [size, updateSize]);
};
exports.useElementSize = useElementSize;

View File

@@ -0,0 +1,6 @@
export declare const validateSingleFrame: (frame: unknown, variableName: string) => number | null;
export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
inFrame: unknown;
outFrame: unknown;
durationInFrames: number;
}) => void;

View File

@@ -0,0 +1,54 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.validateInOutFrames = exports.validateSingleFrame = void 0;
const validateSingleFrame = (frame, variableName) => {
if (typeof frame === 'undefined' || frame === null) {
return frame !== null && frame !== void 0 ? frame : null;
}
if (typeof frame !== 'number') {
throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
}
if (Number.isNaN(frame)) {
throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
}
if (!Number.isFinite(frame)) {
throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
}
if (frame % 1 !== 0) {
throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
}
return frame;
};
exports.validateSingleFrame = validateSingleFrame;
const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
const validatedOutFrame = (0, exports.validateSingleFrame)(outFrame, 'outFrame');
if (validatedInFrame === null && validatedOutFrame === null) {
return;
}
// Must not be over the duration
if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
validatedInFrame);
}
if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
validatedOutFrame);
}
// Must not be under 0
if (validatedInFrame !== null && validatedInFrame < 0) {
throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
}
if (validatedOutFrame !== null && validatedOutFrame <= 0) {
throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
}
if (validatedOutFrame !== null &&
validatedInFrame !== null &&
validatedOutFrame <= validatedInFrame) {
throw new Error('outFrame must be greater than inFrame, but is ' +
validatedOutFrame +
' <= ' +
validatedInFrame);
}
};
exports.validateInOutFrames = validateInOutFrames;

View File

@@ -0,0 +1,4 @@
export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
initialFrame: unknown;
durationInFrames: unknown;
}) => void;

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.validateInitialFrame = void 0;
const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
if (typeof durationInFrames !== 'number') {
throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
}
if (typeof initialFrame === 'undefined') {
return;
}
if (typeof initialFrame !== 'number') {
throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
}
if (Number.isNaN(initialFrame)) {
throw new Error(`\`initialFrame\` must be a number, but is NaN`);
}
if (!Number.isFinite(initialFrame)) {
throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
}
if (initialFrame % 1 !== 0) {
throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
}
if (initialFrame > durationInFrames - 1) {
throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
}
};
exports.validateInitialFrame = validateInitialFrame;

View File

@@ -0,0 +1 @@
export declare const validatePlaybackRate: (playbackRate: number | undefined) => void;

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.validatePlaybackRate = void 0;
const validatePlaybackRate = (playbackRate) => {
if (playbackRate === undefined) {
return;
}
if (playbackRate > 4) {
throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
}
if (playbackRate < -4) {
throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
}
if (playbackRate === 0) {
throw new Error(`A playback rate of 0 is not supported.`);
}
};
exports.validatePlaybackRate = validatePlaybackRate;