update collaboration mode and fix cropper

parlemonde · Feb 28, 2024 · 57e396d · 57e396d
1 parent f47ed6a
commit 57e396d
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 62 deletions.
diff --git a/public/black_bg/black_1600x900.jpg b/public/black_bg/black_1600x900.jpg
diff --git a/public/black_bg/black_1920x1080.jpg b/public/black_bg/black_1920x1080.jpg
diff --git a/public/black_bg/black_2560x1440.jpg b/public/black_bg/black_2560x1440.jpg
diff --git a/public/black_bg/black_3840x2160.jpg b/public/black_bg/black_3840x2160.jpg
diff --git a/public/black_bg/black_7680x4320.jpg b/public/black_bg/black_7680x4320.jpg
diff --git a/server/controllers/projects.ts b/server/controllers/projects.ts
@@ -252,6 +252,14 @@ projectController.post({ path: '/', userType: UserType.CLASS }, async (req, res,
         return;
     }
 
+    // set collaboration mode to false on each user project
+    await getConnection()
+        .createQueryBuilder()
+        .update(Project)
+        .set({ isCollaborationActive: false, joinCode: null })
+        .where({ userId: user.id, isCollaborationActive: true })
+        .execute();
+
     const data = req.body;
     if (!postProjectValidator(data)) {
         sendInvalidDataError(postProjectValidator);

diff --git a/server/translations/defaultLocales.ts b/server/translations/defaultLocales.ts
@@ -284,8 +284,8 @@ export const locales = {
     validation_return_back: "Êtes-vous sûr de vouloir retourner à l'étape précédente ? Vous risquez de perdre le travail en cours.",
     // -- Collaboration -- 
     collaboration_alert_modal_student_content_feedback: 'Le professeur vous a fait des retours. Regardez les et modifiez votre travail, puis renvoyer le à validation.',
-    collaboration_alert_modal_student_content_premounting: 'Le professeur à valider votre travail. Vous avez terminé, bravo !',
-    collaboration_alert_modal_student_content_storyboard: 'Le professeur à valider votre travail. Vous pouvez passer à l\'étape n°4.',
+    collaboration_alert_modal_student_content_premounting: 'Le professeur a validé votre travail. Vous avez terminé, bravo !',
+    collaboration_alert_modal_student_content_storyboard: 'Le professeur a validé votre travail. Vous pouvez passer à l\'étape suivante !',
     collaboration_alert_modal_student_title_feedback: 'Retour du professeur',
     collaboration_alert_modal_student_title_ok: 'Validation du professeur',
     collaboration_alert_modal_teacher_content: 'Le groupe d\'élèves affecté à la <span style="color: {{color}}">séquence n° {{sequency}}</span> a terminé la partie <b>{{step}}</b>. Vous pouvez vérifier leur travail.',

diff --git a/src/components/collaboration/AlertModal.tsx b/src/components/collaboration/AlertModal.tsx
@@ -7,6 +7,7 @@ import { useCurrentProject } from 'src/hooks/useCurrentProject';
 import { useTranslation } from 'src/i18n/useTranslation';
 import { COLORS } from 'src/utils/colors';
 import { useQueryNumber, useQueryString } from 'src/utils/useQueryId';
+import type { Question } from 'types/models/question.type';
 import { QuestionStatus } from 'types/models/question.type';
 
 export const AlertModal: React.FunctionComponent = () => {
@@ -44,11 +45,16 @@ export const AlertModal: React.FunctionComponent = () => {
             setModalContent(t('collaboration_alert_modal_student_content_feedback'));
         } else {
             setModalTitle(t('collaboration_alert_modal_student_title_ok'));
-            const status =
-                project !== undefined && sequency !== undefined && project.questions !== undefined
-                    ? project?.questions[sequency]?.status || QuestionStatus.ONGOING
-                    : QuestionStatus.ONGOING;
-            setModalContent(t(`collaboration_alert_modal_student_content_${status === QuestionStatus.ONGOING ? 'storyboard' : 'premounting'}`));
+
+            let status = 'storyboard';
+            if (project !== undefined && sequency !== undefined && project.questions !== undefined) {
+                const questions: Question[] = project.questions;
+                const question: Question | undefined = questions.find((q) => q.index === sequency);
+                if (question !== undefined) {
+                    status = question.status !== undefined && question.status < QuestionStatus.SUBMITTED ? 'storyboard' : 'premounting';
+                }
+            }
+            setModalContent(t(`collaboration_alert_modal_student_content_${status}`));
         }
         setShowModal(true);
     };

diff --git a/src/components/create/DiaporamaPlayer/DiaporamaPlayer.tsx b/src/components/create/DiaporamaPlayer/DiaporamaPlayer.tsx
@@ -391,13 +391,13 @@ export const DiaporamaPlayer = ({
                                         if (Math.abs(delta) < 1000 * count) {
                                             updateLastDuration(delta);
                                         } else {
-                                            const dt = delta / count;
+                                            const dt = newDuration / count;
                                             const plans = question.plans || [];
                                             const newTitle = question.title;
                                             if (newTitle) {
-                                                newTitle.duration += dt;
+                                                newTitle.duration = dt;
                                             }
-                                            const newPlans = plans.map((plan) => ({ ...plan, duration: (plan.duration || 0) + dt }));
+                                            const newPlans = plans.map((plan) => ({ ...plan, duration: dt }));
                                             const newQuestion = {
                                                 ...questions[0],
                                                 plans: newPlans,

diff --git a/src/components/create/ProjectCard/ProjectCard.tsx b/src/components/create/ProjectCard/ProjectCard.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import styles from './project-card.module.scss';
 import { IconButton } from 'src/components/layout/Button/IconButton';
 import { Title } from 'src/components/layout/Typography';
+import { useCollaboration } from 'src/hooks/useCollaboration';
 import { useTranslation } from 'src/i18n/useTranslation';
 
 type ProjectCardProps = {
@@ -17,8 +18,10 @@ type ProjectCardProps = {
 };
 export const ProjectCard = ({ title = '', themeName = '', href, onClickEdit, className }: ProjectCardProps) => {
     const { t } = useTranslation();
+    const { setIsCollaborationActive } = useCollaboration();
+
     return (
-        <Link href={href} className={classNames(styles.ProjectCard, className)}>
+        <Link href={href} className={classNames(styles.ProjectCard, className)} onClick={() => setIsCollaborationActive(false)}>
             <Title color="primary" variant="h3" className="text-center">
                 {title}
             </Title>

diff --git a/src/components/create/SaveProjectModal.tsx b/src/components/create/SaveProjectModal.tsx
@@ -5,6 +5,7 @@ import { Field, Form, Input } from '../layout/Form';
 import { Modal } from '../layout/Modal';
 import { sendToast } from '../ui/Toasts';
 import { useCreateProjectMutation } from 'src/api/projects/projects.post';
+import { useCollaboration } from 'src/hooks/useCollaboration';
 import { useCurrentProject } from 'src/hooks/useCurrentProject';
 import { useTranslation } from 'src/i18n/useTranslation';
 
@@ -19,6 +20,7 @@ export const SaveProjectModal = ({ isOpen, onClose }: SaveProjectModalProps) =>
 
     const [title, setTitle] = React.useState('');
     const createProjectMutation = useCreateProjectMutation();
+    const { setIsCollaborationActive } = useCollaboration();
 
     const onCreateProject = async () => {
         if (!project) {
@@ -32,6 +34,7 @@ export const SaveProjectModal = ({ isOpen, onClose }: SaveProjectModalProps) =>
         }
 
         try {
+            setIsCollaborationActive(false);
             const newProject = await createProjectMutation.mutateAsync({
                 title,
                 themeId: project.themeId,

diff --git a/src/components/ui/ImageCropper/ImageCropper.tsx b/src/components/ui/ImageCropper/ImageCropper.tsx
@@ -7,7 +7,7 @@ import Cropper from 'react-easy-crop';
 import { Button } from 'src/components/layout/Button';
 import { Modal } from 'src/components/layout/Modal';
 import { Title } from 'src/components/layout/Typography';
-import getCroppedImg, { getMeta } from 'src/utils/crop-image';
+import getCroppedImg, { getMergeImagesParams, getMeta } from 'src/utils/crop-image';
 
 type ImageCropperProps = {
     image: string | null;
@@ -43,15 +43,7 @@ export const ImageCropper: React.FunctionComponent<ImageCropperProps> = ({ image
                     if (err) throw new Error(err instanceof Event ? err.toString() : err);
                     if (img === null) return;
 
-                    const imgHeight = img.naturalHeight;
-                    const imgWidth = img.naturalWidth;
-
-                    const params = [
-                        { src: '/black.jpg', x: 0, y: 0 }, // 1920 * 1080
-                        { src: url, x: imgWidth < 1920 ? (1920 - imgWidth) / 2 : imgWidth, y: imgHeight < 1080 ? (1080 - imgHeight) / 2 : imgHeight },
-                    ];
-
-                    mergeImages(params).then((base64: string) => setImageUrl(base64));
+                    mergeImages(getMergeImagesParams(img, url)).then((base64: string) => setImageUrl(base64));
                 });
             } catch (error) {
                 console.error(error);

diff --git a/src/pages/create/2-questions/index.tsx b/src/pages/create/2-questions/index.tsx
@@ -284,7 +284,7 @@ const QuestionsPage = () => {
                                             <QRCode
                                                 size={256}
                                                 style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
-                                                value={`{ teacherId: ${user.id}, sequencyId: ${q.id}, projectId: ${project.id} }`}
+                                                value={`{ "teacherId": ${user.id}, "sequencyId": ${q.id}, "projectId": ${project.id} }`}
                                                 viewBox={`0 0 256 256`}
                                             />
                                         </div>

diff --git a/src/pages/create/3-storyboard/edit.tsx b/src/pages/create/3-storyboard/edit.tsx
@@ -33,7 +33,7 @@ import { useCollaboration } from 'src/hooks/useCollaboration';
 import { useCurrentProject } from 'src/hooks/useCurrentProject';
 import { useSocket } from 'src/hooks/useSocket';
 import { useTranslation } from 'src/i18n/useTranslation';
-import getCroppedImg, { getMeta } from 'src/utils/crop-image';
+import getCroppedImg, { getMergeImagesParams, getMeta } from 'src/utils/crop-image';
 import { serializeToQueryUrl } from 'src/utils/serializeToQueryUrl';
 import { isString } from 'src/utils/type-guards/is-string';
 import { useQueryNumber } from 'src/utils/useQueryId';
@@ -209,15 +209,7 @@ const EditPlan = () => {
                     if (err) throw new Error(err instanceof Event ? err.toString() : err);
                     if (img === null) return;
 
-                    const imgHeight = img.naturalHeight;
-                    const imgWidth = img.naturalWidth;
-
-                    const params = [
-                        { src: '/black.jpg', x: 0, y: 0 }, // 1920 * 1080
-                        { src: url, x: imgWidth < 1920 ? (1920 - imgWidth) / 2 : imgWidth, y: imgHeight < 1080 ? (1080 - imgHeight) / 2 : imgHeight },
-                    ];
-
-                    mergeImages(params).then((base64: string) => setTemporaryImageUrl(base64));
+                    mergeImages(getMergeImagesParams(img, url)).then((base64: string) => setTemporaryImageUrl(base64));
                 });
             } catch (error) {
                 console.error(error);

diff --git a/src/pages/join.tsx b/src/pages/join.tsx
@@ -75,31 +75,23 @@ const LoginPage = () => {
 
     /* eslint-disable @typescript-eslint/no-explicit-any */
     const QrReaderResult = async (result: any) => {
-        if (result) {
-            const loginData = JSON.parse(result);
+        if (result && result.text) {
+            try {
+                const loginData = JSON.parse(result.text);
 
-            if (loginData.projectId && loginData.sequencyId && loginData.teacherId) {
-                postLoginStudent({
-                    projectId: loginData.projectId,
-                    sequencyId: loginData.sequencyId,
-                    teacherId: loginData.teacherId,
-                });
+                if (loginData.projectId && loginData.sequencyId && loginData.teacherId) {
+                    postLoginStudent({
+                        projectId: loginData.projectId,
+                        sequencyId: loginData.sequencyId,
+                        teacherId: loginData.teacherId,
+                    });
+                }
+            } catch (e) {
+                console.error(e);
             }
         }
     };
 
-    // TODO: Remove this code before MEP - START
-    // const testStudentLogin = async (e: Event) => {
-    //     e.preventDefault();
-    //     // change this with your ids to test
-    //     postLoginStudent({
-    //         projectId: 1,
-    //         sequencyId: 1,
-    //         teacherId: 2,
-    //     });
-    // };
-    // TODO: Remove this code before MEP - STOP
-
     const toggleShowQrReader = () => {
         setShowQrReader(!showQrReader);
     };
@@ -145,27 +137,19 @@ const LoginPage = () => {
                                 }}
                                 isFullWidth
                                 required
+                                className="inputNumber-withoutArrow"
                             />
                         }
                     ></Field>
                     <Button label="Rejoindre" variant="contained" color="secondary" type="submit" value="Submit"></Button>
-                    {/* // TODO: Remove this code before MEP - START */}
-                    {/* <Button
-                        variant="outlined"
-                        color="secondary"
-                        type="submit"
-                        value="button"
-                        onClick={testStudentLogin}
-                        label="Simulation de connexion par QRCode"
-                    ></Button> */}
-                    {/* // TODO: Remove this code before MEP - STOP */}
                     <MobileView>
                         <Button
                             variant="outlined"
                             color="secondary"
                             type="button"
                             onClick={toggleShowQrReader}
                             label={t(`collaboration_qrcode_scan_${showQrReader ? 'hide' : 'show'}`)}
+                            style={{ width: '100%', marginBottom: '10px' }}
                         ></Button>
                         {showQrReader && <QrReader onResult={QrReaderResult} constraints={{ facingMode: 'environment' }} />}
                     </MobileView>
@@ -181,6 +165,7 @@ const LoginPage = () => {
                                 key={index}
                             >
                                 <p>{t('collaboration_join_sequency_number', { sequency: index + 1 })}</p>
+                                <p>{q.question}</p>
                                 <div style={{ height: '150px', width: '150px', backgroundColor: COLORS[index] }}></div>
                             </div>
                         );

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -421,3 +421,16 @@ p {
       }
     }
 }
+
+.inputNumber-withoutArrow {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+}
diff --git a/src/utils/crop-image.tsx b/src/utils/crop-image.tsx
@@ -88,3 +88,39 @@ export default async function getCroppedImg(imageSrc: string, pixelCrop: Area, r
         // }, 'image/jpeg');
     });
 }
+
+type MERGE_IMAGE = { src: string; x: number; y: number };
+
+const MERGE_IMAGE_OPTIONS: MERGE_IMAGE[] = [
+    { src: '/black_bg/black_1600x900.jpg', x: 1600, y: 900 },
+    { src: '/black_bg/black_1920x1080.jpg', x: 1920, y: 1080 },
+    { src: '/black_bg/black_2560x1440.jpg', x: 2560, y: 1440 },
+    { src: '/black_bg/black_3840x2160.jpg', x: 3840, y: 2160 },
+    { src: '/black_bg/black_7680x4320.jpg', x: 7680, y: 4320 },
+];
+
+export const getMergeImagesParams = (img: HTMLImageElement, url: string): MERGE_IMAGE[] => {
+    let option: MERGE_IMAGE = MERGE_IMAGE_OPTIONS[0];
+
+    const imgWidth = img.naturalWidth;
+    const imgHeight = img.naturalHeight;
+
+    if (imgWidth > 3840 || imgHeight > 2160) {
+        option = MERGE_IMAGE_OPTIONS[4];
+    } else if (imgWidth > 2560 || imgHeight > 1440) {
+        option = MERGE_IMAGE_OPTIONS[3];
+    } else if (imgWidth > 1920 || imgHeight > 1080) {
+        option = MERGE_IMAGE_OPTIONS[2];
+    } else if (imgWidth > 1600 || imgHeight > 900) {
+        option = MERGE_IMAGE_OPTIONS[1];
+    }
+
+    return [
+        { src: option.src, x: 0, y: 0 },
+        {
+            src: url,
+            x: imgWidth < option.x ? (option.x - imgWidth) / 2 : 0,
+            y: imgHeight < option.y ? (option.y - imgHeight) / 2 : 0,
+        },
+    ];
+};