feat: show images in a document with the viewer

[luka-nextcloud]

Signed-off-by: Luka Trovic luka@nextcloud.com

• Resolves: Open embedded image in original size #2008
• Target version: master

Summary

[max-nextcloud]

@luka-nextcloud Please fix the eslint issues. Thanks!
You can also check for them locally by running npm run lint.

[julien-nc]

• The directory path for the first PROPFIND is wrong. It seems it looks for STORAGE_ROOT/ATTACHMENT_DIR_NAME so it only works for documents in user's storage root.
• This will not work when accessing the document via a shared access. We could use the endpoints provided by the attachment controller. These are public endpoints using the Text edition session to authenticate. I can help in this department if needed.

You could use #getImageAttachmentUrl() in src/services/AttachmentResolver.js which ends up getting the image from AttachmentController::getImageFile().
Problem is that this method only returns a preview for now. We could add a parameter to choose between raw content or preview.
There is still the special case of images which can't be displayed but for which there is a preview provider. So in this case, the preview would be a fallback even if asking the raw image.

[julien-nc]

#2974 might help here. You could get the image URL with #getImageAttachmentUrl(FILE_NAME, true).

[julien-nc]

@luka-nextcloud #2974 is merged now 😁

[julien-nc]

Nicely done!

• A few remaining eslint warnings and errors (npm run lint)
• The image could use all the available space and avoid overflow. See inline basic style suggestion.
• The dav helper is not used anymore and could be removed IMO
• Pressing escape closes the modal and the document (the viewer). @max-nextcloud @vinicius73 Do you know if there is any way to avoid that?

• some other inline comments

[cypress]

---

Test summary

116 • 0 • 0 • 0 • 0

---

Run details

Project	Text
Status	Passed
Commit	dc343ee
Started	Jan 23, 2023 10:53 PM
Ended	Jan 23, 2023 10:55 PM
Duration	02:47 💡
OS	Linux Ubuntu -
Browser	Electron 106

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[julien-nc]

@luka-nextcloud 👍 We're close. There's still an overflow issue when the image height is too big. It would be nice to get something like in the previous screencast: that the image is entirely visible, takes the most space possible and keeps its aspect ratio.

[luka-nextcloud]

@julien-nc Can you please check again?

[julien-nc]

/compile

[juliusknorr]

@luka-nextcloud Would be great to have a cypress test for this :)