@wfrog/vc/es/components/single-player/index.mjs

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

import './index.css'
// vue-script:D:\project\_my\vc\src\components\single-player\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { unref as _unref, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeClass as _normalizeClass2, createElementVNode as _createElementVNode, openBlock as _openBlock2, createElementBlock as _createElementBlock2, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
import { computed, nextTick, onMounted as onMounted2, ref, watch } from "vue";
import { ElSlider } from "element-plus";
import { isBoolean } from "lodash-es";

// vue-script:D:\project\_my\vc\src\components\awesome-icon\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
import { onMounted } from "vue";
import { defaultWindow, loader } from "@wfrog/utils";
var awesome_icon_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    name: { type: String, default: "" },
    mode: { type: String, default: "css" }
  },
  setup(__props) {
    const props = __props;
    const loaderSource = async () => {
      const cdn = props.mode === "svg" ? "fontawesomeJs" : "fontawesomeCss";
      await loader.loadCdnSingle(cdn);
    };
    onMounted(() => {
      if (defaultWindow) {
        if (!defaultWindow.ElementPlusComponents?.isAwesomeIconLock) {
          defaultWindow.ElementPlusComponents = { ...defaultWindow.ElementPlusComponents, isAwesomeIconLock: true };
          loaderSource();
        }
      }
    });
    return (_ctx, _cache) => {
      return _openBlock(), _createElementBlock("i", {
        class: _normalizeClass(["awesome-icon", props.name])
      }, null, 2);
    };
  }
});

// src/components/awesome-icon/index.vue
var awesome_icon_default2 = awesome_icon_default;

// vue-script:D:\project\_my\vc\src\components\single-player\index.vue?type=script
var _hoisted_1 = ["src"];
var single_player_default = /* @__PURE__ */ _defineComponent2({
  __name: "index",
  props: {
    src: { type: String, default: "" },
    width: { type: Number, default: 300 }
  },
  emits: ["error", "timeupdate"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const DEFAULT_VOLUME = 50;
    const myAudio = ref();
    const volume = ref(DEFAULT_VOLUME);
    const duration = ref(100);
    const currentTime = ref(0);
    const isDraging = ref(false);
    const isPlaying = ref(false);
    const myStyle = computed(() => ({ width: `${props.width}px` }));
    const sliderStyle = computed(() => ({ width: `${props.width - 80}px` }));
    const src = computed(() => props.src);
    const playClass = computed(() => ({ "fa-play": !isPlaying.value, "fa-pause": isPlaying.value }));
    const volumeIcon = computed(() => {
      if (volume.value === 0) {
        return "fa-volume-mute";
      }
      if (volume.value > 70) {
        return "fa-volume-up";
      }
      return "fa-volume-down";
    });
    watch(volume, (val) => {
      if (myAudio.value) {
        myAudio.value.volume = val / 100;
      }
    });
    watch(src, () => {
      nextTick(() => {
        myAudio.value && myAudio.value.play();
      });
    });
    onMounted2(() => {
      if (!myAudio.value) {
        return;
      }
      const audio = myAudio.value;
      audio.onplay = () => {
        audio.volume = volume.value / 100;
        isPlaying.value = true;
      };
      audio.onpause = () => {
        isPlaying.value = false;
      };
      audio.ontimeupdate = () => {
        if (!isDraging.value) {
          currentTime.value = Math.floor(audio.currentTime);
          emits("timeupdate", currentTime.value);
        }
      };
      audio.onprogress = () => {
        duration.value = Math.floor(audio.duration);
      };
      audio.onerror = (e) => {
        if (!props.src) {
          return;
        }
        emits("error", e);
      };
    });
    const handleTimeChange = (val) => {
      if (myAudio.value) {
        myAudio.value.currentTime = Math.floor(val);
      }
    };
    const setDraging = (status) => {
      isDraging.value = status;
    };
    const toggleVolume = () => {
      volume.value = volume.value > 0 ? 0 : DEFAULT_VOLUME;
    };
    const togglePlay = (play) => {
      if (!myAudio.value || !src.value) {
        return;
      }
      if (isBoolean(play)) {
        play ? myAudio.value.play() : myAudio.value.pause();
        return;
      }
      isPlaying.value ? myAudio.value.pause() : myAudio.value.play();
    };
    return (_ctx, _cache) => {
      return _openBlock2(), _createElementBlock2("div", {
        class: _normalizeClass2(_ctx.$style.main),
        style: _normalizeStyle(_unref(myStyle))
      }, [
        _createVNode(_unref(ElSlider), {
          modelValue: currentTime.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentTime.value = $event),
          max: duration.value,
          style: _normalizeStyle(_unref(sliderStyle)),
          "show-tooltip": false,
          onChange: handleTimeChange,
          onMouseedown: _cache[1] || (_cache[1] = ($event) => setDraging(true)),
          onMouseup: _cache[2] || (_cache[2] = ($event) => setDraging(false))
        }, null, 8, ["modelValue", "max", "style"]),
        _createElementVNode("div", {
          class: _normalizeClass2(_ctx.$style["volume-container"])
        }, [
          _createVNode(_unref(ElSlider), {
            modelValue: volume.value,
            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => volume.value = $event),
            vertical: "",
            height: "100px",
            "show-tooltip": false,
            class: _normalizeClass2(_ctx.$style.volume)
          }, null, 8, ["modelValue", "class"]),
          _createVNode(awesome_icon_default2, {
            name: "fas",
            class: _normalizeClass2([_ctx.$style["volume-controll"], _unref(volumeIcon)]),
            onClick: toggleVolume
          }, null, 8, ["class"])
        ], 2),
        _createVNode(awesome_icon_default2, {
          name: "fas",
          class: _normalizeClass2([_ctx.$style.play, _unref(playClass)]),
          onClick: togglePlay
        }, null, 8, ["class"]),
        _createElementVNode("audio", {
          ref_key: "myAudio",
          ref: myAudio,
          src: _unref(src),
          loop: ""
        }, null, 8, _hoisted_1)
      ], 6);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\single-player\index.vue?type=style&index=0&isModule=true&isNameImport=true
var single_player_default2 = { main: "_main_16n2t_1", volume: "_volume_16n2t_15", "volume-container": "_volume-container_16n2t_25", "volume-controll": "_volume-controll_16n2t_38", play: "_play_16n2t_42" };

// src/components/single-player/index.vue
var cssModules = {};
single_player_default.__cssModules = cssModules = {};
cssModules["$style"] = single_player_default2;
var single_player_default3 = single_player_default;
export {
  single_player_default3 as default
};