Merge pull request #7066 from nextcloud/enhancement/viewer-attachments

Open image, video, audio and PDF attachments with viewer

lib/Controller/PageController.php

@@ -33,17 +33,20 @@
 use OCA\Mail\Db\TagMapper;
 use OCA\Mail\Service\AccountService;
 use OCA\Mail\Service\AliasesService;
+use OCA\Viewer\Event\LoadViewer;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\RedirectResponse;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
 use Psr\Log\LoggerInterface;
 use Throwable;
+use function class_exists;
 use function json_decode;
 
 class PageController extends Controller {
@@ -83,6 +86,7 @@ class PageController extends Controller {
 
  /** @var OutboxService */
  private $outboxService;
+ private IEventDispatcher $dispatcher;
 
  public function __construct(string $appName,
  IRequest $request,
@@ -97,7 +101,8 @@ public function __construct(string $appName,
  TagMapper $tagMapper,
  IInitialState $initialStateService,
  LoggerInterface $logger,
- OutboxService $outboxService) {
+ OutboxService $outboxService,
+ IEventDispatcher $dispatcher) {
  parent::__construct($appName, $request);
 
  $this->urlGenerator = $urlGenerator;
@@ -112,6 +117,7 @@ public function __construct(string $appName,
  $this->initialStateService = $initialStateService;
  $this->logger = $logger;
  $this->outboxService = $outboxService;
+ $this->dispatcher = $dispatcher;
  }
 
  /**
@@ -121,6 +127,10 @@ public function __construct(string $appName,
  * @return TemplateResponse renders the index page
  */
  public function index(): TemplateResponse {
+ if (class_exists(LoadViewer::class)) {
+ $this->dispatcher->dispatchTyped(new LoadViewer());
+ }
+
  $this->initialStateService->provideInitialState(
  'debug',
  $this->config->getSystemValue('debug', false)

lib/Db/MessageMapper.php

@@ -48,6 +48,7 @@
 use function array_udiff;
 use function get_class;
 use function ltrim;
+use function mb_convert_encoding;
 use function mb_strcut;
 use function OCA\Mail\array_flat_map;
 
@@ -496,9 +497,9 @@ public function updatePreviewDataBulk(Message ...$messages): array {
  $query->setParameter('uid', $message->getUid(), IQueryBuilder::PARAM_INT);
  $query->setParameter('mailbox_id', $message->getMailboxId(), IQueryBuilder::PARAM_INT);
  $query->setParameter('flag_attachments', $message->getFlagAttachments(), $message->getFlagAttachments() === null ? IQueryBuilder::PARAM_NULL : IQueryBuilder::PARAM_BOOL);
- $previewText = $message->getPreviewText();
- if ($previewText !== null) {
- $previewText = mb_strcut(mb_convert_encoding($previewText, 'UTF-8', 'UTF-8'), 0, 255);
+ $previewText = null;
+ if ($message->getPreviewText() !== null) {
+ $previewText = mb_strcut(mb_convert_encoding($message->getPreviewText(), 'UTF-8', 'UTF-8'), 0, 255);
  }
  $query->setParameter(
  'preview_text',

package.json

@@ -41,6 +41,7 @@
  "@nextcloud/l10n": "^1.6.0",
  "@nextcloud/logger": "^2.3.0",
  "@nextcloud/moment": "^1.2.1",
+ "@nextcloud/paths": "^2.1.0",
  "@nextcloud/router": "^2.0.0",
  "@nextcloud/vue": "^7.0.0-beta.0",
  "@nextcloud/vue-dashboard": "^2",

src/components/MessageAttachment.vue

@@ -20,11 +20,10 @@
  -->
 
 <template>
- <div class="attachment">
+ <div class="attachment" :class="{'message-attachment--can-preview': canPreview }" @click="$emit('click', $event)">
  <img v-if="isImage"
  class="mail-attached-image"
- :src="url"
- @click="$emit('click', $event)">
+ :src="url">
  <img class="attachment-icon" :src="mimeUrl">
  <span class="attachment-name"
  :title="label">{{ name }}
@@ -140,6 +139,10 @@ export default {
  type: Boolean,
  default: false,
  },
+ canPreview: {
+ type: Boolean,
+ default: false,
+ },
  },
  data() {
  return {
@@ -240,14 +243,16 @@ export default {
 .attachment:hover,
 .attachment span:hover {
  background-color: var(--color-background-hover);
- cursor: pointer;
+
+ &.message-attachment--can-preview * {
+ cursor: pointer;
+ }
 }
 
 .mail-attached-image {
  display: block;
  max-width: 100%;
  border-radius: var(--border-radius);
- cursor: pointer;
 }
 .attachment-import-popover {
  right: 32px;

src/components/MessageAttachments.vue

@@ -23,7 +23,7 @@
  <div class="mail-message-attachments">
  <div class="attachments">
  <MessageAttachment
- v-for="attachment in attachments"
+ v-for="(attachment, idx) in attachments"
  :id="attachment.id"
  :key="attachment.id"
  :file-name="attachment.fileName"
@@ -33,10 +33,8 @@
  :is-calendar-event="attachment.isCalendarEvent"
  :mime="attachment.mime"
  :mime-url="attachment.mimeUrl"
- @click="showViewer(attachment)" />
- <AttachmentImageViewer v-if="attachmentImageURL && showPreview"
- :url="attachmentImageURL"
- @close="showPreview = false" />
+ :can-preview="canPreview(fileInfos[idx])"
+ @click="showViewer(fileInfos[idx])" />
  </div>
  <p v-if="moreThanOne" class="attachments-button-wrapper">
  <ButtonVue
@@ -64,6 +62,7 @@
 </template>
 
 <script>
+import { basename } from '@nextcloud/paths'
 import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
 import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import IconFolder from 'vue-material-design-icons/Folder'
@@ -73,12 +72,10 @@ import { saveAttachmentsToFiles } from '../service/AttachmentService'
 
 import MessageAttachment from './MessageAttachment'
 import Logger from '../logger'
-import AttachmentImageViewer from './AttachmentImageViewer'
 
 export default {
  name: 'MessageAttachments',
  components: {
- AttachmentImageViewer,
  MessageAttachment,
  ButtonVue,
  IconLoading,
@@ -98,10 +95,27 @@ export default {
  return {
  savingToCloud: false,
  showPreview: false,
- attachmentImageURL: '',
  }
  },
  computed: {
+ fileInfos() {
+ return this.attachments.map(attachment => ({
+ filename: attachment.downloadUrl,
+ source: attachment.downloadUrl,
+ basename: basename(attachment.downloadUrl),
+ mime: attachment.mime,
+ etag: 'fixme',
+ hasPreview: false,
+ fileid: parseInt(attachment.id, 10),
+ }))
+ },
+ previewableFileInfos() {
+ return this.fileInfos.filter(fileInfo => (fileInfo.mime.startsWith('image/')
+ || fileInfo.mime.startsWith('video/')
+ || fileInfo.mime.startsWith('audio/')
+ || fileInfo.mime === 'application/pdf')
+ && OCA.Viewer.mimetypes.includes(fileInfo.mime))
+ },
  moreThanOne() {
  return this.attachments.length > 1
  },
@@ -112,6 +126,9 @@ export default {
  },
  },
  methods: {
+ canPreview(fileInfo) {
+ return this.previewableFileInfos.includes(fileInfo)
+ },
  saveAll() {
  const picker = getFilePickerBuilder(t('mail', 'Choose a folder to store the attachments in'))
  .setMultiSelect(false)
@@ -140,10 +157,16 @@ export default {
  downloadZip() {
  window.location = this.zipUrl
  },
- showViewer(attachment) {
- if (attachment.isImage) {
- this.showPreview = true
- this.attachmentImageURL = attachment.downloadUrl
+ showViewer(fileInfo) {
+ if (!this.canPreview(fileInfo)) {
+ return
+ }
+
+ if (this.previewableFileInfos.includes(fileInfo)) {
+ OCA.Viewer.open({
+ fileInfo,
+ list: this.previewableFileInfos,
+ })
  }
  },
  },

tests/Unit/Controller/PageControllerTest.php

@@ -37,6 +37,7 @@
 use OCP\AppFramework\Http\RedirectResponse;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IURLGenerator;
@@ -89,6 +90,9 @@ class PageControllerTest extends TestCase {
  /** @var OutboxService|MockObject */
  private $outboxService;
 
+ /** @var IEventDispatcher|MockObject */
+ private $eventDispatcher;
+
  /** @var PageController */
  private $controller;
 
@@ -109,6 +113,7 @@ protected function setUp(): void {
  $this->initialState = $this->createMock(IInitialState::class);
  $this->logger = $this->createMock(LoggerInterface::class);
  $this->outboxService = $this->createMock(OutboxService::class);
+ $this->eventDispatcher = $this->createMock(IEventDispatcher::class);
 
  $this->controller = new PageController(
  $this->appName,
@@ -124,7 +129,8 @@ protected function setUp(): void {
  $this->tagMapper,
  $this->initialState,
  $this->logger,
- $this->outboxService
+ $this->outboxService,
+ $this->eventDispatcher,
  );
  }