@lordicon/web 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,7 @@
1
- The MIT License
1
+ The MIT License (MIT)
2
2
 
3
3
  Copyright (c) 2025 Lordicon
4
4
 
5
- ====
6
-
7
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
8
6
  of this software and associated documentation files (the "Software"), to deal
9
7
  in the Software without restriction, including without limitation the rights
@@ -20,11 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
18
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
- SOFTWARE.
24
-
25
- ====
26
-
27
- Files located in the node_modules directories are externally
28
- maintained libraries used by this software which have their own
29
- licenses; we recommend you read them, as their terms may differ from the
30
- terms above.
21
+ SOFTWARE.
package/dist/index.d.ts CHANGED
@@ -174,6 +174,7 @@ export declare class Player {
174
174
  protected _eventHandlers: any;
175
175
  protected _state?: IconState;
176
176
  protected _availableStates: IconState[];
177
+ protected _animationFrameRate: number;
177
178
  /**
178
179
  * Creates a new Player instance.
179
180
  * @param container The DOM element where the animation will be rendered.
@@ -345,6 +346,11 @@ export declare class Player {
345
346
  * @returns Array of available states.
346
347
  */
347
348
  get availableStates(): IconState[];
349
+ /**
350
+ * Gets the frame rate of the animation.
351
+ * @returns Frame rate in frames per second.
352
+ */
353
+ get frameRate(): number;
348
354
  /**
349
355
  * Returns true if the animation is currently playing.
350
356
  */
package/dist/index.js CHANGED
@@ -10,7 +10,7 @@ var hi = (t, e, i) => e in t ? gr(t, e, { enumerable: !0, configurable: !0, writ
10
10
  _r.call(e, i) && hi(t, i, e[i]);
11
11
  return t;
12
12
  }, Hi = (t, e) => vr(t, yr(e));
13
- var Et = (t, e, i) => hi(t, typeof e != "symbol" ? e + "" : e, i);
13
+ var kt = (t, e, i) => hi(t, typeof e != "symbol" ? e + "" : e, i);
14
14
  function Pr(t) {
15
15
  return document.createElement(t);
16
16
  }
@@ -144,7 +144,7 @@ Ps.prototype = {
144
144
  let ks = "";
145
145
  const He = -999999, Tr = (t) => {
146
146
  ks = t;
147
- }, At = () => ks, Je = /* @__PURE__ */ function() {
147
+ }, Et = () => ks, Je = /* @__PURE__ */ function() {
148
148
  var t = 1, e = [], i, s, r = {
149
149
  onmessage: function() {
150
150
  },
@@ -2942,7 +2942,7 @@ function oe(t, e, i) {
2942
2942
  for (y = 0; y < P; y += 1)
2943
2943
  m.appendChild(u[y]);
2944
2944
  var b = B("mask");
2945
- b.setAttribute("mask-type", "alpha"), b.setAttribute("id", c + "_" + o), b.appendChild(n), s.appendChild(b), m.setAttribute("mask", "url(" + At() + "#" + c + "_" + o + ")"), u.length = 0, u.push(m);
2945
+ b.setAttribute("mask-type", "alpha"), b.setAttribute("id", c + "_" + o), b.appendChild(n), s.appendChild(b), m.setAttribute("mask", "url(" + Et() + "#" + c + "_" + o + ")"), u.length = 0, u.push(m);
2946
2946
  } else
2947
2947
  u.push(n);
2948
2948
  f[r].inv && !this.solidPath && (this.solidPath = this.createLayerSolidPath()), this.viewData[r] = {
@@ -2955,7 +2955,7 @@ function oe(t, e, i) {
2955
2955
  }
2956
2956
  for (this.maskElement = B(l), a = u.length, r = 0; r < a; r += 1)
2957
2957
  this.maskElement.appendChild(u[r]);
2958
- o > 0 && (this.maskElement.setAttribute("id", c), this.element.maskedElement.setAttribute(h, "url(" + At() + "#" + c + ")"), s.appendChild(this.maskElement)), this.viewData.length && this.element.addRenderableComponent(this);
2958
+ o > 0 && (this.maskElement.setAttribute("id", c), this.element.maskedElement.setAttribute(h, "url(" + Et() + "#" + c + ")"), s.appendChild(this.maskElement)), this.viewData.length && this.element.addRenderableComponent(this);
2959
2959
  }
2960
2960
  oe.prototype.getMaskProperty = function(t) {
2961
2961
  return this.viewData[t].prop;
@@ -2965,7 +2965,7 @@ oe.prototype.renderFrame = function(t) {
2965
2965
  for (i = 0; i < s; i += 1)
2966
2966
  if ((this.viewData[i].prop._mdf || t) && this.drawPath(this.masksProperties[i], this.viewData[i].prop.v, this.viewData[i]), (this.viewData[i].op._mdf || t) && this.viewData[i].elem.setAttribute("fill-opacity", this.viewData[i].op.v), this.masksProperties[i].mode !== "n" && (this.viewData[i].invRect && (this.element.finalTransform.mProp._mdf || t) && this.viewData[i].invRect.setAttribute("transform", e.getInverseMatrix().to2dCSS()), this.storedData[i].x && (this.storedData[i].x._mdf || t))) {
2967
2967
  var r = this.storedData[i].expan;
2968
- this.storedData[i].x.v < 0 ? (this.storedData[i].lastOperator !== "erode" && (this.storedData[i].lastOperator = "erode", this.storedData[i].elem.setAttribute("filter", "url(" + At() + "#" + this.storedData[i].filterId + ")")), r.setAttribute("radius", -this.storedData[i].x.v)) : (this.storedData[i].lastOperator !== "dilate" && (this.storedData[i].lastOperator = "dilate", this.storedData[i].elem.setAttribute("filter", null)), this.storedData[i].elem.setAttribute("stroke-width", this.storedData[i].x.v * 2));
2968
+ this.storedData[i].x.v < 0 ? (this.storedData[i].lastOperator !== "erode" && (this.storedData[i].lastOperator = "erode", this.storedData[i].elem.setAttribute("filter", "url(" + Et() + "#" + this.storedData[i].filterId + ")")), r.setAttribute("radius", -this.storedData[i].x.v)) : (this.storedData[i].lastOperator !== "dilate" && (this.storedData[i].lastOperator = "dilate", this.storedData[i].elem.setAttribute("filter", null)), this.storedData[i].elem.setAttribute("stroke-width", this.storedData[i].x.v * 2));
2969
2969
  }
2970
2970
  };
2971
2971
  oe.prototype.getMaskelement = function() {
@@ -3021,7 +3021,7 @@ function yi(t) {
3021
3021
  }
3022
3022
  f && this.filters.push(f);
3023
3023
  }
3024
- n && (t.globalData.defs.appendChild(a), t.layerElement.setAttribute("filter", "url(" + At() + "#" + r + ")")), this.filters.length && t.addRenderableComponent(this);
3024
+ n && (t.globalData.defs.appendChild(a), t.layerElement.setAttribute("filter", "url(" + Et() + "#" + r + ")")), this.filters.length && t.addRenderableComponent(this);
3025
3025
  }
3026
3026
  yi.prototype.renderFrame = function(t) {
3027
3027
  var e, i = this.filters.length;
@@ -3060,9 +3060,9 @@ ii.prototype = {
3060
3060
  var r = vt();
3061
3061
  if (i.setAttribute("id", r), i.appendChild(s), this.globalData.defs.appendChild(i), this.checkMasks()) {
3062
3062
  var a = B("g");
3063
- a.setAttribute("clip-path", "url(" + At() + "#" + r + ")"), a.appendChild(this.layerElement), this.transformedElement = a, t ? t.appendChild(this.transformedElement) : this.baseElement = this.transformedElement;
3063
+ a.setAttribute("clip-path", "url(" + Et() + "#" + r + ")"), a.appendChild(this.layerElement), this.transformedElement = a, t ? t.appendChild(this.transformedElement) : this.baseElement = this.transformedElement;
3064
3064
  } else
3065
- this.layerElement.setAttribute("clip-path", "url(" + At() + "#" + r + ")");
3065
+ this.layerElement.setAttribute("clip-path", "url(" + Et() + "#" + r + ")");
3066
3066
  }
3067
3067
  this.data.bm !== 0 && this.setBlendMode();
3068
3068
  },
@@ -3083,7 +3083,7 @@ ii.prototype = {
3083
3083
  var e = this.layerId + "_" + t, i, s, r, a;
3084
3084
  if (t === 1 || t === 3) {
3085
3085
  var n = B("mask");
3086
- n.setAttribute("id", e), n.setAttribute("mask-type", t === 3 ? "luminance" : "alpha"), r = B("use"), r.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + this.layerId), n.appendChild(r), this.globalData.defs.appendChild(n), !hs.maskType && t === 1 && (n.setAttribute("mask-type", "luminance"), i = vt(), s = we.createFilter(i), this.globalData.defs.appendChild(s), s.appendChild(we.createAlphaToLuminanceFilter()), a = B("g"), a.appendChild(r), n.appendChild(a), a.setAttribute("filter", "url(" + At() + "#" + i + ")"));
3086
+ n.setAttribute("id", e), n.setAttribute("mask-type", t === 3 ? "luminance" : "alpha"), r = B("use"), r.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + this.layerId), n.appendChild(r), this.globalData.defs.appendChild(n), !hs.maskType && t === 1 && (n.setAttribute("mask-type", "luminance"), i = vt(), s = we.createFilter(i), this.globalData.defs.appendChild(s), s.appendChild(we.createAlphaToLuminanceFilter()), a = B("g"), a.appendChild(r), n.appendChild(a), a.setAttribute("filter", "url(" + Et() + "#" + i + ")"));
3087
3087
  } else if (t === 2) {
3088
3088
  const c = this.comp.data.w === this.globalData.compSize.w && this.comp.data.h === this.globalData.compSize.h;
3089
3089
  var f = B("mask");
@@ -3095,14 +3095,14 @@ ii.prototype = {
3095
3095
  var y = B("feFuncA");
3096
3096
  y.setAttribute("type", "table"), y.setAttribute("tableValues", "1.0 0.0"), u.appendChild(y), this.globalData.defs.appendChild(s);
3097
3097
  var P = B("rect");
3098
- P.setAttribute("width", this.comp.data.w), P.setAttribute("height", this.comp.data.h), P.setAttribute("x", "0"), P.setAttribute("y", "0"), P.setAttribute("fill", "#ffffff"), P.setAttribute("opacity", "0"), o.setAttribute("filter", "url(" + At() + "#" + i + ")"), o.appendChild(P), r = B("use"), r.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + this.layerId), o.appendChild(r), hs.maskType || (f.setAttribute("mask-type", "luminance"), s.appendChild(we.createAlphaToLuminanceFilter()), a = B("g"), o.appendChild(P), a.appendChild(this.layerElement), o.appendChild(a)), this.globalData.defs.appendChild(f);
3098
+ P.setAttribute("width", this.comp.data.w), P.setAttribute("height", this.comp.data.h), P.setAttribute("x", "0"), P.setAttribute("y", "0"), P.setAttribute("fill", "#ffffff"), P.setAttribute("opacity", "0"), o.setAttribute("filter", "url(" + Et() + "#" + i + ")"), o.appendChild(P), r = B("use"), r.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + this.layerId), o.appendChild(r), hs.maskType || (f.setAttribute("mask-type", "luminance"), s.appendChild(we.createAlphaToLuminanceFilter()), a = B("g"), o.appendChild(P), a.appendChild(this.layerElement), o.appendChild(a)), this.globalData.defs.appendChild(f);
3099
3099
  }
3100
3100
  this.matteMasks[t] = e;
3101
3101
  }
3102
3102
  return this.matteMasks[t];
3103
3103
  },
3104
3104
  setMatte: function(t) {
3105
- this.matteElement && this.matteElement.setAttribute("mask", "url(" + At() + "#" + t + ")");
3105
+ this.matteElement && this.matteElement.setAttribute("mask", "url(" + Et() + "#" + t + ")");
3106
3106
  }
3107
3107
  };
3108
3108
  function Re() {
@@ -3408,7 +3408,7 @@ ye.prototype.setGradientData = function(t, e) {
3408
3408
  var r = [], a, n, f;
3409
3409
  for (f = e.g.p * 4, n = 0; n < f; n += 4)
3410
3410
  a = B("stop"), s.appendChild(a), r.push(a);
3411
- t.setAttribute(e.ty === "gf" ? "fill" : "stroke", "url(" + At() + "#" + i + ")"), this.gf = s, this.cst = r;
3411
+ t.setAttribute(e.ty === "gf" ? "fill" : "stroke", "url(" + Et() + "#" + i + ")"), this.gf = s, this.cst = r;
3412
3412
  };
3413
3413
  ye.prototype.setGradientOpacity = function(t, e) {
3414
3414
  if (this.g._hasOpacity && !this.g._collapsable) {
@@ -3421,7 +3421,7 @@ ye.prototype.setGradientOpacity = function(t, e) {
3421
3421
  var y = this.stops;
3422
3422
  for (s = t.g.p * 4; s < r; s += 2)
3423
3423
  i = B("stop"), i.setAttribute("stop-color", "rgb(255,255,255)"), u.appendChild(i), y.push(i);
3424
- n.setAttribute(t.ty === "gf" ? "fill" : "stroke", "url(" + At() + "#" + f + ")"), t.ty === "gs" && (n.setAttribute("stroke-linecap", Fs[t.lc || 2]), n.setAttribute("stroke-linejoin", Vs[t.lj || 2]), t.lj === 1 && n.setAttribute("stroke-miterlimit", t.ml)), this.of = u, this.ms = a, this.ost = y, this.maskId = o, e.msElem = n;
3424
+ n.setAttribute(t.ty === "gf" ? "fill" : "stroke", "url(" + Et() + "#" + f + ")"), t.ty === "gs" && (n.setAttribute("stroke-linecap", Fs[t.lc || 2]), n.setAttribute("stroke-linejoin", Vs[t.lj || 2]), t.lj === 1 && n.setAttribute("stroke-miterlimit", t.ml)), this.of = u, this.ms = a, this.ost = y, this.maskId = o, e.msElem = n;
3425
3425
  }
3426
3426
  };
3427
3427
  st([_t], ye);
@@ -3579,7 +3579,7 @@ dt.prototype.createStyleElement = function(t, e) {
3579
3579
  i = new zs(this, t, s);
3580
3580
  else if (t.ty === "gf" || t.ty === "gs") {
3581
3581
  var a = t.ty === "gf" ? ye : Bs;
3582
- i = new a(this, t, s), this.globalData.defs.appendChild(i.gf), i.maskId && (this.globalData.defs.appendChild(i.ms), this.globalData.defs.appendChild(i.of), r.setAttribute("mask", "url(" + At() + "#" + i.maskId + ")"));
3582
+ i = new a(this, t, s), this.globalData.defs.appendChild(i.gf), i.maskId && (this.globalData.defs.appendChild(i.ms), this.globalData.defs.appendChild(i.of), r.setAttribute("mask", "url(" + Et() + "#" + i.maskId + ")"));
3583
3583
  } else t.ty === "no" && (i = new Gs(this, t, s));
3584
3584
  return (t.ty === "st" || t.ty === "gs") && (r.setAttribute("stroke-linecap", Fs[t.lc || 2]), r.setAttribute("stroke-linejoin", Vs[t.lj || 2]), r.setAttribute("fill-opacity", "0"), t.lj === 1 && r.setAttribute("stroke-miterlimit", t.ml)), t.r === 2 && r.setAttribute("fill-rule", "evenodd"), t.ln && r.setAttribute("id", t.ln), t.cl && r.setAttribute("class", t.cl), t.bm && (r.style["mix-blend-mode"] = vi(t.bm)), this.stylesList.push(s), this.addToAnimatedContents(t, i), i;
3585
3585
  };
@@ -3704,7 +3704,7 @@ yt.prototype.configAnimation = function(t) {
3704
3704
  var i = B("clipPath"), s = B("rect");
3705
3705
  s.setAttribute("width", t.w), s.setAttribute("height", t.h), s.setAttribute("x", 0), s.setAttribute("y", 0);
3706
3706
  var r = vt();
3707
- i.setAttribute("id", r), i.appendChild(s), this.layerElement.setAttribute("clip-path", "url(" + At() + "#" + r + ")"), e.appendChild(i), this.layers = t.layers, this.elements = mt(t.layers.length);
3707
+ i.setAttribute("id", r), i.appendChild(s), this.layerElement.setAttribute("clip-path", "url(" + Et() + "#" + r + ")"), e.appendChild(i), this.layers = t.layers, this.elements = mt(t.layers.length);
3708
3708
  };
3709
3709
  yt.prototype.destroy = function() {
3710
3710
  this.animationItem.wrapper && (this.animationItem.wrapper.innerText = ""), this.layerElement = null, this.globalData.defs = null;
@@ -4604,7 +4604,7 @@ const Pi = function() {
4604
4604
  }
4605
4605
  }), v.startTime = u.data.st, v.index = u.data.ind, v.source = u.data.refId, v.height = u.data.ty === 0 ? u.data.h : 100, v.width = u.data.ty === 0 ? u.data.w : 100, v.inPoint = u.data.ip / u.comp.globalData.frameRate, v.outPoint = u.data.op / u.comp.globalData.frameRate, v._name = u.data.nm, v.registerMaskInterface = P, v.registerEffectsInterface = c, v;
4606
4606
  };
4607
- }(), kt = /* @__PURE__ */ function() {
4607
+ }(), At = /* @__PURE__ */ function() {
4608
4608
  return function(t, e) {
4609
4609
  return function(i) {
4610
4610
  return i = i === void 0 ? 1 : i, i <= 0 ? t : e(i - 1);
@@ -4654,7 +4654,7 @@ const Pi = function() {
4654
4654
  }
4655
4655
  throw new Error();
4656
4656
  }
4657
- var u = kt(o, n), y = [], P, c = r.ef.length;
4657
+ var u = At(o, n), y = [], P, c = r.ef.length;
4658
4658
  for (P = 0; P < c; P += 1)
4659
4659
  r.ef[P].ty === 5 ? y.push(i(r.ef[P], a.effectElements[P], a.effectElements[P].propertyGroup, f)) : y.push(s(a.effectElements[P], r.ef[P].ty, f, u));
4660
4660
  return r.mn === "ADBE Color Control" && Object.defineProperty(o, "color", {
@@ -4685,7 +4685,7 @@ const Pi = function() {
4685
4685
  function r(n) {
4686
4686
  return n === "Shape" || n === "shape" || n === "Path" || n === "path" || n === "ADBE Vector Shape" || n === 2 ? r.path : null;
4687
4687
  }
4688
- var a = kt(r, i);
4688
+ var a = At(r, i);
4689
4689
  return s.setGroupProperty(tt("Path", a)), Object.defineProperties(r, {
4690
4690
  path: {
4691
4691
  get: function() {
@@ -4720,7 +4720,7 @@ const Pi = function() {
4720
4720
  }
4721
4721
  return typeof m == "number" ? l[m - 1] : null;
4722
4722
  };
4723
- h.propertyGroup = kt(h, k), l = t(g.it, d.it, h.propertyGroup), h.numProperties = l.length;
4723
+ h.propertyGroup = At(h, k), l = t(g.it, d.it, h.propertyGroup), h.numProperties = l.length;
4724
4724
  var p = o(g.it[g.it.length - 1], d.it[d.it.length - 1], h.propertyGroup);
4725
4725
  return h.transform = p, h.propertyIndex = g.cix, h._name = g.nm, h;
4726
4726
  }
@@ -4738,7 +4738,7 @@ const Pi = function() {
4738
4738
  return l.transform;
4739
4739
  }
4740
4740
  };
4741
- l.propertyGroup = kt(l, k);
4741
+ l.propertyGroup = At(l, k);
4742
4742
  var h = e(g, d, l.propertyGroup), p = o(g.it[g.it.length - 1], d.it[d.it.length - 1], l.propertyGroup);
4743
4743
  return l.content = h, l.transform = p, Object.defineProperty(l, "_name", {
4744
4744
  get: function() {
@@ -4791,7 +4791,7 @@ const Pi = function() {
4791
4791
  return g;
4792
4792
  }
4793
4793
  function n(g, d, k) {
4794
- var l = kt(x, k), h = kt(E, l);
4794
+ var l = At(x, k), h = At(E, l);
4795
4795
  function p(S) {
4796
4796
  Object.defineProperty(E, g.d[S].nm, {
4797
4797
  get: $(d.d.dataProps[S].p)
@@ -4826,7 +4826,7 @@ const Pi = function() {
4826
4826
  function l(p) {
4827
4827
  return p === g.e.ix || p === "End" || p === "end" ? l.end : p === g.s.ix ? l.start : p === g.o.ix ? l.offset : null;
4828
4828
  }
4829
- var h = kt(l, k);
4829
+ var h = At(l, k);
4830
4830
  return l.propertyIndex = g.ix, d.s.setGroupProperty(tt("Start", h)), d.e.setGroupProperty(tt("End", h)), d.o.setGroupProperty(tt("Offset", h)), l.propertyIndex = g.ix, l.propertyGroup = k, Object.defineProperties(l, {
4831
4831
  start: {
4832
4832
  get: $(d.s)
@@ -4844,7 +4844,7 @@ const Pi = function() {
4844
4844
  function l(p) {
4845
4845
  return g.a.ix === p || p === "Anchor Point" ? l.anchorPoint : g.o.ix === p || p === "Opacity" ? l.opacity : g.p.ix === p || p === "Position" ? l.position : g.r.ix === p || p === "Rotation" || p === "ADBE Vector Rotation" ? l.rotation : g.s.ix === p || p === "Scale" ? l.scale : g.sk && g.sk.ix === p || p === "Skew" ? l.skew : g.sa && g.sa.ix === p || p === "Skew Axis" ? l.skewAxis : null;
4846
4846
  }
4847
- var h = kt(l, k);
4847
+ var h = At(l, k);
4848
4848
  return d.transform.mProps.o.setGroupProperty(tt("Opacity", h)), d.transform.mProps.p.setGroupProperty(tt("Position", h)), d.transform.mProps.a.setGroupProperty(tt("Anchor Point", h)), d.transform.mProps.s.setGroupProperty(tt("Scale", h)), d.transform.mProps.r.setGroupProperty(tt("Rotation", h)), d.transform.mProps.sk && (d.transform.mProps.sk.setGroupProperty(tt("Skew", h)), d.transform.mProps.sa.setGroupProperty(tt("Skew Angle", h))), d.transform.op.setGroupProperty(tt("Opacity", h)), Object.defineProperties(l, {
4849
4849
  opacity: {
4850
4850
  get: $(d.transform.mProps.o)
@@ -4874,7 +4874,7 @@ const Pi = function() {
4874
4874
  function l(m) {
4875
4875
  return g.p.ix === m ? l.position : g.s.ix === m ? l.size : null;
4876
4876
  }
4877
- var h = kt(l, k);
4877
+ var h = At(l, k);
4878
4878
  l.propertyIndex = g.ix;
4879
4879
  var p = d.sh.ty === "tm" ? d.sh.prop : d.sh;
4880
4880
  return p.s.setGroupProperty(tt("Size", h)), p.p.setGroupProperty(tt("Position", h)), Object.defineProperties(l, {
@@ -4891,7 +4891,7 @@ const Pi = function() {
4891
4891
  function l(m) {
4892
4892
  return g.p.ix === m ? l.position : g.r.ix === m ? l.rotation : g.pt.ix === m ? l.points : g.or.ix === m || m === "ADBE Vector Star Outer Radius" ? l.outerRadius : g.os.ix === m ? l.outerRoundness : g.ir && (g.ir.ix === m || m === "ADBE Vector Star Inner Radius") ? l.innerRadius : g.is && g.is.ix === m ? l.innerRoundness : null;
4893
4893
  }
4894
- var h = kt(l, k), p = d.sh.ty === "tm" ? d.sh.prop : d.sh;
4894
+ var h = At(l, k), p = d.sh.ty === "tm" ? d.sh.prop : d.sh;
4895
4895
  return l.propertyIndex = g.ix, p.or.setGroupProperty(tt("Outer Radius", h)), p.os.setGroupProperty(tt("Outer Roundness", h)), p.pt.setGroupProperty(tt("Points", h)), p.p.setGroupProperty(tt("Position", h)), p.r.setGroupProperty(tt("Rotation", h)), g.ir && (p.ir.setGroupProperty(tt("Inner Radius", h)), p.is.setGroupProperty(tt("Inner Roundness", h))), Object.defineProperties(l, {
4896
4896
  position: {
4897
4897
  get: $(p.p)
@@ -4921,7 +4921,7 @@ const Pi = function() {
4921
4921
  function l(m) {
4922
4922
  return g.p.ix === m ? l.position : g.r.ix === m ? l.roundness : g.s.ix === m || m === "Size" || m === "ADBE Vector Rect Size" ? l.size : null;
4923
4923
  }
4924
- var h = kt(l, k), p = d.sh.ty === "tm" ? d.sh.prop : d.sh;
4924
+ var h = At(l, k), p = d.sh.ty === "tm" ? d.sh.prop : d.sh;
4925
4925
  return l.propertyIndex = g.ix, p.p.setGroupProperty(tt("Position", h)), p.s.setGroupProperty(tt("Size", h)), p.r.setGroupProperty(tt("Rotation", h)), Object.defineProperties(l, {
4926
4926
  position: {
4927
4927
  get: $(p.p)
@@ -4939,7 +4939,7 @@ const Pi = function() {
4939
4939
  function l(m) {
4940
4940
  return g.r.ix === m || m === "Round Corners 1" ? l.radius : null;
4941
4941
  }
4942
- var h = kt(l, k), p = d;
4942
+ var h = At(l, k), p = d;
4943
4943
  return l.propertyIndex = g.ix, p.rd.setGroupProperty(tt("Radius", h)), Object.defineProperties(l, {
4944
4944
  radius: {
4945
4945
  get: $(p.rd)
@@ -4951,7 +4951,7 @@ const Pi = function() {
4951
4951
  function l(m) {
4952
4952
  return g.c.ix === m || m === "Copies" ? l.copies : g.o.ix === m || m === "Offset" ? l.offset : null;
4953
4953
  }
4954
- var h = kt(l, k), p = d;
4954
+ var h = At(l, k), p = d;
4955
4955
  return l.propertyIndex = g.ix, p.c.setGroupProperty(tt("Copies", h)), p.o.setGroupProperty(tt("Offset", h)), Object.defineProperties(l, {
4956
4956
  copies: {
4957
4957
  get: $(p.c)
@@ -4977,7 +4977,7 @@ const Pi = function() {
4977
4977
  function p() {
4978
4978
  return k;
4979
4979
  }
4980
- return h.propertyGroup = kt(h, p), l = t(g, d, h.propertyGroup), h.numProperties = l.length, h._name = "Contents", h;
4980
+ return h.propertyGroup = At(h, p), l = t(g, d, h.propertyGroup), h.numProperties = l.length, h._name = "Contents", h;
4981
4981
  };
4982
4982
  }(), Oa = /* @__PURE__ */ function() {
4983
4983
  var t = function(i) {
@@ -5354,7 +5354,7 @@ Ei.prototype.initialize = function() {
5354
5354
  var a = B("mask"), n = vt();
5355
5355
  a.setAttribute("id", n), a.setAttribute("mask-type", "alpha"), a.appendChild(i), this.elem.globalData.defs.appendChild(a);
5356
5356
  var f = B("g");
5357
- for (f.setAttribute("mask", "url(" + At() + "#" + n + ")"); t[0]; )
5357
+ for (f.setAttribute("mask", "url(" + Et() + "#" + n + ")"); t[0]; )
5358
5358
  f.appendChild(t[0]);
5359
5359
  this.elem.layerElement.appendChild(f), this.masker = a, i.setAttribute("stroke", "#fff");
5360
5360
  } else if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
@@ -5850,19 +5850,20 @@ class en {
5850
5850
  * @param options Additional options (e.g., autoInit).
5851
5851
  */
5852
5852
  constructor(e, i, s, r = { autoInit: !0 }) {
5853
- Et(this, "_container");
5854
- Et(this, "_iconData");
5855
- Et(this, "_initialProperties");
5856
- Et(this, "_lottieInstance");
5857
- Et(this, "_ready", !1);
5858
- Et(this, "_colorsProxy");
5859
- Et(this, "_direction", 1);
5860
- Et(this, "_speed", 1);
5861
- Et(this, "_lottieProperties");
5862
- Et(this, "_eventHandlers", {});
5863
- Et(this, "_state");
5864
- Et(this, "_availableStates");
5865
- if (this._container = e, this._iconData = i, this._initialProperties = s || {}, this._availableStates = (i.markers || []).map((a) => {
5853
+ kt(this, "_container");
5854
+ kt(this, "_iconData");
5855
+ kt(this, "_initialProperties");
5856
+ kt(this, "_lottieInstance");
5857
+ kt(this, "_ready", !1);
5858
+ kt(this, "_colorsProxy");
5859
+ kt(this, "_direction", 1);
5860
+ kt(this, "_speed", 1);
5861
+ kt(this, "_lottieProperties");
5862
+ kt(this, "_eventHandlers", {});
5863
+ kt(this, "_state");
5864
+ kt(this, "_availableStates");
5865
+ kt(this, "_animationFrameRate", 0);
5866
+ if (this._container = e, this._iconData = i, this._initialProperties = s || {}, this._animationFrameRate = i.fr || 30, this._availableStates = (i.markers || []).map((a) => {
5866
5867
  const n = a.cm.split(":"), f = {
5867
5868
  time: a.tm,
5868
5869
  duration: a.dr,
@@ -6219,6 +6220,13 @@ class en {
6219
6220
  get availableStates() {
6220
6221
  return this._availableStates;
6221
6222
  }
6223
+ /**
6224
+ * Gets the frame rate of the animation.
6225
+ * @returns Frame rate in frames per second.
6226
+ */
6227
+ get frameRate() {
6228
+ return this._animationFrameRate;
6229
+ }
6222
6230
  /**
6223
6231
  * Returns true if the animation is currently playing.
6224
6232
  */
@@ -17,7 +17,6 @@ const player = new Player(
17
17
  },
18
18
  );
19
19
 
20
-
21
20
  player.addEventListener('ready', () => {
22
21
  player.play();
23
22
  });
@@ -52,6 +52,7 @@
52
52
  <td>
53
53
  Find out how to manage playback through the player API.
54
54
  </td>
55
+ </tr>
55
56
  </tbody>
56
57
  </table>
57
58
  </body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lordicon/web",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.",
5
5
  "repository": "https://github.com/lordicondev/player-web",
6
6
  "homepage": "https://lordicon.com/",
package/src/player.ts CHANGED
@@ -115,6 +115,7 @@ export class Player {
115
115
 
116
116
  protected _state?: IconState;
117
117
  protected _availableStates: IconState[];
118
+ protected _animationFrameRate: number = 0;
118
119
 
119
120
  /**
120
121
  * Creates a new Player instance.
@@ -133,6 +134,9 @@ export class Player {
133
134
  this._iconData = data;
134
135
  this._initialProperties = properties || {};
135
136
 
137
+ // Parse animation frame rate for timing calculations.
138
+ this._animationFrameRate = data.fr || 30;
139
+
136
140
  // Parse available states from Lottie markers.
137
141
  this._availableStates = (data.markers || []).map((c: any) => {
138
142
  const parts: string[] = c.cm.split(':');
@@ -731,6 +735,14 @@ export class Player {
731
735
  return this._availableStates;
732
736
  }
733
737
 
738
+ /**
739
+ * Gets the frame rate of the animation.
740
+ * @returns Frame rate in frames per second.
741
+ */
742
+ get frameRate() {
743
+ return this._animationFrameRate;
744
+ }
745
+
734
746
  /**
735
747
  * Returns true if the animation is currently playing.
736
748
  */