Add notification count to page title

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Allow users to login with either username or email
 * Change site_name default to Infinity One
 * Use site_name title on authentication pages
+* Add notification count to page title
 
 ### Bug Fixes
 

assets/js/notifier.js

@@ -11,8 +11,9 @@ class Notifier {
   constructor(one_chat) {
     this.one_chat = one_chat;
     Notification.requestPermission().then(function(result) {
-      console.log(result);
+      console.log('request permissions', result);
     });
+    this.useNewNotification = this.supportsNewNofification();
   }
 
   desktop(title, body, opts = {}) {
@@ -22,7 +23,7 @@ class Notifier {
       icon = opts.icon;
     }
 
-    var notification = new Notification(title, {
+    var notification = this.newNotification(title, {
       body: body,
       icon: icon,
     });
@@ -40,10 +41,33 @@ class Notifier {
     }
   }
 
+  newNotification(title, opts = {}) {
+    let not;
+    if (this.useNewNotification) {
+      not = new Notification(title, opts);
+    } else {
+      not = Notification(title, opts);
+    }
+    return not;
+  }
+
   audio(sound) {
     if (debug) { console.log('notify_audio', sound) }
     $('audio#' + sound)[0].play()
   }
+
+  supportsNewNofification() {
+    if (!window.Notification || !Notification.requestPermission)
+      return false;
+
+    try {
+      new Notification('');
+    } catch (e) {
+      if (e.name == 'TypeError')
+        return false;
+    }
+    return true;
+  }
 }
 
 export default Notifier

assets/js/room_manager.js

@@ -172,17 +172,36 @@ class RoomManager {
     }
   }
   update_burger_alert() {
+    let title = $('head title').text();
+    console.log('update_burger_alert', title);
+
     if($('.rooms-list li.has-alert').length > 0) {
       let count = 0;
       for (const has_unread of $('li.room-link span.unread')) {
         count += parseInt($(has_unread).text());
       }
       this.set_burger_unreads(count);
+      console.log('set title count', count);
+
+      let new_title;
+      let count_str = `(${count})`;
+
+      if (/\(\d*\)/.test(title)) {
+        new_title = title.replace(/\(\d*\)/, count_str);
+      } else {
+        new_title = title + count_str;
+      }
+      console.log('.. new_title', new_title);
+      $('head title').text(new_title);
     } else {
+      console.log('clear title count');
       this.clear_burger_unreads();
+      $('head title').text(title.replace(/\(\d*\)/, ""));
     }
+    console.log('new title', $('head title').text());
   }
   set_burger_unreads(count) {
+    console.log('set_burger_unreads', count);
     let value = '•'
     if (count > 0) { value = count; }
     let alert = `<div class="unread-burger-alert color-error-contrast background-error-color">${value}</div>`
@@ -193,10 +212,12 @@ class RoomManager {
     }
   }
   clear_burger_unreads() {
+    console.log('clear_burger_unreads');
     $('.burger .unread-burger-alert').remove()
   }
 
   notification(resp) {
+    console.log('notification', resp);
     if (!resp.badges_only) {
       if (resp.body) {
         notifier.desktop('Message from @' + resp.username, resp.body, {duration: resp.duration})
@@ -482,9 +503,11 @@ class RoomManager {
   }
 
   set_badges() {
+    console.log('set_badges');
     let cnt = this.get_unreads();
     if (cnt != this.badges) {
       this.badges = cnt;
+      console.log('set_badges', cnt);
       if (cnt == 0) {
         // document.title = this.title
         this.favico.reset();

plugins/one_chat/lib/one_chat_web/channels/client.ex

@@ -209,6 +209,7 @@ defmodule OneChatWeb.Client do
             {message_id: #{id}, name: #{name}, channel_id: #{channel_id}, channel_name: #{channel_name}});
         }
       });
+      OneChat.roomManager.set_badges();
       """
       |> String.replace("\n", "")
     socket

plugins/one_chat/lib/one_chat_web/channels/user_channel/notifier.ex

@@ -54,6 +54,25 @@ defmodule OneChatWeb.UserChannel.Notifier do
   end
 
   def broadcast_unread_count(socket, channel_name, count, client) do
+    # title = Rebel.Core.exec_js!(socket, ~s/$('head title').text()/)
+    # {count, base} =
+    #   case Regex.run(~r/([^\(]+)\((\d*)\)/, title) do
+    #     nil ->
+    #       {0, title}
+
+    #     [_, base, ""] ->
+    #       {0, base}
+
+    #     [_, base, count] ->
+    #       count =
+    #         case Integer.parse(count) do
+    #           {cnt, ""} -> cnt
+    #           _ -> 0
+    #         end
+    #      {count, base}
+    #   end
+
+    # //  $('head title').text('#{base}(#{count + 1})');
     client.broadcast_js socket, """
       $('.link-room-#{channel_name}') .find('.unread').remove();
       $('.link-room-#{channel_name} a.open-room')