[FIX] mail: only allow image operations for images in AttachmentViewer

First bug
=========

Steps to reproduce
------------------

- Go to A project task
- Upload an pdf
- Preview the pdf
- Press on the "+" key

```
TypeError: Cannot read properties of null (reading 'offsetWidth')
    at AttachmentViewer.updateZoomerStyle
```

Cause of the issue
------------------

Some operations should only be called when the current attachment is an
image.

Second bug
==========

Steps to reproduce
------------------

- Go to documents
- Click on an image document
- Edit the "Tags" field and type +

The image is resized

Cause of the issue
------------------

In the documents app, the viewer is not fullscreen.
The keyboard actions should only be used when the attachment viewer is
focused. The onKeyDown was bound to the document.

Solution
--------

We can bind the `onKeyDown` to the AttachmentViewer.
Since we now need the viewer focused, we can use the autofocus hook.

opw-3456439

closes odoo/odoo#133126

X-original-commit: 7fa95127e55e21bcaf28191c872cd0a1b8a0a6a6
Related: odoo/enterprise#46270
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Signed-off-by: Hubert Van De Walle <huvw@odoo.com>

addons/web/static/src/core/file_viewer/file_viewer.js

@@ -1,7 +1,7 @@
 /* @odoo-module */
 
-import { Component, useExternalListener, useRef, useState } from "@odoo/owl";
-import { useService } from "@web/core/utils/hooks";
+import { Component, useRef, useState } from "@odoo/owl";
+import { useAutofocus, useService } from "@web/core/utils/hooks";
 
 /**
  * @typedef {Object} File
@@ -31,6 +31,7 @@ export class FileViewer extends Component {
     };
 
     setup() {
+        useAutofocus();
         this.imageRef = useRef("image");
         this.zoomerRef = useRef("zoomer");
 
@@ -48,7 +49,6 @@ export class FileViewer extends Component {
             y: 0,
         };
 
-        useExternalListener(document, "keydown", this.onKeydown);
         this.state = useState({
             index: this.props.startIndex,
             file: this.props.files[this.props.startIndex],
@@ -96,20 +96,22 @@ export class FileViewer extends Component {
             case "q":
                 this.close();
                 break;
-            case "r":
-                this.rotate();
-                break;
-            case "+":
-                this.zoomIn();
-                break;
-            case "-":
-                this.zoomOut();
-                break;
-            case "0":
-                this.resetZoom();
-                break;
-            default:
-                return;
+        }
+        if (this.state.file.isImage) {
+            switch (ev.key) {
+                case "r":
+                    this.rotate();
+                    break;
+                case "+":
+                    this.zoomIn();
+                    break;
+                case "-":
+                    this.zoomOut();
+                    break;
+                case "0":
+                    this.resetZoom();
+                    break;
+            }
         }
     }
 

addons/web/static/src/core/file_viewer/file_viewer.xml

@@ -3,7 +3,7 @@
 
     <t t-name="web.FileViewer">
         <div class="d-flex justify-content-center" t-att-class="{ 'modal fixed-top bottom-0': props.modal }">
-            <div class="o-FileViewer flex-column align-items-center d-flex w-100 h-100" tabindex="0">
+            <div class="o-FileViewer flex-column align-items-center d-flex w-100 h-100" tabindex="0" t-ref="autofocus" t-on-keydown.stop="(ev) => this.onKeydown(ev)">
                 <div class="o-FileViewer-header position-absolute top-0 d-flex w-100 bg-black-75 text-400">
                     <div t-if="isViewable" class="d-flex align-items-center ms-4 me-2">
                         <i t-if="state.file.isImage" class="fa fa-picture-o" role="img" title="Image"/>