@give-tech/ec-player-vue 1.0.0

package/dist/index.js

@@ -0,0 +1,672 @@
+import { ref, shallowRef, reactive, onUnmounted, computed, onMounted, defineComponent, watch, openBlock, createElementBlock, createElementVNode, unref, normalizeClass, toDisplayString, Fragment, createCommentVNode, normalizeStyle, mergeDefaults } from "vue";
+import { setLogLevel, EcPlayerCore, EnvDetector } from "@give-tech/ec-player";
+import { LogLevel } from "@give-tech/ec-player";
+const DEFAULT_EC_PLAYER_PROPS = {
+  showEnvPanel: false,
+  showControls: true
+};
+const DEFAULT_PLAYER_OPTIONS = {
+  targetBufferSize: 60,
+  decodeBatchSize: 2,
+  maxQueueSize: 200
+};
+const DEFAULT_WASM_CONFIG = {
+  simd: "/wasm/decoder-simd.js",
+  nonSimd: "/wasm/decoder.js"
+};
+let globalConfig = {};
+function configureEcPlayer(config) {
+  globalConfig = { ...globalConfig, ...config };
+}
+function getGlobalConfig() {
+  return { ...globalConfig };
+}
+function getWasmConfig() {
+  return {
+    simd: globalConfig.wasm?.simd ?? DEFAULT_WASM_CONFIG.simd,
+    nonSimd: globalConfig.wasm?.nonSimd ?? DEFAULT_WASM_CONFIG.nonSimd
+  };
+}
+function getMergedConfig(props) {
+  return {
+    showEnvPanel: props.showEnvPanel ?? DEFAULT_EC_PLAYER_PROPS.showEnvPanel,
+    showControls: props.showControls ?? globalConfig.showControls ?? DEFAULT_EC_PLAYER_PROPS.showControls
+  };
+}
+function getMergedPlayerOptions(options) {
+  return {
+    targetBufferSize: options.targetBufferSize ?? globalConfig.targetBufferSize ?? DEFAULT_PLAYER_OPTIONS.targetBufferSize,
+    decodeBatchSize: options.decodeBatchSize ?? globalConfig.decodeBatchSize ?? DEFAULT_PLAYER_OPTIONS.decodeBatchSize,
+    maxQueueSize: options.maxQueueSize ?? globalConfig.maxQueueSize ?? DEFAULT_PLAYER_OPTIONS.maxQueueSize
+  };
+}
+function resolveWasmPath(hasSimdSupport) {
+  const wasmConfig = getWasmConfig();
+  if (hasSimdSupport && wasmConfig.simd) {
+    console.log("[EcPlayer] Using SIMD WASM:", wasmConfig.simd);
+    return wasmConfig.simd;
+  }
+  if (wasmConfig.nonSimd) {
+    console.log("[EcPlayer] SIMD not supported, using non-SIMD WASM:", wasmConfig.nonSimd);
+    return wasmConfig.nonSimd;
+  }
+  console.log("[EcPlayer] No non-SIMD path configured, falling back to SIMD:", wasmConfig.simd);
+  return wasmConfig.simd;
+}
+function createConfig(options) {
+  const envInfo = EnvDetector.detect();
+  const wasmPath = resolveWasmPath(envInfo.capabilities.wasmSimd);
+  return {
+    wasmPath,
+    targetBufferSize: options.targetBufferSize,
+    decodeBatchSize: options.decodeBatchSize,
+    maxQueueSize: options.maxQueueSize
+  };
+}
+function usePlayer(props, emit) {
+  const canvasRef = ref(null);
+  const player = shallowRef(null);
+  const isLoading = ref(false);
+  const detectedFormat = ref("");
+  const isLive = ref(false);
+  const globalConfig2 = getGlobalConfig();
+  const currentOptions = reactive({
+    targetBufferSize: globalConfig2.targetBufferSize ?? DEFAULT_PLAYER_OPTIONS.targetBufferSize,
+    decodeBatchSize: globalConfig2.decodeBatchSize ?? DEFAULT_PLAYER_OPTIONS.decodeBatchSize,
+    maxQueueSize: globalConfig2.maxQueueSize ?? DEFAULT_PLAYER_OPTIONS.maxQueueSize
+  });
+  const state = reactive({
+    isPlaying: false,
+    isLoaded: false,
+    isLoading: false,
+    fps: 0,
+    resolution: "-",
+    decoded: 0,
+    downloaded: 0,
+    droppedFrames: 0,
+    isPrefetching: false,
+    segmentIndex: 0,
+    totalSegments: 0,
+    downloadSpeed: 0,
+    currentTime: 0,
+    duration: 0
+  });
+  const callbacks = {
+    onStateChange: (partial) => {
+      Object.assign(state, partial);
+      emit("state-change", partial);
+      if (partial.isPlaying === true) {
+        emit("play");
+      } else if (partial.isPlaying === false && state.isPlaying) {
+        emit("pause");
+      }
+    },
+    onError: (error) => {
+      console.error("[EcPlayer] Error:", error);
+      emit("error", error);
+    }
+  };
+  async function play(options) {
+    const { url, isLive: isLiveParam = false } = options;
+    if (!url) {
+      emit("error", new Error("URL is required"));
+      return;
+    }
+    if (isLoading.value) {
+      console.log("[EcPlayer] Already loading, skipping...");
+      return;
+    }
+    let retries = 10;
+    while (!canvasRef.value && retries > 0) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      retries--;
+    }
+    if (!canvasRef.value) {
+      const error = new Error("Canvas element not found");
+      emit("error", error);
+      return;
+    }
+    isLoading.value = true;
+    isLive.value = isLiveParam;
+    try {
+      if (player.value) {
+        player.value.destroy();
+        player.value = null;
+      }
+      state.isPlaying = false;
+      state.isLoaded = false;
+      state.fps = 0;
+      state.resolution = "-";
+      state.decoded = 0;
+      state.downloaded = 0;
+      state.droppedFrames = 0;
+      state.segmentIndex = 0;
+      state.totalSegments = 0;
+      state.downloadSpeed = 0;
+      state.currentTime = 0;
+      state.duration = 0;
+      detectedFormat.value = "";
+      const config = {
+        ...createConfig(currentOptions),
+        canvas: canvasRef.value,
+        isLive: isLiveParam
+      };
+      player.value = new EcPlayerCore(config, callbacks);
+      await player.value.load(url, isLiveParam);
+      detectedFormat.value = player.value.getDetectedFormat();
+      emit("format-detected", detectedFormat.value);
+      state.isLoaded = true;
+      emit("loaded");
+      await player.value.play();
+      console.log("[EcPlayer] Playing stream, format:", detectedFormat.value);
+    } catch (error) {
+      console.error("[EcPlayer] Failed to play:", error?.message || error);
+      emit("error", error);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  function setOptions(options) {
+    if (options.targetBufferSize !== void 0) {
+      currentOptions.targetBufferSize = options.targetBufferSize;
+    }
+    if (options.decodeBatchSize !== void 0) {
+      currentOptions.decodeBatchSize = options.decodeBatchSize;
+    }
+    if (options.maxQueueSize !== void 0) {
+      currentOptions.maxQueueSize = options.maxQueueSize;
+    }
+    console.log("[EcPlayer] Options updated:", currentOptions);
+  }
+  function setLogLevel$1(level) {
+    setLogLevel(level);
+  }
+  function pause() {
+    player.value?.pause();
+  }
+  async function resume() {
+    if (!player.value) return;
+    await player.value.play();
+  }
+  async function seek(time) {
+    if (!player.value) return;
+    await player.value.seek(time);
+  }
+  function getPlayer() {
+    return player.value;
+  }
+  function getState() {
+    return player.value?.getState() ?? { ...state };
+  }
+  function getCurrentTime() {
+    return player.value?.getCurrentTime() ?? 0;
+  }
+  function getDuration() {
+    return player.value?.getDuration() ?? 0;
+  }
+  function destroy() {
+    if (player.value) {
+      player.value.destroy();
+      player.value = null;
+    }
+  }
+  onUnmounted(() => {
+    destroy();
+  });
+  return {
+    canvasRef,
+    player,
+    state,
+    isLoading,
+    detectedFormat,
+    isLive,
+    play,
+    setOptions,
+    setLogLevel: setLogLevel$1,
+    pause,
+    resume,
+    seek,
+    getPlayer,
+    getState,
+    getCurrentTime,
+    getDuration,
+    destroy
+  };
+}
+let hideControlsTimer = null;
+function useControls(params) {
+  const {
+    isPlaying,
+    isLoaded,
+    currentTime,
+    duration,
+    segmentIndex,
+    totalSegments,
+    isLive,
+    seek
+  } = params;
+  const showControls = ref(true);
+  const hoverTime = ref(null);
+  const hoverPosition = ref(0);
+  const playProgress = computed(() => {
+    if (duration.value === 0) return 0;
+    return currentTime.value / duration.value * 100;
+  });
+  const bufferProgress = computed(() => {
+    if (totalSegments.value === 0) return 0;
+    return segmentIndex.value / totalSegments.value * 100;
+  });
+  function showControlsBar() {
+    showControls.value = true;
+    if (hideControlsTimer) {
+      clearTimeout(hideControlsTimer);
+    }
+    hideControlsTimer = window.setTimeout(() => {
+      if (isPlaying.value) {
+        showControls.value = false;
+      }
+    }, 3e3);
+  }
+  function hideControlsBar() {
+    if (isPlaying.value) {
+      showControls.value = false;
+    }
+  }
+  async function handleProgressClick(event) {
+    if (duration.value === 0) return;
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const clickX = event.clientX - rect.left;
+    const percentage = clickX / rect.width;
+    const targetTime = percentage * duration.value;
+    await seek(targetTime);
+  }
+  function handleProgressHover(event) {
+    if (duration.value === 0) return;
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const hoverX = event.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, hoverX / rect.width));
+    hoverTime.value = percentage * duration.value;
+    hoverPosition.value = percentage * 100;
+  }
+  function formatTime(ms) {
+    const totalSeconds = Math.floor(ms / 1e3);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+    }
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return {
+    showControls,
+    hoverTime,
+    hoverPosition,
+    playProgress,
+    bufferProgress,
+    showControlsBar,
+    hideControlsBar,
+    handleProgressClick,
+    handleProgressHover,
+    formatTime
+  };
+}
+function useEnvInfo(initialShowPanel = false) {
+  const envInfo = ref(null);
+  const showEnvPanel = ref(initialShowPanel);
+  const envTypeText = computed(() => {
+    if (!envInfo.value) return "未知";
+    const typeMap = {
+      "pc-browser": "PC 浏览器",
+      "mobile-browser": "移动端浏览器",
+      "wechat-miniprogram": "微信小程序",
+      "alipay-miniprogram": "支付宝小程序",
+      "other-miniprogram": "其他小程序",
+      "unknown": "未知"
+    };
+    return typeMap[envInfo.value.platform] || envInfo.value.platform;
+  });
+  function toggleEnvPanel() {
+    showEnvPanel.value = !showEnvPanel.value;
+  }
+  function detectEnv() {
+    envInfo.value = EnvDetector.detect();
+    console.log("[EcPlayer] 环境检测结果:", envInfo.value);
+  }
+  onMounted(() => {
+    detectEnv();
+  });
+  return {
+    envInfo,
+    showEnvPanel,
+    envTypeText,
+    toggleEnvPanel,
+    detectEnv
+  };
+}
+const _hoisted_1 = { class: "gt-player-container" };
+const _hoisted_2 = {
+  key: 0,
+  class: "gt-env-panel"
+};
+const _hoisted_3 = { class: "gt-env-row" };
+const _hoisted_4 = { class: "gt-env-row" };
+const _hoisted_5 = { class: "gt-env-row" };
+const _hoisted_6 = { class: "gt-env-row" };
+const _hoisted_7 = { class: "gt-env-row" };
+const _hoisted_8 = { class: "gt-env-row" };
+const _hoisted_9 = { class: "gt-env-row" };
+const _hoisted_10 = { class: "gt-env-row" };
+const _hoisted_11 = { class: "gt-env-row" };
+const _hoisted_12 = { class: "gt-env-row" };
+const _hoisted_13 = { class: "gt-env-row" };
+const _hoisted_14 = { class: "gt-env-row" };
+const _hoisted_15 = { class: "gt-env-row" };
+const _hoisted_16 = { class: "gt-env-row" };
+const _hoisted_17 = {
+  key: 1,
+  class: "gt-loading-spinner"
+};
+const _hoisted_18 = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+};
+const _hoisted_19 = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+};
+const _hoisted_20 = {
+  key: 0,
+  class: "gt-live-indicator"
+};
+const _hoisted_21 = {
+  key: 1,
+  class: "gt-time-display"
+};
+const _hoisted_22 = { class: "gt-time-current" };
+const _hoisted_23 = { class: "gt-time-duration" };
+const _hoisted_24 = { class: "gt-progress-bar" };
+const _hoisted_25 = {
+  key: 3,
+  class: "gt-flex-spacer"
+};
+const _hoisted_26 = {
+  key: 4,
+  class: "gt-info-badge"
+};
+const _hoisted_27 = ["title"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EcPlayer",
+  props: /* @__PURE__ */ mergeDefaults({
+    showEnvPanel: { type: Boolean },
+    showControls: { type: Boolean }
+  }, DEFAULT_EC_PLAYER_PROPS),
+  emits: ["play", "pause", "loaded", "error", "state-change", "format-detected"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const canvasRef = ref(null);
+    const { envInfo, showEnvPanel, envTypeText, toggleEnvPanel } = useEnvInfo(props.showEnvPanel);
+    const player = usePlayer(props, emit);
+    watch(canvasRef, (el) => {
+      player.canvasRef.value = el;
+    }, { immediate: true });
+    const isLive = computed(() => player.isLive.value);
+    const isPlayingRef = computed(() => player.state.isPlaying);
+    const isLoadedRef = computed(() => player.state.isLoaded);
+    const currentTimeRef = computed(() => player.state.currentTime);
+    const durationRef = computed(() => player.state.duration);
+    const segmentIndexRef = computed(() => player.state.segmentIndex);
+    const totalSegmentsRef = computed(() => player.state.totalSegments);
+    const controls = useControls({
+      isPlaying: isPlayingRef,
+      isLoaded: isLoadedRef,
+      currentTime: currentTimeRef,
+      duration: durationRef,
+      segmentIndex: segmentIndexRef,
+      totalSegments: totalSegmentsRef,
+      isLive,
+      seek: player.seek
+    });
+    const videoWrapperRef = ref(null);
+    const showControlsProp = computed(() => props.showControls);
+    function togglePlayback() {
+      if (player.state.isPlaying) {
+        player.pause();
+      } else {
+        player.resume();
+      }
+    }
+    __expose({
+      play: player.play,
+      setOptions: player.setOptions,
+      setLogLevel: player.setLogLevel,
+      pause: player.pause,
+      seek: player.seek,
+      getPlayer: player.getPlayer,
+      getState: player.getState,
+      getCurrentTime: player.getCurrentTime,
+      getDuration: player.getDuration
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "gt-video-wrapper",
+          ref_key: "videoWrapperRef",
+          ref: videoWrapperRef,
+          onMouseenter: _cache[4] || (_cache[4] = //@ts-ignore
+          (...args) => unref(controls).showControlsBar && unref(controls).showControlsBar(...args)),
+          onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+          (...args) => unref(controls).showControlsBar && unref(controls).showControlsBar(...args)),
+          onMouseleave: _cache[6] || (_cache[6] = //@ts-ignore
+          (...args) => unref(controls).hideControlsBar && unref(controls).hideControlsBar(...args))
+        }, [
+          createElementVNode("canvas", {
+            ref_key: "canvasRef",
+            ref: canvasRef,
+            class: "gt-player-canvas"
+          }, null, 512),
+          unref(showEnvPanel) && unref(envInfo) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              _cache[7] || (_cache[7] = createElementVNode("span", null, "platform", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).isMiniProgram ? "warn" : "")
+              }, toDisplayString(unref(envTypeText)), 3)
+            ]),
+            _cache[22] || (_cache[22] = createElementVNode("div", { class: "gt-env-divider" }, null, -1)),
+            createElementVNode("div", _hoisted_4, [
+              _cache[8] || (_cache[8] = createElementVNode("span", null, "SIMD", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.wasmSimd ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.wasmSimd ? "Yes" : "No"), 3)
+            ]),
+            createElementVNode("div", _hoisted_5, [
+              _cache[9] || (_cache[9] = createElementVNode("span", null, "WebGL", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.webGL ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.webGL ? "Yes" : "No"), 3)
+            ]),
+            createElementVNode("div", _hoisted_6, [
+              _cache[10] || (_cache[10] = createElementVNode("span", null, "WebGL2", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.webGL2 ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.webGL2 ? "Yes" : "No"), 3)
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              _cache[11] || (_cache[11] = createElementVNode("span", null, "SAB", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.sharedArrayBuffer ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.sharedArrayBuffer ? "Yes" : "No"), 3)
+            ]),
+            createElementVNode("div", _hoisted_8, [
+              _cache[12] || (_cache[12] = createElementVNode("span", null, "Threads", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.wasmThreads ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.wasmThreads ? "Yes" : "No"), 3)
+            ]),
+            createElementVNode("div", _hoisted_9, [
+              _cache[13] || (_cache[13] = createElementVNode("span", null, "WebAudio", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.webAudio ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.webAudio ? "Yes" : "No"), 3)
+            ]),
+            createElementVNode("div", _hoisted_10, [
+              _cache[14] || (_cache[14] = createElementVNode("span", null, "Stream", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(unref(envInfo).capabilities.readableStream ? "ok" : "err")
+              }, toDisplayString(unref(envInfo).capabilities.readableStream ? "Yes" : "No"), 3)
+            ]),
+            unref(player).state.isLoaded ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[21] || (_cache[21] = createElementVNode("div", { class: "gt-env-divider" }, null, -1)),
+              createElementVNode("div", _hoisted_11, [
+                _cache[15] || (_cache[15] = createElementVNode("span", null, "FPS", -1)),
+                createElementVNode("span", null, toDisplayString(unref(player).state.fps), 1)
+              ]),
+              createElementVNode("div", _hoisted_12, [
+                _cache[16] || (_cache[16] = createElementVNode("span", null, "Resolution", -1)),
+                createElementVNode("span", null, toDisplayString(unref(player).state.resolution), 1)
+              ]),
+              createElementVNode("div", _hoisted_13, [
+                _cache[17] || (_cache[17] = createElementVNode("span", null, "downloaded", -1)),
+                createElementVNode("span", null, toDisplayString(unref(player).state.downloaded), 1)
+              ]),
+              createElementVNode("div", _hoisted_14, [
+                _cache[18] || (_cache[18] = createElementVNode("span", null, "decoded", -1)),
+                createElementVNode("span", null, toDisplayString(unref(player).state.decoded), 1)
+              ]),
+              createElementVNode("div", _hoisted_15, [
+                _cache[19] || (_cache[19] = createElementVNode("span", null, "Dropped", -1)),
+                createElementVNode("span", null, toDisplayString(unref(player).state.droppedFrames), 1)
+              ]),
+              createElementVNode("div", _hoisted_16, [
+                _cache[20] || (_cache[20] = createElementVNode("span", null, "Speed", -1)),
+                createElementVNode("span", null, toDisplayString(unref(player).state.downloadSpeed || 0) + " KB/s", 1)
+              ])
+            ], 64)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          unref(player).isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_17, [..._cache[23] || (_cache[23] = [
+            createElementVNode("div", { class: "gt-spinner" }, null, -1)
+          ])])) : createCommentVNode("", true),
+          showControlsProp.value ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: normalizeClass(["gt-video-controls", { visible: unref(controls).showControls.value || !unref(player).state.isPlaying }])
+          }, [
+            createElementVNode("button", {
+              class: "gt-control-btn",
+              onClick: togglePlayback
+            }, [
+              unref(player).state.isPlaying ? (openBlock(), createElementBlock("svg", _hoisted_18, [..._cache[24] || (_cache[24] = [
+                createElementVNode("rect", {
+                  x: "6",
+                  y: "4",
+                  width: "4",
+                  height: "16",
+                  rx: "1"
+                }, null, -1),
+                createElementVNode("rect", {
+                  x: "14",
+                  y: "4",
+                  width: "4",
+                  height: "16",
+                  rx: "1"
+                }, null, -1)
+              ])])) : (openBlock(), createElementBlock("svg", _hoisted_19, [..._cache[25] || (_cache[25] = [
+                createElementVNode("path", { d: "M8 5v14l11-7z" }, null, -1)
+              ])]))
+            ]),
+            isLive.value ? (openBlock(), createElementBlock("span", _hoisted_20, [..._cache[26] || (_cache[26] = [
+              createElementVNode("span", { class: "gt-live-dot" }, null, -1),
+              createElementVNode("span", { class: "gt-live-text" }, "实时", -1)
+            ])])) : (openBlock(), createElementBlock("span", _hoisted_21, [
+              createElementVNode("span", _hoisted_22, toDisplayString(unref(controls).formatTime(unref(player).state.currentTime)), 1),
+              _cache[27] || (_cache[27] = createElementVNode("span", { class: "gt-time-separator" }, "/", -1)),
+              createElementVNode("span", _hoisted_23, toDisplayString(unref(controls).formatTime(unref(player).state.duration)), 1)
+            ])),
+            !isLive.value ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: "gt-progress-container",
+              onClick: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => unref(controls).handleProgressClick && unref(controls).handleProgressClick(...args)),
+              onMousemove: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(controls).handleProgressHover && unref(controls).handleProgressHover(...args)),
+              onMouseleave: _cache[2] || (_cache[2] = ($event) => unref(controls).hoverTime.value = null)
+            }, [
+              createElementVNode("div", _hoisted_24, [
+                createElementVNode("div", {
+                  class: "gt-progress-buffered",
+                  style: normalizeStyle({ width: unref(controls).bufferProgress.value + "%" })
+                }, null, 4),
+                createElementVNode("div", {
+                  class: "gt-progress-played",
+                  style: normalizeStyle({ width: unref(controls).playProgress.value + "%" })
+                }, [..._cache[28] || (_cache[28] = [
+                  createElementVNode("div", { class: "gt-progress-handle" }, null, -1)
+                ])], 4)
+              ]),
+              unref(controls).hoverTime.value !== null ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "gt-progress-tooltip",
+                style: normalizeStyle({ left: unref(controls).hoverPosition.value + "%" })
+              }, toDisplayString(unref(controls).formatTime(unref(controls).hoverTime.value)), 5)) : createCommentVNode("", true)
+            ], 32)) : (openBlock(), createElementBlock("div", _hoisted_25)),
+            unref(player).detectedFormat.value ? (openBlock(), createElementBlock("span", _hoisted_26, toDisplayString(unref(player).detectedFormat.value), 1)) : createCommentVNode("", true),
+            createElementVNode("button", {
+              class: "gt-control-btn gt-env-info-btn",
+              onClick: _cache[3] || (_cache[3] = //@ts-ignore
+              (...args) => unref(toggleEnvPanel) && unref(toggleEnvPanel)(...args)),
+              title: unref(showEnvPanel) ? "隐藏信息" : "显示信息"
+            }, [..._cache[29] || (_cache[29] = [
+              createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, [
+                createElementVNode("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" })
+              ], -1)
+            ])], 8, _hoisted_27)
+          ], 2)) : createCommentVNode("", true),
+          unref(player).state.isLoaded && !unref(player).state.isPlaying ? (openBlock(), createElementBlock("div", {
+            key: 3,
+            class: "gt-center-play-btn",
+            onClick: togglePlayback
+          }, [..._cache[30] || (_cache[30] = [
+            createElementVNode("svg", {
+              viewBox: "0 0 24 24",
+              fill: "currentColor"
+            }, [
+              createElementVNode("path", { d: "M8 5v14l11-7z" })
+            ], -1)
+          ])])) : createCommentVNode("", true)
+        ], 544)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const EcPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b2f99f46"]]);
+export {
+  DEFAULT_EC_PLAYER_PROPS,
+  DEFAULT_PLAYER_OPTIONS,
+  DEFAULT_WASM_CONFIG,
+  EcPlayer,
+  LogLevel,
+  configureEcPlayer,
+  getGlobalConfig,
+  getMergedConfig,
+  getMergedPlayerOptions,
+  getWasmConfig,
+  resolveWasmPath,
+  useControls,
+  useEnvInfo,
+  usePlayer
+};
+//# sourceMappingURL=index.js.map