tuikit-atomicx-vue3 4.5.2 → 4.5.4

package/dist/subEntry/live/server.d.ts

@@ -14,6 +14,6 @@ export default class RTCLoginServer {
      * @param { TUIInitParam } params
      */
     onNotifyEvent(eventName: string, subKey: string): void;
-    login(): Promise<any>;
+    login(): Promise<unknown>;
     logout(): void;
 }

package/dist/subEntry/room/server.d.ts

@@ -14,6 +14,6 @@ export default class RTCLoginServer {
      * @param { TUIInitParam } params
      */
     onNotifyEvent(eventName: string, subKey: string): void;
-    login(): Promise<any>;
+    login(): Promise<unknown>;
     logout(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "4.5.2",
+  "version": "4.5.4",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -35,6 +35,7 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
+    "build:local": "vite build",
     "build:watch": "vite build --mode development -w",
     "lint": "eslint .",
     "check-chinese": "node scripts/check-chinese-simple.js",
@@ -55,7 +56,7 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.7",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.5.0",
+    "@tencentcloud/tuiroom-engine-js": "~3.5.1",
     "@tencentcloud/uikit-base-component-vue3": "1.3.2",
     "vue": "^3.4.0"
   },

package/src/components/LiveView/PlayerControl/PlayerControl.vue

@@ -10,14 +10,20 @@
       ]"
     >
       <div class="control-buttons">
-        <span class="control-btn play-pause-btn" :title="isPlaying ? t('Pause') : t('Play')" @click="handlePlayPause">
-          <IconPause size="20" v-if="isPlaying" />
-          <IconPlay size="20" v-else />
+        <span
+          v-if="!isSafari || !isTcPlayer"
+          class="control-btn play-pause-btn"
+          :class="{disabled: isPictureInPicture}"
+          :title="isPlaying ? t('Pause') : t('Play')"
+          @click="handlePlayPause"
+        >
+          <IconPause v-if="isPlaying" size="20" />
+          <IconPlay v-else size="20" />
         </span>
-        <div class="center-controls"></div>
+        <div class="center-controls" />
         <div class="right-controls">
           <MultiResolution />
-          <span class="control-btn audio-control-btn">
+          <span v-if="!isSafari || !isTcPlayer" class="control-btn audio-control-btn">
             <AudioControl
               class="audio-control-icon"
               :icon-size="20"
@@ -29,6 +35,7 @@
           </span>
           <span
             class="control-btn"
+            :class="{disabled: !isPlaying && !isPictureInPicture}"
             :title="isPictureInPicture ? t('Exit Picture in Picture') : t('Picture in Picture')"
             @click="handlePictureInPicture"
           >
@@ -58,11 +65,10 @@ import {
   TUIToast,
   TOAST_TYPE,
 } from '@tencentcloud/uikit-base-component-vue3';
-import { usePlayerControlState } from './PlayerControlState';
+import { isMobile } from '../../../utils';
 import AudioControl from './AudioControl.vue';
 import MultiResolution from './MultiResolution.vue';
-import { isMobile } from '../../../utils';
-import { waitForVideoMounted } from './utils/domHelpers';
+import { usePlayerControlState } from './PlayerControlState';
 
 const {
   isMuted,
@@ -79,6 +85,8 @@ const {
   setVolume,
   setMute,
   cleanup,
+  isSafari,
+  isTcPlayer,
 } = usePlayerControlState();
 
 const props = defineProps<{
@@ -93,6 +101,14 @@ const hideTimeout = ref<number | null>(null);
 const AUTO_HIDE_DELAY = 3000; // ms
 
 const handlePlayPause = () => {
+  if (isPictureInPicture.value) {
+    TUIToast({
+      type: TOAST_TYPE.WARNING,
+      message: t('Not allow to "Pause" in picture-in-picture mode'),
+    });
+    return;
+  }
+
   if (isPlaying.value) {
     pause();
   } else {
@@ -101,6 +117,14 @@ const handlePlayPause = () => {
 };
 
 const handlePictureInPicture = async () => {
+  if (!isPlaying.value && !isPictureInPicture.value) {
+    TUIToast({
+      type: TOAST_TYPE.WARNING,
+      message: t('Not allow to "Picture in Picture" in non-playing mode'),
+    });
+    return;
+  }
+
   let flag = false;
   if (isPictureInPicture.value) {
     flag = await exitPictureInPicture();
@@ -184,13 +208,9 @@ const removeParentMouseListener = () => {
 const touchStartCoords = ref<{ x: number; y: number } | null>(null);
 
 // Touch distance calculation
-const calculateTouchDistance = (start: { x: number; y: number }, end: Touch) => {
-  return Math.sqrt(Math.pow(end.clientX - start.x, 2) + Math.pow(end.clientY - start.y, 2));
-};
+const calculateTouchDistance = (start: { x: number; y: number }, end: Touch) => Math.sqrt((end.clientX - start.x) ** 2 + (end.clientY - start.y) ** 2);
 
-const isPlayerControlTarget = (target: Node) => {
-  return playerControlRef.value?.contains(target) || false;
-};
+const isPlayerControlTarget = (target: Node) => playerControlRef.value?.contains(target) || false;
 
 const isLiveCoreViewTarget = (target: Node) => {
   const container = document.getElementById('live-core-view-container');
@@ -224,7 +244,6 @@ const handleScreenTouchStart = (event: TouchEvent) => {
 const handleScreenTouchMove = (event: TouchEvent) => {
   if (playerControlRef.value && playerControlRef.value.contains(event.target as Node)) {
     stopAutoHideControl();
-    return;
   }
 };
 
@@ -395,6 +414,11 @@ onBeforeUnmount(() => {
     height: 20px;
     fill: currentColor;
   }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
 }
 
 .play-pause-btn {

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

@@ -1,17 +1,20 @@
 import type { Ref } from 'vue';
 import { computed, ref, watch } from 'vue';
 import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
+import { TUIMessageBox, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import useRoomEngine from '../../../hooks/useRoomEngine';
-import { useLiveSeatState } from '../../../states/LiveSeatState';
 import { useLiveListState } from '../../../states/LiveListState';
+import { useLiveSeatState } from '../../../states/LiveSeatState';
 import {
   getDeviceType,
   shouldRotateToLandscapeForFullscreen,
   hadLandscapeRotationToUndo,
+  isSafariBrowser,
 } from './utils/deviceDetection';
 import {
   DOMElementGetter,
   EventListenerManager,
+  waitForVideoMounted,
 } from './utils/domHelpers';
 import {
   FullscreenManager,
@@ -20,7 +23,7 @@ import {
   StyleManager,
 } from './utils/fullscreenManager';
 import type {
-  FullscreenResult
+  FullscreenResult,
 } from './utils/fullscreenManager';
 
 // Player fill mode enum
@@ -48,6 +51,8 @@ export interface PlayerControlState {
   isPictureInPicture: Ref<boolean>;
   currentVolume: Ref<number>;
   isMuted: Ref<boolean>;
+  isSafari: Ref<boolean>;
+  isTcPlayer: Ref<boolean>;
 
   // Resolution state properties
   resolutionList: Ref<Resolution[]>;
@@ -88,25 +93,21 @@ const VOLUME_CONSTANTS = {
   MUTE_VOLUME: 0,
 };
 
-const TIMING_CONSTANTS = {
-  // Delay in milliseconds before resuming playback after leaving picture-in-picture
-  // Allows browser to handle state transitions naturally
-  PIP_RESUME_DELAY: 300,
-};
-
 const ARRAY_CONSTANTS = {
   // Index of the first element in an array
   FIRST_INDEX: 0,
 };
 
 // State management
-const isPlaying = ref(true);
+const isPlaying = ref(false);
 const currentFillMode = ref<FillMode>(FillMode.CONTAIN);
 const isFullscreen = ref(false);
 const isLandscapeStyleMode = ref(false);
 const isPictureInPicture = ref(false);
 const currentVolume = ref(VOLUME_CONSTANTS.DEFAULT_VOLUME);
 const isMuted = ref(false); // Mute state - synced across all rooms
+const isSafari = ref(isSafariBrowser());
+const isTcPlayer = ref(false);
 
 // Internal storage for volume restoration (not reactive)
 let restoreVolume = VOLUME_CONSTANTS.DEFAULT_VOLUME;
@@ -116,6 +117,7 @@ const resolutionList = ref<Resolution[]>([]);
 const currentResolution = ref<Resolution | undefined>();
 
 const roomEngine = useRoomEngine();
+const { t } = useUIKit();
 
 /**
  * Player control state management hook
@@ -159,12 +161,31 @@ export function usePlayerControlState(): PlayerControlState {
   };
 
   const resume = async (): Promise<boolean> => withErrorHandling(async () => {
-    await roomEngine.instance?.callExperimentalAPI(JSON.stringify({
-      api: 'resume',
-      params: {},
-    }));
-    isPlaying.value = true;
-    return true;
+    try {
+      await roomEngine.instance?.callExperimentalAPI(JSON.stringify({
+        api: 'resume',
+        params: {},
+      }));
+      isPlaying.value = true;
+      return true;
+    } catch (error: any) {
+      // Handle browser autoplay policy restriction
+      if (error?.name === 'NotAllowedError' && (error?.message?.includes('user agent') || error?.message?.includes('denied permission'))) {
+        TUIMessageBox.alert({
+          content: t('Content is ready. Click the button to start playback'),
+          confirmText: t('Play'),
+          callback: async () => {
+            await roomEngine.instance?.callExperimentalAPI(JSON.stringify({
+              api: 'resume',
+              params: {},
+            }));
+            isPlaying.value = true;
+          },
+        });
+        return false;
+      }
+      throw error;
+    }
   }, 'Resume playback', false);
 
   const pause = async (): Promise<boolean> => withErrorHandling(async () => {
@@ -443,7 +464,6 @@ export function usePlayerControlState(): PlayerControlState {
 
     const handleLeavePictureInPicture = () => {
       isPictureInPicture.value = false;
-      setTimeout(resume, TIMING_CONSTANTS.PIP_RESUME_DELAY);
     };
 
     eventManager.addListener('enterpictureinpicture', video, 'enterpictureinpicture', handleEnterPictureInPicture);
@@ -462,19 +482,34 @@ export function usePlayerControlState(): PlayerControlState {
   setupVideoEventListeners();
   OrientationManager.addOrientationListener(orientationListenerId, handleOrientationChange);
 
+  const updateIsTcPlayer = async () => {
+    try {
+      await waitForVideoMounted();
+    } finally {
+      const hasTcPlayer = DOMElementGetter.hasTcPlayerElement();
+      if (hasTcPlayer !== isTcPlayer.value) {
+        isTcPlayer.value = hasTcPlayer;
+        console.log('[PlayerControl] isTcPlayer:', isTcPlayer.value);
+      }
+    }
+  };
+
   watch(
     () => currentLive.value?.liveId,
     async (newLiveId) => {
       if (newLiveId) {
         isPlaying.value = true;
+        isPictureInPicture.value = false;
+        isFullscreen.value = false;
         resolutionList.value = [];
         currentResolution.value = undefined;
         // When pulling a TRTC stream, this interface has a cache, but when using TCPlayer, there is no cache
         await setVolume(currentVolume.value);
         await initializeResolution(newLiveId, false);
+        updateIsTcPlayer();
 
         // Print player control state after entering room
-        console.log('[PlayerControl] State after entering room:', {
+        console.log('[PlayerControl] State after entering room:', JSON.stringify({
           isPlaying: isPlaying.value,
           currentFillMode: currentFillMode.value,
           isFullscreen: isFullscreen.value,
@@ -483,11 +518,17 @@ export function usePlayerControlState(): PlayerControlState {
           currentVolume: currentVolume.value,
           resolutionList: resolutionList.value,
           currentResolution: currentResolution.value,
-        });
+        }));
       }
     },
   );
 
+  watch(() => isPlaying.value, (newIsPlaying) => {
+    if (newIsPlaying) {
+      updateIsTcPlayer();
+    }
+  }, { immediate: true });
+
   // Return interface implementation
   return {
     isPlaying,
@@ -499,6 +540,8 @@ export function usePlayerControlState(): PlayerControlState {
     isMuted,
     resolutionList,
     currentResolution,
+    isSafari,
+    isTcPlayer,
     resume,
     pause,
     requestFullscreen,

package/src/components/LiveView/PlayerControl/utils/domHelpers.ts

@@ -73,7 +73,8 @@ export class DOMElementGetter {
   }
 
   /**
-   * Validate if elements exist
+   * Validate if required elements exist for fullscreen
+   * Note: video element is optional because canvas rendering (TRTC SDK) doesn't use video
    */
   static validateElements(elements: { container?: HTMLElement | null; view?: HTMLElement | null; video?: HTMLVideoElement | null }): {
     isValid: boolean;
@@ -87,9 +88,8 @@ export class DOMElementGetter {
     if (elements.view === null) {
       missingElements.push('live-core-view');
     }
-    if (elements.video === null) {
-      missingElements.push('video');
-    }
+    // Video element is not required for fullscreen (canvas rendering works without it)
+    // Only required for picture-in-picture feature
 
     return {
       isValid: missingElements.length === 0,

package/src/components/LiveView/i18n/en-US/index.ts

@@ -10,6 +10,7 @@ export const resource = {
   'Open Speaker': 'Open Speaker',
   'Close Speaker': 'Close Speaker',
   'The system does not support picture-in-picture mode': 'The system does not support picture-in-picture mode',
+  'Content is ready. Click the button to start playback': 'Content is ready. Click the button to start playback',
   'co-Hosting': 'co-Hosting',
   'In battle': 'In battle',
   '360P': '360P',
@@ -17,4 +18,6 @@ export const resource = {
   '720P': '720P',
   '1080P': '1080P',
   'Connecting': 'Connecting',
+  'Not allow to "Pause" in picture-in-picture mode': 'Not allow to "Pause" in picture-in-picture mode',
+  'Not allow to "Picture in Picture" in non-playing mode': 'Not allow to "Picture in Picture" in non-playing mode',
 };

package/src/components/LiveView/i18n/zh-CN/index.ts

@@ -10,6 +10,7 @@ export const resource = {
   'Open Speaker': '取消静音',
   'Close Speaker': '静音',
   'The system does not support picture-in-picture mode': '系统不支持画中画模式',
+  'Content is ready. Click the button to start playback': '画面已准备好，点击播放按钮开始播放',
   'co-Hosting': '连线中',
   'In battle': 'PK中',
   '360P': '低清',
@@ -17,4 +18,6 @@ export const resource = {
   '720P': '高清',
   '1080P': '超清',
   'Connecting': '连线中',
+  'Not allow to "Pause" in picture-in-picture mode': '画中画模式下不允许暂停操作',
+  'Not allow to "Picture in Picture" in non-playing mode': '暂停状态下不允许进入画中画模式',
 };

package/src/components/LiveView/index.vue

@@ -67,7 +67,7 @@ import type { SeatInfo, SeatUserInfo } from '../../types';
 import { isMobile } from '../../utils';
 import { usePlayerControlState } from './PlayerControl';
 
-const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
+const { isFullscreen, isLandscapeStyleMode, isPictureInPicture, exitPictureInPicture } = usePlayerControlState();
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
 const { currentLive } = useLiveListState();
@@ -96,6 +96,9 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(async () => {
+  if (isPictureInPicture.value) {
+    exitPictureInPicture();
+  }
   isMounted.value = false;
   await stopPlayStream();
   isPlayedVideo.value = false;
@@ -248,8 +251,8 @@ function handleStreamListTransform() {
 
 const streamViewStyle = computed(() => {
   return {
-    width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
-    height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
+    width: `${Math.ceil(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
+    height: `${Math.ceil(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
     transform: `translate(${originStreamViewStyle.value.transformX * originStreamViewStyle.value.scale}px, ${
       originStreamViewStyle.value.transformY * originStreamViewStyle.value.scale
     }px)`,
@@ -419,6 +422,7 @@ onBeforeUnmount(() => {
       position: absolute;
       top: 0;
       left: 0;
+      overflow: hidden;
     }
 
     .live-core-ui {