Skip to content

feat(viewer): show a file anywhere with <nc-viewer-file> - #97

Merged
skjnldsv merged 6 commits into
mainfrom
feat/embed-element
Oct 21, 2026
Merged

skjnldsv merged 6 commits into
mainfrom
feat/embed-element

Conversation

@skjnldsv

@skjnldsv skjnldsv commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

Give <nc-viewer-file> a file and a size, and it shows the file the way the viewer would, right where it's mentioned, like a file link previewed in Talk or Text. Before, the Files reference widget could only fall back to a static card.

<nc-viewer-file :file.prop="file" style="width: 280px; height: 180px" />

On hover, a strip names the file with a menu to open it in the viewer or download it. A video waits behind its poster until played. When nothing can show the file, it says so and offers the download, or shows what the page put inside the element. getViewer().elementFor(file) stays available for rendering a handler's element yourself.

Mockup Result

Also fixes the default handlers' elements never being defined outside the viewer, and the audio player overflowing a small box. Not tried in Talk or the Files widget yet.

👾 This pull request was assisted by Claude Code, commits carry an Assisted-by trailer.

@skjnldsv skjnldsv added AI assisted status: review Waiting for reviews type: enhancement 🚀 New feature or request labels Oct 2, 2026
@codecov

codecov Bot commented Oct 2, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 80.98361% with 58 lines in your changes missing coverage. Please review.
✅ Project coverage is 91.99%. Comparing base (c26e13f) to head (32d1359).
⚠️ Report is 9 commits behind head on main.

Files with missing lines Patch % Lines
lib/components/ViewerFile.vue 87.20% 26 Missing and 1 partial ⚠️
lib/elements/mountViewerFile.ts 0.00% 24 Missing ⚠️
lib/elements/viewerFile.ts 88.00% 6 Missing ⚠️
lib/components/Audios.vue 50.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main      #97      +/-   ##
==========================================
- Coverage   92.71%   91.99%   -0.73%     
==========================================
  Files          51       54       +3     
  Lines        4270     4572     +302     
  Branches      951      989      +38     
==========================================
+ Hits         3959     4206     +247     
- Misses        288      342      +54     
- Partials       23       24       +1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@skjnldsv
skjnldsv force-pushed the feat/embed-element branch from 5734f60 to c8d32ec Compare October 3, 2026 19:19
Base automatically changed from feat/handler-load to main October 3, 2026 20:21
@skjnldsv
skjnldsv force-pushed the feat/embed-element branch from c8d32ec to 1a89b0a Compare October 7, 2026 08:27
Comment thread lib/viewer.ts Outdated
/**
* Whether the file is shown inline, outside the viewer, as the preview
* of a link to it (see `getViewer().elementFor()`). Handlers should then
* show it without taking over: no autoplay, read-only where editing is

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Current reference widgets allow switching to write mode and inline editing for some file types. At least Text (for Markdown/plaintext) and Richdocuments (for office documents) support it as far as I know. I'm not sure though whether we want to keep it as it often is very bad UX. Personally I'd prefer a button to open the previewed file full-screen in a overlay modal, read-write where supported.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reworded it so embedded is only a hint and Richdocuments can still decide for itself. For the files widget I'd do what you suggest: read-only inline, plus a button to open it in the viewer.

@skjnldsv
skjnldsv force-pushed the feat/embed-element branch from 7401f98 to bc938cc Compare October 7, 2026 08:41
@skjnldsv
skjnldsv enabled auto-merge October 7, 2026 09:10
@skjnldsv
skjnldsv force-pushed the feat/embed-element branch 2 times, most recently from c983dbd to 6a30ebf Compare October 15, 2026 14:16
The preview of a file link (the files reference widget, in Talk, Text and
the like) used to render the viewer handler's component inline, found
through OCA.Viewer.availableHandlers. Handlers are custom elements now,
and the registry is not something a page should dig through, so
getViewer().elementFor(file) names the element of the handler that would
open the file, defined and ready to render, without loading the viewer.

`embedded` on ViewerProps tells the handler it is shown inline, which the
old widget said with `isEmbedded` and `active`. A hint not to take over the
page: videos and sounds wait to be played, and editing is better left to
the viewer.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
elementFor() named the elements of the images, video, audio and sheet
music handlers before anything defined them: only the viewer did, as it
mounted. They are defined from onInit now, like any handler's.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
It had a width of its own, wider than a file shown outside the viewer.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
Give it a file and a size: it shows the file with the handler the viewer
would use, fitted to its box, its blurhash while it loads, and a strip
naming it with a menu to open it in the viewer or download it. A video
waits behind its poster until played. When nothing can show the file,
or it fails to, it says so and offers the download, or shows what the
page put inside it. Its view is only fetched once one is on the page.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
@skjnldsv skjnldsv changed the title feat(viewer): name the element that shows a file, to render it elsewhere feat(viewer): show a file anywhere with <nc-viewer-file> Oct 21, 2026
@skjnldsv skjnldsv added this to the 2.0.0 milestone Oct 21, 2026
@skjnldsv skjnldsv added 3. to review and removed status: review Waiting for reviews labels Oct 21, 2026
Read-only to start and not taking over the page, with any switch to
editing inline left to the handler, as Text has.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
It is defined on every page, and the default handlers now define their
elements when first needed: 0.8 kB gzipped. Its view stays lazy, and
the check now says so.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
@skjnldsv
skjnldsv disabled auto-merge October 21, 2026 09:59
@skjnldsv
skjnldsv merged commit cb3f5be into main Oct 21, 2026
15 checks passed
@skjnldsv
skjnldsv deleted the feat/embed-element branch October 21, 2026 09:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants