From 54eb3353ed397b4f5f5df2988b15cb6e1f0cbac5 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Fri, 10 Mar 2023 18:34:20 -0500
Subject: [PATCH] [FEAT]: Add landing section for extra components complete
---
.../FileMosaicImageVideoPreviews.tsx | 48 ++++---
.../ExtraComponentsMainPage.tsx | 122 +++++++++---------
.../ExtraComponentsMainPageAvatar.tsx | 19 ++-
.../ExtraComponentsMainPageInputButton.tsx | 2 +-
.../typeHighlight/TypeHighlight.tsx | 14 +-
src/data/videoLinks.js | 23 +++-
src/files-ui/components/avatar/Avatar.tsx | 16 +--
7 files changed, 136 insertions(+), 108 deletions(-)
diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index 073d27c..c74d9a3 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/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 {
@@ -61,26 +61,28 @@ const FileMosaicImageVideoPreviews: React.FC<
console.log("Download", resJson); */
} catch (error) {
console.log("Download error", error);
- console.error( error);
+ console.error(error);
}
};
const handleDownloadXHR = async (
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 {
const request = new XMLHttpRequest();
- request.responseType="blob";
+ request.responseType = "blob";
request.open("get", downloadUrl, true);
request.send();
- request.onreadystatechange=function(){
- if(this.readyState==4 && this.status==200){
+ request.onreadystatechange = function () {
+ if (this.readyState == 4 && this.status == 200) {
const imageURL = window.URL.createObjectURL(this.response);
const anchor = document.createElement("a");
@@ -88,11 +90,10 @@ const FileMosaicImageVideoPreviews: React.FC<
anchor.download = "fileNamess.jpg";
document.body.appendChild(anchor);
anchor.click();
-
- }else{
+ } 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",
-
+ "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 },
},
];
+ */
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
index 66c6962..5427abc 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
+++ b/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,74 +29,71 @@ 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");
};
return (
- <Paper
- variant="outlined"
+ <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}
+ alignItems="center"
+ justifyContent={"space-evenly"}
sx={{
- padding: "20px 0",
- boxSizing: "border-box",
- backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+ flexWrap: "wrap",
+ flexGrow: 1,
}}
>
- <Stack
- direction={"column"}
- spacing={2}
- alignItems="center"
- justifyContent={"space-evenly"}
- sx={{
- flexWrap: "wrap",
- }}
+ {files.map((f: ExtFile, index: number) => (
+ <FileCard
+ onClick={() => {
+ alert("haaa");
+ }}
+ key={index}
+ //darkMode={darkMode}
+ {...f}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ {...f.extraData}
+ info
+ darkMode={darkMode}
+ />
+ ))}
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
>
- <>
- <TypeHighlight>
- <AnchorToTab href="/components/filecard">
- {" "}
- <h3 style={{margin:0}}>{"<FileCard/>"}</h3>{" "}
- </AnchorToTab>
- </TypeHighlight>
-
- {files.map((f: ExtFile, index: number) => (
- <FileCard
- onClick={() => {
- alert("haaa");
- }}
- key={index}
- //darkMode={darkMode}
- {...f}
- onSee={handleSee}
- onWatch={handleWatch}
- {...f.extraData}
- info
- darkMode={darkMode}
- />
- ))}
- </>
- <FullScreen
- open={imageSrc !== undefined}
- onClose={() => setImageSrc(undefined)}
- >
- <ImagePreview src={imageSrc} />
- </FullScreen>
- <FullScreen
- open={videoSrc !== undefined}
- onClose={() => setVideoSrc(undefined)}
- >
- <VideoPreview src={videoSrc} autoPlay controls />
- </FullScreen>
- </Stack>
- </Paper>
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </Stack>
+ </Paper>
);
};
export default ExtraComponentsMainPage;
@@ -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,
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
index 86e6470..d1537b8 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
+++ b/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>
);
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
index aced7d6..b6301ef 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
+++ b/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>
diff --git a/src/components/typeHighlight/TypeHighlight.tsx b/src/components/typeHighlight/TypeHighlight.tsx
index 032a460..2451fe4 100644
--- a/src/components/typeHighlight/TypeHighlight.tsx
+++ b/src/components/typeHighlight/TypeHighlight.tsx
@@ -3,12 +3,20 @@ import "./TypeHighlight.scss";
interface TypeHighlightProps {
children?: React.ReactNode;
- np?:boolean;
+ 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;
diff --git a/src/data/videoLinks.js b/src/data/videoLinks.js
index 01e7e05..69dd46e 100644
--- a/src/data/videoLinks.js
+++ b/src/data/videoLinks.js
@@ -1,7 +1,18 @@
-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
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index c002ff5..ec1a995 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -75,15 +75,13 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
</div>
</Layer>
) : src ? (
- <>
- <ImagePreview
- className={`fui-avatar-image`}
- src={src}
- alt={alt}
- onError={handleError}
- smart={smart}
- />
- </>
+ <ImagePreview
+ className={`fui-avatar-image`}
+ src={src}
+ alt={alt}
+ onError={handleError}
+ smart={smart}
+ />
) : (
<div className={"fui-avatar-label"}>{emptyLabel}</div>
)}
--
GitLab