@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.101

package/dist/treeshaking/components/meeting/components/OMeetingDetail.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,149 @@
+.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-meeting-detail {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  row-gap: var(--o-gap-2);
+  column-gap: var(--o-gap-4);
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-detail {
+    row-gap: var(--o-gap-2);
+    column-gap: var(--o-gap-2);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-detail {
+    row-gap: var(--o-gap-2);
+    column-gap: var(--o-gap-4);
+}
+}
+.o-meeting-detail .label-item {
+  color: var(--o-color-info3);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  align-items: start;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-detail .label-item {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-detail .label-item {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-detail .label-item {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-detail .label-item {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-detail .label-item.record-item {
+  align-items: start;
+}
+.o-meeting-detail .label-item.record-item .value {
+  margin-bottom: 0;
+}
+.o-meeting-detail .label-item .label {
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: flex;
+}
+.o-meeting-detail .label-item .label i {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.o-meeting-detail .label-item .split-mark {
+  display: none;
+}
+.o-meeting-detail .label-item .o-link {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-detail .label-item .o-link {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-detail .label-item .o-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-detail .label-item .o-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-detail .label-item .o-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-detail .label-item .o-link .o-link-main {
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.o-meeting-detail .label-item .value {
+  display: flex;
+  align-items: flex-start;
+}
+.o-meeting-detail .label-item .value.link {
+  color: var(--o-color-primary1);
+  cursor: pointer;
+}
+.o-meeting-detail .label-item .value .extra {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.o-meeting-detail .label-item.is-empty {
+  display: none;
+}
+.o-meeting-detail .meeting-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--o-gap-2);
+}
+@media (max-width: 600px) {
+.o-meeting-detail .meeting-action {
+    border-top: 1px solid var(--o-color-control4);
+    padding-top: var(--o-gap-2);
+    position: static;
+    margin-top: var(--o-gap-2);
+}
+}

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

@@ -0,0 +1,6 @@
+import OMeetingPlaybackSubtitles_vue_vue_type_script_setup_true_lang_default from "./OMeetingPlaybackSubtitles.vue_vue_type_script_setup_true_lang.mjs";
+import './OMeetingPlaybackSubtitles.vue_vue_type_style_index_0_lang.css';
+import './OMeetingPlaybackSubtitles.vue_vue_type_style_index_1_lang.css';
+// src/components/meeting/components/OMeetingPlaybackSubtitles.vue
+var OMeetingPlaybackSubtitles_default = OMeetingPlaybackSubtitles_vue_vue_type_script_setup_true_lang_default;
+export { OMeetingPlaybackSubtitles_default as default };

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

@@ -0,0 +1,20 @@
+import { CaptionItemT, MeetingPlaybackSubtitlesPropsT } from '..';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        empty?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<MeetingPlaybackSubtitlesPropsT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MeetingPlaybackSubtitlesPropsT> & Readonly<{}>, {
+    captions: CaptionItemT[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,314 @@
+import { useI18n } from "../../../i18n/index.mjs";
+import icon_playing_default from "../../../_virtual/~icons/meeting/icon-playing.mjs";
+import icon_search_default from "../../../_virtual/~icons/components/icon-search.mjs";
+import icon_chevron_down_default from "../../../_virtual/~icons/components/icon-chevron-down.mjs";
+import icon_chevron_up_default from "../../../_virtual/~icons/components/icon-chevron-up.mjs";
+import icon_close_default from "../../../_virtual/~icons/components/icon-close.mjs";
+import icon_speaker_default from "../../../_virtual/~icons/meeting/icon-speaker.mjs";
+import OEmpty_default from "../../empty/OEmpty.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { OCol, ODivider, OIcon, OInput, ORow, OScroller, OTab, OTabPane } from "@opensig/opendesign";
+import { ElCheckbox, ElOption, ElSelect } from "element-plus";
+import { useDebounceFn } from "@vueuse/core";
+import "element-plus/es/components/select/style/css";
+import "element-plus/es/components/option/style/css";
+import "element-plus/es/components/checkbox/style/css";
+import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
+// src/components/meeting/components/OMeetingPlaybackSubtitles.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-meeting-playback-subtitles" };
+var _hoisted_2 = { class: "search-captions" };
+var _hoisted_3 = {
+	key: 0,
+	class: "suffix-box"
+};
+var _hoisted_4 = { class: "right-handle" };
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = { class: "info" };
+var _hoisted_7 = { class: "num" };
+var _hoisted_8 = { class: "speaker" };
+var _hoisted_9 = { class: "start-time" };
+var _hoisted_10 = { class: "text" };
+var _hoisted_11 = {
+	key: 1,
+	class: "playback-empty"
+};
+var OMeetingPlaybackSubtitles_vue_vue_type_script_setup_true_lang_default = /*@__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(() => {
+				if (scrollContainer.value) scrollContainer.value?.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			});
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const formatTime = (num) => {
+			return `00:${num.split(".")[0]}`.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(() => {
+			scrollContainer.value = getScrollerContainer();
+			scrollContainer.value?.addEventListener("wheel", handleScroll);
+		});
+		watch(() => computedCaptions.value, () => {
+			scrollContainer.value = getScrollerContainer();
+			scrollContainer.value?.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, () => {
+			if (wheelVisible.value && searchValue.value) return;
+			const captionActive = scrollContainer.value?.querySelectorAll(".captions-item")[currentIndex.value - 1];
+			scrollContainer.value?.scrollTo({
+				top: captionActive?.offsetTop - 16,
+				behavior: "smooth"
+			});
+		});
+		onUnmounted(() => {
+			if (scrollContainer.value) scrollContainer.value.removeEventListener("wheel", handleScroll);
+		});
+		const searchLocate = (step, val) => {
+			const currentLight = document.getElementsByClassName("light-keyword")[step - 1];
+			document.getElementsByClassName("light-keyword")[step - val]?.classList.remove("light-keyword-active");
+			currentLight?.classList.add("light-keyword-active");
+			const aboveVisible = currentLight.offsetTop + currentLight.offsetHeight < scrollContainer.value?.scrollTop;
+			const exceedVisible = currentLight.offsetTop > scrollContainer.value?.offsetHeight + scrollContainer.value?.scrollTop;
+			if (aboveVisible || exceedVisible) scrollContainer.value?.scrollTo({
+				top: currentLight.parentElement?.parentElement?.offsetTop,
+				behavior: "smooth"
+			});
+		};
+		const prevKeyword = () => {
+			if (!total.value || current.value === 1) return;
+			current.value--;
+			searchLocate(current.value, 0);
+		};
+		const nextKeyword = (e) => {
+			if (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(() => {
+				const lightAll = document.getElementsByClassName("light-keyword");
+				total.value = lightAll.length;
+				if (total.value) nextKeyword();
+				else scrollContainer.value?.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(icon_search_default))]),
+					_: 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(icon_chevron_up_default))]),
+						_: 1
+					}),
+					createVNode(unref(OIcon), { onClick: nextKeyword }, {
+						default: withCtx(() => [createVNode(unref(icon_chevron_down_default))]),
+						_: 1
+					}),
+					createVNode(unref(ODivider), { direction: "v" }),
+					createVNode(unref(OIcon), {
+						class: "hover-close",
+						onClick: _cache[0] || (_cache[0] = ($event) => searchValue.value = "")
+					}, {
+						default: withCtx(() => [createVNode(unref(icon_close_default))]),
+						_: 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(icon_speaker_default))]),
+					_: 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, (t) => {
+					return openBlock(), createBlock(unref(ElOption), {
+						key: t,
+						label: t,
+						value: t
+					}, {
+						default: withCtx(() => [createVNode(unref(ElCheckbox), { "model-value": speakers.value.includes(t) }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(t), 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(icon_playing_default))]),
+											_: 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_default)])]))]),
+					_: 3
+				}, 8, ["label"])]),
+				_: 3
+			}, 8, ["modelValue"])]);
+		};
+	}
+});
+export { OMeetingPlaybackSubtitles_vue_vue_type_script_setup_true_lang_default as default };