@opendesign-plus-test/components 0.0.1-rc.212 → 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

@@ -380,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
@@ -397,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 = () => {
@@ -96,50 +97,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const loaded = ref(false);
     const playStatus = ref("init");
-    const updateSource = () => {
-      const player = playerRef.value;
-      if (!player || !props.src) return;
-      player.src(props.src);
-      player.poster(props.poster || defaultPoster);
-      const oldTracks = player.remoteTextTracks();
-      for (let i = oldTracks.length - 1; i >= 0; i--) {
-        player.removeRemoteTextTrack(oldTracks[i]);
-      }
-      if (props.vtt) {
-        player.addRemoteTextTrack({
-          kind: "subtitles",
-          src: props.vtt,
-          srclang: "zh",
-          label: "中文",
-          default: false
-        });
-        const textTracks = player.textTracks();
-        for (let i = 0; i < textTracks.length; i++) {
-          const textTrack = textTracks[i];
-          textTrack == null ? void 0 : textTrack.addEventListener("cuechange", () => {
-            handleCue(textTrack);
-          });
-        }
-      }
-      playStatus.value = "init";
-      checkedSpeakers.value = [];
-      syncSubtitleBtn(player);
-    };
-    const syncSubtitleBtn = (player) => {
-      var _a, _b;
-      const btn = (_b = (_a = player.controlBar) == null ? void 0 : _a.getChild) == null ? void 0 : _b.call(_a, "SubtitleToggleButton");
-      if (!btn) return;
-      if (props.vtt) {
-        btn.show();
-      } else {
-        btn.hide();
-        btn.removeClass("vjs-subtitle-showing");
-        btn.addClass("vjs-subtitle-hidden");
-      }
-    };
     const videoInit = async () => {
       if (!props.src) return;
-      const player = videojs("playerId", {
+      const player = videojs(playerId, {
         controls: true,
         autoplay: false,
         preload: "auto",
@@ -172,9 +132,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       });
-      playerRef.value = player;
       emits("getInstance", player);
-      updateSource();
+      player.src(props.src);
+      player.addRemoteTextTrack({
+        kind: "subtitles",
+        src: props.vtt,
+        srclang: "zh",
+        label: "中文",
+        default: false
+      });
       loaded.value = true;
       class CustomSubsCapsButton extends videojs.getComponent("Button") {
         constructor(player2, options) {
@@ -202,11 +168,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      videojs.registerComponent("SubtitleToggleButton", CustomSubsCapsButton);
-      if (!player.controlBar.children_.some((v) => v.name_ === "SubtitleToggleButton")) {
-        player.controlBar.addChild("SubtitleToggleButton", {}, 8);
+      if (props.vtt) {
+        const subtitleToggleName = `SubtitleToggleButton-${playerId}`;
+        videojs.registerComponent(subtitleToggleName, CustomSubsCapsButton);
+        if (!player.controlBar.children_.some((v) => v.name_ === subtitleToggleName)) {
+          player.controlBar.addChild(subtitleToggleName, {}, 8);
+        }
       }
-      syncSubtitleBtn(player);
+      const textTracks = player == null ? void 0 : player.textTracks().tracks_;
+      textTracks.forEach((textTrack) => {
+        textTrack == null ? void 0 : textTrack.addEventListener("cuechange", () => {
+          handleCue(textTrack);
+        });
+      });
       player.on("play", () => {
         playStatus.value = "playing";
       });
@@ -218,35 +192,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         emits("setTrackIdx", idx);
       });
-      player.on("loadedmetadata", () => {
+      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(() => {
       videoInit();
       document.addEventListener("click", closeSpeakerMenu);
     });
     watch(
-      () => [props.src, props.vtt, props.poster],
+      () => props.src,
       () => {
-        if (!playerRef.value) {
-          videoInit();
-        } else {
-          updateSource();
-        }
+        videoInit();
       }
     );
     onUnmounted(() => {
       var _a;
-      if (playerRef.value) {
-        playerRef.value.dispose();
-      } else {
-        (_a = props == null ? void 0 : props.instance) == null ? void 0 : _a.dispose();
-      }
+      (_a = props == null ? void 0 : props.instance) == null ? void 0 : _a.dispose();
       document.removeEventListener("click", closeSpeakerMenu);
     });
     __expose({
@@ -264,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.212",
+  "version": "0.0.1-rc.213",
   "type": "module",
   "publishConfig": {
     "access": "public",