Fix: ensure preview reload on live changes (#13321)

src-ui/e2e/document-detail/document-detail.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type WebSocketRoute } from '@playwright/test'
 import path from 'node:path'
 
 const REQUESTS_HAR = path.join(__dirname, 'requests/api-document-detail.har')
@@ -95,3 +95,60 @@ test('should support quick filters', async ({ page }) => {
     .click()
   await expect(page).toHaveURL(/tags__id__all=4&sort=created&reverse=1&page=1/)
 })
+
+test('should finish reloading the preview after a remote document update', async ({
+  page,
+}) => {
+  let resolveStatusSocket: (socket: WebSocketRoute) => void
+  const statusSocketReady = new Promise<WebSocketRoute>((resolve) => {
+    resolveStatusSocket = resolve
+  })
+  await page.routeWebSocket(/\/ws\/status\/$/, (socket) => {
+    resolveStatusSocket(socket)
+  })
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
+  let previewRequestCount = 0
+  page.on('request', (request) => {
+    if (request.url().includes('/api/documents/175/preview/')) {
+      previewRequestCount++
+    }
+  })
+  await page.goto('/documents/175/details')
+
+  await page.locator('pngx-document-detail').waitFor()
+  await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
+    /\w+/
+  )
+  const previewWasLoaded = await page.evaluate(() => {
+    const detail = document.querySelector('pngx-document-detail')
+    const component = (window as any).ng.getComponent(detail)
+    component.pdfPreviewLoaded({ numPages: 1 })
+    return component.previewLoaded()
+  })
+  expect(previewWasLoaded).toBe(true)
+  const previewRequestsBeforeReload = previewRequestCount
+
+  const statusSocket = await statusSocketReady
+  const documentReloaded = page.waitForResponse(
+    (response) =>
+      response.url().includes('/api/documents/175/?full_perms=true') &&
+      response.request().method() === 'GET'
+  )
+  statusSocket.send(
+    JSON.stringify({
+      type: 'document_updated',
+      data: {
+        document_id: 175,
+        modified: '2026-07-26T20:00:00Z',
+      },
+    })
+  )
+  await documentReloaded
+
+  await expect(
+    page.getByText('Document reloaded with latest changes.').first()
+  ).toBeVisible()
+  await expect
+    .poll(() => previewRequestCount)
+    .toBeGreaterThan(previewRequestsBeforeReload + 1)
+})

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.spec.ts

@@ -283,6 +283,22 @@ describe('PngxPdfViewerComponent', () => {
     expect(mockViewer.currentPageNumber).toBe(1)
   })
 
+  it('reloads when the source revision changes', () => {
+    const resetSpy = jest.spyOn(component as any, 'resetViewerState')
+    const loadSpy = jest
+      .spyOn(component as any, 'loadDocument')
+      .mockImplementation(() => {})
+    component.src = 'test.pdf'
+    component.sourceRevision = 1
+
+    component.ngOnChanges({
+      sourceRevision: new SimpleChange(0, 1, false),
+    })
+
+    expect(resetSpy).toHaveBeenCalled()
+    expect(loadSpy).toHaveBeenCalled()
+  })
+
   it('applies viewer state after view init when already loaded', () => {
     const applySpy = jest.spyOn(component as any, 'applyViewerState')
     ;(component as any).hasLoaded = true

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts

@@ -43,6 +43,7 @@ export class PngxPdfViewerComponent
   private readonly document = inject<Document>(DOCUMENT)
 
   @Input() src!: string
+  @Input() sourceRevision = 0
   @Input() password?: string
   @Input() page?: number
   @Output() pageChange = new EventEmitter<number>()
@@ -93,7 +94,7 @@ export class PngxPdfViewerComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['src'] || changes['password']) {
+    if (changes['src'] || changes['sourceRevision'] || changes['password']) {
       this.resetViewerState()
       if (this.src) {
         this.loadDocument()

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -472,6 +472,7 @@
           <div class="preview-sticky pdf-viewer-container">
             <pngx-pdf-viewer
               [src]="pdfSource()"
+              [sourceRevision]="previewRevision()"
               [password]="pdfPassword()"
               [renderMode]="PdfRenderMode.All"
               [page]="previewCurrentPage()" (pageChange)="previewCurrentPage.set($event)"

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -1602,6 +1602,7 @@ describe('DocumentDetailComponent', () => {
     expect(openDoc.__changedFields).toEqual([])
     expect(setDirtySpy).toHaveBeenCalledWith(openDoc, false)
     expect(saveSpy).toHaveBeenCalled()
+    expect(component.previewRevision()).toBe(1)
   })
 
   it('should ignore incoming update for a different document id', () => {

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -249,6 +249,7 @@ export class DocumentDetailComponent
   titleSubject: Subject<string> = new Subject()
   readonly previewUrl = signal<string>(undefined)
   readonly pdfSource = signal<string>(undefined)
+  readonly previewRevision = signal(0)
   readonly pdfPassword = signal<string>(undefined)
   readonly thumbUrl = signal<string>(undefined)
   readonly previewText = signal<string>(undefined)
@@ -609,6 +610,9 @@ export class DocumentDetailComponent
               .subscribe()
           }
           this.updateComponent(useDoc)
+          if (forceRemote) {
+            this.previewRevision.update((revision) => revision + 1)
+          }
           this.titleSubject
             .pipe(
               debounceTime(1000),