tuikit-atomicx-vue3 3.3.1 → 3.3.2-beta.1

package/dist/components/LiveCoreView/index.js

@@ -1,11 +1,14 @@
 import { addI18n } from "../../i18n/index.js";
 import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
-import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, unref, normalizeStyle, renderSlot, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, toDisplayString, unref, normalizeStyle, renderSlot, Fragment, renderList, mergeProps, normalizeProps, Teleport } from "vue";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
 import { useLiveState } from "../../states/LiveState/index.js";
 import { useLoginState } from "../../states/LoginState.js";
 import { getContentSize } from "../../utils/domOperation.js";
+import PlayerControl from "./PlayerControl/PlayerControl.js";
+import { usePlayerControlState } from "./PlayerControl/PlayerControlState.js";
+import { isMobile } from "../../utils/env.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 import { resource } from "./i18n/en-US/index.js";
 import { resource as resource$1 } from "./i18n/zh-CN/index.js";
@@ -21,6 +24,7 @@ const _hoisted_3 = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
+    const { isFullscreen } = usePlayerControlState();
     const { t } = useUIKit();
     const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
     const { currentLive } = useLiveState();
@@ -35,6 +39,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return true;
     });
+    const isShowPlayerControl = computed(() => {
+      var _a;
+      return ((_a = currentLive.value) == null ? void 0 : _a.liveId) && !seatList.value.some((item) => {
+        var _a2, _b;
+        return ((_a2 = item.userInfo) == null ? void 0 : _a2.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+      });
+    });
     onMounted(async () => {
       isMounted.value = true;
       await startPlayStream({ view: "atomicx-live-stream-content" });
@@ -297,6 +308,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "liveCoreViewContainerRef",
         ref: liveCoreViewContainerRef,
+        id: "live-core-view-container",
         class: normalizeClass(["live-core-view-container", { "align-center": isAlignCenter.value }])
       }, [
         !_ctx.$slots.localVideo && !isPlayedVideo.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
@@ -326,12 +338,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), 128))
           ])) : createCommentVNode("", true),
           _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 1 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
-        ], 4)
+        ], 4),
+        !unref(isFullscreen) ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body",
+          disabled: !unref(isMobile)
+        }, [
+          isShowPlayerControl.value ? (openBlock(), createBlock(PlayerControl, { key: 0 })) : createCommentVNode("", true)
+        ], 8, ["disabled"])) : createCommentVNode("", true),
+        isShowPlayerControl.value && unref(isFullscreen) ? (openBlock(), createBlock(PlayerControl, { key: 2 })) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-466946d8"]]);
+const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84f2eab3"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {

package/dist/styles/index.css

@@ -865,12 +865,12 @@ span.unique-icon-btn:active {
   color: #666;
   font-size: 12px;
   border-top: 1px solid #f0f0f0;
-}.group-actions[data-v-21a17b84] {
+}.group-actions[data-v-a8fcc66e] {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-.group-actions__button[data-v-21a17b84] {
+.group-actions__button[data-v-a8fcc66e] {
   width: 100%;
 }.group-info__item[data-v-5b84a613] {
   padding: 10px 0;
@@ -1095,42 +1095,42 @@ span.unique-icon-btn:active {
 100% {
     opacity: 1;
 }
-}.group-management[data-v-91345f9d] {
+}.group-management[data-v-a5ebaab5] {
   padding: 0 20px;
 }
-.group-management__header[data-v-91345f9d] {
+.group-management__header[data-v-a5ebaab5] {
   padding: 16px 0;
   border-bottom: 1px solid var(--border-color-light);
 }
-.group-management__back-btn[data-v-91345f9d] {
+.group-management__back-btn[data-v-a5ebaab5] {
   width: 28px;
   height: 28px;
   padding: 6px;
   cursor: pointer;
   color: var(--text-color-primary);
 }
-.group-management__back-btn[data-v-91345f9d]:hover {
+.group-management__back-btn[data-v-a5ebaab5]:hover {
   color: var(--text-color-secondary);
 }
-.group-management__title[data-v-91345f9d] {
+.group-management__title[data-v-a5ebaab5] {
   font-size: 18px;
   font-weight: 600;
   color: var(--text-color-primary);
 }
-.group-management__mute-all[data-v-91345f9d] {
+.group-management__mute-all[data-v-a5ebaab5] {
   color: var(--text-color-primary);
 }
-.group-management__mute-all-header[data-v-91345f9d] {
+.group-management__mute-all-header[data-v-a5ebaab5] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 8px;
 }
-.group-management__mute-all-title[data-v-91345f9d] {
+.group-management__mute-all-title[data-v-a5ebaab5] {
   font-size: 16px;
   font-weight: 500;
 }
-.group-management__mute-all-desc[data-v-91345f9d] {
+.group-management__mute-all-desc[data-v-a5ebaab5] {
   font-size: 14px;
   color: var(--text-color-secondary);
 }.group-management-entry[data-v-55b0dd4c] {
@@ -1161,7 +1161,7 @@ span.unique-icon-btn:active {
   display: flex;
   flex-direction: column;
   gap: 0;
-}.group-chat-setting[data-v-358c1266] {
+}.group-chat-setting[data-v-7374cfa4] {
   gap: 16px;
   padding: 16px;
 }.user-picker-dialog {
@@ -5531,7 +5531,7 @@ to {
   *   @include multi-line-ellipsis(3);
   * }
   */
-.contact-group-info[data-v-ce333195] {
+.contact-group-info[data-v-8f45a224] {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -5540,21 +5540,21 @@ to {
   background-color: var(--bg-color-topbar);
   padding: 48px;
 }
-.contact-group-info__header[data-v-ce333195] {
+.contact-group-info__header[data-v-8f45a224] {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 32px;
 }
-.contact-group-info__main-info[data-v-ce333195] {
+.contact-group-info__main-info[data-v-8f45a224] {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 0;
 }
-.contact-group-info__name[data-v-ce333195] {
+.contact-group-info__name[data-v-8f45a224] {
   font-size: 24px;
   font-weight: 400;
   color: var(--text-color-primary);
@@ -5564,8 +5564,8 @@ to {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.contact-group-info__id[data-v-ce333195],
-.contact-group-info__intro[data-v-ce333195] {
+.contact-group-info__id[data-v-8f45a224],
+.contact-group-info__intro[data-v-8f45a224] {
   font-size: 16px;
   color: var(--text-color-tertiary);
   width: 100%;
@@ -5576,7 +5576,7 @@ to {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.contact-group-info__actions[data-v-ce333195] {
+.contact-group-info__actions[data-v-8f45a224] {
   border-top: 1px solid var(--stroke-color-secondary);
   padding-top: 32px;
   display: flex;
@@ -5972,21 +5972,21 @@ to {
 ._conversationCreateUserSelectList--h5_pa6me_7 {
   height: 100%;
   padding: 0 20px;
-}.conversationCreate__container[data-v-87d3c1d2] {
+}.conversationCreate__container[data-v-bdcdab3b] {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.conversationCreate__detail[data-v-87d3c1d2] {
+.conversationCreate__detail[data-v-bdcdab3b] {
   flex: 1;
 }
-[data-v-87d3c1d2] .conversationCreate__dialog {
+[data-v-bdcdab3b] .conversationCreate__dialog {
   width: 100%;
   height: 100%;
   max-width: 100%;
   border-radius: 0;
 }
-[data-v-87d3c1d2] .conversationCreate__dialog .dialog-body {
+[data-v-bdcdab3b] .conversationCreate__dialog .dialog-body {
   height: 0;
 }/**
   * Multi-line ellipsis
@@ -9877,17 +9877,289 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}.live-core-view-container[data-v-466946d8] {
+}.audio-control[data-v-81e72abd] {
+  --volume-control-primary: rgb(255, 255, 255);
+  --volume-control-primary-hover: rgba(255, 255, 255, 0.1);
+  --volume-control-background: rgba(0, 0, 0, 0.8);
+  --volume-control-background-light: rgba(0, 0, 0, 0.5);
+  --volume-control-border: rgba(255, 255, 255, 0.1);
+  --volume-control-shadow: rgba(0, 0, 0, 0.2);
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.volume-btn[data-v-81e72abd] {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.volume-slider-container[data-v-81e72abd] {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 12px;
+  z-index: 100;
+}
+.volume-slider-wrapper[data-v-81e72abd] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background: var(--volume-control-background);
+  padding: 12px 8px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--volume-control-border);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+@media (hover: none) and (pointer: coarse) {
+.volume-slider-wrapper[data-v-81e72abd] {
+    cursor: grab;
+}
+.volume-slider-wrapper[data-v-81e72abd]:active {
+    cursor: grabbing;
+}
+}
+.volume-slider-wrapper-inner[data-v-81e72abd] {
+  position: relative;
+  width: 20px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+}
+.custom-volume-slider[data-v-81e72abd] {
+  position: relative;
+  width: 4px;
+  height: 80px;
+  cursor: pointer;
+  z-index: 2;
+  margin: 0;
+}
+.slider-track[data-v-81e72abd] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+}
+.slider-progress[data-v-81e72abd] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #ffffff;
+  border-radius: 2px;
+}
+.slider-thumb[data-v-81e72abd] {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #ffffff;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: transform 0.1s ease;
+  z-index: 3;
+  cursor: grab;
+}
+.slider-thumb.no-transition[data-v-81e72abd] {
+  transition: none;
+}
+.slider-thumb[data-v-81e72abd]:active {
+  cursor: grabbing;
+  transform: translateX(-50%) scale(1.1);
+}
+.slider-thumb[data-v-81e72abd]:hover {
+  transform: translateX(-50%) scale(1.1);
+}
+.volume-value[data-v-81e72abd] {
+  color: var(--volume-control-primary);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  min-width: 32px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+@media (hover: none) and (pointer: coarse) {
+.volume-slider-wrapper[data-v-81e72abd] {
+    padding: 16px 12px;
+}
+.volume-slider-wrapper[data-v-81e72abd]:active {
+    background: var(--volume-control-background-light);
+    transform: scale(0.98);
+    transition: all 0.1s ease;
+}
+.volume-slider-wrapper-inner[data-v-81e72abd] {
+    height: 100px;
+}
+}.pc-mode[data-v-cb28a3fe] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}
+.mobile-mode[data-v-cb28a3fe] {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999999;
+  pointer-events: auto;
+}
+.playback-controls[data-v-cb28a3fe] {
+  background: #000000;
+  padding: 12px 0;
+  display: flex;
+  width: calc(100% + 1px);
+  align-items: center;
+  box-sizing: border-box;
+}
+.control-buttons[data-v-cb28a3fe] {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  pointer-events: all;
+}
+.center-controls[data-v-cb28a3fe] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.control-btn[data-v-cb28a3fe] {
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: white;
+}
+.control-btn[data-v-cb28a3fe]:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.control-btn[data-v-cb28a3fe]:active {
+  transform: scale(0.95);
+}
+.control-btn .btn-icon[data-v-cb28a3fe] {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+.play-pause-btn .tui-icon[data-v-cb28a3fe] {
+  transform: scale(1.5);
+}
+.audio-control-btn[data-v-cb28a3fe]:active {
+  transform: unset;
+}
+.playback-time[data-v-cb28a3fe] {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 16px;
+}
+.right-controls[data-v-cb28a3fe] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.fullscreen-btn .btn-icon[data-v-cb28a3fe] {
+  width: 18px;
+  height: 18px;
+}
+.more-btn .btn-icon[data-v-cb28a3fe] {
+  width: 18px;
+  height: 18px;
+}
+.player-control-enter-active[data-v-cb28a3fe],
+.player-control-leave-active[data-v-cb28a3fe] {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+}
+.player-control-enter-from[data-v-cb28a3fe] {
+  opacity: 0;
+  transform: translateY(100%);
+}
+.player-control-enter-to[data-v-cb28a3fe] {
+  opacity: 1;
+  transform: translateY(0);
+}
+.player-control-leave-from[data-v-cb28a3fe] {
+  opacity: 1;
+  transform: translateY(0);
+}
+.player-control-leave-to[data-v-cb28a3fe] {
+  opacity: 0;
+  transform: translateY(100%);
+}.fullscreen-mode {
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  background-color: #000 !important;
+}
+.fullscreen-mode-portrait {
+  z-index: 9999 !important;
+  background-color: #000 !important;
+}
+.landscape-mode {
+  transform: rotate(90deg) !important;
+  transform-origin: center center !important;
+  width: 100vh !important;
+  height: 100vw !important;
+  overflow: hidden !important;
+  transition: transform 0.3s ease-in-out !important;
+}
+@media screen and (orientation: landscape) {
+.landscape-mode {
+    transform: none !important;
+    width: 100vw !important;
+    height: 100vh !important;
+}
+}
+@media screen and (orientation: landscape) and (max-width: 768px) {
+.live-core-view.landscape-mode {
+    background-color: #000;
+    transform: none !important;
+}
+}
+@media screen and (orientation: portrait) and (max-width: 768px) {
+.live-core-view.landscape-mode {
+    transform: rotate(90deg) !important;
+    transform-origin: center center !important;
+}
+}.live-core-view-container[data-v-84f2eab3] {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   overflow: hidden;
 }
-.live-core-view-container.align-center[data-v-466946d8] {
+.live-core-view-container.align-center[data-v-84f2eab3] {
   align-items: center;
 }
-.live-core-view-container .live-core-placeholder[data-v-466946d8] {
+.live-core-view-container .live-core-placeholder[data-v-84f2eab3] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9897,26 +10169,26 @@ to {
   align-items: center;
   justify-content: center;
 }
-.live-core-view-container .live-core-placeholder .placeholder-text[data-v-466946d8] {
+.live-core-view-container .live-core-placeholder .placeholder-text[data-v-84f2eab3] {
   color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px;
 }
-.live-core-view-container .live-core-view[data-v-466946d8] {
+.live-core-view-container .live-core-view[data-v-84f2eab3] {
   width: 100%;
   height: 100%;
   position: absolute;
 }
-.live-core-view-container .live-core-view .stream-content[data-v-466946d8] {
+.live-core-view-container .live-core-view .stream-content[data-v-84f2eab3] {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
 }
-.live-core-view-container .live-core-view .live-core-ui[data-v-466946d8] {
+.live-core-view-container .live-core-view .live-core-ui[data-v-84f2eab3] {
   width: 100%;
   height: 100%;
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.3.1",
+  "version": "3.3.2-beta.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -51,7 +51,7 @@
     "@tencentcloud/chat": "^3.5.4",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.3.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.3.2-beta.1",
     "@tencentcloud/uikit-base-component-vue3": "1.0.1",
     "vue": "^3.4.21"
   },

package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue

@@ -39,7 +39,6 @@
 
     <!-- Transfer Group Owner Dialog -->
     <TUIDialog
-      appendTo="body"
       :visible="isShowTransferDialog"
       :title="t('ChatSetting.transfer_group_owner')"
       :custom-classes="['user-picker-dialog']"
@@ -63,7 +62,6 @@
 
     <!-- Dismiss Group Dialog -->
     <TUIDialog
-      appendTo="body"
       :visible="isShowDismissDialog"
       :title="t('ChatSetting.dismiss_group')"
       @close="() => isShowDismissDialog = false"
@@ -73,7 +71,6 @@
 
     <!-- Quit Group Dialog -->
     <TUIDialog
-      appendTo="body"
       :visible="isShowQuitDialog"
       :title="t('ChatSetting.quit_group')"
       @close="() => isShowQuitDialog = false"

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -260,7 +260,6 @@ const userPickerDialogTitle = computed(() => {
       <PersonalSettings />
       <GroupActions />
       <TUIDialog
-        appendTo="body"
         :visible="isShowUserPickerDialog"
         :title="userPickerDialogTitle"
         :custom-classes="['user-picker-dialog']"

package/src/components/ChatSetting/GroupChatSetting/GroupManagement/GroupManagement.vue

@@ -63,7 +63,6 @@
 
     <!-- User Picker Dialog -->
     <TUIDialog
-      appendTo="body"
       :custom-classes="['user-picker-dialog']"
       :visible="isShowUserPickerDialog"
       :title="userPickerTitle"

package/src/components/ContactList/ContactInfo/GroupInfo/GroupInfo.vue

@@ -54,7 +54,6 @@
         {{ t('TUIContact.Enter group chat') }}
       </TUIButton>
       <TUIDialog
-        appendTo="body"
         :visible="visible"
         :title="canDismissGroup ? t('TUIContact.Confirm dismiss group'): t('TUIContact.Confirm quit group')"
         :confirm-text="t('TUIContact.Submit')"

package/src/components/ConversationList/ConversationCreate/ConversationCreate.vue

@@ -5,7 +5,6 @@
     <ConversationCreateButton @click="openCreateConversation" />
 
     <TUIDialog
-      appendTo="body"
       :visible="showCreateConversation"
       :title="dialogTitles"
       :confirm-text="dialogConfirmText"

package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue

@@ -37,7 +37,6 @@
       </div>
 
       <TUIDialog
-        appendTo="body"
         :customClasses="[$style.conversationSearch__advanced]"
         :visible="isShowStandard"
         :show-close="false"