@yimou6/common-ui 1.12.3 → 1.12.4

package/es/components/monitor-playback/src/monitor-playback.vue2.mjs

@@ -0,0 +1,202 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createElementVNode, withModifiers, createVNode } from 'vue';
+import '../timeline-ruler/src/timeline-ruler.vue.mjs';
+import { MonitorPlaybackProps } from './monitor-playback.mjs';
+import _sfc_main$1 from '../timeline-ruler/src/timeline-ruler.vue2.mjs';
+
+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" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "IMonitorPlayback"
+  },
+  __name: "monitor-playback",
+  props: MonitorPlaybackProps,
+  setup(__props) {
+    const props = __props;
+    const videoRef = ref(null);
+    const timelineRef = ref(null);
+    const kbpsInfo = ref("-- KB/s");
+    const overlayTimeText = ref("2026-05-02 15:02:17");
+    let mpegts = null;
+    let player = null;
+    const currentUrl = ref(
+      props.url || "ws://cms.abaixun.com/websocket/0402b0580060f0df/0000000001.flv?starttime=20260502T150217&duration=3600&uuid=s1vwaoh0rse31rpgars33u1d68384buc"
+    );
+    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");
+    function playStream(url) {
+      if (!url) return;
+      if (!mpegts || !mpegts.isSupported()) return;
+      destroyPlayer();
+      const st = parseStartTime(url);
+      let dur = 3600;
+      const dm = url.match(/duration=(\d+)/i);
+      if (dm) dur = parseInt(dm[1]);
+      if (st && timelineRef.value) {
+        timelineRef.value.initRuler(st, dur);
+      }
+      player = mpegts.createPlayer(
+        { type: "flv", isLive: false, hasAudio: false, url },
+        {
+          enableStashBuffer: false,
+          stashInitialSize: 128,
+          lazyLoadMaxDuration: 1800,
+          seekType: "range"
+        }
+      );
+      player.attachMediaElement(videoRef.value);
+      player.on(mpegts.Events.ERROR, () => {
+      });
+      player.on(mpegts.Events.LOADING_COMPLETE, () => {
+      });
+      player.on(mpegts.Events.MEDIA_INFO, (_e) => {
+      });
+      player.on(mpegts.Events.STATISTICS_INFO, (s) => {
+        kbpsInfo.value = `${Math.round(s.speed / 1024)}KB/s`;
+      });
+      player.load();
+      videoRef.value.play().catch(() => {
+      });
+    }
+    __name(playStream, "playStream");
+    function destroyPlayer() {
+      if (!player) return;
+      try {
+        player.pause();
+        player.unload();
+        player.detachMediaElement();
+        player.destroy();
+      } catch (_e) {
+      }
+      player = null;
+    }
+    __name(destroyPlayer, "destroyPlayer");
+    function onTimelineSeek(sec) {
+      commitWithTime(sec);
+    }
+    __name(onTimelineSeek, "onTimelineSeek");
+    const win = window;
+    onMounted(async () => {
+      if (typeof window !== "undefined" && !win.mpegts) {
+        const script = document.createElement("script");
+        script.src = "https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js";
+        script.onload = () => {
+          mpegts = win.mpegts;
+          playStream(currentUrl.value);
+          startPlayTimer();
+        };
+        script.onerror = () => {
+        };
+        document.head.appendChild(script);
+      } else {
+        mpegts = win.mpegts;
+        playStream(currentUrl.value);
+        startPlayTimer();
+      }
+    });
+    function startPlayTimer() {
+      playTimerId = setInterval(() => {
+        if (!player || !videoRef.value || videoRef.value.paused || !timelineRef.value)
+          return;
+        const baseMatch = currentUrl.value.match(/starttime=(\d{8}T\d{6})/i);
+        if (baseMatch && baseMatch[1]) {
+          const base = new Date(
+            baseMatch[1].replace(
+              /^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/,
+              "$1-$2-$3T$4:$5:$6"
+            )
+          );
+          const timeMs = base.getTime() + videoRef.value.currentTime * (videoRef.value.playbackRate || 1) * 1e3;
+          timelineRef.value.updateRulerTime(timeMs);
+          timelineRef.value.autoFollow();
+          overlayTimeText.value = `${fmtD(timeMs / 1e3)} ${fmtTF(timeMs / 1e3)}`;
+        }
+      }, 250);
+    }
+    __name(startPlayTimer, "startPlayTimer");
+    onBeforeUnmount(() => {
+      if (playTimerId) clearInterval(playTimerId);
+      destroyPlayer();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" \u64AD\u653E\u5668 "),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode(
+            "video",
+            {
+              id: "player",
+              ref_key: "videoRef",
+              ref: videoRef,
+              muted: "",
+              controls: "",
+              onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["prevent"]))
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          )
+        ]),
+        createCommentVNode(" \u523B\u5EA6\u5C3A\u65F6\u95F4\u8F74 "),
+        createVNode(
+          _sfc_main$1,
+          {
+            ref_key: "timelineRef",
+            ref: timelineRef,
+            onSeek: onTimelineSeek
+          },
+          null,
+          512
+          /* NEED_PATCH */
+        )
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=monitor-playback.vue2.mjs.map

package/es/components/monitor-playback/src/monitor-playback.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"monitor-playback.vue2.mjs","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 videoRef = ref<HTMLVideoElement | 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\");\n\n// ==================== Player State ====================\nlet mpegts: any = null;\nlet player: any = null;\nconst currentUrl = ref(\n  props.url ||\n    \"ws://cms.abaixun.com/websocket/0402b0580060f0df/0000000001.flv?starttime=20260502T150217&duration=3600&uuid=s1vwaoh0rse31rpgars33u1d68384buc\",\n);\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\nfunction playStream(url: string) {\n  if (!url) return;\n  if (!mpegts || !mpegts.isSupported()) return;\n\n  destroyPlayer();\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  if (st && timelineRef.value) {\n    timelineRef.value.initRuler(st as Date, dur);\n  }\n\n  player = mpegts.createPlayer(\n    { type: \"flv\", isLive: false, hasAudio: false, url },\n    {\n      enableStashBuffer: false,\n      stashInitialSize: 128,\n      lazyLoadMaxDuration: 1800,\n      seekType: \"range\",\n    },\n  );\n  player.attachMediaElement(videoRef.value!);\n\n  player.on(mpegts.Events.ERROR, () => {});\n  player.on(mpegts.Events.LOADING_COMPLETE, () => {});\n  player.on(mpegts.Events.MEDIA_INFO, (_e: unknown) => {});\n  player.on(mpegts.Events.STATISTICS_INFO, (s: any) => {\n    kbpsInfo.value = `${Math.round(s.speed / 1024)}KB/s`;\n  });\n\n  player.load();\n  videoRef.value!.play().catch(() => {});\n}\n\nfunction destroyPlayer() {\n  if (!player) return;\n  try {\n    player.pause();\n    player.unload();\n    player.detachMediaElement();\n    player.destroy();\n  } catch (_e) {}\n  player = null;\n}\n\n/** 时间轴 seek 跳转 */\nfunction onTimelineSeek(sec: number) {\n  commitWithTime(sec);\n}\n\n// ==================== Lifecycle ====================\n// mpegts is loaded dynamically via script tag\nconst win = window as any;\nonMounted(async () => {\n  // 加载 mpegts.js\n  if (typeof window !== \"undefined\" && !win.mpegts) {\n    const script = document.createElement(\"script\");\n    script.src =\n      \"https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js\";\n    script.onload = () => {\n      mpegts = win.mpegts;\n      playStream(currentUrl.value);\n      startPlayTimer();\n    };\n    script.onerror = () => {};\n    document.head.appendChild(script);\n  } else {\n    mpegts = win.mpegts;\n    playStream(currentUrl.value);\n    startPlayTimer();\n  }\n});\n\n/** 定时同步播放进度到时间轴 */\nfunction startPlayTimer() {\n  playTimerId = setInterval(() => {\n    if (\n      !player ||\n      !videoRef.value ||\n      videoRef.value.paused ||\n      !timelineRef.value\n    )\n      return;\n    const baseMatch = currentUrl.value.match(/starttime=(\\d{8}T\\d{6})/i);\n    if (baseMatch && baseMatch[1]) {\n      const base = new Date(\n        baseMatch[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 timeMs =\n        base.getTime() +\n        videoRef.value!.currentTime *\n          (videoRef.value!.playbackRate || 1) *\n          1000;\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      <video id=\"player\" ref=\"videoRef\" muted controls @click.prevent />\n    </div>\n\n    <!-- 刻度尺时间轴 -->\n    <ITimelineRuler ref=\"timelineRef\" @seek=\"onTimelineSeek\" />\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode","_createElementVNode","_createVNode","ITimelineRuler"],"mappings":"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"}

package/es/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/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.mjs

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

package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-ruler.mjs","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/es/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/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './timeline-ruler.vue2.mjs';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=timeline-ruler.vue.mjs.map

package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.mjs.map

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