fix: make player fullscreen mode discoverable

cypress/e2e/player/autoLogin.cy.ts

@@ -49,7 +49,6 @@ describe('Auto Login on pseudonimized item', () => {
       const search = new URLSearchParams({
         fullscreen: 'true',
       });
-      const keepSearchString = search.toString();
       search.set('username', username);
       const routeArgs = {
         rootId: pseudonimizedItem.id,
@@ -63,8 +62,11 @@ describe('Auto Login on pseudonimized item', () => {
       // checks that the user was correctly redirected to the item page
       const { searchParams: _, ...pathArgs } = routeArgs;
       cy.location('pathname').should('equal', buildContentPagePath(pathArgs));
-      // keep the search params
-      cy.location('search').should('equal', `?${keepSearchString}`);
+      cy.location('search').should((searchString) => {
+        const searchParams = new URLSearchParams(searchString);
+        expect(searchParams.get('fullscreen')).to.equal('false');
+        expect(searchParams.has('username')).to.equal(false);
+      });
     }),
   );
   it('Missing username triggers error', () => {

cypress/e2e/player/fullscreen.cy.ts

@@ -0,0 +1,130 @@
+import { PackedFolderItemFactory } from '@graasp/sdk';
+
+import { ITEM_FULLSCREEN_BUTTON_ID } from '../../../src/config/selectors';
+import { buildContentPagePath } from './utils';
+
+type FullscreenState = {
+  element: Element | null;
+};
+
+const visitWithFullscreenApi = (path: string): FullscreenState => {
+  const fullscreenState: FullscreenState = { element: null };
+
+  cy.visit(path, {
+    onBeforeLoad: (win) => {
+      Object.defineProperty(win.document, 'fullscreenElement', {
+        configurable: true,
+        get: () => fullscreenState.element,
+      });
+      Object.defineProperty(win.document.documentElement, 'requestFullscreen', {
+        configurable: true,
+        value: cy.stub().callsFake(() => {
+          fullscreenState.element = win.document.documentElement;
+          win.document.dispatchEvent(new win.Event('fullscreenchange'));
+          return Promise.resolve();
+        }),
+      });
+      Object.defineProperty(win.document, 'exitFullscreen', {
+        configurable: true,
+        value: cy.stub().callsFake(() => {
+          fullscreenState.element = null;
+          win.document.dispatchEvent(new win.Event('fullscreenchange'));
+          return Promise.resolve();
+        }),
+      });
+    },
+  });
+
+  return fullscreenState;
+};
+
+const expectSearchParams = (expected: Record<string, string>): void => {
+  cy.location('search').should((search) => {
+    const searchParams = new URLSearchParams(search);
+
+    Object.entries(expected).forEach(([key, value]) => {
+      expect(searchParams.get(key)).to.equal(value);
+    });
+  });
+};
+
+describe('Fullscreen', () => {
+  const item = PackedFolderItemFactory({ settings: {} });
+
+  beforeEach(() => {
+    cy.setUpApi({ items: [item] });
+  });
+
+  it('Toggles fullscreen from the player and preserves search parameters', () => {
+    visitWithFullscreenApi(
+      buildContentPagePath({
+        rootId: item.id,
+        itemId: item.id,
+        searchParams: 'shuffle=true',
+      }),
+    );
+
+    cy.get(`#${ITEM_FULLSCREEN_BUTTON_ID}`).should('be.visible').click();
+
+    expectSearchParams({ fullscreen: 'true', shuffle: 'true' });
+    cy.window()
+      .its('document.documentElement.requestFullscreen')
+      .should('have.been.calledOnce');
+
+    cy.get(`#${ITEM_FULLSCREEN_BUTTON_ID}`).click();
+
+    expectSearchParams({ fullscreen: 'false', shuffle: 'true' });
+    cy.window().its('document.exitFullscreen').should('have.been.calledOnce');
+  });
+
+  it('Returns to the normal player route after an external fullscreen exit', () => {
+    const fullscreenState = visitWithFullscreenApi(
+      buildContentPagePath({ rootId: item.id, itemId: item.id }),
+    );
+
+    cy.get(`#${ITEM_FULLSCREEN_BUTTON_ID}`).click();
+    expectSearchParams({ fullscreen: 'true' });
+
+    cy.window().then((win) => {
+      fullscreenState.element = null;
+      win.document.dispatchEvent(new win.Event('fullscreenchange'));
+    });
+
+    expectSearchParams({ fullscreen: 'false' });
+  });
+
+  it('Uses resize as a fallback when fullscreen exits externally', () => {
+    const fullscreenState = visitWithFullscreenApi(
+      buildContentPagePath({ rootId: item.id, itemId: item.id }),
+    );
+
+    cy.get(`#${ITEM_FULLSCREEN_BUTTON_ID}`).click();
+    expectSearchParams({ fullscreen: 'true' });
+
+    cy.window().then((win) => {
+      fullscreenState.element = null;
+      win.dispatchEvent(new win.Event('resize'));
+    });
+
+    expectSearchParams({ fullscreen: 'false' });
+  });
+
+  it('Corrects a fullscreen route when the browser is not fullscreen', () => {
+    cy.visit(
+      buildContentPagePath({
+        rootId: item.id,
+        itemId: item.id,
+        searchParams: 'fullscreen=true',
+      }),
+    );
+
+    expectSearchParams({ fullscreen: 'false' });
+  });
+
+  it('Hides the fullscreen button on mobile', () => {
+    cy.viewport('iphone-x');
+    cy.visit(buildContentPagePath({ rootId: item.id, itemId: item.id }));
+
+    cy.get(`#${ITEM_FULLSCREEN_BUTTON_ID}`).should('not.exist');
+  });
+});

cypress/e2e/player/shortcut.cy.ts

@@ -132,7 +132,7 @@ describe('Shortcuts', () => {
       buildContentPagePath({
         rootId: parentItem.id,
         itemId: parentItem.id,
-        searchParams: 'fullscreen=true',
+        searchParams: 'shuffle=true',
       }),
     );
 
@@ -143,11 +143,11 @@ describe('Shortcuts', () => {
       .and('contain', parentItem.id)
       .and('contain', 'fromName')
       .and('contain', 'parent+item')
-      .and('contain', 'fullscreen=true');
+      .and('contain', 'shuffle=true');
 
     // go back to origin
     cy.get(`#${BACK_TO_SHORTCUT_ID}`).click();
-    cy.url().should('contain', parentItem.id).and('contain', 'fullscreen=true');
+    cy.url().should('contain', parentItem.id).and('contain', 'shuffle=true');
   });
 
   it('No from name does not show button', () => {

package.json

@@ -63,7 +63,6 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "19.1.1",
-    "react-fullscreen-crossbrowser": "1.1.3",
     "react-helmet-async": "2.0.5",
     "react-hook-form": "7.54.2",
     "react-i18next": "16.0.0",

src/modules/player/contexts/LayoutContext.tsx

@@ -16,8 +16,6 @@ type LayoutContextType = {
   setIsPinnedOpen: Dispatch<SetStateAction<boolean>>;
   isChatboxOpen: boolean;
   setIsChatboxOpen: Dispatch<SetStateAction<boolean>>;
-  isFullscreen: boolean;
-  setIsFullscreen: Dispatch<SetStateAction<boolean>>;
   toggleChatbox: () => void;
   togglePinned: () => void;
 };
@@ -31,10 +29,6 @@ const LayoutContext = createContext<LayoutContextType>({
   setIsChatboxOpen: () => {
     throw new Error('No context');
   },
-  isFullscreen: false,
-  setIsFullscreen: () => {
-    throw new Error('No context');
-  },
   toggleChatbox: () => {
     throw new Error('No context');
   },
@@ -52,7 +46,6 @@ export const LayoutContextProvider = ({ children }: Props): JSX.Element => {
 
   const [isPinnedOpen, setIsPinnedOpen] = useState<boolean>(!isMobile);
   const [isChatboxOpen, setIsChatboxOpen] = useState<boolean>(false);
-  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
 
   useEffect(() => {
     // TODO: fix this issue
@@ -66,8 +59,6 @@ export const LayoutContextProvider = ({ children }: Props): JSX.Element => {
       setIsPinnedOpen,
       isChatboxOpen,
       setIsChatboxOpen,
-      isFullscreen,
-      setIsFullscreen,
       toggleChatbox: () => {
         setIsChatboxOpen((prev) => !prev);
         if (isPinnedOpen) {
@@ -83,14 +74,7 @@ export const LayoutContextProvider = ({ children }: Props): JSX.Element => {
         }
       },
     }),
-    [
-      isPinnedOpen,
-      setIsPinnedOpen,
-      isChatboxOpen,
-      setIsChatboxOpen,
-      isFullscreen,
-      setIsFullscreen,
-    ],
+    [isPinnedOpen, setIsPinnedOpen, isChatboxOpen, setIsChatboxOpen],
   );
   return (
     <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>