tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/dist/components/LiveList/LiveList.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, Fragment, renderList, createVNode, toDisplayString } from "vue";
+import { defineComponent, useCssVars, ref, computed, watch, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, Fragment, renderList, createVNode, toDisplayString } from "vue";
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveState } from "../../states/LiveState/index.js";
 import { useLoginState } from "../../states/LoginState.js";
@@ -8,61 +8,84 @@ const _hoisted_1 = {
   key: 0,
   class: "live-list-panel"
 };
-const _hoisted_2 = { class: "live-list-items" };
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "live-room-cover" };
-const _hoisted_5 = { class: "header" };
-const _hoisted_6 = { class: "left" };
-const _hoisted_7 = { class: "right" };
-const _hoisted_8 = ["src"];
-const _hoisted_9 = { class: "live-name" };
-const _hoisted_10 = { class: "owner-info" };
-const _hoisted_11 = { class: "owner-name" };
-const _hoisted_12 = {
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "live-room-cover" };
+const _hoisted_4 = { class: "header" };
+const _hoisted_5 = { class: "left" };
+const _hoisted_6 = { class: "right" };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = { class: "live-name" };
+const _hoisted_9 = { class: "owner-info" };
+const _hoisted_10 = { class: "owner-name" };
+const _hoisted_11 = {
   key: 0,
   class: "bottom-text-no-more"
 };
-const _hoisted_13 = {
+const _hoisted_12 = {
   key: 1,
   class: "no-live"
 };
-const _hoisted_14 = {
+const _hoisted_13 = {
   key: 2,
   class: "bottom-text"
 };
-const _hoisted_15 = {
+const _hoisted_14 = {
   key: 0,
   class: "load-more-lives"
 };
-const _hoisted_16 = {
+const _hoisted_15 = {
   key: 1,
   class: "loading"
 };
 const DEFAULT_COVER = "https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png";
+const columnCount = 5;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LiveList",
   emits: ["live-room-click"],
   setup(__props, { emit: __emit }) {
-    const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+    useCssVars((_ctx) => ({
+      "4d975fe5": liveItemWidth.value,
+      "4b85a2e8": liveItemHeight.value,
+      "3688f7de": coverWidth.value,
+      "ce33f788": coverHeight.value
+    }));
+    const { liveList, currentCursor, fetchLiveList } = useLiveState();
     const { loginUserInfo } = useLoginState();
     const { t } = useUIKit();
     const scrollContainerRef = ref(null);
-    const shouldFetchMoreLiveList = computed(() => {
-      return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
-    });
-    const isShowMoreVisible = computed(() => {
-      return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-    });
-    const emit = __emit;
+    const liveListItemsRef = ref(null);
+    const isLoadingMore = ref(false);
+    const hasMoreLive = computed(() => currentCursor.value !== "");
+    const liveItemWidth = ref("356px");
+    const liveItemHeight = ref("270px");
+    const coverWidth = ref("356px");
+    const coverHeight = ref("210px");
+    const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
+    const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
     watch(
       loginUserInfo,
-      (user) => {
+      async (user) => {
         if (user && user.userId) {
-          fetchLiveList({});
+          isLoadingMore.value = true;
+          await fetchLiveList({});
+          isLoadingMore.value = false;
         }
       },
       { immediate: true }
     );
+    watch(liveListItemsRef, () => {
+      if (liveListItemsRef.value && screen.width > screen.height) {
+        const { width } = liveListItemsRef.value.getBoundingClientRect();
+        const gapWidth = 20 * (columnCount - 1);
+        const newItemWidth = (width - gapWidth) / columnCount;
+        const newItemHeight = newItemWidth * 0.75;
+        liveItemWidth.value = `${newItemWidth}px`;
+        liveItemHeight.value = `${newItemHeight}px`;
+        coverWidth.value = `${newItemWidth}px`;
+        coverHeight.value = `${newItemHeight - 52}px`;
+      }
+    });
+    const emit = __emit;
     function liveRoomClick(liveInfo) {
       console.log("liveRoomClick,liveInfo:", liveInfo);
       emit("live-room-click", liveInfo);
@@ -78,7 +101,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-        fetchLiveList({ append: true });
+        fetchMoreLives();
+      }
+    }
+    async function fetchMoreLives() {
+      if (!hasMoreLive.value || isLoadingMore.value) {
+        return;
+      }
+      try {
+        isLoadingMore.value = true;
+        await fetchLiveList({ cursor: currentCursor.value });
+      } finally {
+        isLoadingMore.value = false;
       }
     }
     function handleCoverImageError(event) {
@@ -91,25 +125,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return unref(loginUserInfo) ? (openBlock(), createElementBlock("div", _hoisted_1, [
         unref(liveList).length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "live-list",
-          onWheel: handleWheel,
           ref_key: "scrollContainerRef",
-          ref: scrollContainerRef
+          ref: scrollContainerRef,
+          class: "live-list",
+          onWheel: handleWheel
         }, [
-          createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            ref_key: "liveListItemsRef",
+            ref: liveListItemsRef,
+            class: "live-list-items"
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(liveList), (item) => {
               return openBlock(), createElementBlock("div", {
-                class: "live-item",
                 key: item.liveId,
+                class: "live-item",
                 onClick: ($event) => liveRoomClick(item)
               }, [
-                createElementVNode("div", _hoisted_4, [
-                  createElementVNode("div", _hoisted_5, [
-                    createElementVNode("div", _hoisted_6, [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    createElementVNode("div", _hoisted_5, [
                       createVNode(unref(IconLiveCoverHeader), { size: 10 }),
                       createElementVNode("span", null, toDisplayString(unref(t)("LIVE")), 1)
                     ]),
-                    createElementVNode("div", _hoisted_7, [
+                    createElementVNode("div", _hoisted_6, [
                       createElementVNode("span", null, toDisplayString(item.currentViewerCount || 0), 1),
                       createElementVNode("span", null, toDisplayString(unref(t)("people have watched the live")), 1)
                     ])
@@ -118,35 +156,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     src: item.coverUrl || DEFAULT_COVER,
                     alt: "",
                     onError: handleCoverImageError
-                  }, null, 40, _hoisted_8)
+                  }, null, 40, _hoisted_7)
                 ]),
-                createElementVNode("span", _hoisted_9, toDisplayString(item.liveName), 1),
-                createElementVNode("div", _hoisted_10, [
+                createElementVNode("span", _hoisted_8, toDisplayString(item.liveName), 1),
+                createElementVNode("div", _hoisted_9, [
                   createVNode(unref(Avatar), {
                     src: item.liveOwner.avatarUrl,
-                    size: 24
+                    size: 24,
+                    style: { border: "1px solid var(--uikit-color-white-7)" }
                   }, null, 8, ["src"]),
-                  createElementVNode("span", _hoisted_11, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
+                  createElementVNode("span", _hoisted_10, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
                 ])
-              ], 8, _hoisted_3);
+              ], 8, _hoisted_2);
             }), 128))
-          ]),
-          !unref(hasMoreLive) ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          ], 512),
+          !hasMoreLive.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
             createElementVNode("span", null, toDisplayString(unref(t)("No More")), 1)
           ])) : createCommentVNode("", true)
-        ], 544)) : !unref(isLoadingLiveList) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+        ], 544)) : !isLoadingMore.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
           createVNode(unref(IconNoLiveRoom), { size: 60 }),
           createElementVNode("span", null, toDisplayString(unref(t)("No Live")), 1)
         ])) : createCommentVNode("", true),
-        unref(liveList).length > 0 && (isShowMoreVisible.value || unref(isLoadingMore)) ? (openBlock(), createElementBlock("div", _hoisted_14, [
-          isShowMoreVisible.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Load More")), 1)) : createCommentVNode("", true),
-          unref(isLoadingMore) ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
+        unref(liveList).length > 0 && (isShowMoreVisible.value || isLoadingMore.value) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          isShowMoreVisible.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unref(t)("Load More")), 1)) : createCommentVNode("", true),
+          isLoadingMore.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
 });
-const LiveListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b70b7281"]]);
+const LiveListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b8540cae"]]);
 export {
   LiveListPC as default
 };

package/dist/components/LiveList/LiveListH5.js

@@ -37,27 +37,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["live-room-click"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "b23aa27c": liveItemWidth.value,
-      "1ba42fab": liveItemHeight.value
+      "11f6a5ce": liveItemWidth.value,
+      "607c0798": liveItemHeight.value
     }));
-    const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+    const { liveList, currentCursor, fetchLiveList } = useLiveState();
     const { loginUserInfo } = useLoginState();
     const { t } = useUIKit();
     const scrollContainerRef = ref(null);
+    const isLoadingMore = ref(false);
+    const hasMoreLive = computed(() => currentCursor.value !== "");
     const liveItemWidth = ref("168px");
     const liveItemHeight = ref("262px");
-    const shouldFetchMoreLiveList = computed(() => {
-      return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
-    });
-    const isShowMoreVisible = computed(() => {
-      return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-    });
+    const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
+    const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
     const emit = __emit;
     watch(
       loginUserInfo,
-      (user) => {
+      async (user) => {
         if (user && user.userId) {
-          fetchLiveList({});
+          isLoadingMore.value = true;
+          await fetchLiveList({});
+          isLoadingMore.value = false;
         }
       },
       { immediate: true }
@@ -87,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-        fetchLiveList({ append: true });
+        fetchMoreLives();
       }
     }
     function handleScroll() {
@@ -95,7 +95,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       if (isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-        fetchLiveList({ append: true });
+        fetchMoreLives();
+      }
+    }
+    async function fetchMoreLives() {
+      if (!hasMoreLive.value || isLoadingMore.value) {
+        return;
+      }
+      try {
+        isLoadingMore.value = true;
+        await fetchLiveList({ cursor: currentCursor.value });
+      } finally {
+        isLoadingMore.value = false;
       }
     }
     function handleCoverImageError(event) {
@@ -118,17 +129,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return unref(loginUserInfo) ? (openBlock(), createElementBlock("div", _hoisted_1, [
         unref(liveList).length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
+          ref_key: "scrollContainerRef",
+          ref: scrollContainerRef,
           class: "live-list",
           onScroll: handleScroll,
-          onWheel: handleWheel,
-          ref_key: "scrollContainerRef",
-          ref: scrollContainerRef
+          onWheel: handleWheel
         }, [
           createElementVNode("div", _hoisted_2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(liveList), (item) => {
               return openBlock(), createElementBlock("div", {
-                class: "live-item",
                 key: item.liveId,
+                class: "live-item",
                 onClick: ($event) => liveRoomClick(item)
               }, [
                 createElementVNode("div", _hoisted_4, [
@@ -147,29 +158,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_9, [
                   createVNode(unref(Avatar), {
                     src: item.liveOwner.avatarUrl,
-                    size: 16
+                    size: 16,
+                    style: { border: "1px solid var(--uikit-color-white-7)" }
                   }, null, 8, ["src"]),
                   createElementVNode("span", _hoisted_10, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
                 ])
               ], 8, _hoisted_3);
             }), 128))
           ]),
-          !unref(hasMoreLive) ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          !hasMoreLive.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
             createElementVNode("span", null, toDisplayString(unref(t)("No More")), 1)
           ])) : createCommentVNode("", true)
-        ], 544)) : !unref(isLoadingLiveList) ? (openBlock(), createElementBlock("div", _hoisted_12, [
+        ], 544)) : !isLoadingMore.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
           createVNode(unref(IconNoLiveRoom), { size: 60 }),
           createElementVNode("span", null, toDisplayString(unref(t)("No Live")), 1)
         ])) : createCommentVNode("", true),
-        unref(liveList).length > 0 && (isShowMoreVisible.value || unref(isLoadingMore)) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+        unref(liveList).length > 0 && (isShowMoreVisible.value || isLoadingMore.value) ? (openBlock(), createElementBlock("div", _hoisted_13, [
           isShowMoreVisible.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unref(t)("Load More")), 1)) : createCommentVNode("", true),
-          unref(isLoadingMore) ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
+          isLoadingMore.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
 });
-const LiveListH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4c5148ff"]]);
+const LiveListH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b716be94"]]);
 export {
   LiveListH5 as default
 };

package/dist/components/LiveMonitorView/LiveMonitorView.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, createElementVNode, Fragment, renderList, normalizeStyle, normalizeClass, toDisplayString, unref, createVNode, createBlock } from "vue";
-import { useUIKit, IconEndLive, IconMute, IconSpeakerPhone } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent, ref, computed, onMounted, onUnmounted, watch, withDirectives, createElementBlock, openBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, unref, createVNode, vShow } from "vue";
+import { useUIKit, IconEndLive } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveMonitorState } from "../../states/LiveMonitorState/index.js";
 import { exitFullScreen } from "../../utils/utils.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
@@ -12,69 +12,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     liveInfo: {}
   },
   setup(__props) {
-    const { monitorLiveInfoList, closeRoom, muteLiveAudio } = useLiveMonitorState();
+    const props = __props;
+    const { monitorLiveInfoList, closeRoom } = useLiveMonitorState();
     const { t } = useUIKit();
     const isFullscreen = ref(false);
-    const isMuted = ref(true);
+    const isCrossRoomConnection = ref(false);
     const styleList = ref({});
-    const props = __props;
     const liveContainerRef = ref();
-    const viewId = computed(() => {
-      return `live_monitor_view_${props.liveInfo.liveId}`;
-    });
+    const viewId = computed(() => `live_monitor_view_${props.liveInfo.liveId}`);
+    const currentLiveInfo = computed(
+      () => monitorLiveInfoList.value.find((liveInfo) => liveInfo.liveId === props.liveInfo.liveId)
+    );
     const regionList = computed(() => {
       var _a;
-      return (_a = monitorLiveInfoList.value.find((liveInfo) => liveInfo.liveId === props.liveInfo.liveId)) == null ? void 0 : _a.regionList;
+      return (_a = currentLiveInfo.value) == null ? void 0 : _a.regionList;
+    });
+    const isLandscape = computed(() => {
+      var _a;
+      return ((_a = currentLiveInfo.value) == null ? void 0 : _a.orientation) === "landscape";
+    });
+    const isSingleStream = computed(() => {
+      var _a;
+      return (((_a = regionList.value) == null ? void 0 : _a.length) ?? 0) === 1;
     });
-    const toggleMuteAudio = () => {
-      muteLiveAudio(props.liveInfo.liveId, !isMuted.value);
-      isMuted.value = !isMuted.value;
-    };
     const handleForceClose = () => {
       closeRoom(props.liveInfo.liveId);
       if (isFullscreen.value) {
         exitFullScreen();
       }
     };
-    const handleFullscreenChange = () => {
+    const onFullscreenChange = () => {
       if (document.fullscreenElement) {
         isFullscreen.value = true;
       } else {
         isFullscreen.value = false;
-        muteLiveAudio(props.liveInfo.liveId, true);
-        isMuted.value = true;
       }
     };
+    const updateStyleList = () => {
+      if (!liveContainerRef.value || !regionList.value) return;
+      const containerWidth = liveContainerRef.value.clientWidth;
+      const containerHeight = liveContainerRef.value.clientHeight;
+      const newStyleList = {};
+      regionList.value.forEach((region) => {
+        if (region.liveId !== props.liveInfo.liveId) {
+          isCrossRoomConnection.value = true;
+        }
+        newStyleList[region.userInfo.userId] = {
+          left: `${region.rect.x * containerWidth}px`,
+          top: `${region.rect.y * containerHeight}px`,
+          width: isSingleStream.value ? "100%" : `${region.rect.w * containerWidth}px`,
+          height: isSingleStream.value ? "100%" : `${region.rect.h * containerHeight}px`
+        };
+      });
+      styleList.value = newStyleList;
+    };
     onMounted(() => {
-      addEventListener("fullscreenchange", handleFullscreenChange);
+      addEventListener("fullscreenchange", onFullscreenChange);
     });
     onUnmounted(() => {
-      removeEventListener("fullscreenchange", handleFullscreenChange);
+      removeEventListener("fullscreenchange", onFullscreenChange);
     });
-    watch(
-      regionList,
-      () => {
-        var _a, _b;
-        if (!liveContainerRef.value) return;
-        const containerWidth = liveContainerRef.value.clientWidth;
-        const containerHeight = liveContainerRef.value.clientHeight;
-        const isSingleStream = ((_a = regionList.value) == null ? void 0 : _a.length) === 1;
-        (_b = regionList.value) == null ? void 0 : _b.forEach((region) => {
-          styleList.value[region.userInfo.userId] = {
-            left: `${region.rect.x * containerWidth}px`,
-            top: `${region.rect.y * containerHeight}px`,
-            width: `${isSingleStream ? "100%" : region.rect.w * containerWidth + "px"}`,
-            height: `${isSingleStream ? "100%" : region.rect.h * containerHeight + "px"}`
-          };
-        });
-      },
-      { immediate: true }
-    );
+    watch(regionList, updateStyleList, { immediate: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return withDirectives((openBlock(), createElementBlock("div", {
         ref_key: "liveContainerRef",
         ref: liveContainerRef,
-        class: "live-monitor-container"
+        class: normalizeClass(["live-monitor-container", { landscape: isLandscape.value }])
       }, [
         createElementVNode("div", {
           id: viewId.value,
@@ -82,32 +85,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_1),
         (openBlock(true), createElementBlock(Fragment, null, renderList(regionList.value, (region) => {
           return openBlock(), createElementBlock("div", {
+            key: region.userInfo.userId,
             class: normalizeClass(["live-tag-mask", { "hide-tag": !isFullscreen.value }]),
             style: normalizeStyle(styleList.value[region.userInfo.userId])
           }, [
             createElementVNode("div", _hoisted_2, toDisplayString(`${unref(t)("RoomId")}: ${region.liveId}`), 1),
             createElementVNode("div", _hoisted_3, toDisplayString(`${unref(t)("UserId")}: ${region.userInfo.userId}`), 1),
-            createElementVNode("div", {
-              class: "force-close live-tag",
+            withDirectives(createElementVNode("div", {
+              class: "destroy-button live-tag",
               onClick: handleForceClose
             }, [
               createVNode(unref(IconEndLive)),
               createElementVNode("span", null, toDisplayString(unref(t)("Force Close")), 1)
-            ]),
-            createElementVNode("div", {
-              class: normalizeClass(["toggle-audio-state", " live-tag", { "is-unmuted": !isMuted.value }]),
-              onClick: toggleMuteAudio
-            }, [
-              isMuted.value ? (openBlock(), createBlock(unref(IconMute), { key: 0 })) : (openBlock(), createBlock(unref(IconSpeakerPhone), { key: 1 })),
-              createElementVNode("span", null, toDisplayString(isMuted.value ? unref(t)("Unmute Audio") : unref(t)("Mute Audio")), 1)
-            ], 2)
+            ], 512), [
+              [vShow, isCrossRoomConnection.value]
+            ])
           ], 6);
-        }), 256))
-      ], 512);
+        }), 128)),
+        withDirectives(createElementVNode("div", {
+          class: "non-cross-room-destroy-button destroy-button live-tag",
+          onClick: handleForceClose
+        }, [
+          createVNode(unref(IconEndLive)),
+          createElementVNode("span", null, toDisplayString(unref(t)("Force Close")), 1)
+        ], 512), [
+          [vShow, !isCrossRoomConnection.value && isFullscreen.value]
+        ])
+      ], 2)), [
+        [vShow, props.liveInfo.orientation]
+      ]);
     };
   }
 });
-const LiveMonitorView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d34ebb11"]]);
+const LiveMonitorViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9abcdb76"]]);
 export {
-  LiveMonitorView as default
+  LiveMonitorViewComponent as default
 };

package/dist/components/LiveScenePanel/CameraSettingDialog.js

@@ -203,8 +203,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ])
         ]),
-        _: 1,
-        __: [2]
+        _: 1
       }, 8, ["confirmText", "confirmDisabled", "title"]);
     };
   }

package/dist/components/LiveScenePanel/MaterialRenameDialog.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../MaterialRenameDialog.vue_vue_type_script_setup_true_lang-Cmhf2QX4.js";
+import { _ as _sfc_main } from "../../MaterialRenameDialog.vue_vue_type_script_setup_true_lang-CVh4Regz.js";
 export {
   _sfc_main as default
 };

package/dist/components/LiveScenePanel/i18n/en-US/index.d.ts

@@ -32,4 +32,6 @@ export declare const resource: {
     'External Devices': string;
     Multimedia: string;
     'Screen Capture': string;
+    'Save as new name': string;
+    'Please check the current browser camera permission': string;
 };

package/dist/components/LiveScenePanel/i18n/en-US/index.js

@@ -38,7 +38,9 @@ const resource = {
   "Add Material": "Add Material",
   "External Devices": "External Devices",
   Multimedia: "Multimedia",
-  "Screen Capture": "Screen Capture"
+  "Screen Capture": "Screen Capture",
+  "Save as new name": "Save as new name",
+  "Please check the current browser camera permission": "Please check the current browser camera permission"
 };
 export {
   resource

package/dist/components/LiveScenePanel/i18n/zh-CN/index.d.ts

@@ -32,4 +32,6 @@ export declare const resource: {
     'External Devices': string;
     Multimedia: string;
     'Screen Capture': string;
+    'Save as new name': string;
+    'Please check the current browser camera permission': string;
 };

package/dist/components/LiveScenePanel/i18n/zh-CN/index.js

@@ -38,7 +38,9 @@ const resource = {
   "Add Material": "添加素材",
   "External Devices": "外接设备",
   Multimedia: "多媒体",
-  "Screen Capture": "画面捕捉"
+  "Screen Capture": "画面捕捉",
+  "Save as new name": "保存为新名称",
+  "Please check the current browser camera permission": "请检查当前浏览器摄像头权限"
 };
 export {
   resource

package/dist/components/LiveScenePanel/icons/AddIcon.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M8 5V11",
       stroke: "currentColor",
@@ -27,7 +27,7 @@ function _sfc_render(_ctx, _cache) {
       stroke: "currentColor",
       "stroke-width": "1.2"
     }, null, -1)
-  ]));
+  ])]);
 }
 const AddIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/LiveScenePanel/icons/CameraIcon.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M2.66667 6H5.33333V4.66667H2.66667V6Z",
       fill: "#D1D4DE"
@@ -20,7 +20,7 @@ function _sfc_render(_ctx, _cache) {
       d: "M12.6667 4.87037L16 3.66667V12.3333L12.6667 11.1296V14H0V2H12.6667V4.87037ZM14.6667 5.56575V10.4342L11.3333 9.23054V12.6667H1.33333V3.33333H11.3333V6.76946L14.6667 5.56575Z",
       fill: "#D1D4DE"
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/LiveScenePanel/icons/CameraMirror.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M7.5 1H8.5V15H7.5V1Z",
       fill: "black",
@@ -28,7 +28,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "#ffffff", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/LiveScenePanel/icons/CameraUnmirror.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M3.15332 3L14.4715 14.322",
       stroke: "#1A1A1A",
@@ -21,7 +21,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "#ffffff", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraUnMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {