feat: 🎸 Add setSegments, Playback State Properties & Refactor Default Mode; fix: Prevent Redundant stop Event

.changeset/orange-years-ring.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': patch
+---
+
+fix: 🐛 prevent `stop` event from triggering if playback is already stopped.

.changeset/slow-tools-bake.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+refactor: rename default mode to `forward`

.changeset/soft-kids-chew.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 `isPlaying`, `isPaused`, `isStopped` properties

.changeset/wise-cats-yell.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 add `setSegments` method & `segments` config.

apps/dotlottie-web-example/src/main.ts

@@ -35,26 +35,39 @@ app.innerHTML = `
 <div class="container">
   <canvas id="canvas"></canvas>
   <div class="control-panel">
-    <button id="playPause" class="control-button">Play</button>
-    <button id="stop" class="control-button">Stop</button>
+    <div>
+      <button id="playPause" class="control-button">Play</button>
+      <button id="stop" class="control-button">Stop</button>
+      <button id="jump" class="control-button">Jump</button>
+      <button id="destroy" class="control-button" style="background: #cd3434;">Destroy</button>
+      <button id="reload" class="control-button">Reload</button>
+
+      <label for="loopToggle">Loop: </label>
+      <input type="checkbox" id="loopToggle" checked />
+    </div>
 
     <label for="frameSlider">Frame: <span id="current-frame">0</span></label>
     <input type="range" id="frameSlider" min="0" step="0.1" />
 
-    <label for="loopToggle">Loop: </label>
-    <input type="checkbox" id="loopToggle" checked />
+
     <label for="speed" class="speed-label">Speed: <span id="speed-value">x1</span></label>
     <input type="range" id="speed" min="0.1" max="5" step="0.1" value="1" class="speed-slider" />
-    <button id="jump" class="control-button">Jump</button>
-    <button id="destroy" class="control-button" style="background: #cd3434;">Destroy</button>
-    <button id="reload" class="control-button">Reload</button>
     <label for="mode">Mode: </label>
     <select id="mode">
       <option value="bounce">Bounce</option>
       <option value="bounce-reverse">Bounce Reverse</option>
       <option value="reverse">Reverse</option>
-      <option value="normal">Default</option>
+      <option value="forward">Forward</option>
     </select>
+    <div class="segments-control">
+      <label for="startFrame">Start Frame: </label>
+      <input type="number" id="startFrame" value="10" min="0" />
+
+      <label for="endFrame">End Frame: </label>
+      <input type="number" id="endFrame" value="90" min="0" />
+
+      <button id="setSegments" class="control-button">Set Segments</button>
+    </div>
   </div>
 </div>
 `;
@@ -96,6 +109,8 @@ fetch('/hamster.lottie')
       loop: true,
       autoplay: true,
       mode: 'bounce',
+      segments: [10, 90],
+      speed: 1,
       backgroundColor: 'purple',
     });
 
@@ -110,13 +125,28 @@ fetch('/hamster.lottie')
     const reloadButton = document.getElementById('reload') as HTMLButtonElement;
     const jumpButton = document.getElementById('jump') as HTMLButtonElement;
     const modeSelect = document.getElementById('mode') as HTMLSelectElement;
+    const startFrameInput = document.getElementById('startFrame') as HTMLInputElement;
+    const endFrameInput = document.getElementById('endFrame') as HTMLInputElement;
+    const setSegmentsButton = document.getElementById('setSegments') as HTMLButtonElement;
+
+    setSegmentsButton.addEventListener('click', () => {
+      const startFrame = parseInt(startFrameInput.value, 10);
+      const endFrame = parseInt(endFrameInput.value, 10);
+
+      dotLottie.setSegments(startFrame, endFrame);
+    });
 
     modeSelect.addEventListener('change', () => {
       dotLottie.setMode(modeSelect.value.toString() as Mode);
     });
 
     jumpButton.addEventListener('click', () => {
-      const midFrame = dotLottie.totalFrames / 2;
+      if (!dotLottie.segments) return;
+
+      const startFrame = parseInt(dotLottie.segments[0].toString(), 10);
+      const endFrame = parseInt(dotLottie.segments[1].toString(), 10);
+
+      const midFrame = (endFrame - startFrame) / 2 + startFrame;
 
       dotLottie.setFrame(midFrame);
     });
@@ -137,7 +167,7 @@ fetch('/hamster.lottie')
     });
 
     playPauseButton.addEventListener('click', () => {
-      if (dotLottie.playing) {
+      if (dotLottie.isPlaying) {
         dotLottie.pause();
       } else {
         dotLottie.play();

apps/dotlottie-web-example/src/styles.css

@@ -60,3 +60,27 @@ canvas {
   width: 200px;
   cursor: pointer;
 }
+
+.segments-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 20px 0;
+  padding: 10px;
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.segments-control label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+
+.segments-control input[type='number'] {
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 60px;
+  margin: 0 10px;
+}

packages/web/README.md

@@ -124,31 +124,36 @@ For this behavior to work correctly, the canvas element must be styled using CSS
 
 The `DotLottie` constructor accepts a config object with the following properties:
 
-| Property name     | Type                  | Required | Default   | Description                                                                                         |
-| ----------------- | --------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------- |
-| `autoplay`        | boolean               |          | false     | Auto-starts the animation on load.                                                                  |
-| `loop`            | boolean               |          | false     | Determines if the animation should loop.                                                            |
-| `canvas`          | HTMLCanvasElement     |    ✔️    | undefined | Canvas element for animation rendering.                                                             |
-| `src`             | string                |          | undefined | URL to the animation data (`.json` or `.lottie`).                                                   |
-| `speed`           | number                |          | 1         | Animation playback speed. 1 is regular speed.                                                       |
-| `data`            | string \| ArrayBuffer |          | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
-| `mode`            | string                |          | "normal"  | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse".                       |
-| `backgroundColor` | string                |          | undefined | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent".             |
+| Property name     | Type                  | Required | Default               | Description                                                                                                                            |
+| ----------------- | --------------------- | :------: | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `autoplay`        | boolean               |          | false                 | Auto-starts the animation on load.                                                                                                     |
+| `loop`            | boolean               |          | false                 | Determines if the animation should loop.                                                                                               |
+| `canvas`          | HTMLCanvasElement     |    ✔️    | undefined             | Canvas element for animation rendering.                                                                                                |
+| `src`             | string                |          | undefined             | URL to the animation data (`.json` or `.lottie`).                                                                                      |
+| `speed`           | number                |          | 1                     | Animation playback speed. 1 is regular speed.                                                                                          |
+| `data`            | string \| ArrayBuffer |          | undefined             | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.                                    |
+| `mode`            | string                |          | "normal"              | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse".                                                          |
+| `backgroundColor` | string                |          | undefined             | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent".                                                |
+| `segments`        | \[number, number]     |          | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
 
 ### Properties
 
 `DotLottie` instances expose the following properties:
 
-| Property       | Type    | Description                                                                                 |
-| -------------- | ------- | ------------------------------------------------------------------------------------------- |
-| `currentFrame` | number  | Represents the animation's currently displayed frame number.                                |
-| `duration`     | number  | Specifies the animation's total playback time in milliseconds.                              |
-| `totalFrames`  | number  | Denotes the total count of individual frames within the animation.                          |
-| `loop`         | boolean | Indicates if the animation is set to play in a continuous loop.                             |
-| `speed`        | number  | Represents the playback speed factor; e.g., 2 would mean double speed.                      |
-| `loopCount`    | number  | Tracks how many times the animation has completed its loop.                                 |
-| `playing`      | boolean | Reflects whether the animation is in active playback or not                                 |
-| `direction`    | string  | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse. |
+| Property       | Type    | Description                                                                                                           |
+| -------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `currentFrame` | number  | Represents the animation's currently displayed frame number.                                                          |
+| `duration`     | number  | Specifies the animation's total playback time in milliseconds.                                                        |
+| `totalFrames`  | number  | Denotes the total count of individual frames within the animation.                                                    |
+| `loop`         | boolean | Indicates if the animation is set to play in a continuous loop.                                                       |
+| `speed`        | number  | Represents the playback speed factor; e.g., 2 would mean double speed.                                                |
+| `loopCount`    | number  | Tracks how many times the animation has completed its loop.                                                           |
+| `direction`    | string  | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse.                           |
+| `mode`         | string  | Reflects the current playback mode.                                                                                   |
+| `isPaused`     | boolean | Reflects whether the animation is paused or not.                                                                      |
+| `isStopped`    | boolean | Reflects whether the animation is stopped or not.                                                                     |
+| `isPlaying`    | boolean | Reflects whether the animation is playing or not.                                                                     |
+| `segments`     | number  | Reflects the frames range of the animations. where segments\[0] is the start frame and segments\[1] is the end frame. |
 
 ### Methods
 
@@ -167,6 +172,7 @@ The `DotLottie` constructor accepts a config object with the following propertie
 | `destroy()`                                               | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
 | `load(config: Config)`                                    | Loads a new configuration or a new animation.                                                                                                                     |
 | `setMode(mode: string)`                                   | Sets the animation play mode.                                                                                                                                     |
+| `setSegments(startFrame: number, endFrame: number)`       | Sets the start and end frame of the animation.                                                                                                                    |
 
 ### Static Methods