Frontend: Soft-update extended description and image notes

Prevent reloading the media after saving
AgustinSRG · Oct 17, 2024 · b3e5a8a · b3e5a8a
1 parent 2f4c118
commit b3e5a8a
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 16 deletions.
diff --git a/frontend/src/api/api-media-edit.ts b/frontend/src/api/api-media-edit.ts
@@ -200,7 +200,7 @@ export type SetImageNotesErrorHandler = MediaEditApiErrorHandler & {
  * @param notes List of image notes
  * @returns The request parameters
  */
-export function apiMediaSetNotes(id: number, notes: ImageNote[]): RequestParams<void, SetImageNotesErrorHandler> {
+export function apiMediaSetNotes(id: number, notes: ImageNote[]): RequestParams<ChangeAssetResponse, SetImageNotesErrorHandler> {
     return {
         method: "POST",
         url: getApiURL(`${API_PREFIX}${API_GROUP_PREFIX}/${encodeURIComponent(id + "")}/edit/notes`),
@@ -234,7 +234,10 @@ export type SetExtendedDescriptionErrorHandler = MediaEditApiErrorHandler & {
  * @param extendedDesc Extended description
  * @returns The request parameters
  */
-export function apiMediaSetExtendedDescription(id: number, extendedDesc: string): RequestParams<void, SetExtendedDescriptionErrorHandler> {
+export function apiMediaSetExtendedDescription(
+    id: number,
+    extendedDesc: string,
+): RequestParams<ChangeAssetResponse, SetExtendedDescriptionErrorHandler> {
     return {
         method: "POST",
         url: getApiURL(`${API_PREFIX}${API_GROUP_PREFIX}/${encodeURIComponent(id + "")}/edit/ext_desc`),
@@ -270,11 +273,11 @@ export type SetThumbnailErrorHandler = MediaEditApiErrorHandler & {
 };
 
 /**
- * Response of the thumbnail change API
+ * Response of an API that changes an asset (eg: thumbnail)
  */
-export interface ChangeThumbnailResponse {
+export interface ChangeAssetResponse {
     /**
-     * New thumbnail URL
+     * New asset URL
      */
     url: string;
 }
@@ -285,10 +288,7 @@ export interface ChangeThumbnailResponse {
  * @param thumbnail Thumbnail file to upload
  * @returns The request parameters
  */
-export function apiMediaChangeMediaThumbnail(
-    id: number,
-    thumbnail: File,
-): RequestParams<ChangeThumbnailResponse, SetThumbnailErrorHandler> {
+export function apiMediaChangeMediaThumbnail(id: number, thumbnail: File): RequestParams<ChangeAssetResponse, SetThumbnailErrorHandler> {
     const form = new FormData();
     form.append("file", thumbnail);
     return {

diff --git a/frontend/src/components/player/AudioPlayer.vue b/frontend/src/components/player/AudioPlayer.vue
@@ -165,6 +165,7 @@
             v-model:display="displayExtendedDescriptionStatus"
             :contextOpen="contextMenuShown"
             @clicked="clickControls"
+            @update-ext-desc="refreshExtendedDescription"
         ></ExtendedDescriptionWidget>
 
         <div
@@ -1917,6 +1918,10 @@ export default defineComponent({
             this.updateCurrentTimeSlice();
         },
 
+        refreshExtendedDescription: function () {
+            this.hasExtendedDescription = !!this.metadata.ext_desc_url;
+        },
+
         getThumbnail(thumb: string) {
             return getAssetURL(thumb);
         },

diff --git a/frontend/src/components/player/ExtendedDescriptionWidget.vue b/frontend/src/components/player/ExtendedDescriptionWidget.vue
@@ -58,7 +58,7 @@ export default defineComponent({
         LoadingOverlay,
     },
     name: "ExtendedDescriptionWidget",
-    emits: ["update:display", "tags-update", "clicked"],
+    emits: ["update:display", "clicked", "update-ext-desc"],
     props: {
         display: Boolean,
         contextOpen: Boolean,
@@ -68,6 +68,7 @@ export default defineComponent({
         return {
             loadRequestId: getUniqueStringId(),
             displayStatus: useVModel(props, "display"),
+            busyTimeout: null,
         };
     },
     data: function () {
@@ -83,7 +84,10 @@ export default defineComponent({
             contentStored: "",
 
             loading: true,
+
             busy: false,
+            busyDisplayLoad: false,
+
             canWrite: AuthController.CanWrite,
 
             baseFontSize: getExtendedDescriptionSize(),
@@ -127,7 +131,7 @@ export default defineComponent({
                     buttons.push({
                         id: "save",
                         name: this.$t("Save changes"),
-                        icon: "fas fa-check",
+                        icon: this.busyDisplayLoad ? "fa fa-spinner fa-spin" : "fas fa-check",
                     });
                 } else {
                     buttons.push({
@@ -331,19 +335,34 @@ export default defineComponent({
                 return;
             }
 
+            this.clearBusyTimeout();
+
             this.busy = true;
 
-            makeApiRequest(apiMediaSetExtendedDescription(this.mid, this.contentToChange))
-                .onSuccess(() => {
+            this.setBusyTimeout();
+
+            const mid = this.mid;
+
+            makeApiRequest(apiMediaSetExtendedDescription(mid, this.contentToChange))
+                .onSuccess((res) => {
                     this.busy = false;
+                    this.clearBusyTimeout();
+
                     PagesController.ShowSnackBar(this.$t("Successfully saved extended description"));
                     this.content = this.contentToChange;
                     this.editing = false;
-                    MediaController.Load();
+
+                    if (MediaController.MediaData && MediaController.MediaData.id === mid) {
+                        MediaController.MediaData.ext_desc_url = res.url || "";
+                    }
+
+                    this.$emit("update-ext-desc");
+
                     this.autoFocus();
                 })
                 .onRequestError((err, handleErr) => {
                     this.busy = false;
+                    this.clearBusyTimeout();
                     handleErr(err, {
                         unauthorized: () => {
                             this.contentStoredId = this.mid;
@@ -369,9 +388,26 @@ export default defineComponent({
                 })
                 .onUnexpectedError((err) => {
                     this.busy = false;
+                    this.clearBusyTimeout();
                     console.error(err);
                 });
         },
+
+        setBusyTimeout: function () {
+            this.busyTimeout = setTimeout(() => {
+                this.busyDisplayLoad = true;
+                this.busyTimeout = null;
+            }, 333);
+        },
+
+        clearBusyTimeout: function () {
+            if (this.busyTimeout) {
+                clearTimeout(this.busyTimeout);
+                this.busyTimeout = null;
+            }
+
+            this.busyDisplayLoad = false;
+        },
     },
     mounted: function () {
         this.$listenOnAppEvent(EVENT_NAME_AUTH_CHANGED, this.updateAuthInfo.bind(this));
@@ -383,6 +419,11 @@ export default defineComponent({
         }
     },
     beforeUnmount: function () {
+        if (this.busyTimeout) {
+            clearTimeout(this.busyTimeout);
+            this.busyTimeout = null;
+        }
+
         clearNamedTimeout(this.loadRequestId);
         abortNamedApiRequest(this.loadRequestId);
     },

diff --git a/frontend/src/components/player/ImagePlayer.vue b/frontend/src/components/player/ImagePlayer.vue
@@ -75,6 +75,7 @@
             v-model:display="displayExtendedDescriptionStatus"
             :contextOpen="contextMenuShown"
             @clicked="clickControls"
+            @update-ext-desc="refreshExtendedDescription"
         ></ExtendedDescriptionWidget>
 
         <div
@@ -1144,6 +1145,10 @@ export default defineComponent({
         imageNotesVisibleUpdated: function (v: boolean) {
             this.notesVisible = v;
         },
+
+        refreshExtendedDescription: function () {
+            this.hasExtendedDescription = !!this.metadata.ext_desc_url;
+        },
     },
     mounted: function () {
         // Load player preferences

diff --git a/frontend/src/components/player/VideoPlayer.vue b/frontend/src/components/player/VideoPlayer.vue
@@ -178,6 +178,7 @@
             v-model:display="displayExtendedDescriptionStatus"
             :contextOpen="contextMenuShown"
             @clicked="clickControls"
+            @update-ext-desc="refreshExtendedDescription"
         ></ExtendedDescriptionWidget>
 
         <div
@@ -2038,6 +2039,10 @@ export default defineComponent({
             this.updateCurrentTimeSlice();
         },
 
+        refreshExtendedDescription: function () {
+            this.hasExtendedDescription = !!this.metadata.ext_desc_url;
+        },
+
         renderScale: function (scale: number) {
             if (scale > 1) {
                 return Math.floor(scale * 100) + "%";

diff --git a/frontend/src/components/player/editor/EditorTimeSlices.vue b/frontend/src/components/player/editor/EditorTimeSlices.vue
@@ -122,7 +122,7 @@ export default defineComponent({
                     this.originalTimeSlices = renderTimeSlices(slices);
                     this.timeSlices = this.originalTimeSlices;
 
-                    if (MediaController.MediaData) {
+                    if (MediaController.MediaData && MediaController.MediaData.id === mediaId) {
                         MediaController.MediaData.time_slices = clone(slices);
                     }
 

diff --git a/frontend/src/control/img-notes.ts b/frontend/src/control/img-notes.ts
@@ -195,9 +195,19 @@ export class ImageNotesController {
         const mediaId = ImageNotesController.MediaId;
 
         makeNamedApiRequest(REQUEST_KEY_SAVE, apiMediaSetNotes(mediaId, ImageNotesController.Notes))
-            .onSuccess(() => {
+            .onSuccess((res) => {
                 ImageNotesController.Saving = false;
                 BusyStateController.RemoveBusy(BUSY_KEY);
+
+                if (ImageNotesController.MediaId === mediaId) {
+                    ImageNotesController.NotesFileURL = res.url || "";
+                }
+
+                if (MediaController.MediaData && MediaController.MediaData.id === mediaId) {
+                    MediaController.MediaData.img_notes_url = res.url || "";
+                    MediaController.MediaData.img_notes = !!res.url;
+                }
+
                 if (ImageNotesController.PendingSave) {
                     ImageNotesController.SaveNotes();
                 } else {