@opendesign-plus/components 0.0.1-rc.103 → 0.0.1-rc.105

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

@@ -1,434 +0,0 @@
-import { defineComponent, computed, useId, ref, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, unref, withKeys, withModifiers, withCtx, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createTextVNode, normalizeClass, withDirectives, renderSlot } from "vue";
-import { OInput, OIcon, ODivider, OTab, OTabPane, OScroller, ORow, OCol } from "@opensig/opendesign";
-import { ElSelect, ElOption, ElCheckbox } from "element-plus";
-import "element-plus/es/components/select/style/css";
-import "element-plus/es/components/checkbox/style/css";
-import "element-plus/es/components/option/style/css";
-import IconPlaying from "../../../_virtual/icon-playing.mjs";
-import IconSearch from "../../../_virtual/icon-search2.mjs";
-import IconChevronDown from "../../../_virtual/icon-chevron-down.mjs";
-import IconChevronUp from "../../../_virtual/icon-chevron-up.mjs";
-import IconClose from "../../../_virtual/icon-close.mjs";
-import IconSpeaker from "../../../_virtual/icon-speaker.mjs";
-import { useDebounceFn } from "@vueuse/core";
-import OEmpty from "../../empty/OEmpty.vue.mjs";
-import { useI18n } from "../../../i18n/index.mjs";
-import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
-const _hoisted_1 = { class: "o-meeting-playback-subtitles" };
-const _hoisted_2 = { class: "search-captions" };
-const _hoisted_3 = {
-  key: 0,
-  class: "suffix-box"
-};
-const _hoisted_4 = { class: "right-handle" };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { class: "info" };
-const _hoisted_7 = { class: "num" };
-const _hoisted_8 = { class: "speaker" };
-const _hoisted_9 = { class: "start-time" };
-const _hoisted_10 = { class: "text" };
-const _hoisted_11 = {
-  key: 1,
-  class: "playback-empty"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "OMeetingPlaybackSubtitles",
-  props: {
-    captions: { default: () => [] },
-    instance: {},
-    trackIdx: {}
-  },
-  setup(__props) {
-    const vDompurifyHtml = buildVueDompurifyHTMLDirective();
-    const props = __props;
-    const { t } = useI18n();
-    const currentIndex = computed(() => props.trackIdx);
-    const scrollerDomId = useId();
-    const getScrollerContainer = () => document.querySelector(`#${scrollerDomId} > .o-scroller-container`);
-    const scrollContainer = ref();
-    const wheelVisible = ref(false);
-    const handleScroll = () => {
-      wheelVisible.value = true;
-    };
-    const debounceFn = useDebounceFn(() => {
-      wheelVisible.value = false;
-    }, 3e3);
-    watch(
-      () => wheelVisible.value,
-      (val) => {
-        if (val) {
-          debounceFn();
-        }
-      }
-    );
-    const computedCaptions = ref([]);
-    watch(
-      () => props.captions,
-      () => {
-        computedCaptions.value = props.captions || [];
-        nextTick(() => {
-          var _a;
-          if (scrollContainer.value) {
-            (_a = scrollContainer.value) == null ? void 0 : _a.scrollTo({
-              top: 0,
-              behavior: "smooth"
-            });
-          }
-        });
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    );
-    const formatTime = (num) => {
-      const time = num.split(".")[0];
-      return `00:${time}`.slice(-8);
-    };
-    const transformTime = (time) => {
-      const arr = time.split(":");
-      const hh = arr[arr.length - 3] ? parseInt(arr[arr.length - 3]) : 0;
-      const mm = parseInt(arr[arr.length - 2]);
-      const ss = parseFloat(arr[arr.length - 1]);
-      return hh * 60 * 60 + mm * 60 + ss;
-    };
-    onMounted(() => {
-      var _a;
-      scrollContainer.value = getScrollerContainer();
-      (_a = scrollContainer.value) == null ? void 0 : _a.addEventListener("wheel", handleScroll);
-    });
-    watch(
-      () => computedCaptions.value,
-      () => {
-        var _a;
-        scrollContainer.value = getScrollerContainer();
-        (_a = scrollContainer.value) == null ? void 0 : _a.addEventListener("wheel", handleScroll);
-      }
-    );
-    const activeTab = ref(0);
-    const changeTab = () => {
-    };
-    const videoPosition = (time) => {
-      const player = props.instance;
-      if (!player) {
-        return;
-      }
-      const startTime = transformTime(time);
-      player.currentTime(startTime);
-    };
-    const searchValue = ref("");
-    const total = ref(0);
-    const current = ref(0);
-    const speakers = ref([]);
-    const ALL = t("common.all");
-    const options = computed(() => {
-      return [
-        ...new Set(
-          props.captions.map((item) => item.speakerLabel).sort().reverse()
-        )
-      ];
-    });
-    watch(
-      () => currentIndex.value,
-      () => {
-        var _a, _b;
-        if (wheelVisible.value && searchValue.value) {
-          return;
-        }
-        const captionActive = (_a = scrollContainer.value) == null ? void 0 : _a.querySelectorAll(".captions-item")[currentIndex.value - 1];
-        (_b = scrollContainer.value) == null ? void 0 : _b.scrollTo({
-          top: (captionActive == null ? void 0 : captionActive.offsetTop) - 16,
-          behavior: "smooth"
-        });
-      }
-    );
-    onUnmounted(() => {
-      if (scrollContainer.value) {
-        scrollContainer.value.removeEventListener("wheel", handleScroll);
-      }
-    });
-    const searchLocate = (step, val) => {
-      var _a, _b, _c, _d, _e, _f;
-      const currentLight = document.getElementsByClassName("light-keyword")[step - 1];
-      const nextLight = document.getElementsByClassName("light-keyword")[step - val];
-      nextLight == null ? void 0 : nextLight.classList.remove("light-keyword-active");
-      currentLight == null ? void 0 : currentLight.classList.add("light-keyword-active");
-      const aboveVisible = currentLight.offsetTop + currentLight.offsetHeight < ((_a = scrollContainer.value) == null ? void 0 : _a.scrollTop);
-      const exceedVisible = currentLight.offsetTop > ((_b = scrollContainer.value) == null ? void 0 : _b.offsetHeight) + ((_c = scrollContainer.value) == null ? void 0 : _c.scrollTop);
-      if (aboveVisible || exceedVisible) {
-        (_f = scrollContainer.value) == null ? void 0 : _f.scrollTo({
-          top: (_e = (_d = currentLight.parentElement) == null ? void 0 : _d.parentElement) == null ? void 0 : _e.offsetTop,
-          behavior: "smooth"
-        });
-      }
-    };
-    const prevKeyword = () => {
-      if (!total.value || current.value === 1) {
-        return;
-      }
-      current.value--;
-      searchLocate(current.value, 0);
-    };
-    const nextKeyword = (e) => {
-      if (e == null ? void 0 : e.shiftKey) {
-        return;
-      }
-      if (!total.value || current.value === total.value) {
-        return;
-      }
-      current.value++;
-      searchLocate(current.value, 2);
-    };
-    const highlightText = (val) => {
-      computedCaptions.value = props.captions.filter((v) => {
-        return speakers.value.includes(v.speakerLabel);
-      }).map((item) => {
-        return {
-          ...item,
-          contentHtml: val ? item.contentHtml.replaceAll(val, `<span class="light-keyword">${val}</span>`) : item.contentHtml
-        };
-      });
-      nextTick(() => {
-        var _a;
-        const lightAll = document.getElementsByClassName("light-keyword");
-        total.value = lightAll.length;
-        if (total.value) {
-          nextKeyword();
-        } else {
-          (_a = scrollContainer.value) == null ? void 0 : _a.scrollTo({
-            top: 0,
-            behavior: "smooth"
-          });
-        }
-      });
-    };
-    const debounceTextFn = useDebounceFn(highlightText, 300);
-    watch(
-      () => searchValue.value,
-      (val) => {
-        current.value = 0;
-        debounceTextFn(val);
-      }
-    );
-    watch(
-      () => options.value,
-      (newVal) => {
-        speakers.value = newVal;
-      },
-      { immediate: true }
-    );
-    const checkAll = ref(false);
-    const indeterminate = ref(false);
-    const handleCheckAll = (checked) => {
-      indeterminate.value = false;
-      if (checked) {
-        speakers.value = options.value;
-      } else {
-        speakers.value = [];
-      }
-    };
-    watch(
-      () => speakers.value,
-      (val) => {
-        if (val.length === 0) {
-          checkAll.value = false;
-          indeterminate.value = false;
-        } else if (val.length === options.value.length) {
-          checkAll.value = true;
-          indeterminate.value = false;
-        } else {
-          indeterminate.value = true;
-        }
-        debounceTextFn(searchValue.value);
-      },
-      { deep: true }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createVNode(unref(OInput), {
-            modelValue: searchValue.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchValue.value = $event),
-            onKeydown: [
-              withKeys(nextKeyword, ["enter"]),
-              withKeys(withModifiers(prevKeyword, ["shift", "stop"]), ["enter"])
-            ],
-            placeholder: unref(t)("meeting.searchSubtitlePlaceholder"),
-            size: "large",
-            class: "input-captions"
-          }, {
-            prefix: withCtx(() => [
-              createVNode(unref(OIcon), null, {
-                default: withCtx(() => [
-                  createVNode(unref(IconSearch))
-                ]),
-                _: 1
-              })
-            ]),
-            suffix: withCtx(() => [
-              searchValue.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                createElementVNode("span", null, toDisplayString(current.value) + "/" + toDisplayString(total.value), 1),
-                createVNode(unref(OIcon), { onClick: prevKeyword }, {
-                  default: withCtx(() => [
-                    createVNode(unref(IconChevronUp))
-                  ]),
-                  _: 1
-                }),
-                createVNode(unref(OIcon), { onClick: nextKeyword }, {
-                  default: withCtx(() => [
-                    createVNode(unref(IconChevronDown))
-                  ]),
-                  _: 1
-                }),
-                createVNode(unref(ODivider), { direction: "v" }),
-                createVNode(unref(OIcon), {
-                  class: "hover-close",
-                  onClick: _cache[0] || (_cache[0] = ($event) => searchValue.value = "")
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(IconClose))
-                  ]),
-                  _: 1
-                })
-              ])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "onKeydown", "placeholder"]),
-          createElementVNode("div", _hoisted_4, [
-            createVNode(unref(ElSelect), {
-              multiple: "",
-              modelValue: speakers.value,
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => speakers.value = $event),
-              "popper-class": "o-meeting-playback-speakers-popper",
-              class: "speakers-selector",
-              placement: "bottom"
-            }, {
-              prefix: withCtx(() => [
-                createVNode(unref(OIcon), null, {
-                  default: withCtx(() => [
-                    createVNode(unref(IconSpeaker))
-                  ]),
-                  _: 1
-                })
-              ]),
-              header: withCtx(() => [
-                createVNode(unref(ElCheckbox), {
-                  modelValue: checkAll.value,
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => checkAll.value = $event),
-                  indeterminate: indeterminate.value,
-                  onChange: handleCheckAll
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(ALL)), 1)
-                  ]),
-                  _: 1
-                }, 8, ["modelValue", "indeterminate"])
-              ]),
-              default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (t2) => {
-                  return openBlock(), createBlock(unref(ElOption), {
-                    key: t2,
-                    label: t2,
-                    value: t2
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(ElCheckbox), {
-                        "model-value": speakers.value.includes(t2)
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(t2), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["model-value"])
-                    ]),
-                    _: 2
-                  }, 1032, ["label", "value"]);
-                }), 128))
-              ]),
-              _: 1
-            }, 8, ["modelValue"])
-          ])
-        ]),
-        createVNode(unref(OTab), {
-          modelValue: activeTab.value,
-          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => activeTab.value = $event),
-          variant: "text",
-          class: "captions-tab",
-          onChange: changeTab,
-          "max-show": 9999
-        }, {
-          default: withCtx(() => [
-            createVNode(unref(OTabPane), {
-              value: 0,
-              label: unref(t)("meeting.audioToText")
-            }, {
-              default: withCtx(() => [
-                computedCaptions.value.length ? (openBlock(), createBlock(unref(OScroller), {
-                  key: 0,
-                  id: unref(scrollerDomId),
-                  class: "captions-scroller",
-                  "show-type": "hover",
-                  size: "small",
-                  "disabled-x": ""
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(ORow), {
-                      gap: "0 8px",
-                      wrap: "wrap"
-                    }, {
-                      default: withCtx(() => [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(computedCaptions.value, (item, i) => {
-                          return openBlock(), createBlock(unref(OCol), {
-                            flex: "0 0 100%",
-                            key: i
-                          }, {
-                            default: withCtx(() => [
-                              createElementVNode("div", {
-                                class: normalizeClass(["captions-item", { "captions-item-active": currentIndex.value === i + 1 }]),
-                                onClick: ($event) => videoPosition(item.start_time)
-                              }, [
-                                createElementVNode("div", _hoisted_6, [
-                                  createElementVNode("div", _hoisted_7, toDisplayString(item.speakerIdx), 1),
-                                  createElementVNode("div", _hoisted_8, toDisplayString(item.speakerLabel), 1),
-                                  createElementVNode("div", _hoisted_9, toDisplayString(formatTime(item.start_time)), 1),
-                                  currentIndex.value === i + 1 ? (openBlock(), createBlock(unref(OIcon), {
-                                    key: 0,
-                                    class: "playing initial-fill"
-                                  }, {
-                                    default: withCtx(() => [
-                                      createVNode(unref(IconPlaying))
-                                    ]),
-                                    _: 1
-                                  })) : createCommentVNode("", true)
-                                ]),
-                                withDirectives(createElementVNode("div", _hoisted_10, null, 512), [
-                                  [unref(vDompurifyHtml), item.contentHtml]
-                                ])
-                              ], 10, _hoisted_5)
-                            ]),
-                            _: 2
-                          }, 1024);
-                        }), 128))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["id"])) : (openBlock(), createElementBlock("div", _hoisted_11, [
-                  renderSlot(_ctx.$slots, "empty", {}, () => [
-                    createVNode(OEmpty)
-                  ])
-                ]))
-              ]),
-              _: 3
-            }, 8, ["label"])
-          ]),
-          _: 3
-        }, 8, ["modelValue"])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackSubtitles.vue4.mjs

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