From 6b25ad6780e18a2d6e263ba83864698119f25f52 Mon Sep 17 00:00:00 2001 From: Varun Patil Date: Sun, 16 Apr 2023 11:13:58 -0700 Subject: [PATCH] editor: improve edit propagation Signed-off-by: Varun Patil --- lib/Controller/ImageController.php | 9 +++++---- src/components/viewer/ImageEditor.vue | 22 +++++++++++++--------- src/components/viewer/Viewer.vue | 2 -- src/services/utils/helpers.ts | 17 ++++++++++++++++- src/types.ts | 2 ++ 5 files changed, 36 insertions(+), 16 deletions(-) diff --git a/lib/Controller/ImageController.php b/lib/Controller/ImageController.php index 4c8f6a0e..6d5814ea 100644 --- a/lib/Controller/ImageController.php +++ b/lib/Controller/ImageController.php @@ -190,6 +190,10 @@ class ImageController extends GenericApiController // Get the image info $info = $this->timelineQuery->getInfoById($file->getId(), $basic); + // Add fileid and etag + $info['fileid'] = $file->getId(); + $info['etag'] = $file->getEtag(); + // Allow these ony for logged in users if (null !== $this->userSession->getUser()) { // Get list of tags for this file @@ -347,10 +351,7 @@ class ImageController extends GenericApiController // Make sure the preview is updated \OC::$server->get(\OCP\IPreview::class)->getPreview($file); - return new JSONResponse([ - 'fileid' => $file->getId(), - 'etag' => $file->getEtag(), - ], Http::STATUS_OK); + return $this->info((string) $file->getId(), true); }); } diff --git a/src/components/viewer/ImageEditor.vue b/src/components/viewer/ImageEditor.vue index 9c19937a..23ae89da 100644 --- a/src/components/viewer/ImageEditor.vue +++ b/src/components/viewer/ImageEditor.vue @@ -19,7 +19,7 @@ import { FilerobotImageEditorConfig } from "react-filerobot-image-editor"; import translations from "./ImageEditorTranslations"; import { API } from "../../services/API"; -import { IPhoto } from "../../types"; +import { IImageInfo, IPhoto } from "../../types"; import * as utils from "../../services/Utils"; import { fetchImage } from "../frame/XImgCache"; @@ -234,14 +234,17 @@ export default defineComponent({ } try { - const res = await axios.put(API.IMAGE_EDIT(this.photo.fileid), { - name: name, - width: data.width, - height: data.height, - quality: data.quality, - extension: data.extension, - state: state, - }); + const res = await axios.put( + API.IMAGE_EDIT(this.photo.fileid), + { + name: name, + width: data.width, + height: data.height, + quality: data.quality, + extension: data.extension, + state: state, + } + ); const fileid = res.data.fileid; // Success, emit an appropriate event @@ -250,6 +253,7 @@ export default defineComponent({ if (fileid !== this.photo.fileid) { emit("files:file:created", { fileid }); } else { + utils.updatePhotoFromImageInfo(this.photo, res.data); emit("files:file:updated", { fileid }); } this.onClose(undefined, false); diff --git a/src/components/viewer/Viewer.vue b/src/components/viewer/Viewer.vue index 336f397a..a5378718 100644 --- a/src/components/viewer/Viewer.vue +++ b/src/components/viewer/Viewer.vue @@ -398,8 +398,6 @@ export default defineComponent({ const photo = this.currentPhoto; const isvideo = photo && photo.flag & this.c.FLAG_IS_VIDEO; if (photo && !isvideo && photo.fileid === fileid) { - photo.etag += "_"; - photo.imageInfo = null; this.photoswipe.refreshSlideContent(this.currIndex); } }, diff --git a/src/services/utils/helpers.ts b/src/services/utils/helpers.ts index 76787496..b5ae5120 100644 --- a/src/services/utils/helpers.ts +++ b/src/services/utils/helpers.ts @@ -1,4 +1,4 @@ -import { IPhoto } from "../../types"; +import { IImageInfo, IPhoto } from "../../types"; import { API } from "../API"; /** Get preview URL from photo object */ @@ -25,6 +25,21 @@ export function getPreviewUrl( }); } +/** + * Update photo object using imageInfo. + */ +export function updatePhotoFromImageInfo(photo: IPhoto, imageInfo: IImageInfo) { + photo.etag = imageInfo.etag; + photo.basename = imageInfo.basename; + photo.mimetype = imageInfo.mimetype; + photo.w = imageInfo.w; + photo.h = imageInfo.h; + photo.imageInfo = { + ...photo.imageInfo, + ...imageInfo, + }; +} + /** * Get the path of the folder on folders route * This function does not check if this is the folder route diff --git a/src/types.ts b/src/types.ts index 7d69b663..a11c39d5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -76,6 +76,8 @@ export type IPhoto = { }; export interface IImageInfo { + fileid: number; + etag: string; h: number; w: number; datetaken: number;