feat(camera-control): implement fullscreen toggle functionality

Author: jie

packages/widgets/media/camera-control/index.test.ts

@@ -18,6 +18,12 @@ describe('media/camera-control widget', () => {
 
   afterEach(() => {
     document.body.innerHTML = '';
+    delete (HTMLElement.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+    delete (document as { exitFullscreen?: unknown }).exitFullscreen;
+    Object.defineProperty(document, 'fullscreenElement', {
+      configurable: true,
+      value: null,
+    });
     vi.unstubAllGlobals();
   });
 
@@ -67,6 +73,46 @@ describe('media/camera-control widget', () => {
     harness.destroy();
   });
 
+  it('toggles the camera shell fullscreen state from the toolbar button', async () => {
+    const { default: Main } = await import('./src/index');
+    const requestFullscreen = vi.fn();
+    const exitFullscreen = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, 'requestFullscreen', {
+      configurable: true,
+      value: requestFullscreen,
+    });
+    Object.defineProperty(document, 'exitFullscreen', {
+      configurable: true,
+      value: exitFullscreen,
+    });
+    Object.defineProperty(document, 'fullscreenElement', {
+      configurable: true,
+      value: null,
+    });
+
+    const harness = mountWidget(Main, { locale: 'en', mode: 'view' });
+    const fullscreenButton = () =>
+      Array.from(harness.element.querySelectorAll('button')).find(
+        (button) => button.title === 'Fullscreen' || button.title === 'Exit fullscreen',
+      );
+
+    fullscreenButton()?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(requestFullscreen).toHaveBeenCalledTimes(1);
+
+    const shell = harness.element.children.item(2);
+    Object.defineProperty(document, 'fullscreenElement', {
+      configurable: true,
+      value: shell,
+    });
+    document.dispatchEvent(new Event('fullscreenchange'));
+
+    expect(fullscreenButton()?.title).toBe('Exit fullscreen');
+    fullscreenButton()?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+
+    harness.destroy();
+  });
+
   it('emits optional advanced control payloads when enabled', async () => {
     const { default: Main } = await import('./src/index');
     const emit = vi.fn();

packages/widgets/media/camera-control/src/index.ts

@@ -301,6 +301,20 @@ export const Main = defineWidget({
       });
     };
 
+    const isShellFullscreen = () => document.fullscreenElement === shell;
+
+    const toggleFullscreen = () => {
+      if (isShellFullscreen()) {
+        void document.exitFullscreen?.();
+        return;
+      }
+      void shell.requestFullscreen?.();
+    };
+
+    const handleFullscreenChange = () => {
+      renderControls();
+    };
+
     const renderStatusBar = () => {
       const messages = getMessages(currentLocale).runtime;
       statusBar.innerHTML = '';
@@ -432,9 +446,10 @@ export const Main = defineWidget({
       }
 
       if (currentProps.showFullscreen) {
-        addAction(buttonTitle('fullscreen', 'Fullscreen'), buttonTitle('fullscreen', 'Fullscreen'), () => {
-          void shell.requestFullscreen?.();
-        });
+        const fullscreenLabel = isShellFullscreen()
+          ? buttonTitle('exitFullscreen', currentLocale?.startsWith('zh') ? '退出全屏' : 'Exit fullscreen')
+          : buttonTitle('fullscreen', 'Fullscreen');
+        addAction(fullscreenLabel, fullscreenLabel, toggleFullscreen);
       }
 
       if (currentProps.showPlaybackControls) {
@@ -559,6 +574,7 @@ export const Main = defineWidget({
     updateView();
 
     window.addEventListener('blur', sendStop);
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
 
     return {
       update: (newProps: Props, newCtx: WidgetOverlayContext) => {
@@ -572,6 +588,7 @@ export const Main = defineWidget({
       destroy: () => {
         sendStop();
         window.removeEventListener('blur', sendStop);
+        document.removeEventListener('fullscreenchange', handleFullscreenChange);
         if (attachVideoRaf) cancelAnimationFrame(attachVideoRaf);
         stopReadyPoll();
         element.innerHTML = '';

packages/widgets/media/camera-control/src/locales/en.json

@@ -24,6 +24,7 @@
     "preset": "Go to preset",
     "snapshot": "Snapshot",
     "fullscreen": "Fullscreen",
+    "exitFullscreen": "Exit fullscreen",
     "playbackRequest": "Request playback",
     "mute": "Mute",
     "unmute": "Unmute"