@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

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

@@ -0,0 +1,426 @@
+import { defineComponent, computed, 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-search.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 { 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 };
+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 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 = document.querySelector("#captionsScrollDom > .o-scroller-container");
+      (_a = scrollContainer.value) == null ? void 0 : _a.addEventListener("wheel", handleScroll);
+    });
+    watch(
+      () => computedCaptions.value,
+      () => {
+        var _a;
+        scrollContainer.value = document.querySelector("#captionsScrollDom > .o-scroller-container");
+        (_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": "speakers-selector-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: "captionsScrollDom",
+                  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
+                })) : (openBlock(), createElementBlock("div", _hoisted_11, [
+                  renderSlot(_ctx.$slots, "empty")
+                ]))
+              ]),
+              _: 3
+            }, 8, ["label"])
+          ]),
+          _: 3
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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