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

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

Browse Source
This commit is contained in:
IlyaDoronin 2024-04-03 13:50:44 +03:00
commit dbd271a20a
4 changed files with 226 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 = [
[
@ -386,91 +387,103 @@ export default function StartPageSettings() {
{quiz.config.startpage.background.type === "video" && (
<>
<Box
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",
}}
/>
) : (
{!quiz.config.startpage.background.video ? (
<>
<ButtonBase
component="label"
<Box
sx={{
justifyContent: "center",
height: "48px",
width: "48px",
display: "flex",
alignItems: "center",
my: "20px",
gap: "7px",
mt: "20px",
mb: "14px",
}}
>
<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;
},
);
// setVideo(URL.createObjectURL(file));
}
setBackgroundUploading(false);
}}
hidden
accept=".mp4"
multiple
type="file"
/>
<UploadBox
icon={<UploadIcon />}
<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={{
height: "48px",
width: "48px",
height: "48px",
transform: "none",
margin: "20px 0",
}}
/>
</ButtonBase>
{quiz.config.startpage.background.video && (
<video
src={quiz.config.startpage.background.video}
width="400"
controls
/>
) : (
<>
<ButtonBase
component="label"
sx={{
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
View 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>
);
};

22
src/ui_kit/EmojiPicker.tsx
View File

@ -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",
];

131
src/ui_kit/MediaSelectionAndDisplay.tsx
View File

@ -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;
@ -167,67 +167,78 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
)}
{!resultData.content.useImage && (
<>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "7px",
mt: "20px",
mb: "14px",
}}
>
<Typography
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
>
Добавить видео
</Typography>
<Tooltip title="Можно загрузить видео." placement="top">
<Box>
<InfoIcon />
{!resultData.content.video ? (
<>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "7px",
mt: "20px",
mb: "14px",
}}
>
<Typography
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
>
Добавить видео
</Typography>
<Tooltip title="Можно загрузить видео." placement="top">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</Tooltip>
</Box>
<ButtonBase
component="label"
sx={{
justifyContent: "center",
height: "48px",
width: "48px",
display: "flex",
alignItems: "center",
my: "20px",
}}
>
<input
onChange={(event) => {
const file = event.target.files?.[0];
if (file) {
uploadQuestionImage(
resultData.id,
quizQid,
file,
(question, url) => {
question.content.video = url;
},
);
}
}}
hidden
accept=".mp4"
multiple
type="file"
/>
<UploadBox
icon={<UploadIcon />}
sx={{
height: "48px",
width: "48px",
<ButtonBase
component="label"
sx={{
justifyContent: "center",
height: "48px",
width: "48px",
display: "flex",
alignItems: "center",
my: "20px",
}}
>
<input
onChange={(event) => {
const file = event.target.files?.[0];
if (file) {
uploadQuestionImage(
resultData.id,
quizQid,
file,
(question, url) => {
question.content.video = url;
},
);
}
}}
hidden
accept=".mp4"
multiple
type="file"
/>
<UploadBox
icon={<UploadIcon />}
sx={{
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>