fix #1250 (#2323)

Fixes #1250 Change favicon color when unread messages

CHANGES.md

@@ -41,6 +41,7 @@ Soon we'll deprecate the latter, so prepare now.
 - #2307: BootstrapModal is not accessible to plugins
 - #2308: Allow getHats method to be overriden in the `overrides` object in plugins.
 - #2321: When Converse runs inside a browser extension, enable browser sync and local storage for persistent storage
+- #1250: Change favicon color when unread messages
 - The `trusted` configuration setting has been removed in favor of two new settings:
     [allow_user_trust_override](https://conversejs.org/docs/html/configuration.html#allow-user-trust-override)
     [clear_cache_on_logout](https://conversejs.org/docs/html/configuration.html#clear-cache-on-logout)

package.json

@@ -78,6 +78,7 @@
     "eslint-plugin-lodash": "^7.1.0",
     "exports-loader": "^0.7.0",
     "fast-text-encoding": "^1.0.2",
+    "favico.js-slevomat": "^0.3.11",    
     "file-loader": "^6.0.0",
     "haunted": "^4.7.0",
     "html-webpack-plugin": "^4.3.0",

src/headless/converse-chatboxes.js

@@ -7,6 +7,7 @@ import "./converse-emoji";
 import { Collection } from "@converse/skeletor/src/collection";
 import { _converse, api, converse } from "./converse-core";
 import log from "./log";
+import Favico from 'favico.js-slevomat';
 
 const { Strophe } = converse.env;
 
@@ -32,9 +33,11 @@ converse.plugins.add('converse-chatboxes', {
         ]);
 
         let msg_counter = 0;
+        const favicon = new Favico({type : 'circle', position: 'up', animation: 'none'});
 
         _converse.incrementMsgCounter = function () {
             msg_counter += 1;
+            favicon.badge(msg_counter);
             const title = document.title;
             if (!title) {
                 return;
@@ -48,6 +51,7 @@ converse.plugins.add('converse-chatboxes', {
 
         _converse.clearMsgCounter = function () {
             msg_counter = 0;
+            favicon.badge(msg_counter);
             const title = document.title;
             if (!title) {
                 return;