tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/src/components/{LiveCoreView → LiveView}/PlayerControl/PlayerControlState.ts

@@ -2,27 +2,27 @@ import type { Ref } from 'vue';
 import { computed, ref, watch } from 'vue';
 import { TRTCCloud, TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import useRoomEngine from '../../../hooks/useRoomEngine';
-import useLiveState from '../../../states/LiveState';
 import { useLiveSeatState } from '../../../states/LiveSeatState';
+import { useLiveListState } from '../../../states/LiveListState';
 // Import utility modules
-import { 
-  getDeviceType, 
+import {
+  getDeviceType,
   getCurrentOrientation,
   shouldRotateToLandscapeForFullscreen,
   hadLandscapeRotationToUndo,
 } from './utils/deviceDetection';
-import { 
-  FullscreenManager, 
-  FullscreenResult,
+import {
+  DOMElementGetter,
+  EventListenerManager,
+} from './utils/domHelpers';
+import {
+  FullscreenManager,
   FullscreenMode,
   OrientationManager,
-  StyleManager
+  StyleManager,
 } from './utils/fullscreenManager';
-import { 
-  DOMElementGetter, 
-  EventListenerManager 
-} from './utils/domHelpers';
-import { LiveStatus } from '../../../types';
+import type {
+  FullscreenResult } from './utils/fullscreenManager';
 
 // Player fill mode enum
 export enum FillMode {
@@ -48,7 +48,7 @@ export interface PlayerControlState {
   isLandscapeStyleMode: Ref<boolean>;
   isPictureInPicture: Ref<boolean>;
   currentVolume: Ref<number>;
-  
+
   // Resolution state properties
   resolutionList: Ref<Resolution[]>;
   currentResolution: Ref<Resolution | undefined>;
@@ -98,7 +98,7 @@ const roomEngine = useRoomEngine();
  */
 export function usePlayerControlState(): PlayerControlState {
   // Dependency injection
-  const { localLiveStatus } = useLiveState();
+  const { currentLive } = useLiveListState();
   const { canvas } = useLiveSeatState();
 
   // Event listener management
@@ -108,11 +108,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 +124,7 @@ export function usePlayerControlState(): PlayerControlState {
   const withErrorHandling = async <T>(
     operation: () => Promise<T>,
     operationName: string,
-    fallbackValue: T
+    fallbackValue: T,
   ): Promise<T> => {
     try {
       return await operation();
@@ -160,47 +160,43 @@ export function usePlayerControlState(): PlayerControlState {
     }
   };
 
-  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 resume = async (): Promise<boolean> => 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 pause = async (): Promise<boolean> => 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);
 
   /**
    * Handle orientation change
@@ -226,7 +222,7 @@ export function usePlayerControlState(): PlayerControlState {
       newOrientation,
       deviceType,
       isLandscapeStream: isLandscapeStream.value,
-      isFullscreen: isFullscreen.value
+      isFullscreen: isFullscreen.value,
     });
 
     // Smart adjustment of landscape styles
@@ -236,193 +232,186 @@ export function usePlayerControlState(): PlayerControlState {
   /**
    * 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);
+    if (!validation.isValid) {
+      throw new Error(`Missing required DOM elements: ${validation.missingElements.join(', ')}`);
+    }
 
-      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 currentOrientation = getCurrentOrientation();
+    const shouldRotateToLandscape = shouldRotateToLandscapeForFullscreen(deviceType, isLandscapeStream.value);
 
-      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 });
-  };
+    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 exitFullscreen = async (): Promise<FullscreenResult> => {
-    return withErrorHandling(async () => {
-      const elements = DOMElementGetter.getAllElements();
-      if (!elements.view) {
-        throw new Error('live-core-view element not found');
-      }
+    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 });
 
-      const currentOrientation = getCurrentOrientation();
-      const hadLandscapeRotation = hadLandscapeRotationToUndo(deviceType, isLandscapeStream.value);
+  const exitFullscreen = async (): Promise<FullscreenResult> => withErrorHandling(async () => {
+    const elements = DOMElementGetter.getAllElements();
+    if (!elements.view) {
+      throw new Error('live-core-view element not found');
+    }
 
-      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 currentOrientation = getCurrentOrientation();
+    const hadLandscapeRotation = hadLandscapeRotationToUndo(deviceType, isLandscapeStream.value);
 
-      const result: FullscreenResult = await FullscreenManager.exitFullscreen(
-        elements.view,
-        deviceType,
-        hadLandscapeRotation
-      );
+    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',
+    });
 
-      // 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.exitFullscreen(
+      elements.view,
+      deviceType,
+      hadLandscapeRotation,
+    );
 
-      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 });
-  };
+    // 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;
+    }
+
+    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 });
 
   /**
    * 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);
-  };
+    // Ensure event listeners are set
+    setupVideoEventListeners();
+    await video.requestPictureInPicture();
 
-  const exitPictureInPicture = async (): Promise<boolean> => {
-    return withErrorHandling(async () => {
-      if (!document.exitPictureInPicture) {
-        throw new Error('Exit picture-in-picture not supported in current environment');
-      }
+    console.log('Picture-in-picture request successful');
+    return true;
+  }, 'Request picture-in-picture', false);
 
-      await document.exitPictureInPicture();
-      console.log('Picture-in-picture exit successful');
-      return true;
-    }, 'Exit picture-in-picture', false);
-  };
+  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);
 
   /**
    * 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');
+    }
+    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 getResolutionList = async (roomId: string): Promise<Resolution[]> => withErrorHandling(async () => {
+    if (!roomEngine.instance) {
+      throw new Error('Room engine instance not available');
+    }
 
-  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 resolutions = await roomEngine.instance.callExperimentalAPI(
+      JSON.stringify({
+        api: 'queryPlaybackQualityList',
+        params: {
+          roomId,
+        },
+      }),
+    );
 
+    console.log(`Retrieved resolution list for room ${roomId}:`, resolutions);
+    return (resolutions || []) as Resolution[];
+  }, 'Get resolution list', []);
 
-  const initializeResolution = async (roomId: string, applyResolution: boolean = true): Promise<void> => {
+  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);
         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) {
@@ -430,9 +419,9 @@ export function usePlayerControlState(): PlayerControlState {
         // Mark as initialized for this room
         localStorage.setItem(initializedKey, 'true');
       }
-      
+
       console.log(`Resolution initialized for room ${roomId}:`, {
-        availableResolutions: availableResolutions,
+        availableResolutions,
         currentResolution: currentResolution.value,
         applied: shouldApplyResolution,
         hasInitialized,
@@ -445,38 +434,22 @@ export function usePlayerControlState(): PlayerControlState {
   /**
    * 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 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 setVolume = async (volume: number): Promise<boolean> => withErrorHandling(async () => {
+    if (volume < 0 || volume > 1) {
+      throw new Error('Volume value must be between 0-1');
+    }
+    await roomEngine.instance?.setAudioPlayoutVolume({ volume: volume * 100 });
+    currentVolume.value = volume;
+    console.log(`Video volume set to: ${volume}`);
+    return true;
+  }, 'Set volume', false);
+
+  const changeFillMode = async (fillMode: FillMode): Promise<boolean> => withErrorHandling(async () => {
+    currentFillMode.value = fillMode;
+    console.log(`Fill mode changed to: ${fillMode}`);
+    // TODO: Implement actual fill mode logic
+    return true;
+  }, 'Change fill mode', false);
 
   /**
    * Handle style cleanup when exiting fullscreen
@@ -492,7 +465,7 @@ export function usePlayerControlState(): PlayerControlState {
       console.log('Executing fullscreen exit style cleanup:', {
         deviceType,
         hasLandscapeStream: isLandscapeStream.value,
-        currentOrientation: getCurrentOrientation()
+        currentOrientation: getCurrentOrientation(),
       });
 
       // Remove all fullscreen related styles
@@ -501,11 +474,11 @@ export function usePlayerControlState(): PlayerControlState {
 
       // If mobile device, try to unlock screen orientation
       if (deviceType !== 'desktop') {
-        OrientationManager.unlockOrientation().catch(error => {
+        OrientationManager.unlockOrientation().catch((error) => {
           console.warn('Failed to unlock orientation during cleanup:', error);
         });
       }
-      
+
       isLandscapeStyleMode.value = false;
       console.log('Fullscreen exit style cleanup completed');
     } catch (error) {
@@ -520,13 +493,13 @@ export function usePlayerControlState(): PlayerControlState {
     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'
+        changeType: isCurrentlyFullscreen ? 'entered' : 'exited',
       });
 
       // Update state
@@ -563,7 +536,9 @@ export function usePlayerControlState(): PlayerControlState {
 
   const setupVideoEventListeners = (): void => {
     const video = DOMElementGetter.getVideoElement();
-    if (!video) return;
+    if (!video) {
+      return;
+    }
 
     const handleEnterPictureInPicture = () => {
       console.log('Entered picture-in-picture mode');
@@ -640,13 +615,12 @@ export function usePlayerControlState(): PlayerControlState {
     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);
-
   };
 
   /**
@@ -654,10 +628,10 @@ export function usePlayerControlState(): PlayerControlState {
    */
   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`);
@@ -666,16 +640,16 @@ export function usePlayerControlState(): PlayerControlState {
   // 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) {
+  watch(() => currentLive.value?.liveId, (liveId) => {
+    if (!liveId) {
       exitFullscreen();
       exitPictureInPicture();
       isPlaying.value = true;
@@ -683,7 +657,7 @@ export function usePlayerControlState(): PlayerControlState {
       isPictureInPicture.value = false;
       currentVolume.value = 1.0;
     }
-  })
+  });
 
   // Return interface implementation
   return {
@@ -694,7 +668,7 @@ export function usePlayerControlState(): PlayerControlState {
     isLandscapeStyleMode,
     isPictureInPicture,
     currentVolume,
-    
+
     // Resolution state
     resolutionList,
     currentResolution,
@@ -711,7 +685,7 @@ export function usePlayerControlState(): PlayerControlState {
     initializeResolution,
     setVolume,
     changeFillMode,
-    
+
     // Cleanup
     cleanup,
   };