feat(fullscreen): add enterFullscreen and exitFullscreen callbacks

docs/plugins/fullscreen.md

@@ -47,6 +47,22 @@ The plugin adds the following `Lightbox` properties.
         </ul>
       </td>
     </tr>
+    <tr>
+      <td>on</td>
+      <td>
+        &#123;<br />
+        &nbsp;&nbsp;enterFullscreen?: () => void;<br />
+        &nbsp;&nbsp;exitFullscreen?: () => void;<br />
+        &#125;
+      </td>
+      <td>
+        <p>Lifecycle callbacks.</p>
+        <ul>
+          <li>`enterFullscreen` - a callback called when the lightbox enters fullscreen mode</li>
+          <li>`exitFullscreen` - a callback called when the lightbox exits fullscreen mode</li>
+        </ul>
+      </td>
+    </tr>
   </tbody>
 </table>
 

src/plugins/fullscreen/FullscreenContext.tsx

@@ -17,12 +17,13 @@ export const FullscreenContext = React.createContext<FullscreenRef | null>(null)
 
 export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
 
-export function FullscreenContextProvider({ fullscreen: fullscreenProps, children }: ComponentProps) {
+export function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }: ComponentProps) {
   const { auto, ref } = resolveFullscreenProps(fullscreenProps);
 
   const containerRef = React.useRef<HTMLDivElement | null>(null);
-  const [fullscreen, setFullscreen] = React.useState(false);
   const [disabled, setDisabled] = React.useState<boolean>();
+  const [fullscreen, setFullscreen] = React.useState(false);
+  const wasFullscreen = React.useRef<boolean>(false);
 
   useLayoutEffect(() => {
     setDisabled(
@@ -82,17 +83,13 @@ export function FullscreenContextProvider({ fullscreen: fullscreenProps, childre
     }
   }, [getFullscreenElement]);
 
-  const fullscreenChangeListener = React.useCallback(() => {
-    if (getFullscreenElement() === containerRef.current) {
-      setFullscreen(true);
-    } else {
-      setFullscreen(false);
-    }
-  }, [getFullscreenElement]);
-
   React.useEffect(() => {
     const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
 
+    const fullscreenChangeListener = () => {
+      setFullscreen(getFullscreenElement() === containerRef.current);
+    };
+
     events.forEach((event) => {
       document.addEventListener(event, fullscreenChangeListener);
     });
@@ -102,7 +99,21 @@ export function FullscreenContextProvider({ fullscreen: fullscreenProps, childre
         document.removeEventListener(event, fullscreenChangeListener);
       });
     };
-  }, [fullscreenChangeListener]);
+  }, [getFullscreenElement]);
+
+  const onEnterFullscreen = useEventCallback(() => on.enterFullscreen?.());
+
+  const onExitFullscreen = useEventCallback(() => on.exitFullscreen?.());
+
+  React.useEffect(() => {
+    if (fullscreen) {
+      wasFullscreen.current = true;
+    }
+
+    if (wasFullscreen.current) {
+      (fullscreen ? onEnterFullscreen : onExitFullscreen)();
+    }
+  }, [fullscreen, onEnterFullscreen, onExitFullscreen]);
 
   const handleAutoFullscreen = useEventCallback(() => (auto ? enter : null)?.());
 

src/plugins/fullscreen/index.ts

@@ -24,6 +24,14 @@ declare module "../../types.js" {
     iconExitFullscreen?: RenderFunction;
   }
 
+  // noinspection JSUnusedGlobalSymbols
+  interface Callbacks {
+    /** a callback called when the lightbox enters fullscreen mode */
+    enterFullscreen?: Callback;
+    /** a callback called when the lightbox exits fullscreen mode */
+    exitFullscreen?: Callback;
+  }
+
   // noinspection JSUnusedGlobalSymbols
   interface ToolbarButtonKeys {
     [PLUGIN_FULLSCREEN]: null;