var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { a6 as script, j as script$1 } from "./vendor-primevue-DmDWdkDd.js";
import { u as useI18n } from "./vendor-vue-BIRc7P93.js";
import { q as app, as as isOutputNode, c0 as getLocatorIdFromNodeData, b$ as useNodeOutputStore, a as api, c as cn, d as _export_sfc } from "./index-BqxAUePh.js";
import { g as getResourceURL, f as formatTime } from "./audioUtils-BurLDP37.js";
import { bq as defineComponent, r as ref, E as computed, w as watch, c6 as onUnmounted, c as createElementBlock, d as openBlock, q as createCommentVNode, s as normalizeClass, br as unref, e as createBaseVNode, z as createVNode, u as toDisplayString, G as normalizeStyle, k as withCtx, n as nextTick } from "./vendor-other-DdEHkzYa.js";
import "./vendor-xterm-BF8peZ5_.js";
import "./vendor-three-_gcZkhit.js";
import "./vendor-tiptap-B76LFN34.js";
const _hoisted_1 = { class: "relative" };
const _hoisted_2 = { class: "relative flex shrink-0 items-center justify-start gap-2" };
const _hoisted_3 = ["aria-label"];
const _hoisted_4 = {
  key: 0,
  class: "text-secondary icon-[lucide--play] size-4"
};
const _hoisted_5 = {
  key: 1,
  class: "text-secondary icon-[lucide--pause] size-4"
};
const _hoisted_6 = { class: "text-sm font-normal text-nowrap text-base-foreground" };
const _hoisted_7 = { class: "relative h-0.5 flex-1 rounded-full bg-interface-stroke" };
const _hoisted_8 = ["value", "aria-label"];
const _hoisted_9 = { class: "relative flex shrink-0 items-center justify-start gap-2" };
const _hoisted_10 = ["aria-label"];
const _hoisted_11 = {
  key: 0,
  class: "text-secondary icon-[lucide--volume-2] size-4"
};
const _hoisted_12 = {
  key: 1,
  class: "text-secondary icon-[lucide--volume-1] size-4"
};
const _hoisted_13 = {
  key: 2,
  class: "text-secondary icon-[lucide--volume-x] size-4"
};
const _hoisted_14 = ["aria-label"];
const _hoisted_15 = {
  key: 0,
  class: "w-48 px-4 py-2"
};
const _hoisted_16 = { class: "mb-2 block text-xs text-base-foreground" };
const _hoisted_17 = ["onClick"];
const _hoisted_18 = { class: "text-base-foreground" };
const _hoisted_19 = {
  key: 0,
  class: "ml-auto icon-[lucide--check] size-4 text-base-foreground"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "AudioPreviewPlayer",
  props: {
    hideWhenEmpty: { type: Boolean, default: true },
    showOptionsButton: { type: Boolean },
    nodeId: {},
    audioUrl: {}
  },
  setup(__props) {
    const { t } = useI18n();
    const props = __props;
    const audioRef = ref();
    const optionsMenu = ref();
    const isPlaying = ref(false);
    const isMuted = ref(false);
    const volume = ref(1);
    const currentTime = ref(0);
    const duration = ref(0);
    const hasAudio = ref(false);
    const playbackRate = ref(1);
    const progressPercentage = computed(() => {
      if (!duration.value || duration.value === 0) return 0;
      return currentTime.value / duration.value * 100;
    });
    const showVolumeTwo = computed(() => !isMuted.value && volume.value > 0.5);
    const showVolumeOne = computed(() => isMuted.value && volume.value > 0);
    const litegraphNode = computed(() => {
      if (!props.nodeId || !app.canvas.graph) return null;
      return app.canvas.graph.getNodeById(props.nodeId);
    });
    const hidden = computed(() => {
      if (!litegraphNode.value) return false;
      const isLoadAudio = litegraphNode.value.constructor?.comfyClass === "LoadAudio";
      return isLoadAudio && !!props.nodeId;
    });
    const isOutputNodeRef = computed(() => {
      const node = litegraphNode.value;
      return !!node && isOutputNode(node);
    });
    const nodeLocatorId = computed(() => {
      const node = litegraphNode.value;
      if (!node) return null;
      return getLocatorIdFromNodeData(node);
    });
    const nodeOutputStore = useNodeOutputStore();
    const audioUrlFromOutput = computed(() => {
      if (!isOutputNodeRef.value || !nodeLocatorId.value) return "";
      const nodeOutput = nodeOutputStore.nodeOutputs[nodeLocatorId.value];
      if (!nodeOutput?.audio || nodeOutput.audio.length === 0) return "";
      const audio = nodeOutput.audio[0];
      if (!audio.filename) return "";
      return api.apiURL(
        getResourceURL(
          audio.subfolder || "",
          audio.filename,
          audio.type || "output"
        )
      );
    });
    const finalAudioUrl = computed(() => {
      return audioUrlFromOutput.value || props.audioUrl || "";
    });
    const togglePlayPause = /* @__PURE__ */ __name(() => {
      if (!audioRef.value || !audioRef.value.src) {
        return;
      }
      if (isPlaying.value) {
        audioRef.value.pause();
      } else {
        void audioRef.value.play();
      }
      isPlaying.value = !isPlaying.value;
    }, "togglePlayPause");
    const toggleMute = /* @__PURE__ */ __name(() => {
      if (audioRef.value) {
        isMuted.value = !isMuted.value;
        audioRef.value.muted = isMuted.value;
      }
    }, "toggleMute");
    const handleSeek = /* @__PURE__ */ __name((event) => {
      const target = event.target;
      const value = parseFloat(target.value);
      if (audioRef.value && duration.value > 0) {
        const newTime = value / 100 * duration.value;
        audioRef.value.currentTime = newTime;
        currentTime.value = newTime;
      }
    }, "handleSeek");
    const handleLoadedMetadata = /* @__PURE__ */ __name(() => {
      if (audioRef.value) {
        duration.value = audioRef.value.duration;
      }
    }, "handleLoadedMetadata");
    const handleTimeUpdate = /* @__PURE__ */ __name(() => {
      if (audioRef.value) {
        currentTime.value = audioRef.value.currentTime;
      }
    }, "handleTimeUpdate");
    const handleEnded = /* @__PURE__ */ __name(() => {
      isPlaying.value = false;
      currentTime.value = 0;
    }, "handleEnded");
    const toggleOptionsMenu = /* @__PURE__ */ __name((event) => {
      optionsMenu.value?.toggle(event);
    }, "toggleOptionsMenu");
    const setPlaybackSpeed = /* @__PURE__ */ __name((speed) => {
      playbackRate.value = speed;
      if (audioRef.value) {
        audioRef.value.playbackRate = speed;
      }
    }, "setPlaybackSpeed");
    const handleVolumeChange = /* @__PURE__ */ __name((value) => {
      const numValue = Array.isArray(value) ? value[0] : value;
      volume.value = numValue / 10;
      if (audioRef.value) {
        audioRef.value.volume = volume.value;
        if (volume.value > 0 && isMuted.value) {
          isMuted.value = false;
          audioRef.value.muted = false;
        }
      }
    }, "handleVolumeChange");
    const menuItems = computed(() => [
      {
        label: t("g.playbackSpeed"),
        items: [
          {
            label: t("g.halfSpeed"),
            onClick: /* @__PURE__ */ __name(() => setPlaybackSpeed(0.5), "onClick"),
            selected: playbackRate.value === 0.5
          },
          {
            label: t("g.1x"),
            onClick: /* @__PURE__ */ __name(() => setPlaybackSpeed(1), "onClick"),
            selected: playbackRate.value === 1
          },
          {
            label: t("g.2x"),
            onClick: /* @__PURE__ */ __name(() => setPlaybackSpeed(2), "onClick"),
            selected: playbackRate.value === 2
          }
        ]
      },
      {
        label: t("g.volume"),
        key: "volume"
      }
    ]);
    const loadAudioFromUrl = /* @__PURE__ */ __name((url) => {
      if (!audioRef.value) return;
      isPlaying.value = false;
      audioRef.value.pause();
      audioRef.value.src = url;
      void audioRef.value.load();
      hasAudio.value = !!url;
    }, "loadAudioFromUrl");
    watch(
      finalAudioUrl,
      (newUrl) => {
        if (newUrl) {
          void nextTick(() => {
            loadAudioFromUrl(newUrl);
          });
        }
      },
      { immediate: true }
    );
    onUnmounted(() => {
      if (audioRef.value) {
        audioRef.value.pause();
        audioRef.value.src = "";
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        !hidden.value ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass(
            unref(cn)(
              "bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0",
              { hidden: _ctx.hideWhenEmpty && !hasAudio.value }
            )
          )
        }, [
          createBaseVNode("audio", {
            ref_key: "audioRef",
            ref: audioRef,
            onLoadedmetadata: handleLoadedMetadata,
            onTimeupdate: handleTimeUpdate,
            onEnded: handleEnded
          }, null, 544),
          createBaseVNode("div", _hoisted_2, [
            createBaseVNode("div", {
              role: "button",
              tabindex: 0,
              "aria-label": _ctx.$t("g.playPause"),
              class: "flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered",
              onClick: togglePlayPause
            }, [
              !isPlaying.value ? (openBlock(), createElementBlock("i", _hoisted_4)) : (openBlock(), createElementBlock("i", _hoisted_5))
            ], 8, _hoisted_3),
            createBaseVNode("div", _hoisted_6, toDisplayString(unref(formatTime)(currentTime.value)) + " / " + toDisplayString(unref(formatTime)(duration.value)), 1)
          ]),
          createBaseVNode("div", _hoisted_7, [
            createBaseVNode("div", {
              class: "absolute top-0 left-0 h-full rounded-full bg-button-icon transition-all",
              style: normalizeStyle({ width: `${progressPercentage.value}%` })
            }, null, 4),
            createBaseVNode("input", {
              type: "range",
              value: progressPercentage.value,
              min: "0",
              max: "100",
              step: "0.1",
              "aria-label": _ctx.$t("g.audioProgress"),
              class: "absolute inset-0 w-full cursor-pointer opacity-0",
              onInput: handleSeek
            }, null, 40, _hoisted_8)
          ]),
          createBaseVNode("div", _hoisted_9, [
            createBaseVNode("div", {
              role: "button",
              tabindex: 0,
              "aria-label": _ctx.$t("g.volume"),
              class: "flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered",
              onClick: toggleMute
            }, [
              showVolumeTwo.value ? (openBlock(), createElementBlock("i", _hoisted_11)) : showVolumeOne.value ? (openBlock(), createElementBlock("i", _hoisted_12)) : (openBlock(), createElementBlock("i", _hoisted_13))
            ], 8, _hoisted_10),
            _ctx.showOptionsButton ? (openBlock(), createElementBlock("div", {
              key: 0,
              role: "button",
              tabindex: 0,
              "aria-label": _ctx.$t("g.moreOptions"),
              class: "flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered",
              onClick: toggleOptionsMenu
            }, _cache[0] || (_cache[0] = [
              createBaseVNode("i", { class: "text-secondary icon-[lucide--more-vertical] size-4" }, null, -1)
            ]), 8, _hoisted_14)) : createCommentVNode("", true)
          ]),
          createVNode(unref(script), {
            ref_key: "optionsMenu",
            ref: optionsMenu,
            model: menuItems.value,
            popup: "",
            class: "audio-player-menu",
            "pt:root:class": unref(cn)("bg-component-node-widget-background border-component-node-border"),
            "pt:submenu:class": unref(cn)("bg-component-node-widget-background")
          }, {
            item: withCtx(({ item }) => [
              item.key === "volume" ? (openBlock(), createElementBlock("div", _hoisted_15, [
                createBaseVNode("label", _hoisted_16, toDisplayString(item.label), 1),
                createVNode(unref(script$1), {
                  "model-value": volume.value * 10,
                  min: 0,
                  max: 10,
                  step: 1,
                  class: "w-full",
                  "onUpdate:modelValue": handleVolumeChange
                }, null, 8, ["model-value"])
              ])) : (openBlock(), createElementBlock("div", {
                key: 1,
                class: "flex cursor-pointer items-center px-4 py-2 text-xs hover:bg-white/10",
                onClick: /* @__PURE__ */ __name(($event) => item.onClick?.(), "onClick")
              }, [
                createBaseVNode("span", _hoisted_18, toDisplayString(item.label), 1),
                item.selected ? (openBlock(), createElementBlock("i", _hoisted_19)) : createCommentVNode("", true)
              ], 8, _hoisted_17))
            ]),
            _: 1
          }, 8, ["model", "pt:root:class", "pt:submenu:class"])
        ], 2)) : createCommentVNode("", true)
      ]);
    };
  }
});
const AudioPreviewPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b2e1591f"]]);
export {
  AudioPreviewPlayer as default
};
//# sourceMappingURL=AudioPreviewPlayer-CmLbwr_w.js.map
