Show notification when queuing item

This is helpful for users, because a notification in
Kodi indicates if the shared item reached Kodi.

This is also the default behaviour for the Kore app.

Resolves #28

src/_locales/de/messages.json

@@ -112,5 +112,8 @@
   },
   "helpText": {
     "message": "Du suchts Hilfe? Probier es mit einem der folgenden Links:"
+  },
+  "notificationAdded": {
+    "message": "Element zur Wiedergabeliste hinzugefügt"
   }
 }

src/_locales/en/messages.json

@@ -112,5 +112,8 @@
   },
   "helpText": {
     "message": "You need help? Try one of the following links:"
+  },
+  "notificationAdded": {
+    "message": "Item added to playlist"
   }
 }

src/modules/Kodi.js

@@ -90,11 +90,20 @@ export default class Kodi extends EventTarget {
     await this.play();
   }
 
-  async queue(url) {
+  /**
+   * @param {URL} url
+   * @param {Object|null} notification
+   * @param {string} notification.title
+   * @param {string} notification.message
+   * @returns {Promise<void>}
+   */
+  async queue(url, notification = null) {
     const plugin = getPluginByUrl(url);
     const file = await plugin.getPluginPath({ url });
 
     await this.add(file);
+
+    if (notification) await this.showNotification(notification.title, notification.message);
   }
 
   async play(position = 0) {
@@ -117,10 +126,18 @@ export default class Kodi extends EventTarget {
     await this.api.send('Player.Stop', [this.activePlayerId]);
   }
 
+  /**
+   * @param {('next'|'previous')} to
+   * @return {Promise<void>}
+   */
   async goTo(to) {
     await this.api.send('Player.GoTo', [this.activePlayerId, to]);
   }
 
+  /**
+   * @param {number} percentage
+   * @return {Promise<void>}
+   */
   async seek(percentage) {
     await this.api.send('Player.Seek', [this.activePlayerId, { percentage }]);
   }
@@ -141,6 +158,10 @@ export default class Kodi extends EventTarget {
     await this.api.send('Application.SetVolume', { volume });
   }
 
+  /**
+   * @param {boolean|'toggle'} mute
+   * @return {Promise<void>}
+   */
   async setMute(mute) {
     await this.api.send('Application.SetMute', { mute });
   }
@@ -152,4 +173,13 @@ export default class Kodi extends EventTarget {
   async setShuffle() {
     await this.api.send('Player.SetShuffle', [this.activePlayerId, 'toggle']);
   }
+
+  /**
+   * @param {string} title
+   * @param {string} message
+   * @return {Promise<void>}
+   */
+  async showNotification(title, message) {
+    await this.api.send('GUI.ShowNotification', { title, message });
+  }
 }

src/modules/Store.js

@@ -35,10 +35,10 @@ export default class Store extends EventTarget {
       pause: () => this.kodi.playPause(),
       playItem: (position) => this.kodi.goTo(position),
       prev: () => this.kodi.goTo('previous'),
-      queue: async () => {
+      queue: async (notification) => {
         try {
           const activeTab = await getActiveTab();
-          await this.kodi.queue(new URL(activeTab.url));
+          await this.kodi.queue(new URL(activeTab.url), notification);
         } catch (error) {
           this.commit('apiError', error);
         }

src/modules/views/main/controls.js

@@ -1,11 +1,13 @@
 import { html } from './../../utils/dom.js';
 
+/** @typedef {import('./../../Store.js')} Store */
+
 const PROGRESS_UPDATE_INTERVAL = 1000; // Milliseconds
 
 /**
  * Calculate the progress of the currently playing media.
  *
- * @param store
+ * @param {Store} store
  */
 function calculateProgress(store) {
   clearInterval(window.progressInterval);
@@ -35,6 +37,10 @@ function calculateProgress(store) {
   }
 }
 
+/**
+ * @param {Store} store
+ * @return {object}
+ */
 function progress(store) {
   calculateProgress(store);
   const progress = store.progress;
@@ -59,7 +65,18 @@ function progress(store) {
   `;
 }
 
+/**
+ * @param {Store} store
+ * @param {object} i18n
+ * @return {object}
+ */
 export default (store, i18n) => {
+  const queueAction = () =>
+    store.actions.queue({
+      title: i18n.getMessage('extensionName'),
+      message: i18n.getMessage('notificationAdded'),
+    });
+
   return html`
     <div class="c-section__content">
       <ul class="c-share">
@@ -73,7 +90,7 @@ export default (store, i18n) => {
           <ul class="c-share__dropdown">
             <li>
               <button
-                @click="${store.actions.queue}"
+                @click="${queueAction}"
                 @mouseup="${(event) => event.currentTarget.blur()}"
                 id="share"
                 class="c-share__button c-share__button--dropdown"