Merge branch 'dev' of penahub.gitlab.yandexcloud.net:frontend/squiz into analytics
This commit is contained in:
commit
dbd271a20a
@ -20,9 +20,9 @@ import {
|
|||||||
FormControlLabel,
|
FormControlLabel,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Select,
|
Select,
|
||||||
|
Skeleton,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Typography,
|
Typography,
|
||||||
Skeleton,
|
|
||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
@ -45,6 +45,7 @@ import SelectableIconButton from "./SelectableIconButton";
|
|||||||
import { DropZone } from "./dropZone";
|
import { DropZone } from "./dropZone";
|
||||||
import Extra from "./extra";
|
import Extra from "./extra";
|
||||||
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
|
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
|
||||||
|
import { VideoElement } from "./VideoElement";
|
||||||
|
|
||||||
const designTypes = [
|
const designTypes = [
|
||||||
[
|
[
|
||||||
@ -386,91 +387,103 @@ export default function StartPageSettings() {
|
|||||||
|
|
||||||
{quiz.config.startpage.background.type === "video" && (
|
{quiz.config.startpage.background.type === "video" && (
|
||||||
<>
|
<>
|
||||||
<Box
|
{!quiz.config.startpage.background.video ? (
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "7px",
|
|
||||||
mt: "20px",
|
|
||||||
mb: "14px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
|
|
||||||
>
|
|
||||||
Добавить видео
|
|
||||||
</Typography>
|
|
||||||
{isMobile ? (
|
|
||||||
<TooltipClickInfo title={"Можно загрузить видео."} />
|
|
||||||
) : (
|
|
||||||
<Tooltip title="Можно загрузить видео." placement="top">
|
|
||||||
<Box>
|
|
||||||
<InfoIcon />
|
|
||||||
</Box>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
{backgroundUploding ? (
|
|
||||||
<Skeleton
|
|
||||||
sx={{
|
|
||||||
width: "48px",
|
|
||||||
height: "48px",
|
|
||||||
transform: "none",
|
|
||||||
margin: "20px 0",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
<>
|
||||||
<ButtonBase
|
<Box
|
||||||
component="label"
|
|
||||||
sx={{
|
sx={{
|
||||||
justifyContent: "center",
|
|
||||||
height: "48px",
|
|
||||||
width: "48px",
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
my: "20px",
|
gap: "7px",
|
||||||
|
mt: "20px",
|
||||||
|
mb: "14px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<input
|
<Typography
|
||||||
onChange={async (event) => {
|
sx={{
|
||||||
setBackgroundUploading(true);
|
fontWeight: 500,
|
||||||
const file = event.target.files?.[0];
|
color: theme.palette.grey3.main,
|
||||||
|
}}
|
||||||
if (file) {
|
>
|
||||||
await uploadQuizImage(
|
Добавить видео
|
||||||
quiz.id,
|
</Typography>
|
||||||
file,
|
{isMobile ? (
|
||||||
(quiz, url) => {
|
<TooltipClickInfo title={"Можно загрузить видео."} />
|
||||||
quiz.config.startpage.background.video = url;
|
) : (
|
||||||
},
|
<Tooltip title="Можно загрузить видео." placement="top">
|
||||||
);
|
<Box>
|
||||||
// setVideo(URL.createObjectURL(file));
|
<InfoIcon />
|
||||||
}
|
</Box>
|
||||||
|
</Tooltip>
|
||||||
setBackgroundUploading(false);
|
)}
|
||||||
}}
|
</Box>
|
||||||
hidden
|
{backgroundUploding ? (
|
||||||
accept=".mp4"
|
<Skeleton
|
||||||
multiple
|
|
||||||
type="file"
|
|
||||||
/>
|
|
||||||
<UploadBox
|
|
||||||
icon={<UploadIcon />}
|
|
||||||
sx={{
|
sx={{
|
||||||
height: "48px",
|
|
||||||
width: "48px",
|
width: "48px",
|
||||||
|
height: "48px",
|
||||||
|
transform: "none",
|
||||||
|
margin: "20px 0",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ButtonBase>
|
) : (
|
||||||
{quiz.config.startpage.background.video && (
|
<>
|
||||||
<video
|
<ButtonBase
|
||||||
src={quiz.config.startpage.background.video}
|
component="label"
|
||||||
width="400"
|
sx={{
|
||||||
controls
|
justifyContent: "center",
|
||||||
/>
|
height: "48px",
|
||||||
|
width: "48px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
my: "20px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
onChange={async (event) => {
|
||||||
|
setBackgroundUploading(true);
|
||||||
|
const file = event.target.files?.[0];
|
||||||
|
|
||||||
|
if (file) {
|
||||||
|
await uploadQuizImage(
|
||||||
|
quiz.id,
|
||||||
|
file,
|
||||||
|
(quiz, url) => {
|
||||||
|
quiz.config.startpage.background.video =
|
||||||
|
url;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setBackgroundUploading(false);
|
||||||
|
}}
|
||||||
|
hidden
|
||||||
|
accept=".mp4"
|
||||||
|
multiple
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
<UploadBox
|
||||||
|
icon={<UploadIcon />}
|
||||||
|
sx={{
|
||||||
|
height: "48px",
|
||||||
|
width: "48px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ButtonBase>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
46
src/pages/startPage/VideoElement.tsx
Normal file
46
src/pages/startPage/VideoElement.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -21,6 +21,28 @@ export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => (
|
|||||||
onEmojiSelect={onEmojiSelect}
|
onEmojiSelect={onEmojiSelect}
|
||||||
theme="light"
|
theme="light"
|
||||||
locale="ru"
|
locale="ru"
|
||||||
|
exceptEmojis={ignoreEmojis}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</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",
|
||||||
|
];
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { useState, FC } from "react";
|
import { FC, useState } from "react";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
@ -7,7 +7,6 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import CustomTextField from "./CustomTextField";
|
|
||||||
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
|
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
|
||||||
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
|
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 UploadBox from "@ui_kit/UploadBox";
|
||||||
import UploadIcon from "@icons/UploadIcon";
|
import UploadIcon from "@icons/UploadIcon";
|
||||||
import InfoIcon from "@icons/InfoIcon";
|
import InfoIcon from "@icons/InfoIcon";
|
||||||
|
import { VideoElement } from "../pages/startPage/VideoElement";
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
resultData: AnyTypedQuizQuestion;
|
resultData: AnyTypedQuizQuestion;
|
||||||
@ -167,67 +167,78 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
|
|||||||
)}
|
)}
|
||||||
{!resultData.content.useImage && (
|
{!resultData.content.useImage && (
|
||||||
<>
|
<>
|
||||||
<Box
|
{!resultData.content.video ? (
|
||||||
sx={{
|
<>
|
||||||
display: "flex",
|
<Box
|
||||||
alignItems: "center",
|
sx={{
|
||||||
gap: "7px",
|
display: "flex",
|
||||||
mt: "20px",
|
alignItems: "center",
|
||||||
mb: "14px",
|
gap: "7px",
|
||||||
}}
|
mt: "20px",
|
||||||
>
|
mb: "14px",
|
||||||
<Typography
|
}}
|
||||||
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
|
>
|
||||||
>
|
<Typography
|
||||||
Добавить видео
|
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
|
||||||
</Typography>
|
>
|
||||||
<Tooltip title="Можно загрузить видео." placement="top">
|
Добавить видео
|
||||||
<Box>
|
</Typography>
|
||||||
<InfoIcon />
|
<Tooltip title="Можно загрузить видео." placement="top">
|
||||||
|
<Box>
|
||||||
|
<InfoIcon />
|
||||||
|
</Box>
|
||||||
|
</Tooltip>
|
||||||
</Box>
|
</Box>
|
||||||
</Tooltip>
|
<ButtonBase
|
||||||
</Box>
|
component="label"
|
||||||
<ButtonBase
|
sx={{
|
||||||
component="label"
|
justifyContent: "center",
|
||||||
sx={{
|
height: "48px",
|
||||||
justifyContent: "center",
|
width: "48px",
|
||||||
height: "48px",
|
display: "flex",
|
||||||
width: "48px",
|
alignItems: "center",
|
||||||
display: "flex",
|
my: "20px",
|
||||||
alignItems: "center",
|
}}
|
||||||
my: "20px",
|
>
|
||||||
}}
|
<input
|
||||||
>
|
onChange={(event) => {
|
||||||
<input
|
const file = event.target.files?.[0];
|
||||||
onChange={(event) => {
|
if (file) {
|
||||||
const file = event.target.files?.[0];
|
uploadQuestionImage(
|
||||||
if (file) {
|
resultData.id,
|
||||||
uploadQuestionImage(
|
quizQid,
|
||||||
resultData.id,
|
file,
|
||||||
quizQid,
|
(question, url) => {
|
||||||
file,
|
question.content.video = url;
|
||||||
(question, url) => {
|
},
|
||||||
question.content.video = url;
|
);
|
||||||
},
|
}
|
||||||
);
|
}}
|
||||||
}
|
hidden
|
||||||
}}
|
accept=".mp4"
|
||||||
hidden
|
multiple
|
||||||
accept=".mp4"
|
type="file"
|
||||||
multiple
|
/>
|
||||||
type="file"
|
<UploadBox
|
||||||
/>
|
icon={<UploadIcon />}
|
||||||
<UploadBox
|
sx={{
|
||||||
icon={<UploadIcon />}
|
height: "48px",
|
||||||
sx={{
|
width: "48px",
|
||||||
height: "48px",
|
}}
|
||||||
width: "48px",
|
/>
|
||||||
|
</ButtonBase>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<VideoElement
|
||||||
|
videoSrc={resultData.content.video}
|
||||||
|
theme={theme}
|
||||||
|
onDeleteClick={() => {
|
||||||
|
updateQuestion(resultData.id, (question) => {
|
||||||
|
question.content.video = null;
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ButtonBase>
|
)}
|
||||||
{resultData.content.video ? (
|
|
||||||
<video src={resultData.content.video} width="300" controls />
|
|
||||||
) : null}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
Loading…
Reference in New Issue
Block a user