[FEAT]: Add img and vid ful screen previews. Add route and option in...

[FEAT]: Add img and vid ful screen previews. Add route and option in mainsidebar for fullscreen demo

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"),
+        },
+       
       ],
     },
     {

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,

src/components/demo-components/fullsceen/CodeDemoFullScreenImg.tsx

+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>
+      </>
+    );
+};`;

src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx

+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>
+    </>
+  );
+};`;

src/components/demo-components/fullsceen/DemoFullScreenImg.tsx

+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",
+};

src/components/demo-components/fullsceen/DemoFullScreenVid.tsx

+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,
+};

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.
       </>
     ),
   },

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

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>

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>

src/pages/demo/FullScreenDemoPage.tsx

+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 TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+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",
+  },
+];

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 />,
+      },
     ],
   },
   {

src/styles/MainPage.scss

@@ -327,3 +327,8 @@ $border-color-dark: #0a1929;
     }
   }
 }
+
+.rc-hl-code-line {
+  font-size: 16px !important;
+  line-height: 19px !important;
+}