useDisplayMode

The useDisplayMode hook allows you to read and control the display mode of your view. Views can be displayed in three modes: inline, fullscreen, or pip (picture-in-picture).

Basic usage

import { useDisplayMode } from "@usefractal/frac/web";

function ExpandableView() {
  const [displayMode, setDisplayMode] = useDisplayMode();

  return (
    <div>
      <p>Current mode: {displayMode}</p>
      <button onClick={() => setDisplayMode("fullscreen")}>
        Go Fullscreen
      </button>
      <button onClick={() => setDisplayMode("inline")}>
        Back to Inline
      </button>
    </div>
  );
}

Returns

The hook returns a tuple with two elements:

`displayMode`

displayMode: "inline" | "fullscreen" | "pip"

The current display mode of the view:

inline - The view is displayed inline within the chat
fullscreen - The view takes up the full screen
pip - The view is displayed in picture-in-picture mode (on mobile, this is coerced to fullscreen)

`setDisplayMode`

setDisplayMode: (mode: DisplayMode) => void

A function to request a new display mode. Note that the host may reject the request.

Examples

Fullscreen Media Player

import { useDisplayMode } from "@usefractal/frac/web";

function MediaPlayer() {
  const [displayMode, setDisplayMode] = useDisplayMode();
  const isFullscreen = displayMode === "fullscreen";

  return (
    <div className={isFullscreen ? "fullscreen-player" : "inline-player"}>
      <video src="/media/video.mp4" controls />
      <button onClick={() => setDisplayMode(isFullscreen ? "inline" : "fullscreen")}>
        {isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
      </button>
    </div>
  );
}

Adaptive Layout

import { useDisplayMode } from "@usefractal/frac/web";

function AdaptiveView() {
  const [displayMode] = useDisplayMode();

  if (displayMode === "fullscreen") {
    return (
      <div className="detailed-view">
        <h1>Full Details</h1>
        {/* Show comprehensive content */}
      </div>
    );
  }

  return (
    <div className="compact-view">
      <h3>Summary</h3>
      {/* Show condensed content */}
    </div>
  );
}

Picture-in-Picture Mode

import { useDisplayMode, useUser } from "@usefractal/frac/web";

function FloatingView() {
  const [displayMode, setDisplayMode] = useDisplayMode();
  const { userAgent } = useUser();
  const isMobile = userAgent.device.type === "mobile";

  return (
    <div>
      <p>Mode: {displayMode}</p>
      {!isMobile && (
        <button onClick={() => setDisplayMode("pip")}>
          Float (PiP)
        </button>
      )}
      {isMobile && (
        <p>PiP mode is not available on mobile devices</p>
      )}
    </div>
  );
}