[FEAT]: Add landing section for extra components complete

src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx

@@ -41,7 +41,7 @@ const FileMosaicImageVideoPreviews: React.FC<
     downloadUrl?: string
   ) => {
     console.log("Download fileId", fileId);
-    console.log("Download fileName", files.filter(x=>x.id===fileId)[0]);
+    console.log("Download fileName", files.filter((x) => x.id === fileId)[0]);
     console.log("Download downloadUrl", downloadUrl);
     if (!downloadUrl) return;
     try {
@@ -68,9 +68,11 @@ const FileMosaicImageVideoPreviews: React.FC<
     fileId: FileMosaicProps["id"],
     downloadUrl?: string
   ) => {
-
     console.log("Download fileId", fileId);
-    console.log("Download fileName", files.filter(x=>x.id===fileId)[0].name);
+    console.log(
+      "Download fileName",
+      files.filter((x) => x.id === fileId)[0].name
+    );
     console.log("Download downloadUrl", downloadUrl);
     if (!downloadUrl) return;
     try {
@@ -88,11 +90,10 @@ const FileMosaicImageVideoPreviews: React.FC<
           anchor.download = "fileNamess.jpg";
           document.body.appendChild(anchor);
           anchor.click();
-
         } else {
           console.log("not yet");
         }
-      }
+      };
 
       const image = await fetch(downloadUrl);
       const imageBlob = await image.blob();
@@ -174,17 +175,18 @@ const files: ExtFile[] = [
     type: "image/jpeg",
     size: 282000,
     imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
-    downloadUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
-
+    //downloadUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
   },
 
   {
-    id: 2,
-    name: "video-preview.mp4",
+    id: 1,
+    name: "ThorArrivesWakandaES.mp4",
     type: "video/mp4",
     size: 282000,
-    downloadUrl: VIDEO_URL,
-    extraData: { videoUrl: VIDEO_URL },
+    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 },
   },
   {
     id: 3,
@@ -199,18 +201,19 @@ const files: ExtFile[] = [
   },
   {
     id: 1,
-    name: "ironman.png",
+    name: "facebook logo.png",
     type: "image/png",
     size: 282000,
     downloadUrl:
       "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
-
     imageUrl:
       "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
-
+    extraData: {
+      backgroundBlurImage: false,
+    },
   },
 ];
-
+/* 
 const videos: ExtFile[] = [
   {
     id: 0,
@@ -225,6 +228,8 @@ const videos: ExtFile[] = [
     name: "ThorArrivesWakandaES.mp4",
     type: "video/mp4",
     size: 282000,
+    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 },
   },
@@ -246,3 +251,4 @@ const videos: ExtFile[] = [
     extraData: { videoUrl: NarutoAndSasukeVsMomoshikiES },
   },
 ];
+ */

src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx

@@ -9,6 +9,7 @@ import {
 } from "../../../files-ui";
 import AnchorToTab from "../../util-components/AnchorToTab";
 import TypeHighlight from "../../typeHighlight/TypeHighlight";
+import { ThorArrivesWakandaES } from "../../../data/videoLinks";
 
 interface ExtraComponentsMainPageProps {
   darkMode?: boolean;
@@ -28,15 +29,10 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
   };
 
   const handleWatch = (videoSource: File | string | undefined) => {
-    console.log(
-      "handleWatch videoSource",
-      "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
-    );
+    console.log("handleWatch videoSource", videoSource);
     //setVideoSrc(videoSource);
     //
-    setVideoSrc(
-      "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
-    );
+    setVideoSrc(videoSource);
     // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
   };
 
@@ -44,11 +40,21 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
     <Paper
       variant="outlined"
       sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-between",
         padding: "20px 0",
         boxSizing: "border-box",
         backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+        height: "100%",
       }}
     >
+      <TypeHighlight size="1.1rem">
+        <AnchorToTab href="/components/filecard">
+          <h3 style={{ margin: 0 }}>{"<FileCard/>"}</h3>
+        </AnchorToTab>
+      </TypeHighlight>
       <Stack
         direction={"column"}
         spacing={2}
@@ -56,16 +62,9 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
         justifyContent={"space-evenly"}
         sx={{
           flexWrap: "wrap",
+          flexGrow: 1,
         }}
       >
-          <>
-            <TypeHighlight>
-              <AnchorToTab href="/components/filecard">
-                {" "}
-                <h3 style={{margin:0}}>{"<FileCard/>"}</h3>{" "}
-              </AnchorToTab>
-            </TypeHighlight>
-
         {files.map((f: ExtFile, index: number) => (
           <FileCard
             onClick={() => {
@@ -81,7 +80,6 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
             darkMode={darkMode}
           />
         ))}
-          </>
         <FullScreen
           open={imageSrc !== undefined}
           onClose={() => setImageSrc(undefined)}
@@ -111,11 +109,13 @@ const files: ExtFile[] = [
 
   {
     id: 2,
-    name: "video-preview.mp4",
+    name: "ThorArrivesWakandaES.mp4",
     type: "video/mp4",
     size: 282000,
-    downloadUrl:
-      "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4",
+    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 },
   },
   {
     id: 3,

src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx

@@ -8,6 +8,7 @@ import {
   VideoPreview,
   FileInputButton,
   Avatar,
+  MaterialButton,
 } from "../../../files-ui";
 import AnchorToTab from "../../util-components/AnchorToTab";
 import TypeHighlight from "../../typeHighlight/TypeHighlight";
@@ -40,9 +41,10 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
         boxSizing: "border-box",
         backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
         height: "100%",
+        flexGrow: 1,
       }}
     >
-      <TypeHighlight>
+      <TypeHighlight size="1.1rem">
         <AnchorToTab href="/components/avatar">
           <h3 style={{ margin: 0 }}>{"<Avatar/>"}</h3>
         </AnchorToTab>
@@ -61,13 +63,16 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
           src={avatarSrc}
           onChange={handleChange}
           isUloading={isUloading}
+          smart={false}
+          variant={"circle"}
         />
-        <Avatar
-          src={avatarSrc}
-          smart={true}
-          onChange={handleChange}
-          isUloading={isUloading}
-        />
+
+        <MaterialButton
+          onClick={() => setAvatarSrc(undefined)}
+          disabled={avatarSrc === undefined}
+        >
+          remove avatar
+        </MaterialButton>
       </Stack>
     </Paper>
   );

src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx

@@ -42,7 +42,7 @@ const ExtraComponentsMainPageInputButton: React.FC<
         height: "100%",
       }}
     >
-      <TypeHighlight>
+      <TypeHighlight size="1.1rem">
         <AnchorToTab href="/components/fileinputbutton">
           <h3 style={{ margin: 0 }}>{"<FileInputButton/>"}</h3>
         </AnchorToTab>

src/components/typeHighlight/TypeHighlight.tsx

@@ -4,11 +4,19 @@ import "./TypeHighlight.scss";
 interface TypeHighlightProps {
   children?: React.ReactNode;
   np?: boolean;
+  size?: string;
 }
 const TypeHighlight: React.FC<TypeHighlightProps> = (
   props: TypeHighlightProps
 ) => {
-  const { children,np } = props;
-  return <div className={np?"type-highlight np":"type-highlight"}>{children}</div>;
+  const { children, np, size } = props;
+  return (
+    <div
+      className={np ? "type-highlight np" : "type-highlight"}
+      style={{ fontSize: size }}
+    >
+      {children}
+    </div>
+  );
 };
 export default TypeHighlight;

src/data/videoLinks.js

-const BASE_URL =
-  "http://10.100.179.201:2800/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503/static";
+import ThorEN from "../static/videos/ThorEN.mp4";
+import ThorES from "../static/videos/ThorEN-1.mp4";
+import NarutoEN from "../static/videos/NarutoEN.mp4";
+import NarutoES from "../static/videos/NarutoES.mp4";
 
-export const ThorArrivesWakandaEN = BASE_URL+"/ThorEN.mp4";
-export const ThorArrivesWakandaES = BASE_URL+"/ThorEN.mp4";
-export const NarutoAndSasukeVsMomoshikiEN = BASE_URL+"/NarutoEN.mp4";
-export const NarutoAndSasukeVsMomoshikiES = BASE_URL+"/NarutoES.mp4";
+/* const BASE_URL =
+  "/static/media/videos";
+
+export const ThorArrivesWakandaEN = BASE_URL+"/ThorEN.cd3bd7cae7054bb5a630.mp4";
+export const ThorArrivesWakandaES = BASE_URL+"/ThorES.cd3bd7cae7054bb5a630.mp4";
+export const NarutoAndSasukeVsMomoshikiEN = BASE_URL+"/NarutoEN.ea6c18d269c6beda2aa3.mp4";
+export const NarutoAndSasukeVsMomoshikiES = BASE_URL+"/NarutoES.64ada0ad3f1f096e0f6f.mp4";
+ */
+
+export const ThorArrivesWakandaEN = ThorEN;
+export const ThorArrivesWakandaES = ThorES;
+export const NarutoAndSasukeVsMomoshikiEN = NarutoEN;
+export const NarutoAndSasukeVsMomoshikiES = NarutoES;
\ No newline at end of file

src/files-ui/components/avatar/Avatar.tsx

@@ -75,7 +75,6 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
               </div>
             </Layer>
           ) : src ? (
-            <>
             <ImagePreview
               className={`fui-avatar-image`}
               src={src}
@@ -83,7 +82,6 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
               onError={handleError}
               smart={smart}
             />
-            </>
           ) : (
             <div className={"fui-avatar-label"}>{emptyLabel}</div>
           )}