Fix selectors for Nextcloud Talk (#473)

Script and CSS was updated to add selectors for the latest Nextcloud
(27).
Previous selectors were left as is for backwards compatibility.

Additionally direct notifications count now is detected by unread
conversations count in the left sidebar, using Talk specific
notifications as a fallback.

3 files changed, 62 insertions, 42 deletions

diff --git a/recipes/nextcloud-talk/package.json b/recipes/nextcloud-talk/package.json
index aaf779f..4de0dfb 100644
--- a/recipes/nextcloud-talk/package.json
+++ b/recipes/nextcloud-talk/package.json
@@ -1,7 +1,7 @@
 {
   "id": "nextcloud-talk",
   "name": "Nextcloud Talk",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "license": "MIT",
   "repository": "https://github.com/csolisr/ferdium-recipes/tree/master/recipes/nextcloud-tasks/",
   "config": {
diff --git a/recipes/nextcloud-talk/service.css b/recipes/nextcloud-talk/service.css
index ccdba58..e616dd6 100644
--- a/recipes/nextcloud-talk/service.css
+++ b/recipes/nextcloud-talk/service.css
@@ -1,25 +1,43 @@
-/* Hide all app links in the top menu except for Talk */
-#appmenu li:not([data-id="spreed"]) {
+/*
+With `/* Legacy [asterisk]/` are marked those selectors that were working for
+some Nextcloud version before 27 (24 or 25).
+*/
+
+/*Hide all interactive elements that are not related to the Talk. */
+/* App links and contacts menu link in the top menu except for Talk. */
+#appmenu li:not([data-id="spreed"]),  /* Legacy */
+.app-menu .app-menu-main > .app-menu-entry:not([data-app-id="spreed"]),
+#unified-search,
+#contactsmenu,
+/* All settings options, except the option to log out */
+#settings #expanddiv li:not([data-id='logout']),  /* Legacy */
+#header-menu-user-menu li:not([id='logout']),  /* Nextcloud 27 */
+/* Hide notifications that are not related to Talk */
+.notification-container .notification-wrapper .notification:not([data-app="spreed"]),
+/* "Dismiss all notifications" as this action will dismiss also hidden
+notifications as this behaviour might not be desirable. */
+.notification-wrapper .dismiss-all, /* Legacy */
+#header-menu-notifications .notification-container .dismiss-all  /* Nextcloud 27 */ {
   display: none;
 }
 
 /* Change cursor to the default pointer for top menu Nextcloud home and Talk
 links and disable them */
 #nextcloud,
-#appmenu li[data-id="spreed"] a {
+#appmenu li[data-id="spreed"] a,  /* Legacy */
+.app-menu-main li[data-app-id="spreed"] a  /* Nextcloud 27 */ {
   cursor: default;
   pointer-events: none;
 }
 
-/* Hide all settings options, except the option to log out */
-#settings #expanddiv li:not([data-id='logout']) {
-  display: none;
-}
-
 /* Fix the margin of the dropdown */
-#settings #expanddiv,
-#settings #expanddiv > ul {
-  min-height: 0;
+#settings #expanddiv,  /* Legacy */
+#settings #expanddiv > ul,  /* Legacy */
+#header-menu-user-menu,  /* Nextcloud 27 */
+#header-menu-user-menu > .header-menu__content,  /* Nextcloud 27 */
+#header-menu-notifications,  /* Nextcloud 27 */
+#header-menu-notifications > .header-menu__content  /* Nextcloud 27 */ {
+  min-height: auto;
 }
 
 /* Hide "More" link in the top menu */
@@ -28,16 +46,10 @@ links and disable them */
 }
 
 /* Hide notifications that are not related to Talk */
-.notifications .notification-wrapper .notification {
+.notifications .notification-wrapper .notification  /* Legacy */ {
   display: none;
 }
-.notifications .notification-wrapper .notification[object_type="chat"],
-.notifications .notification-wrapper .notification[object_type="room"]  {
+.notifications .notification-wrapper .notification[object_type="chat"],  /* Legacy */
+.notifications .notification-wrapper .notification[object_type="room"]  /* Legacy */  {
   display: initial;
 }
-
-/* Hide "Dismiss all notifications" as this action will dismiss also hidden
-notifications */
-.notification-wrapper .dismiss-all {
-  display: none;
-}
diff --git a/recipes/nextcloud-talk/webview.js b/recipes/nextcloud-talk/webview.js
index 0c7f5c2..15f4dfb 100644
--- a/recipes/nextcloud-talk/webview.js
+++ b/recipes/nextcloud-talk/webview.js
@@ -6,38 +6,46 @@ const _path = _interopRequireDefault(require('path'));
 
 module.exports = Ferdium => {
   const getMessages = () => {
-    let direct = 0;
-
-    const notificationWrapper = document.querySelector(
-      '.notifications .notification-wrapper',
-    );
-
-    if (notificationWrapper) {
-      const directSelector = notificationWrapper.querySelectorAll(
-        '.notification[object_type="chat"], .notification[object_type="room"]',
-      );
-      direct = directSelector ? Ferdium.safeParseInt(directSelector.length) : 0;
-    }
-
+    // With `// Legacy ` are marked those selectors that were working for some
+    // Nextcloud version before 27 (24 or 25).
+    const counterBubble = '.counter-bubble__counter';
+    const directFromLeftSideBar = document.querySelectorAll(
+      `${counterBubble}--highlighted`, // Nextcloud 27
+    ).length;
     let indirect = 0;
-
     for (const counter of document.querySelectorAll(
-      '.app-navigation-entry__counter',
+      '.app-navigation-entry__counter, ' + // Legacy
+        `${counterBubble}:not(${counterBubble}--highlighted)`, // Nextcloud 27
     )) {
-      const entryCounter = counter
-        ? Ferdium.safeParseInt(counter.textContent)
-        : 0;
-      indirect += entryCounter;
+      indirect += Ferdium.safeParseInt(counter?.textContent.trim());
     }
 
     if (document.title.startsWith('*')) {
       indirect += 1;
     }
 
-    Ferdium.setBadge(direct, indirect);
+    Ferdium.setBadge(
+      // Try to use the unread conversations count retrieved from the left
+      // sidebar, otherwise check Talk specific notifications
+      directFromLeftSideBar > 0
+        ? directFromLeftSideBar
+        : Ferdium.safeParseInt(
+            document
+              .querySelector(
+                '.notifications .notification-wrapper, ' + // Legacy
+                  '.notification-container .notification-wrapper', // Nextcloud 27
+              )
+              ?.querySelectorAll(
+                '.notification[object_type="chat"], ' + // Legacy
+                  '.notification[object_type="room"], ' + // Legacy
+                  '.notification[data-object-type="chat"], ' + // Nextcloud 27
+                  '.notification[data-object-type="room"]', // Nextcloud 27
+              ).length,
+          ),
+      indirect,
+    );
   };
 
   Ferdium.loop(getMessages);
-
   Ferdium.injectCSS(_path.default.join(__dirname, 'service.css'));
 };