@fangzhongya/fang-ui 0.1.85 → 0.1.89

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

@@ -1,455 +0,0 @@
-import { defineComponent, ref, computed, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, withDirectives, createCommentVNode, createVNode, createBlock, Fragment, renderList, vShow } from "vue";
-import "../../../icons/vue/enter.js";
-import "../../../icons/vue/retreat.js";
-import "../../../icons/vue/catalogue.js";
-import "../../../icons/vue/frame.js";
-import "../../../icons/vue/star.js";
-import "../../../icons/vue/up.js";
-import "../../../icons/vue/down.js";
-import "../../../icons/vue/play.js";
-import "../../../icons/vue/pause.js";
-import "../../../icons/vue/sound.js";
-import "../../../icons/vue/mute.js";
-import { Sliders } from "../../sliders/index.js";
-import { Button } from "../../button/index.js";
-import { Selects } from "../../selects/index.js";
-import { name, dataProps, dataExpose, dataEmits } 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 { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
-import { vLoading } from "element-plus/es/components/loading/index";
-import _sfc_main$1 from "../../../icons/vue/up2.js";
-import _sfc_main$2 from "../../../icons/vue/retreat2.js";
-import _sfc_main$3 from "../../../icons/vue/pause2.js";
-import _sfc_main$4 from "../../../icons/vue/play2.js";
-import _sfc_main$5 from "../../../icons/vue/enter2.js";
-import _sfc_main$6 from "../../../icons/vue/down2.js";
-import _sfc_main$7 from "../../../icons/vue/mute2.js";
-import _sfc_main$8 from "../../../icons/vue/sound2.js";
-import _sfc_main$9 from "../../../icons/vue/catalogue2.js";
-import _sfc_main$a from "../../../icons/vue/star2.js";
-import _sfc_main$b from "../../../icons/vue/frame2.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: getProps(dataProps),
-  emits: dataEmits,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const { getLocale } = useLocale();
-    const cs = useCssName(name);
-    const prs = __props;
-    const props = usePropsDefault(name, prs, dataProps);
-    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(true);
-    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;
-        videoRef.value.currentTime = v;
-      }
-      isMouse.value = true;
-    };
-    let controlsTimeout;
-    const resetControlsTimeout = () => {
-      clearTimeout(controlsTimeout);
-      if (isPlaying.value) {
-        controlsTimeout = setTimeout(() => {
-          showControls.value = false;
-          isList.value = false;
-        }, 5e3);
-      }
-    };
-    const togglePlay = () => {
-      if (!videoRef.value) return;
-      if (isPlaying.value) {
-        videoRef.value.pause();
-      } else {
-        videoRef.value.play();
-      }
-      isPlaying.value = !isPlaying.value;
-      showEndOverlay.value = false;
-      resetControlsTimeout();
-    };
-    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();
-          }
-        }
-      });
-    };
-    const handleMouseMove = () => {
-      showControls.value = true;
-      resetControlsTimeout();
-    };
-    const handleKeydown = (event) => {
-      if (!videoRef.value) return;
-      console.log("event.key", event.key);
-      switch (event.key) {
-        case " ":
-        case "Spacebar":
-          event.preventDefault();
-          togglePlay();
-          break;
-        case "ArrowLeft":
-          onTrack(true);
-          break;
-        case "ArrowRight":
-          onTrack(false);
-          break;
-        case "ArrowUp":
-          onSkip(true);
-          break;
-        case "ArrowDown":
-          onSkip(false);
-          break;
-      }
-    };
-    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;
-        }
-      }
-      document.addEventListener("keydown", handleKeydown);
-      resetControlsTimeout();
-    });
-    onUnmounted(() => {
-      document.removeEventListener("keydown", handleKeydown);
-      clearTimeout(controlsTimeout);
-    });
-    __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),
-          unref(cs).is("controls", !showControls.value)
-        ]),
-        ref_key: "domRef",
-        ref: domRef,
-        onMousemove: handleMouseMove
-      }, [
-        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: _sfc_main$1,
-                  disabled: current.value == 0,
-                  circle: "",
-                  onClick: _cache[2] || (_cache[2] = ($event) => onTrack(true))
-                }, null, 8, ["disabled"])) : createCommentVNode("", true),
-                createVNode(unref(Button), {
-                  size: "small",
-                  icon: _sfc_main$2,
-                  circle: "",
-                  onClick: _cache[3] || (_cache[3] = ($event) => onSkip(true))
-                }),
-                createVNode(unref(Button), {
-                  icon: isPlaying.value ? _sfc_main$3 : _sfc_main$4,
-                  circle: "",
-                  onClick: togglePlay
-                }, null, 8, ["icon"]),
-                createVNode(unref(Button), {
-                  size: "small",
-                  icon: _sfc_main$5,
-                  circle: "",
-                  onClick: _cache[4] || (_cache[4] = ($event) => onSkip(false))
-                }),
-                list.value.length > 1 ? (openBlock(), createBlock(unref(Button), {
-                  key: 1,
-                  size: "small",
-                  icon: _sfc_main$6,
-                  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 ? _sfc_main$7 : _sfc_main$8,
-                  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: _sfc_main$9,
-                  circle: "",
-                  onClick: onShowList
-                })) : createCommentVNode("", true),
-                createVNode(unref(Button), {
-                  size: "small",
-                  icon: unref(isFullscreen) ? _sfc_main$a : _sfc_main$b,
-                  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("controls-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)
-      ], 34);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};