@opendesign-plus-test/components 0.0.1-rc.211 → 0.0.1-rc.213

package/dist/treeshaking/components/config-provider/OPlusConfigProvider.vue.d.ts

@@ -1,6 +1,7 @@
 export interface OPlusConfigProviderPropsT {
     locale?: string;
     theme?: 'light' | 'dark';
+    emptyImg?: string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/treeshaking/components/config-provider/OPlusConfigProvider.vue.mjs

@@ -7,13 +7,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "OPlusConfigProvider",
   props: {
     locale: { default: "zh" },
-    theme: { default: "light" }
+    theme: { default: "light" },
+    emptyImg: {}
   },
   setup(__props) {
     const props = __props;
     const globalConfig = {
       locale: computed(() => unref(props.locale)),
-      theme: computed(() => unref(props.theme))
+      theme: computed(() => unref(props.theme)),
+      emptyImg: computed(() => unref(props.emptyImg))
     };
     provide(configProviderInjectKey, globalConfig);
     return (_ctx, _cache) => {

package/dist/treeshaking/components/empty/OEmpty.css

@@ -1,12 +1,12 @@
-.hover-icon-rotate .o-icon[data-v-b1d492a5] {
+.hover-icon-rotate .o-icon[data-v-4381b83c] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-b1d492a5] {
+.hover-icon-rotate:hover .o-icon[data-v-4381b83c] {
     transform: rotate(-180deg);
 }
 }
-.o-empty[data-v-b1d492a5] {
+.o-empty[data-v-4381b83c] {
   width: 100%;
   height: 100%;
   display: flex;
@@ -17,43 +17,43 @@
   --result-desc-gap: var(--o-gap-4);
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-empty[data-v-b1d492a5] {
+.o-empty[data-v-4381b83c] {
     --result-image-width: 200px;
     --result-image-height: 175px;
     --result-desc-gap: var(--o-gap-3);
 }
 }
 @media (max-width: 1200px) {
-.o-empty[data-v-b1d492a5] {
+.o-empty[data-v-4381b83c] {
     --result-image-width: 160px;
     --result-image-height: 140px;
     --result-desc-gap: var(--o-gap-2);
 }
 }
-.o-empty[data-v-b1d492a5] .o-result-description {
+.o-empty[data-v-4381b83c] .o-result-description {
   font-size: 14px;
   line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-empty[data-v-b1d492a5] .o-result-description {
+.o-empty[data-v-4381b83c] .o-result-description {
     font-size: 14px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-empty[data-v-b1d492a5] .o-result-description {
+.o-empty[data-v-4381b83c] .o-result-description {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-empty[data-v-b1d492a5] .o-result-description {
+.o-empty[data-v-4381b83c] .o-result-description {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.o-empty[data-v-b1d492a5] .o-result-description {
+.o-empty[data-v-4381b83c] .o-result-description {
     font-size: 12px;
     line-height: 18px;
 }

package/dist/treeshaking/components/empty/OEmpty.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OEmpty.vue2.mjs";
 import './OEmpty.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const OEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b1d492a5"]]);
+const OEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4381b83c"]]);
 export {
   OEmpty as default
 };

package/dist/treeshaking/components/empty/OEmpty.vue2.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, computed, openBlock, createBlock, unref, withCtx, renderSlot, createElementVNode } from "vue";
+import { defineComponent, inject, computed, openBlock, createBlock, unref, withCtx, renderSlot, createElementVNode } from "vue";
 import { OResult } from "@opensig/opendesign";
 import { useTheme } from "../../shared/theme.mjs";
 import { useI18n } from "../../i18n/index.mjs";
+import { configProviderInjectKey } from "../../shared/provide.mjs";
 import emptyImgLight from "./404.png.mjs";
 import emptyImgDark from "./404_dark.png.mjs";
 const _hoisted_1 = ["src"];
@@ -15,7 +16,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { isDark } = useTheme();
     const { t } = useI18n();
-    const emptyImage = computed(() => props.img || (isDark.value ? emptyImgDark : emptyImgLight));
+    const configProvider = inject(configProviderInjectKey);
+    const emptyImage = computed(() => {
+      return props.img || (configProvider == null ? void 0 : configProvider.emptyImg.value) || (isDark.value ? emptyImgDark : emptyImgLight);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(OResult), {
         class: "o-empty",

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

@@ -51,9 +51,6 @@
 .o-meeting-playback .left-card {
   width: 60%;
 }
-.o-meeting-playback .left-card:only-child {
-  width: 100%;
-}
 @media (max-width: 840px) {
 .o-meeting-playback .left-card {
     width: 100%;
@@ -63,6 +60,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--o-r-gap-5);
 }
 .o-meeting-playback .left-card .video-header .video-title {
   font-weight: 500;
@@ -95,6 +93,7 @@
 }
 .o-meeting-playback .left-card .video-header .o-select {
   width: 150px;
+  flex-shrink: 0;
 }
 .o-meeting-playback .left-card .video-content {
   margin-top: var(--o-gap-5);

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watchEffect, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, unref, Fragment, renderList, createCommentVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { defineComponent, ref, watch, computed, watchEffect, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, unref, Fragment, renderList, createCommentVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
 import { transformSeconds, speakerNum, transformTime } from "./utils.mjs";
 import { OSelect, OOption, OTab, OTabPane, OScroller, OIcon, OIconChevronDown } from "@opensig/opendesign";
 import _sfc_main$3 from "./components/OMeetingPlaybackSubtitles.vue.mjs";
@@ -57,6 +57,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const setTrackIdx = (idx) => {
       trackIdx.value = idx;
     };
+    watch(
+      () => props.data,
+      () => {
+        trackIdx.value = 0;
+      }
+    );
     const captionsList = ref([]);
     const getCaptions = async (url) => {
       const res = await fetch(url);
@@ -261,7 +267,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           createElementVNode("div", _hoisted_4, [
             __props.data ? (openBlock(), createBlock(_sfc_main$2, {
-              key: __props.data.subId ?? __props.data.video,
+              key: 0,
               ref_key: "playerRef",
               ref: playerRef,
               src: __props.data.video,
@@ -374,8 +380,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["class"])
           ])
         ], 512),
-        captionsList.value.length ? (openBlock(), createElementBlock("div", {
-          key: 0,
+        createElementVNode("div", {
           class: "right-card card-wrapper",
           style: normalizeStyle({
             height: rightHeight.value
@@ -391,7 +396,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["captions", "trackIdx", "instance"])
-        ], 4)) : createCommentVNode("", true)
+        ], 4)
       ]);
     };
   }

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

@@ -551,6 +551,9 @@
 .o-meeting-playback-subtitles .o-tab .o-row {
   margin-top: 0;
 }
+.o-meeting-playback-subtitles .playback-empty {
+  height: 100%;
+}
 @media (max-width: 840px) {
 .o-meeting-playback-subtitles .captions-tab .captions-scroller {
     max-height: 600px;

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

@@ -1,4 +1,4 @@
-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 { 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";
@@ -11,6 +11,7 @@ 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" };
@@ -26,7 +27,10 @@ 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 _hoisted_11 = {
+  key: 1,
+  class: "playback-empty"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "OMeetingPlaybackSubtitles",
   props: {
@@ -39,6 +43,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 = () => {
@@ -88,14 +94,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     onMounted(() => {
       var _a;
-      scrollContainer.value = document.querySelector("#captionsScrollDom > .o-scroller-container");
+      scrollContainer.value = getScrollerContainer();
       (_a = scrollContainer.value) == null ? void 0 : _a.addEventListener("wheel", handleScroll);
     });
     watch(
       () => computedCaptions.value,
       () => {
         var _a;
-        scrollContainer.value = document.querySelector("#captionsScrollDom > .o-scroller-container");
+        scrollContainer.value = getScrollerContainer();
         (_a = scrollContainer.value) == null ? void 0 : _a.addEventListener("wheel", handleScroll);
       }
     );
@@ -359,7 +365,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 computedCaptions.value.length ? (openBlock(), createBlock(unref(OScroller), {
                   key: 0,
-                  id: "captionsScrollDom",
+                  id: unref(scrollerDomId),
                   class: "captions-scroller",
                   "show-type": "hover",
                   size: "small",
@@ -408,8 +414,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     })
                   ]),
                   _: 1
-                })) : (openBlock(), createElementBlock("div", _hoisted_11, [
-                  renderSlot(_ctx.$slots, "empty")
+                }, 8, ["id"])) : (openBlock(), createElementBlock("div", _hoisted_11, [
+                  renderSlot(_ctx.$slots, "empty", {}, () => [
+                    createVNode(OEmpty)
+                  ])
                 ]))
               ]),
               _: 3

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

@@ -1,10 +1,11 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, nextTick } from "vue";
+import { defineComponent, ref, useId, watch, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, toDisplayString, createCommentVNode } 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 = {
+const _hoisted_2 = ["id"];
+const _hoisted_3 = {
   key: 0,
   class: "poster-title"
 };
@@ -23,8 +24,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const timer = ref();
-    const colHeight = ref();
     const playerRef = ref();
+    const playerId = useId();
     const emits = __emit;
     const speakerMenuVisible = ref(false);
     const closeSpeakerMenu = () => {
@@ -98,7 +99,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const playStatus = ref("init");
     const videoInit = async () => {
       if (!props.src) return;
-      const player = videojs("playerId", {
+      const player = videojs(playerId, {
         controls: true,
         autoplay: false,
         preload: "auto",
@@ -168,9 +169,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
       if (props.vtt) {
-        videojs.registerComponent("SubtitleToggleButton", CustomSubsCapsButton);
-        if (!player.controlBar.children_.some((v) => v.name_ === "SubtitleToggleButton")) {
-          player.controlBar.addChild("SubtitleToggleButton", {}, 8);
+        const subtitleToggleName = `SubtitleToggleButton-${playerId}`;
+        videojs.registerComponent(subtitleToggleName, CustomSubsCapsButton);
+        if (!player.controlBar.children_.some((v) => v.name_ === subtitleToggleName)) {
+          player.controlBar.addChild(subtitleToggleName, {}, 8);
         }
       }
       const textTracks = player == null ? void 0 : player.textTracks().tracks_;
@@ -193,10 +195,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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(() => {
@@ -229,11 +227,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             [playStatus.value]: true
           }])
         }, [
-          _cache[0] || (_cache[0] = createElementVNode("video", {
+          createElementVNode("video", {
             class: "video-js",
-            id: "playerId"
-          }, null, -1)),
-          __props.posterTitle ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.posterTitle), 1)) : createCommentVNode("", true)
+            id: unref(playerId)
+          }, null, 8, _hoisted_2),
+          __props.posterTitle ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.posterTitle), 1)) : createCommentVNode("", true)
         ], 2)
       ]);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.211",
+  "version": "0.0.1-rc.213",
   "type": "module",
   "publishConfig": {
     "access": "public",