✨(front) file preview v2 by NathanVss · Pull Request #658 · suitenumerique/drive

NathanVss · 2026-04-10T13:06:57Z

Main UI changes

Before	After

Behavior

Added the prev/next shortcut with keyboard arrows. Handle the focus well so that media timelines are still accessible.
Display the filename in the tab name

Refactor

Improved the structures of the components and folders so it is more comprehensive with domain scoped folders.
Improve className that did not respect BEM

Tests

Added more tests for existing media that were not tested yet. ( smoke testing )

Rename PreviewControls to PlayerPreviewControls and swap material icons for ui-kit SVG icons. Move arrow-key seeking from global keydown to the DurationBar input so it only activates when the slider is focused, and add a focus-visible outline for accessibility. Simplify VolumeBar styling by removing unused btn-mute overrides.

These labels are used by the new preview actions dropdown menu across English, French and Dutch.

Reorganize all viewer components under a viewers/ directory and rewrite FilesPreview as the single orchestrator at the preview root. Add ZoomControls shared component for image and PDF viewers. The new layout centralizes the preview chrome (header, controls bar, navigation) in FilesPreview while each viewer only handles its own rendering.

Cover the download/print actions dropdown, keyboard navigation between files, and the close button in the new preview chrome.

The preview refactor renamed CSS classes from pdf-preview__controls / pdf-preview__zoom-controls to file-preview__controls / file-preview__controls__zoom. Update the e2e tests to match.

The preview for files that cannot be rendered inline now shows the filename as the title and folds the "unsupported format" notice into the description paragraph as a bold disclaimer, so the panel reads as "<filename> — Unsupported format. Download it to view." The download CTA is promoted to a secondary neutral button to stand out on the empty-state panel. The i18n key file_preview.unsupported.title is renamed to disclaimer in en/fr/nl and the copy shortened accordingly. search.spec.ts assertions are updated to match the filename via getByRole("heading") now that the preview wraps the title in a heading element.

The predicate in the preview close branch was (className) => className !== className, which compared the lambda parameter to itself and therefore never matched, leaving stale class names on the preview when the PDF thumbnail sidebar was closed. Rename the inner parameter so the filter compares against the outer className as intended.

The preview-related specs are now numerous enough to warrant their own subfolder. Move pdf, heic and preview-actions specs into __tests__/app-drive/file-preview/ so future preview tests land next to them rather than at the drive-level root. Import and asset paths are adjusted to the new depth, the heic row lookup is simplified to getByRole("cell", ...), and the preview-actions spec gains a small File Preview Header describe block to exercise the header controls.

Cover the audio viewer with a dedicated spec that uploads a small mp3 fixture, opens the preview and checks the playback controls. Ensures the audio branch of the preview rewrite stays covered as we iterate on the other viewers.

Cover the image viewer with a dedicated spec that uploads a small png fixture, opens the preview and asserts the image renders and reacts to the viewer controls. Mirrors the audio/video specs so each viewer has its own file.

Cover the video viewer with a dedicated spec that uploads a small mp4 fixture, opens the preview and exercises the player controls. Keeps the new viewer types consistently covered alongside the audio and image specs.

Cover the fallback viewer that kicks in for file types the app cannot render inline. A minimal .bin fixture exercises the redesign so the filename, the "Unsupported format." disclaimer and the secondary download button are all checked end to end.

Add entry about the file preview v2 iteration.

PanchoutNathan · 2026-04-16T08:21:08Z

A few bugs noted (before the code review)

No animation needed

Enregistrement.de.l.ecran.2026-04-16.a.10.05.01.mov

The controls are not well placed for the video player (He should be at the bottom like the others)

This feature is not implemented.

PanchoutNathan · 2026-04-16T11:36:26Z

+  const handlePrint = () => {
+    if (!currentFile) return;
+    window.open(currentFile.url_preview, "_blank");
+  };


I'm not sure I understand why "handle Print" opens a new tab; it's hard for the user to understand.

what do you suggest instead?

PanchoutNathan · 2026-04-16T11:37:34Z

+  useEffect(() => {
+    if (openedFileId) {
+      const index = data.findIndex((file) => file.id === openedFileId);
+      const newIndex = index > -1 ? index : -1;
+      setCurrentIndex(newIndex);
+    } else {
+      setCurrentIndex(-1);
+    }
+  }, [openedFileId]);


And if data change ?

PanchoutNathan · 2026-04-16T11:42:13Z

+                <div className="file-preview__title">
+                  <FileIcon file={currentFile} type="mini" size="small" />
+                  <h1 className="file-preview__title">


twice the same class: file-preview__title. weird right?

PanchoutNathan · 2026-04-16T11:43:42Z

 interface PdfControlsProps {
  numPages: number;
  pageInputValue: string;
  isSidebarOpen: boolean;


PanchoutNathan · 2026-04-16T11:45:07Z

+    const moreButton = filePreview.locator(
+      ".file-preview__header__content__right button:has(.material-icons)",
+    );


NathanVss · 2026-04-16T14:39:44Z

A few bugs noted (before the code review)

No animation needed

Enregistrement.de.l.ecran.2026-04-16.a.10.05.01.mov

The controls are not well placed for the video player (He should be at the bottom like the others)
## This feature is not implemented.

I cannot reproduce the image splash effect, is there a specific step to repro ? :o

The component lives in DurationBar.tsx but was exported as ProgressBar, which was confusing. Rename the export and update the two call sites in AudioPlayer and VideoPlayer.

The effect that toggles the pdf-sidebar class scheduled a setTimeout without returning a cleanup, so the timer could fire after the file preview unmounted. Capture the timeout id and clear it on cleanup.

Add the en/fr/nl entries needed by the upcoming WOPI "open in editor" placeholder and the image viewer loading label.

The loading spinner label was hardcoded in French. Use the translated file_preview.image.loading key so other locales render correctly.

WOPI editors (OnlyOffice / Collabora) work better as a full-page experience than embedded inside the preview modal. Double-clicking a WOPI file in the grid or activating one from the search modal now opens /wopi/:id in a new tab. The preview modal still shows an "Open in editor" placeholder when a user navigates onto a WOPI file via keyboard, so the preview flow stays consistent. The former WopiEditor component is renamed WopiEditorFrame and hosted on the new page. The inline rename-sync path is removed because the editor no longer lives inside the items list.

Follow the WOPI-in-new-tab change: the double-click scenario now asserts that a new page opens with the office iframe and that the preview modal stays closed, a new test covers the "Open in editor" placeholder reached by keyboard navigating onto a WOPI file, and the copy/paste scenario drives the detached wopiPage. Refresh canvas snapshots accordingly and drop the obsolete per-spec snapshot copies.

sonarqubecloud · 2026-04-16T16:16:07Z

Quality Gate failed

Failed conditions
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

NathanVss force-pushed the feat/preview-v2 branch from 64e2ee3 to e2454b1 Compare April 13, 2026 15:04

NathanVss added 12 commits April 14, 2026 14:55

🌐(frontend) add download and print translations

053d28d

These labels are used by the new preview actions dropdown menu across English, French and Dutch.

✅(frontend) add e2e test for file preview actions

9e921c7

Cover the download/print actions dropdown, keyboard navigation between files, and the close button in the new preview chrome.

🐛(frontend) fix pdf preview e2e selectors

aae9644

The preview refactor renamed CSS classes from pdf-preview__controls / pdf-preview__zoom-controls to file-preview__controls / file-preview__controls__zoom. Update the e2e tests to match.

✅(frontend) add audio preview e2e tests

272ffbc

Cover the audio viewer with a dedicated spec that uploads a small mp3 fixture, opens the preview and checks the playback controls. Ensures the audio branch of the preview rewrite stays covered as we iterate on the other viewers.

✅(frontend) add image preview e2e tests

8e2d9c7

Cover the image viewer with a dedicated spec that uploads a small png fixture, opens the preview and asserts the image renders and reacts to the viewer controls. Mirrors the audio/video specs so each viewer has its own file.

✅(frontend) add video preview e2e tests

67a54f5

Cover the video viewer with a dedicated spec that uploads a small mp4 fixture, opens the preview and exercises the player controls. Keeps the new viewer types consistently covered alongside the audio and image specs.

NathanVss force-pushed the feat/preview-v2 branch from 10887fe to 341850c Compare April 14, 2026 13:12

📝(doc) update changelog

9241c10

Add entry about the file preview v2 iteration.

NathanVss requested a review from PanchoutNathan April 14, 2026 13:47

PanchoutNathan reviewed Apr 16, 2026

View reviewed changes

NathanVss added 6 commits April 16, 2026 18:12

♻️(frontend) rename ProgressBar to DurationBar in preview

3d0e22e

The component lives in DurationBar.tsx but was exported as ProgressBar, which was confusing. Rename the export and update the two call sites in AudioPlayer and VideoPlayer.

🐛(frontend) clear pdf sidebar timeout on unmount

4050ed7

The effect that toggles the pdf-sidebar class scheduled a setTimeout without returning a cleanup, so the timer could fire after the file preview unmounted. Capture the timeout id and clear it on cleanup.

🌐(frontend) add wopi open in editor and image loading translations

2471961

Add the en/fr/nl entries needed by the upcoming WOPI "open in editor" placeholder and the image viewer loading label.

💄(frontend) localize image viewer loading label

385dab8

The loading spinner label was hardcoded in French. Use the translated file_preview.image.loading key so other locales render correctly.

Conversation

NathanVss commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Main UI changes

Behavior

Refactor

Tests

Uh oh!

PanchoutNathan commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

A few bugs noted (before the code review)

No animation needed

The controls are not well placed for the video player (He should be at the bottom like the others)

This feature is not implemented.

Uh oh!

Uh oh!

Uh oh!

PanchoutNathan Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

NathanVss Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

PanchoutNathan Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

PanchoutNathan Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

PanchoutNathan Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

PanchoutNathan Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

NathanVss commented Apr 16, 2026

A few bugs noted (before the code review)

No animation needed

The controls are not well placed for the video player (He should be at the bottom like the others)

Uh oh!

sonarqubecloud bot commented Apr 16, 2026

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NathanVss commented Apr 10, 2026 •

edited

Loading

PanchoutNathan commented Apr 16, 2026 •

edited

Loading