diff --git a/README.md b/README.md
index cc81b6786033f6ffedfebd0f6f7af75c5f2006d7..043281bb48094f1bb2b376d93afba160187b9dd7 100644
--- a/README.md
+++ b/README.md
@@ -22,9 +22,8 @@
</div>
**Files UI** is a complete library for handling files in the UI. You can validate and upload them.
-
<a href="https://github.com/dropzone-ui/react#readme">
-<img align="center" width="100%" src="https://user-images.githubusercontent.com/43678736/139614260-602b512c-cf78-48fe-ae57-1057e7ec8135.gif" alt="dropone-ui-preview">
+<img align="center" width="100%" src="https://user-images.githubusercontent.com/43678736/139614260-602b512c-cf78-48fe-ae57-1057e7ec8135.gif" alt="files-ui-preview">
</a>
## Requirement
@@ -50,7 +49,15 @@ yarn add @files-ui/react
This project is licensed under the terms of the
[MIT license](/LICENSE).
-<p align="center"><a href="https://github.com/dropzone-ui/react-dropzone#"><img src="http://randojs.com/images/barsSmallTransparentBackground.gif" alt="Animated footer bars" width="100%"/></a></p>
+<p align="center">
+<a href="https://github.com/files-ui/files-ui-react#">
+<img src="http://randojs.com/images/barsSmallTransparentBackground.gif" alt="Animated footer bars" width="100%"/>
+</a>
+</p>
<br/>
-<p align="center"><a href="https://github.com/dropzone-ui/react-dropzone#readme"><img src="http://randojs.com/images/backToTopButtonTransparentBackground.png" alt="Back to top" height="28"/></a></p>
+<p align="center">
+<a href="https://github.com/files-ui/files-ui-react#readme">
+<img src="http://randojs.com/images/backToTopButtonTransparentBackground.png" alt="Back to top" height="28"/>
+</a>
+</p>
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 83fc511765aa8e3ea99b1f8671bef0c12375d448..4ee5aa2db96af1d6d98e76b9268cf23eb69c1b06 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -59,6 +59,12 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
index: 25,
onClick: () => navigate("/components/avatar"),
},
+ {
+ label: "FullScreen (Img & Vid)",
+ index: 26,
+ onClick: () => navigate("/components/fullscreen"),
+ },
+
],
},
{
diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index c74d9a39444f26e7dc12f921ee806808d28afce2..7834c69b7ee8829618c73372fdbb7443caa23445 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -4,14 +4,14 @@ import { FileMosaic, ExtFile, FileMosaicProps } from "../../../files-ui";
import DescParagraph from "../../demo-components/desc-paragraph/DescParagraph";
import { FullScreen, ImagePreview, VideoPreview } from "../../../files-ui";
import {
- NarutoAndSasukeVsMomoshikiEN,
- NarutoAndSasukeVsMomoshikiES,
- ThorArrivesWakandaEN,
+ // NarutoAndSasukeVsMomoshikiEN,
+ // NarutoAndSasukeVsMomoshikiES,
+ // ThorArrivesWakandaEN,
ThorArrivesWakandaES,
} from "../../../data/videoLinks";
-const VIDEO_URL =
- "https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
+/* const VIDEO_URL =
+ "https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140"; */
interface FileMosaicImageVideoPreviewsProps {
darkMode?: boolean;
}
@@ -64,7 +64,7 @@ const FileMosaicImageVideoPreviews: React.FC<
console.error(error);
}
};
- const handleDownloadXHR = async (
+/* const handleDownloadXHR = async (
fileId: FileMosaicProps["id"],
downloadUrl?: string
) => {
@@ -82,7 +82,7 @@ const FileMosaicImageVideoPreviews: React.FC<
request.send();
request.onreadystatechange = function () {
- if (this.readyState == 4 && this.status == 200) {
+ if (this.readyState === 4 && this.status === 200) {
const imageURL = window.URL.createObjectURL(this.response);
const anchor = document.createElement("a");
@@ -107,12 +107,12 @@ const FileMosaicImageVideoPreviews: React.FC<
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(imageURL);
- /* const resJson = await response.json();
- console.log("Download", resJson); */
+ // const resJson = await response.json();
+ //console.log("Download", resJson);
} catch (error) {
console.log("Download error", error);
}
- };
+ }; */
return (
<div style={{ width: "100%" }}>
<h3>Or check the previews!</h3>
@@ -186,7 +186,7 @@ const files: ExtFile[] = [
imageUrl:
"https://e0.pxfuel.com/wallpapers/626/685/desktop-wallpaper-avengers-infinity-war-thor-arrives-in-wakanda-bring-me-thanos.jpg",
downloadUrl: ThorArrivesWakandaES,
- extraData: { videoUrl: ThorArrivesWakandaES },
+ videoUrl: ThorArrivesWakandaES ,
},
{
id: 3,
diff --git a/src/components/demo-components/fullsceen/CodeDemoFullScreenImg.tsx b/src/components/demo-components/fullsceen/CodeDemoFullScreenImg.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..190f11db5e904b34aee6c00a06b02b281bef1439
--- /dev/null
+++ b/src/components/demo-components/fullsceen/CodeDemoFullScreenImg.tsx
@@ -0,0 +1,113 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoFullScrrenImg = () => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeDemoFullScrrenImg;
+
+const splittedCodeJS = `<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",
+};`;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic, FullScreen, ImagePreview } from "@files-ui/react";
+
+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",
+};
+
+export default function App() {
+ const [imgSrc, setImgSrc] = React.useState(undefined);
+ const handleSee = (imageSource) => {
+ setImgSrc(imageSource);
+ };
+ return (
+ <>
+ <FileCard id={0} {...imageSample} onSee={handleSee} />
+ <FileMosaic id={0} {...imageSample} onSee={handleSee} />
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
+ >
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ </>
+ );
+};`;
+
+const splittedCodeTS = `<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: ExtFile = {
+ 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",
+};`;
+const completeCodeTS = `import * as React from "react";
+import { ExtFile, FileCard, FileMosaic, FullScreen, ImagePreview } from "@files-ui/react";
+
+const imageSample: ExtFile = {
+ 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",
+};
+
+export default function App() {
+ const [imgSrc, setImgSrc] = React.useState<string | undefined>(undefined);
+ const handleSee = (imageSource: string | undefined) => {
+ setImgSrc(imageSource);
+ };
+ return (
+ <>
+ <FileCard id={0} {...imageSample} onSee={handleSee} />
+ <FileMosaic id={0} {...imageSample} onSee={handleSee} />
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
+ >
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ </>
+ );
+};`;
diff --git a/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx b/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4ce2fe463df90586a2482864cf33303ad15e1b22
--- /dev/null
+++ b/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
@@ -0,0 +1,112 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoFullScrrenVid = () => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeDemoFullScrrenVid;
+
+const splittedCodeJS = `<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: "Thos arrives wakanda.mp4",
+ videoUrl: ThorArrivesWakandaEN,
+};`;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic, FullScreen, ImagePreview } from "@files-ui/react";
+
+const videoSample = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "Thos arrives wakanda.mp4",
+ videoUrl: ThorArrivesWakandaEN,
+};
+
+export default function App() {
+ const [videoSrc, setVideoSrc] = React.useState(undefined);
+ const handleWatch = (videoSource) => {
+ setVideoSrc(videoSource);
+ };
+ return (
+ <>
+ <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 splittedCodeTS = `<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: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "Thos arrives wakanda.mp4",
+ videoUrl: ThorArrivesWakandaEN,
+};`;
+
+const completeCodeTS = `import * as React from "react";
+import { ExtFile, FileCard, FileMosaic, FullScreen, ImagePreview } from "@files-ui/react";
+
+const videoSample: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "Thos arrives wakanda.mp4",
+ videoUrl: ThorArrivesWakandaEN,
+};
+
+export default function App() {
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const handleWatch = (videoSource: File | string | undefined) => {
+ setVideoSrc(videoSource);
+ };
+ return (
+ <>
+ <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>
+ </>
+ );
+};`;
diff --git a/src/components/demo-components/fullsceen/DemoFullScreenImg.tsx b/src/components/demo-components/fullsceen/DemoFullScreenImg.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6959c4e9f1746c0d10dab0e26e729ed2b4ef96c3
--- /dev/null
+++ b/src/components/demo-components/fullsceen/DemoFullScreenImg.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import {
+ ExtFile,
+ FileCard,
+ FileMosaic,
+ FullScreen,
+ ImagePreview,
+} from "../../../files-ui";
+
+const DemoFullScreenImg = () => {
+ const [imgSrc, setImgSrc] = React.useState<string | undefined>(undefined);
+ const handleSee = (imageSource: string | undefined) => {
+ setImgSrc(imageSource);
+ };
+ return (
+ <>
+ <FileCard id={0} {...imageSample} onSee={handleSee} />
+ <FileMosaic id={0} {...imageSample} onSee={handleSee} />
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
+ >
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ </>
+ );
+};
+export default DemoFullScreenImg;
+
+const imageSample: ExtFile = {
+ 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",
+};
diff --git a/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx b/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f2b83cebb4946ccdfc33646bbd589dcb11ad1a0
--- /dev/null
+++ b/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import {
+ ExtFile,
+ FileCard,
+ FileMosaic,
+ FullScreen,
+ VideoPreview,
+} from "../../../files-ui";
+import { ThorArrivesWakandaEN } from "../../../data/videoLinks";
+
+const DemoFullScreenVid = () => {
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const handleWatch = (videoSource: File | string | undefined) => {
+ setVideoSrc(videoSource);
+ };
+ return (
+ <>
+ <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>
+ </>
+ );
+};
+export default DemoFullScreenVid;
+
+const videoSample: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "Thos arrives wakanda.mp4",
+ videoUrl: ThorArrivesWakandaEN,
+};
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 6593fc47ec5fc0c448def26687abfab9fb87a0bf..1d6851373e282163a8ccf028d19f237532f5b3a3 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -65,7 +65,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onDoubleClick,
onClick,
onRightClick,
- smartImgFit,
+ smartImgFit="orientation",
} = props;
//localizers
diff --git a/src/files-ui/core/types/ExtFile.ts b/src/files-ui/core/types/ExtFile.ts
index 5d54eb33ff8bad8d155c5a58f65b7deb4d6369a8..300dcb1a1245ab0b88546de409d531cdb82e7574 100644
--- a/src/files-ui/core/types/ExtFile.ts
+++ b/src/files-ui/core/types/ExtFile.ts
@@ -77,6 +77,10 @@ export declare type ExtFile = {
file. If defined, the download icon will be shown.
*/
downloadUrl?: string;
+ /**
+ * Link, URI, FIle object or string representation of a video
+ */
+ videoUrl?: string;
}
/**
@@ -153,6 +157,11 @@ export class ExtFileInstance {
* In case onDownload prop is given
*/
public downloadUrl?: string;
+ /**
+ * Link, URI, FIle object or string representation of a video
+ */
+ public videoUrl?: string;
+
constructor(extFile: ExtFile) {
const {
id,
@@ -170,7 +179,7 @@ export class ExtFileInstance {
extraData,
extraUploadData,
serverResponse,
- downloadUrl
+ downloadUrl, videoUrl
} = extFile;
this.id = id;
@@ -192,6 +201,7 @@ export class ExtFileInstance {
this.serverResponse = serverResponse;
this.downloadUrl = downloadUrl;
+ this.videoUrl = videoUrl;
}
/**
* method under construction
diff --git a/src/pages/api/FullScreenAPIPropRows.tsx b/src/pages/api/FullScreenAPIPropRows.tsx
index 5c95a66a5ae46a4e4c320368f00979e29cbbe5a3..e144ca6c492efc702cf26764b38ea1bead9a5db4 100644
--- a/src/pages/api/FullScreenAPIPropRows.tsx
+++ b/src/pages/api/FullScreenAPIPropRows.tsx
@@ -20,8 +20,9 @@ export const FullScreenAPIPropRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
- The content of the dropozone. Tipically it is an array of{" "}
- <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> components.
+ The content of the component. Tipically it is the
+ <CodeHighlight>{"<ImagePreview/>"}</CodeHighlight> or the{" "}
+ <CodeHighlight>{"<VideoPreview/>"}</CodeHighlight> components.
</>
),
},
diff --git a/src/pages/api/FullScreenApi.tsx b/src/pages/api/FullScreenApi.tsx
index d0f661b0ac388435a2e0efbb5a5507deac498037..071c78db09b02923bc34d8b469dab1a1e38e8abc 100644
--- a/src/pages/api/FullScreenApi.tsx
+++ b/src/pages/api/FullScreenApi.tsx
@@ -38,6 +38,16 @@ const FullScreenApi = () => {
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
+ <li>
+ <AnchorToTab href="/components/fullscreen#imagepreview">
+ ImagePreview (FullScreen)
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/components/fullscreen#videopreview">
+ VideoPreview (FullScreen)
+ </AnchorToTab>
+ </li>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index beeb9576cd703f6c4d9e7f848134bc56f8aaa23e..e1596cff0a55da16767c0d12413f548a4885fc25 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -356,17 +356,17 @@ const FileCardDemoPage = (props) => {
</AnchorToTab>
</li>
<li>
- <AnchorToTab href="/api/preview#fullscreen">
+ <AnchorToTab href="/api/fullscreen">
{"<FullScreen/>"}
</AnchorToTab>
</li>
<li>
- <AnchorToTab href="/api/preview#imagepreview">
+ <AnchorToTab href="/api/imagepreview">
{"<ImagePreview/>"}
</AnchorToTab>
</li>
<li>
- <AnchorToTab href="/api/preview#videopreview">
+ <AnchorToTab href="/api/videopreview">
{"<VideoPreview/>"}
</AnchorToTab>
</li>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 2c5a4f738bc29757980985ab400d8cd63e18c912..5bd2d0eaaf4f1409a2c51842832bca391f8062f2 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -373,6 +373,21 @@ const FileMosaicDemoPage = (props) => {
{"<FileInputButton/>"}
</AnchorToTab>
</li>
+ <li>
+ <AnchorToTab href="/api/fullscreen">
+ {"<FullScreen/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/imagepreview">
+ {"<ImagePreview/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/videopreview">
+ {"<VideoPreview/>"}
+ </AnchorToTab>
+ </li>
</ul>
</section>
</MainContentContainer>
diff --git a/src/pages/demo/FullScreenDemoPage.tsx b/src/pages/demo/FullScreenDemoPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aef7d771f00399c926d078a81ffe64b14093d531
--- /dev/null
+++ b/src/pages/demo/FullScreenDemoPage.tsx
@@ -0,0 +1,147 @@
+import { Alert, Paper } from "@mui/material";
+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import CodeDemoFullScrrenImg from "../../components/demo-components/fullsceen/CodeDemoFullScreenImg";
+import CodeDemoFullScrrenVid from "../../components/demo-components/fullsceen/CodeDemoFullScreenVid";
+import DemoFullScreenImg from "../../components/demo-components/fullsceen/DemoFullScreenImg";
+import DemoFullScreenVid from "../../components/demo-components/fullsceen/DemoFullScreenVid";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+interface FullScreenDemoPageProps {}
+const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
+ props: FullScreenDemoPageProps
+) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FullScreen</MainTitle>
+ <MainParagraph>
+ Basically the purpose of the{" "}
+ <CodeHighlight>{"<FullScreen/>"}</CodeHighlight> 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.
+ <br />
+ You can close it by clicking on the close button or with the "esc"
+ key.
+ </MainParagraph>
+
+ <Alert severity="info">
+ 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
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> or{" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components, so for
+ completeness, those components are included in the examples
+ </Alert>
+
+ <section id="imagepreview">
+ <SubTitle content="Image preview" />
+ <DescParagraph>
+ To display an image in full screen you can use the {"<FullScreen/>"}{" "}
+ and {"<ImagePreview/>"} components.
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ gap: "7px",
+ flexWrap: "wrap",
+ width: "100%",
+ //padding: "25px 0",
+ flexDirection: "row",
+ }}
+ >
+ <DemoFullScreenImg />
+ </Paper>
+
+ <CodeDemoFullScrrenImg />
+ </section>
+
+ <section id="videopreview">
+ <SubTitle content="Video preview" />
+ <DescParagraph>
+ To display a video in full screen you can use the {"<FullScreen/>"}{" "}
+ and {"<VideoPreview/>"} components.
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ gap: "7px",
+ flexWrap: "wrap",
+ width: "100%",
+ //padding: "25px 0",
+ flexDirection: "row",
+ }}
+ >
+ <DemoFullScreenVid />
+ </Paper>
+
+ <CodeDemoFullScrrenVid />
+ </section>
+ <section id="api">
+ <SubTitle content="API" />
+ <DescParagraph>
+ See the documentation below for a complete reference to all of the
+ props available to the components mentioned here.
+ </DescParagraph>
+ <ul>
+ <li>
+ <AnchorToTab href="/api/fullscreen">
+ {"<FullScreen/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/imagepreview">
+ {"<ImagePreview/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/videopreview">
+ {"<VideoPreview/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/fileinputbuttom">
+ {"<FileInputButton/>"}
+ </AnchorToTab>
+ </li>
+ </ul>
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FullScreenDemoPage;
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Fullscreen Image",
+ referTo: "/components/fullscreen#imagepreview",
+ },
+ {
+ id: 1,
+ label: "FullScreen Video",
+ referTo: "/components/fullscreen#videopreview",
+ },
+];
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index 442b6102b0cfc983a67e4f1063128f1c59146409..0de4a540464155f78ddcc73ce43891eacc10709d 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -26,6 +26,7 @@ import LocalizationPage from "../pages/localization/LocalizationPage";
import VideoPreviewApi from "../pages/api/VideoPreviewApi";
import ImagePreviewApi from "../pages/api/ImagePreviewApi";
import FullScreenApi from "../pages/api/FullScreenApi";
+import FullScreenDemoPage from "../pages/demo/FullScreenDemoPage";
const router = createBrowserRouter([
{
@@ -73,6 +74,10 @@ const router = createBrowserRouter([
path: "/components/filecard",
element: <FileCardDemoPage />,
},
+ {
+ path: "/components/fullscreen",
+ element: <FullScreenDemoPage />,
+ },
],
},
{
diff --git a/src/styles/MainPage.scss b/src/styles/MainPage.scss
index 33d0e3032cf25ad366d61ad34efc5220c8a14dd9..a24f1954ebec1fa4652fa7440a78f2661e61fd0c 100644
--- a/src/styles/MainPage.scss
+++ b/src/styles/MainPage.scss
@@ -327,3 +327,8 @@ $border-color-dark: #0a1929;
}
}
}
+
+.rc-hl-code-line {
+ font-size: 16px !important;
+ line-height: 19px !important;
+}