@mediamonks/fast-image-sequence
Version:
The fast-image-sequence-renderer is a powerful package for displaying image sequences at high frame rates on websites. Use it to create smooth animations, 360° product views, or video-like sequences from series of images. Zero dependencies.
234 lines (233 loc) • 9.26 kB
JavaScript
import { n as e, r as t, t as n } from "./FastImageSequence-t3jKojp_.js";
import { forwardRef as r, useEffect as i, useImperativeHandle as a, useRef as o, useState as s } from "react";
//#region \0rolldown/runtime.js
var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), l = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
if (typeof require < "u") return require.apply(this, arguments);
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
});
//#endregion
//#region src/react/useFastImageSequence.ts
function u(e) {
let t = o(null), r = o(null), [a, c] = s(!1), [l, u] = s(0), { autoInit: d = !0, ...f } = e;
return i(() => {
if (!t.current || !d) return;
let e = new n(t.current, f);
r.current = e, e.ready().then(() => {
c(!0);
});
let i = setInterval(() => {
u(e.loadProgress), e.loadProgress >= 1 && clearInterval(i);
}, 100);
return () => {
clearInterval(i), e.destruct(), r.current = null, c(!1), u(0);
};
}, [d]), {
ref: t,
sequence: r.current,
isReady: a,
loadProgress: l
};
}
//#endregion
//#region node_modules/react/cjs/react-jsx-runtime.production.js
var d = /* @__PURE__ */ c(((e) => {
var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
function r(e, n, r) {
var i = null;
if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
else r = n;
return n = r.ref, {
$$typeof: t,
type: e,
key: i,
ref: n === void 0 ? null : n,
props: r
};
}
e.Fragment = n, e.jsx = r, e.jsxs = r;
})), f = /* @__PURE__ */ c(((e) => {
process.env.NODE_ENV !== "production" && (function() {
function t(e) {
if (e == null) return null;
if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case v: return "Fragment";
case b: return "Profiler";
case y: return "StrictMode";
case w: return "Suspense";
case T: return "SuspenseList";
case O: return "Activity";
}
if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
case _: return "Portal";
case S: return e.displayName || "Context";
case x: return (e._context.displayName || "Context") + ".Consumer";
case C:
var n = e.render;
return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
case D:
n = e._payload, e = e._init;
try {
return t(e(n));
} catch {}
}
return null;
}
function n(e) {
return "" + e;
}
function r(e) {
try {
n(e);
var t = !1;
} catch {
t = !0;
}
if (t) {
t = console;
var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
}
}
function i(e) {
if (e === v) return "<>";
if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
try {
var n = t(e);
return n ? "<" + n + ">" : "<...>";
} catch {
return "<...>";
}
}
function a() {
var e = A.A;
return e === null ? null : e.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function s(e) {
if (j.call(e, "key")) {
var t = Object.getOwnPropertyDescriptor(e, "key").get;
if (t && t.isReactWarning) return !1;
}
return e.key !== void 0;
}
function c(e, t) {
function n() {
P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
}
n.isReactWarning = !0, Object.defineProperty(e, "key", {
get: n,
configurable: !0
});
}
function u() {
var e = t(this.type);
return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
}
function d(e, t, n, r, i, a) {
var o = n.ref;
return e = {
$$typeof: g,
type: e,
key: t,
props: n,
_owner: r
}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
enumerable: !1,
value: null
}) : Object.defineProperty(e, "ref", {
enumerable: !1,
get: u
}), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: i
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: a
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function f(e, n, i, o, l, u) {
var f = n.children;
if (f !== void 0) if (o) if (M(f)) {
for (o = 0; o < f.length; o++) p(f[o]);
Object.freeze && Object.freeze(f);
} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else p(f);
if (j.call(n, "key")) {
f = t(e);
var m = Object.keys(n).filter(function(e) {
return e !== "key";
});
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />", o, f, m, f), R[f + o] = !0);
}
if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
else i = n;
return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), l, u);
}
function p(e) {
m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
}
function m(e) {
return typeof e == "object" && !!e && e.$$typeof === g;
}
var h = l("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
return null;
};
h = { react_stack_bottom_frame: function(e) {
return e();
} };
var P, F = {}, I = h.react_stack_bottom_frame.bind(h, o)(), L = N(i(o)), R = {};
e.Fragment = v, e.jsx = function(e, t, n) {
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
}, e.jsxs = function(e, t, n) {
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
};
})();
})), p = (/* @__PURE__ */ c(((e, t) => {
process.env.NODE_ENV === "production" ? t.exports = d() : t.exports = f();
})))(), m = r(function(e, t) {
let { className: n, style: r, onReady: o, onLoadProgress: s, ...c } = e, { ref: l, sequence: d, isReady: f, loadProgress: m } = u(c);
return a(t, () => ({
sequence: d,
container: l.current
}), [d]), i(() => {
f && d && o && o(d);
}, [
f,
d,
o
]), i(() => {
s && s(m);
}, [m, s]), /* @__PURE__ */ (0, p.jsx)("div", {
ref: l,
className: n,
style: {
position: "relative",
width: "100%",
height: "100%",
...r
}
});
});
//#endregion
export { n as FastImageSequence, m as FastImageSequenceComponent, e as clamp, t as isMobile, u as useFastImageSequence };