@libshub/gif-tools 1.0.0

package/dist/gif-tools.css

@@ -0,0 +1,2 @@
+.gif-player{line-height:0;display:inline-block;position:relative;overflow:hidden}.gif-player__media{max-width:100%;height:auto;display:block}.gif-player__controls{opacity:0;gap:6px;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}.gif-player:hover .gif-player__controls,.gif-player--show-controls .gif-player__controls{opacity:1}.gif-player__btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex}.gif-player__btn:hover{background:#000000bf}.gif-player__btn svg{fill:currentColor;width:16px;height:16px}.gif-player__debug{color:#fff;pointer-events:none;background:#000000a6;border-radius:4px;padding:2px 8px;font-family:ui-monospace,monospace;font-size:12px;line-height:1.4;position:absolute;top:8px;left:8px}
+/*$vite$:1*/

package/dist/gif-tools.es.js

@@ -0,0 +1,542 @@
+import { forwardRef as e, useCallback as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region \0rolldown/runtime.js
+var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), l = /* @__PURE__ */ c(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 }), e.loop = e.conditional = e.parse = void 0, e.parse = function e(t, n) {
+		var r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, i = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : r;
+		if (Array.isArray(n)) n.forEach(function(n) {
+			return e(t, n, r, i);
+		});
+		else if (typeof n == "function") n(t, r, i, e);
+		else {
+			var a = Object.keys(n)[0];
+			Array.isArray(n[a]) ? (i[a] = {}, e(t, n[a], r, i[a])) : i[a] = n[a](t, r, i, e);
+		}
+		return r;
+	}, e.conditional = function(e, t) {
+		return function(n, r, i, a) {
+			t(n, r, i) && a(n, e, r, i);
+		};
+	}, e.loop = function(e, t) {
+		return function(n, r, i, a) {
+			for (var o = [], s = n.pos; t(n, r, i);) {
+				var c = {};
+				if (a(n, e, r, c), n.pos === s) break;
+				s = n.pos, o.push(c);
+			}
+			return o;
+		};
+	};
+})), u = /* @__PURE__ */ c(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 }), e.readBits = e.readArray = e.readUnsigned = e.readString = e.peekBytes = e.readBytes = e.peekByte = e.readByte = e.buildStream = void 0, e.buildStream = function(e) {
+		return {
+			data: e,
+			pos: 0
+		};
+	};
+	var t = function() {
+		return function(e) {
+			return e.data[e.pos++];
+		};
+	};
+	e.readByte = t, e.peekByte = function() {
+		var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
+		return function(t) {
+			return t.data[t.pos + e];
+		};
+	};
+	var n = function(e) {
+		return function(t) {
+			return t.data.subarray(t.pos, t.pos += e);
+		};
+	};
+	e.readBytes = n, e.peekBytes = function(e) {
+		return function(t) {
+			return t.data.subarray(t.pos, t.pos + e);
+		};
+	}, e.readString = function(e) {
+		return function(t) {
+			return Array.from(n(e)(t)).map(function(e) {
+				return String.fromCharCode(e);
+			}).join("");
+		};
+	}, e.readUnsigned = function(e) {
+		return function(t) {
+			var r = n(2)(t);
+			return e ? (r[1] << 8) + r[0] : (r[0] << 8) + r[1];
+		};
+	}, e.readArray = function(e, t) {
+		return function(r, i, a) {
+			for (var o = typeof t == "function" ? t(r, i, a) : t, s = n(e), c = Array(o), l = 0; l < o; l++) c[l] = s(r);
+			return c;
+		};
+	};
+	var r = function(e, t, n) {
+		for (var r = 0, i = 0; i < n; i++) r += e[t + i] && 2 ** (n - i - 1);
+		return r;
+	};
+	e.readBits = function(e) {
+		return function(n) {
+			for (var i = t()(n), a = Array(8), o = 0; o < 8; o++) a[7 - o] = !!(i & 1 << o);
+			return Object.keys(e).reduce(function(t, n) {
+				var i = e[n];
+				return i.length ? t[n] = r(a, i.index, i.length) : t[n] = a[i.index], t;
+			}, {});
+		};
+	};
+})), d = /* @__PURE__ */ c(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 }), e.default = void 0;
+	var t = l(), n = u(), r = { blocks: function(e) {
+		for (var t = 0, r = [], i = e.data.length, a = 0, o = (0, n.readByte)()(e); o !== t && o; o = (0, n.readByte)()(e)) {
+			if (e.pos + o >= i) {
+				var s = i - e.pos;
+				r.push((0, n.readBytes)(s)(e)), a += s;
+				break;
+			}
+			r.push((0, n.readBytes)(o)(e)), a += o;
+		}
+		for (var c = new Uint8Array(a), l = 0, u = 0; u < r.length; u++) c.set(r[u], l), l += r[u].length;
+		return c;
+	} }, i = (0, t.conditional)({ gce: [
+		{ codes: (0, n.readBytes)(2) },
+		{ byteSize: (0, n.readByte)() },
+		{ extras: (0, n.readBits)({
+			future: {
+				index: 0,
+				length: 3
+			},
+			disposal: {
+				index: 3,
+				length: 3
+			},
+			userInput: { index: 6 },
+			transparentColorGiven: { index: 7 }
+		}) },
+		{ delay: (0, n.readUnsigned)(!0) },
+		{ transparentColorIndex: (0, n.readByte)() },
+		{ terminator: (0, n.readByte)() }
+	] }, function(e) {
+		var t = (0, n.peekBytes)(2)(e);
+		return t[0] === 33 && t[1] === 249;
+	}), a = (0, t.conditional)({ image: [
+		{ code: (0, n.readByte)() },
+		{ descriptor: [
+			{ left: (0, n.readUnsigned)(!0) },
+			{ top: (0, n.readUnsigned)(!0) },
+			{ width: (0, n.readUnsigned)(!0) },
+			{ height: (0, n.readUnsigned)(!0) },
+			{ lct: (0, n.readBits)({
+				exists: { index: 0 },
+				interlaced: { index: 1 },
+				sort: { index: 2 },
+				future: {
+					index: 3,
+					length: 2
+				},
+				size: {
+					index: 5,
+					length: 3
+				}
+			}) }
+		] },
+		(0, t.conditional)({ lct: (0, n.readArray)(3, function(e, t, n) {
+			return 2 ** (n.descriptor.lct.size + 1);
+		}) }, function(e, t, n) {
+			return n.descriptor.lct.exists;
+		}),
+		{ data: [{ minCodeSize: (0, n.readByte)() }, r] }
+	] }, function(e) {
+		return (0, n.peekByte)()(e) === 44;
+	}), o = (0, t.conditional)({ text: [
+		{ codes: (0, n.readBytes)(2) },
+		{ blockSize: (0, n.readByte)() },
+		{ preData: function(e, t, r) {
+			return (0, n.readBytes)(r.text.blockSize)(e);
+		} },
+		r
+	] }, function(e) {
+		var t = (0, n.peekBytes)(2)(e);
+		return t[0] === 33 && t[1] === 1;
+	}), s = (0, t.conditional)({ application: [
+		{ codes: (0, n.readBytes)(2) },
+		{ blockSize: (0, n.readByte)() },
+		{ id: function(e, t, r) {
+			return (0, n.readString)(r.blockSize)(e);
+		} },
+		r
+	] }, function(e) {
+		var t = (0, n.peekBytes)(2)(e);
+		return t[0] === 33 && t[1] === 255;
+	}), c = (0, t.conditional)({ comment: [{ codes: (0, n.readBytes)(2) }, r] }, function(e) {
+		var t = (0, n.peekBytes)(2)(e);
+		return t[0] === 33 && t[1] === 254;
+	});
+	e.default = [
+		{ header: [{ signature: (0, n.readString)(3) }, { version: (0, n.readString)(3) }] },
+		{ lsd: [
+			{ width: (0, n.readUnsigned)(!0) },
+			{ height: (0, n.readUnsigned)(!0) },
+			{ gct: (0, n.readBits)({
+				exists: { index: 0 },
+				resolution: {
+					index: 1,
+					length: 3
+				},
+				sort: { index: 4 },
+				size: {
+					index: 5,
+					length: 3
+				}
+			}) },
+			{ backgroundColorIndex: (0, n.readByte)() },
+			{ pixelAspectRatio: (0, n.readByte)() }
+		] },
+		(0, t.conditional)({ gct: (0, n.readArray)(3, function(e, t) {
+			return 2 ** (t.lsd.gct.size + 1);
+		}) }, function(e, t) {
+			return t.lsd.gct.exists;
+		}),
+		{ frames: (0, t.loop)([
+			i,
+			s,
+			c,
+			a,
+			o
+		], function(e) {
+			var t = (0, n.peekByte)()(e);
+			return t === 33 || t === 44;
+		}) }
+	];
+})), f = /* @__PURE__ */ c(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 }), e.deinterlace = void 0, e.deinterlace = function(e, t) {
+		for (var n = Array(e.length), r = e.length / t, i = function(r, i) {
+			var a = e.slice(i * t, (i + 1) * t);
+			n.splice.apply(n, [r * t, t].concat(a));
+		}, a = [
+			0,
+			4,
+			2,
+			1
+		], o = [
+			8,
+			8,
+			4,
+			2
+		], s = 0, c = 0; c < 4; c++) for (var l = a[c]; l < r; l += o[c]) i(l, s), s++;
+		return n;
+	};
+})), p = /* @__PURE__ */ c(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 }), e.lzw = void 0, e.lzw = function(e, t, n) {
+		var r = 4096, i = -1, a = n, o, s, c, l, u, d, f, p, m, h, g, _, v, y, b, x, S = Array(n), C = Array(r), w = Array(r), T = Array(r + 1);
+		for (_ = e, s = 1 << _, u = s + 1, o = s + 2, f = i, l = _ + 1, c = (1 << l) - 1, m = 0; m < s; m++) C[m] = 0, w[m] = m;
+		var g = p = v = y = x = b = 0, p, v, y, x, b;
+		for (h = 0; h < a;) {
+			if (y === 0) {
+				if (p < l) {
+					g += t[b] << p, p += 8, b++;
+					continue;
+				}
+				if (m = g & c, g >>= l, p -= l, m > o || m == u) break;
+				if (m == s) {
+					l = _ + 1, c = (1 << l) - 1, o = s + 2, f = i;
+					continue;
+				}
+				if (f == i) {
+					T[y++] = w[m], f = m, v = m;
+					continue;
+				}
+				for (d = m, m == o && (T[y++] = v, m = f); m > s;) T[y++] = w[m], m = C[m];
+				v = w[m] & 255, T[y++] = v, o < r && (C[o] = f, w[o] = v, o++, (o & c) === 0 && o < r && (l++, c += o)), f = d;
+			}
+			y--, S[x++] = T[y], h++;
+		}
+		for (h = x; h < a; h++) S[h] = 0;
+		return S;
+	};
+})), m = (/* @__PURE__ */ c(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 }), e.decompressFrames = e.decompressFrame = e.parseGIF = void 0;
+	var t = o(d()), n = l(), r = u(), i = f(), a = p();
+	function o(e) {
+		return e && e.__esModule ? e : { default: e };
+	}
+	e.parseGIF = function(e) {
+		var i = new Uint8Array(e);
+		return (0, n.parse)((0, r.buildStream)(i), t.default);
+	};
+	var s = function(e) {
+		for (var t = e.pixels.length, n = new Uint8ClampedArray(t * 4), r = 0; r < t; r++) {
+			var i = r * 4, a = e.pixels[r], o = e.colorTable[a] || [
+				0,
+				0,
+				0
+			];
+			n[i] = o[0], n[i + 1] = o[1], n[i + 2] = o[2], n[i + 3] = a === e.transparentIndex ? 0 : 255;
+		}
+		return n;
+	}, c = function(e, t, n) {
+		if (!e.image) {
+			console.warn("gif frame does not have associated image.");
+			return;
+		}
+		var r = e.image, o = r.descriptor.width * r.descriptor.height, c = (0, a.lzw)(r.data.minCodeSize, r.data.blocks, o);
+		r.descriptor.lct.interlaced && (c = (0, i.deinterlace)(c, r.descriptor.width));
+		var l = {
+			pixels: c,
+			dims: {
+				top: e.image.descriptor.top,
+				left: e.image.descriptor.left,
+				width: e.image.descriptor.width,
+				height: e.image.descriptor.height
+			}
+		};
+		return r.descriptor.lct && r.descriptor.lct.exists ? l.colorTable = r.lct : l.colorTable = t, e.gce && (l.delay = (e.gce.delay || 10) * 10, l.disposalType = e.gce.extras.disposal, e.gce.extras.transparentColorGiven && (l.transparentIndex = e.gce.transparentColorIndex)), n && (l.patch = s(l)), l;
+	};
+	e.decompressFrame = c, e.decompressFrames = function(e, t) {
+		return e.frames.filter(function(e) {
+			return e.image;
+		}).map(function(n) {
+			return c(n, e.gct, t);
+		});
+	};
+})))(), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
+async function v(e) {
+	let t = await fetch(e, {
+		mode: "cors",
+		credentials: "omit"
+	});
+	if (!t.ok) throw Error(`Failed to load gif: ${t.status}`);
+	let n = await t.arrayBuffer(), r = performance.now(), i = (0, m.parseGIF)(n), a = (0, m.decompressFrames)(i, !0), o = performance.now() - r;
+	if (!a.length) throw Error("GIF has no frames");
+	return {
+		gif: {
+			frames: a,
+			width: i.lsd.width,
+			height: i.lsd.height
+		},
+		decodeTimeMs: o
+	};
+}
+async function y(e, t) {
+	let n = h.get(e);
+	if (n) return n.refCount += 1, {
+		gif: n.data,
+		decodeTimeMs: 0
+	};
+	if (!t?.skipPending && g.has(e)) {
+		let { gif: t } = await g.get(e);
+		return h.get(e).refCount += 1, {
+			gif: t,
+			decodeTimeMs: 0
+		};
+	}
+	let r = (_.get(e) ?? 0) + 1;
+	_.set(e, r);
+	let i = v(e).then(({ gif: t, decodeTimeMs: n }) => _.get(e) === r ? (g.delete(e), h.set(e, {
+		data: t,
+		refCount: 0
+	}), {
+		gif: t,
+		decodeTimeMs: n
+	}) : {
+		gif: t,
+		decodeTimeMs: n
+	}).catch((t) => {
+		throw _.get(e) === r && g.delete(e), t;
+	});
+	g.set(e, i);
+	let { gif: a, decodeTimeMs: o } = await i;
+	return _.get(e) === r && (h.get(e).refCount += 1), {
+		gif: a,
+		decodeTimeMs: o
+	};
+}
+function b(e) {
+	let t = h.get(e);
+	t && (--t.refCount, t.refCount <= 0 && h.delete(e));
+}
+//#endregion
+//#region src/utils/gifController.ts
+function x(e, t, n, r, i = {}) {
+	let a = e.getContext("2d");
+	if (!a) throw Error("Canvas 2d context unavailable");
+	let o = a;
+	e.width = n, e.height = r;
+	let s = document.createElement("canvas"), c = s.getContext("2d"), l = !1, u = 0, d = 0, f = null, p = null;
+	function m() {
+		f &&= (clearTimeout(f), null);
+	}
+	function h(e) {
+		let { dims: t } = e;
+		(!p || p.width !== t.width || p.height !== t.height) && (s.width = t.width, s.height = t.height, p = c.createImageData(t.width, t.height)), p.data.set(e.patch), c.putImageData(p, 0, 0), o.drawImage(s, t.left, t.top);
+	}
+	function g(e) {
+		let i = t[e];
+		i.disposalType === 2 && o.clearRect(0, 0, n, r), h(i);
+	}
+	function _() {
+		let { loopCount: e } = i;
+		return e !== void 0 && d >= e;
+	}
+	function v() {
+		m();
+		let e = t[u], a = Math.max(e.delay, 0);
+		f = setTimeout(() => {
+			if (u += 1, u >= t.length) {
+				if (d += 1, _()) {
+					u = t.length - 1, g(u), l = !1, m(), i.onEnd?.();
+					return;
+				}
+				u = 0, o.clearRect(0, 0, n, r);
+			}
+			g(u), l && v();
+		}, a);
+	}
+	function y() {
+		l || (_() && x(), l = !0, i.onPlay?.(), v());
+	}
+	function b() {
+		l && (l = !1, m(), i.onPause?.());
+	}
+	function x() {
+		b(), u = 0, d = 0, o.clearRect(0, 0, n, r), g(0);
+	}
+	function S() {
+		b(), p = null, s.width = 0, s.height = 0, e.width = 0, e.height = 0;
+	}
+	return g(0), {
+		play: y,
+		pause: b,
+		reset: x,
+		destroy: S,
+		isPlaying: () => l,
+		getCompletedLoops: () => d
+	};
+}
+async function S(e, t, n = {}) {
+	let { skipPending: r, onLoaded: i, ...a } = n, { gif: o, decodeTimeMs: s } = await y(t, { skipPending: r });
+	i?.(s);
+	let c = x(e, o.frames, o.width, o.height, a), l = c.destroy;
+	return c.destroy = () => {
+		l(), b(t);
+	}, c;
+}
+//#endregion
+//#region src/components/GifPlayer.tsx
+var C = e(({ src: e, autoPlay: c = !0, showControls: l = !1, debug: u = !1, loopCount: d, className: f, style: p, width: m, height: h, onPlay: g, onPause: _, onEnd: v, onLoaded: y, onError: b }, x) => {
+	let C = i(null), w = i(null), T = i(g), E = i(_), D = i(v), O = i(y), k = i(b), [A, j] = a(c), [M, N] = a(!1), [P, F] = a(null), [I, L] = a(0), R = i(!1);
+	T.current = g, E.current = _, D.current = v, O.current = y, k.current = b;
+	let z = t(() => {
+		w.current?.play(), j(!0);
+	}, []), B = t(() => {
+		w.current?.pause(), j(!1);
+	}, []), V = t(() => {
+		w.current?.isPlaying() ? B() : z();
+	}, [B, z]), H = t(() => {
+		w.current?.reset(), j(!1);
+	}, []), U = t(() => {
+		R.current = !0, L((e) => e + 1);
+	}, []), W = t(() => {
+		let t = !1, n = C.current;
+		if (!n) return () => {};
+		let r = R.current;
+		return R.current = !1, N(!1), j(!1), F(null), w.current?.destroy(), w.current = null, S(n, e, {
+			skipPending: r,
+			loopCount: d,
+			onPlay: () => {
+				j(!0), T.current?.();
+			},
+			onPause: () => {
+				j(!1), E.current?.();
+			},
+			onEnd: () => {
+				j(!1), D.current?.();
+			},
+			onLoaded: (e) => {
+				F(e), O.current?.(e);
+			}
+		}).then((e) => {
+			if (t) {
+				e.destroy();
+				return;
+			}
+			w.current = e, N(!0), c && (e.play(), j(!0));
+		}).catch((e) => {
+			t || (F(null), k.current?.(e instanceof Error ? e : Error(String(e))));
+		}), () => {
+			t = !0, w.current?.destroy(), w.current = null;
+		};
+	}, [
+		e,
+		d,
+		c
+	]);
+	return r(x, () => ({
+		play: z,
+		pause: B,
+		toggle: V,
+		reset: H,
+		reload: U,
+		isPlaying: () => w.current?.isPlaying() ?? !1
+	}), [
+		z,
+		B,
+		V,
+		H,
+		U
+	]), n(() => W(), [W, I]), /* @__PURE__ */ s("div", {
+		className: [
+			"gif-player",
+			l && "gif-player--show-controls",
+			f
+		].filter(Boolean).join(" "),
+		style: p,
+		children: [
+			/* @__PURE__ */ o("canvas", {
+				ref: C,
+				className: "gif-player__media",
+				role: "img",
+				style: {
+					...m === void 0 ? {} : { width: m },
+					...h === void 0 ? {} : { height: h },
+					...M ? {} : { visibility: "hidden" }
+				}
+			}),
+			u && P !== null && /* @__PURE__ */ s("span", {
+				className: "gif-player__debug",
+				children: [P.toFixed(1), "ms"]
+			}),
+			l && M && /* @__PURE__ */ o("div", {
+				className: "gif-player__controls",
+				children: /* @__PURE__ */ o("button", {
+					type: "button",
+					className: "gif-player__btn",
+					onClick: V,
+					children: A ? /* @__PURE__ */ s("svg", {
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ o("rect", {
+							x: "6",
+							y: "4",
+							width: "4",
+							height: "16",
+							rx: "1"
+						}), /* @__PURE__ */ o("rect", {
+							x: "14",
+							y: "4",
+							width: "4",
+							height: "16",
+							rx: "1"
+						})]
+					}) : /* @__PURE__ */ o("svg", {
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ o("path", { d: "M8 5v14l11-7z" })
+					})
+				})
+			})
+		]
+	});
+});
+C.displayName = "GifPlayer";
+//#endregion
+export { C as GifPlayer, S as createGifController };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@libshub/gif-tools",
+  "version": "1.0.0",
+  "description": "",
+  "module": "./dist/gif-tools.es.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/gif-tools.es.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/gif-tools.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.lib.json && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^17.0.93",
+    "@types/react-dom": "^17.0.26",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  },
+  "dependencies": {
+    "gifuct-js": "^2.1.2"
+  }
+}