diff --git a/client/components/Chat.vue b/client/components/Chat.vue index 69b62065..14a05108 100644 --- a/client/components/Chat.vue +++ b/client/components/Chat.vue @@ -162,8 +162,6 @@ export default { target: this.channel.id, }); } - - this.$root.synchronizeNotifiedState(); }, hideUserVisibleError() { this.$store.commit("currentUserVisibleError", null); diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js index 47c0b071..b9910701 100644 --- a/client/js/socket-events/init.js +++ b/client/js/socket-events/init.js @@ -62,8 +62,6 @@ socket.on("init", function(data) { } } - vueApp.synchronizeNotifiedState(); - if (document.body.classList.contains("public")) { window.addEventListener( "beforeunload", diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js index 8860ba55..718409fc 100644 --- a/client/js/socket-events/msg.js +++ b/client/js/socket-events/msg.js @@ -88,10 +88,6 @@ socket.on("msg", function(data) { user.lastMessage = new Date(data.msg.time).getTime() || Date.now(); } } - - if (data.msg.self || data.msg.highlight) { - vueApp.synchronizeNotifiedState(); - } }); function notifyMessage(targetId, channel, activeChannel, msg) { diff --git a/client/js/socket-events/open.js b/client/js/socket-events/open.js index 8e052f46..db491254 100644 --- a/client/js/socket-events/open.js +++ b/client/js/socket-events/open.js @@ -1,7 +1,6 @@ "use strict"; const socket = require("../socket"); -const {vueApp} = require("../vue"); const store = require("../store").default; // Sync unread badge and marker when other clients open a channel @@ -27,6 +26,4 @@ socket.on("open", function(id) { channel.channel.messages[channel.channel.messages.length - 1].id; } } - - vueApp.synchronizeNotifiedState(); }); diff --git a/client/js/socket-events/part.js b/client/js/socket-events/part.js index a1498039..716d97ca 100644 --- a/client/js/socket-events/part.js +++ b/client/js/socket-events/part.js @@ -18,6 +18,4 @@ socket.on("part", function(data) { 1 ); } - - vueApp.synchronizeNotifiedState(); }); diff --git a/client/js/store.js b/client/js/store.js index 140ddb31..4e8383ca 100644 --- a/client/js/store.js +++ b/client/js/store.js @@ -140,6 +140,17 @@ const store = new Vuex.Store({ return null; }, + highlightCount(state) { + let highlightCount = 0; + + for (const network of state.networks) { + for (const channel of network.channels) { + highlightCount += channel.highlight; + } + } + + return highlightCount; + }, title(state, getters) { const alertEventCount = getters.highlightCount ? `(${getters.highlightCount}) ` : ""; diff --git a/client/js/vue.js b/client/js/vue.js index 84705b54..df7a7453 100644 --- a/client/js/vue.js +++ b/client/js/vue.js @@ -11,6 +11,10 @@ const constants = require("./constants"); Vue.filter("localetime", localetime); +const favicon = document.getElementById("favicon"); +const faviconNormal = favicon.getAttribute("href"); +const faviconAlerted = favicon.dataset.other; + const vueApp = new Vue({ el: "#viewport", router, @@ -51,32 +55,6 @@ const vueApp = new Vue({ channel.moreHistoryAvailable = true; } }, - synchronizeNotifiedState() { - let hasAnyHighlights = false; - - for (const network of this.$store.state.networks) { - for (const chan of network.channels) { - if (chan.highlight > 0) { - hasAnyHighlights = true; - break; - } - } - } - - this.toggleNotificationMarkers(hasAnyHighlights); - }, - toggleNotificationMarkers(newState) { - if (this.$store.state.isNotified !== newState) { - // Toggles a dot on the menu icon when there are unread notifications - this.$store.commit("isNotified", newState); - - // Toggles the favicon to red when there are unread notifications - const favicon = document.getElementById("favicon"); - const old = favicon.getAttribute("href"); - favicon.setAttribute("href", favicon.dataset.other); - favicon.dataset.other = old; - } - }, }, render(createElement) { return createElement(App, { @@ -113,6 +91,14 @@ store.watch( } ); +// Toggles the favicon to red when there are unread notifications +store.watch( + (_, getters) => getters.highlightCount, + (highlightCount) => { + favicon.setAttribute("href", highlightCount > 0 ? faviconAlerted : faviconNormal); + } +); + Vue.config.errorHandler = function(e) { store.commit("currentUserVisibleError", `Vue error: ${e.message}`); console.error(e); // eslint-disable-line