feat: Permettre d'envoyer du texte.

Author: regseb

src/_locales/en/messages.json

@@ -185,6 +185,18 @@
     "popup_osd_title": {
         "message": "Show OSD [M]"
     },
+    "popup_home_title": {
+        "message": "Go to home"
+    },
+    "popup_fullscreen_title": {
+        "message": "Toogle fullscreen [Tab]"
+    },
+    "popup_opensendtext_title": {
+        "message": "Send text"
+    },
+    "popup_playerprocessinfo_title": {
+        "message": "Show player process information [O]"
+    },
     "popup_empty_textcontent": {
         "message": "Playlist empty"
     },
@@ -194,6 +206,18 @@
     "popup_removeItem_title": {
         "message": "Remove"
     },
+    "popup_text_placeholder": {
+        "message": "Text to send"
+    },
+    "popup_done_textcontent": {
+        "message": "Finish after send"
+    },
+    "popup_cancel_textcontent": {
+        "message": "Cancel"
+    },
+    "popup_sendtext_textcontent": {
+        "message": "Send"
+    },
     "popup_configure_textcontent": {
         "message": "Configure"
     },

src/_locales/fr/messages.json

@@ -185,6 +185,18 @@
     "popup_osd_title": {
         "message": "Afficher le menu à l'écran [M]"
     },
+    "popup_home_title": {
+        "message": "Aller à la page d'accueil"
+    },
+    "popup_fullscreen_title": {
+        "message": "Basculer en plein écran [Tab]"
+    },
+    "popup_opensendtext_title": {
+        "message": "Envoyer du texte"
+    },
+    "popup_playerprocessinfo_title": {
+        "message": "Afficher les informations sur le processus de lecture [O]"
+    },
     "popup_empty_textcontent": {
         "message": "Liste de lecture vide"
     },
@@ -194,6 +206,18 @@
     "popup_removeItem_title": {
         "message": "Retirer"
     },
+    "popup_text_placeholder": {
+        "message": "Texte à envoyer"
+    },
+    "popup_done_textcontent": {
+        "message": "Terminer après l'envoi"
+    },
+    "popup_cancel_textcontent": {
+        "message": "Annuler"
+    },
+    "popup_sendtext_textcontent": {
+        "message": "Envoyer"
+    },
     "popup_configure_textcontent": {
         "message": "Configurer"
     },

src/core/jsonrpc/input.js

@@ -91,6 +91,18 @@ export const Input = class {
         return this.kodi.send("Input.Select");
     }
 
+    /**
+     * Envoie du texte.
+     *
+     * @param {string}  text Le texte envoyé.
+     * @param {boolean} done La marque indiquant s'il faut fermer la boite de
+     *                       saisie.
+     * @returns {Promise.<string>} Une promesse contenant <code>"OK"</code>.
+     */
+    sendText(text, done) {
+        return this.kodi.send("Input.SendText", { text, done });
+    }
+
     /**
      * Affiche le <em>menu à l'écran</em> (<em>On Screen Display</em>) du
      * lecteur courant.

src/popup/img/sendtext.svg

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cast Kodi</title>
+    <link href="../lib/dialog-polyfill/style.css" rel="stylesheet" />
     <link href="../photon/style.css" rel="stylesheet" />
     <link href="style.css" rel="stylesheet" />
     <link href="/img/icon.svg" rel="shortcut icon" />
@@ -147,6 +148,11 @@
         <object data="img/fullscreen.svg"></object>
       </button>
 
+      <button class="ghost" id="opensendtext" disabled autocomplete="off"
+              data-i18n-title>
+        <object data="img/sendtext.svg"></object>
+      </button>
+
       <button class="ghost" id="playerprocessinfo" disabled autocomplete="off"
               data-i18n-title>
         <object data="img/playerprocessinfo.svg"></object>
@@ -223,6 +229,28 @@
       </button>
     </section>
 
+    <dialog id="dialogsendtext">
+      <form method="dialog">
+        <p>
+          <label>
+            <input name="text" type="text" autocomplete="off"
+                   data-i18n-placeholder="text" />
+          </label>
+        </p>
+        <p>
+          <label data-i18n-textcontent="done">
+            <input name="done" type="checkbox" checked autocomplete="off" />
+            {}
+          </label>
+        </p>
+        <menu>
+          <button id="cancel" value="cancel" data-i18n-textcontent></button>
+          <button class="primary" id="sendtext" value="send"
+                  data-i18n-textcontent></button>
+        </menu>
+      </form>
+    </dialog>
+
     <article id="splash">
       <h1></h1>
       <p></p>

src/popup/index.html

@@ -2,6 +2,7 @@
  * @module
  */
 
+import dialogPolyfill from "../lib/dialog-polyfill/script.js";
 import { cast, kodi } from "../core/index.js";
 import { complete }   from "../core/labellers.js";
 import { notify }     from "../core/notify.js";
@@ -333,6 +334,39 @@ const setFullscreen = function () {
     kodi.gui.setFullscreen().catch(splash);
 };
 
+const openSendText = function () {
+    // Annuler l'action (venant d'un raccourci clavier) si le bouton est
+    // désactivé.
+    if (document.querySelector("#opensendtext").disabled) {
+        return;
+    }
+
+    const dialog = document.querySelector("#dialogsendtext");
+    dialog.querySelector(`input[name="text"]`).value = "";
+    // Utiliser une prothèse en attendant que les boites de dialogue soit
+    // implémentées dans Firefox.
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=840640
+    dialogPolyfill.registerDialog(dialog);
+    dialog.showModal();
+};
+
+const closeDialog = function (event) {
+    // Fermer la boite de dialogue si l'utilisateur clique en dehors de la
+    // boite.
+    if (event.explicitOriginalTarget.classList.contains("backdrop")) {
+        event.target.close();
+    }
+};
+
+const sendText = function (event) {
+    const dialog = event.target;
+    if ("send" === dialog.returnValue) {
+        const text = dialog.querySelector(`input[name="text"]`).value;
+        const done = dialog.querySelector(`input[name="done"]`).checked;
+        kodi.input.sendText(text, done).catch(splash);
+    }
+};
+
 const showPlayerProcessInfo = function () {
     // Annuler l'action (venant d'un raccourci clavier) si le bouton est
     // désactivé.
@@ -663,6 +697,7 @@ const load = async function () {
 
         document.querySelector("#home").disabled = false;
         document.querySelector("#fullscreen").disabled = false;
+        document.querySelector("#opensendtext").disabled = false;
         document.querySelector("#playerprocessinfo").disabled = false;
 
         document.querySelector("#clear").disabled = false;
@@ -721,6 +756,7 @@ document.querySelector("#osd").addEventListener("click", showOSD);
 
 document.querySelector("#home").addEventListener("click", home);
 document.querySelector("#fullscreen").addEventListener("click", setFullscreen);
+document.querySelector("#opensendtext").addEventListener("click", openSendText);
 document.querySelector("#playerprocessinfo").addEventListener(
     "click",
     showPlayerProcessInfo,
@@ -737,6 +773,10 @@ document.querySelector("#donate").addEventListener("click", donate);
 document.querySelector("#rate").addEventListener("click", rate);
 document.querySelector("#preferences").addEventListener("click", preferences);
 
+document.querySelector("#dialogsendtext").addEventListener("close", sendText);
+document.querySelector("#dialogsendtext").addEventListener("click",
+                                                           closeDialog);
+
 document.querySelector("#configure").addEventListener("click", preferences);
 
 // Attention ! La popup n'a pas automatiquement le focus quand elle est ouverte
@@ -748,6 +788,17 @@ globalThis.addEventListener("keydown", (event) => {
         return;
     }
 
+    // Ignorer les raccourcis clavier quand une boite de dialogue est ouverte
+    // (sauf pour la touche Entrée qui valide le formulaire).
+    const dialog = event.target.closest("dialog");
+    if (null !== dialog) {
+        if ("Enter" === event.key) {
+            dialog.close(dialog.querySelector(".primary").value);
+            event.preventDefault();
+        }
+        return;
+    }
+
     // Écrire normalement les caractères dans la zone de texte (sauf pour la
     // touche Entrée qui envoi l'URL saisie).
     if ("TEXTAREA" === event.target.tagName) {

src/popup/script.js

@@ -75,6 +75,19 @@ input[type="range"].disabled::-moz-range-progress {
     background-color: #737373;
 }
 
+#dialogsendtext {
+    width: calc(100% - 56px);
+}
+#dialogsendtext p:first-child {
+    margin-top: 0;
+}
+#dialogsendtext input[type="text"] {
+    width: calc(100% - 16px);
+}
+#dialogsendtext input[type="checkbox"] {
+    display: inline-block;
+}
+
 #cast {
     border-bottom: 1px solid #737373;
     display: flex;

src/popup/style.css

@@ -107,6 +107,36 @@ describe("core/jsonrpc/input.js", function () {
         });
     });
 
+    describe("sendText()", function () {
+        it("should send request", async function () {
+            const fake = sinon.fake.resolves("OK");
+
+            const input = new Input({ send: fake });
+            const result = await input.sendText("foo", false);
+            assert.strictEqual(result, "OK");
+
+            assert.strictEqual(fake.callCount, 1);
+            assert.deepStrictEqual(fake.firstCall.args, [
+                "Input.SendText",
+                { text: "foo", done: false },
+            ]);
+        });
+
+        it("should send request and finish", async function () {
+            const fake = sinon.fake.resolves("OK");
+
+            const input = new Input({ send: fake });
+            const result = await input.sendText("foo", true);
+            assert.strictEqual(result, "OK");
+
+            assert.strictEqual(fake.callCount, 1);
+            assert.deepStrictEqual(fake.firstCall.args, [
+                "Input.SendText",
+                { text: "foo", done: true },
+            ]);
+        });
+    });
+
     describe("showOSD()", function () {
         it("should send request", async function () {
             const fake = sinon.fake.resolves("OK");