SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

add favicon dropzone & resizing

Browse Source
This commit is contained in:
nflnkr 2023-12-06 15:54:33 +03:00
parent 01bf9abd27
commit 27a76b3011
5 changed files with 57 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/model/quizSettings.ts
View File

@ -39,6 +39,8 @@ export interface QuizConfig {
description: string;
button: string;
position: QuizStartpageAlignType;
favIcon: string | null;
originalFavIcon: string | null;
background: {
type: null | "image" | "video";
desktop: string | null;
@ -71,6 +73,8 @@ export const defaultQuizConfig: QuizConfig = {
description: "",
button: "",
position: "left",
favIcon: null,
originalFavIcon: null,
background: {
type: null,
desktop: null,

48
src/pages/startPage/StartPageSettings.tsx
View File

@ -35,8 +35,8 @@ import UploadIcon from "../../assets/icons/UploadIcon";
import ModalSizeImage from "./ModalSizeImage";
import SelectableIconButton from "./SelectableIconButton";
import { DropZone } from "./dropZone";
import DropFav from "./dropfavicon";
import Extra from "./extra";
import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
const designTypes = [
@ -85,6 +85,33 @@ export default function StartPageSettings() {
if (!quiz) return null; // TODO throw and catch with error boundary
const favIconDropZoneElement = (
<DropZone
sx={{ height: "48px", width: "48px" }}
deleteIconSx={{ right: -40, top: -10 }}
imageUrl={quiz.config.startpage.favIcon}
originalImageUrl={quiz.config.startpage.originalFavIcon}
onImageUploadClick={async file => {
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
quiz.config.startpage.originalFavIcon = url;
});
}}
onImageSaveClick={async file => {
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.favIcon = null;
});
}}
/>
);
return (
<>
<Typography
@ -304,7 +331,6 @@ export default function StartPageSettings() {
</Typography>
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.background.desktop}
originalImageUrl={quiz.config.startpage.background.originalDesktop}
@ -373,7 +399,6 @@ export default function StartPageSettings() {
</Typography>
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
imageUrl={quiz.config.startpage.background.mobile}
originalImageUrl={quiz.config.startpage.background.originalMobile}
onImageUploadClick={file => {
@ -476,7 +501,6 @@ export default function StartPageSettings() {
</Typography>
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
imageUrl={quiz.config.startpage.background.mobile}
originalImageUrl={quiz.config.startpage.background.originalMobile}
onImageUploadClick={file => {
@ -557,7 +581,6 @@ export default function StartPageSettings() {
</Typography>
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.logo}
originalImageUrl={quiz.config.originalLogo}
@ -597,12 +620,7 @@ export default function StartPageSettings() {
gap: "10px",
}}
>
<DropFav
sx={{ height: "48px", width: "48px" }}
heightImg={"48px"}
widthImg={"48px"}
/>
{favIconDropZoneElement}
<Typography
sx={{
color: theme.palette.orange.main,
@ -645,7 +663,6 @@ export default function StartPageSettings() {
</Typography>
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.logo}
originalImageUrl={quiz.config.originalLogo}
@ -685,12 +702,7 @@ export default function StartPageSettings() {
gap: "10px",
}}
>
<DropFav
sx={{ height: "48px", width: "48px" }}
heightImg={"48px"}
widthImg={"48px"}
/>
{favIconDropZoneElement}
<Typography
sx={{
color: theme.palette.orange.main,

11
src/pages/startPage/dropZone.tsx
View File

@ -22,8 +22,7 @@ const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
interface Props {
text?: string;
sx?: SxProps<Theme>;
heightImg: string;
widthImg?: string;
deleteIconSx?: SxProps<Theme>;
imageUrl: string | null;
originalImageUrl: string | null;
onImageUploadClick: (image: Blob) => void;
@ -32,7 +31,7 @@ interface Props {
}
//Научи функцию принимать данные для валидации
export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImageUrl, onImageUploadClick, onImageSaveClick, onDeleteClick }: Props) => {
export const DropZone = ({ text, sx, deleteIconSx, imageUrl, originalImageUrl, onImageUploadClick, onImageSaveClick, onDeleteClick }: Props) => {
const theme = useTheme();
const quiz = useCurrentQuiz();
const [isDropReady, setIsDropReady] = useState<boolean>(false);
@ -103,14 +102,15 @@ export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImag
justifyContent: "center",
alignItems: "center",
borderRadius: "8px",
overflow: "hidden",
}}
>
{imageUrl ?
<img
height={heightImg}
width={widthImg}
src={imageUrl}
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
}}
/>
@ -144,6 +144,7 @@ export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImag
borderRadius: "8px",
borderBottomRightRadius: 0,
borderTopLeftRadius: 0,
...deleteIconSx,
}}
>
<DeleteIcon />

274
src/pages/startPage/dropfavicon.tsx
View File

@ -1,274 +0,0 @@
import { Box, ButtonBase, SxProps, Theme, Typography, useTheme } from "@mui/material";
import Resizer from "@ui_kit/reactImageFileResizer";
import saveAs from "file-saver";
import JSZip from "jszip";
import { enqueueSnackbar } from "notistack";
import { useEffect, useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon";
interface Props {
text?: string;
sx?: SxProps<Theme>;
heightImg: string;
widthImg?: string;
}
const imageFavicon = [
{
maxWidth: 16,
maxHeight: 16,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 32,
maxHeight: 32,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 48,
maxHeight: 48,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 76,
maxHeight: 76,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 96,
maxHeight: 96,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 120,
maxHeight: 120,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 128,
maxHeight: 128,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 144,
maxHeight: 144,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 152,
maxHeight: 152,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 167,
maxHeight: 167,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 180,
maxHeight: 180,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 192,
maxHeight: 192,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 196,
maxHeight: 196,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 228,
maxHeight: 288,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 256,
maxHeight: 256,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 300,
maxHeight: 300,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 384,
maxHeight: 384,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
{
maxWidth: 512,
maxHeight: 512,
compressFormat: "PNG",
quality: 100,
rotation: 0,
},
];
export default ({ text, sx, heightImg, widthImg }: Props) => {
const theme = useTheme();
const [favList, setFavList] = useState<string[]>([]);
useEffect(() => {
if (favList.length === 18) {
const zip = new JSZip(); //создание зип архива
favList.forEach((uri, i) => {
const idx = uri.indexOf("base64,") + "base64,".length; //обработка строки картинки
const content = uri.substring(idx); //обработка строки картинки
zip.file(`fav${i}.jpg`, content, { base64: true }); //сохранение картинки в архив с именем "fav.jpg"
});
zip.generateAsync({ type: "blob" }).then(function (content) {
// скачивание архива
saveAs(content, "fav.zip"); // скачивание архива
}); // скачивание архива
}
}, [favList]);
const callback = (uri: string) => {
setFavList((old) => [...old, uri]);
};
const imgHC = (imgInp: HTMLInputElement) => {
const file = imgInp.files?.[0];
if (file) {
setFavList([]);
if (file.size < 5242880) {
setData(URL.createObjectURL(file));
imageFavicon.forEach((obj) => {
try {
Resizer.imageFileResizer(
file,
obj.maxWidth,
obj.compressFormat,
obj.quality,
obj.rotation,
callback,
"string"
);
} catch (err) {
console.log(err);
}
});
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
}
};
const [data, setData] = useState("");
const [ready, setReady] = useState(false);
const dragenterHC = () => {
setReady(true);
};
const dragexitHC = () => {
setReady(false);
};
const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(false);
const file = event.dataTransfer.files[0];
if (file.size < 5242880) {
setData(URL.createObjectURL(file));
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
};
const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
};
return (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input onChange={(event) => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
<Box
onDragEnter={dragenterHC}
onDragExit={dragexitHC}
onDrop={dropHC}
onDragOver={dragOverHC}
sx={{
width: "100%",
height: "120px",
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
opacity: data ? "0.5" : 1,
...sx,
}}
>
<UploadIcon />
<Typography
sx={{
position: "absolute",
right: "10px",
bottom: "10px",
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
}}
>
{text}
</Typography>
{data ? (
<img
height={heightImg}
width={widthImg}
src={data}
style={{
position: "absolute",
zIndex: "-1",
objectFit: "revert-layer",
}}
/>
) : null}
</Box>
</ButtonBase>
);
};

18
src/ui_kit/reactImageFileResizer.ts
View File

@ -174,4 +174,20 @@ class Resizer {
outputType,
);
},
};
};
export function resizeFavIcon(blob: Blob) {
return new Promise<Blob>(resolve => {
Resizer.createResizedImage(
new File([blob], "image"),
48,
"PNG",
100,
0,
async (file: Blob) => {
resolve(file);
},
"blob"
);
});
}