@opendesign-plus/components 0.0.1-rc.6 → 0.0.1-rc.61

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.vue.mjs

@@ -0,0 +1,244 @@
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, nextTick } from "vue";
+import videojs from "../../../_virtual/video.js/dist/video.es.js.mjs";
+import '../../../_virtual/video.js/dist/video-js.css';
+import { transformTime } from "../utils.mjs";
+import defaultPoster from "../../../assets/meeting/transparent.png.mjs";
+const _hoisted_1 = { class: "o-meeting-playback-video" };
+const _hoisted_2 = {
+  key: 0,
+  class: "poster-title"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OMeetingPlaybackVideo",
+  props: {
+    src: { default: "" },
+    vtt: { default: "" },
+    captions: { default: () => [] },
+    poster: {},
+    posterTitle: {},
+    instance: {},
+    trackIdx: {}
+  },
+  emits: ["getDuration", "getInstance", "setTrackIdx"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const timer = ref();
+    const colHeight = ref();
+    const playerRef = ref();
+    const emits = __emit;
+    const speakerMenuVisible = ref(false);
+    const closeSpeakerMenu = () => {
+      speakerMenuVisible.value = false;
+    };
+    const handleCue = (textTrack, init = false) => {
+      var _a, _b;
+      const player = props.instance;
+      if (!player) return;
+      const activeCue = (_a = textTrack.activeCues) == null ? void 0 : _a[0];
+      timer.value && clearInterval(timer.value);
+      if (activeCue) {
+        activeCue.text = ((_b = activeCue == null ? void 0 : activeCue.text) == null ? void 0 : _b.replace(/\[(SPEAKER_)\d+]: /g, "")) || "";
+        const arr = activeCue.text.split("\n");
+        const captionLength = arr.length;
+        const timeL = activeCue.endTime - activeCue.startTime;
+        const interval = parseFloat((timeL / captionLength).toFixed(3));
+        let index = 0;
+        if (init) {
+          const ratio = (player.currentTime() - activeCue.startTime) / (activeCue.endTime - activeCue.startTime);
+          while ((index + 1) / captionLength < ratio) {
+            index++;
+          }
+        }
+        if (index < captionLength) {
+          activeCue.text = arr.length ? arr[index] : activeCue == null ? void 0 : activeCue.text;
+        } else {
+          activeCue.text = arr.length ? arr[0] : activeCue == null ? void 0 : activeCue.text;
+        }
+        let timeInterval = interval * 1e3;
+        const startInterval = () => {
+          timer.value = setInterval(() => {
+            textTrack.mode = "hidden";
+            index++;
+            if (index > arr.length - 1) {
+              clearInterval(timer.value);
+            } else if (index === arr.length - 1) {
+              activeCue.text = arr[index];
+              clearInterval(timer.value);
+              timeInterval = interval * (captionLength - index) * 1e3;
+              startInterval();
+            } else {
+              activeCue.text = arr[index];
+            }
+            textTrack.mode = "showing";
+          }, timeInterval);
+        };
+        startInterval();
+      }
+    };
+    const checkedSpeakers = ref([]);
+    watch(
+      () => checkedSpeakers.value,
+      (val) => {
+        const player = props.instance;
+        if (player) {
+          const tracks = player.textTracks();
+          for (let i = 0; i < tracks.length; i++) {
+            if (tracks[i].kind === "subtitles") {
+              handleCue(tracks[i], true);
+              tracks[i].mode = !val.length ? "hidden" : "showing";
+            }
+          }
+        }
+      },
+      {
+        deep: true
+      }
+    );
+    const loaded = ref(false);
+    const playStatus = ref("init");
+    const videoInit = async () => {
+      if (!props.src) return;
+      const player = videojs("playerId", {
+        controls: true,
+        autoplay: false,
+        preload: "auto",
+        fluid: true,
+        poster: props.poster || defaultPoster,
+        // 控制栏
+        playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        controlBar: {
+          skipButtons: {
+            backward: 5,
+            forward: 5
+          },
+          children: {
+            playToggle: true,
+            SkipBackward: {
+              backward: 5
+            },
+            skipForward: {
+              forward: 5
+            },
+            currentTimeDisplay: true,
+            timeDivider: true,
+            durationDisplay: true,
+            progressControl: true,
+            PlaybackRateMenuButton: true,
+            volumePanel: {
+              inline: false
+            },
+            FullscreenToggle: true
+          }
+        }
+      });
+      emits("getInstance", player);
+      player.src(props.src);
+      player.addRemoteTextTrack({
+        kind: "subtitles",
+        src: props.vtt,
+        srclang: "zh",
+        label: "中文",
+        default: false
+      });
+      loaded.value = true;
+      class CustomSubsCapsButton extends videojs.getComponent("Button") {
+        constructor(player2, options) {
+          super(player2, options);
+          this.addClass("vjs-subtitle-toggle-button", "vjs-subtitle-hidden");
+          this.controlText("Toggle Subtitles");
+        }
+        buildCSSClass() {
+          return `vjs-subtitle-toggle-button ${super.buildCSSClass()}`;
+        }
+        handleClick() {
+          const tracks = this.player().textTracks();
+          for (let i = 0; i < tracks.length; i++) {
+            if (tracks[i].kind === "subtitles") {
+              handleCue(tracks[i], true);
+              tracks[i].mode = tracks[i].mode === "showing" ? "hidden" : "showing";
+              if (tracks[i].mode === "showing") {
+                this.removeClass("vjs-subtitle-hidden");
+                this.addClass("vjs-subtitle-showing");
+              } else {
+                this.removeClass("vjs-subtitle-showing");
+                this.addClass("vjs-subtitle-hidden");
+              }
+            }
+          }
+        }
+      }
+      if (props.vtt) {
+        videojs.registerComponent("SubtitleToggleButton", CustomSubsCapsButton);
+        if (!player.controlBar.children_.some((v) => v.name_ === "SubtitleToggleButton")) {
+          player.controlBar.addChild("SubtitleToggleButton", {}, 8);
+        }
+      }
+      const textTracks = player == null ? void 0 : player.textTracks().tracks_;
+      textTracks.forEach((textTrack) => {
+        textTrack == null ? void 0 : textTrack.addEventListener("cuechange", () => {
+          handleCue(textTrack);
+        });
+      });
+      player.on("play", () => {
+        playStatus.value = "playing";
+      });
+      player.on("timeupdate", () => {
+        const currentTime = player.currentTime() || 0;
+        const idx = props.captions.findIndex((item) => {
+          const startTime = transformTime(item.start_time);
+          return startTime > currentTime;
+        });
+        emits("setTrackIdx", idx);
+      });
+      player.one("loadedmetadata", () => {
+        emits("getDuration", player.duration());
+      });
+      nextTick(() => {
+        const container = document.getElementsByClassName("o-meeting-playback-video")[0];
+        colHeight.value = container.offsetHeight;
+      });
+      playerRef.value = player;
+    };
+    onMounted(() => {
+      videoInit();
+      document.addEventListener("click", closeSpeakerMenu);
+    });
+    watch(
+      () => props.src,
+      () => {
+        videoInit();
+      }
+    );
+    onUnmounted(() => {
+      var _a;
+      (_a = props == null ? void 0 : props.instance) == null ? void 0 : _a.dispose();
+      document.removeEventListener("click", closeSpeakerMenu);
+    });
+    __expose({
+      changeTime: (time) => {
+        var _a;
+        (_a = playerRef.value) == null ? void 0 : _a.currentTime(time);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["video-placeholder", {
+            loaded: loaded.value,
+            "no-poster": !__props.poster,
+            [playStatus.value]: true
+          }])
+        }, [
+          _cache[0] || (_cache[0] = createElementVNode("video", {
+            class: "video-js",
+            id: "playerId"
+          }, null, -1)),
+          __props.posterTitle ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.posterTitle), 1)) : createCommentVNode("", true)
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./OMeetingPlaybackVideo.vue.mjs";
+import './OMeetingPlaybackVideo.css';
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/meeting/components/OMeetingSigAside.css

@@ -0,0 +1,176 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-sig-meeting-aside {
+  width: 35%;
+  flex-shrink: 0;
+  padding: var(--o-gap-4) var(--o-gap-5);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--o-color-control4);
+  justify-content: space-between;
+}
+@media (max-width: 1200px) {
+.o-sig-meeting-aside {
+    padding: var(--o-gap-4);
+}
+}
+@media (max-width: 840px) {
+.o-sig-meeting-aside {
+    border-right: none;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-aside {
+    padding: var(--o-gap-4);
+}
+.o-sig-meeting-aside .title {
+    margin-bottom: var(--o-gap-2);
+}
+}
+@media (max-width: 840px) {
+.o-sig-meeting-aside {
+    width: 100%;
+}
+}
+.o-sig-meeting-aside .month-wrapper {
+  --scrollbar-y-right: -12px;
+}
+.o-sig-meeting-aside .month-item {
+  height: calc(var(--height) * 1px - 24px - var(--o-gap-3));
+}
+.o-sig-meeting-aside .month-item .month {
+  color: var(--o-color-info3);
+  margin-bottom: var(--o-gap-2);
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-aside .month-item .month {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-aside .month-item .month {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-aside .month-item .month {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-aside .month-item .month {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-sig-meeting-aside .month-item .days {
+  gap: var(--o-gap-2);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (max-width: 840px) {
+.o-sig-meeting-aside .month-item .days {
+    display: flex;
+}
+}
+.o-sig-meeting-aside .month-item .days .day-item {
+  height: 64px;
+  border-radius: var(--meeting-cell-radius);
+  background-color: var(--o-color-control2-light);
+  padding: 8px 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.o-sig-meeting-aside .month-item .days .day-item:hover {
+  background-color: var(--o-color-control3-light);
+}
+.o-sig-meeting-aside .month-item .days .day-item.active {
+  border-color: var(--o-color-primary1);
+}
+.o-sig-meeting-aside .month-item .days .day-item .day-d {
+  font-weight: 500;
+  margin-bottom: var(--o-gap-1);
+  color: var(--o-color-info1);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-aside .month-item .days .day-item .day-d {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-aside .month-item .days .day-item .day-d {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-aside .month-item .days .day-item .day-d {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-aside .month-item .days .day-item .day-d {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-sig-meeting-aside .month-item .days .day-item .day-c {
+  color: rgb(var(--o-white));
+  display: flex;
+  flex-wrap: nowrap;
+}
+.o-sig-meeting-aside .month-item .days .day-item .day-c .o-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 14px;
+  padding: 1px;
+  line-height: 1em;
+  position: relative;
+  border-radius: 50%;
+  margin-left: -6px;
+}
+.o-sig-meeting-aside .month-item .days .day-item .day-c .o-icon:first-child {
+  margin-left: 0;
+}
+.o-sig-meeting-aside .month-item .days .day-item .day-c .o-icon svg path {
+  fill: currentColor;
+}
+.o-sig-meeting-aside .arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--o-color-primary1);
+  margin-top: var(--o-gap-3);
+}
+.o-sig-meeting-aside .arrow-wrapper .o-icon {
+  font-size: 24px;
+  cursor: pointer;
+}
+.o-sig-meeting-aside .arrow-wrapper .o-icon.disabled {
+  cursor: not-allowed;
+  color: var(--o-color-primary4);
+}
+.o-sig-meeting-aside .arrow-wrapper .o-icon:not(.disabled):hover {
+  color: var(--o-color-primary2);
+}
+@media (max-width: 840px) {
+.o-sig-meeting-aside .day-item {
+    width: min(128px, (100% - var(--o-gap-2)) / 2);
+}
+}

package/dist/treeshaking/components/meeting/components/OMeetingSigAside.vue.d.ts

@@ -0,0 +1,190 @@
+import { nextTick, ComponentPublicInstance } from 'vue';
+type __VLS_Props = {
+    data: any[];
+    current: number;
+    total: number;
+    active: string;
+    meetingDates: string[];
+    eventsDates: string[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click-date": (...args: any[]) => void;
+    "change-month": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClick-date"?: ((...args: any[]) => any) | undefined;
+    "onChange-month"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollerRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            size: "medium" | "small";
+            duration: number;
+            disabledX: boolean;
+            disabledY: boolean;
+            showType: "auto" | "always" | "never" | "hover";
+            autoUpdateOnScrollSize: boolean;
+        }> & Omit<{
+            readonly size: "small" | "medium";
+            readonly duration: number;
+            readonly disabledX: boolean;
+            readonly disabledY: boolean;
+            readonly showType: "auto" | "hover" | "always" | "never";
+            readonly autoUpdateOnScrollSize: boolean;
+            readonly wrapClass?: string | {
+                [k: string]: boolean;
+            } | (string | {
+                [k: string]: boolean;
+            })[] | undefined;
+            readonly barClass?: string | {
+                [k: string]: boolean;
+            } | (string | {
+                [k: string]: boolean;
+            })[] | undefined;
+            readonly onScroll?: ((event: Event) => any) | undefined | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "size" | "duration" | "disabledX" | "disabledY" | "showType" | "autoUpdateOnScrollSize">;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            targetRef: HTMLDivElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "scroll", event: Event) => void;
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            wrapClass: {
+                type: import('vue').PropType<string | {
+                    [k: string]: boolean;
+                } | Array<{
+                    [k: string]: boolean;
+                } | string>>;
+            };
+            disabledX: {
+                type: BooleanConstructor;
+                required: false;
+            };
+            disabledY: {
+                type: BooleanConstructor;
+            };
+            duration: {
+                type: NumberConstructor;
+                default: number;
+            };
+            showType: {
+                type: import('vue').PropType<"auto" | "always" | "hover" | "never">;
+                default: string;
+            };
+            size: {
+                type: import('vue').PropType<import('@opensig/opendesign').ScrollerSizeT>;
+                default: string;
+            };
+            autoUpdateOnScrollSize: {
+                type: BooleanConstructor;
+            };
+            barClass: {
+                type: import('vue').PropType<string | {
+                    [k: string]: boolean;
+                } | Array<{
+                    [k: string]: boolean;
+                } | string>>;
+            };
+        }>> & Readonly<{
+            onScroll?: ((event: Event) => any) | undefined;
+        }>, {
+            scrollTo: (options?: ScrollToOptions | undefined) => void;
+            scrollBy: (options?: ScrollToOptions | undefined) => void;
+            getContainerEl(): HTMLElement | null;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            scroll: (event: Event) => any;
+        }, string, {
+            size: "medium" | "small";
+            duration: number;
+            disabledX: boolean;
+            disabledY: boolean;
+            showType: "auto" | "always" | "never" | "hover";
+            autoUpdateOnScrollSize: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        size: "medium" | "small";
+        duration: number;
+        disabledX: boolean;
+        disabledY: boolean;
+        showType: "auto" | "always" | "never" | "hover";
+        autoUpdateOnScrollSize: boolean;
+    }> & Omit<Readonly<import('vue').ExtractPropTypes<{
+        wrapClass: {
+            type: import('vue').PropType<string | {
+                [k: string]: boolean;
+            } | Array<{
+                [k: string]: boolean;
+            } | string>>;
+        };
+        disabledX: {
+            type: BooleanConstructor;
+            required: false;
+        };
+        disabledY: {
+            type: BooleanConstructor;
+        };
+        duration: {
+            type: NumberConstructor;
+            default: number;
+        };
+        showType: {
+            type: import('vue').PropType<"auto" | "always" | "hover" | "never">;
+            default: string;
+        };
+        size: {
+            type: import('vue').PropType<import('@opensig/opendesign').ScrollerSizeT>;
+            default: string;
+        };
+        autoUpdateOnScrollSize: {
+            type: BooleanConstructor;
+        };
+        barClass: {
+            type: import('vue').PropType<string | {
+                [k: string]: boolean;
+            } | Array<{
+                [k: string]: boolean;
+            } | string>>;
+        };
+    }>> & Readonly<{
+        onScroll?: ((event: Event) => any) | undefined;
+    }>, "size" | "duration" | "disabledX" | "disabledY" | "showType" | "autoUpdateOnScrollSize" | "scrollTo" | "scrollBy" | "getContainerEl"> & {
+        scrollTo: (options?: ScrollToOptions | undefined) => void;
+        scrollBy: (options?: ScrollToOptions | undefined) => void;
+        getContainerEl: () => HTMLElement | null;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+            thumb?(_: {}): any;
+            track?(_: {}): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+export default _default;