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

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,

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

@@ -96,6 +96,47 @@ 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", {
@@ -131,15 +172,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       });
+      playerRef.value = player;
       emits("getInstance", player);
-      player.src(props.src);
-      player.addRemoteTextTrack({
-        kind: "subtitles",
-        src: props.vtt,
-        srclang: "zh",
-        label: "中文",
-        default: false
-      });
+      updateSource();
       loaded.value = true;
       class CustomSubsCapsButton extends videojs.getComponent("Button") {
         constructor(player2, options) {
@@ -167,18 +202,11 @@ 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);
-        }
+      videojs.registerComponent("SubtitleToggleButton", CustomSubsCapsButton);
+      if (!player.controlBar.children_.some((v) => v.name_ === "SubtitleToggleButton")) {
+        player.controlBar.addChild("SubtitleToggleButton", {}, 8);
       }
-      const textTracks = player == null ? void 0 : player.textTracks().tracks_;
-      textTracks.forEach((textTrack) => {
-        textTrack == null ? void 0 : textTrack.addEventListener("cuechange", () => {
-          handleCue(textTrack);
-        });
-      });
+      syncSubtitleBtn(player);
       player.on("play", () => {
         playStatus.value = "playing";
       });
@@ -190,28 +218,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         emits("setTrackIdx", idx);
       });
-      player.one("loadedmetadata", () => {
+      player.on("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.src, props.vtt, props.poster],
       () => {
-        videoInit();
+        if (!playerRef.value) {
+          videoInit();
+        } else {
+          updateSource();
+        }
       }
     );
     onUnmounted(() => {
       var _a;
-      (_a = props == null ? void 0 : props.instance) == null ? void 0 : _a.dispose();
+      if (playerRef.value) {
+        playerRef.value.dispose();
+      } else {
+        (_a = props == null ? void 0 : props.instance) == null ? void 0 : _a.dispose();
+      }
       document.removeEventListener("click", closeSpeakerMenu);
     });
     __expose({

package/package.json

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