Fix fullscreen fallback and iOS detection

Author: pallyoung

packages/web/src/features/topbar/index.test.tsx

@@ -156,7 +156,7 @@ describe("TopBar", () => {
     expect(settingsButton.nextElementSibling).toBe(fullscreenButton);
   });
 
-  it("hides the fullscreen toggle when the controller reports unsupported", () => {
+  it("keeps the fullscreen toggle visible when the controller reports unsupported", () => {
     const store = createStore();
     store.set(localeAtom, "en");
     store.set(workspacesLoadStateAtom, "ready");
@@ -175,6 +175,6 @@ describe("TopBar", () => {
       </Provider>
     );
 
-    expect(screen.queryByRole("button", { name: "Enter Fullscreen" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Enter Fullscreen" })).toBeInTheDocument();
   });
 });

packages/web/src/features/workspace/actions/use-workspace-fullscreen.test.tsx

@@ -1,6 +1,9 @@
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
 import { useRef } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { localeAtom } from "../../../atoms/app-ui";
+import { toastsAtom } from "../../notifications/atoms";
 import { useWorkspaceFullscreen } from "./use-workspace-fullscreen";
 
 function installFullscreenApi() {
@@ -67,6 +70,36 @@ function clearFullscreenApi() {
     configurable: true,
     value: undefined,
   });
+
+  Object.defineProperty(document, "webkitFullscreenEnabled", {
+    configurable: true,
+    value: undefined,
+  });
+
+  Object.defineProperty(document, "webkitCurrentFullScreenElement", {
+    configurable: true,
+    get: () => undefined,
+  });
+
+  Object.defineProperty(document, "webkitExitFullscreen", {
+    configurable: true,
+    value: undefined,
+  });
+
+  Object.defineProperty(document, "webkitCancelFullScreen", {
+    configurable: true,
+    value: undefined,
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "webkitRequestFullscreen", {
+    configurable: true,
+    value: undefined,
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "webkitRequestFullScreen", {
+    configurable: true,
+    value: undefined,
+  });
 }
 
 function HookHarness() {
@@ -106,6 +139,19 @@ function HookHarness() {
   );
 }
 
+function renderHarness() {
+  const store = createStore();
+  store.set(localeAtom, "en");
+
+  render(
+    <Provider store={store}>
+      <HookHarness />
+    </Provider>
+  );
+
+  return store;
+}
+
 describe("useWorkspaceFullscreen", () => {
   afterEach(() => {
     clearFullscreenApi();
@@ -115,7 +161,7 @@ describe("useWorkspaceFullscreen", () => {
   it("reports unsupported when the browser fullscreen api is unavailable", async () => {
     clearFullscreenApi();
 
-    render(<HookHarness />);
+    renderHarness();
 
     await waitFor(() => {
       expect(screen.getByTestId("supported")).toHaveTextContent("false");
@@ -126,7 +172,7 @@ describe("useWorkspaceFullscreen", () => {
   it("enters and exits fullscreen against the target element", async () => {
     const api = installFullscreenApi();
 
-    render(<HookHarness />);
+    renderHarness();
 
     await waitFor(() => {
       expect(screen.getByTestId("supported")).toHaveTextContent("true");
@@ -150,7 +196,7 @@ describe("useWorkspaceFullscreen", () => {
   it("tracks fullscreenchange even when the browser exits fullscreen outside the button", async () => {
     const api = installFullscreenApi();
 
-    render(<HookHarness />);
+    renderHarness();
 
     const target = await screen.findByTestId("fullscreen-target");
 
@@ -175,7 +221,7 @@ describe("useWorkspaceFullscreen", () => {
       .mockRejectedValue(requestError);
     const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
-    render(<HookHarness />);
+    renderHarness();
 
     fireEvent.click(screen.getByRole("button", { name: "toggle" }));
 
@@ -186,4 +232,79 @@ describe("useWorkspaceFullscreen", () => {
 
     expect(screen.getByTestId("fullscreen")).toHaveTextContent("false");
   });
+
+  it("shows a friendly toast when fullscreen is unavailable instead of throwing", async () => {
+    clearFullscreenApi();
+    const store = renderHarness();
+
+    fireEvent.click(screen.getByRole("button", { name: "toggle" }));
+
+    await waitFor(() => {
+      expect(store.get(toastsAtom)).toHaveLength(1);
+    });
+
+    expect(store.get(toastsAtom)[0]).toMatchObject({
+      kind: "info",
+      title: "Fullscreen unavailable",
+      body: "Fullscreen is not available in this browser.",
+    });
+  });
+
+  it("treats webkit fullscreen support as supported even when fullscreenEnabled is false", async () => {
+    let webkitFullscreenElement: Element | null = null;
+    const webkitRequestFullscreen = vi.fn().mockImplementation(function (this: HTMLElement) {
+      webkitFullscreenElement = this;
+      document.dispatchEvent(new Event("webkitfullscreenchange"));
+      return Promise.resolve();
+    });
+    const webkitExitFullscreen = vi.fn().mockImplementation(async () => {
+      webkitFullscreenElement = null;
+      document.dispatchEvent(new Event("webkitfullscreenchange"));
+    });
+
+    Object.defineProperty(document, "fullscreenEnabled", {
+      configurable: true,
+      value: false,
+    });
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => null,
+    });
+    Object.defineProperty(document, "exitFullscreen", {
+      configurable: true,
+      value: undefined,
+    });
+    Object.defineProperty(document, "webkitCurrentFullScreenElement", {
+      configurable: true,
+      get: () => webkitFullscreenElement,
+    });
+    Object.defineProperty(document, "webkitExitFullscreen", {
+      configurable: true,
+      value: webkitExitFullscreen,
+    });
+    Object.defineProperty(HTMLElement.prototype, "webkitRequestFullscreen", {
+      configurable: true,
+      value: webkitRequestFullscreen,
+    });
+
+    renderHarness();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("supported")).toHaveTextContent("true");
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "enter" }));
+
+    await waitFor(() => {
+      expect(webkitRequestFullscreen).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId("fullscreen")).toHaveTextContent("true");
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "exit" }));
+
+    await waitFor(() => {
+      expect(webkitExitFullscreen).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId("fullscreen")).toHaveTextContent("false");
+    });
+  });
 });

packages/web/src/features/workspace/actions/use-workspace-fullscreen.ts

@@ -1,4 +1,7 @@
+import { useSetAtom } from "jotai";
 import { type RefObject, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "../../../lib/i18n";
+import { pushToastAtom } from "../../notifications/atoms";
 
 export interface WorkspaceFullscreenController {
   supported: boolean;
@@ -8,65 +11,153 @@ export interface WorkspaceFullscreenController {
   toggleFullscreen: () => Promise<void>;
 }
 
-function canEnterFullscreen(
-  target: HTMLElement | null
-): target is HTMLElement & { requestFullscreen: NonNullable<HTMLElement["requestFullscreen"]> } {
-  return Boolean(
-    document.fullscreenEnabled &&
-      target &&
-      typeof target.requestFullscreen === "function" &&
-      typeof document.exitFullscreen === "function"
-  );
+type FullscreenMethod = () => Promise<void> | void;
+
+type FullscreenDocument = Document & {
+  webkitCurrentFullScreenElement?: Element | null;
+  webkitExitFullscreen?: FullscreenMethod;
+  webkitCancelFullScreen?: FullscreenMethod;
+};
+
+type FullscreenTarget = HTMLElement & {
+  requestFullscreen?: FullscreenMethod;
+  webkitRequestFullscreen?: FullscreenMethod;
+  webkitRequestFullScreen?: FullscreenMethod;
+};
+
+function getFullscreenElement(doc: Document): Element | null {
+  const fullscreenDocument = doc as FullscreenDocument;
+  return doc.fullscreenElement ?? fullscreenDocument.webkitCurrentFullScreenElement ?? null;
+}
+
+function getRequestFullscreenMethod(target: HTMLElement | null): FullscreenMethod | null {
+  if (!target) {
+    return null;
+  }
+
+  const fullscreenTarget = target as FullscreenTarget;
+
+  if (typeof fullscreenTarget.requestFullscreen === "function") {
+    return fullscreenTarget.requestFullscreen.bind(fullscreenTarget);
+  }
+
+  if (typeof fullscreenTarget.webkitRequestFullscreen === "function") {
+    return fullscreenTarget.webkitRequestFullscreen.bind(fullscreenTarget);
+  }
+
+  if (typeof fullscreenTarget.webkitRequestFullScreen === "function") {
+    return fullscreenTarget.webkitRequestFullScreen.bind(fullscreenTarget);
+  }
+
+  return null;
+}
+
+function getExitFullscreenMethod(doc: Document): FullscreenMethod | null {
+  const fullscreenDocument = doc as FullscreenDocument;
+
+  if (typeof doc.exitFullscreen === "function") {
+    return doc.exitFullscreen.bind(doc);
+  }
+
+  if (typeof fullscreenDocument.webkitExitFullscreen === "function") {
+    return fullscreenDocument.webkitExitFullscreen.bind(doc);
+  }
+
+  if (typeof fullscreenDocument.webkitCancelFullScreen === "function") {
+    return fullscreenDocument.webkitCancelFullScreen.bind(doc);
+  }
+
+  return null;
+}
+
+function canUseFullscreen(target: HTMLElement | null): boolean {
+  return Boolean(getRequestFullscreenMethod(target) && getExitFullscreenMethod(document));
+}
+
+function getErrorMessage(error: unknown): string | null {
+  return error instanceof Error && error.message.trim().length > 0 ? error.message : null;
 }
 
 export function useWorkspaceFullscreen(
   targetRef: RefObject<HTMLElement | null>
 ): WorkspaceFullscreenController {
+  const t = useTranslation();
+  const pushToast = useSetAtom(pushToastAtom);
   const [supported, setSupported] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
+  const showUnsupportedToast = useCallback(() => {
+    pushToast({
+      kind: "info",
+      title: t("workspace.fullscreen.unsupported_title"),
+      body: t("workspace.fullscreen.unsupported_body"),
+    });
+  }, [pushToast, t]);
+
   useEffect(() => {
     const syncState = () => {
       const target = targetRef.current;
-      setSupported(canEnterFullscreen(target));
-      setIsFullscreen(Boolean(target && document.fullscreenElement === target));
+      setSupported(canUseFullscreen(target));
+      setIsFullscreen(Boolean(target && getFullscreenElement(document) === target));
     };
 
     syncState();
     document.addEventListener("fullscreenchange", syncState);
+    document.addEventListener("webkitfullscreenchange", syncState as EventListener);
 
     return () => {
       document.removeEventListener("fullscreenchange", syncState);
+      document.removeEventListener("webkitfullscreenchange", syncState as EventListener);
     };
   }, [targetRef]);
 
   const enterFullscreen = useCallback(async () => {
     const target = targetRef.current;
-    if (!canEnterFullscreen(target)) {
+    const requestFullscreen = getRequestFullscreenMethod(target);
+
+    if (!requestFullscreen || !getExitFullscreenMethod(document)) {
+      showUnsupportedToast();
       return;
     }
 
     try {
-      await target.requestFullscreen();
+      await Promise.resolve(requestFullscreen());
     } catch (error) {
       console.warn("Failed to enter fullscreen", error);
+      pushToast({
+        kind: "warning",
+        title: t("workspace.fullscreen.enter_failed_title"),
+        body: getErrorMessage(error) ?? t("workspace.fullscreen.enter_failed_body"),
+      });
     }
-  }, [targetRef]);
+  }, [pushToast, showUnsupportedToast, t, targetRef]);
 
   const exitFullscreen = useCallback(async () => {
-    if (typeof document.exitFullscreen !== "function" || !document.fullscreenElement) {
+    const exitFullscreenMethod = getExitFullscreenMethod(document);
+
+    if (!getFullscreenElement(document)) {
+      return;
+    }
+
+    if (!exitFullscreenMethod) {
+      showUnsupportedToast();
       return;
     }
 
     try {
-      await document.exitFullscreen();
+      await Promise.resolve(exitFullscreenMethod());
     } catch (error) {
       console.warn("Failed to exit fullscreen", error);
+      pushToast({
+        kind: "warning",
+        title: t("workspace.fullscreen.exit_failed_title"),
+        body: getErrorMessage(error) ?? t("workspace.fullscreen.exit_failed_body"),
+      });
     }
-  }, []);
+  }, [pushToast, showUnsupportedToast, t]);
 
   const toggleFullscreen = useCallback(async () => {
-    if (targetRef.current && document.fullscreenElement === targetRef.current) {
+    if (targetRef.current && getFullscreenElement(document) === targetRef.current) {
       await exitFullscreen();
       return;
     }