tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

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

@@ -1,28 +1,27 @@
 import type { Ref } from 'vue';
 import { computed, ref, watch } from 'vue';
-import { TRTCCloud, TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
+import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import useRoomEngine from '../../../hooks/useRoomEngine';
-import useLiveState from '../../../states/LiveState';
 import { useLiveSeatState } from '../../../states/LiveSeatState';
-// Import utility modules
-import { 
-  getDeviceType, 
-  getCurrentOrientation,
+import { useLiveListState } from '../../../states/LiveListState';
+import {
+  getDeviceType,
   shouldRotateToLandscapeForFullscreen,
   hadLandscapeRotationToUndo,
 } from './utils/deviceDetection';
-import { 
-  FullscreenManager, 
-  FullscreenResult,
+import {
+  DOMElementGetter,
+  EventListenerManager,
+} from './utils/domHelpers';
+import {
+  FullscreenManager,
   FullscreenMode,
   OrientationManager,
-  StyleManager
+  StyleManager,
+} from './utils/fullscreenManager';
+import type {
+  FullscreenResult
 } from './utils/fullscreenManager';
-import { 
-  DOMElementGetter, 
-  EventListenerManager 
-} from './utils/domHelpers';
-import { LiveStatus } from '../../../types';
 
 // Player fill mode enum
 export enum FillMode {
@@ -48,7 +47,8 @@ export interface PlayerControlState {
   isLandscapeStyleMode: Ref<boolean>;
   isPictureInPicture: Ref<boolean>;
   currentVolume: Ref<number>;
-  
+  isMuted: Ref<boolean>;
+
   // Resolution state properties
   resolutionList: Ref<Resolution[]>;
   currentResolution: Ref<Resolution | undefined>;
@@ -67,29 +67,53 @@ export interface PlayerControlState {
 
   // Resolution control methods
   switchResolution: (resolution: Resolution) => Promise<boolean>;
-  getResolutionList: (roomId: string) => Promise<Resolution[]>;
-  initializeResolution: (roomId: string, applyResolution?: boolean) => Promise<void>;
 
   // Other control methods
-  setVolume: (volume: number) => Promise<boolean>;
+  setVolume: (volume: number) => Promise<boolean>; // Volume range: 0-100
+  setMute: (muted: boolean) => Promise<boolean>;
   changeFillMode: (fillMode: FillMode) => Promise<boolean>;
-
   // Cleanup method
   cleanup: () => void;
 }
 
+// Constants
+const VOLUME_CONSTANTS = {
+  // Default volume level when component initializes (100% volume)
+  DEFAULT_VOLUME: 100,
+  // Minimum allowed volume level (silent)
+  MIN_VOLUME: 0,
+  // Maximum allowed volume level (full volume)
+  MAX_VOLUME: 100,
+  // Volume level when muted (silent)
+  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 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 currentVolume = ref(VOLUME_CONSTANTS.DEFAULT_VOLUME);
+const isMuted = ref(false); // Mute state - synced across all rooms
+
+// Internal storage for volume restoration (not reactive)
+let restoreVolume = VOLUME_CONSTANTS.DEFAULT_VOLUME;
 
 // Resolution state management
 const resolutionList = ref<Resolution[]>([]);
 const currentResolution = ref<Resolution | undefined>();
-const RESOLUTION_INITIALIZED_PREFIX = '[LiveCoreView]ResolutionInitialized';
 
 const roomEngine = useRoomEngine();
 
@@ -98,7 +122,7 @@ const roomEngine = useRoomEngine();
  */
 export function usePlayerControlState(): PlayerControlState {
   // Dependency injection
-  const { localLiveStatus } = useLiveState();
+  const { currentLive } = useLiveListState();
   const { canvas } = useLiveSeatState();
 
   // Event listener management
@@ -108,11 +132,11 @@ export function usePlayerControlState(): PlayerControlState {
   const orientationListenerId = `player-control-${Date.now()}`;
 
   // Computed properties
-  const isLandscapeStream = computed(() => 
-    canvas.value ? canvas.value.width > canvas.value.height : false
+  const isLandscapeStream = computed(() =>
+    canvas.value ? canvas.value.width > canvas.value.height : false,
   );
-  const isPortraitStream = computed(() => 
-    canvas.value ? canvas.value.width < canvas.value.height : false
+  const isPortraitStream = computed(() =>
+    canvas.value ? canvas.value.width < canvas.value.height : false,
   );
 
   // Device information
@@ -124,7 +148,7 @@ export function usePlayerControlState(): PlayerControlState {
   const withErrorHandling = async <T>(
     operation: () => Promise<T>,
     operationName: string,
-    fallbackValue: T
+    fallbackValue: T,
   ): Promise<T> => {
     try {
       return await operation();
@@ -134,85 +158,29 @@ export function usePlayerControlState(): PlayerControlState {
     }
   };
 
-  /**
-   * Video control methods
-   */
-
-  const syncVolumeState = (): void => {
-    const video = DOMElementGetter.getVideoElement();
-    if (video) {
-      const actualVolume = video.volume;
-      if (Math.abs(currentVolume.value - actualVolume) > 0.01) { // Use small tolerance for floating point comparison
-        console.log(`Syncing volume state: ${currentVolume.value} -> ${actualVolume}`);
-        currentVolume.value = actualVolume;
-      }
-    }
-  };
-
-  const syncPlayingState = (): void => {
-    const video = DOMElementGetter.getVideoElement();
-    if (video) {
-      const actualPlayingState = !video.paused && !video.ended;
-      if (isPlaying.value !== actualPlayingState) {
-        console.log(`Syncing playing state: ${isPlaying.value} -> ${actualPlayingState}`);
-        isPlaying.value = actualPlayingState;
-      }
-    }
-  };
-
-  const resume = async (): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      const video = DOMElementGetter.getVideoElement();
-      if (!video) {
-        throw new Error('Video element not found');
-      }
-      if (DOMElementGetter.hasTcPlayerElement()) {
-        await video.play();
-      } else {
-        const trtcCloudMap = TRTCCloud.subCloudMap;
-        trtcCloudMap.forEach((trtcCloud: TRTCCloud) => {
-          const trtc = trtcCloud?._trtc;
-          trtc?.callExperimentalAPI('resumeRemotePlayer', { userId: '*'})
-        })
-      }
-      isPlaying.value = true;
-      console.log('Video playback resumed');
-      return true;
-    }, 'Resume playback', false);
-  };
-
-  const pause = async (): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      const video = DOMElementGetter.getVideoElement();
-      if (!video) {
-        throw new Error('Video element not found');
-      }
-      if (DOMElementGetter.hasTcPlayerElement()) {
-        await video.pause();
-      } else {
-        const trtcCloudMap = TRTCCloud.subCloudMap;
-        trtcCloudMap.forEach((trtcCloud: TRTCCloud) => {
-          const trtc = trtcCloud?._trtc;
-          trtc?.callExperimentalAPI('pauseRemotePlayer', { userId: '*'})
-        })
-      }
-      isPlaying.value = false;
-      console.log('Video playback paused');
-      return true;
-    }, 'Pause playback', false);
-  };
+  const resume = async (): Promise<boolean> => withErrorHandling(async () => {
+    await roomEngine.instance?.callExperimentalAPI(JSON.stringify({
+      api: 'resume',
+      params: {},
+    }));
+    isPlaying.value = true;
+    return true;
+  }, 'Resume playback', false);
+
+  const pause = async (): Promise<boolean> => withErrorHandling(async () => {
+    await roomEngine.instance?.callExperimentalAPI(JSON.stringify({
+      api: 'pause',
+      params: {},
+    }));
+    isPlaying.value = false;
+    return true;
+  }, 'Pause playback', false);
 
   /**
    * Handle orientation change
    */
   const handleOrientationChange = (newOrientation: 'portrait' | 'landscape' | 'unknown'): void => {
-    // Only handle orientation changes in fullscreen mode
-    if (!isFullscreen.value) {
-      return;
-    }
-
-    // Only handle for landscape streams
-    if (!isLandscapeStream.value) {
+    if (!isFullscreen.value || !isLandscapeStream.value) {
       return;
     }
 
@@ -222,261 +190,186 @@ export function usePlayerControlState(): PlayerControlState {
       return;
     }
 
-    console.log('Handling orientation change:', {
-      newOrientation,
-      deviceType,
-      isLandscapeStream: isLandscapeStream.value,
-      isFullscreen: isFullscreen.value
-    });
-
-    // Smart adjustment of landscape styles
     StyleManager.smartApplyLandscapeStyles(elements.view, newOrientation);
   };
 
   /**
    * Fullscreen control methods
    */
-  const requestFullscreen = async (): Promise<FullscreenResult> => {
-    return withErrorHandling(async () => {
-      const elements = DOMElementGetter.getAllElements();
-      const validation = DOMElementGetter.validateElements(elements);
-      
-      if (!validation.isValid) {
-        throw new Error(`Missing required DOM elements: ${validation.missingElements.join(', ')}`);
-      }
+  const requestFullscreen = async (): Promise<FullscreenResult> => withErrorHandling(async () => {
+    const elements = DOMElementGetter.getAllElements();
+    const validation = DOMElementGetter.validateElements(elements);
 
-      const currentOrientation = getCurrentOrientation();
-      const shouldRotateToLandscape = shouldRotateToLandscapeForFullscreen(deviceType, isLandscapeStream.value);
-
-      console.log('Request fullscreen:', {
-        deviceType,
-        currentOrientation,
-        streamType: isLandscapeStream.value ? 'landscape stream' : isPortraitStream.value ? 'portrait stream' : 'unknown',
-        shouldRotate: shouldRotateToLandscape,
-        reason: shouldRotateToLandscape ? 'Mobile device in portrait with landscape stream' : 
-                currentOrientation === 'landscape' ? 'Already in landscape orientation' : 
-                !isLandscapeStream.value ? 'Not a landscape stream' :
-                'Desktop device or other reason'
-      });
-
-      const result: FullscreenResult = await FullscreenManager.requestFullscreen(
-        elements.container!,
-        elements.view!,
-        deviceType,
-        isPortraitStream.value,
-        shouldRotateToLandscape
-      );
-
-      if (result.success) {
-        isFullscreen.value = true;
-        console.log(`Fullscreen request successful (${result.mode})`);
-      } else {
-        console.error('Fullscreen request failed:', result.error);
-      }
-      isLandscapeStyleMode.value = result.shouldRotateToLandscape;
-      return result;
-    }, 'Request fullscreen', { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
-  };
+    if (!validation.isValid) {
+      throw new Error(`Missing required DOM elements: ${validation.missingElements.join(', ')}`);
+    }
 
-  const exitFullscreen = async (): Promise<FullscreenResult> => {
-    return withErrorHandling(async () => {
-      const elements = DOMElementGetter.getAllElements();
-      if (!elements.view) {
-        throw new Error('live-core-view element not found');
-      }
+    const shouldRotateToLandscape = shouldRotateToLandscapeForFullscreen(deviceType, isLandscapeStream.value);
 
-      const currentOrientation = getCurrentOrientation();
-      const hadLandscapeRotation = hadLandscapeRotationToUndo(deviceType, isLandscapeStream.value);
-
-      console.log('Exit fullscreen:', {
-        deviceType,
-        currentOrientation,
-        streamType: isLandscapeStream.value ? 'landscape stream' : isPortraitStream.value ? 'portrait stream' : 'unknown',
-        hadLandscapeRotation,
-        reason: hadLandscapeRotation ? 'Mobile device with landscape stream in landscape mode' : 
-                currentOrientation === 'portrait' ? 'Already in portrait orientation' : 
-                !isLandscapeStream.value ? 'Not a landscape stream' :
-                'Desktop device or other reason'
-      });
-
-      const result: FullscreenResult = await FullscreenManager.exitFullscreen(
-        elements.view,
-        deviceType,
-        hadLandscapeRotation
-      );
-
-      // For standard fullscreen, state is updated by event listeners
-      // For CSS simulated fullscreen, update state directly
-      if (result.mode === FullscreenMode.CSS_SIMULATED) {
-        isFullscreen.value = false;
-      }
+    const result: FullscreenResult = await FullscreenManager.requestFullscreen(
+      elements.container!,
+      elements.view!,
+      deviceType,
+      isPortraitStream.value,
+      shouldRotateToLandscape,
+    );
+
+    if (result.success) {
+      isFullscreen.value = true;
+    } else {
+      console.error('Fullscreen request failed:', result.error);
+    }
+    isLandscapeStyleMode.value = result.shouldRotateToLandscape;
+    return result;
+  }, 'Request fullscreen', { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
 
-      if (result.success) {
-        console.log(`Fullscreen exit successful (${result.mode})`);
-      } else {
-        console.error('Fullscreen exit failed:', result.error);
-      }
-      isLandscapeStyleMode.value = false;
-      return result;
-    }, 'Exit fullscreen', { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
-  };
+  const exitFullscreen = async (): Promise<FullscreenResult> => withErrorHandling(async () => {
+    const elements = DOMElementGetter.getAllElements();
+    if (!elements.view) {
+      throw new Error('live-core-view element not found');
+    }
+
+    const hadLandscapeRotation = hadLandscapeRotationToUndo(deviceType, isLandscapeStream.value);
+
+    const result: FullscreenResult = await FullscreenManager.exitFullscreen(
+      elements.view,
+      deviceType,
+      hadLandscapeRotation,
+    );
+
+    if (result.mode === FullscreenMode.CSS_SIMULATED) {
+      isFullscreen.value = false;
+    }
+
+    if (!result.success) {
+      console.error('Fullscreen exit failed:', result.error);
+    }
+    isLandscapeStyleMode.value = false;
+    return result;
+  }, 'Exit fullscreen', { success: false, mode: FullscreenMode.CSS_SIMULATED, shouldRotateToLandscape: false });
 
   /**
    * Picture-in-picture control methods
    */
-  const requestPictureInPicture = async (): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      const video = DOMElementGetter.getVideoElement();
-      if (!video) {
-        throw new Error('Video element not found');
-      }
+  const requestPictureInPicture = async (): Promise<boolean> => withErrorHandling(async () => {
+    const video = DOMElementGetter.getVideoElement();
+    if (!video) {
+      throw new Error('Video element not found');
+    }
 
-      if (!video.requestPictureInPicture) {
-        throw new Error('Picture-in-picture not supported in current environment');
-      }
+    if (!video.requestPictureInPicture) {
+      throw new Error('Picture-in-picture not supported in current environment');
+    }
 
-      // Ensure event listeners are set
-      setupVideoEventListeners();
-      await video.requestPictureInPicture();
-      
-      console.log('Picture-in-picture request successful');
-      return true;
-    }, 'Request picture-in-picture', false);
-  };
+    setupVideoEventListeners();
+    await video.requestPictureInPicture();
+    return true;
+  }, 'Request picture-in-picture', false);
 
-  const exitPictureInPicture = async (): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      if (!document.exitPictureInPicture) {
-        throw new Error('Exit picture-in-picture not supported in current environment');
-      }
+  const exitPictureInPicture = async (): Promise<boolean> => withErrorHandling(async () => {
+    if (!document.exitPictureInPicture) {
+      throw new Error('Exit picture-in-picture not supported in current environment');
+    }
 
-      await document.exitPictureInPicture();
-      console.log('Picture-in-picture exit successful');
-      return true;
-    }, 'Exit picture-in-picture', false);
-  };
+    await document.exitPictureInPicture();
+    return true;
+  }, 'Exit picture-in-picture', false);
 
   /**
    * Resolution control methods
    */
-  const switchResolution = async (resolution: Resolution): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      if (!roomEngine.instance) {
-        throw new Error('Room engine instance not available');
-      }
-      await roomEngine.instance.callExperimentalAPI(
-        JSON.stringify({
-          api: 'switchPlaybackQuality',
-          params: {
-            quality: resolution,
-            autoSwitch: false,
-          },
-        }),
-      );
-      if (!isPlaying.value) {
-        isPlaying.value = true;
-      }
-      currentResolution.value = resolution;
-      console.log(`Resolution switched to: ${resolution}`);
-      return true;
-    }, 'Switch resolution', false);
-  };
+  const switchResolution = async (resolution: Resolution): Promise<boolean> => withErrorHandling(async () => {
+    if (!roomEngine.instance) {
+      throw new Error('Room engine instance not available');
+    }
+    console.debug('Switching to resolution:', resolution);
+    await roomEngine.instance.callExperimentalAPI(
+      JSON.stringify({
+        api: 'switchPlaybackQuality',
+        params: {
+          quality: resolution,
+          autoSwitch: false,
+        },
+      }),
+    );
+    if (!isPlaying.value) {
+      isPlaying.value = true;
+    }
+    currentResolution.value = resolution;
+    return true;
+  }, 'Switch resolution', false);
 
-  const getResolutionList = async (roomId: string): Promise<Resolution[]> => {
-    return withErrorHandling(async () => {
-      if (!roomEngine.instance) {
-        throw new Error('Room engine instance not available');
-      }
-      
-      const resolutions = await roomEngine.instance.callExperimentalAPI(
-        JSON.stringify({
-          api: 'queryPlaybackQualityList',
-          params: {
-            roomId: roomId,
-          },
-        }),
-      );
-      
-      console.log(`Retrieved resolution list for room ${roomId}:`, resolutions);
-      return (resolutions || []) as Resolution[];
-    }, 'Get resolution list', []);
-  };
+  const getResolutionList = async (roomId: string): Promise<Resolution[]> => withErrorHandling(async () => {
+    if (!roomEngine.instance) {
+      throw new Error('Room engine instance not available');
+    }
 
+    const resolutions = await roomEngine.instance.callExperimentalAPI(
+      JSON.stringify({
+        api: 'queryPlaybackQualityList',
+        params: {
+          roomId,
+        },
+      }),
+    );
 
-  const initializeResolution = async (roomId: string, applyResolution: boolean = true): Promise<void> => {
+    return (resolutions || []) as Resolution[];
+  }, 'Get resolution list', []);
+
+  const initializeResolution = async (roomId: string, applyResolution = true): Promise<void> => {
     try {
-      // Check if resolution has been initialized for this room
-      const initializedKey = `${RESOLUTION_INITIALIZED_PREFIX}_${roomId}`;
-      const hasInitialized = localStorage.getItem(initializedKey) === 'true';
-      
-      // Get available resolutionList
       const availableResolutions = await getResolutionList(roomId);
       resolutionList.value = availableResolutions;
-      
-      if (availableResolutions.length === 0) {
-        console.warn('No resolutions available for room:', roomId);
+
+      if (availableResolutions.length === ARRAY_CONSTANTS.FIRST_INDEX) {
+        console.warn('[Resolution] No resolutions available for room:', roomId);
+        currentResolution.value = undefined;
         return;
       }
-      
-      // Always set current resolution if it's not set or if it's not in the available list
-      if (!currentResolution.value || !availableResolutions.includes(currentResolution.value)) {
-        currentResolution.value = availableResolutions[0];
-      }
-      
-      // Only apply resolution if it hasn't been initialized for this room or explicitly requested
-      const shouldApplyResolution = applyResolution && !hasInitialized && currentResolution.value !== undefined;
-      if (shouldApplyResolution) {
-        await switchResolution(currentResolution.value!);
-        // Mark as initialized for this room
-        localStorage.setItem(initializedKey, 'true');
+
+      // Always set to the first available resolution when entering a room
+      const targetResolution = availableResolutions[ARRAY_CONSTANTS.FIRST_INDEX];
+      currentResolution.value = targetResolution;
+      if (applyResolution) {
+        await switchResolution(targetResolution);
       }
-      
-      console.log(`Resolution initialized for room ${roomId}:`, {
-        availableResolutions: availableResolutions,
-        currentResolution: currentResolution.value,
-        applied: shouldApplyResolution,
-        hasInitialized,
-      });
     } catch (error) {
-      console.error('Failed to initialize resolution:', error);
+      console.error('[Resolution] Failed to initialize resolution:', error);
     }
   };
 
   /**
    * Other control methods
    */
-  const setVolume = async (volume: number): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      if (volume < 0 || volume > 1) {
-        throw new Error('Volume value must be between 0-1');
-      }
-      const trtcCloudMap = TRTCCloud.subCloudMap;
-      if(volume === 0) {
-        trtcCloudMap.forEach((trtcCloud: TRTCCloud) => {
-          const trtc = trtcCloud?._trtc;
-          trtc?.muteRemoteAudio('*', true)
-        })
-      } else {
-        trtcCloudMap.forEach((trtcCloud: TRTCCloud) => {
-          const trtc = trtcCloud?._trtc;
-          trtc?.muteRemoteAudio('*', false)
-        })
-      }
-      roomEngine.instance?.setAudioPlayoutVolume({ volume: volume * 100 });
-      currentVolume.value = volume;
-      console.log(`Video volume set to: ${volume}`);
-      return true;
-    }, 'Set volume', false);
-  };
+  const setVolume = async (volume: number): Promise<boolean> => withErrorHandling(async () => {
+    if (volume < VOLUME_CONSTANTS.MIN_VOLUME || volume > VOLUME_CONSTANTS.MAX_VOLUME) {
+      throw new Error(`Volume value must be between ${VOLUME_CONSTANTS.MIN_VOLUME}-${VOLUME_CONSTANTS.MAX_VOLUME}`);
+    }
+    await roomEngine.instance?.setAudioPlayoutVolume({ volume });
+    currentVolume.value = volume;
+    restoreVolume = volume;
+    isMuted.value = volume == VOLUME_CONSTANTS.MUTE_VOLUME;
+    return true;
+  }, 'Set volume', false);
+
+  const setMute = async (muted: boolean): Promise<boolean> => withErrorHandling(async () => {
+    let volume;
+    if (muted) {
+      restoreVolume = currentVolume.value;
+      volume = VOLUME_CONSTANTS.MUTE_VOLUME;
+    } else {
+      volume = restoreVolume || VOLUME_CONSTANTS.DEFAULT_VOLUME;
+    }
+    await roomEngine.instance?.setAudioPlayoutVolume({ volume });
+    currentVolume.value = volume;
+    isMuted.value = muted;
+    return true;
+  }, 'Set mute', false);
 
-  const changeFillMode = async (fillMode: FillMode): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      currentFillMode.value = fillMode;
-      console.log(`Fill mode changed to: ${fillMode}`);
-      // TODO: Implement actual fill mode logic
-      return true;
-    }, 'Change fill mode', false);
-  };
+  const changeFillMode = async (fillMode: FillMode): Promise<boolean> => withErrorHandling(async () => {
+    currentFillMode.value = fillMode;
+    return true;
+  }, 'Change fill mode', false);
 
   /**
    * Handle style cleanup when exiting fullscreen
@@ -485,55 +378,35 @@ export function usePlayerControlState(): PlayerControlState {
     try {
       const elements = DOMElementGetter.getAllElements();
       if (!elements.view) {
-        console.warn('live-core-view element not found for fullscreen exit cleanup');
+        console.warn('View element not found for fullscreen exit cleanup');
         return;
       }
 
-      console.log('Executing fullscreen exit style cleanup:', {
-        deviceType,
-        hasLandscapeStream: isLandscapeStream.value,
-        currentOrientation: getCurrentOrientation()
-      });
-
-      // Remove all fullscreen related styles
       StyleManager.removeFullscreenStyles(elements.view);
       StyleManager.removeLandscapeStyles(elements.view);
 
-      // If mobile device, try to unlock screen orientation
       if (deviceType !== 'desktop') {
-        OrientationManager.unlockOrientation().catch(error => {
-          console.warn('Failed to unlock orientation during cleanup:', error);
+        OrientationManager.unlockOrientation().catch(() => {
+          // Ignore orientation unlock errors in non-desktop environments
         });
       }
-      
       isLandscapeStyleMode.value = false;
-      console.log('Fullscreen exit style cleanup completed');
     } catch (error) {
-      console.error('Fullscreen exit style cleanup failed:', error);
+      console.error('Fullscreen exit cleanup failed:', error);
     }
   };
 
   /**
-   * Event listener setup
+   * Event listener setup for fullscreen state changes
+   * Handles fullscreen API events across different browsers and visibility changes
    */
   const setupFullscreenEventListeners = (): void => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
       const wasFullscreen = isFullscreen.value;
-      
-      console.log('Fullscreen state change:', {
-        fullscreenElement: document.fullscreenElement,
-        isCurrentlyFullscreen,
-        previousValue: wasFullscreen,
-        deviceType,
-        changeType: isCurrentlyFullscreen ? 'entered' : 'exited'
-      });
-
-      // Update state
+
       isFullscreen.value = isCurrentlyFullscreen;
-      // If exiting fullscreen, need to cleanup styles
       if (wasFullscreen && !isCurrentlyFullscreen) {
-        console.log('Detected passive fullscreen exit, executing style cleanup');
         handleFullscreenExit();
       }
     };
@@ -544,162 +417,90 @@ export function usePlayerControlState(): PlayerControlState {
     eventManager.addListener('mozfullscreenchange', document, 'mozfullscreenchange', handleFullscreenChange);
     eventManager.addListener('MSFullscreenChange', document, 'MSFullscreenChange', handleFullscreenChange);
 
-    // Add additional detection mechanisms for non-standard fullscreen exits (like Android back button)
     const handleVisibilityChange = () => {
-      // When page visibility changes, check if fullscreen state is consistent
       if (document.visibilityState === 'visible' && isFullscreen.value) {
         const actuallyFullscreen = !!document.fullscreenElement;
         if (!actuallyFullscreen) {
-          console.log('Detected fullscreen state inconsistency via visibilitychange, executing cleanup');
           isFullscreen.value = false;
           handleFullscreenExit();
         }
       }
     };
 
-    // Listen to page visibility changes (Android back button scenarios)
     eventManager.addListener('visibilitychange', document, 'visibilitychange', handleVisibilityChange);
   };
 
   const setupVideoEventListeners = (): void => {
     const video = DOMElementGetter.getVideoElement();
-    if (!video) return;
+    if (!video) {
+      console.warn('Video element not found for setting up event listeners');
+      return;
+    }
 
     const handleEnterPictureInPicture = () => {
-      console.log('Entered picture-in-picture mode');
       isPictureInPicture.value = true;
     };
 
     const handleLeavePictureInPicture = () => {
-      console.log('Left picture-in-picture mode');
       isPictureInPicture.value = false;
-      setTimeout(resume, 300);
-    };
-
-    // Video playback state change handlers
-    const handlePlay = () => {
-      console.log('Video play event detected');
-      isPlaying.value = true;
-    };
-
-    const handlePause = () => {
-      console.log('Video pause event detected');
-      isPlaying.value = false;
-    };
-
-    const handleEnded = () => {
-      console.log('Video ended event detected');
-      isPlaying.value = false;
-    };
-
-    const handleLoadStart = () => {
-      console.log('Video load start event detected');
-      // Sync initial state when video loads
-      isPlaying.value = !video.paused;
+      setTimeout(resume, TIMING_CONSTANTS.PIP_RESUME_DELAY);
     };
 
-    const handleCanPlay = () => {
-      console.log('Video can play event detected');
-      // Sync state when video becomes playable
-      isPlaying.value = !video.paused;
-    };
-
-    const handleSeeking = () => {
-      console.log('Video seeking event detected');
-      // Sync state during seeking
-      syncPlayingState();
-    };
-
-    const handleSeeked = () => {
-      console.log('Video seeked event detected');
-      // Sync state after seeking
-      syncPlayingState();
-    };
-
-    const handleTimeUpdate = () => {
-      // Only sync occasionally during time updates to avoid too many calls
-      if (Math.random() < 0.1) { // 10% chance per timeupdate event
-        syncPlayingState();
-      }
-    };
-
-    const handleVolumeChange = () => {
-      console.log('Video volume change event detected');
-      // Sync state when volume changes (might indicate user interaction)
-      syncPlayingState();
-      syncVolumeState();
-    };
-
-    // Add picture-in-picture event listeners
     eventManager.addListener('enterpictureinpicture', video, 'enterpictureinpicture', handleEnterPictureInPicture);
     eventManager.addListener('leavepictureinpicture', video, 'leavepictureinpicture', handleLeavePictureInPicture);
-
-    // Add video playback state event listeners
-    eventManager.addListener('play', video, 'play', handlePlay);
-    eventManager.addListener('pause', video, 'pause', handlePause);
-    eventManager.addListener('ended', video, 'ended', handleEnded);
-    eventManager.addListener('loadstart', video, 'loadstart', handleLoadStart);
-    eventManager.addListener('canplay', video, 'canplay', handleCanPlay);
-    
-    // Add additional state sync events
-    eventManager.addListener('seeking', video, 'seeking', handleSeeking);
-    eventManager.addListener('seeked', video, 'seeked', handleSeeked);
-    eventManager.addListener('timeupdate', video, 'timeupdate', handleTimeUpdate);
-    eventManager.addListener('volumechange', video, 'volumechange', handleVolumeChange);
-
   };
 
   /**
    * Cleanup method
    */
   const cleanup = (): void => {
-    console.log('Cleaning up player control state...');
-    
-    // Remove orientation listener
     OrientationManager.removeOrientationListener(orientationListenerId);
-    
-    // Remove all event listeners
     eventManager.removeAllListeners();
-    console.log(`Cleaned up ${eventManager.getListenerCount()} event listeners`);
   };
 
-  // Initialize
   setupFullscreenEventListeners();
   setupVideoEventListeners();
-  
-  // Setup orientation listener for dynamic style adjustment
   OrientationManager.addOrientationListener(orientationListenerId, handleOrientationChange);
-  
-  // Initial state sync
-  syncPlayingState();
-  syncVolumeState();
-
-  watch(localLiveStatus, (newStatus) => {
-    if(newStatus === LiveStatus.Ended) {
-      exitFullscreen();
-      exitPictureInPicture();
-      isPlaying.value = true;
-      isFullscreen.value = false;
-      isPictureInPicture.value = false;
-      currentVolume.value = 1.0;
-    }
-  })
+
+  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);
+
+        // Print player control state after entering room
+        console.log('[PlayerControl] State after entering room:', JSON.stringify({
+          isPlaying: isPlaying.value,
+          currentFillMode: currentFillMode.value,
+          isFullscreen: isFullscreen.value,
+          isLandscapeStyleMode: isLandscapeStyleMode.value,
+          isPictureInPicture: isPictureInPicture.value,
+          currentVolume: currentVolume.value,
+          resolutionList: resolutionList.value,
+          currentResolution: currentResolution.value,
+        }));
+      }
+    },
+  );
 
   // Return interface implementation
   return {
-    // State
     isPlaying,
     currentFillMode,
     isFullscreen,
     isLandscapeStyleMode,
     isPictureInPicture,
     currentVolume,
-    
-    // Resolution state
+    isMuted,
     resolutionList,
     currentResolution,
-
-    // Methods
     resume,
     pause,
     requestFullscreen,
@@ -707,12 +508,9 @@ export function usePlayerControlState(): PlayerControlState {
     requestPictureInPicture,
     exitPictureInPicture,
     switchResolution,
-    getResolutionList,
-    initializeResolution,
     setVolume,
+    setMute,
     changeFillMode,
-    
-    // Cleanup
     cleanup,
   };
 }