[FIX] mail: fix attachment preview for previewable files

task-2412150

closes odoo/odoo#64072

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

2 files changed, 145 insertions, 16 deletions

diff --git a/addons/mail/static/src/components/attachment/attachment_tests.js b/addons/mail/static/src/components/attachment/attachment_tests.js
index 0698aafe227..302f39cd41a 100644
--- a/addons/mail/static/src/components/attachment/attachment_tests.js
+++ b/addons/mail/static/src/components/attachment/attachment_tests.js
@@ -667,6 +667,94 @@ QUnit.test('[technical] does not crash when the viewer is closed before image lo
     }
 });
 
+QUnit.test('plain text file is viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.hasClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should be viewable",
+    );
+});
+
+QUnit.test('HTML file is viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.html",
+        id: 750,
+        mimetype: 'text/html',
+        name: "test.html",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.hasClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should be viewable",
+    );
+});
+
+QUnit.test('ODT file is not viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.odt",
+        id: 750,
+        mimetype: 'application/vnd.oasis.opendocument.text',
+        name: "test.odt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.doesNotHaveClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should not be viewable",
+    );
+});
+
+QUnit.test('DOCX file is not viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.docx",
+        id: 750,
+        mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        name: "test.docx",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.doesNotHaveClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should not be viewable",
+    );
+});
+
 });
 });
 });
diff --git a/addons/mail/static/src/models/attachment/attachment.js b/addons/mail/static/src/models/attachment/attachment.js
index 3cea681a3bf..a49b0a87927 100644
--- a/addons/mail/static/src/models/attachment/attachment.js
+++ b/addons/mail/static/src/models/attachment/attachment.js
@@ -176,7 +176,7 @@ function factory(dependencies) {
                 return `https://www.youtube.com/embed/${token}`;
             }
             if (this.fileType === 'video') {
-                return `/web/image/${this.id}?model=ir.attachment`;
+                return `/web/content/${this.id}?model=ir.attachment`;
             }
             return clear();
         }
@@ -215,16 +215,39 @@ function factory(dependencies) {
             } else if (!this.mimetype) {
                 return clear();
             }
-            const match = this.type === 'url'
-                ? this.url.match('(youtu|.png|.jpg|.gif)')
-                : this.mimetype.match('(image|video|application/pdf|text)');
-            if (!match) {
+            switch (this.mimetype) {
+                case 'application/pdf':
+                    return 'application/pdf';
+                case 'image/bmp':
+                case 'image/gif':
+                case 'image/jpeg':
+                case 'image/png':
+                case 'image/svg+xml':
+                case 'image/tiff':
+                case 'image/x-icon':
+                    return 'image';
+                case 'application/javascript':
+                case 'application/json':
+                case 'text/css':
+                case 'text/html':
+                case 'text/plain':
+                    return 'text';
+                case 'audio/mpeg':
+                case 'video/x-matroska':
+                case 'video/mp4':
+                case 'video/webm':
+                    return 'video';
+            }
+            if (!this.url) {
                 return clear();
             }
-            if (match[1].match('(.png|.jpg|.gif)')) {
+            if (this.url.match('(.png|.jpg|.gif)')) {
                 return 'image';
             }
-            return match[1];
+            if (this.url.includes('youtu')) {
+                return 'youtu';
+            }
+            return clear();
         }
 
         /**
@@ -243,7 +266,7 @@ function factory(dependencies) {
             if (!this.fileType) {
                 return false;
             }
-            return this.fileType.includes('text');
+            return this.fileType === 'text';
         }
 
         /**
@@ -251,15 +274,32 @@ function factory(dependencies) {
          * @returns {boolean}
          */
         _computeIsViewable() {
-            return (
-                this.mediaType === 'image' ||
-                this.mediaType === 'video' ||
-                this.mimetype === 'application/pdf' ||
-                this.isTextFile
-            );
+            switch (this.mimetype) {
+                case 'application/javascript':
+                case 'application/json':
+                case 'application/pdf':
+                case 'audio/mpeg':
+                case 'image/bmp':
+                case 'image/gif':
+                case 'image/jpeg':
+                case 'image/png':
+                case 'image/svg+xml':
+                case 'image/tiff':
+                case 'image/x-icon':
+                case 'text/css':
+                case 'text/html':
+                case 'text/plain':
+                case 'video/x-matroska':
+                case 'video/mp4':
+                case 'video/webm':
+                    return true;
+                default:
+                    return false;
+            }
         }
 
         /**
+         * @deprecated
          * @private
          * @returns {string}
          */
@@ -350,11 +390,12 @@ function factory(dependencies) {
         isViewable: attr({
             compute: '_computeIsViewable',
             dependencies: [
-                'mediaType',
-                'isTextFile',
                 'mimetype',
             ],
         }),
+        /**
+         * @deprecated
+         */
         mediaType: attr({
             compute: '_computeMediaType',
             dependencies: ['mimetype'],