Finish road image display

- Remove frontend rotation (done during importation)
- Display all images
- Fix image rotation direction during importation

backend/src/images/image.service.ts

@@ -19,10 +19,9 @@ export class ImageService {
    * @author Kerbourc'h
    */
   formatImagePath(image: IImage) {
-    image.image_path = image.image_path.replace(
-      process.env.IMAGE_STORE_PATH,
-      '/cdn/',
-    );
+    image.image_path = image.image_path
+      .replace(process.env.IMAGE_STORE_PATH, '/cdn/')
+      .replace('/home/fish/images/', '/cdn/');
     return image;
   }
 

backend/src/upload/upload.service.ts

@@ -137,7 +137,7 @@ export class UploadService {
 
       const sourcePath = image.image_path;
       if (image.type !== 'DashCamera') {
-        await sharp(sourcePath).rotate(-90).toFile(destinationPath);
+        await sharp(sourcePath).rotate(90).toFile(destinationPath);
       } else {
         copyFileSync(sourcePath, destinationPath);
       }

frontend/src/Components/RoadDetails/RoadImage.tsx

@@ -3,7 +3,6 @@ import { IImage, IImageValuesForPixels } from '../../models/models';
 import { getImagesForASurvey, getImagesForWays } from '../../queries/images';
 
 import '../../css/road_image.css';
-import RotatedImage from './RotatedImage';
 import { useParams } from 'react-router-dom';
 
 interface Props {
@@ -186,7 +185,7 @@ const RoadImage: React.FC<Props> = ({
     }
 
     onRoadDistanceChange(getRoadDistances(currentlyVisibleImagesForPixels));
-  }, [containerRef, onRoadDistanceChange, displayedImages]);
+  }, [onRoadDistanceChange, displayedImages, type]);
 
   useEffect(() => {
     if (!hasFiltered) return;
@@ -231,26 +230,24 @@ const RoadImage: React.FC<Props> = ({
       <div className="border-road-image-surface-container">
         <div ref={containerRef} className="road-image-surface-container">
           {displayedImages.length > 0
-            ? displayedImages.slice(0, 25).map((image, index) => (
-                <div
-                  key={'div' + image.id}
+            ? displayedImages.map((image, index) => (
+                <img
+                  draggable={false}
+                  key={image.id}
+                  src={image.image_path}
                   className="road-image-surface-image"
                   data-image-id={image.id}
-                >
-                  <RotatedImage
-                    key={image.id}
-                    src={image.image_path}
-                    onLoad={() => {
-                      if (index === indexLastViewed) {
-                        setTimeout(() => {
-                          if (containerRef.current === null) return;
-                          const container = containerRef.current as HTMLElement;
-                          container.children[index].scrollIntoView();
-                        }, 20);
-                      }
-                    }}
-                  />
-                </div>
+                  onLoad={() => {
+                    if (index === indexLastViewed) {
+                      setTimeout(() => {
+                        if (containerRef.current === null) return;
+                        const container = containerRef.current as HTMLElement;
+                        container.children[index].scrollIntoView();
+                      }, 20);
+                    }
+                  }}
+                  alt={`Image n°${index}`}
+                />
               ))
             : null}
         </div>

frontend/src/css/road_image.css

@@ -54,6 +54,6 @@
   overflow-y: hidden;
 }
 
-.road-image-surface-image canvas {
+.road-image-surface-image {
   height: 100%;
 }