From 5d18c714758bdc64b03005d171174c9de8e26439 Mon Sep 17 00:00:00 2001
From: or-else <or.else@gmail.com>
Date: Wed, 20 Sep 2017 15:01:19 -0700
Subject: [PATCH] add green dot to shortcut icon to indicate unread messages

---
 README.md         |   4 ++--
 img/logo32x32.png | Bin 1218 -> 2066 bytes
 index.html        |  23 +++++++++++++++++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 36e11a0f..145913f7 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-we
 
 This is work in progress. Bugs are expected. The app was tested in the latest Chrome & Firefox only.
 
-Try it (possibly newer or older version) live at https://api.tinode.co/x/example-react-js/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15 am Pacific time.
+Try possibly newer or older version live at https://api.tinode.co/x/example-react-js/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15am Pacific time.
 
 License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)
 
@@ -20,7 +20,7 @@ Background pattern from http://subtlepatterns.com/, commercial and non-commercia
 * Cannot delete messages.
 * No indication of chat status (muted, blocked, etc.).
 * Browser push notifications are missing.
-* No encryption.
+* No end-to-end encryption.
 * Editing chat permissions is incomplete.
 
 ## Responsive design
diff --git a/img/logo32x32.png b/img/logo32x32.png
index 98636712f9b4744ffceb74f431e88c6f0a3e2544..cd4d256b374f7254238e5d1be087713904566377 100644
GIT binary patch
literal 2066
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
W<z<(3|B<2mM~(3dLEqd%O#L^*tbfh`

delta 1198
zcmV;f1X25v5W)$NB!2{RLP=Bz2nYy#2xN!=000SaNLh0L00Q3t00Q3uo3^CM0000P
zbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}WiD@WXPfRk8UO$UKS@MER9J<zm)ma?RUF4Z
z=ge)pm(DI^Lz@C^u_z?fDwn9Cq7ed#0UtEc7auj@4>1u9JbxgODw3F(Xh_sI<0B+$
zwY4At5wuNeYI>ox>lWDA>&zS<npt+cvp~1>n{0M+=KOxY&$;~0{EkpcMHd$re=rPV
zx0F)jF-r)cR<?Pb=a<Xnv2;3pL@X>UT#QDeuLLiB-v>Y`Rs9!21kTnBB&DoA=W@9V
zBAd<TOw)`hrGKbYDop%0!JIRXQVPd)$doc{G&d46VrvR4grGCl!S)S(7>0omf>NpE
z=u%2uDMhhZWa#>5jAqByI>-m=h1ByL>wk|(B!Z@Cx`gFv|MS+3bq@|Ok{#vd?VHu5
zmP#pH*Clf=v+ltIE!<tibzPKF$Y5h_v9=KR;_Du~-G5K8)!GUy?+YD3(=;~NDc)*(
zgW;uL$@)v&jxRJAr*j)y&IBnmlGyA^y-2D(iKZ=Qybhr2I>}^`{_Xvw=hMv1&G98)
zH#j+@AH=rpM}`PeSO|fXl2|N8I-Mq&Orq;LuInxX09ckqI-MpSk7HRD%rrXe?d_$b
zqoYdSOn<)b<9Qyw?<1u|(=;?q!!Qg?)5I{0YTqh=5CYRQkx~+kMnfG(A`#l#+c8bE
zX>iZ;SXj((?yK`mOiuCSwjSPn=WUY7<!N6zdos*Pvnl@K{CAYf<+`b@{Q;EAWlo&=
zoQuPwOwZlo!te+uht5%{R6>1*0yNXem1~^%<bN#rLZO<+wNgsqI1bnU8n0`=cH?gx
z$EhCgEdv1j{M%(dI{j%VL~x>3T(_>h;<^-z#m58iAPA)tp67+yc%Jw800M{)KOSnj
z94i$Td`$oV!(+d5{M4C8hFCK|Sa$q!=?ceBox#cHTY^{>z;ipEXbSQE$<sKFvucP{
z0e=kc-Nn9LPlrN`UHyX(P7UEW&Z+?Phj+QJ&6_vV+1ZH{lAkVLZP-|su3aZz$gdxO
zZQCRg3635<01ygsV`6gs01U&xwrzA>=jh=B2mwD{YJ^ygR-J|cM0a;LM-Cle|DFNX
zQY*J~4m3dQeYRzYmJgzp5QBRLTB?>B0Do#ftq*%w3-S8lgADF|Cfrsv|HOv^XqtxY
zx7W4Xo*i0Htb}-J_dr7sP1iyPrj!Z?uq=!H#vrD@T=|&3!OO-VmSu&Gq<%SGW#Fkk
zM6fFa?AtX^y$v<Q%VaWlBauj=wlSa2Gcz;8<kTedg?To$ZDL#ZHoCgHnwDz-m48Zw
zrKKgNrlz<#KF-8H|FWa6m;RkQ>FMbqkx0}*6bglVVs>`++ju<wX6>cX_k9Y50=Zm{
zQmKSxS;XUU+S=OcE|<+9a=9FL?%b)`rcx<lu^763|Jd<;pKLb!jZjL7>FMdShGD#>
z>v|;U5EK_d{a0)JFnOMb=XtoUD<^baS3y-A$aUSK>$=}}b#)#4AE&0x&j{|`$^ZZW
M07*qoM6N<$f@5JoJOBUy

diff --git a/index.html b/index.html
index ec4501f0..9b7cfbdf 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Tinode example: chat web application in react.js</title>
-    <link rel="shortcut icon" href="img/logo32x32.png" />
+    <link id="shortcut-icon" rel="shortcut icon" href="img/logo32x32.png" />
     <!-- Browser styling for Chrome, FF, Opera -->
     <meta name="theme-color" content="#3949AB">
     <!-- Google's Roboto font -->
@@ -75,6 +75,20 @@
         'data:image/' + photo.type + ';base64,' + photo.data : null;
     }
 
+    // Make shortcut icon appear with a green dot.
+    function updateFavicon(on) {
+      var oldIcon = document.getElementById("shortcut-icon");
+      if (oldIcon) {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var newIcon = document.createElement('link');
+        newIcon.type = "image/png";
+        newIcon.id = "shortcut-icon";
+        newIcon.rel = "shortcut icon";
+        newIcon.href = "img/logo32x32" + (on ? 'a' : '') + ".png";
+        head.removeChild(oldIcon);
+        head.appendChild(newIcon);
+      }
+    }
     // Get 32 bit integer hash value for a string. Ideally it should produce the same value
     // as Java's String#hash().
     function stringHash(value) {
@@ -1067,7 +1081,6 @@
 
               this.props.state === 'contacts' ?
               <ContactsView
-                data={this.props.subscriptions}
                 topicSelected={this.props.topicSelected}
                 showContextMenu={this.props.showContextMenu}
                 onTopicSelected={this.props.onTopicSelected} /> :
@@ -1355,11 +1368,15 @@
 
       prepareContactList: function() {
         var contacts = [];
+        var totalUnread = 0;
         Tinode.getMeTopic().contacts(function(c) {
           c.unread = c.seq - (c.read > 0 ? c.read : 0);
+          totalUnread += c.unread;
           contacts.push(c);
         }, this);
 
+        updateFavicon(totalUnread > 0);
+
         return contacts;
       },
 
@@ -2800,7 +2817,6 @@
           liveConnection: navigator.onLine,
           topicSelected: '',
           loginDisabled: false,
-          subscriptions: {},
           displayMobile: (window.innerWidth <= MEDIA_BREAKPOINT),
           showInfoPanel: false,
           infoPanelShowMembers: false,
@@ -3272,7 +3288,6 @@
               state={this.state.sidePanelSelected}
               title={this.state.sidePanelTitle}
               avatar={this.state.sidePanelAvatar}
-              subscriptions={this.state.subscriptions}
               login={this.state.login}
               myUserId={this.state.myUserId}
               loginDisabled={this.state.loginDisabled}