@opendesign-plus-test/components 0.0.1-rc.79 → 0.0.1-rc.81

package/dist/treeshaking/esm/components/meeting/OMeetingPlayback.vue.mjs

@@ -0,0 +1,328 @@
+import { defineComponent, ref, computed, watchEffect, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref, withCtx, Fragment, renderList, createCommentVNode, createVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { transformSeconds, speakerNum, transformTime } from "./utils.mjs";
+import { OSelect, OOption, OTab, OTabPane, OScroller } from "@opensig/opendesign";
+import _sfc_main$2 from "./components/OMeetingPlaybackSubtitles.vue.mjs";
+import './components/OMeetingPlaybackSubtitles.css';
+import './components/OMeetingPlaybackSubtitles2.css';
+import _sfc_main$1 from "./components/OMeetingPlaybackVideo.vue.mjs";
+import './components/OMeetingPlaybackVideo.css';
+import { useI18n } from "../../i18n/index.mjs";
+import { PROGRESS_COLORS } from "./config.mjs";
+const _hoisted_1 = { class: "o-meeting-playback" };
+const _hoisted_2 = { class: "video-header" };
+const _hoisted_3 = { class: "video-title" };
+const _hoisted_4 = { class: "video-content" };
+const _hoisted_5 = { class: "info-wrapper" };
+const _hoisted_6 = {
+  key: 0,
+  class: "base-info"
+};
+const _hoisted_7 = { class: "info-item" };
+const _hoisted_8 = { class: "info-item" };
+const _hoisted_9 = { class: "info-item" };
+const _hoisted_10 = { class: "info-item" };
+const _hoisted_11 = {
+  key: 1,
+  class: "subject-list"
+};
+const _hoisted_12 = { class: "subject-title" };
+const _hoisted_13 = {
+  key: 0,
+  class: "subject-progress"
+};
+const _hoisted_14 = ["data-start", "data-end"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OMeetingPlayback",
+  props: {
+    dates: { default: () => [] },
+    detail: { default: () => ({}) },
+    data: { default: () => ({}) }
+  },
+  emits: ["change-date"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useI18n();
+    const playbackInstance = ref(null);
+    const getInstance = (instance) => {
+      playbackInstance.value = instance;
+    };
+    const trackIdx = ref(0);
+    const setTrackIdx = (idx) => {
+      trackIdx.value = idx;
+    };
+    const captionsList = ref([]);
+    const getCaptions = async (url) => {
+      const res = await fetch(url);
+      const json = await res.json();
+      captionsList.value = (json.segments || []).map((v) => {
+        const speakerIdx = speakerNum(v.speaker);
+        return {
+          ...v,
+          contentHtml: v.content,
+          speakerIdx,
+          speakerLabel: `${t("meeting.speaker")}${speakerIdx}`
+        };
+      });
+    };
+    const subjectList = ref([]);
+    const getProgressColor = (idx) => {
+      return PROGRESS_COLORS[idx % 3];
+    };
+    const playerDuration = ref(0);
+    const getPlayerDuration = (seconds) => {
+      playerDuration.value = seconds;
+    };
+    const playerRef = ref();
+    const mouseTime = ref("");
+    const mousePosition = ref([0, 0]);
+    function calculateCurrentTime(e, bar) {
+      const rect = bar.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const ratio = x / rect.width;
+      mousePosition.value[1] = `${bar.offsetTop + bar.parentElement.offsetTop}px`;
+      mousePosition.value[0] = `${ratio * 100}%`;
+      return ratio * playerDuration.value;
+    }
+    const getParentProgress = (el) => {
+      let ele = el;
+      while (ele && ele.className !== "subject-progress") {
+        ele = ele.parentElement;
+      }
+      return ele;
+    };
+    const mouseOverItem = (e) => {
+      let ele = getParentProgress(e.target);
+      if (ele) {
+        mouseTime.value = transformSeconds(calculateCurrentTime(e, ele));
+      }
+    };
+    const mouseLeaveItem = () => {
+      mouseTime.value = "";
+    };
+    const changeTime = (e) => {
+      var _a;
+      let ele = getParentProgress(e.target);
+      if (ele) {
+        (_a = playerRef.value) == null ? void 0 : _a.changeTime(calculateCurrentTime(e, ele));
+      }
+    };
+    const getSubjectList = async (url) => {
+      const res = await fetch(url);
+      const json = await res.json();
+      subjectList.value = (json || []).map((z) => {
+        return {
+          ...z,
+          startTimeNumber: transformTime(z.startTime),
+          endTimeNumber: transformTime(z.endTime)
+        };
+      });
+    };
+    const tab = ref("info");
+    const tabOptions = computed(() => {
+      const items = [
+        {
+          label: t("meeting.baseInfo"),
+          value: "info"
+        }
+      ];
+      if (subjectList.value.length) {
+        items.push({
+          label: t("meeting.subject"),
+          value: "subject"
+        });
+      }
+      return items;
+    });
+    const getData = () => {
+      if (!props.data) {
+        return;
+      }
+      if (props.data.textJson) {
+        getCaptions(props.data.textJson);
+      }
+      if (props.data.topicJson) {
+        getSubjectList(props.data.topicJson);
+      }
+    };
+    watchEffect(() => {
+      getData();
+    });
+    const changeDate = (val) => {
+      emits("change-date", val);
+    };
+    const leftRef = ref(null);
+    const rightHeight = ref("auto");
+    let observer = null;
+    let raf = null;
+    const updateHeight = () => {
+      if (leftRef.value) {
+        rightHeight.value = `${leftRef.value.offsetHeight}px`;
+      }
+    };
+    const debouncedUpdate = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(updateHeight);
+    };
+    onMounted(() => {
+      if (leftRef.value) {
+        observer = new ResizeObserver(debouncedUpdate);
+        observer.observe(leftRef.value);
+        updateHeight();
+      }
+    });
+    onUnmounted(() => {
+      cancelAnimationFrame(raf);
+      observer == null ? void 0 : observer.disconnect();
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "left-card card-wrapper",
+          ref_key: "leftRef",
+          ref: leftRef
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, toDisplayString((_a = __props.detail) == null ? void 0 : _a.topic) + "(" + toDisplayString((_b = __props.detail) == null ? void 0 : _b.date) + ")", 1),
+            ((_c = __props.dates) == null ? void 0 : _c.length) ? (openBlock(), createBlock(unref(OSelect), {
+              key: 0,
+              size: "large",
+              clearable: false,
+              "model-value": (_d = __props.detail) == null ? void 0 : _d.date,
+              placeholder: unref(t)("meeting.selectDate"),
+              onChange: changeDate
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.dates, (t2) => {
+                  return openBlock(), createBlock(unref(OOption), {
+                    key: t2,
+                    value: t2,
+                    label: t2
+                  }, null, 8, ["value", "label"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["model-value", "placeholder"])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            __props.data ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              ref_key: "playerRef",
+              ref: playerRef,
+              src: __props.data.video,
+              vtt: __props.data.textVtt,
+              poster: __props.data.poster,
+              captions: captionsList.value,
+              onGetDuration: getPlayerDuration,
+              instance: playbackInstance.value,
+              onGetInstance: getInstance,
+              trackIdx: trackIdx.value,
+              onSetTrackIdx: setTrackIdx
+            }, null, 8, ["src", "vtt", "poster", "captions", "instance", "trackIdx"])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            createVNode(unref(OTab), {
+              modelValue: tab.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tab.value = $event),
+              "max-show": 9999
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(tabOptions.value, (t2) => {
+                  return openBlock(), createBlock(unref(OTabPane), {
+                    key: t2.value,
+                    value: t2.value,
+                    label: t2.label
+                  }, null, 8, ["value", "label"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            createVNode(unref(OScroller), {
+              class: normalizeClass(["tab-content", `tab-content-${tab.value}`]),
+              "show-type": "hover"
+            }, {
+              default: withCtx(() => {
+                var _a2;
+                return [
+                  tab.value === tabOptions.value[0].value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    createElementVNode("div", _hoisted_7, [
+                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item1")), 1),
+                      createElementVNode("span", null, toDisplayString(__props.detail.sponsor), 1)
+                    ]),
+                    createElementVNode("div", _hoisted_8, [
+                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item2")), 1),
+                      createElementVNode("span", null, toDisplayString(__props.detail.groupName), 1)
+                    ]),
+                    createElementVNode("div", _hoisted_9, [
+                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item3")), 1),
+                      createElementVNode("span", null, toDisplayString(__props.detail.date) + "  " + toDisplayString(__props.detail.start) + "~" + toDisplayString(__props.detail.end), 1)
+                    ]),
+                    createElementVNode("div", _hoisted_10, [
+                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item4")), 1),
+                      createElementVNode("span", null, toDisplayString(__props.detail.agenda || "-"), 1)
+                    ])
+                  ])) : createCommentVNode("", true),
+                  tab.value === ((_a2 = tabOptions.value[1]) == null ? void 0 : _a2.value) ? (openBlock(), createElementBlock("div", _hoisted_11, [
+                    mouseTime.value ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "mouse-current-time",
+                      style: normalizeStyle({
+                        top: mousePosition.value[1],
+                        left: mousePosition.value[0]
+                      })
+                    }, toDisplayString(mouseTime.value), 5)) : createCommentVNode("", true),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(subjectList.value, (sub, idx) => {
+                      return openBlock(), createElementBlock("div", {
+                        class: "subject-item",
+                        key: sub.title
+                      }, [
+                        createElementVNode("div", _hoisted_12, toDisplayString(sub.title), 1),
+                        playerDuration.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                          createElementVNode("div", {
+                            class: "subject-progress-item",
+                            onClick: changeTime,
+                            onMousemove: mouseOverItem,
+                            onMouseleave: mouseLeaveItem,
+                            "data-start": sub.startTime,
+                            "data-end": sub.endTime,
+                            style: normalizeStyle({
+                              "--start": (sub.startTimeNumber < 0 ? 0 : sub.startTimeNumber) / playerDuration.value,
+                              "--end": (sub.endTimeNumber > playerDuration.value ? playerDuration.value : sub.endTimeNumber) / playerDuration.value,
+                              background: getProgressColor(idx)
+                            })
+                          }, null, 44, _hoisted_14)
+                        ])) : createCommentVNode("", true)
+                      ]);
+                    }), 128))
+                  ])) : createCommentVNode("", true)
+                ];
+              }),
+              _: 1
+            }, 8, ["class"])
+          ])
+        ], 512),
+        createElementVNode("div", {
+          class: "right-card card-wrapper",
+          style: normalizeStyle({
+            height: rightHeight.value
+          })
+        }, [
+          createVNode(_sfc_main$2, {
+            captions: captionsList.value,
+            trackIdx: trackIdx.value,
+            instance: playbackInstance.value
+          }, {
+            empty: withCtx(() => [
+              renderSlot(_ctx.$slots, "empty")
+            ]),
+            _: 3
+          }, 8, ["captions", "trackIdx", "instance"])
+        ], 4)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/esm/components/meeting/OMeetingPlayback.vue3.mjs

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

package/dist/treeshaking/esm/components/meeting/OMeetingSigCalendar.css

@@ -0,0 +1,224 @@
+.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-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--meeting-card-radius);
+  margin-top: var(--o-gap-5);
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .meeting-card-header .el-input {
+    flex-grow: 1;
+}
+.o-sig-meeting-calendar .meeting-divide {
+    width: calc(100% - 32px);
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--o-gap-4);
+  padding: var(--o-gap-4) var(--o-gap-3) 0 var(--o-gap-3);
+  flex-wrap: nowrap;
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .phone-filter-wrapper {
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--o-gap-2);
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .date-select {
+  padding-bottom: var(--o-gap-2);
+  max-width: 240px;
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .phone-filter-wrapper .date-select {
+    max-width: 100%;
+    width: 100%;
+    padding-bottom: 0;
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .date-select .o-select {
+  width: 100%;
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .o-tab {
+  flex-shrink: 0;
+  --tab-text-height: calc(var(--tab-nav-text-height) + var(--o-gap-2) + 2px);
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .phone-filter-wrapper .o-tab {
+    --tab-text-height: var(--tab-nav-text-height);
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .o-tab .o-tab-head {
+  line-height: var(--tab-text-height);
+}
+.o-sig-meeting-calendar .meeting-card-header {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: var(--o-gap-3) var(--o-gap-5) 0;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    padding: var(--o-gap-3) var(--o-gap-4) 0;
+}
+}
+@media (max-width: 840px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    display: none;
+}
+}
+.o-sig-meeting-calendar .meeting-card-header .date-meeting {
+  max-width: var(--el-date-editor-width);
+  width: auto;
+}
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+  width: 35%;
+  padding-bottom: var(--o-gap-3);
+  color: var(--o-color-info1);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+  position: relative;
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab .o-tab-nav {
+  padding-bottom: var(--o-gap-3);
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab .o-tab-nav svg path {
+  fill: currentColor;
+}
+.o-sig-meeting-calendar .el-input__prefix {
+  display: none;
+}
+.o-sig-meeting-calendar .tips {
+  margin-left: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--o-color-info1);
+  position: relative;
+  top: 2px;
+}
+.o-sig-meeting-calendar .tips path {
+  opacity: 1;
+}
+.o-sig-meeting-calendar .meeting-divider {
+  width: 100%;
+  --o-divider-gap: 0;
+}
+.o-sig-meeting-calendar .meeting-card-content {
+  display: flex;
+}
+.o-sig-meeting-calendar .content-divider {
+  height: 400px;
+  --o-divider-label-gap: 0;
+}
+.o-sig-meeting-calendar .list-content {
+  min-width: 0;
+  flex-grow: 1;
+  height: 360px;
+}
+@media (max-width: 840px) {
+.o-sig-meeting-calendar .list-content {
+    height: auto;
+}
+}
+.o-sig-meeting-calendar .empty-result {
+  --result-image-width: 200px;
+  --result-image-height: 175px;
+}
+.o-sig-meeting-calendar .empty-result .o-result-description {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}