How to monitor whether it is in full-screen mode？

[openapphub]

On a whim, certain components can be displayed when in full-screen mode, and they can be hidden when not in full-screen. Is there a way for the frontend API to listen for this?

[dosubot[bot]]

Trilium doesn't provide a built-in frontend API or event for monitoring full-screen mode changes. However, you can use the browser's Fullscreen API to listen for changes. For example, you can add an event listener for fullscreen changes and update your component state accordingly:

useEffect(() => {
  function handleFullscreenChange() {
    setIsFullscreen(!!document.fullscreenElement);
  }
  document.addEventListener('fullscreenchange', handleFullscreenChange);
  return () => {
    document.removeEventListener('fullscreenchange', handleFullscreenChange);
  };
}, []);

You can then conditionally render components based on the isFullscreen state. In Electron, you may need to use Electron's window APIs to detect full-screen status. Trilium's frontend currently only toggles full-screen mode via commands and does not track or broadcast full-screen state changes for other components to listen to
(source).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[openapphub]

When testing in the console, the changes are not detected. Should it be written in the script?

function handleFullscreenChange() {
    console.log('handleFullscreenChange')
  }
  document.addEventListener('fullscreenchange', handleFullscreenChange);

[openapphub]

@dosu

[dosubot[bot]]

The fullscreenchange event is a standard browser event and should fire when the document enters or exits full-screen mode. If you add the event listener in the console, it only persists for the current page session—if the page reloads or the app re-renders, your listener is lost. For reliable detection, place your event listener in a persistent script or inside your component code (for example, in a React useEffect). Trilium doesn't add any restrictions or custom handling, so standard browser events work as expected if implemented in your codebase or extension script
(source).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}