FullScreen

Basically the purpose of the <FullScreen/> component is to highlight any kind of component and works in a similar way a modal does. It provides important prompts in a user flow.
You can close it by clicking on the close button or with the "esc" key.

While included here as a standalone component, the most common use will be to display the the image preview or video preview withSubMenufiring the onSee event or onWatch event from<FileMosaic/> or <FileCard/> components, so for completeness, those components are included in the examples

Image preview

To display an image in full screen you can use the <FullScreen/> and <ImagePreview/> components.

<FileCard id={0} {...imageSample} onSee={handleSee} />
<FileMosaic id={0} {...imageSample} onSee={handleSee} />
<FullScreen
  open={imgSrc !== undefined}
  onClose={() => setImgSrc(undefined)}
>
   <ImagePreview src={imgSrc} />
</FullScreen>
 
const imageSample = {
    id: "fileId-1",
    size: 28 * 1024 * 1024,
    type: "image/gif",
    name: "Iron man in stark tower.gif",
    imageUrl:
       "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
};

Video preview

To display a video in full screen you can use the <FullScreen/> and <VideoPreview/> components.

<FileCard id={0} {...videoSample} onWatch={handleWatch} />
<FileMosaic id={0} {...videoSample} onWatch={handleWatch} />
<FullScreen
  open={videoSrc !== undefined}
  onClose={() => setVideoSrc(undefined)}
>
   <VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>
 
const videoSample = {
    id: "fileId-1",
    size: 28 * 1024 * 1024,
    type: "video/mp4",
    name: "Thor arrives wakanda.mp4",
    videoUrl: ThorArrivesWakandaEN,
};

API

See the documentation below for a complete reference to all of the props available to the components mentioned here.