butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch '419-add-notifications-toggle-to-profile-settings' into 'dev'

Browse source 
Profile settings: add global Notification toggle

See merge request keanuapp/keanuapp-weblite!272
This commit is contained in:
N Pex 2024-01-09 09:44:06 +00:00
commit f716cbaf35
8 changed files with 128 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -33,6 +33,7 @@
import stickers from "./plugins/stickers";
import { registerServiceWorker, notificationCount, windowNotificationPermission } from "./plugins/notificationAndServiceWorker.js"
import logoMixin from "./components/logoMixin";
import { mapState } from 'vuex'
export default {
name: "App",
@ -175,13 +176,16 @@ export default {
}
return favicon;
},
...mapState([
'globalNotification'
])
},
watch: {
notificationCount: {
handler(nCount) {
// windowNotificationPermission
// return value: 'granted', 'default', 'denied'
if (nCount > 0 && this.windowNotificationPermission() === "granted") {
if (this.globalNotification && nCount > 0 && this.windowNotificationPermission() === "granted") {
this.showNotification()
}
}

6
src/assets/translations/en.json
View file

@ -218,7 +218,8 @@
"password_new": "New password",
"password_repeat": "Repeat new password",
"display_name": "Display name",
"display_name_required": "Display name is required"
"display_name_required": "Display name is required",
"notification_label": "Notification"
},
"profile_info_popup": {
"you_are": "You are",
@ -382,7 +383,8 @@
"body": "Never miss a message or important conversation again! Be notified whenever someone sends you a message or replies to your chat.",
"enable": "Enable"
},
"blocked_message": "Notifications blocked. Please reset the permissions"
"blocked_message": "Notification is blocked. Go to your device or browser settings to enable Notification",
"not_supported": "Notification is not yet supported in Mobile"
},
"emoji": {
"search": "Search...",

11
src/components/ActionRow.vue
View file

@ -4,18 +4,16 @@
no-gutters
align-content="center"
v-on="$listeners"
v-show="icon === 'notifications_active' ? this.windowNotificationPermission() !== 'granted' : true"
>
<v-col cols="auto" class="me-2">
<v-col cols="auto" class="me-2 align-self-center">
<v-icon :size="iconSize">{{ icon }}</v-icon>
</v-col>
<v-col>{{ text }}</v-col>
<v-col class="align-self-center">{{ text }}</v-col>
<v-col cols="auto" v-if="$slots.default"><slot/></v-col>
</v-row>
</template>
<script>
import { windowNotificationPermission } from "../plugins/notificationAndServiceWorker.js"
export default {
name: "ActionRow",
props: {
@ -37,9 +35,6 @@ export default {
return "";
},
},
},
methods: {
windowNotificationPermission
}
};
</script>

61
src/components/Chat.vue
View file

@ -3,12 +3,10 @@
<ChatHeaderPrivate class="chat-header flex-grow-0 flex-shrink-0"
v-on:header-click="onHeaderClick"
v-on:view-room-details="viewRoomDetails"
v-on:notify="onNotificationDialog"
v-if="!useFileModeNonAdmin && $matrix.isDirectRoom(room)" />
<ChatHeader class="chat-header flex-grow-0 flex-shrink-0"
v-on:header-click="onHeaderClick"
v-on:view-room-details="viewRoomDetails"
v-on:notify="onNotificationDialog"
v-else-if="!useFileModeNonAdmin" />
<AudioLayout ref="chatContainer" class="auto-audio-player-root" v-if="useVoiceMode" :room="room"
:events="events" :autoplay="!showRecorder"
@ -78,9 +76,9 @@
<component :is="componentForEvent(event)" :room="room" :originalEvent="event" :nextEvent="filteredEvents[index + 1]"
:timelineSet="timelineSet" v-on:send-quick-reaction.stop="sendQuickReaction"
:componentFn="componentForEvent"
v-on:context-menu="showContextMenuForEvent({event: event, anchor: $event.anchor})"
v-on:context-menu="showContextMenuForEvent({event: event, anchor: $event.anchor})"
v-on:own-avatar-clicked="viewProfile"
v-on:other-avatar-clicked="showAvatarMenuForEvent({event: event, anchor: $event.anchor})"
v-on:other-avatar-clicked="showAvatarMenuForEvent({event: event, anchor: $event.anchor})"
v-on:download="download(event)"
v-on:poll-closed="pollWasClosed(event)"
v-on:more="
@ -324,45 +322,6 @@
<CreatePollDialog :show="showCreatePollDialog" @close="showCreatePollDialog = false" />
<!-- Dialog for request Notification and register service worker-->
<v-dialog
v-model="notificationDialog"
persistent
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
>
<div class="dialog-content text-center">
<v-icon size="30">notifications_active</v-icon>
<h2 class="dialog-title">
{{ $t("notification.dialog.title") }}
</h2>
<div class="dialog-text">{{ $t("notification.dialog.body") }}</div>
<v-container fluid>
<v-row cols="12">
<v-col cols="6">
<v-btn
depressed
text
block
class="text-button"
@click="notificationDialog = false"
>{{ $t("global.close") }}</v-btn
>
</v-col>
<v-col cols="6" align="center">
<v-btn
color="primary"
depressed
block
class="filled-button"
@click.stop="onNotifyRequest"
>{{ $t("notification.dialog.enable") }}</v-btn
>
</v-col>
</v-row>
</v-container>
</div>
</v-dialog>
</div>
</template>
@ -388,7 +347,6 @@ import chatMixin from "./chatMixin";
import sendAttachmentsMixin from "./sendAttachmentsMixin";
import AudioLayout from "./AudioLayout.vue";
import FileDropLayout from "./file_mode/FileDropLayout";
import { requestNotificationPermission, windowNotificationPermission } from "../plugins/notificationAndServiceWorker.js"
import roomTypeMixin from "./roomTypeMixin";
import roomMembersMixin from "./roomMembersMixin";
@ -525,7 +483,6 @@ export default {
Places: this.$t("emoji.categories.places")
}
},
notificationDialog: false
};
},
@ -914,18 +871,6 @@ export default {
this.initialLoadDone = true;
console.log("Loading finished!");
},
windowNotificationPermission,
onNotificationDialog() {
if(this.windowNotificationPermission() === 'denied') {
alert(this.$t("notification.blocked_message"));
} else if(this.windowNotificationPermission() === 'default') {
this.notificationDialog = true;
}
},
onNotifyRequest() {
requestNotificationPermission()
this.notificationDialog = false;
},
onRoomJoined(initialEventId) {
// Listen to events
this.$matrix.on("Room.timeline", this.onEvent);
@ -1157,7 +1102,7 @@ export default {
this.onLayoutChange(fn, element);
} else {
fn();
}
}
} else {
fn();
}

5
src/components/ChatHeader.vue
View file

@ -177,11 +177,6 @@ export default {
this.$emit("view-room-details", { event: this.event });
}
});
items.push({
icon: 'notifications_active', text: this.$t('global.notify'), handler: () => {
this.$emit("notify");
}
});
items.push({
icon: '$vuetify.icons.ic_member-leave', text: this.$t('leave.leave'), handler: () => {
this.leaveRoom();

108
src/components/Profile.vue
View file

@ -89,6 +89,16 @@
:icon="'$vuetify.icons.globe'"
:text="$t('profile.select_language')"
/>
<ActionRow
@click="onUpdateGlobalNotification"
:icon="notificationIcon"
:text="$t('profile.notification_label')"
>
<v-switch
v-model="globalNotification"
readonly
></v-switch>
</ActionRow>
</v-container>
<!-- edit password dialog -->
@ -197,6 +207,45 @@
v-model="showSelectLanguageDialog"
v-on:close="showSelectLanguageDialog = false"
/>
<!-- Dialog for request Notification -->
<v-dialog
v-model="notificationDialog"
persistent
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
>
<div class="dialog-content text-center">
<v-icon size="30">notifications_active</v-icon>
<h2 class="dialog-title">
{{ $t("notification.dialog.title") }}
</h2>
<div class="dialog-text">{{ $t("notification.dialog.body") }}</div>
<v-container fluid>
<v-row cols="12">
<v-col cols="6">
<v-btn
depressed
text
block
class="text-button"
@click="onNotifyDialogClosed"
>{{ $t("global.close") }}</v-btn
>
</v-col>
<v-col cols="6" align="center">
<v-btn
color="primary"
depressed
block
class="filled-button"
@click.stop="onNotifyDialog"
>{{ $t("notification.dialog.enable") }}</v-btn
>
</v-col>
</v-row>
</v-container>
</div>
</v-dialog>
</div>
</template>
@ -207,6 +256,8 @@ import util from "../plugins/utils";
import profileInfoMixin from "./profileInfoMixin";
import LogoutRoomDialog from './LogoutRoomDialog.vue';
import CopyLink from "./CopyLink.vue"
import { requestNotificationPermission, windowNotificationPermission } from "../plugins/notificationAndServiceWorker.js"
import { mapState } from 'vuex'
export default {
name: "Profile",
@ -234,7 +285,8 @@ export default {
passwordErrorMessage: null,
isAvatarLoaded: true,
loadValue: 0,
newPasswordHasError: false
newPasswordHasError: false,
notificationDialog: false
};
},
@ -252,7 +304,13 @@ export default {
this.newPassword2 &&
this.newPassword1 == this.newPassword2
);
}
},
notificationIcon() {
return this.globalNotification ? 'notifications_active' : 'notifications_off';
},
...mapState([
'globalNotification'
])
},
methods: {
@ -306,7 +364,53 @@ export default {
console.log("Progress: " + JSON.stringify(progress));
});
},
updateGlobalNotificationStore(flag) {
this.$store.commit('setGlobalNotification', flag);
},
windowNotificationPermission,
onUpdateGlobalNotification(showAlertOrDialog = true) {
const permission = this.windowNotificationPermission();
switch (permission) {
case 'denied':
this.updateGlobalNotificationStore(false);
if (showAlertOrDialog) {
alert(this.$t("notification.blocked_message"));
}
break;
case 'granted':
this.updateGlobalNotificationStore(!this.globalNotification);
break;
case 'default':
if (showAlertOrDialog) {
this.notificationDialog = true;
}
this.updateGlobalNotificationStore(!this.globalNotification);
break;
default:
alert(this.$t("notification.not_supported"));
}
},
async onNotifyDialog() {
const permission = await requestNotificationPermission()
if(permission === 'denied') {
this.updateGlobalNotificationStore(false);
alert(this.$t("notification.blocked_message"));
} else {
this.updateGlobalNotificationStore(true);
}
this.notificationDialog = false;
},
onNotifyDialogClosed() {
this.updateGlobalNotificationStore(false);
this.notificationDialog = false;
}
},
mounted() {
if(this.globalNotification && this.windowNotificationPermission() !== 'granted') {
this.onUpdateGlobalNotification(false);
}
}
};
</script>

6
src/plugins/notificationAndServiceWorker.js
View file

@ -6,16 +6,16 @@ export function registerServiceWorker() {
}
}
export function requestNotificationPermission() {
export async function requestNotificationPermission() {
if("PushManager" in window) {
window.Notification.requestPermission();
return Notification?.requestPermission().then((permission) => permission);
} else {
console.log("No Push API Support!");
}
}
export function windowNotificationPermission() {
return window.Notification.permission
return window?.Notification?.permission ?? 'Not_supported'
}
export function notificationCount() {

4
src/store/index.js
View file

@ -41,6 +41,7 @@ const vuexPersistLocalStorage = new VuexPersist({
language: state.language,
currentRoomId: state.currentRoomId,
hasShownMissedItemsHint: state.hasShownMissedItemsHint,
globalNotification: state.globalNotification,
};
} else {
return {};
@ -98,6 +99,9 @@ export default new Vuex.Store({
},
setHasShownMissedItemsHint(state, flag) {
state.hasShownMissedItemsHint = flag;
},
setGlobalNotification(state, flag) {
state.globalNotification = flag;
}
},
actions: {