From 04cc70406318e59f201ff79b9835ac2a4ca11ac6 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Sun, 20 Aug 2023 11:24:25 -0700
Subject: [PATCH] editor: more crop options (fix #546)

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 CHANGELOG.md                          |  1 +
 src/components/viewer/ImageEditor.vue | 28 +++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1fc55ed8..03fd60b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
 - **Feature**: Allow disabling autoplay of live photo ([#591](https://github.com/pulsejet/memories/issues/591))
 - **Feature**: Improvements in admin interface
 - **Feature**: A `.nomemories` file will now hide a folder from Memories without affecting other apps ([#777](https://github.com/pulsejet/memories/issues/777))
+- **Feature**: More crop options for image editor ([#546](https://github.com/pulsejet/memories/issues/546))
 - **Bugfix**: You can now configure the transpose strategy of the transcoder (required for QSV)
 
 ## [v5.2.1] - 2023-07-03
diff --git a/src/components/viewer/ImageEditor.vue b/src/components/viewer/ImageEditor.vue
index 53793a00..a423e7ce 100644
--- a/src/components/viewer/ImageEditor.vue
+++ b/src/components/viewer/ImageEditor.vue
@@ -18,6 +18,11 @@ import { IImageInfo, IPhoto } from '../../types';
 import * as utils from '../../services/Utils';
 import { fetchImage } from '../frame/XImgCache';
 
+// Crop preset icons
+import LandscapeIcon from '@scaleflex/icons/landscape';
+import PortraitIcon from '@scaleflex/icons/portrait';
+import SquareIcon from '@scaleflex/icons/square';
+
 let TABS, TOOLS: any;
 type FilerobotImageEditor = import('filerobot-image-editor').default;
 let FilerobotImageEditor: typeof import('filerobot-image-editor').default;
@@ -79,6 +84,29 @@ export default defineComponent({
           componentType: 'buttons',
         },
 
+        Crop: {
+          presetsItems: [
+            {
+              titleKey: 'landscape',
+              descriptionKey: '4:3',
+              ratio: 4 / 3,
+              icon: LandscapeIcon,
+            },
+            {
+              titleKey: 'portrait',
+              descriptionKey: '3:4',
+              ratio: 3 / 4,
+              icon: PortraitIcon,
+            },
+            {
+              titleKey: 'square',
+              descriptionKey: '1:1',
+              ratio: 1,
+              icon: SquareIcon,
+            },
+          ],
+        },
+
         // Translations
         translations,