@yimou6/common-ui 1.12.3 → 1.12.6

package/lib/components/monitor-playback/src/monitor-playback.vue2.js

@@ -0,0 +1,275 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+require('../timeline-ruler/src/timeline-ruler.vue.js');
+var monitorPlayback = require('./monitor-playback.js');
+var timelineRuler_vue_vue_type_script_setup_true_lang = require('../timeline-ruler/src/timeline-ruler.vue2.js');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const _hoisted_1 = { class: "replay-page" };
+const _hoisted_2 = { class: "player-wrap" };
+const _hoisted_3 = {
+  key: 0,
+  class: "player-error"
+};
+const _hoisted_4 = { class: "player-error__text" };
+const MAX_RETRY = 3;
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "IMonitorPlayback"
+  },
+  __name: "monitor-playback",
+  props: monitorPlayback.MonitorPlaybackProps,
+  setup(__props) {
+    const props = __props;
+    const playerContainerRef = vue.ref(null);
+    const timelineRef = vue.ref(null);
+    const kbpsInfo = vue.ref("-- KB/s");
+    const overlayTimeText = vue.ref("2026-05-02 15:02:17");
+    const errorMsg = vue.ref("");
+    let jessibuca = null;
+    let isDestroying = false;
+    let retryCount = 0;
+    const currentUrl = vue.ref(
+      props.url || "ws://cms.abaixun.com/websocket/0402b0580060f0df/0000000001.flv?starttime=20260502T150217&duration=3600&uuid=s1vwaoh0rse31rpgars33u1d68384buc"
+    );
+    let playStartTimeMs = 0;
+    let lastPtsMs = 0;
+    let playTimerId = null;
+    function pad(n) {
+      return String(n).padStart(2, "0");
+    }
+    __name(pad, "pad");
+    function syncStartTimeToUrl(unixSec) {
+      const d = new Date(unixSec * 1e3);
+      const val = `${pad(d.getFullYear()) + pad(d.getMonth() + 1) + pad(d.getDate())}T${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
+      currentUrl.value = currentUrl.value.replace(
+        /starttime=\d{8}T\d{6}/i,
+        `starttime=${val}`
+      );
+    }
+    __name(syncStartTimeToUrl, "syncStartTimeToUrl");
+    function commitWithTime(sec) {
+      syncStartTimeToUrl(sec);
+      playStream(currentUrl.value);
+    }
+    __name(commitWithTime, "commitWithTime");
+    function fmtTF(s) {
+      const d = new Date(s * 1e3);
+      return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+    }
+    __name(fmtTF, "fmtTF");
+    function fmtD(s) {
+      const d = new Date(s * 1e3);
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    }
+    __name(fmtD, "fmtD");
+    function parseStartTime(url) {
+      const m = url.match(/starttime=(\d{8}T\d{6})/i);
+      if (m)
+        return new Date(
+          m[1].replace(
+            /^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/,
+            "$1-$2-$3T$4:$5:$6"
+          )
+        );
+      const dm = url.match(/duration=(\d+)/i);
+      if (dm) return parseInt(dm[1]);
+      return null;
+    }
+    __name(parseStartTime, "parseStartTime");
+    async function playStream(url) {
+      if (!url) return;
+      if (isDestroying) {
+        await new Promise((r) => setTimeout(r, 600));
+        return playStream(url);
+      }
+      await destroyPlayer();
+      errorMsg.value = "";
+      const st = parseStartTime(url);
+      let dur = 3600;
+      const dm = url.match(/duration=(\d+)/i);
+      if (dm) dur = parseInt(dm[1]);
+      if (st instanceof Date) {
+        playStartTimeMs = st.getTime();
+      }
+      if (st && timelineRef.value) {
+        timelineRef.value.initRuler(st, dur);
+      }
+      createJessibuca(url);
+    }
+    __name(playStream, "playStream");
+    function createJessibuca(url) {
+      const win = window;
+      if (!win.Jessibuca) {
+        errorMsg.value = "Jessibuca \u64AD\u653E\u5668\u672A\u52A0\u8F7D";
+        return;
+      }
+      jessibuca = new win.Jessibuca({
+        container: playerContainerRef.value,
+        decoder: "./plugins/jessibuca/decoder.js",
+        videoBuffer: 0.2,
+        isResize: true,
+        isFullResize: true,
+        hasAudio: false,
+        debug: props.debug,
+        supportDblclickFullscreen: true,
+        showBandwidth: false,
+        operateBtns: {
+          fullscreen: true,
+          screenshot: true,
+          play: true,
+          audio: true,
+          record: true
+        },
+        // 优先使用 WASM 软解，支持 H.265
+        useMSE: false,
+        useWCS: false,
+        autoWasm: true,
+        isNotMute: true,
+        timeout: 10,
+        heartTimeout: 10,
+        loadingTimeout: 10,
+        heartTimeoutReplay: true,
+        heartTimeoutReplayTimes: MAX_RETRY,
+        loadingTimeoutReplay: true,
+        loadingTimeoutReplayTimes: MAX_RETRY
+      });
+      jessibuca.on("play", () => {
+        retryCount = 0;
+      });
+      jessibuca.on("timeUpdate", (ts) => {
+        lastPtsMs = ts;
+      });
+      jessibuca.on("kBps", (kbps) => {
+        kbpsInfo.value = `${Math.round(kbps)}KB/s`;
+      });
+      jessibuca.on("videoInfo", (info) => {
+        if (props.debug) {
+          console.log("[Jessibuca] videoInfo:", info);
+        }
+      });
+      jessibuca.on("error", (err) => {
+        console.error("[Jessibuca] error:", err);
+        const errCode = (err == null ? void 0 : err.code) || "";
+        const errMsg = String((err == null ? void 0 : err.message) || err || "");
+        if (errCode === "mediaSourceH265NotSupport" || errCode === "webcodecsH265NotSupport" || errMsg.includes("H265") || errMsg.includes("h265") || errMsg.includes("HEVC")) {
+          errorMsg.value = "\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 H.265/HEVC \u7F16\u7801\u64AD\u653E\uFF0C\u8BF7\u4F7F\u7528\u652F\u6301 HEVC \u786C\u89E3\u7684\u6D4F\u89C8\u5668";
+          destroyPlayer();
+        }
+      });
+      jessibuca.on("timeout", () => {
+        if (retryCount < MAX_RETRY) {
+          retryCount++;
+          console.warn(`[Jessibuca] \u8D85\u65F6\uFF0C\u7B2C ${retryCount}/${MAX_RETRY} \u6B21\u91CD\u8BD5...`);
+        }
+      });
+      jessibuca.on("streamEnd", () => {
+        if (props.debug) {
+          console.log("[Jessibuca] streamEnd: \u6D41\u7ED3\u675F");
+        }
+      });
+      jessibuca.play(url);
+    }
+    __name(createJessibuca, "createJessibuca");
+    async function destroyPlayer() {
+      if (!jessibuca) return;
+      isDestroying = true;
+      try {
+        await jessibuca.destroy();
+      } catch (_e) {
+      }
+      jessibuca = null;
+      const container = playerContainerRef.value;
+      if (container) {
+        container.innerHTML = "";
+      }
+      await new Promise((r) => setTimeout(r, 200));
+      isDestroying = false;
+    }
+    __name(destroyPlayer, "destroyPlayer");
+    function onTimelineSeek(sec) {
+      commitWithTime(sec);
+    }
+    __name(onTimelineSeek, "onTimelineSeek");
+    vue.onMounted(() => {
+      const win = window;
+      if (!win.Jessibuca) {
+        errorMsg.value = "Jessibuca \u64AD\u653E\u5668\u672A\u52A0\u8F7D\uFF0C\u8BF7\u68C0\u67E5 HTML \u662F\u5426\u5F15\u5165\u4E86 jessibuca.js";
+        return;
+      }
+      playStream(currentUrl.value);
+      startPlayTimer();
+    });
+    function startPlayTimer() {
+      playTimerId = setInterval(() => {
+        if (!jessibuca || !timelineRef.value) return;
+        if (playStartTimeMs > 0 && lastPtsMs >= 0) {
+          const timeMs = playStartTimeMs + lastPtsMs;
+          timelineRef.value.updateRulerTime(timeMs);
+          timelineRef.value.autoFollow();
+          overlayTimeText.value = `${fmtD(timeMs / 1e3)} ${fmtTF(timeMs / 1e3)}`;
+        }
+      }, 250);
+    }
+    __name(startPlayTimer, "startPlayTimer");
+    vue.onBeforeUnmount(() => {
+      if (playTimerId) clearInterval(playTimerId);
+      destroyPlayer();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createCommentVNode(" \u64AD\u653E\u5668 "),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.withDirectives(vue.createElementVNode(
+            "div",
+            {
+              ref_key: "playerContainerRef",
+              ref: playerContainerRef,
+              class: "jessibuca-container"
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ), [
+            [vue.vShow, !errorMsg.value]
+          ]),
+          errorMsg.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            _cache[0] || (_cache[0] = vue.createElementVNode(
+              "div",
+              { class: "player-error__icon" },
+              "\u26A0",
+              -1
+              /* CACHED */
+            )),
+            vue.createElementVNode(
+              "div",
+              _hoisted_4,
+              vue.toDisplayString(errorMsg.value),
+              1
+              /* TEXT */
+            )
+          ])) : vue.createCommentVNode("v-if", true)
+        ]),
+        vue.createCommentVNode(" \u523B\u5EA6\u5C3A\u65F6\u95F4\u8F74 "),
+        vue.createVNode(
+          timelineRuler_vue_vue_type_script_setup_true_lang.default,
+          {
+            ref_key: "timelineRef",
+            ref: timelineRef,
+            onSeek: onTimelineSeek
+          },
+          null,
+          512
+          /* NEED_PATCH */
+        )
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=monitor-playback.vue2.js.map

package/lib/components/monitor-playback/src/monitor-playback.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"monitor-playback.vue2.js","sources":["../../../../../../../packages/components/monitor-playback/src/monitor-playback.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport ITimelineRuler from \"../timeline-ruler/src/timeline-ruler.vue\";\nimport { MonitorPlaybackProps } from \"./monitor-playback\";\n\ndefineOptions({\n  name: \"IMonitorPlayback\",\n});\n\n// ==================== Props / State ====================\nconst props = defineProps(MonitorPlaybackProps);\n\n// ==================== DOM Refs ====================\nconst playerContainerRef = ref<HTMLDivElement | null>(null);\nconst timelineRef = ref<InstanceType<typeof ITimelineRuler> | null>(null);\n\n// ==================== UI State ====================\nconst kbpsInfo = ref(\"-- KB/s\");\nconst overlayTimeText = ref(\"2026-05-02 15:02:17\");\nconst errorMsg = ref(\"\");\n\n// ==================== Player State ====================\nlet jessibuca: any = null;\nlet isDestroying = false;\nlet retryCount = 0;\nconst MAX_RETRY = 3;\nconst currentUrl = ref(\n  props.url ||\n    \"ws://cms.abaixun.com/websocket/0402b0580060f0df/0000000001.flv?starttime=20260502T150217&duration=3600&uuid=s1vwaoh0rse31rpgars33u1d68384buc\",\n);\n\n// 记录播放起始时间，用于结合 timeUpdate 计算当前播放进度\nlet playStartTimeMs = 0;\nlet lastPtsMs = 0;\n\n// Timer ref\nlet playTimerId: ReturnType<typeof setInterval> | null = null;\n\n// ==================== Utils ====================\nfunction pad(n: number) {\n  return String(n).padStart(2, \"0\");\n}\n\nfunction syncStartTimeToUrl(unixSec: number) {\n  const d = new Date(unixSec * 1000);\n  const val = `${\n    pad(d.getFullYear()) + pad(d.getMonth() + 1) + pad(d.getDate())\n  }T${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;\n  currentUrl.value = currentUrl.value.replace(\n    /starttime=\\d{8}T\\d{6}/i,\n    `starttime=${val}`,\n  );\n}\n\nfunction commitWithTime(sec: number) {\n  syncStartTimeToUrl(sec);\n  playStream(currentUrl.value);\n}\n\nfunction fmtTF(s: number) {\n  const d = new Date(s * 1000);\n  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n}\n\nfunction fmtD(s: number) {\n  const d = new Date(s * 1000);\n  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;\n}\n\n// ==================== Player Functions ====================\nfunction parseStartTime(url: string): Date | number | null {\n  const m = url.match(/starttime=(\\d{8}T\\d{6})/i);\n  if (m)\n    return new Date(\n      m[1].replace(\n        /^(\\d{4})(\\d{2})(\\d{2})T(\\d{2})(\\d{2})(\\d{2})/,\n        \"$1-$2-$3T$4:$5:$6\",\n      ),\n    );\n  const dm = url.match(/duration=(\\d+)/i);\n  if (dm) return parseInt(dm[1]);\n  return null;\n}\n\nasync function playStream(url: string) {\n  if (!url) return;\n\n  // 如果正在销毁，延迟等待后再执行\n  if (isDestroying) {\n    await new Promise<void>((r) => setTimeout(r, 600));\n    return playStream(url);\n  }\n\n  await destroyPlayer();\n  errorMsg.value = \"\";\n\n  const st = parseStartTime(url);\n  let dur = 3600;\n  const dm = url.match(/duration=(\\d+)/i);\n  if (dm) dur = parseInt(dm[1]);\n\n  // 记录播放起始时间\n  if (st instanceof Date) {\n    playStartTimeMs = st.getTime();\n  }\n\n  if (st && timelineRef.value) {\n    timelineRef.value.initRuler(st as Date, dur);\n  }\n\n  // 创建 Jessibuca 实例\n  createJessibuca(url);\n}\n\nfunction createJessibuca(url: string) {\n  const win = window as any;\n  if (!win.Jessibuca) {\n    errorMsg.value = \"Jessibuca 播放器未加载\";\n    return;\n  }\n\n  jessibuca = new win.Jessibuca({\n    container: playerContainerRef.value!,\n    decoder: \"./plugins/jessibuca/decoder.js\",\n    videoBuffer: 0.2,\n    isResize: true,\n    isFullResize: true,\n    hasAudio: false,\n    debug: props.debug,\n    supportDblclickFullscreen: true,\n    showBandwidth: false,\n    operateBtns: {\n      fullscreen: true,\n      screenshot: true,\n      play: true,\n      audio: true,\n      record: true,\n    },\n    // 优先使用 WASM 软解，支持 H.265\n    useMSE: false,\n    useWCS: false,\n    autoWasm: true,\n    isNotMute: true,\n    timeout: 10,\n    heartTimeout: 10,\n    loadingTimeout: 10,\n    heartTimeoutReplay: true,\n    heartTimeoutReplayTimes: MAX_RETRY,\n    loadingTimeoutReplay: true,\n    loadingTimeoutReplayTimes: MAX_RETRY,\n  });\n\n  // ---- 事件监听 ----\n  jessibuca.on(\"play\", () => {\n    retryCount = 0;\n  });\n\n  jessibuca.on(\"timeUpdate\", (ts: number) => {\n    // ts 是当前帧的 pts（毫秒）\n    lastPtsMs = ts;\n  });\n\n  jessibuca.on(\"kBps\", (kbps: number) => {\n    kbpsInfo.value = `${Math.round(kbps)}KB/s`;\n  });\n\n  jessibuca.on(\"videoInfo\", (info: any) => {\n    if (props.debug) {\n      console.log(\"[Jessibuca] videoInfo:\", info);\n    }\n  });\n\n  jessibuca.on(\"error\", (err: any) => {\n    console.error(\"[Jessibuca] error:\", err);\n    const errCode = err?.code || \"\";\n    const errMsg = String(err?.message || err || \"\");\n    if (\n      errCode === \"mediaSourceH265NotSupport\" ||\n      errCode === \"webcodecsH265NotSupport\" ||\n      errMsg.includes(\"H265\") ||\n      errMsg.includes(\"h265\") ||\n      errMsg.includes(\"HEVC\")\n    ) {\n      errorMsg.value =\n        \"当前浏览器不支持 H.265/HEVC 编码播放，请使用支持 HEVC 硬解的浏览器\";\n      destroyPlayer();\n    }\n  });\n\n  jessibuca.on(\"timeout\", () => {\n    if (retryCount < MAX_RETRY) {\n      retryCount++;\n      console.warn(`[Jessibuca] 超时，第 ${retryCount}/${MAX_RETRY} 次重试...`);\n      // Jessibuca 内置重连，此处仅记录\n    }\n  });\n\n  jessibuca.on(\"streamEnd\", () => {\n    if (props.debug) {\n      console.log(\"[Jessibuca] streamEnd: 流结束\");\n    }\n  });\n\n  // 开始播放\n  jessibuca.play(url);\n}\n\nasync function destroyPlayer() {\n  if (!jessibuca) return;\n  isDestroying = true;\n  try {\n    await jessibuca.destroy();\n  } catch (_e) {}\n  jessibuca = null;\n\n  // destroy 完成后再清理容器内残留 DOM，避免 removeChild 冲突\n  const container = playerContainerRef.value;\n  if (container) {\n    container.innerHTML = \"\";\n  }\n\n  // 等待 WebGL/Worker 资源释放\n  await new Promise<void>((r) => setTimeout(r, 200));\n  isDestroying = false;\n}\n\n/** 时间轴 seek 跳转 */\nfunction onTimelineSeek(sec: number) {\n  commitWithTime(sec);\n}\n\n// ==================== Lifecycle ====================\nonMounted(() => {\n  const win = window as any;\n  if (!win.Jessibuca) {\n    errorMsg.value =\n      \"Jessibuca 播放器未加载，请检查 HTML 是否引入了 jessibuca.js\";\n    return;\n  }\n  playStream(currentUrl.value);\n  startPlayTimer();\n});\n\n/** 定时同步播放进度到时间轴 */\nfunction startPlayTimer() {\n  playTimerId = setInterval(() => {\n    if (!jessibuca || !timelineRef.value) return;\n\n    // 使用 playStartTimeMs + lastPtsMs 计算当前播放时间\n    // 对于回放流，pts 通常是从0开始的偏移量\n    if (playStartTimeMs > 0 && lastPtsMs >= 0) {\n      const timeMs = playStartTimeMs + lastPtsMs;\n      timelineRef.value.updateRulerTime(timeMs);\n      timelineRef.value.autoFollow();\n\n      // 更新叠加时间\n      overlayTimeText.value = `${fmtD(timeMs / 1000)} ${fmtTF(timeMs / 1000)}`;\n    }\n  }, 250);\n}\n\nonBeforeUnmount(() => {\n  if (playTimerId) clearInterval(playTimerId);\n  destroyPlayer();\n});\n</script>\n\n<template>\n  <div class=\"replay-page\">\n    <!-- 播放器 -->\n    <div class=\"player-wrap\">\n      <div\n        v-show=\"!errorMsg\"\n        ref=\"playerContainerRef\"\n        class=\"jessibuca-container\"\n      />\n      <div v-if=\"errorMsg\" class=\"player-error\">\n        <div class=\"player-error__icon\">⚠</div>\n        <div class=\"player-error__text\">{{ errorMsg }}</div>\n      </div>\n    </div>\n\n    <!-- 刻度尺时间轴 -->\n    <ITimelineRuler ref=\"timelineRef\" @seek=\"onTimelineSeek\" />\n  </div>\n</template>\n"],"names":["ref","onMounted","onBeforeUnmount","_openBlock","_createElementBlock","_createCommentVNode","_createElementVNode","_toDisplayString","_createVNode","ITimelineRuler"],"mappings":"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"}

package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.d.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes } from "vue";
+import type TimelineRuler from "./timeline-ruler.vue";
+export declare const TimelineRulerProps: {
+    startTime: {
+        type: DateConstructor;
+        default: null;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentTimeMs: {
+        type: NumberConstructor;
+        default: null;
+    };
+};
+export type TimelineRulerPropsType = ExtractPropTypes<typeof TimelineRulerProps>;
+export type TimelineRulerInstance = InstanceType<typeof TimelineRuler>;
+export interface TickCfg {
+    iv: number;
+    h: number;
+    w: number;
+    c: string;
+    lbl?: boolean;
+}

package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const TimelineRulerProps = {
+  /**
+   * 起始时间（Date 对象）
+   */
+  startTime: {
+    type: Date,
+    default: null
+  },
+  /**
+   * 持续时长（秒）
+   */
+  duration: {
+    type: Number,
+    default: 3600
+  },
+  /**
+   * 当前播放位置（毫秒时间戳），由外部同步
+   */
+  currentTimeMs: {
+    type: Number,
+    default: null
+  }
+};
+
+exports.TimelineRulerProps = TimelineRulerProps;
+//# sourceMappingURL=timeline-ruler.js.map

package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-ruler.js","sources":["../../../../../../../../packages/components/monitor-playback/timeline-ruler/src/timeline-ruler.ts"],"sourcesContent":["import type { ExtractPropTypes } from \"vue\";\n\nimport type TimelineRuler from \"./timeline-ruler.vue\";\n\nexport const TimelineRulerProps = {\n  /**\n   * 起始时间（Date 对象）\n   */\n  startTime: {\n    type: Date,\n    default: null,\n  },\n  /**\n   * 持续时长（秒）\n   */\n  duration: {\n    type: Number,\n    default: 3600,\n  },\n  /**\n   * 当前播放位置（毫秒时间戳），由外部同步\n   */\n  currentTimeMs: {\n    type: Number,\n    default: null,\n  },\n};\n\nexport type TimelineRulerPropsType = ExtractPropTypes<\n  typeof TimelineRulerProps\n>;\nexport type TimelineRulerInstance = InstanceType<typeof TimelineRuler>;\n\n/** 刻度配置项 */\nexport interface TickCfg {\n  iv: number;\n  h: number;\n  w: number;\n  c: string;\n  lbl?: boolean;\n}\n"],"names":[],"mappings":";;AAIO,MAAM,kBAAqB,GAAA;AAAA;AAAA;AAAA;AAAA,EAIhC,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,IAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,aAAe,EAAA;AAAA,IACb,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA;AAEb;;;;"}

package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.d.ts

@@ -0,0 +1,104 @@
+import type { TickCfg } from "./timeline-ruler";
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    startTime: {
+        type: DateConstructor;
+        default: null;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentTimeMs: {
+        type: NumberConstructor;
+        default: null;
+    };
+}>, {
+    props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        startTime: {
+            type: DateConstructor;
+            default: null;
+        };
+        duration: {
+            type: NumberConstructor;
+            default: number;
+        };
+        currentTimeMs: {
+            type: NumberConstructor;
+            default: null;
+        };
+    }>> & Readonly<{
+        onSeek?: ((...args: any[]) => any) | undefined;
+    }> & {}>;
+    emit: (event: "seek", ...args: any[]) => void;
+    canvasRef: import("vue").Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+    rulerAreaRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    recTrackRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    timeBigHtml: import("vue").Ref<string, string>;
+    timeDateText: import("vue").Ref<string, string>;
+    tipShow: import("vue").Ref<boolean, boolean>;
+    tipText: import("vue").Ref<string, string>;
+    tipElProxy: Element | null;
+    tipStyle: import("vue").Ref<Record<string, string>, Record<string, string>>;
+    zoomTagText: import("vue").Ref<string, string>;
+    RH: number;
+    BASE_Y: number;
+    FRIC: number;
+    BASE_TIME: number | null;
+    pph: number;
+    tPph: number;
+    offX: number;
+    dragging: boolean;
+    dragSX: number;
+    dragSO: number;
+    vel: number;
+    lpX: number;
+    lpT: number;
+    mX: number;
+    mIn: boolean;
+    _startTime: Date | null;
+    _durationSec: number;
+    _currentPlayMs: number | null;
+    cvs: HTMLCanvasElement | null;
+    cx: CanvasRenderingContext2D | null;
+    dpr: number;
+    rafId: number | null;
+    pad: (n: number) => string;
+    fmtT: (s: number) => string;
+    fmtTF: (s: number) => string;
+    fmtD: (s: number) => string;
+    dateToSec: (dt: Date) => number;
+    t2x: (t: number) => number;
+    x2t: (x: number) => number;
+    resize: () => void;
+    tCfg: () => Record<string, TickCfg>;
+    draw: () => void;
+    renderRecSegs: (w?: number) => void;
+    loop: () => void;
+    gx: (e: MouseEvent | TouchEvent) => number;
+    onDown: (e: MouseEvent | TouchEvent) => void;
+    onMove: (e: MouseEvent | TouchEvent) => void;
+    onUp: () => void;
+    initRuler: (startTimeDate: Date, durationSeconds?: number) => void;
+    updateRulerTime: (timeMs: number) => void;
+    autoFollow: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "seek"[], "seek", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    startTime: {
+        type: DateConstructor;
+        default: null;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentTimeMs: {
+        type: NumberConstructor;
+        default: null;
+    };
+}>> & Readonly<{
+    onSeek?: ((...args: any[]) => any) | undefined;
+}>, {
+    duration: number;
+    startTime: Date;
+    currentTimeMs: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var timelineRuler_vue_vue_type_script_setup_true_lang = require('./timeline-ruler.vue2.js');
+
+
+
+exports.default = timelineRuler_vue_vue_type_script_setup_true_lang.default;
+//# sourceMappingURL=timeline-ruler.vue.js.map

package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-ruler.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}