@fangzhongya/fang-ui 0.0.97 → 0.0.99

package/dist/components/videos/src/index2.js

@@ -0,0 +1,399 @@
+import { defineComponent, ref, computed, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, withDirectives, createCommentVNode, toDisplayString, createVNode, createBlock, Fragment, renderList, vShow } from "vue";
+import Enter from "../../../icons/vue/enter.js";
+import Retreat from "../../../icons/vue/retreat.js";
+import Catalogue from "../../../icons/vue/catalogue.js";
+import Frame from "../../../icons/vue/frame.js";
+import Star from "../../../icons/vue/star.js";
+import Up from "../../../icons/vue/up.js";
+import Down from "../../../icons/vue/down.js";
+import Play from "../../../icons/vue/play.js";
+import Pause from "../../../icons/vue/pause.js";
+import Sound from "../../../icons/vue/sound.js";
+import Mute from "../../../icons/vue/mute.js";
+import { Sliders } from "../../sliders/index.js";
+import { Button } from "../../button/index.js";
+import { Selects } from "../../selects/index.js";
+import { dataExpose, dataEmits, dataProps } from "./data.js";
+import { useCssName } from "../../../hooks/cssname/index.js";
+import { useLocale } from "../../../hooks/locale/index.js";
+import "../../loading/index.js";
+import { hourFormat } from "@fangzhongya/utils/date/hourFormat";
+import { useFullscreen } from "../../../hooks/full-screen/index.js";
+import { getListValue } from "../../players/common/util.js";
+import { vLoading } from "../../loading/src/index.js";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "end-content" };
+const _hoisted_3 = { class: "end-buttons" };
+const _hoisted_4 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: dataProps,
+  emits: dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const { getLocale } = useLocale();
+    const cs = useCssName("videos");
+    const props = __props;
+    const emit = __emit;
+    const { isFullscreen, toggle } = useFullscreen();
+    const videoRef = ref(null);
+    const domRef = ref();
+    const current = ref(0);
+    const list = computed(() => {
+      return getListValue(props.list);
+    });
+    const value = computed(() => {
+      return list.value[current.value];
+    });
+    const currentTime = ref(0);
+    const duration = ref(0);
+    const isLoading = ref(false);
+    const buffered = ref(0);
+    const showControls = ref(false);
+    const showEndOverlay = ref(false);
+    const optionsRate = [
+      {
+        label: "2.0",
+        value: 2
+      },
+      {
+        label: "1.5",
+        value: 1.5
+      },
+      {
+        label: "1.25",
+        value: 1.25
+      },
+      {
+        label: "1.0",
+        value: 1
+      },
+      {
+        label: "0.75",
+        value: 0.75
+      },
+      {
+        label: "0.5",
+        value: 0.5
+      }
+    ];
+    const playbackRate = ref(1);
+    const isPlaying = ref(false);
+    const isList = ref(false);
+    const onShowList = () => {
+      isList.value = !isList.value;
+    };
+    const slider = ref(0);
+    const formatTooltip = (number) => {
+      return hourFormat(number * duration.value / 100);
+    };
+    const volume = ref(50);
+    const isMuted = ref(false);
+    const isMouse = ref(true);
+    const onMousedown = () => {
+      isMouse.value = false;
+    };
+    const onFullscreen = () => {
+      toggle(domRef.value);
+    };
+    const toggleMute = () => {
+      if (!videoRef.value) return;
+      isMuted.value = !isMuted.value;
+      videoRef.value.muted = isMuted.value;
+    };
+    const onChange = () => {
+      if (videoRef.value) {
+        videoRef.value.volume = volume.value / 100;
+      }
+    };
+    const onSkip = (is) => {
+      if (videoRef.value) {
+        if (is) {
+          videoRef.value.currentTime -= 10;
+        } else {
+          videoRef.value.currentTime += 10;
+        }
+      }
+    };
+    const onChangeSlider = () => {
+      if (videoRef.value) {
+        const v = slider.value * duration.value / 100;
+        console.log("v", v);
+        videoRef.value.currentTime = v;
+      }
+      isMouse.value = true;
+    };
+    const togglePlay = () => {
+      if (!videoRef.value) return;
+      if (isPlaying.value) {
+        videoRef.value.pause();
+      } else {
+        videoRef.value.play();
+      }
+      isPlaying.value = !isPlaying.value;
+      showEndOverlay.value = false;
+    };
+    const setPlaybackRate = () => {
+      if (videoRef.value) {
+        videoRef.value.playbackRate = playbackRate.value;
+      }
+    };
+    const handleTimeUpdate = () => {
+      if (videoRef.value) {
+        currentTime.value = videoRef.value.currentTime;
+        if (videoRef.value.buffered.length > 0) {
+          buffered.value = videoRef.value.buffered.end(0) / duration.value * 100 || 0;
+        }
+        if (isMouse.value) {
+          slider.value = currentTime.value / duration.value * 100;
+        }
+      }
+    };
+    const handleLoadedMetadata = () => {
+      if (videoRef.value) {
+        duration.value = videoRef.value.duration;
+      }
+    };
+    const handleEnded = () => {
+      isPlaying.value = false;
+    };
+    const handleWaiting = () => {
+      isLoading.value = true;
+    };
+    const handleCanPlay = () => {
+      isLoading.value = false;
+    };
+    const oncanplaythrough = () => {
+    };
+    const onReplay = () => {
+    };
+    const onTrack = (is) => {
+      if (is) {
+        current.value--;
+      } else {
+        current.value++;
+      }
+      playTrack(current.value);
+    };
+    const playTrack = (i) => {
+      current.value = i;
+      nextTick(() => {
+        if (videoRef.value) {
+          buffered.value = 0;
+          videoRef.value.load();
+          if (isPlaying.value) {
+            videoRef.value.play();
+          }
+        }
+      });
+    };
+    onMounted(() => {
+      if (videoRef.value) {
+        videoRef.value.volume = volume.value / 100;
+        videoRef.value.muted = isMuted.value;
+        videoRef.value.load();
+        if (props.autoplay) {
+          videoRef.value.play();
+          isPlaying.value = true;
+        }
+      }
+    });
+    onUnmounted(() => {
+    });
+    __expose({
+      ...dataExpose
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          unref(cs).z(),
+          unref(cs).is("fullscreen", unref(isFullscreen)),
+          unref(cs).is("list", isList.value)
+        ]),
+        ref_key: "domRef",
+        ref: domRef
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(cs).z("videos"))
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(cs).z("controls-top"))
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(cs).z("name"))
+            }, toDisplayString((_a = value.value) == null ? void 0 : _a.name), 3)
+          ], 2),
+          withDirectives((openBlock(), createElementBlock("div", {
+            class: normalizeClass(unref(cs).z("video"))
+          }, [
+            createElementVNode("video", {
+              ref_key: "videoRef",
+              ref: videoRef,
+              src: (_b = value.value) == null ? void 0 : _b.url,
+              onClick: togglePlay,
+              onTimeupdate: handleTimeUpdate,
+              onLoadedmetadata: handleLoadedMetadata,
+              onEnded: handleEnded,
+              onWaiting: handleWaiting,
+              onCanplay: handleCanPlay,
+              onCanplaythrough: oncanplaythrough
+            }, " 您的浏览器不支持视频播放 ", 40, _hoisted_1),
+            showEndOverlay.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(cs).z("video-end"))
+            }, [
+              createElementVNode("div", _hoisted_2, [
+                _cache[8] || (_cache[8] = createElementVNode("h3", null, "播放结束", -1)),
+                createElementVNode("p", null, toDisplayString(value.value.name), 1),
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("button", {
+                    class: "replay-btn",
+                    onClick: onReplay
+                  }, " 重新播放 "),
+                  current.value + 1 < list.value.length ? (openBlock(), createElementBlock("button", {
+                    key: 0,
+                    class: "next-btn",
+                    onClick: _cache[0] || (_cache[0] = ($event) => onTrack(false))
+                  }, " 下一个 ")) : createCommentVNode("", true)
+                ])
+              ])
+            ], 2)) : createCommentVNode("", true)
+          ], 2)), [
+            [unref(vLoading), isLoading.value]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(unref(cs).z("controls-bottom"))
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(cs).z("slider"))
+            }, [
+              createVNode(unref(Sliders), {
+                class: normalizeClass(unref(cs).z("slider-slider")),
+                onChange: onChangeSlider,
+                onMousedown,
+                "format-tooltip": formatTooltip,
+                advance: buffered.value,
+                modelValue: slider.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => slider.value = $event)
+              }, null, 8, ["class", "advance", "modelValue"]),
+              createElementVNode("div", {
+                class: normalizeClass(unref(cs).z("duration"))
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(cs).z("duration-began"))
+                }, toDisplayString(unref(hourFormat)(currentTime.value)), 3),
+                _cache[9] || (_cache[9] = createElementVNode("span", null, "/", -1)),
+                createElementVNode("span", {
+                  class: normalizeClass(unref(cs).z("duration-end"))
+                }, toDisplayString(unref(hourFormat)(duration.value)), 3)
+              ], 2)
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(unref(cs).z("control"))
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(unref(cs).z("control-buts"))
+              }, [
+                list.value.length > 1 ? (openBlock(), createBlock(unref(Button), {
+                  key: 0,
+                  size: "small",
+                  icon: Up,
+                  disabled: current.value == 0,
+                  circle: "",
+                  onClick: _cache[2] || (_cache[2] = ($event) => onTrack(true))
+                }, null, 8, ["disabled"])) : createCommentVNode("", true),
+                createVNode(unref(Button), {
+                  size: "small",
+                  icon: Retreat,
+                  circle: "",
+                  onClick: _cache[3] || (_cache[3] = ($event) => onSkip(true))
+                }),
+                createVNode(unref(Button), {
+                  icon: isPlaying.value ? Pause : Play,
+                  circle: "",
+                  onClick: togglePlay
+                }, null, 8, ["icon"]),
+                createVNode(unref(Button), {
+                  size: "small",
+                  icon: Enter,
+                  circle: "",
+                  onClick: _cache[4] || (_cache[4] = ($event) => onSkip(false))
+                }),
+                list.value.length > 1 ? (openBlock(), createBlock(unref(Button), {
+                  key: 1,
+                  size: "small",
+                  icon: Down,
+                  circle: "",
+                  disabled: current.value + 1 == list.value.length,
+                  onClick: _cache[5] || (_cache[5] = ($event) => onTrack(false))
+                }, null, 8, ["disabled"])) : createCommentVNode("", true)
+              ], 2),
+              createElementVNode("div", {
+                class: normalizeClass(unref(cs).z("control-volume"))
+              }, [
+                createVNode(unref(Button), {
+                  class: normalizeClass(unref(cs).z("control-volume-but")),
+                  icon: isMuted.value ? Mute : Sound,
+                  circle: "",
+                  onClick: toggleMute,
+                  size: "small"
+                }, null, 8, ["class", "icon"]),
+                createVNode(unref(Sliders), {
+                  size: "small",
+                  class: normalizeClass(unref(cs).z("control-volume-slider")),
+                  onChange,
+                  modelValue: volume.value,
+                  "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => volume.value = $event)
+                }, null, 8, ["class", "modelValue"])
+              ], 2),
+              createElementVNode("div", {
+                class: normalizeClass(unref(cs).z("control-more"))
+              }, [
+                createVNode(unref(Selects), {
+                  size: "small",
+                  class: normalizeClass(unref(cs).z("control-more-rate")),
+                  options: optionsRate,
+                  onChange: setPlaybackRate,
+                  modelValue: playbackRate.value,
+                  "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => playbackRate.value = $event)
+                }, null, 8, ["class", "modelValue"]),
+                list.value.length > 1 ? (openBlock(), createBlock(unref(Button), {
+                  key: 0,
+                  size: "small",
+                  icon: Catalogue,
+                  circle: "",
+                  onClick: onShowList
+                })) : createCommentVNode("", true),
+                createVNode(unref(Button), {
+                  size: "small",
+                  icon: unref(isFullscreen) ? Star : Frame,
+                  circle: "",
+                  onClick: onFullscreen
+                }, null, 8, ["icon"])
+              ], 2)
+            ], 2)
+          ], 2)
+        ], 2),
+        list.value.length > 1 ? withDirectives((openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(unref(cs).z("list"))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass([unref(cs).z("list-li"), unref(cs).is("active", current.value === index)]),
+              key: index,
+              onClick: ($event) => playTrack(index)
+            }, [
+              createElementVNode("div", null, toDisplayString(item.name), 1)
+            ], 10, _hoisted_4);
+          }), 128))
+        ], 2)), [
+          [vShow, isList.value]
+        ]) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/videos/style/index2.scss

@@ -0,0 +1,5 @@
+@use '../../slider/style/index2.scss' as *;
+@use '../../button/style/index2.scss' as *;
+@use '../../loading/style/index2.scss' as *;
+@use '../../selects/style/index2.scss' as *;
+@use '../index.scss' as *;

package/dist/components/window/src/index2.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vues = require("vue");
+const vue = require("vue");
 const index$5 = require("../../icon/index.cjs");
 const bar = require("../../../icons/vue/bar.cjs");
 const frame = require("../../../icons/vue/frame.cjs");
@@ -19,13 +19,13 @@ const index$6 = require("../../../directives/drag/index.cjs");
 const use = require("../../common/use.cjs");
 const _hoisted_1 = ["title"];
 const _hoisted_2 = ["title"];
-const _sfc_main = /* @__PURE__ */ vues.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
     const wykey = Symbol("Window-" + (/* @__PURE__ */ new Date()).getTime() + Math.random());
-    const refBody = vues.shallowRef();
+    const refBody = vue.shallowRef();
     const { getLocale } = index.useLocale();
     const cs = index$1.useCssName("window");
     const prs = __props;
@@ -35,12 +35,12 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
       }
     });
     const emit = __emit;
-    const isMax = vues.shallowRef(props.max);
-    const isMin = vues.shallowRef(false);
-    const isClose = vues.shallowRef(true);
-    const refBox = vues.shallowRef();
-    const position = vues.shallowRef({});
-    vues.watch(
+    const isMax = vue.shallowRef(props.max);
+    const isMin = vue.shallowRef(false);
+    const isClose = vue.shallowRef(true);
+    const refBox = vue.shallowRef();
+    const position = vue.shallowRef({});
+    vue.watch(
       () => props.modelValue,
       () => {
         console.log("props.modelValue", props.modelValue);
@@ -48,7 +48,7 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
           isClose.value = false;
           isMin.value = false;
           if (props.closeHave) {
-            vues.nextTick(() => {
+            vue.nextTick(() => {
               setPosition();
             });
           } else {
@@ -100,13 +100,13 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
       emit("update:modelValue", false);
       emit("close");
     };
-    vues.watch(
+    vue.watch(
       () => isMin.value,
       () => {
         setMin();
       }
     );
-    vues.watch(
+    vue.watch(
       () => isMax.value,
       () => {
         setMax();
@@ -168,13 +168,13 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
       emit("changesize");
     }
     function setBoxClass(oldValue = "") {
-      vues.nextTick(() => {
+      vue.nextTick(() => {
         setClassName.setClassName(refBox.value, props.boxClass, oldValue);
       });
     }
     let stop;
-    vues.onMounted(() => {
-      stop = vues.watch(
+    vue.onMounted(() => {
+      stop = vue.watch(
         () => props.boxClass,
         (newValue, oldValue) => {
           setBoxClass(oldValue);
@@ -182,7 +182,7 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
         { immediate: true }
       );
     });
-    vues.onUnmounted(() => {
+    vue.onUnmounted(() => {
       if (stop) {
         stop();
       }
@@ -194,65 +194,65 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return vues.openBlock(), vues.createBlock(vues.unref(index$2.BoxTeleport), {
-        disabled: vues.unref(props).disabled,
-        to: vues.unref(props).to
+      return vue.openBlock(), vue.createBlock(vue.unref(index$2.BoxTeleport), {
+        disabled: vue.unref(props).disabled,
+        to: vue.unref(props).to
       }, {
-        default: vues.withCtx(() => [
-          !isClose.value ? (vues.openBlock(), vues.createElementBlock("div", {
+        default: vue.withCtx(() => [
+          !isClose.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             ref_key: "refBox",
             ref: refBox,
-            class: vues.normalizeClass(vues.unref(cs).z())
+            class: vue.normalizeClass(vue.unref(cs).z())
           }, [
-            vues.unref(props).mask ? (vues.openBlock(), vues.createBlock(vues.unref(index$3.BoxMask), {
+            vue.unref(props).mask ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.BoxMask), {
               key: 0,
               onClick: onMaskClose,
-              cssprefix: vues.unref(props).cssprefix || vues.unref(cs).z()
-            }, null, 8, ["cssprefix"])) : vues.createCommentVNode("", true),
-            vues.withDirectives((vues.openBlock(), vues.createElementBlock("div", {
+              cssprefix: vue.unref(props).cssprefix || vue.unref(cs).z()
+            }, null, 8, ["cssprefix"])) : vue.createCommentVNode("", true),
+            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
               ref_key: "refBody",
               ref: refBody,
-              class: vues.normalizeClass(vues.unref(cs).z("body"))
+              class: vue.normalizeClass(vue.unref(cs).z("body"))
             }, [
-              vues.renderSlot(_ctx.$slots, vues.unref(data.dataSlot).title, {}, () => [
-                vues.createVNode(vues.unref(index$4.BoxTitle), {
+              vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).title, {}, () => [
+                vue.createVNode(vue.unref(index$4.BoxTitle), {
                   onClose,
-                  title: vues.unref(props).title
+                  title: vue.unref(props).title
                 }, {
-                  icon: vues.withCtx(() => [
-                    !vues.unref(props).noMin ? (vues.openBlock(), vues.createElementBlock("span", {
+                  icon: vue.withCtx(() => [
+                    !vue.unref(props).noMin ? (vue.openBlock(), vue.createElementBlock("span", {
                       key: 0,
-                      title: vues.unref(getLocale)("minh"),
+                      title: vue.unref(getLocale)("minh"),
                       onClick: onMin,
-                      class: vues.normalizeClass([
-                        vues.unref(cs).z("title-icon"),
-                        vues.unref(cs).z("title-min")
+                      class: vue.normalizeClass([
+                        vue.unref(cs).z("title-icon"),
+                        vue.unref(cs).z("title-min")
                       ])
                     }, [
-                      vues.createVNode(vues.unref(index$5.Icon), null, {
-                        default: vues.withCtx(() => [
-                          vues.renderSlot(_ctx.$slots, vues.unref(data.dataSlot)["icon-min"], {}, () => [
-                            vues.createVNode(bar.default)
+                      vue.createVNode(vue.unref(index$5.Icon), null, {
+                        default: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot)["icon-min"], {}, () => [
+                            vue.createVNode(bar.default)
                           ])
                         ]),
                         _: 3
                       })
-                    ], 10, _hoisted_1)) : vues.createCommentVNode("", true),
-                    vues.createElementVNode("span", {
-                      title: vues.unref(getLocale)(isMax.value ? "tmaxh" : "maxh"),
+                    ], 10, _hoisted_1)) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("span", {
+                      title: vue.unref(getLocale)(isMax.value ? "tmaxh" : "maxh"),
                       onClick: onMax,
-                      class: vues.normalizeClass([
-                        vues.unref(cs).z("title-icon"),
-                        vues.unref(cs).z("title-max")
+                      class: vue.normalizeClass([
+                        vue.unref(cs).z("title-icon"),
+                        vue.unref(cs).z("title-max")
                       ])
                     }, [
-                      vues.createVNode(vues.unref(index$5.Icon), null, {
-                        default: vues.withCtx(() => [
-                          isMax.value ? vues.renderSlot(_ctx.$slots, vues.unref(data.dataSlot)["icon-full"], { key: 0 }, () => [
-                            vues.createVNode(star.default)
-                          ]) : vues.renderSlot(_ctx.$slots, vues.unref(data.dataSlot)["icon-max"], { key: 1 }, () => [
-                            vues.createVNode(frame.default)
+                      vue.createVNode(vue.unref(index$5.Icon), null, {
+                        default: vue.withCtx(() => [
+                          isMax.value ? vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot)["icon-full"], { key: 0 }, () => [
+                            vue.createVNode(star.default)
+                          ]) : vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot)["icon-max"], { key: 1 }, () => [
+                            vue.createVNode(frame.default)
                           ])
                         ]),
                         _: 3
@@ -262,24 +262,24 @@ const _sfc_main = /* @__PURE__ */ vues.defineComponent({
                   _: 3
                 }, 8, ["title"])
               ]),
-              vues.createElementVNode("div", {
-                class: vues.normalizeClass(vues.unref(cs).z("body-div"))
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("body-div"))
               }, [
-                vues.renderSlot(_ctx.$slots, vues.unref(data.dataSlot).default)
+                vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).default)
               ], 2),
-              vues.renderSlot(_ctx.$slots, vues.unref(data.dataSlot).footer)
+              vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).footer)
             ], 2)), [
-              [vues.unref(index$6.default), {
-                dom: vues.unref(props).drag,
+              [vue.unref(index$6.default), {
+                dom: vue.unref(props).drag,
                 onMousedown
               }],
-              [vues.unref(index$7.default), {
-                often: vues.unref(props).often,
+              [vue.unref(index$7.default), {
+                often: vue.unref(props).often,
                 onChange: onChangeAdjust,
                 all: { position: true, getDisabled }
               }]
             ])
-          ], 2)) : vues.createCommentVNode("", true)
+          ], 2)) : vue.createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["disabled", "to"]);

package/dist/css/audios.css

@@ -0,0 +1,52 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.audios.is-playing .audios-name {
+  background-color: antiquewhite;
+}
+.audios-slider {
+  display: flex;
+  align-items: center;
+}
+.audios-duration {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+.audios-control {
+  display: flex;
+  align-items: center;
+}
+.audios-control-buts {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.audios-control-volume {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.audios-control-volume-but {
+  margin-left: 10px;
+  margin-right: 15px;
+}
+.audios-control-volume-slider {
+  min-width: 40px;
+  max-width: 160px;
+}
+.audios-list-li.is-active {
+  background-color: aqua;
+}