add favicon dropzone & resizing

src/model/quizSettings.ts

@@ -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,

src/pages/startPage/StartPageSettings.tsx

@@ -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
+                                    {favIconDropZoneElement}
-                                        sx={{ height: "48px", width: "48px" }}
-                                        heightImg={"48px"}
-                                        widthImg={"48px"}
-                                    />
-
                                     <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
+                                {favIconDropZoneElement}
-                                    sx={{ height: "48px", width: "48px" }}
-                                    heightImg={"48px"}
-                                    widthImg={"48px"}
-                                />
-
                                 <Typography
                                     sx={{
                                         color: theme.palette.orange.main,

src/pages/startPage/dropZone.tsx

@@ -22,8 +22,7 @@ const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 interface Props {
     text?: string;
     sx?: SxProps<Theme>;
-    heightImg: string;
+    deleteIconSx?: SxProps<Theme>;
-    widthImg?: string;
     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 />

src/pages/startPage/dropfavicon.tsx

@@ -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>
-  );
-};

src/ui_kit/reactImageFileResizer.ts

@@ -175,3 +175,19 @@ class Resizer {
       );
     },
   };
+
+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"
+        );
+    });
+}