Merge branch 'dev' of penahub.gitlab.yandexcloud.net:frontend/squiz into analytics

src/pages/startPage/StartPageSettings.tsx

@@ -20,9 +20,9 @@ import {
   FormControlLabel,
   MenuItem,
   Select,
+  Skeleton,
   Tooltip,
   Typography,
-  Skeleton,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
@@ -45,6 +45,7 @@ import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
 import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
+import { VideoElement } from "./VideoElement";
 
 const designTypes = [
   [
@@ -385,6 +386,8 @@ export default function StartPageSettings() {
             )}
 
             {quiz.config.startpage.background.type === "video" && (
+              <>
+                {!quiz.config.startpage.background.video ? (
                   <>
                     <Box
                       sx={{
@@ -396,7 +399,10 @@ export default function StartPageSettings() {
                       }}
                     >
                       <Typography
-                    sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+                        sx={{
+                          fontWeight: 500,
+                          color: theme.palette.grey3.main,
+                        }}
                       >
                         Добавить видео
                       </Typography>
@@ -442,10 +448,10 @@ export default function StartPageSettings() {
                                   quiz.id,
                                   file,
                                   (quiz, url) => {
-                                quiz.config.startpage.background.video = url;
+                                    quiz.config.startpage.background.video =
+                                      url;
                                   },
                                 );
-                            // setVideo(URL.createObjectURL(file));
                               }
 
                               setBackgroundUploading(false);
@@ -463,14 +469,21 @@ export default function StartPageSettings() {
                             }}
                           />
                         </ButtonBase>
-                    {quiz.config.startpage.background.video && (
-                      <video
-                        src={quiz.config.startpage.background.video}
-                        width="400"
-                        controls
-                      />
+                      </>
                     )}
                   </>
+                ) : (
+                  <Box sx={{ marginTop: "20px" }}>
+                    <VideoElement
+                      videoSrc={quiz.config.startpage.background.video}
+                      theme={theme}
+                      onDeleteClick={() => {
+                        updateQuiz(quiz.id, (quiz) => {
+                          quiz.config.startpage.background.video = null;
+                        });
+                      }}
+                    />
+                  </Box>
                 )}
               </>
             )}

src/pages/startPage/VideoElement.tsx

@@ -0,0 +1,46 @@
+import Box from "@mui/material/Box";
+import { FC } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { IconButton, SxProps, Theme } from "@mui/material";
+
+type VideoElementProps = {
+  videoSrc: string;
+  width?: string;
+  theme: Theme;
+  onDeleteClick: () => void;
+  deleteIconSx?: SxProps<Theme>;
+};
+
+export const VideoElement: FC<VideoElementProps> = ({
+  videoSrc,
+  width = "300",
+  theme,
+  onDeleteClick,
+  deleteIconSx,
+}) => {
+  return (
+    <Box sx={{ position: "relative", width: `${width}px` }}>
+      <video
+        style={{ borderRadius: "8px" }}
+        src={videoSrc}
+        width={width}
+        controls
+      />
+      <IconButton
+        onClick={onDeleteClick}
+        sx={{
+          position: "absolute",
+          right: 0,
+          top: 0,
+          color: theme.palette.orange.main,
+          borderRadius: "8px",
+          borderBottomRightRadius: 0,
+          borderTopLeftRadius: 0,
+          ...deleteIconSx,
+        }}
+      >
+        <DeleteIcon />
+      </IconButton>
+    </Box>
+  );
+};

src/ui_kit/EmojiPicker.tsx

@@ -21,6 +21,28 @@ export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => (
       onEmojiSelect={onEmojiSelect}
       theme="light"
       locale="ru"
+      exceptEmojis={ignoreEmojis}
     />
   </Box>
 );
+
+const ignoreEmojis = [
+  "two_men_holding_hands",
+  "two_women_holding_hands",
+  "man-kiss-man",
+  "woman-kiss-woman",
+  "man-heart-man",
+  "woman-heart-woman",
+  "man-man-boy",
+  "man-man-girl",
+  "man-man-girl-boy",
+  "man-man-girl-girl",
+  "man-man-boy-boy",
+  "woman-woman-boy",
+  "woman-woman-girl",
+  "woman-woman-girl-boy",
+  "woman-woman-girl-girl",
+  "woman-woman-boy-boy",
+  "rainbow-flag",
+  "transgender_flag",
+];

src/ui_kit/MediaSelectionAndDisplay.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react";
+import { FC, useState } from "react";
 import {
   Box,
   Button,
@@ -7,7 +7,6 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import CustomTextField from "./CustomTextField";
 import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
 
@@ -19,6 +18,7 @@ import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import UploadBox from "@ui_kit/UploadBox";
 import UploadIcon from "@icons/UploadIcon";
 import InfoIcon from "@icons/InfoIcon";
+import { VideoElement } from "../pages/startPage/VideoElement";
 
 interface Iprops {
   resultData: AnyTypedQuizQuestion;
@@ -166,6 +166,8 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
         </Box>
       )}
       {!resultData.content.useImage && (
+        <>
+          {!resultData.content.video ? (
             <>
               <Box
                 sx={{
@@ -225,9 +227,18 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
                   }}
                 />
               </ButtonBase>
-          {resultData.content.video ? (
-            <video src={resultData.content.video} width="300" controls />
-          ) : null}
+            </>
+          ) : (
+            <VideoElement
+              videoSrc={resultData.content.video}
+              theme={theme}
+              onDeleteClick={() => {
+                updateQuestion(resultData.id, (question) => {
+                  question.content.video = null;
+                });
+              }}
+            />
+          )}
         </>
       )}
     </Box>