From 7ea570b2cd08bd774bcbe32d5b3e262fbc690ecf Mon Sep 17 00:00:00 2001
From: tognee <tognee64@gmail.com>
Date: Mon, 19 Jun 2023 22:05:52 +0200
Subject: [PATCH] PoC image rotation in frontend

---
 src/actions/photosActions.ts        | 25 ++++++++++++++++++-
 src/components/lightbox/Toolbar.tsx | 37 +++++++++++++++++++++++++++--
 src/locales/en/translation.json     |  4 +++-
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/actions/photosActions.ts b/src/actions/photosActions.ts
index 33be203b..6aeefcea 100644
--- a/src/actions/photosActions.ts
+++ b/src/actions/photosActions.ts
@@ -4,7 +4,7 @@ import type { Dispatch } from "redux";
 import { z } from "zod";
 
 // eslint-disable-next-line import/no-cycle
-import { Server } from "../api_client/apiClient";
+import { Server, serverAddress } from "../api_client/apiClient";
 import i18n from "../i18n";
 // eslint-disable-next-line import/no-cycle
 import { PhotosetType } from "../reducers/photosReducer";
@@ -635,3 +635,26 @@ export function editPhoto(image_hash: string, photo_details: any) {
       });
   };
 }
+
+export function rotatePhoto(image_hash: string, angle: number, flip: boolean = false) {
+  return function (dispatch: Dispatch<any>) {
+    Server.post("photosedit/rotate", { image_hash: image_hash, angle: angle, flip: flip })
+      .then(() => {
+        dispatch({ type: "ROTATE_PHOTO_FULFILLED" });
+        dispatch(fetchPhotoDetail(image_hash));
+        showNotification({
+          message: i18n.t<string>("toasts.rotatephoto"),
+          title: i18n.t<string>("toasts.rotateupdate"),
+          color: "teal",
+        });
+        // Reset the cache
+        fetch(`${serverAddress}/media/thumbnails_big/${image_hash}`, {cache: 'reload', credentials: 'include'});
+        fetch(`${serverAddress}/media/square_thumbnails/${image_hash}`, {cache: 'reload', credentials: 'include'});
+        fetch(`${serverAddress}/media/square_thumbnails_small/${image_hash}`, {cache: 'reload', credentials: 'include'});
+      })
+      .catch(error => {
+        dispatch({ type: "ROTATE_PHOTO_REJECTED" });
+        console.error(error);
+      });
+  };
+}
\ No newline at end of file
diff --git a/src/components/lightbox/Toolbar.tsx b/src/components/lightbox/Toolbar.tsx
index 92a95132..0b3818f8 100644
--- a/src/components/lightbox/Toolbar.tsx
+++ b/src/components/lightbox/Toolbar.tsx
@@ -1,8 +1,8 @@
 import { ActionIcon, Group, Loader } from "@mantine/core";
 import React from "react";
-import { Eye, EyeOff, Globe, InfoCircle, PlayerPause, PlayerPlay, Star } from "tabler-icons-react";
+import { Eye, EyeOff, Globe, InfoCircle, PlayerPause, PlayerPlay, Star, RotateClockwise2, Rotate2 } from "tabler-icons-react";
 
-import { setPhotosFavorite, setPhotosHidden, setPhotosPublic } from "../../actions/photosActions";
+import { rotatePhoto, setPhotosFavorite, setPhotosHidden, setPhotosPublic } from "../../actions/photosActions";
 import { shareAddress } from "../../api_client/apiClient";
 import { playerActions } from "../../store/player/playerSlice";
 import { useAppDispatch, useAppSelector } from "../../store/store";
@@ -42,6 +42,17 @@ export function Toolbar(props: Props) {
 
   return (
     <Group style={{ paddingBottom: 10, paddingRight: 5 }}>
+
+      {!photosDetail && (
+        <ActionIcon loading disabled={isPublic}>
+          <Rotate2 color="grey" />
+        </ActionIcon>
+      )}
+      {!photosDetail && (
+        <ActionIcon loading disabled={isPublic}>
+          <RotateClockwise2 color="grey" />
+        </ActionIcon>
+      )}
       {!photosDetail && (
         <ActionIcon loading disabled={isPublic}>
           <Eye color="grey" />
@@ -58,6 +69,28 @@ export function Toolbar(props: Props) {
         </ActionIcon>
       )}
       {playButton(photosDetail)}
+      {photosDetail && (
+        <ActionIcon
+          disabled={isPublic}
+          onClick={() => {
+            const { image_hash: imageHash } = photosDetail;
+            dispatch(rotatePhoto(imageHash, -90));
+          }}
+        >
+          <Rotate2 color="grey" />
+        </ActionIcon>
+      )}
+      {photosDetail && (
+        <ActionIcon
+          disabled={isPublic}
+          onClick={() => {
+            const { image_hash: imageHash } = photosDetail;
+            dispatch(rotatePhoto(imageHash, 90));
+          }}
+        >
+          <RotateClockwise2 color="grey" />
+        </ActionIcon>
+      )}
       {photosDetail && (
         <ActionIcon
           disabled={isPublic}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 0c7ea7c5..d224c6cc 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -595,7 +595,9 @@
         "removefacestoperson": "{{numberOfFaces}} face(s) were moved to 'Unknown - Other'",
         "removefacestopersontitle": "Remove faces from person",
         "savecaptions": "Image caption updated successfully",
-        "captionupdate": "Update Caption"
+        "captionupdate": "Update Caption",
+        "rotatephoto": "Photo rotated successfully",
+        "rotateupdate": "Rotate photo"
     },
     "rules": {
         "1": "Local time from DATE_TIME_ORIGINAL exif tag",