[Bug] Render Video editable loading / error states natively in Studio (#3486)

Render the video editable's in-progress/error states natively in Studio (editmode-gated, CoreBundle assets), poll the new asset video-thumbnail-status endpoint and refresh on completion, and preserve unsaved input across that auto-refresh.

Author: markus-moser

assets/build/api/docs.jsonopenapi.json

@@ -27,6 +27,7 @@ export interface DocumentApi {
   triggerValueChange: (documentId: number, key: string, value: any) => void
   triggerValueChangeWithReload: (documentId: number, key: string, value: any) => void
   triggerSaveAndReload: (documentId: number) => void
+  reloadIframe: (documentId: number) => void
   notifyIframeReady: (documentId: number) => void
   notifyAreablockTypes: (documentId: number, editableTypeId: string, areablockTypes: AreablockGroupedTypes) => void
   mergeAreablockTypes: (documentId: number, editableTypeId: string, areablockTypes: AreablockGroupedTypes) => void
@@ -40,6 +41,12 @@ export interface DocumentApi {
 class DocumentApiImpl implements DocumentApi {
   private readonly autoSaveCallbacks = new Map<number, ReturnType<typeof debounce>>()
 
+  // Documents the user has edited since they were opened / last reloaded. Tracked here because it
+  // flips synchronously on the edit event, unlike the redux `modified` flag (set via a deferred
+  // startTransition) — so a poll-triggered reloadIframe can never race ahead of it and discard
+  // input that was just typed but not yet mirrored into `modified`.
+  private readonly editedDocuments = new Set<number>()
+
   markDraftAsModified (documentId: number): void {
     const currentState = store.getState()
     const document = selectDocumentById(currentState, documentId)
@@ -82,15 +89,18 @@ class DocumentApiImpl implements DocumentApi {
   unregisterIframe (documentId: number): void {
     iframeDocumentEditorRegistry.unregister(documentId)
     this.autoSaveCallbacks.delete(documentId)
+    this.editedDocuments.delete(documentId)
   }
 
   triggerValueChange (documentId: number, key: string, value: any): void {
+    this.editedDocuments.add(documentId)
     this.markDraftAsModified(documentId)
 
     void this.autoSaveCallbacks.get(documentId)?.()
   }
 
   triggerValueChangeWithReload (documentId: number, key: string, value: any): void {
+    this.editedDocuments.add(documentId)
     this.markDraftAsModified(documentId)
 
     // Perform immediate auto-save without debounce, then reload
@@ -101,6 +111,26 @@ class DocumentApiImpl implements DocumentApi {
     void this.performAutoSaveAndReload(documentId)
   }
 
+  // Refresh the editor iframe when the rendered editable is stale but the document state did
+  // not change on its own (e.g. a video thumbnail finished converting).
+  // If the user has edited this document, flush the current values first so the reload does not
+  // drop them — once edited, the edit-lock gate is (or is about to be) resolved, so that autosave
+  // resolves rather than hanging, and saveDocument reads the live editable values at save time.
+  // Otherwise reload directly, bypassing the autosave path (whose edit-lock gate holds autosaves
+  // until the first edit and would otherwise hang this poll-triggered refresh).
+  reloadIframe (documentId: number): void {
+    if (this.editedDocuments.has(documentId)) {
+      void this.performAutoSaveAndReload(documentId)
+
+      return
+    }
+
+    const iframeRef = iframeDocumentEditorRegistry.getIframeRef(documentId)
+    if (!isNil(iframeRef?.current)) {
+      iframeRef.current.reload()
+    }
+  }
+
   notifyIframeReady (documentId: number): void {
     iframeDocumentEditorRegistry.markAsReady(documentId)
   }
@@ -163,6 +193,11 @@ class DocumentApiImpl implements DocumentApi {
 
       await documentSaveService.saveDocument(documentId, SaveTaskType.AutoSave)
 
+      // Saved state is now the clean baseline, so drop the edited flag: a later poll-triggered
+      // refresh of this freshly reloaded (untouched) document then takes the cheap reload-only
+      // path instead of a redundant save-and-reload.
+      this.editedDocuments.delete(documentId)
+
       if (!isNil(iframeRef?.current)) {
         iframeRef.current.reload()
       }

assets/js/src/core/app/public-api/document/document-api.ts

@@ -130,7 +130,8 @@ export const {
   useAssetGetGridConfigurationByFolderIdQuery,
   useAssetGetAvailableGridColumnsQuery,
   useAssetPatchFolderByIdMutation,
-  useAssetUploadInfoQuery
+  useAssetUploadInfoQuery,
+  useAssetVideoThumbnailStatusQuery
 } = api
 
 export { api }

assets/js/src/core/modules/asset/asset-api-slice-enhanced.ts

@@ -6,6 +6,15 @@ const injectedRtkApi = api
     })
     .injectEndpoints({
         endpoints: (build) => ({
+            assetVideoThumbnailStatus: build.query<
+                AssetVideoThumbnailStatusApiResponse,
+                AssetVideoThumbnailStatusApiArg
+            >({
+                query: (queryArg) => ({
+                    url: `/pimcore-studio/api/assets/${queryArg.id}/video/thumbnail/${queryArg.thumbnailName}/status`,
+                }),
+                providesTags: ["Assets"],
+            }),
             assetGetTypes: build.query<AssetGetTypesApiResponse, AssetGetTypesApiArg>({
                 query: () => ({ url: `/pimcore-studio/api/assets/types` }),
                 providesTags: ["Assets"],
@@ -457,6 +466,14 @@ const injectedRtkApi = api
         overrideExisting: false,
     });
 export { injectedRtkApi as api };
+export type AssetVideoThumbnailStatusApiResponse =
+    /** status 200 Conversion status of the video thumbnail */ VideoThumbnailStatus;
+export type AssetVideoThumbnailStatusApiArg = {
+    /** Id of the video */
+    id: number;
+    /** Find asset by matching thumbnail name. */
+    thumbnailName: string;
+};
 export type AssetGetTypesApiResponse = /** status 200 Successfully retrieved all available asset types */ {
     totalItems: number;
     items: AssetType[];
@@ -1007,13 +1024,13 @@ export type AssetCustomMetadataGetByIdApiArg = {
     /** Id of the asset */
     id: number;
 };
-export type AssetType = {
+export type VideoThumbnailStatus = {
     /** AdditionalAttributes */
     additionalAttributes?: {
         [key: string]: string | number | boolean | object;
     };
-    /** key */
-    key: string;
+    /** Conversion status of the requested video thumbnail. */
+    status: "finished" | "inprogress" | "error" | "not_started";
 };
 export type Error = {
     /** Message */
@@ -1025,6 +1042,14 @@ export type DevError = {
     /** Details */
     details: string;
 };
+export type AssetType = {
+    /** AdditionalAttributes */
+    additionalAttributes?: {
+        [key: string]: string | number | boolean | object;
+    };
+    /** key */
+    key: string;
+};
 export type FixedCustomSettings = {
     /** embedded meta data of the asset - array of any key-value pairs */
     embeddedMetadata: object[];
@@ -1395,6 +1420,7 @@ export type CustomMetadata = {
     data: any | null;
 };
 export const {
+    useAssetVideoThumbnailStatusQuery,
     useAssetGetTypesQuery,
     useAssetBatchDeleteMutation,
     useAssetCloneMutation,

assets/js/src/core/modules/asset/asset-api-slice.gen.ts

@@ -17,6 +17,7 @@ export interface DocumentEditorContextProps {
   updateValue: (key: string, value: ValueType) => void
   updateValueWithReload: (key: string, value: ValueType) => void
   triggerSaveAndReload: () => void
+  reloadIframe: () => void
   getValues: () => Record<string, ValueType>
   getValue: (key: string) => ValueType
   initializeData: (data: Record<string, ValueType>) => void
@@ -109,6 +110,15 @@ export const useDocumentEditor = (): DocumentEditorContextProps => {
     }
   }, [id])
 
+  const reloadIframe = useCallback((): void => {
+    try {
+      const { document: documentApi } = getPimcoreStudioApi()
+      documentApi.reloadIframe(id)
+    } catch (error) {
+      console.warn('Could not reload document iframe:', error)
+    }
+  }, [id])
+
   const notifyReady = useCallback((): void => {
     if (!readyNotified.current) {
       try {
@@ -125,6 +135,7 @@ export const useDocumentEditor = (): DocumentEditorContextProps => {
     updateValue,
     updateValueWithReload,
     triggerSaveAndReload,
+    reloadIframe,
     getValues,
     getValue,
     initializeData,

assets/js/src/core/modules/document/editor/shared-tab-manager/tabs/edit/hooks/use-document-editor.tsx

@@ -26,6 +26,37 @@ export const useStyles = createStyles(({ token, css }) => {
       border: 1px solid ${token.colorBorder};
       border-radius: ${token.borderRadius}px;
       box-shadow: ${token.boxShadow};
+    `,
+
+    progressOverlay: css`
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: ${token.marginSM}px;
+      background-color: ${token.colorBgContainer};
+      border: 2px dashed ${token.colorBorder};
+      border-radius: ${token.borderRadius}px;
+      pointer-events: none;
+    `,
+
+    progressLabel: css`
+      color: ${token.colorTextSecondary};
+      font-size: ${token.fontSizeSM}px;
+    `,
+
+    errorMessage: css`
+      position: absolute;
+      inset-inline: ${token.paddingXS}px;
+      bottom: ${token.paddingXS}px;
+      text-align: center;
+      color: ${token.colorTextSecondary};
+      font-size: ${token.fontSizeSM}px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     `
   }
 })