@arcblock/terminal 3.1.11 → 3.1.13

package/lib/Player.js

@@ -1,129 +1,206 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { useRef as b, useState as A, useReducer as O, useEffect as x } from "react";
+import { jsxs as F, jsx as a } from "react/jsx-runtime";
+import { useRef as P, useState as _, useReducer as U, useEffect as q, useCallback as g } from "react";
 import o from "prop-types";
-import { useSize as W, useInterval as H } from "ahooks";
-import y from "lodash/isUndefined";
-import h from "lodash/noop";
-import I from "./Terminal.js";
-import { PlayerRoot as L } from "./styles.js";
-import { defaultOptions as _, formatFrames as U, defaultState as Y, isFrameAt as N, findFrameAt as F, getPlayerClass as X, getFrameClass as $, formatTime as G } from "./util.js";
-const K = 8;
-function Q({ ...P }) {
-  const i = Object.assign({}, P);
-  y(i.onComplete) && (i.onComplete = h), y(i.onStart) && (i.onStart = h), y(i.onStop) && (i.onStop = h), y(i.onPause) && (i.onPause = h), y(i.onTick) && (i.onTick = h), y(i.onJump) && (i.onJump = h);
-  const t = Object.assign({}, _, i.options), { frames: u, totalDuration: m } = U(i.frames, t), R = {
-    cols: t.cols,
-    rows: t.rows,
-    cursorStyle: t.cursorStyle,
-    fontFamily: t.fontFamily,
-    fontSize: t.fontSize,
-    lineHeight: t.lineHeight,
-    letterSpacing: t.letterSpacing,
+import { useSize as Y } from "ahooks";
+import x from "lodash/isUndefined";
+import b from "lodash/noop";
+import X from "./Terminal.js";
+import { PlayerRoot as $ } from "./styles.js";
+import { defaultOptions as G, formatFrames as K, defaultState as Q, findFrameAt as M, getPlayerClass as V, getFrameClass as Z, formatTime as ee } from "./util.js";
+const me = 24;
+function te({ ...j }) {
+  const s = Object.assign({}, j);
+  x(s.onComplete) && (s.onComplete = b), x(s.onStart) && (s.onStart = b), x(s.onStop) && (s.onStop = b), x(s.onPause) && (s.onPause = b), x(s.onTick) && (s.onTick = b), x(s.onJump) && (s.onJump = b);
+  const e = Object.assign({}, G, s.options), { frames: c, totalDuration: w } = K(s.frames, e), D = {
+    cols: e.cols,
+    rows: e.rows,
+    cursorStyle: e.cursorStyle,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    lineHeight: e.lineHeight,
+    letterSpacing: e.letterSpacing,
     allowTransparency: !0,
     scrollback: 0,
-    theme: t.theme || {}
-  }, C = (a, e) => {
-    switch (e.type) {
+    theme: e.theme || {}
+  }, E = (t, r) => {
+    switch (r.type) {
       case "jump":
-        return { ...a, isPlaying: !1, ...e.payload };
+        return { ...t, ...r.payload };
       case "start":
-        return { ...a, isStarted: !0, lastTickTime: Date.now() };
+        return { ...t, isStarted: !0, lastTickTime: Date.now() };
       case "play":
-        return { ...a, isPlaying: !0, lastTickTime: Date.now(), ...e.payload };
+        return { ...t, isPlaying: !0, lastTickTime: Date.now(), ...r.payload };
       case "pause":
-        return { ...a, isPlaying: !1, ...e.payload };
+        return { ...t, isPlaying: !1, ...r.payload };
       case "tickStart":
-        return { ...a, isRendering: !0, lastTickTime: Date.now(), ...e.payload };
+        return { ...t, isRendering: !0, lastTickTime: Date.now(), ...r.payload };
       case "tickEnd":
-        return { ...a, isRendering: !1, lastTickTime: Date.now(), ...e.payload };
+        return { ...t, isRendering: !1, lastTickTime: Date.now(), ...r.payload };
       case "reset":
-        return { ...a, currentFrame: 0, currentTime: 0, ...e.payload };
+        return { ...t, currentFrame: -1, currentTime: 0, ...r.payload };
       default:
-        return { ...a, lastTickTime: Date.now(), ...e.payload };
+        return { ...t, lastTickTime: Date.now(), ...r.payload };
     }
-  }, c = b(null), k = b(null), d = b(null), [B, D] = A(0), M = W(document.body), [r, l] = O(C, Y), j = M?.width || 0;
-  x(() => {
-    if (c.current)
+  }, l = P(null), R = P(null), S = P(null), p = P(null), d = P(null), [z, J] = _(0), L = Y(document.body), [n, u] = U(E, Q), O = L?.width || 0;
+  q(() => {
+    if (l.current)
       try {
-        const a = 8.03305785123967, e = d.current.getBoundingClientRect();
-        let s = e.x < 0 ? e.width + e.x : e.width;
-        if (d.current.parentNode) {
-          const v = d.current.parentNode.getBoundingClientRect();
-          e.width > v.width && (s = v.width);
+        const t = 8.03305785123967, r = S.current.getBoundingClientRect();
+        let i = r.x < 0 ? r.width + r.x : r.width;
+        if (S.current.parentNode) {
+          const T = S.current.parentNode.getBoundingClientRect();
+          r.width > T.width && (i = T.width);
         }
-        t.controls && (s -= 12);
-        const T = Math.ceil(s / a), J = Math.min(Math.max(T, 40), t.cols);
-        c.current.resize(J, t.rows);
+        e.controls && (i -= 12);
+        const f = Math.ceil(i / t), y = Math.min(Math.max(f, 40), e.cols);
+        l.current.resize(y, e.rows);
       } catch {
       }
-  }, [j, B]);
-  const w = (a, e) => {
-    const s = u[a];
-    s && s.content && (r.requireReset && c.current.reset(), c.current.write(s.content, () => {
-      typeof e == "function" && e();
-    }));
-  }, p = (a) => {
-    typeof i[a] == "function" && i[a]({ state: r, frames: u, options: t });
-  }, S = (a) => {
-    c.current.reset();
-    const e = F(u, a);
-    for (let s = 0; s < e; s++)
-      w(s);
-  }, E = (a) => {
-    if (!k.current || !c.current || !r.isStarted)
-      return !1;
-    const e = k.current.getBoundingClientRect().width, s = a.nativeEvent.offsetX, T = Math.floor(m * s / e);
-    return l({ type: "jump", payload: { currentTime: T } }), S(T), p("onJump"), !1;
-  }, g = () => (r.isStarted === !1 && (l({ type: "start" }), c.current.reset()), l({ type: "play" }), p("onStart"), !1), z = () => (l({ type: "pause" }), p("onPause"), !1), q = () => (r.currentFrame === u.length - 1 && r.currentTime === m && (l({ type: "reset" }), c.current.reset()), p("onPlay"), g());
-  return x(() => {
-    if (c.current) {
-      if (d.current)
+  }, [O, z]);
+  const k = g(
+    (t) => new Promise((r) => {
+      const i = c[t];
+      i && i.content && l.current ? (n.requireReset && l.current.reset(), l.current.write(i.content, () => {
+        r();
+      })) : r();
+    }),
+    [c, n.requireReset]
+  ), m = g(
+    (t) => {
+      typeof s[t] == "function" && s[t]({ state: n, frames: c, options: e });
+    },
+    [s, n, c, e]
+  ), C = g(
+    async (t) => {
+      if (!l.current) return;
+      l.current.reset();
+      const r = M(c, t);
+      if (r >= 0)
+        for (let i = 0; i <= r; i++)
+          await k(i);
+    },
+    [c, k]
+  ), I = g(
+    (t) => {
+      if (!R.current || !l.current || !n.isStarted)
+        return !1;
+      const r = R.current.getBoundingClientRect().width, i = t.nativeEvent.offsetX, f = Math.floor(w * i / r), y = M(c, f), T = n.isPlaying;
+      return u({
+        type: "jump",
+        payload: {
+          currentTime: f,
+          currentFrame: y,
+          isPlaying: T
+          // Keep the same playing state
+        }
+      }), d.current = null, C(f), m("onJump"), !1;
+    },
+    [n.isStarted, n.isPlaying, w, c, C, m]
+  ), N = g(() => (n.isStarted === !1 && (u({ type: "start" }), l.current && l.current.reset()), d.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } }), m("onStart"), !1), [n.isStarted, m]), W = g(() => (u({ type: "pause" }), m("onPause"), !1), [m]), H = g(() => (n.currentFrame >= c.length - 1 ? (u({ type: "reset", payload: { currentFrame: -1, currentTime: 0 } }), l.current && l.current.reset(), d.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } })) : (d.current = null, u({ type: "play" })), m("onPlay"), !1), [n.currentFrame, c.length, m]);
+  q(() => {
+    if (l.current) {
+      if (S.current)
         try {
-          D(d.current.getBoundingClientRect().width);
+          J(S.current.getBoundingClientRect().width);
         } catch {
         }
-      t.autoplay ? g() : S(Math.min(Math.abs(t.thumbnailTime), m));
+      e.autoplay ? N() : C(Math.min(Math.abs(e.thumbnailTime), w));
     }
-  }, []), H(
-    () => {
-      if (r.isRendering)
-        return !1;
-      const a = Date.now() - r.lastTickTime, e = {};
-      r.currentTime < m && (e.currentTime = r.currentTime + a), r.currentTime > m && (e.currentTime = m);
-      const s = N(u, e.currentTime, r.currentFrame);
-      return r.currentFrame !== -1 && s ? l({ type: "tick", payload: e }) : r.currentFrame === u.length - 1 ? (p("onComplete"), t.repeat ? l({ type: "reset", payload: e }) : (e.currentTime = 0, e.currentFrame = 0, e.requireReset = !0, e.isStarted = !1, l({ type: "pause", payload: e }))) : (e?.currentTime != null && r?.currentFrame != null && N(e.currentTime, r.currentFrame + 1) ? e.currentFrame = r.currentFrame + 1 : e.currentFrame = F(u, e.currentTime), l({ type: "tickStart", payload: e }), w(e.currentFrame, () => (r.requireReset && (e.requireReset = !1), l({ type: "tickEnd", payload: e }), p("onTick"))));
-    },
-    r.isPlaying ? K : null
-  ), t.controls && (t.frameBox.title = null, t.frameBox.type = null, t.frameBox.style = {}, t.theme?.background === "transparent" ? t.frameBox.style.background = "black" : t.theme?.background && (t.frameBox.style.background = t.theme.background), t.frameBox.style.padding = "10px", t.frameBox.style.paddingBottom = "40px"), /* @__PURE__ */ f(L, { className: X(t, r), ref: d, children: [
-    /* @__PURE__ */ n("div", { className: "cover", onClick: g }),
-    /* @__PURE__ */ n("div", { className: "start", onClick: g, children: /* @__PURE__ */ f("svg", { style: { enableBackground: "new 0 0 30 30" }, viewBox: "0 0 30 30", children: [
-      /* @__PURE__ */ n("polygon", { points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " }),
-      /* @__PURE__ */ n("polygon", { points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " }),
-      /* @__PURE__ */ n("circle", { cx: "26", cy: "15", r: "1" }),
-      /* @__PURE__ */ n("circle", { cx: "6", cy: "4", r: "1" }),
-      /* @__PURE__ */ n("circle", { cx: "6", cy: "26", r: "1" })
+  }, []);
+  const v = P(n);
+  v.current = n;
+  const B = g(async () => {
+    const t = v.current;
+    if (!t.isPlaying || t.isRendering)
+      return;
+    const r = performance.now();
+    if (!d.current) {
+      const h = t.currentFrame >= 0 && c[t.currentFrame]?.startTime || 0;
+      d.current = r - h;
+    }
+    const i = r - d.current, { currentFrame: f } = t, y = f + 1;
+    if (f >= c.length - 1) {
+      if (m("onComplete"), e.repeat) {
+        d.current = r, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
+        return;
+      }
+      const h = {
+        currentTime: w,
+        currentFrame: c.length - 1,
+        requireReset: !0,
+        isStarted: !1
+      };
+      u({ type: "pause", payload: h }), d.current = null;
+      return;
+    }
+    const T = c[y];
+    if (!T) {
+      n.isPlaying && (p.current = requestAnimationFrame(B));
+      return;
+    }
+    const A = T.startTime || 0;
+    if (i >= A) {
+      u({
+        type: "tickStart",
+        payload: {
+          currentTime: A,
+          currentFrame: y
+        }
+      });
+      try {
+        await k(y);
+        const h = {
+          currentTime: A,
+          currentFrame: y
+        };
+        t.requireReset && (h.requireReset = !1), u({ type: "tickEnd", payload: h }), m("onTick");
+      } catch (h) {
+        console.error("Frame rendering error:", h);
+      }
+    } else
+      u({ type: "tick", payload: { currentTime: i } });
+  }, [c, k, m, e.repeat, w]);
+  return q(() => {
+    let t = !0;
+    const r = async () => {
+      for (; t && v.current.isPlaying; )
+        await new Promise((i) => {
+          p.current = requestAnimationFrame(i);
+        }), t && v.current.isPlaying && await B();
+    };
+    return n.isPlaying ? r() : (p.current && (cancelAnimationFrame(p.current), p.current = null), d.current = null), () => {
+      t = !1, p.current && (cancelAnimationFrame(p.current), p.current = null);
+    };
+  }, [n.isPlaying, B]), e.controls && (e.frameBox.title = null, e.frameBox.type = null, e.frameBox.style = {}, e.theme?.background === "transparent" ? e.frameBox.style.background = "black" : e.theme?.background && (e.frameBox.style.background = e.theme.background), e.frameBox.style.padding = "10px", e.frameBox.style.paddingBottom = "40px"), /* @__PURE__ */ F($, { className: V(e, n), ref: S, children: [
+    /* @__PURE__ */ a("div", { className: "cover", onClick: N }),
+    /* @__PURE__ */ a("div", { className: "start", onClick: N, children: /* @__PURE__ */ F("svg", { style: { enableBackground: "new 0 0 30 30" }, viewBox: "0 0 30 30", children: [
+      /* @__PURE__ */ a("polygon", { points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " }),
+      /* @__PURE__ */ a("polygon", { points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " }),
+      /* @__PURE__ */ a("circle", { cx: "26", cy: "15", r: "1" }),
+      /* @__PURE__ */ a("circle", { cx: "6", cy: "4", r: "1" }),
+      /* @__PURE__ */ a("circle", { cx: "6", cy: "26", r: "1" })
     ] }) }),
-    /* @__PURE__ */ n("div", { className: "terminal", children: /* @__PURE__ */ f("div", { className: $(t), style: t.frameBox.style || {}, children: [
-      /* @__PURE__ */ f("div", { className: "terminal-titlebar", children: [
-        /* @__PURE__ */ f("div", { className: "buttons", children: [
-          /* @__PURE__ */ n("div", { className: "close-button" }),
-          /* @__PURE__ */ n("div", { className: "minimize-button" }),
-          /* @__PURE__ */ n("div", { className: "maximize-button" })
+    /* @__PURE__ */ a("div", { className: "terminal", children: /* @__PURE__ */ F("div", { className: Z(e), style: e.frameBox.style || {}, children: [
+      /* @__PURE__ */ F("div", { className: "terminal-titlebar", children: [
+        /* @__PURE__ */ F("div", { className: "buttons", children: [
+          /* @__PURE__ */ a("div", { className: "close-button" }),
+          /* @__PURE__ */ a("div", { className: "minimize-button" }),
+          /* @__PURE__ */ a("div", { className: "maximize-button" })
         ] }),
-        /* @__PURE__ */ n("div", { className: "title", children: t.frameBox.title || "" })
+        /* @__PURE__ */ a("div", { className: "title", children: e.frameBox.title || "" })
       ] }),
-      /* @__PURE__ */ n("div", { className: "terminal-body", children: /* @__PURE__ */ n(I, { ref: c, options: R }) })
+      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(X, { ref: l, options: D }) })
     ] }) }),
-    /* @__PURE__ */ f("div", { className: "controller", children: [
-      r.isPlaying && /* @__PURE__ */ n("div", { className: "pause", onClick: z, title: "Pause", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
-      !r.isPlaying && r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick: q, title: "Play", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
-      !r.isPlaying && !r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick: g, title: "Start", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
-      /* @__PURE__ */ n("div", { className: "timer", children: G(r.currentTime) }),
-      /* @__PURE__ */ n("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ n("div", { className: "progressbar", ref: k, onClick: E, children: /* @__PURE__ */ n("div", { className: "progress", style: { width: `${r.currentTime / m * 100}%` } }) }) })
+    /* @__PURE__ */ F("div", { className: "controller", children: [
+      n.isPlaying && /* @__PURE__ */ a("div", { className: "pause", onClick: W, title: "Pause", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
+      !n.isPlaying && n.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: H, title: "Play", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
+      !n.isPlaying && !n.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: N, title: "Start", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
+      /* @__PURE__ */ a("div", { className: "timer", children: ee(n.currentTime) }),
+      /* @__PURE__ */ a("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ a("div", { className: "progressbar", ref: R, onClick: I, children: /* @__PURE__ */ a("div", { className: "progress", style: { width: `${n.currentTime / w * 100}%` } }) }) })
     ] })
   ] });
 }
-Q.propTypes = {
+te.propTypes = {
   frames: o.array.isRequired,
   options: o.shape({
     autoplay: o.bool,
@@ -142,6 +219,6 @@ Q.propTypes = {
   onJump: o.func
 };
 export {
-  K as PLAYER_FRAME_DELAY,
-  Q as default
+  me as PLAYER_FRAME_DELAY,
+  te as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "3.1.11",
+  "version": "3.1.13",
   "description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
   "keywords": [
     "react",
@@ -40,10 +40,10 @@
   "peerDependencies": {
     "react": "^19.0.0"
   },
-  "gitHead": "d050c2db5014a01199a48f0e99b71509f6ef1a7e",
+  "gitHead": "d571a921f32b979346e3d2bc64ecd7ab6d01a2ad",
   "dependencies": {
-    "@arcblock/react-hooks": "3.1.11",
-    "@arcblock/ux": "3.1.11",
+    "@arcblock/react-hooks": "3.1.13",
+    "@arcblock/ux": "3.1.13",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "ahooks": "^3.8.5",

package/src/Player.jsx

@@ -1,7 +1,7 @@
-/* eslint-disable react/no-unused-prop-types */
-import { useReducer, useState, useRef, useEffect } from 'react';
+/* eslint-disable react/no-unused-prop-types, no-console */
+import { useReducer, useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useSize, useInterval } from 'ahooks';
+import { useSize } from 'ahooks';
 import isUndefined from 'lodash/isUndefined';
 import noop from 'lodash/noop';
 
@@ -13,14 +13,13 @@ import {
   formatFrames,
   formatTime,
   findFrameAt,
-  isFrameAt,
   getFrameClass,
   getPlayerClass,
   defaultOptions,
   defaultState,
 } from './util';
 
-export const PLAYER_FRAME_DELAY = 8;
+export const PLAYER_FRAME_DELAY = 24;
 
 export default function Player({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
@@ -63,7 +62,7 @@ export default function Player({ ...rawProps }) {
     // console.log(`dispatch.${action.type}`, action.payload);
     switch (action.type) {
       case 'jump':
-        return { ...state, isPlaying: false, ...action.payload };
+        return { ...state, ...action.payload };
       case 'start':
         return { ...state, isStarted: true, lastTickTime: Date.now() };
       case 'play':
@@ -75,7 +74,7 @@ export default function Player({ ...rawProps }) {
       case 'tickEnd':
         return { ...state, isRendering: false, lastTickTime: Date.now(), ...action.payload };
       case 'reset':
-        return { ...state, currentFrame: 0, currentTime: 0, ...action.payload };
+        return { ...state, currentFrame: -1, currentTime: 0, ...action.payload };
       default:
         return { ...state, lastTickTime: Date.now(), ...action.payload };
     }
@@ -84,6 +83,8 @@ export default function Player({ ...rawProps }) {
   const terminal = useRef(null);
   const progress = useRef(null);
   const container = useRef(null);
+  const animationRef = useRef(null);
+  const startTimeRef = useRef(null);
   const [maxWidth, setMaxWidth] = useState(0);
   const size = useSize(document.body);
   const [state, dispatch] = useReducer(stateReducer, defaultState);
@@ -118,83 +119,133 @@ export default function Player({ ...rawProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width, maxWidth]);
 
-  // console.log('main.render', state, { totalFrame: frames.length, totalDuration });
-  // Render a frame
-  const renderFrame = (frameIndex, done) => {
-    const frame = frames[frameIndex];
-    if (frame && frame.content) {
-      if (state.requireReset) {
-        terminal.current.reset();
-      }
-
-      terminal.current.write(frame.content, () => {
-        if (typeof done === 'function') {
-          done();
+  // Render a frame with Promise-based approach
+  const renderFrame = useCallback(
+    (frameIndex) => {
+      return new Promise((resolve) => {
+        const frame = frames[frameIndex];
+        if (frame && frame.content && terminal.current) {
+          if (state.requireReset) {
+            terminal.current.reset();
+          }
+
+          terminal.current.write(frame.content, () => {
+            resolve();
+          });
+        } else {
+          resolve();
         }
       });
-    }
-  };
+    },
+    [frames, state.requireReset]
+  );
 
   // Emit a event
-  const emitEvent = (name) => {
-    if (typeof props[name] === 'function') {
-      props[name]({ state, frames, options });
-    }
-  };
+  const emitEvent = useCallback(
+    (name) => {
+      if (typeof props[name] === 'function') {
+        props[name]({ state, frames, options });
+      }
+    },
+    [props, state, frames, options]
+  );
 
-  const doJump = (time) => {
-    terminal.current.reset();
+  const doJump = useCallback(
+    async (time) => {
+      if (!terminal.current) return;
 
-    const toFrameIndex = findFrameAt(frames, time);
-    for (let i = 0; i < toFrameIndex; i++) {
-      renderFrame(i);
-    }
-  };
+      terminal.current.reset();
+      const toFrameIndex = findFrameAt(frames, time);
 
-  const onJump = (e) => {
-    if (!progress.current || !terminal.current || !state.isStarted) {
-      return false;
-    }
+      if (toFrameIndex >= 0) {
+        // Render all frames up to the target frame sequentially
+        for (let i = 0; i <= toFrameIndex; i++) {
+          // eslint-disable-next-line no-await-in-loop
+          await renderFrame(i);
+        }
+      }
+    },
+    [frames, renderFrame]
+  );
 
-    const length = progress.current.getBoundingClientRect().width;
-    const position = e.nativeEvent.offsetX;
-    // console.log('onJump', { length, position, e });
+  const onJump = useCallback(
+    (e) => {
+      if (!progress.current || !terminal.current || !state.isStarted) {
+        return false;
+      }
 
-    const currentTime = Math.floor((totalDuration * position) / length);
-    dispatch({ type: 'jump', payload: { currentTime } });
-    doJump(currentTime);
-    emitEvent('onJump');
+      const length = progress.current.getBoundingClientRect().width;
+      const position = e.nativeEvent.offsetX;
 
-    return false;
-  };
+      const currentTime = Math.floor((totalDuration * position) / length);
+      const targetFrameIndex = findFrameAt(frames, currentTime);
+
+      // Preserve the current playing state
+      const isCurrentlyPlaying = state.isPlaying;
+
+      // Update state to reflect the jump while preserving play state
+      dispatch({
+        type: 'jump',
+        payload: {
+          currentTime,
+          currentFrame: targetFrameIndex,
+          isPlaying: isCurrentlyPlaying, // Keep the same playing state
+        },
+      });
+
+      // Reset the timing for accurate playback after jump
+      startTimeRef.current = null;
 
-  const onStart = () => {
+      // Perform the jump
+      doJump(currentTime);
+      emitEvent('onJump');
+
+      return false;
+    },
+    [state.isStarted, state.isPlaying, totalDuration, frames, doJump, emitEvent]
+  );
+
+  const onStart = useCallback(() => {
     if (state.isStarted === false) {
       dispatch({ type: 'start' });
-      terminal.current.reset();
+      if (terminal.current) {
+        terminal.current.reset();
+      }
     }
 
-    dispatch({ type: 'play' });
+    // Reset start time and frame for accurate timing
+    startTimeRef.current = null;
+    dispatch({ type: 'play', payload: { currentFrame: -1, currentTime: 0 } });
     emitEvent('onStart');
 
     return false;
-  };
+  }, [state.isStarted, emitEvent]);
 
-  const onPause = () => {
+  const onPause = useCallback(() => {
     dispatch({ type: 'pause' });
     emitEvent('onPause');
     return false;
-  };
+  }, [emitEvent]);
 
-  const onPlay = () => {
-    if (state.currentFrame === frames.length - 1 && state.currentTime === totalDuration) {
-      dispatch({ type: 'reset' });
-      terminal.current.reset();
+  const onPlay = useCallback(() => {
+    if (state.currentFrame >= frames.length - 1) {
+      // Reset to beginning if at the end
+      dispatch({ type: 'reset', payload: { currentFrame: -1, currentTime: 0 } });
+      if (terminal.current) {
+        terminal.current.reset();
+      }
+      startTimeRef.current = null;
+      // Start from beginning
+      dispatch({ type: 'play', payload: { currentFrame: -1, currentTime: 0 } });
+    } else {
+      // Continue from current position
+      startTimeRef.current = null; // Reset timing for accurate playback
+      dispatch({ type: 'play' });
     }
 
     emitEvent('onPlay');
-    return onStart();
-  };
+    return false;
+  }, [state.currentFrame, frames.length, emitEvent]);
 
   // Render thumbnailTime
   useEffect(() => {
@@ -216,68 +267,137 @@ export default function Player({ ...rawProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Tick intervals
-  useInterval(
-    () => {
-      if (state.isRendering) {
-        return false;
-      }
+  // Use ref to store the latest state and avoid recreating the loop function
+  const stateRef = useRef(state);
+  stateRef.current = state;
 
-      const tickDelay = Date.now() - state.lastTickTime;
-      const newState = {};
+  // Animation loop - frame-based sequential rendering
+  const animationLoop = useCallback(async () => {
+    const currentState = stateRef.current;
 
-      if (state.currentTime < totalDuration) {
-        newState.currentTime = state.currentTime + tickDelay;
-      }
-      if (state.currentTime > totalDuration) {
-        newState.currentTime = totalDuration;
+    if (!currentState.isPlaying || currentState.isRendering) {
+      return;
+    }
+
+    const now = performance.now();
+    if (!startTimeRef.current) {
+      // Calculate start time based on current frame position
+      const currentFrameTime = currentState.currentFrame >= 0 ? frames[currentState.currentFrame]?.startTime || 0 : 0;
+      startTimeRef.current = now - currentFrameTime;
+    }
+
+    const elapsed = now - startTimeRef.current;
+
+    // Check if it's time to render the next frame
+    const { currentFrame } = currentState;
+    const nextFrameIndex = currentFrame + 1;
+
+    // If we've rendered all frames, we're done
+    if (currentFrame >= frames.length - 1) {
+      emitEvent('onComplete');
+
+      if (options.repeat) {
+        // Reset for repeat
+        startTimeRef.current = now;
+        dispatch({ type: 'reset', payload: { currentTime: 0, currentFrame: -1 } });
+        return;
       }
+      // Stop playing
+      const endState = {
+        currentTime: totalDuration,
+        currentFrame: frames.length - 1,
+        requireReset: true,
+        isStarted: false,
+      };
+      dispatch({ type: 'pause', payload: endState });
+      startTimeRef.current = null;
+      return;
+    }
 
-      const alreadyRendered = isFrameAt(frames, newState.currentTime, state.currentFrame);
-      if (state.currentFrame !== -1 && alreadyRendered) {
-        return dispatch({ type: 'tick', payload: newState });
+    // Calculate when the next frame should be rendered
+    const nextFrame = frames[nextFrameIndex];
+    if (!nextFrame) {
+      // No more frames, schedule next animation frame
+      if (state.isPlaying) {
+        animationRef.current = requestAnimationFrame(animationLoop);
       }
+      return;
+    }
 
-      // Reached the end
-      if (state.currentFrame === frames.length - 1) {
-        emitEvent('onComplete');
+    // Check if enough time has passed for the next frame
+    const frameStartTime = nextFrame.startTime || 0;
+    if (elapsed >= frameStartTime) {
+      // Time to render the next frame
+      dispatch({
+        type: 'tickStart',
+        payload: {
+          currentTime: frameStartTime,
+          currentFrame: nextFrameIndex,
+        },
+      });
 
-        if (options.repeat) {
-          // console.log('tick.restart', newState, state);
-          return dispatch({ type: 'reset', payload: newState });
+      try {
+        await renderFrame(nextFrameIndex);
+
+        const finalState = {
+          currentTime: frameStartTime,
+          currentFrame: nextFrameIndex,
+        };
+        if (currentState.requireReset) {
+          finalState.requireReset = false;
         }
 
-        // console.log('tick.end', newState, state);
-        newState.currentTime = 0;
-        newState.currentFrame = 0;
-        newState.requireReset = true;
-        newState.isStarted = false;
-        return dispatch({ type: 'pause', payload: newState });
+        dispatch({ type: 'tickEnd', payload: finalState });
+        emitEvent('onTick');
+      } catch (error) {
+        console.error('Frame rendering error:', error);
       }
+    } else {
+      // Just update time without rendering
+      dispatch({ type: 'tick', payload: { currentTime: elapsed } });
+    }
 
-      // Check if current time belongs to the next frame's duration
-      if (
-        newState?.currentTime != null &&
-        state?.currentFrame != null &&
-        isFrameAt(newState.currentTime, state.currentFrame + 1)
-      ) {
-        newState.currentFrame = state.currentFrame + 1;
-      } else {
-        newState.currentFrame = findFrameAt(frames, newState.currentTime);
-      }
+    // Don't schedule here - let useEffect handle it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [frames, renderFrame, emitEvent, options.repeat, totalDuration]);
 
-      // console.log('tick.tick', newState, state);
-      dispatch({ type: 'tickStart', payload: newState });
-      return renderFrame(newState.currentFrame, () => {
-        if (state.requireReset) {
-          newState.requireReset = false;
+  // Start/stop animation loop based on playing state
+  useEffect(() => {
+    let isActive = true;
+
+    const runAnimationLoop = async () => {
+      // eslint-disable-next-line no-await-in-loop
+      while (isActive && stateRef.current.isPlaying) {
+        // eslint-disable-next-line no-await-in-loop
+        await new Promise((resolve) => {
+          animationRef.current = requestAnimationFrame(resolve);
+        });
+
+        if (isActive && stateRef.current.isPlaying) {
+          // eslint-disable-next-line no-await-in-loop
+          await animationLoop();
         }
-        dispatch({ type: 'tickEnd', payload: newState });
-        return emitEvent('onTick');
-      });
-    },
-    state.isPlaying ? PLAYER_FRAME_DELAY : null
-  );
+      }
+    };
+
+    if (state.isPlaying) {
+      runAnimationLoop();
+    } else {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+      startTimeRef.current = null;
+    }
+
+    return () => {
+      isActive = false;
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, [state.isPlaying, animationLoop]);
 
   // If controls are enabled, we need to disable frameBox
   if (options.controls) {