fix: 🐛 resume playing from the current_frame after pause (#55)

LottieFiles · Jan 25, 2024 · 668ee6c · 668ee6c
1 parent 31599a1
commit 668ee6c
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 18 deletions.
diff --git a/dotlottie-ffi/emscripten_bindings.cpp b/dotlottie-ffi/emscripten_bindings.cpp
@@ -97,6 +97,5 @@ EMSCRIPTEN_BINDINGS(DotLottiePlayer)
         .function("setConfig", &DotLottiePlayer::set_config)
         .function("setFrame", &DotLottiePlayer::set_frame)
         .function("stop", &DotLottiePlayer::stop)
-        .function("totalFrames", &DotLottiePlayer::total_frames)
-        .function("setBackgroundColor", &DotLottiePlayer::set_background_color);
+        .function("totalFrames", &DotLottiePlayer::total_frames);
 }
diff --git a/dotlottie-ffi/src/dotlottie_player.udl b/dotlottie-ffi/src/dotlottie_player.udl
@@ -82,5 +82,4 @@ interface DotLottiePlayer {
     boolean render();
     boolean resize(u32 width, u32 height);
     void clear();
-    boolean set_background_color(u32 hex_color);
 };
diff --git a/dotlottie-rs/src/dotlottie_player.rs b/dotlottie-rs/src/dotlottie_player.rs
@@ -1,4 +1,4 @@
-use instant::Instant;
+use instant::{Duration, Instant};
 use std::sync::RwLock;
 
 use dotlottie_fms::{DotLottieError, DotLottieManager, Manifest, ManifestAnimation};
@@ -116,9 +116,33 @@ impl DotLottieRuntime {
 
     pub fn play(&mut self) -> bool {
         if self.is_loaded && !self.is_playing() {
-            self.playback_state = PlaybackState::Playing;
-            self.start_time = Instant::now();
+            if self.is_paused() {
+                let start_frame = self.start_frame();
+                let end_frame = self.end_frame();
+
+                let total_frames = self.total_frames();
+                let duration = self.duration();
+                let effective_total_frames = end_frame - start_frame;
+                let effective_duration =
+                    (duration * effective_total_frames / total_frames) / self.config.speed;
+
+                let current_frame = self.current_frame().clamp(start_frame, end_frame);
+                let frame_duration = effective_duration / effective_total_frames;
+
+                // estimate elapsed time for current frame based on direction and segments
+                let elapsed_time_for_current_frame = match self.direction {
+                    Direction::Forward => (current_frame - start_frame) * frame_duration,
+                    Direction::Reverse => (end_frame - current_frame) * frame_duration,
+                };
 
+                // update start_time to account for the already elapsed time
+                self.start_time =
+                    Instant::now() - Duration::from_secs_f32(elapsed_time_for_current_frame);
+            } else {
+                self.start_time = Instant::now();
+            }
+
+            self.playback_state = PlaybackState::Playing;
             true
         } else {
             false

diff --git a/web-example.html b/web-example.html
@@ -7,11 +7,25 @@
   </head>
   <body>
     <div style="max-width: 500px">
-      <canvas style="width: 100%"></canvas>
+      <canvas style="width: 100%; border: 1px solid black"></canvas>
+      <button id="play">play</button>
+      <button id="pause">pause</button>
+      <input
+        id="progress-bar"
+        type="range"
+        min="0"
+        max="100"
+        defaultValue="0"
+        step="0.01"
+      />
     </div>
     <script type="module">
       import createDotLottiePlayerModule from "./release/wasm/DotLottiePlayer.mjs";
 
+      const playBtn = document.querySelector("#play");
+      const pauseBtn = document.querySelector("#pause");
+      const progressBar = document.querySelector("#progress-bar");
+
       const Module = await createDotLottiePlayerModule({
         locateFile: (path, prefix) => {
           if (path.endsWith(".wasm")) {
@@ -24,7 +38,7 @@
       function createSegments(startFrame, endFrame) {
         const vector = new Module.VectorFloat();
 
-        if (startFrame && endFrame) {
+        if (typeof startFrame === "number" && typeof endFrame === "number") {
           vector.push_back(startFrame);
           vector.push_back(endFrame);
         }
@@ -39,7 +53,7 @@
         speed: 1,
         useFrameInterpolation: true,
         segments: createSegments(0, 40),
-        backgroundColor: 0x9afafa8f,
+        backgroundColor: 0x000000,
       });
 
       // const data = await fetch(
@@ -65,11 +79,17 @@
       // const loaded = dotLottiePlayer.loadAnimationData(data, width, height);
       const loaded = dotLottiePlayer.loadDotLottieData(data, width, height);
 
+      dotLottiePlayer.setConfig({
+        ...dotLottiePlayer.config(),
+        mode: Module.Mode.values[3],
+        segments: createSegments(20, 80),
+      });
+
       console.log("Loaded: ", loaded);
 
-      const manifest = JSON.parse(dotLottiePlayer.manifestString());
-      const animationId = manifest.animations[2].id;
-      dotLottiePlayer.loadAnimation(animationId, width, height);
+      // const manifest = JSON.parse(dotLottiePlayer.manifestString());
+      // const animationId = manifest.animations[2].id;
+      // dotLottiePlayer.loadAnimation(animationId, width, height);
 
       // dotLottiePlayer.setBackgroundColor(0x9afafa8f);
 
@@ -79,19 +99,35 @@
       function animationLoop() {
         const nextFrameNumber = dotLottiePlayer.requestFrame();
         // console.log(nextFrameNumber);
-        dotLottiePlayer.setFrame(nextFrameNumber);
-        const rendered = dotLottiePlayer.render();
 
-        if (rendered) {
-          const frameBuffer = dotLottiePlayer.buffer();
-          imageData.data.set(frameBuffer);
-          ctx.putImageData(imageData, 0, 0);
+        const updated = dotLottiePlayer.setFrame(nextFrameNumber);
+
+        if (updated) {
+          progressBar.value =
+            (dotLottiePlayer.currentFrame() / dotLottiePlayer.totalFrames()) *
+            100;
+
+          const rendered = dotLottiePlayer.render();
+
+          if (rendered) {
+            const frameBuffer = dotLottiePlayer.buffer();
+            imageData.data.set(frameBuffer);
+            ctx.putImageData(imageData, 0, 0);
+          }
         }
 
         requestAnimationFrame(animationLoop);
       }
 
       requestAnimationFrame(animationLoop);
+
+      playBtn.addEventListener("click", () => {
+        dotLottiePlayer.play();
+      });
+
+      pauseBtn.addEventListener("click", () => {
+        dotLottiePlayer.pause();
+      });
     </script>
   </body>
 </html>