"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
var player_exports = {};
__export(player_exports, {
  default: () => Player
});
module.exports = __toCommonJS(player_exports);
var import_buffer = __toESM(require("buffer"));
var import_browser = __toESM(require("process/browser"));
var import_console_browserify = __toESM(require("console-browserify"));
var buffer = {
  Buffer: import_buffer.default
};
var import_jsx_runtime = require("react/jsx-runtime");
var import_utils = require("../utils");
var import_icons = require("@ant-design/icons");
var import_antd = require("antd");
var PIXI = __toESM(require("pixi.js"));
var import_unsafe_eval = require("pixi.js/unsafe-eval");
var import_react = require("react");
var import_blackboard = require("./blackboard");
var import_player = require("./player.css");
var import_store = require("./store");
const canvasPaddingLeft = 0;
const canvasPaddingTop = 0;
const cubicBezier = (t, p0, p1, p2, p3) => {
  const t2 = 1 - t;
  return p0 * t2 * t2 * t2 + 3 * p1 * t * t2 * t2 + 3 * p2 * t * t * t2 + p3 * t * t * t;
};
const cubicImage = (t) => {
  return linear(t);
};
const cubicInsightElement = (t) => {
  return cubicBezier(t, 0, 0.5, 0.5, 1);
};
const cubicMouse = (t) => {
  return linear(t);
};
const linear = (t) => {
  return t;
};
const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};
const ERROR_FRAME_CANCEL = "frame cancel (this is an error on purpose)";
const frameKit = () => {
  let cancelFlag = false;
  return {
    frame: (callback) => {
      if (cancelFlag) {
        throw new Error(ERROR_FRAME_CANCEL);
      }
      requestAnimationFrame(() => {
        if (cancelFlag) {
          throw new Error(ERROR_FRAME_CANCEL);
        }
        callback(performance.now());
      });
    },
    timeout: (callback, ms) => {
      if (cancelFlag) {
        throw new Error(ERROR_FRAME_CANCEL);
      }
      setTimeout(() => {
        if (cancelFlag) {
          throw new Error(ERROR_FRAME_CANCEL);
        }
        callback();
      }, ms);
    },
    cancel: () => {
      cancelFlag = true;
    }
  };
};
const singleElementFadeInDuration = 80;
const LAYER_ORDER_IMG = 0;
const LAYER_ORDER_INSIGHT = 1;
const LAYER_ORDER_POINTER = 2;
const LAYER_ORDER_SPINNING_POINTER = 3;
const downloadReport = (content) => {
  const blob = new Blob([content], { type: "text/html" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "midscene_report.html";
  a.click();
};
function Player(props) {
  var _a;
  const [titleText, setTitleText] = (0, import_react.useState)("");
  const [subTitleText, setSubTitleText] = (0, import_react.useState)("");
  const taskScripts = (0, import_store.useExecutionDump)(
    (store) => store.activeExecutionAnimation
  );
  const scripts = (props == null ? void 0 : props.replayScripts) ? props.replayScripts : taskScripts;
  const imageWidth = (props == null ? void 0 : props.imageWidth) || (0, import_store.useExecutionDump)((store) => store.insightWidth) || 1920;
  const imageHeight = (props == null ? void 0 : props.imageHeight) || (0, import_store.useExecutionDump)((store) => store.insightHeight) || 1080;
  const canvasWidth = imageWidth + canvasPaddingLeft * 2;
  const canvasHeight = imageHeight + canvasPaddingTop * 2;
  const currentImg = (0, import_react.useRef)(((_a = scripts == null ? void 0 : scripts[0]) == null ? void 0 : _a.img) || null);
  const divContainerRef = (0, import_react.useRef)(null);
  const app = (0, import_react.useMemo)(() => new PIXI.Application(), []);
  const imgSpriteMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
  const pointerSprite = (0, import_react.useRef)(null);
  const spinningPointerSprite = (0, import_react.useRef)(null);
  const [replayMark, setReplayMark] = (0, import_react.useState)(0);
  const windowContentContainer = (0, import_react.useMemo)(() => {
    const container = new PIXI.Container();
    return container;
  }, []);
  const insightMarkContainer = (0, import_react.useMemo)(() => {
    const container = new PIXI.Container();
    container.zIndex = LAYER_ORDER_INSIGHT;
    return container;
  }, []);
  const basicCameraState = {
    left: 0,
    top: 0,
    width: imageWidth,
    pointerLeft: Math.round(imageWidth / 2),
    pointerTop: Math.round(imageHeight / 2)
  };
  const [animationProgress, setAnimationProgress] = (0, import_react.useState)(-1);
  const cancelFlag = (0, import_react.useRef)(false);
  (0, import_react.useEffect)(() => {
    cancelFlag.current = false;
    return () => {
      cancelFlag.current = true;
    };
  }, []);
  const cameraState = (0, import_react.useRef)(__spreadValues({}, basicCameraState));
  const preloadImage = (img) => __async(this, null, function* () {
    if (imgSpriteMap.current.has(img))
      return;
    return PIXI.Assets.load(img).then((texture) => {
      const sprite = PIXI.Sprite.from(texture);
      imgSpriteMap.current.set(img, sprite);
    });
  });
  const repaintImage = () => __async(this, null, function* () {
    const imgToUpdate = currentImg.current;
    if (!imgToUpdate) {
      import_console_browserify.default.warn("no image to update");
      return;
    }
    if (!imgSpriteMap.current.has(imgToUpdate)) {
      import_console_browserify.default.warn("image not loaded", imgToUpdate);
      yield preloadImage(imgToUpdate);
    }
    const sprite = imgSpriteMap.current.get(imgToUpdate);
    if (!sprite) {
      throw new Error("sprite not found");
    }
    const mainImgLabel = "main-img";
    const child = windowContentContainer.getChildByLabel(mainImgLabel);
    if (child) {
      windowContentContainer.removeChild(child);
    }
    sprite.label = mainImgLabel;
    sprite.zIndex = LAYER_ORDER_IMG;
    sprite.width = imageWidth;
    sprite.height = imageHeight;
    windowContentContainer.addChild(sprite);
  });
  const spinningPointer = (frame) => {
    var _a2, _b;
    if (!spinningPointerSprite.current) {
      spinningPointerSprite.current = PIXI.Sprite.from(import_utils.mouseLoading);
      spinningPointerSprite.current.zIndex = LAYER_ORDER_SPINNING_POINTER;
      spinningPointerSprite.current.anchor.set(0.5, 0.5);
      spinningPointerSprite.current.scale.set(0.5);
      spinningPointerSprite.current.label = "spinning-pointer";
    }
    spinningPointerSprite.current.x = ((_a2 = pointerSprite.current) == null ? void 0 : _a2.x) || 0;
    spinningPointerSprite.current.y = ((_b = pointerSprite.current) == null ? void 0 : _b.y) || 0;
    windowContentContainer.addChild(spinningPointerSprite.current);
    let startTime;
    let isCancelled = false;
    const animate = (currentTime) => {
      if (isCancelled)
        return;
      if (!startTime)
        startTime = currentTime;
      const elapsedTime = currentTime - startTime;
      const progress = (Math.sin(elapsedTime / 500 - Math.PI / 2) + 1) / 2;
      const rotation = progress * Math.PI * 2;
      if (spinningPointerSprite.current) {
        spinningPointerSprite.current.rotation = rotation;
      }
      frame(animate);
    };
    frame(animate);
    const stopFn = () => {
      if (spinningPointerSprite.current) {
        windowContentContainer.removeChild(spinningPointerSprite.current);
      }
      isCancelled = true;
    };
    return stopFn;
  };
  const updatePointer = (img, x, y) => __async(this, null, function* () {
    var _a2, _b;
    if (!imgSpriteMap.current.has(img)) {
      import_console_browserify.default.warn("image not loaded", img);
      yield preloadImage(img);
    }
    const sprite = imgSpriteMap.current.get(img);
    if (!sprite) {
      throw new Error("sprite not found");
    }
    let targetX = (_a2 = pointerSprite.current) == null ? void 0 : _a2.x;
    let targetY = (_b = pointerSprite.current) == null ? void 0 : _b.y;
    if (typeof x === "number") {
      targetX = x;
    }
    if (typeof y === "number") {
      targetY = y;
    }
    if (typeof targetX === "undefined" || typeof targetY === "undefined") {
      import_console_browserify.default.warn("invalid pointer position", x, y);
      return;
    }
    if (pointerSprite.current) {
      const pointer = windowContentContainer.getChildByLabel("pointer");
      if (pointer) {
        windowContentContainer.removeChild(pointer);
      }
    }
    pointerSprite.current = sprite;
    pointerSprite.current.x = targetX;
    pointerSprite.current.y = targetY;
    pointerSprite.current.label = "pointer";
    pointerSprite.current.zIndex = LAYER_ORDER_POINTER;
    windowContentContainer.addChild(pointerSprite.current);
  });
  const updateCamera = (state) => {
    cameraState.current = state;
    const newScale = Math.max(1, imageWidth / state.width);
    windowContentContainer.scale.set(newScale);
    windowContentContainer.x = Math.round(
      canvasPaddingLeft - state.left * newScale
    );
    windowContentContainer.y = Math.round(
      canvasPaddingTop - state.top * newScale
    );
    const pointer = windowContentContainer.getChildByLabel("pointer");
    if (pointer) {
      pointer.scale.set(1 / newScale);
      if (typeof state.pointerLeft === "number" && typeof state.pointerTop === "number") {
        pointer.x = state.pointerLeft;
        pointer.y = state.pointerTop;
      }
    }
  };
  const cameraAnimation = (targetState, duration, frame) => __async(this, null, function* () {
    const currentState = __spreadValues({}, cameraState.current);
    const startLeft = currentState.left;
    const startTop = currentState.top;
    const startPointerLeft = currentState.pointerLeft;
    const startPointerTop = currentState.pointerTop;
    const startScale = currentState.width / imageWidth;
    const startTime = performance.now();
    const shouldMovePointer = typeof targetState.pointerLeft === "number" && typeof targetState.pointerTop === "number" && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
    const pointerMoveDuration = shouldMovePointer ? duration * 0.375 : 0;
    const cameraMoveStart = pointerMoveDuration;
    const cameraMoveDuration = duration - pointerMoveDuration;
    yield new Promise((resolve) => {
      const animate = (currentTime) => {
        const nextState = __spreadValues({}, cameraState.current);
        const elapsedTime = currentTime - startTime;
        if (shouldMovePointer) {
          if (elapsedTime <= pointerMoveDuration) {
            const rawMouseProgress = Math.min(
              elapsedTime / pointerMoveDuration,
              1
            );
            const mouseProgress = cubicMouse(rawMouseProgress);
            nextState.pointerLeft = startPointerLeft + (targetState.pointerLeft - startPointerLeft) * mouseProgress;
            nextState.pointerTop = startPointerTop + (targetState.pointerTop - startPointerTop) * mouseProgress;
          } else {
            nextState.pointerLeft = targetState.pointerLeft;
            nextState.pointerTop = targetState.pointerTop;
          }
        }
        if (elapsedTime > cameraMoveStart) {
          const cameraElapsedTime = elapsedTime - cameraMoveStart;
          const rawCameraProgress = Math.min(
            cameraElapsedTime / cameraMoveDuration,
            1
          );
          const cameraProgress = cubicImage(rawCameraProgress);
          const targetScale = targetState.width / imageWidth;
          const progressScale = startScale + (targetScale - startScale) * cameraProgress;
          const progressWidth = imageWidth * progressScale;
          const progressHeight = imageHeight * progressScale;
          nextState.width = progressWidth;
          const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
          const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
          const horizontalExceed = progressLeft + progressWidth - imageWidth;
          const verticalExceed = progressTop + progressHeight - imageHeight;
          nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
          nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
        }
        updateCamera(nextState);
        if (elapsedTime < duration) {
          frame(animate);
        } else {
          resolve();
        }
      };
      frame(animate);
    });
  });
  const fadeInGraphics = (graphics, duration, frame, targetAlpha = 1) => {
    return new Promise((resolve) => {
      const startTime = performance.now();
      const animate = (currentTime) => {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        graphics.alpha = targetAlpha === 0 ? 1 - linear(progress) : linear(progress);
        if (elapsedTime < duration) {
          frame(animate);
        } else {
          resolve();
        }
      };
      frame(animate);
    });
  };
  const fadeOutItem = (graphics, duration, frame) => __async(this, null, function* () {
    return fadeInGraphics(graphics, duration, frame, 0);
  });
  const insightElementsAnimation = (elements, highlightElements, duration, frame) => __async(this, null, function* () {
    insightMarkContainer.removeChildren();
    const elementsToAdd = [...elements];
    const totalLength = elementsToAdd.length;
    let childrenCount = 0;
    yield new Promise((resolve) => {
      const startTime = performance.now();
      const animate = (currentTime) => {
        const elapsedTime = currentTime - startTime;
        const progress = cubicInsightElement(
          Math.min(elapsedTime / duration, 1)
        );
        const elementsToAddNow = Math.floor(progress * totalLength);
        while (childrenCount < elementsToAddNow) {
          const randomIndex = Math.floor(Math.random() * elementsToAdd.length);
          const element = elementsToAdd.splice(randomIndex, 1)[0];
          if (element) {
            const [insightMarkGraphic] = (0, import_blackboard.rectMarkForItem)(
              element.rect,
              element.content,
              false
            );
            insightMarkGraphic.alpha = 0;
            insightMarkContainer.addChild(insightMarkGraphic);
            childrenCount++;
            fadeInGraphics(
              insightMarkGraphic,
              singleElementFadeInDuration,
              frame
            );
          }
        }
        if (elapsedTime < duration) {
          frame(animate);
        } else {
          while (elementsToAdd.length > 0) {
            const randomIndex = Math.floor(
              Math.random() * elementsToAdd.length
            );
            const element = elementsToAdd.splice(randomIndex, 1)[0];
            const [insightMarkGraphic] = (0, import_blackboard.rectMarkForItem)(
              element.rect,
              element.content,
              false
            );
            insightMarkGraphic.alpha = 1;
            insightMarkContainer.addChild(insightMarkGraphic);
          }
          highlightElements.map((element) => {
            const [insightMarkGraphic] = (0, import_blackboard.rectMarkForItem)(
              element.rect,
              element.content,
              true
            );
            insightMarkGraphic.alpha = 1;
            insightMarkContainer.addChild(insightMarkGraphic);
          });
          resolve();
        }
      };
      frame(animate);
    });
  });
  const init = () => __async(this, null, function* () {
    if (!divContainerRef.current || !scripts)
      return;
    yield app.init({
      width: canvasWidth,
      height: canvasHeight,
      background: 16053492
    });
    divContainerRef.current.appendChild(app.canvas);
    windowContentContainer.x = 0;
    windowContentContainer.y = 0;
    app.stage.addChild(windowContentContainer);
    insightMarkContainer.x = 0;
    insightMarkContainer.y = 0;
    windowContentContainer.addChild(insightMarkContainer);
  });
  const play = () => {
    let cancelFn;
    Promise.resolve(
      (() => __async(this, null, function* () {
        if (!app) {
          throw new Error("app is not initialized");
        }
        if (!scripts) {
          throw new Error("scripts is required");
        }
        const { frame, cancel, timeout } = frameKit();
        cancelFn = cancel;
        const allImages = scripts.filter((item) => !!item.img).map((item) => item.img);
        yield Promise.all([...allImages, import_utils.mouseLoading].map(preloadImage));
        insightMarkContainer.removeChildren();
        yield updatePointer(import_utils.mousePointer, imageWidth / 2, imageHeight / 2);
        yield repaintImage();
        yield updateCamera(__spreadValues({}, basicCameraState));
        const totalDuration = scripts.reduce((acc, item) => {
          return acc + item.duration + (item.insightCameraDuration || 0);
        }, 0);
        const progressUpdateInterval = 200;
        const startTime = performance.now();
        setAnimationProgress(0);
        const updateProgress = () => {
          const progress = Math.min(
            (performance.now() - startTime) / totalDuration,
            1
          );
          setAnimationProgress(progress);
          if (progress < 1) {
            return timeout(updateProgress, progressUpdateInterval);
          }
        };
        frame(updateProgress);
        for (const index in scripts) {
          const item = scripts[index];
          setTitleText(item.title || "");
          setSubTitleText(item.subTitle || "");
          if (item.type === "sleep") {
            yield sleep(item.duration);
          } else if (item.type === "insight") {
            if (!item.insightDump || !item.img) {
              throw new Error("insight dump or img is required");
            }
            currentImg.current = item.img;
            yield repaintImage();
            const elements = item.insightDump.context.content;
            const highlightElements = item.insightDump.matchedElement;
            yield insightElementsAnimation(
              elements,
              highlightElements,
              item.duration,
              frame
            );
            if (item.camera) {
              if (!item.insightCameraDuration) {
                throw new Error("insightCameraDuration is required");
              }
              yield cameraAnimation(
                item.camera,
                item.insightCameraDuration,
                frame
              );
            }
          } else if (item.type === "clear-insight") {
            yield fadeOutItem(insightMarkContainer, item.duration, frame);
            insightMarkContainer.removeChildren();
            insightMarkContainer.alpha = 1;
          } else if (item.type === "img") {
            if (item.img && item.img !== currentImg.current) {
              currentImg.current = item.img;
              yield repaintImage();
            }
            if (item.camera) {
              yield cameraAnimation(item.camera, item.duration, frame);
            } else {
              yield sleep(item.duration);
            }
          } else if (item.type === "pointer") {
            if (!item.img) {
              throw new Error("pointer img is required");
            }
            yield updatePointer(item.img);
          } else if (item.type === "spinning-pointer") {
            const stop = spinningPointer(frame);
            yield sleep(item.duration);
            stop();
          }
        }
      }))().catch((e) => {
        import_console_browserify.default.error("player error", e);
      })
    );
    return () => {
      cancelFn == null ? void 0 : cancelFn();
    };
  };
  (0, import_react.useEffect)(() => {
    Promise.resolve(
      (() => __async(this, null, function* () {
        yield init();
        setReplayMark(Date.now());
      }))()
    );
    return () => {
      try {
        app.destroy(true, { children: true, texture: true });
      } catch (e) {
        import_console_browserify.default.warn("destroy failed", e);
      }
    };
  }, []);
  (0, import_react.useEffect)(() => {
    if (replayMark) {
      return play();
    }
  }, [replayMark]);
  const [mouseOverStatusIcon, setMouseOverStatusIcon] = (0, import_react.useState)(false);
  const progressString = Math.round(animationProgress * 100);
  const transitionStyle = animationProgress === 0 ? "none" : "0.3s";
  const canReplayNow = animationProgress === 1;
  (0, import_react.useEffect)(() => {
    if (canReplayNow) {
      const listener = (event) => {
        if (event.key === " ") {
          setReplayMark(Date.now());
        }
      };
      window.addEventListener("keydown", listener);
      return () => {
        window.removeEventListener("keydown", listener);
      };
    }
  }, [canReplayNow]);
  let statusIconElement;
  const statusStyle = {};
  let statusOnClick = () => {
  };
  if (animationProgress < 1) {
    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, { spin: true }), size: "default" });
  } else if (mouseOverStatusIcon) {
    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, {}), size: "default" });
    statusStyle.cursor = "pointer";
    statusStyle.background = "#888";
    statusOnClick = () => setReplayMark(Date.now());
  } else {
    statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, {}), size: "default" });
  }
  const playerTopToolbar = (props == null ? void 0 : props.reportFileContent) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-tools-right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-tools-item", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_antd.Button,
    {
      color: "primary",
      variant: "link",
      size: "small",
      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownloadOutlined, {}),
      onClick: () => downloadReport(props.reportFileContent),
      children: "Report File"
    }
  ) }) }) : null;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-container", children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "canvas-container", ref: divContainerRef }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-timeline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        className: "player-timeline-progress",
        style: {
          width: `${progressString}%`,
          transition: transitionStyle
        }
      }
    ) }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-tools", children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-control", children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "div",
          {
            className: "status-icon",
            onMouseEnter: () => setMouseOverStatusIcon(true),
            onMouseLeave: () => setMouseOverStatusIcon(false),
            style: statusStyle,
            onClick: statusOnClick,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_antd.ConfigProvider,
              {
                theme: {
                  components: {
                    Spin: {
                      dotSize: 24,
                      colorPrimary: "rgb(6,177,171)"
                    }
                  }
                },
                children: statusIconElement
              }
            )
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "status-text", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: titleText }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "subtitle", children: subTitleText })
        ] })
      ] }),
      playerTopToolbar
    ] })
  ] });
}
