@lordicon/web 1.0.0 → 1.1.0

package/examples/03-states.html

@@ -14,7 +14,9 @@
 
     <div>
         <label for="state-select">Choose state:</label>
-        <select id="state-select"></select>
+        <select id="state-select">
+            <option value="*">*</option>
+        </select>
     </div>
 </body>
 

package/examples/04-events.ts

@@ -17,7 +17,6 @@ const player = new Player(
     },
 );
 
-
 player.addEventListener('ready', () => {
     player.play();
 });

package/examples/index.html

@@ -52,6 +52,7 @@
                 <td>
                     Find out how to manage playback through the player API.
                 </td>
+            </tr>
         </tbody>
     </table>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lordicon/web",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.",
     "repository": "https://github.com/lordicondev/player-web",
     "homepage": "https://lordicon.com/",
@@ -24,15 +24,15 @@
     },
     "devDependencies": {
         "@lordicon/internal": "^0.5.0",
-        "vite": "^6.2.3",
-        "vite-plugin-dts": "^4.5.4",
-        "concurrently": "^9.1.2",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint": "^8.54.0",
-        "prettier": "^3.2.5",
-        "typescript": "^5.3.2",
-        "@typescript-eslint/eslint-plugin": "^6.12.0",
-        "@typescript-eslint/parser": "^6.12.0",
+        "vite": "^8.0.16",
+        "vite-plugin-dts": "^5.0.2",
+        "concurrently": "^10.0.3",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint": "^10.5.0",
+        "prettier": "^3.8.4",
+        "typescript": "^6.0.3",
+        "@typescript-eslint/eslint-plugin": "^8.61.1",
+        "@typescript-eslint/parser": "^8.61.1",
         "@types/node": "^22.13.13"
     }
 }

package/src/player.ts

@@ -115,6 +115,7 @@ export class Player {
 
     protected _state?: IconState;
     protected _availableStates: IconState[];
+    protected _animationFrameRate: number = 0;
 
     /**
      * Creates a new Player instance.
@@ -133,6 +134,9 @@ export class Player {
         this._iconData = data;
         this._initialProperties = properties || {};
 
+        // Parse animation frame rate for timing calculations.
+        this._animationFrameRate = data.fr || 30;
+
         // Parse available states from Lottie markers.
         this._availableStates = (data.markers || []).map((c: any) => {
             const parts: string[] = c.cm.split(':');
@@ -180,7 +184,7 @@ export class Player {
             }
 
             // Fallback to default state if initial is invalid.
-            if (this._initialProperties.state && !this._state) {
+            if (this._initialProperties.state && !this._state && this._initialProperties.state !== '*') {
                 this._state = this._availableStates.filter(c => c.default)[0];
             }
         }
@@ -620,6 +624,8 @@ export class Player {
 
         if (isNil(state)) {
             this._state = this._availableStates.filter(c => c.default)[0];
+        } else if (state === '*') {
+            this._state = undefined;
         } else if (state) {
             this._state = this._availableStates.filter(c => c.name === state)[0];
 
@@ -731,6 +737,14 @@ export class Player {
         return this._availableStates;
     }
 
+    /**
+     * Gets the frame rate of the animation.
+     * @returns Frame rate in frames per second.
+     */
+    get frameRate() {
+        return this._animationFrameRate;
+    }
+
     /**
      * Returns true if the animation is currently playing.
      */