Merge pull request #1018 from parlemonde/VIL-580-Zoom-PDF

PDF zoom feature

docker-compose-windows.yml

@@ -1,27 +1,35 @@
-# services:
-#   mysql:
-#     image: mysql:8
-#     environment:
-#       - MYSQL_ROOT_PASSWORD=my-secret-pw
-#     healthcheck:
-#       test: [ 'CMD', 'mysqladmin', 'ping', '-h', 'localhost' ]
-#       timeout: 20s
-#       retries: 10
-#     ports:
-#       - '3306:3306'
-#       - '33060:33060'
-#     volumes:
-#       - ./.mysql-data:/var/lib/mysql
-#   minio:
-#     image: minio/minio
-#     ports:
-#       - '9000:9000'
-#       - '9090:9090'
-#     environment:
-#       - MINIO_ROOT_USER=minioadmin
-#       - MINIO_ROOT_PASSWORD=minioadmin
-#       - MINIO_ACCESS_KEY=minio
-#       - MINIO_SECRET_KEY=minio123
-#     volumes:
-#       - ./.minio-data:/data
-#     command: server --console-address ":9090" /data
+services:
+  mysql:
+    image: mysql:8
+    environment:
+      - MYSQL_ROOT_PASSWORD=my-secret-pw
+    healthcheck:
+      test: ['CMD', 'mysqladmin', 'ping', '-h', 'localhost']
+      timeout: 20s
+      retries: 10
+    ports:
+      - '3306:3306'
+      - '33060:33060'
+    volumes:
+      - ./.mysql-data:/var/lib/mysql
+  minio:
+    image: minio/minio
+    ports:
+      - '9000:9000'
+      - '9090:9090'
+    environment:
+      - MINIO_ROOT_USER=minioadmin
+      - MINIO_ROOT_PASSWORD=minioadmin
+      - MINIO_ACCESS_KEY=minio
+      - MINIO_SECRET_KEY=minio123
+    volumes:
+      - ./.minio-data:/data
+    command: server --console-address ":9090" /data
+  dynamodb:
+    command: '-jar DynamoDBLocal.jar -sharedDb -dbPath ./data'
+    image: 'amazon/dynamodb-local:latest'
+    ports:
+      - '8000:8000'
+    volumes:
+      - './.dynamodb:/home/dynamodblocal/data'
+    working_dir: /home/dynamodblocal

docker-compose.yml

@@ -43,7 +43,7 @@ services:
       timeout: 20s
       retries: 10
     ports:
-      - '3307:3306'
+      - '3306:3306'
       - '33060:33060'
     volumes:
       - ./.mysql-data:/var/lib/mysql

src/components/activities/content/views/DocumentView.tsx

@@ -2,11 +2,14 @@ import React from 'react';
 
 import type { ViewProps } from '../content.types';
 import PdfDisplay from '../editors/DocumentEditor/PdfDisplay';
+import { LightBox } from 'src/components/lightbox/Lightbox';
 
 export const DocumentView = ({ value = '' }: ViewProps) => {
   return (
     <div style={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
-      <PdfDisplay url={value} />
+      <LightBox url={value} isPDF>
+        <PdfDisplay url={value} />
+      </LightBox>
     </div>
   );
 };

src/components/lightbox/Lightbox.tsx

@@ -1,16 +1,26 @@
 import Image from 'next/image';
-import * as React from 'react';
+import React, { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
 
 import { Modal } from '../Modal';
 
 type LightBoxProps = {
   url: string;
   children: JSX.Element;
+  isPDF?: boolean;
 };
 
-export const LightBox = ({ url, children }: LightBoxProps) => {
+export const LightBox = ({ url, children, isPDF }: LightBoxProps) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
+  const options = {
+    cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
+  };
+
+  const [numPages, setNumPages] = useState<number>(1);
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
+    setNumPages(numPages);
+  }
   return (
     <>
       <div onClick={() => setIsModalOpen(true)} style={{ cursor: 'pointer' }}>
@@ -27,7 +37,23 @@ export const LightBox = ({ url, children }: LightBoxProps) => {
         ariaLabelledBy="lightBox-modal-title"
         ariaDescribedBy="lightBox-modal-description"
       >
-        <Image layout="responsive" objectFit="contain" width="100%" height="70%" alt="" unoptimized src={url} />
+        {isPDF ? (
+          <Document options={options} file={url} onLoadSuccess={onDocumentLoadSuccess}>
+            {Array.from(Array(numPages).keys()).map((v) => (
+              <div
+                key={v}
+                style={{
+                  marginTop: 10,
+                  marginBottom: 10,
+                }}
+              >
+                <Page width={430} scale={2.0} pageNumber={v + 1} />
+              </div>
+            ))}
+          </Document>
+        ) : (
+          <Image layout="responsive" objectFit="contain" width="100%" height="70%" alt="" unoptimized src={url} />
+        )}
       </Modal>
     </>
   );

src/pages/contenu-libre/2.tsx

@@ -31,7 +31,7 @@ const ContenuLibre = () => {
 
   const data = (activity?.data as FreeContentData) || null;
   const errorSteps = React.useMemo(() => {
-    if (activity !== null && activity.content.filter((c) => c.value.length > 0 && c.value !== '<p></p>\n').length === 0) {
+    if (activity !== null && activity.content.filter((c) => c.value && c.value.length > 0 && c.value !== '<p></p>\n').length === 0) {
       return [0];
     }
     return [];

src/pages/contenu-libre/3.tsx

@@ -30,7 +30,7 @@ const ContenuLibre = () => {
   const errorSteps = React.useMemo(() => {
     const errors: number[] = [];
     const data = (activity?.data as FreeContentData) || null;
-    if (activity !== null && activity.content.filter((c) => c.value.length > 0 && c.value !== '<p></p>\n').length === 0) {
+    if (activity !== null && activity.content.filter((c) => c.value && c.value.length > 0 && c.value !== '<p></p>\n').length === 0) {
       errors.push(0);
     }
     if (data !== null && (!data.title || !data.resume)) {