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

package/dist/components/CoGuestPanel/CoGuestPanel.js

@@ -135,8 +135,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           default: withCtx(() => [
                             createTextVNode(toDisplayString(unref(t)("Accept")), 1)
                           ]),
-                          _: 2
-                        }, 1032, ["onClick"]),
+                          _: 1
+                        }, 8, ["onClick"]),
                         createVNode(unref(TUIButton), {
                           color: "red",
                           onClick: ($event) => handleRejectCoGuestRequest(user.userId)
@@ -144,8 +144,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           default: withCtx(() => [
                             createTextVNode(toDisplayString(unref(t)("Reject")), 1)
                           ]),
-                          _: 2
-                        }, 1032, ["onClick"])
+                          _: 1
+                        }, 8, ["onClick"])
                       ])
                     ])
                   ]);
@@ -187,8 +187,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           default: withCtx(() => [
                             createTextVNode(toDisplayString(unref(t)("Disconnect")), 1)
                           ]),
-                          _: 2
-                        }, 1032, ["onClick"])
+                          _: 1
+                        }, 8, ["onClick"])
                       ])) : createCommentVNode("", true)
                     ])
                   ]);

package/dist/components/LiveCoreView/PlayerControl/AudioControl.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, withDirectives, unref, createBlock, normalizeClass, toDisplayString, vShow } from "vue";
+import { defineComponent, ref, computed, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, withDirectives, unref, createBlock, normalizeClass, toDisplayString, vShow, toRaw } from "vue";
 import { useUIKit, IconSpeakerOff, IconSpeakerOn } from "@tencentcloud/uikit-base-component-vue3";
 import { isMobile } from "../../../utils/env.js";
 import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
@@ -44,8 +44,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       height: `${props.iconSize || 20}px`
     }));
     const updateVolume = (newVolume) => {
+      volumeState.value.previous = toRaw(volumeState.value.current);
       volumeState.value.current = newVolume;
-      volumeState.value.previous = newVolume;
       isMuted.value = newVolume === 0;
       emit("volume-change", newVolume);
     };
@@ -54,13 +54,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         isMuted.value = false;
         volumeState.value.current = volumeState.value.previous || 0.2;
         emit("muted-change", false);
+        emit("volume-change", volumeState.value.current);
       } else {
         isMuted.value = true;
         volumeState.value.previous = volumeState.value.current;
         volumeState.value.current = 0;
         emit("muted-change", true);
+        emit("volume-change", volumeState.value.current);
       }
-      updateVolume(volumeState.value.current);
     };
     const handleVolumeIconClick = () => {
       if (props.enableVolumeControl === false) {
@@ -245,7 +246,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AudioControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-81e72abd"]]);
+const AudioControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22bb0b88"]]);
 export {
   AudioControl as default
 };

package/dist/components/LiveCoreView/PlayerControl/PlayerControl.js

@@ -14,6 +14,9 @@ const _hoisted_6 = ["title"];
 const AUTO_HIDE_DELAY = 3e3;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PlayerControl",
+  props: {
+    isLandscapeStyleMode: { type: Boolean }
+  },
   setup(__props) {
     const {
       isPlaying,
@@ -28,6 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setVolume,
       cleanup
     } = usePlayerControlState();
+    const props = __props;
     const { t } = useUIKit();
     const currentVolume = ref(1);
     const isMuted = ref(false);
@@ -213,7 +217,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           withDirectives(createElementVNode("div", {
             ref_key: "playerControlRef",
             ref: playerControlRef,
-            class: normalizeClass(["playback-controls", unref(isMobile) ? "mobile-mode" : "pc-mode"])
+            class: normalizeClass([
+              "playback-controls",
+              unref(isMobile) ? "mobile-mode" : "pc-mode",
+              { "mobile-landscape-mode": props.isLandscapeStyleMode }
+            ])
           }, [
             createElementVNode("div", _hoisted_1, [
               createElementVNode("span", {
@@ -265,7 +273,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PlayerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cb28a3fe"]]);
+const PlayerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28ed6eb9"]]);
 export {
   PlayerControl as default
 };

package/dist/components/LiveCoreView/PlayerControl/PlayerControl.vue.d.ts

@@ -1,2 +1,15 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isLandscapeStyleMode?: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isLandscapeStyleMode?: boolean;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/LiveCoreView/PlayerControl/PlayerControlState.d.ts

@@ -1,4 +1,5 @@
 import { Ref } from 'vue';
+import { FullscreenResult } from './utils/fullscreenManager';
 
 export declare enum FillMode {
     CONTAIN = "contain",
@@ -9,12 +10,13 @@ export interface PlayerControlState {
     isPlaying: Ref<boolean>;
     currentFillMode: Ref<FillMode>;
     isFullscreen: Ref<boolean>;
+    isLandscapeStyleMode: Ref<boolean>;
     isPictureInPicture: Ref<boolean>;
     currentVolume: Ref<number>;
     resume: () => Promise<boolean>;
     pause: () => Promise<boolean>;
-    requestFullscreen: () => Promise<boolean>;
-    exitFullscreen: () => Promise<boolean>;
+    requestFullscreen: () => Promise<FullscreenResult>;
+    exitFullscreen: () => Promise<FullscreenResult>;
     requestPictureInPicture: () => Promise<boolean>;
     exitPictureInPicture: () => Promise<boolean>;
     setVolume: (volume: number) => Promise<boolean>;

package/dist/components/LiveCoreView/PlayerControl/PlayerControlState.js

@@ -4,7 +4,7 @@ import { useLiveState } from "../../../states/LiveState/index.js";
 import { useLiveSeatState } from "../../../states/LiveSeatState/index.js";
 import { TRTCCloud } from "@tencentcloud/tuiroom-engine-js";
 import { getDeviceType, getCurrentOrientation, shouldRotateToLandscapeForFullscreen, hadLandscapeRotationToUndo } from "./utils/deviceDetection.js";
-import { OrientationManager, StyleManager, FullscreenManager, FullscreenMode } from "./utils/fullscreenManager.js";
+import { OrientationManager, StyleManager, FullscreenMode, FullscreenManager } from "./utils/fullscreenManager.js";
 import { EventListenerManager, DOMElementGetter } from "./utils/domHelpers.js";
 import { LiveStatus } from "../../../types/live.js";
 var FillMode = /* @__PURE__ */ ((FillMode2) => {
@@ -19,12 +19,13 @@ const currentFillMode = ref(
   /* CONTAIN */
 );
 const isFullscreen = ref(false);
+const isLandscapeStyleMode = ref(false);
 const isPictureInPicture = ref(false);
 const currentVolume = ref(1);
+const roomEngine = useRoomEngine();
 function usePlayerControlState() {
   const { localLiveStatus } = useLiveState();
   const { canvas } = useLiveSeatState();
-  const roomEngine = useRoomEngine();
   const eventManager = new EventListenerManager();
   const orientationListenerId = `player-control-${Date.now()}`;
   const isLandscapeStream = computed(
@@ -151,8 +152,9 @@ function usePlayerControlState() {
       } else {
         console.error("Fullscreen request failed:", result.error);
       }
-      return result.success;
-    }, "Request fullscreen", false);
+      isLandscapeStyleMode.value = result.shouldRotateToLandscape;
+      return result;
+    }, "Request fullscreen", { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
   };
   const exitFullscreen = async () => {
     return withErrorHandling(async () => {
@@ -182,8 +184,9 @@ function usePlayerControlState() {
       } else {
         console.error("Fullscreen exit failed:", result.error);
       }
-      return result.success;
-    }, "Exit fullscreen", false);
+      isLandscapeStyleMode.value = false;
+      return result;
+    }, "Exit fullscreen", { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
   };
   const requestPictureInPicture = async () => {
     return withErrorHandling(async () => {
@@ -260,6 +263,7 @@ function usePlayerControlState() {
           console.warn("Failed to unlock orientation during cleanup:", error);
         });
       }
+      isLandscapeStyleMode.value = false;
       console.log("Fullscreen exit style cleanup completed");
     } catch (error) {
       console.error("Fullscreen exit style cleanup failed:", error);
@@ -308,7 +312,7 @@ function usePlayerControlState() {
     const handleLeavePictureInPicture = () => {
       console.log("Left picture-in-picture mode");
       isPictureInPicture.value = false;
-      resume();
+      setTimeout(resume, 300);
     };
     const handlePlay = () => {
       console.log("Video play event detected");
@@ -386,6 +390,7 @@ function usePlayerControlState() {
     isPlaying,
     currentFillMode,
     isFullscreen,
+    isLandscapeStyleMode,
     isPictureInPicture,
     currentVolume,
     // Methods

package/dist/components/LiveCoreView/index.js

@@ -24,7 +24,7 @@ const _hoisted_3 = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
-    const { isFullscreen } = usePlayerControlState();
+    const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
     const { t } = useUIKit();
     const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
     const { currentLive } = useLiveState();
@@ -239,7 +239,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         fillMode.value = "fit";
       }
       handleStreamRegionSize();
-    });
+    }, { deep: true });
     function handleStreamRegionSize() {
       if (!liveCoreViewContainerRef.value) {
         return;
@@ -344,14 +344,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           to: "body",
           disabled: !unref(isMobile)
         }, [
-          isShowPlayerControl.value ? (openBlock(), createBlock(PlayerControl, { key: 0 })) : createCommentVNode("", true)
+          isShowPlayerControl.value ? (openBlock(), createBlock(PlayerControl, {
+            key: 0,
+            isLandscapeStyleMode: unref(isLandscapeStyleMode)
+          }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
         ], 8, ["disabled"])) : createCommentVNode("", true),
-        isShowPlayerControl.value && unref(isFullscreen) ? (openBlock(), createBlock(PlayerControl, { key: 2 })) : createCommentVNode("", true)
+        isShowPlayerControl.value && unref(isFullscreen) ? (openBlock(), createBlock(PlayerControl, {
+          key: 2,
+          isLandscapeStyleMode: unref(isLandscapeStyleMode)
+        }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84f2eab3"]]);
+const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4d9101b9"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {

package/dist/components/StreamView/Layout/CustomLayout.js

@@ -232,8 +232,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               streamViewUI: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
               ]),
-              _: 2
-            }, 1032, ["userInfo", "stream-type", "style"]);
+              _: 3
+            }, 8, ["userInfo", "stream-type", "style"]);
           }), 128))
         ], 4)
       ], 512);

package/dist/components/StreamView/Layout/GridLayout.js

@@ -221,8 +221,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               streamViewUI: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
               ]),
-              _: 2
-            }, 1032, ["userInfo", "stream-type", "style"]);
+              _: 3
+            }, 8, ["userInfo", "stream-type", "style"]);
           }), 128))
         ], 36)
       ], 2);

package/dist/components/StreamView/common/StreamList/index.js

@@ -195,8 +195,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               streamViewUI: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
               ]),
-              _: 2
-            }, 1032, ["user-info", "stream-type", "streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
+              _: 3
+            }, 8, ["user-info", "stream-type", "streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
           }), 128))
         ], 36)
       ], 2);

package/dist/styles/index.css

@@ -9877,7 +9877,7 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}.audio-control[data-v-81e72abd] {
+}.audio-control[data-v-22bb0b88] {
   --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);
@@ -9888,14 +9888,14 @@ to {
   display: flex;
   align-items: center;
 }
-.volume-btn[data-v-81e72abd] {
+.volume-btn[data-v-22bb0b88] {
   width: 100%;
   height: 100%;
   flex-shrink: 0;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
-.volume-slider-container[data-v-81e72abd] {
+.volume-slider-container[data-v-22bb0b88] {
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -9903,7 +9903,7 @@ to {
   margin-bottom: 12px;
   z-index: 100;
 }
-.volume-slider-wrapper[data-v-81e72abd] {
+.volume-slider-wrapper[data-v-22bb0b88] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9921,14 +9921,14 @@ to {
   -ms-user-select: none;
 }
 @media (hover: none) and (pointer: coarse) {
-.volume-slider-wrapper[data-v-81e72abd] {
+.volume-slider-wrapper[data-v-22bb0b88] {
     cursor: grab;
 }
-.volume-slider-wrapper[data-v-81e72abd]:active {
+.volume-slider-wrapper[data-v-22bb0b88]:active {
     cursor: grabbing;
 }
 }
-.volume-slider-wrapper-inner[data-v-81e72abd] {
+.volume-slider-wrapper-inner[data-v-22bb0b88] {
   position: relative;
   width: 20px;
   height: 80px;
@@ -9937,7 +9937,7 @@ to {
   justify-content: center;
   margin-top: 12px;
 }
-.custom-volume-slider[data-v-81e72abd] {
+.custom-volume-slider[data-v-22bb0b88] {
   position: relative;
   width: 4px;
   height: 80px;
@@ -9945,7 +9945,7 @@ to {
   z-index: 2;
   margin: 0;
 }
-.slider-track[data-v-81e72abd] {
+.slider-track[data-v-22bb0b88] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9955,7 +9955,7 @@ to {
   background: rgba(255, 255, 255, 0.2);
   border: none;
 }
-.slider-progress[data-v-81e72abd] {
+.slider-progress[data-v-22bb0b88] {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -9963,7 +9963,7 @@ to {
   background: #ffffff;
   border-radius: 2px;
 }
-.slider-thumb[data-v-81e72abd] {
+.slider-thumb[data-v-22bb0b88] {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -9977,17 +9977,17 @@ to {
   z-index: 3;
   cursor: grab;
 }
-.slider-thumb.no-transition[data-v-81e72abd] {
+.slider-thumb.no-transition[data-v-22bb0b88] {
   transition: none;
 }
-.slider-thumb[data-v-81e72abd]:active {
+.slider-thumb[data-v-22bb0b88]:active {
   cursor: grabbing;
   transform: translateX(-50%) scale(1.1);
 }
-.slider-thumb[data-v-81e72abd]:hover {
+.slider-thumb[data-v-22bb0b88]:hover {
   transform: translateX(-50%) scale(1.1);
 }
-.volume-value[data-v-81e72abd] {
+.volume-value[data-v-22bb0b88] {
   color: var(--volume-control-primary);
   font-size: 12px;
   font-weight: 500;
@@ -9998,53 +9998,85 @@ to {
   pointer-events: none;
 }
 @media (hover: none) and (pointer: coarse) {
-.volume-slider-wrapper[data-v-81e72abd] {
+.volume-slider-wrapper[data-v-22bb0b88] {
     padding: 16px 12px;
 }
-.volume-slider-wrapper[data-v-81e72abd]:active {
+.volume-slider-wrapper[data-v-22bb0b88]:active {
     background: var(--volume-control-background-light);
     transform: scale(0.98);
     transition: all 0.1s ease;
 }
-.volume-slider-wrapper-inner[data-v-81e72abd] {
+.volume-slider-wrapper-inner[data-v-22bb0b88] {
     height: 100px;
 }
-}.pc-mode[data-v-cb28a3fe] {
+}.playback-controls[data-v-28ed6eb9] {
+  background: #000000;
+  padding: 12px 0;
+  display: flex;
+  width: calc(100% + 1px);
+  align-items: center;
+  box-sizing: border-box;
+}
+.pc-mode[data-v-28ed6eb9] {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 10;
 }
-.mobile-mode[data-v-cb28a3fe] {
-  position: fixed !important;
+.mobile-mode[data-v-28ed6eb9] {
+  position: fixed;
   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;
+@media screen and (orientation: portrait) {
+.mobile-landscape-mode[data-v-28ed6eb9] {
+    position: fixed;
+    bottom: unset;
+    transform: rotate(90deg);
+    transform-origin: left bottom;
+    top: -60px;
+    bottom: unset;
+    width: 100vh;
+    padding-right: 16px;
+}
+.mobile-landscape-mode.player-control-enter-active[data-v-28ed6eb9], .mobile-landscape-mode.player-control-leave-active[data-v-28ed6eb9] {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform, opacity;
+}
+.mobile-landscape-mode.player-control-enter-from[data-v-28ed6eb9] {
+    opacity: 0;
+    transform: rotate(90deg) translateY(60px);
+}
+.mobile-landscape-mode.player-control-enter-to[data-v-28ed6eb9] {
+    opacity: 1;
+    transform: rotate(90deg) translateY(0);
+}
+.mobile-landscape-mode.player-control-leave-from[data-v-28ed6eb9] {
+    opacity: 1;
+    transform: rotate(90deg) translateY(0);
+}
+.mobile-landscape-mode.player-control-leave-to[data-v-28ed6eb9] {
+    opacity: 0;
+    transform: rotate(90deg) translateY(60px);
 }
-.control-buttons[data-v-cb28a3fe] {
+}
+.control-buttons[data-v-28ed6eb9] {
   display: flex;
   align-items: center;
   justify-content: space-around;
   width: 100%;
   pointer-events: all;
 }
-.center-controls[data-v-cb28a3fe] {
+.center-controls[data-v-28ed6eb9] {
   display: flex;
   align-items: center;
   gap: 16px;
 }
-.control-btn[data-v-cb28a3fe] {
+.control-btn[data-v-28ed6eb9] {
   background: transparent;
   border: none;
   border-radius: 50%;
@@ -10054,63 +10086,62 @@ to {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
   color: white;
 }
-.control-btn[data-v-cb28a3fe]:hover {
+.control-btn[data-v-28ed6eb9]:hover {
   background: rgba(255, 255, 255, 0.1);
 }
-.control-btn[data-v-cb28a3fe]:active {
+.control-btn[data-v-28ed6eb9]:active {
   transform: scale(0.95);
 }
-.control-btn .btn-icon[data-v-cb28a3fe] {
+.control-btn .btn-icon[data-v-28ed6eb9] {
   width: 20px;
   height: 20px;
   fill: currentColor;
 }
-.play-pause-btn .tui-icon[data-v-cb28a3fe] {
+.play-pause-btn .tui-icon[data-v-28ed6eb9] {
   transform: scale(1.5);
 }
-.audio-control-btn[data-v-cb28a3fe]:active {
+.audio-control-btn[data-v-28ed6eb9]:active {
   transform: unset;
 }
-.playback-time[data-v-cb28a3fe] {
+.playback-time[data-v-28ed6eb9] {
   color: white;
   font-size: 14px;
   font-weight: 500;
   margin-left: 16px;
 }
-.right-controls[data-v-cb28a3fe] {
+.right-controls[data-v-28ed6eb9] {
   display: flex;
   align-items: center;
   gap: 16px;
 }
-.fullscreen-btn .btn-icon[data-v-cb28a3fe] {
+.fullscreen-btn .btn-icon[data-v-28ed6eb9] {
   width: 18px;
   height: 18px;
 }
-.more-btn .btn-icon[data-v-cb28a3fe] {
+.more-btn .btn-icon[data-v-28ed6eb9] {
   width: 18px;
   height: 18px;
 }
-.player-control-enter-active[data-v-cb28a3fe],
-.player-control-leave-active[data-v-cb28a3fe] {
+.player-control-enter-active[data-v-28ed6eb9],
+.player-control-leave-active[data-v-28ed6eb9] {
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, opacity;
 }
-.player-control-enter-from[data-v-cb28a3fe] {
+.player-control-enter-from[data-v-28ed6eb9] {
   opacity: 0;
   transform: translateY(100%);
 }
-.player-control-enter-to[data-v-cb28a3fe] {
+.player-control-enter-to[data-v-28ed6eb9] {
   opacity: 1;
   transform: translateY(0);
 }
-.player-control-leave-from[data-v-cb28a3fe] {
+.player-control-leave-from[data-v-28ed6eb9] {
   opacity: 1;
   transform: translateY(0);
 }
-.player-control-leave-to[data-v-cb28a3fe] {
+.player-control-leave-to[data-v-28ed6eb9] {
   opacity: 0;
   transform: translateY(100%);
 }.fullscreen-mode {
@@ -10149,17 +10180,17 @@ to {
     transform: rotate(90deg) !important;
     transform-origin: center center !important;
 }
-}.live-core-view-container[data-v-84f2eab3] {
+}.live-core-view-container[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   overflow: hidden;
 }
-.live-core-view-container.align-center[data-v-84f2eab3] {
+.live-core-view-container.align-center[data-v-4d9101b9] {
   align-items: center;
 }
-.live-core-view-container .live-core-placeholder[data-v-84f2eab3] {
+.live-core-view-container .live-core-placeholder[data-v-4d9101b9] {
   position: absolute;
   top: 0;
   left: 0;
@@ -10169,26 +10200,26 @@ to {
   align-items: center;
   justify-content: center;
 }
-.live-core-view-container .live-core-placeholder .placeholder-text[data-v-84f2eab3] {
+.live-core-view-container .live-core-placeholder .placeholder-text[data-v-4d9101b9] {
   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-84f2eab3] {
+.live-core-view-container .live-core-view[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   position: absolute;
 }
-.live-core-view-container .live-core-view .stream-content[data-v-84f2eab3] {
+.live-core-view-container .live-core-view .stream-content[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
 }
-.live-core-view-container .live-core-view .live-core-ui[data-v-84f2eab3] {
+.live-core-view-container .live-core-view .live-core-ui[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -10436,7 +10467,6 @@ to {
   width: 100%;
   overflow: auto;
   align-items: center;
-  scrollbar-width: none;
 }
 .live-list[data-v-96626ee9]::-webkit-scrollbar {
   width: 0px;
@@ -10454,6 +10484,9 @@ to {
 .live-list[data-v-96626ee9]::-webkit-scrollbar-thumb:hover {
   background: var(--uikit-color-gray-3);
 }
+.live-list[data-v-96626ee9] {
+  scrollbar-width: none;
+}
 .live-list-items[data-v-96626ee9] {
   flex: 1;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.3.2-beta.1",
+  "version": "3.3.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -48,10 +48,10 @@
     "publish:github": "node scripts/publish-github.js"
   },
   "peerDependencies": {
-    "@tencentcloud/chat": "^3.5.4",
+    "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.3.2-beta.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.3.2",
     "@tencentcloud/uikit-base-component-vue3": "1.0.1",
     "vue": "^3.4.21"
   },

package/src/components/LiveCoreView/PlayerControl/AudioControl.vue

@@ -5,13 +5,13 @@
       <IconSpeakerOn size="20" v-else />
     </span>
     <div v-show="isVolumeSliderVisible" class="volume-slider-container">
-      <div 
+      <div
         class="volume-slider-wrapper"
         @mouseenter="handleVolumeSliderMouseEnter"
         @mouseleave="handleVolumeSliderMouseLeave"
       >
         <div class="volume-slider-wrapper-inner">
-          <div 
+          <div
             ref="volumeSliderElement"
             class="custom-volume-slider"
             @mousedown="handleSliderMouseDown"
@@ -19,11 +19,8 @@
             @click="handleVolumeSliderAreaClick"
           >
             <div class="slider-track">
-              <div 
-                class="slider-progress" 
-                :style="{ height: `${volumePercentage}%` }"
-              ></div>
-              <div 
+              <div class="slider-progress" :style="{ height: `${volumePercentage}%` }"></div>
+              <div
                 class="slider-thumb"
                 :class="{ 'no-transition': isDragging }"
                 :style="{ bottom: `${volumePercentage}%` }"
@@ -38,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onUnmounted } from 'vue';
+import { computed, ref, onUnmounted, toRaw } from 'vue';
 import { IconSpeakerOn, IconSpeakerOff, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { isMobile } from '../../../utils';
 
@@ -64,7 +61,7 @@ const { t } = useUIKit();
 // Volume state - merged into single object
 const volumeState = ref({
   current: 1,
-  previous: 1
+  previous: 1,
 });
 
 const isMuted = ref(false);
@@ -75,8 +72,8 @@ const volumeSliderAutoHideTimer = ref<number | null>(null);
 
 // Auto-hide delay for different platforms
 const AUTO_HIDE_DELAY = {
-  PC: 500,     // 0.5 seconds for PC
-  MOBILE: 3000 // 3 seconds for mobile
+  PC: 500, // 0.5 seconds for PC
+  MOBILE: 3000, // 3 seconds for mobile
 };
 
 // Simplified computed property - directly use isVolumeSliderVisible
@@ -93,26 +90,25 @@ const iconSizeStyle = computed(() => ({
 }));
 
 const updateVolume = (newVolume: number) => {
+  volumeState.value.previous = toRaw(volumeState.value.current);
   volumeState.value.current = newVolume;
-  volumeState.value.previous = newVolume;
   isMuted.value = newVolume === 0;
   emit('volume-change', newVolume);
 };
 
 const toggleMute = () => {
   if (isMuted.value) {
-    // Unmute
     isMuted.value = false;
     volumeState.value.current = volumeState.value.previous || 0.2;
     emit('muted-change', false);
+    emit('volume-change', volumeState.value.current);
   } else {
-    // Mute
     isMuted.value = true;
     volumeState.value.previous = volumeState.value.current;
     volumeState.value.current = 0;
     emit('muted-change', true);
+    emit('volume-change', volumeState.value.current);
   }
-  updateVolume(volumeState.value.current);
 };
 
 const handleVolumeIconClick = () => {
@@ -124,7 +120,7 @@ const handleVolumeIconClick = () => {
     if (isMobile) {
       // On mobile: toggle volume slider visibility
       isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
-      
+
       // Start auto-hide timer when showing volume slider
       if (isVolumeSliderVisible.value) {
         startVolumeSliderAutoHideTimer();
@@ -157,10 +153,10 @@ const stopVolumeSliderAutoHideTimer = () => {
 
 const handleMouseEnter = () => {
   if (props.enableVolumeControl === false) return;
-  
+
   // Only handle mouse events on PC
   if (isMobile) return;
-  
+
   // On PC, show volume slider and start auto-hide timer
   isVolumeSliderVisible.value = true;
   startVolumeSliderAutoHideTimer();
@@ -168,10 +164,8 @@ const handleMouseEnter = () => {
 
 const handleMouseLeave = () => {
   if (props.enableVolumeControl === false) return;
-  
   // Only handle mouse events on PC
   if (isMobile) return;
-  
   // On PC, start auto-hide timer when mouse leaves icon area
   // But don't start if currently dragging
   if (!isDragging.value) {
@@ -183,7 +177,7 @@ const calculateVolumeFromPosition = (clientY: number, target: HTMLElement): numb
   const rect = target.getBoundingClientRect();
   const clickY = clientY - rect.top;
   const height = rect.height;
-  return Math.max(0, Math.min(1, 1 - (clickY / height)));
+  return Math.max(0, Math.min(1, 1 - clickY / height));
 };
 
 const addGlobalEventListeners = () => {
@@ -202,63 +196,53 @@ const removeGlobalEventListeners = () => {
 
 const startDragging = () => {
   isDragging.value = true;
-  
   // Stop auto-hide timer when dragging starts
   if (props.enableVolumeControl) {
     stopVolumeSliderAutoHideTimer();
   }
-  
   addGlobalEventListeners();
 };
 
 const handleSliderMove = (event: MouseEvent | TouchEvent) => {
   if (!isDragging.value) return;
-  
   event.preventDefault();
-  
   let clientY: number;
   if (event instanceof MouseEvent) {
     clientY = event.clientY;
   } else {
     clientY = event.touches[0].clientY;
   }
-  
   const volumeValue = calculateVolumeFromPosition(clientY, volumeSliderElement.value as HTMLElement);
   updateVolume(volumeValue);
 };
 
 const handleSliderEnd = () => {
   isDragging.value = false;
-  
   // Restart auto-hide timer when dragging ends
   if (props.enableVolumeControl && isVolumeSliderVisible.value) {
     startVolumeSliderAutoHideTimer();
   }
-  
   removeGlobalEventListeners();
 };
 
 const handleSliderMouseDown = (event: MouseEvent) => {
   if (props.enableVolumeControl === false) return;
-  
   startDragging();
   event.preventDefault();
 };
 
 const handleSliderTouchStart = (event: TouchEvent) => {
   if (props.enableVolumeControl === false) return;
-  
   startDragging();
   event.preventDefault();
 };
 
 const handleVolumeSliderAreaClick = () => {
   if (props.enableVolumeControl === false) return;
-  
   if (isMobile) {
     // On mobile, toggle volume slider visibility
     isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
-    
+
     // Start auto-hide timer when showing volume slider
     if (isVolumeSliderVisible.value) {
       startVolumeSliderAutoHideTimer();
@@ -270,20 +254,16 @@ const handleVolumeSliderAreaClick = () => {
 
 const handleVolumeSliderMouseEnter = () => {
   if (props.enableVolumeControl === false) return;
-  
   // Only handle mouse events on PC
   if (isMobile) return;
-  
   // On PC, stop auto-hide timer when mouse enters slider area
   stopVolumeSliderAutoHideTimer();
 };
 
 const handleVolumeSliderMouseLeave = () => {
   if (props.enableVolumeControl === false) return;
-  
   // Only handle mouse events on PC
   if (isMobile) return;
-  
   // On PC, start auto-hide timer when mouse leaves slider area
   // But don't start if currently dragging
   if (!isDragging.value) {
@@ -293,8 +273,6 @@ const handleVolumeSliderMouseLeave = () => {
 
 onUnmounted(() => {
   removeGlobalEventListeners();
-  
-  // Clean up timers
   if (volumeSliderAutoHideTimer.value) {
     clearTimeout(volumeSliderAutoHideTimer.value);
   }
@@ -351,7 +329,7 @@ onUnmounted(() => {
 
   @media (hover: none) and (pointer: coarse) {
     cursor: grab;
-    
+
     &:active {
       cursor: grabbing;
     }
@@ -412,16 +390,16 @@ onUnmounted(() => {
   transition: transform 0.1s ease;
   z-index: 3;
   cursor: grab;
-  
+
   &.no-transition {
     transition: none;
   }
-  
+
   &:active {
     cursor: grabbing;
     transform: translateX(-50%) scale(1.1);
   }
-  
+
   &:hover {
     transform: translateX(-50%) scale(1.1);
   }
@@ -441,14 +419,14 @@ onUnmounted(() => {
 @media (hover: none) and (pointer: coarse) {
   .volume-slider-wrapper {
     padding: 16px 12px;
-    
+
     &:active {
       background: var(--volume-control-background-light);
       transform: scale(0.98);
       transition: all 0.1s ease;
     }
   }
-  
+
   .volume-slider-wrapper-inner {
     height: 100px;
   }

package/src/components/LiveCoreView/PlayerControl/PlayerControl.vue

@@ -3,7 +3,11 @@
     <div
       v-show="showControls"
       ref="playerControlRef"
-      :class="['playback-controls', isMobile ? 'mobile-mode' : 'pc-mode']"
+      :class="[
+        'playback-controls',
+        isMobile ? 'mobile-mode' : 'pc-mode',
+        { 'mobile-landscape-mode': props.isLandscapeStyleMode },
+      ]"
     >
       <div class="control-buttons">
         <span class="control-btn play-pause-btn" :title="isPlaying ? t('Pause') : t('Play')" @click="handlePlayPause">
@@ -43,7 +47,15 @@
 
 <script setup lang="ts">
 import { onMounted, ref, onBeforeUnmount } from 'vue';
-import { IconFullScreen, IconPictureInPicture, IconPause, IconPlay, useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import {
+  IconFullScreen,
+  IconPictureInPicture,
+  IconPause,
+  IconPlay,
+  useUIKit,
+  TUIToast,
+  TOAST_TYPE,
+} from '@tencentcloud/uikit-base-component-vue3';
 import { usePlayerControlState } from './PlayerControlState';
 import AudioControl from './AudioControl.vue';
 import { isMobile } from '../../../utils';
@@ -63,12 +75,14 @@ const {
   cleanup,
 } = usePlayerControlState();
 
+const props = defineProps<{
+  isLandscapeStyleMode?: boolean;
+}>();
+
 const { t } = useUIKit();
 const currentVolume = ref(1);
 const isMuted = ref(false);
-
 const playerControlRef = ref<HTMLElement>();
-
 const showControls = ref(false);
 const hideTimeout = ref<number | null>(null);
 
@@ -214,29 +228,29 @@ const handleScreenTouchStart = (event: TouchEvent) => {
   }
 };
 
-const handleScreenTouchMove = (event: TouchEvent) => { 
+const handleScreenTouchMove = (event: TouchEvent) => {
   if (playerControlRef.value && playerControlRef.value.contains(event.target as Node)) {
     stopAutoHideControl();
     return;
   }
-}
+};
 
 const handleScreenTouchEnd = (event: TouchEvent) => {
   if (!touchStartCoords.value) {
     return;
   }
-  
+
   const touchEnd = event.changedTouches[0];
   const distance = calculateTouchDistance(touchStartCoords.value, touchEnd);
-  
+
   const MAX_CLICK_DISTANCE = 20;
   if (distance > MAX_CLICK_DISTANCE) {
     touchStartCoords.value = null;
     return;
   }
-  
+
   const target = event.target as Node;
-  
+
   if (isPlayerControlTarget(target)) {
     handlePlayerControlTouch();
   } else if (isLiveCoreViewTarget(target)) {
@@ -244,7 +258,7 @@ const handleScreenTouchEnd = (event: TouchEvent) => {
   } else {
     showControls.value = false;
   }
-  
+
   touchStartCoords.value = null;
 };
 
@@ -291,6 +305,15 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
+.playback-controls {
+  background: #000000;
+  padding: 12px 0;
+  display: flex;
+  width: calc(100% + 1px); // Solve the problem of 1px deviation during absolute positioning
+  align-items: center;
+  box-sizing: border-box;
+}
+
 .pc-mode {
   position: absolute;
   bottom: 0;
@@ -300,20 +323,53 @@ onBeforeUnmount(() => {
 }
 
 .mobile-mode {
-  position: fixed !important;
+  position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 999999;
   pointer-events: auto;
 }
-.playback-controls {
-  background: #000000;
-  padding: 12px 0;
-  display: flex;
-  width: calc(100% + 1px); // Solve the problem of 1px deviation during absolute positioning
-  align-items: center;
-  box-sizing: border-box;
+
+@media screen and (orientation: portrait) {
+  .mobile-landscape-mode {
+    position: fixed;
+    bottom: unset;
+    transform: rotate(90deg);
+    transform-origin: left bottom;
+    top: -60px;
+    bottom: unset;
+    width: 100vh;
+    padding-right: 16px;
+  }
+
+  .mobile-landscape-mode {
+    &.player-control-enter-active,
+    &.player-control-leave-active {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      will-change: transform, opacity;
+    }
+
+    &.player-control-enter-from {
+      opacity: 0;
+      transform: rotate(90deg) translateY(60px);
+    }
+
+    &.player-control-enter-to {
+      opacity: 1;
+      transform: rotate(90deg) translateY(0);
+    }
+
+    &.player-control-leave-from {
+      opacity: 1;
+      transform: rotate(90deg) translateY(0);
+    }
+
+    &.player-control-leave-to {
+      opacity: 0;
+      transform: rotate(90deg) translateY(60px);
+    }
+  }
 }
 
 .control-buttons {
@@ -340,7 +396,6 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
   color: white;
 
   &:hover {

package/src/components/LiveCoreView/PlayerControl/PlayerControlState.ts

@@ -37,6 +37,7 @@ export interface PlayerControlState {
   isPlaying: Ref<boolean>;
   currentFillMode: Ref<FillMode>;
   isFullscreen: Ref<boolean>;
+  isLandscapeStyleMode: Ref<boolean>;
   isPictureInPicture: Ref<boolean>;
   currentVolume: Ref<number>;
 
@@ -45,8 +46,8 @@ export interface PlayerControlState {
   pause: () => Promise<boolean>;
 
   // Fullscreen control methods
-  requestFullscreen: () => Promise<boolean>;
-  exitFullscreen: () => Promise<boolean>;
+  requestFullscreen: () => Promise<FullscreenResult>;
+  exitFullscreen: () => Promise<FullscreenResult>;
 
   // Picture-in-picture control methods
   requestPictureInPicture: () => Promise<boolean>;
@@ -64,8 +65,10 @@ export interface PlayerControlState {
 const isPlaying = ref(true);
 const currentFillMode = ref<FillMode>(FillMode.CONTAIN);
 const isFullscreen = ref(false);
+const isLandscapeStyleMode = ref(false);
 const isPictureInPicture = ref(false);
 const currentVolume = ref(1.0); // Default volume is 1.0 (100%)
+const roomEngine = useRoomEngine();
 
 /**
  * Player control state management hook
@@ -74,7 +77,6 @@ export function usePlayerControlState(): PlayerControlState {
   // Dependency injection
   const { localLiveStatus } = useLiveState();
   const { canvas } = useLiveSeatState();
-  const roomEngine = useRoomEngine();
 
   // Event listener management
   const eventManager = new EventListenerManager();
@@ -211,7 +213,7 @@ export function usePlayerControlState(): PlayerControlState {
   /**
    * Fullscreen control methods
    */
-  const requestFullscreen = async (): Promise<boolean> => {
+  const requestFullscreen = async (): Promise<FullscreenResult> => {
     return withErrorHandling(async () => {
       const elements = DOMElementGetter.getAllElements();
       const validation = DOMElementGetter.validateElements(elements);
@@ -248,12 +250,12 @@ export function usePlayerControlState(): PlayerControlState {
       } else {
         console.error('Fullscreen request failed:', result.error);
       }
-
-      return result.success;
-    }, 'Request fullscreen', false);
+      isLandscapeStyleMode.value = result.shouldRotateToLandscape;
+      return result;
+    }, 'Request fullscreen', { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
   };
 
-  const exitFullscreen = async (): Promise<boolean> => {
+  const exitFullscreen = async (): Promise<FullscreenResult> => {
     return withErrorHandling(async () => {
       const elements = DOMElementGetter.getAllElements();
       if (!elements.view) {
@@ -291,9 +293,9 @@ export function usePlayerControlState(): PlayerControlState {
       } else {
         console.error('Fullscreen exit failed:', result.error);
       }
-
-      return result.success;
-    }, 'Exit fullscreen', false);
+      isLandscapeStyleMode.value = false;
+      return result;
+    }, 'Exit fullscreen', { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
   };
 
   /**
@@ -394,7 +396,8 @@ export function usePlayerControlState(): PlayerControlState {
           console.warn('Failed to unlock orientation during cleanup:', error);
         });
       }
-
+      
+      isLandscapeStyleMode.value = false;
       console.log('Fullscreen exit style cleanup completed');
     } catch (error) {
       console.error('Fullscreen exit style cleanup failed:', error);
@@ -419,7 +422,6 @@ export function usePlayerControlState(): PlayerControlState {
 
       // Update state
       isFullscreen.value = isCurrentlyFullscreen;
-
       // If exiting fullscreen, need to cleanup styles
       if (wasFullscreen && !isCurrentlyFullscreen) {
         console.log('Detected passive fullscreen exit, executing style cleanup');
@@ -462,7 +464,7 @@ export function usePlayerControlState(): PlayerControlState {
     const handleLeavePictureInPicture = () => {
       console.log('Left picture-in-picture mode');
       isPictureInPicture.value = false;
-      resume();
+      setTimeout(resume, 300);
     };
 
     // Video playback state change handlers
@@ -580,6 +582,7 @@ export function usePlayerControlState(): PlayerControlState {
     isPlaying,
     currentFillMode,
     isFullscreen,
+    isLandscapeStyleMode,
     isPictureInPicture,
     currentVolume,
 

package/src/components/LiveCoreView/index.vue

@@ -46,9 +46,9 @@
       />
     </div>
     <Teleport to="body" v-if="!isFullscreen" :disabled="!isMobile">
-      <PlayerControl v-if="isShowPlayerControl" />
+      <PlayerControl :isLandscapeStyleMode="isLandscapeStyleMode" v-if="isShowPlayerControl" />
     </Teleport>
-    <PlayerControl v-if="isShowPlayerControl && isFullscreen" />
+    <PlayerControl :isLandscapeStyleMode="isLandscapeStyleMode" v-if="isShowPlayerControl && isFullscreen" />
   </div>
 </template>
 
@@ -65,7 +65,7 @@ import type { SeatInfo, SeatUserInfo } from '../../types';
 import { isMobile } from '../../utils';
 import { usePlayerControlState } from './PlayerControl';
 
-const { isFullscreen } = usePlayerControlState();
+const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
 const { currentLive } = useLiveState();
@@ -304,7 +304,7 @@ watch(() => [canvas.value, seatList.value], () => {
     fillMode.value = StreamFillMode.Fit;
   }
   handleStreamRegionSize();
-});
+}, { deep: true });
 
 function handleStreamRegionSize() {
   if (!liveCoreViewContainerRef.value) {