отображение новых вариантов нарезки

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { Box, Button, Link, Typography, useTheme } from "@mui/material";
 
 import { useQuizViewStore } from "@/stores/quizView";
@@ -76,6 +76,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
     })();
   }, []);
 
+  const choiceImgUrlQuestion = useMemo(() => {
+    if (resultQuestion.content.editedUrlImagesList !== undefined) {
+      return resultQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
+    } else {
+      return resultQuestion.content.back;
+    }
+  }, [resultQuestion]);
   return (
     <Box
       sx={{
@@ -166,7 +173,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                 }}
               />
             )}
-            {resultQuestion?.content.useImage && resultQuestion.content.back && (
+            {resultQuestion?.content.useImage && choiceImgUrlQuestion && (
               <Box
                 sx={{
                   width: "100%",
@@ -176,7 +183,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
               >
                 <img
                   alt="resultImage"
-                  src={resultQuestion.content.back}
+                  src={choiceImgUrlQuestion}
                   style={{
                     width: "100%",
                     height: spec ? "auto" : isMobile ? "236px" : "306px",

lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx

@@ -1,16 +1,17 @@
 import { CheckboxIcon } from "@/assets/icons/Checkbox";
-import type { QuestionVariant } from "@/model/questionTypes/shared";
+import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
 import { useQuizSettings } from "@contexts/QuizDataContext";
 import { Box, Checkbox, FormControlLabel, Input, Radio, TextareaAutosize, Typography, useTheme } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import type { MouseEvent } from "react";
+import { useMemo, type MouseEvent } from "react";
+import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 
 type ImagesProps = {
   questionId: string;
-  variant: QuestionVariant;
+  variant: QuestionVariantWithEditedImages;
   index: number;
   answer: string | string[] | undefined;
   isMulti: boolean;
@@ -95,6 +96,8 @@ export const ImageVariant = ({
   const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
   const theme = useTheme();
   const answers = useQuizViewStore((state) => state.answers);
+  const isMobile = useRootContainerSize() < 450;
+  const isTablet = useRootContainerSize() < 850;
 
   const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -119,6 +122,14 @@ export const ImageVariant = ({
     }
   };
 
+  const choiceImgUrl = useMemo(() => {
+    if (variant.editedUrlImagesList !== undefined) {
+      return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
+    } else {
+      return variant.extendedText;
+    }
+  }, []);
+
   return (
     <Box
       sx={{
@@ -141,7 +152,7 @@ export const ImageVariant = ({
         <Box sx={{ width: "100%", height: "300px" }}>
           {variant.extendedText && (
             <img
-              src={variant.extendedText}
+              src={choiceImgUrl}
               alt=""
               style={{
                 display: "block",

lib/components/ViewPublicationPage/questions/Text/TextNormal.tsx

@@ -8,7 +8,7 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 
-import type { ChangeEvent } from "react";
+import { useMemo, type ChangeEvent } from "react";
 import type { QuizQuestionText } from "@model/questionTypes/text";
 
 interface TextNormalProps {
@@ -21,12 +21,19 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
   const { settings } = useQuizSettings();
   const { updateAnswer } = useQuizViewStore((state) => state);
   const isMobile = useRootContainerSize() < 650;
+  const isTablet = useRootContainerSize() < 850;
   const theme = useTheme();
 
   const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
     updateAnswer(currentQuestion.id, target.value, 0);
   };
-
+  const choiceImgUrlQuestion = useMemo(() => {
+    if (currentQuestion.content.editedUrlImagesList !== undefined) {
+      return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
+    } else {
+      return currentQuestion.content.back;
+    }
+  }, [currentQuestion]);
   return (
     <Box>
       <Typography
@@ -61,7 +68,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
             "&:focus-visible": { borderColor: theme.palette.primary.main },
           }}
         />
-        {currentQuestion.content.back && currentQuestion.content.back !== " " && (
+        {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
           <Box
             sx={{
               maxWidth: "400px",
@@ -72,7 +79,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
           >
             <img
               key={currentQuestion.id}
-              src={currentQuestion.content.back}
+              src={choiceImgUrlQuestion}
               style={{ width: "100%", height: "100%", objectFit: "cover" }}
               alt=""
             />

lib/components/ViewPublicationPage/questions/Variant/index.tsx

@@ -1,5 +1,5 @@
 import { Box, FormGroup, RadioGroup, Typography, useTheme } from "@mui/material";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import { VariantItem } from "./VariantItem";
 
@@ -16,6 +16,7 @@ type VariantProps = {
 export const Variant = ({ currentQuestion }: VariantProps) => {
   const theme = useTheme();
   const isMobile = useRootContainerSize() < 650;
+  const isTablet = useRootContainerSize() < 850;
   const answers = useQuizViewStore((state) => state.answers);
   const ownVariants = useQuizViewStore((state) => state.ownVariants);
   const updateOwnVariant = useQuizViewStore((state) => state.updateOwnVariant);
@@ -32,6 +33,13 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const choiceImgUrlQuestion = useMemo(() => {
+    if (currentQuestion.content.editedUrlImagesList !== undefined) {
+      return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
+    } else {
+      return currentQuestion.content.back;
+    }
+  }, [currentQuestion]);
   if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
 
   return (
@@ -93,11 +101,11 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
               ))}
           </Box>
         </Group>
-        {currentQuestion.content.back && currentQuestion.content.back !== " " && (
+        {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
           <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
             <img
               key={currentQuestion.id}
-              src={currentQuestion.content.back}
+              src={choiceImgUrlQuestion}
               style={{ width: "100%", height: "100%", objectFit: "cover" }}
               alt=""
             />

lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx

@@ -1,4 +1,4 @@
-import type { QuestionVariant } from "@/model/questionTypes/shared";
+import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
 import { useQuizSettings } from "@contexts/QuizDataContext";
 import {
   FormControlLabel,
@@ -15,12 +15,12 @@ import { useQuizViewStore } from "@stores/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import type { MouseEvent } from "react";
+import { type MouseEvent } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 type VarimgVariantProps = {
   questionId: string;
-  variant: QuestionVariant;
+  variant: QuestionVariantWithEditedImages;
   index: number;
   isSending: boolean;
   setIsSending: (isSending: boolean) => void;
@@ -102,11 +102,11 @@ export const VarimgVariant = ({
   ownPlaceholder,
   answer,
 }: VarimgVariantProps) => {
+  const theme = useTheme();
+
   const { settings } = useQuizSettings();
   const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
 
-  const theme = useTheme();
-
   const sendVariant = async (event: MouseEvent<HTMLLabelElement>) => {
     event.preventDefault();
 

lib/components/ViewPublicationPage/questions/Varimg/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Box, RadioGroup, Typography, useTheme } from "@mui/material";
 
 import { VarimgVariant } from "./VarimgVariant";
@@ -23,6 +23,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
 
   const theme = useTheme();
   const isMobile = useRootContainerSize() < 650;
+  const isTablet = useRootContainerSize() < 850;
 
   const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
   const ownVariant = ownVariants.find((variant) => variant.id === currentQuestion.id);
@@ -35,6 +36,23 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const choiceImgUrlAnswer = useMemo(() => {
+    if (variant !== undefined) {
+      if (variant.editedUrlImagesList !== undefined) {
+        return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
+      } else {
+        return variant.extendedText;
+      }
+    }
+  }, [variant]);
+
+  const choiceImgUrlQuestion = useMemo(() => {
+    if (currentQuestion.content.editedUrlImagesList !== undefined) {
+      return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
+    } else {
+      return currentQuestion.content.back;
+    }
+  }, [variant]);
   if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
 
   return (
@@ -115,21 +133,19 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
           }}
         >
           {answer ? (
-            variant?.extendedText ? (
+            choiceImgUrlAnswer ? (
               <img
-                key={variant.extendedText}
+                key={choiceImgUrlAnswer}
-                src={variant.extendedText}
+                src={choiceImgUrlAnswer}
                 style={{ width: "100%", height: "100%", objectFit: "cover" }}
                 alt=""
               />
             ) : (
               <BlankImage />
             )
-          ) : currentQuestion.content.back !== " " &&
+          ) : choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && choiceImgUrlQuestion.length > 0 ? (
-            currentQuestion.content.back !== null &&
-            currentQuestion.content.back.length > 0 ? (
             <img
-              src={currentQuestion.content.back}
+              src={choiceImgUrlQuestion}
               style={{ width: "100%", height: "100%", objectFit: "cover" }}
               alt=""
             />

lib/model/questionTypes/images.ts

@@ -1,4 +1,4 @@
-import type { QuestionHint, QuestionVariant, QuizQuestionBase, QuestionBranchingRule } from "./shared";
+import type { QuestionHint, QuestionVariantWithEditedImages, QuizQuestionBase, QuestionBranchingRule } from "./shared";
 
 export interface QuizQuestionImages extends QuizQuestionBase {
   type: "images";
@@ -21,7 +21,7 @@ export interface QuizQuestionImages extends QuizQuestionBase {
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
     /** Варианты (картинки) */
-    variants: QuestionVariant[];
+    variants: QuestionVariantWithEditedImages[];
     hint: QuestionHint;
     rule: QuestionBranchingRule;
     back: string | null;

lib/model/questionTypes/result.ts

@@ -1,4 +1,4 @@
-import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint } from "./shared";
+import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint, EditedUrlImagesList } from "./shared";
 
 interface ResultQuestionBranchingRule extends QuestionBranchingRule {
   minScore?: number;
@@ -15,6 +15,7 @@ export interface QuizQuestionResult extends QuizQuestionBase {
     price: [number] | [number, number];
     useImage: boolean;
     rule: ResultQuestionBranchingRule;
+    editedUrlImagesList: EditedUrlImagesList;
     hint: QuestionHint;
     autofill: boolean;
     usage: boolean;

lib/model/questionTypes/shared.ts

@@ -1,3 +1,4 @@
+import { type } from "os";
 import type { QuizQuestionDate } from "./date";
 import type { QuizQuestionEmoji } from "./emoji";
 import type { QuizQuestionFile } from "./file";
@@ -20,6 +21,9 @@ export interface QuestionBranchingRuleMain {
   }[];
 }
 
+export type EditedImagesScreens = "desktop" | "tablet" | "mobile" | "small";
+export type EditedUrlImagesList = Record<EditedImagesScreens, string>;
+
 export interface QuestionBranchingRule {
   children: string[];
   //список условий
@@ -49,6 +53,9 @@ export type QuestionVariant = {
   originalImageUrl: string;
   points?: number;
 };
+export interface QuestionVariantWithEditedImages extends QuestionVariant {
+  editedUrlImagesList?: EditedUrlImagesList;
+}
 
 export type QuestionType =
   | "variant"

lib/model/questionTypes/text.ts

@@ -1,4 +1,4 @@
-import type { QuizQuestionBase, QuestionHint, QuestionBranchingRule } from "./shared";
+import type { QuizQuestionBase, QuestionHint, QuestionBranchingRule, EditedUrlImagesList } from "./shared";
 
 export interface QuizQuestionText extends QuizQuestionBase {
   type: "text";
@@ -14,6 +14,7 @@ export interface QuizQuestionText extends QuizQuestionBase {
     /** Чекбокс "Автозаполнение адреса" */
     autofill: boolean;
     answerType: "single" | "multi" | "numberOnly";
+    editedUrlImagesList: EditedUrlImagesList;
     hint: QuestionHint;
     rule: QuestionBranchingRule;
     back: string | null;

lib/model/questionTypes/variant.ts

@@ -1,4 +1,10 @@
-import type { QuizQuestionBase, QuestionVariant, QuestionHint, QuestionBranchingRule } from "./shared";
+import type {
+  QuizQuestionBase,
+  QuestionVariant,
+  QuestionHint,
+  QuestionBranchingRule,
+  EditedUrlImagesList,
+} from "./shared";
 
 export interface QuizQuestionVariant extends QuizQuestionBase {
   type: "variant";
@@ -14,6 +20,7 @@ export interface QuizQuestionVariant extends QuizQuestionBase {
     innerNameCheck: boolean;
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
+    editedUrlImagesList: EditedUrlImagesList;
     /** Поле "Внутреннее название вопроса" */
     innerName: string;
     /** Варианты ответов */

lib/model/questionTypes/varimg.ts

@@ -1,4 +1,10 @@
-import type { QuestionHint, QuestionVariant, QuizQuestionBase, QuestionBranchingRule } from "./shared";
+import type {
+  QuestionHint,
+  QuestionVariantWithEditedImages,
+  EditedUrlImagesList,
+  QuizQuestionBase,
+  QuestionBranchingRule,
+} from "./shared";
 
 export interface QuizQuestionVarImg extends QuizQuestionBase {
   type: "varimg";
@@ -12,7 +18,8 @@ export interface QuizQuestionVarImg extends QuizQuestionBase {
     innerName: string;
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
-    variants: QuestionVariant[];
+    variants: QuestionVariantWithEditedImages[];
+    editedUrlImagesList: EditedUrlImagesList;
     hint: QuestionHint;
     rule: QuestionBranchingRule;
     back: string | null;