@fangzhongya/fang-ui 0.0.97 → 0.0.99

package/dist/components/videos/index.scss

@@ -0,0 +1,115 @@
+@use '../scss/common.scss' as *;
+
+$videos: 'videos';
+@include b($videos) {
+	display: flex;
+	height: 100%;
+	border-radius: 8px;
+	background: #000;
+	color: #fff;
+	position: relative;
+	#{vdm('list-width', $videos)}: 20%;
+	&.#{is('fullscreen')} {
+		border-radius: 0;
+		.#{z($videos, 'controls-bottom')} {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+		}
+		.#{z($videos, 'list')} {
+			background-color: rgba(238, 238, 238, 0.5);
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+		}
+	}
+	&.#{is('list')} {
+		.#{z($videos, 'controls-bottom')} {
+			width: calc(100% - var(#{vdm('list-width', $videos)}));
+		}
+	}
+	&-videos {
+		flex: 1;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		.#{z($videos, 'controls-top')} {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 100;
+			padding: 5px;
+			background-color: rgba(238, 238, 238, 0.5);
+		}
+		.#{z($videos, 'video')} {
+			flex: 1;
+			margin: 0 auto;
+			position: relative;
+			height: 100%;
+			width: 100%;
+			video {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+				cursor: pointer;
+			}
+		}
+		.#{z($videos, 'controls-bottom')} {
+			.#{z($videos, 'slider')} {
+				display: flex;
+				align-items: center;
+				&-slider {
+					margin-left: 10px;
+				}
+				.#{z($videos, 'duration')} {
+					margin-left: 20px;
+					display: flex;
+					align-items: center;
+				}
+			}
+			.#{z($videos, 'control')} {
+				display: flex;
+				align-items: center;
+				&-buts {
+					display: flex;
+					align-items: center;
+				}
+				&-volume {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					&-but {
+						margin-left: 10px;
+						margin-right: 15px;
+					}
+					&-slider {
+						min-width: 40px;
+						max-width: 120px;
+						margin-right: 5px;
+					}
+				}
+				&-more {
+					display: flex;
+					align-items: center;
+					&-rate {
+						width: 60px;
+						margin: 0 10px;
+					}
+				}
+			}
+		}
+	}
+	&-list {
+		width: var(#{vdm('list-width', $videos)});
+		height: 100%;
+		box-sizing: border-box;
+		padding: 10px;
+	}
+}

package/dist/components/videos/src/data.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const buildProps = require("../../../utils/vues/buildProps.cjs");
+const dataProps = buildProps.buildProps({
+  /**
+   * @props {  Array<ObjAny> } list= ( )
+   * 值
+   */
+  list: {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+  autoplay: {
+    type: Boolean
+  }
+});
+const dataEmits = {
+  change: (evt) => {
+  }
+};
+const dataSlot = {
+  default: "default"
+};
+const dataExpose = {};
+exports.dataEmits = dataEmits;
+exports.dataExpose = dataExpose;
+exports.dataProps = dataProps;
+exports.dataSlot = dataSlot;

package/dist/components/videos/src/data.d.ts

@@ -0,0 +1,49 @@
+import { ExtractPublicPropTypes } from 'vue';
+export declare const dataProps: {
+    /**
+     * @props {  Array<ObjAny> } list= ( )
+     * 值
+     */
+    list: {
+        type: {
+            (arrayLength: number): ObjAny[];
+            (...items: ObjAny[]): ObjAny[];
+            new (arrayLength: number): ObjAny[];
+            new (...items: ObjAny[]): ObjAny[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default(): never[];
+    };
+    autoplay: {
+        type: BooleanConstructor;
+    };
+};
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+export declare const dataEmits: {
+    change: (evt: string | string[]) => void;
+};
+export type DataEmits = typeof dataEmits;
+/**
+ * @slot default 默认插槽
+ */
+export declare const dataSlot: {
+    default: string;
+};
+/**
+ * @expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+export declare const dataExpose: {};

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

@@ -0,0 +1,30 @@
+import { buildProps } from "../../../utils/vues/buildProps.js";
+const dataProps = buildProps({
+  /**
+   * @props {  Array<ObjAny> } list= ( )
+   * 值
+   */
+  list: {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+  autoplay: {
+    type: Boolean
+  }
+});
+const dataEmits = {
+  change: (evt) => {
+  }
+};
+const dataSlot = {
+  default: "default"
+};
+const dataExpose = {};
+export {
+  dataEmits,
+  dataExpose,
+  dataProps,
+  dataSlot
+};

package/dist/components/videos/src/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index2.cjs");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

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

@@ -0,0 +1,4 @@
+import _sfc_main from "./index2.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,399 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const enter = require("../../../icons/vue/enter.cjs");
+const retreat = require("../../../icons/vue/retreat.cjs");
+const catalogue = require("../../../icons/vue/catalogue.cjs");
+const frame = require("../../../icons/vue/frame.cjs");
+const star = require("../../../icons/vue/star.cjs");
+const up = require("../../../icons/vue/up.cjs");
+const down = require("../../../icons/vue/down.cjs");
+const play = require("../../../icons/vue/play.cjs");
+const pause = require("../../../icons/vue/pause.cjs");
+const sound = require("../../../icons/vue/sound.cjs");
+const mute = require("../../../icons/vue/mute.cjs");
+const index$4 = require("../../sliders/index.cjs");
+const index$5 = require("../../button/index.cjs");
+const index$6 = require("../../selects/index.cjs");
+const data = require("./data.cjs");
+const index$1 = require("../../../hooks/cssname/index.cjs");
+const index = require("../../../hooks/locale/index.cjs");
+require("../../loading/index.cjs");
+const hourFormat = require("@fangzhongya/utils/date/hourFormat");
+const index$2 = require("../../../hooks/full-screen/index.cjs");
+const util = require("../../players/common/util.cjs");
+const index$3 = require("../../loading/src/index.cjs");
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "end-content" };
+const _hoisted_3 = { class: "end-buttons" };
+const _hoisted_4 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  props: data.dataProps,
+  emits: data.dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const { getLocale } = index.useLocale();
+    const cs = index$1.useCssName("videos");
+    const props = __props;
+    const emit = __emit;
+    const { isFullscreen, toggle } = index$2.useFullscreen();
+    const videoRef = vue.ref(null);
+    const domRef = vue.ref();
+    const current = vue.ref(0);
+    const list = vue.computed(() => {
+      return util.getListValue(props.list);
+    });
+    const value = vue.computed(() => {
+      return list.value[current.value];
+    });
+    const currentTime = vue.ref(0);
+    const duration = vue.ref(0);
+    const isLoading = vue.ref(false);
+    const buffered = vue.ref(0);
+    const showControls = vue.ref(false);
+    const showEndOverlay = vue.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 = vue.ref(1);
+    const isPlaying = vue.ref(false);
+    const isList = vue.ref(false);
+    const onShowList = () => {
+      isList.value = !isList.value;
+    };
+    const slider = vue.ref(0);
+    const formatTooltip = (number) => {
+      return hourFormat.hourFormat(number * duration.value / 100);
+    };
+    const volume = vue.ref(50);
+    const isMuted = vue.ref(false);
+    const isMouse = vue.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;
+      vue.nextTick(() => {
+        if (videoRef.value) {
+          buffered.value = 0;
+          videoRef.value.load();
+          if (isPlaying.value) {
+            videoRef.value.play();
+          }
+        }
+      });
+    };
+    vue.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;
+        }
+      }
+    });
+    vue.onUnmounted(() => {
+    });
+    __expose({
+      ...data.dataExpose
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          vue.unref(cs).z(),
+          vue.unref(cs).is("fullscreen", vue.unref(isFullscreen)),
+          vue.unref(cs).is("list", isList.value)
+        ]),
+        ref_key: "domRef",
+        ref: domRef
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(cs).z("videos"))
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(cs).z("controls-top"))
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("name"))
+            }, vue.toDisplayString((_a = value.value) == null ? void 0 : _a.name), 3)
+          ], 2),
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            class: vue.normalizeClass(vue.unref(cs).z("video"))
+          }, [
+            vue.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 ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(vue.unref(cs).z("video-end"))
+            }, [
+              vue.createElementVNode("div", _hoisted_2, [
+                _cache[8] || (_cache[8] = vue.createElementVNode("h3", null, "播放结束", -1)),
+                vue.createElementVNode("p", null, vue.toDisplayString(value.value.name), 1),
+                vue.createElementVNode("div", _hoisted_3, [
+                  vue.createElementVNode("button", {
+                    class: "replay-btn",
+                    onClick: onReplay
+                  }, " 重新播放 "),
+                  current.value + 1 < list.value.length ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    class: "next-btn",
+                    onClick: _cache[0] || (_cache[0] = ($event) => onTrack(false))
+                  }, " 下一个 ")) : vue.createCommentVNode("", true)
+                ])
+              ])
+            ], 2)) : vue.createCommentVNode("", true)
+          ], 2)), [
+            [vue.unref(index$3.vLoading), isLoading.value]
+          ]),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(cs).z("controls-bottom"))
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("slider"))
+            }, [
+              vue.createVNode(vue.unref(index$4.Sliders), {
+                class: vue.normalizeClass(vue.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"]),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("duration"))
+              }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(cs).z("duration-began"))
+                }, vue.toDisplayString(vue.unref(hourFormat.hourFormat)(currentTime.value)), 3),
+                _cache[9] || (_cache[9] = vue.createElementVNode("span", null, "/", -1)),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(cs).z("duration-end"))
+                }, vue.toDisplayString(vue.unref(hourFormat.hourFormat)(duration.value)), 3)
+              ], 2)
+            ], 2),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("control"))
+            }, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("control-buts"))
+              }, [
+                list.value.length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.Button), {
+                  key: 0,
+                  size: "small",
+                  icon: up.default,
+                  disabled: current.value == 0,
+                  circle: "",
+                  onClick: _cache[2] || (_cache[2] = ($event) => onTrack(true))
+                }, null, 8, ["disabled"])) : vue.createCommentVNode("", true),
+                vue.createVNode(vue.unref(index$5.Button), {
+                  size: "small",
+                  icon: retreat.default,
+                  circle: "",
+                  onClick: _cache[3] || (_cache[3] = ($event) => onSkip(true))
+                }),
+                vue.createVNode(vue.unref(index$5.Button), {
+                  icon: isPlaying.value ? pause.default : play.default,
+                  circle: "",
+                  onClick: togglePlay
+                }, null, 8, ["icon"]),
+                vue.createVNode(vue.unref(index$5.Button), {
+                  size: "small",
+                  icon: enter.default,
+                  circle: "",
+                  onClick: _cache[4] || (_cache[4] = ($event) => onSkip(false))
+                }),
+                list.value.length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.Button), {
+                  key: 1,
+                  size: "small",
+                  icon: down.default,
+                  circle: "",
+                  disabled: current.value + 1 == list.value.length,
+                  onClick: _cache[5] || (_cache[5] = ($event) => onTrack(false))
+                }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("control-volume"))
+              }, [
+                vue.createVNode(vue.unref(index$5.Button), {
+                  class: vue.normalizeClass(vue.unref(cs).z("control-volume-but")),
+                  icon: isMuted.value ? mute.default : sound.default,
+                  circle: "",
+                  onClick: toggleMute,
+                  size: "small"
+                }, null, 8, ["class", "icon"]),
+                vue.createVNode(vue.unref(index$4.Sliders), {
+                  size: "small",
+                  class: vue.normalizeClass(vue.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),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("control-more"))
+              }, [
+                vue.createVNode(vue.unref(index$6.Selects), {
+                  size: "small",
+                  class: vue.normalizeClass(vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.Button), {
+                  key: 0,
+                  size: "small",
+                  icon: catalogue.default,
+                  circle: "",
+                  onClick: onShowList
+                })) : vue.createCommentVNode("", true),
+                vue.createVNode(vue.unref(index$5.Button), {
+                  size: "small",
+                  icon: vue.unref(isFullscreen) ? star.default : frame.default,
+                  circle: "",
+                  onClick: onFullscreen
+                }, null, 8, ["icon"])
+              ], 2)
+            ], 2)
+          ], 2)
+        ], 2),
+        list.value.length > 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(vue.unref(cs).z("list"))
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item, index2) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass([vue.unref(cs).z("list-li"), vue.unref(cs).is("active", current.value === index2)]),
+              key: index2,
+              onClick: ($event) => playTrack(index2)
+            }, [
+              vue.createElementVNode("div", null, vue.toDisplayString(item.name), 1)
+            ], 10, _hoisted_4);
+          }), 128))
+        ], 2)), [
+          [vue.vShow, isList.value]
+        ]) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+exports.default = _sfc_main;