Merge branch 'notification-unification-experiments' into 'develop'
Notification unification / WebPush i18n. See merge request pleroma/pleroma-fe!1142
This commit is contained in:
commit
1afa0f0044
6 changed files with 134 additions and 46 deletions
|
@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|||
### Changed
|
||||
- Greentext now has separate color slot for it
|
||||
- Removed the use of with_move parameters when fetching notifications
|
||||
- Push notifications now are the same as normal notfication, and are localized.
|
||||
|
||||
### Fixed
|
||||
- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
|
||||
|
|
35
src/i18n/service_worker_messages.js
Normal file
35
src/i18n/service_worker_messages.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
/* eslint-disable import/no-webpack-loader-syntax */
|
||||
// This module exports only the notification part of the i18n,
|
||||
// which is useful for the service worker
|
||||
|
||||
const messages = {
|
||||
ar: require('../lib/notification-i18n-loader.js!./ar.json'),
|
||||
ca: require('../lib/notification-i18n-loader.js!./ca.json'),
|
||||
cs: require('../lib/notification-i18n-loader.js!./cs.json'),
|
||||
de: require('../lib/notification-i18n-loader.js!./de.json'),
|
||||
eo: require('../lib/notification-i18n-loader.js!./eo.json'),
|
||||
es: require('../lib/notification-i18n-loader.js!./es.json'),
|
||||
et: require('../lib/notification-i18n-loader.js!./et.json'),
|
||||
eu: require('../lib/notification-i18n-loader.js!./eu.json'),
|
||||
fi: require('../lib/notification-i18n-loader.js!./fi.json'),
|
||||
fr: require('../lib/notification-i18n-loader.js!./fr.json'),
|
||||
ga: require('../lib/notification-i18n-loader.js!./ga.json'),
|
||||
he: require('../lib/notification-i18n-loader.js!./he.json'),
|
||||
hu: require('../lib/notification-i18n-loader.js!./hu.json'),
|
||||
it: require('../lib/notification-i18n-loader.js!./it.json'),
|
||||
ja: require('../lib/notification-i18n-loader.js!./ja_pedantic.json'),
|
||||
ja_easy: require('../lib/notification-i18n-loader.js!./ja_easy.json'),
|
||||
ko: require('../lib/notification-i18n-loader.js!./ko.json'),
|
||||
nb: require('../lib/notification-i18n-loader.js!./nb.json'),
|
||||
nl: require('../lib/notification-i18n-loader.js!./nl.json'),
|
||||
oc: require('../lib/notification-i18n-loader.js!./oc.json'),
|
||||
pl: require('../lib/notification-i18n-loader.js!./pl.json'),
|
||||
pt: require('../lib/notification-i18n-loader.js!./pt.json'),
|
||||
ro: require('../lib/notification-i18n-loader.js!./ro.json'),
|
||||
ru: require('../lib/notification-i18n-loader.js!./ru.json'),
|
||||
te: require('../lib/notification-i18n-loader.js!./te.json'),
|
||||
zh: require('../lib/notification-i18n-loader.js!./zh.json'),
|
||||
en: require('../lib/notification-i18n-loader.js!./en.json')
|
||||
}
|
||||
|
||||
export default messages
|
12
src/lib/notification-i18n-loader.js
Normal file
12
src/lib/notification-i18n-loader.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
// This somewhat mysterious module will load a json string
|
||||
// and then extract only the 'notifications' part. This is
|
||||
// meant to be used to load the partial i18n we need for
|
||||
// the service worker.
|
||||
module.exports = function (source) {
|
||||
var object = JSON.parse(source)
|
||||
var smol = {
|
||||
notifications: object.notifications || {}
|
||||
}
|
||||
|
||||
return JSON.stringify(smol)
|
||||
}
|
|
@ -13,7 +13,7 @@ import {
|
|||
omitBy
|
||||
} from 'lodash'
|
||||
import { set } from 'vue'
|
||||
import { isStatusNotification } from '../services/notification_utils/notification_utils.js'
|
||||
import { isStatusNotification, prepareNotificationObject } from '../services/notification_utils/notification_utils.js'
|
||||
import apiService from '../services/api/api.service.js'
|
||||
import { muteWordHits } from '../services/status_parser/status_parser.js'
|
||||
|
||||
|
@ -344,42 +344,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
|
|||
state.notifications.idStore[notification.id] = notification
|
||||
|
||||
if ('Notification' in window && window.Notification.permission === 'granted') {
|
||||
const notifObj = {}
|
||||
const status = notification.status
|
||||
const title = notification.from_profile.name
|
||||
notifObj.icon = notification.from_profile.profile_image_url
|
||||
let i18nString
|
||||
switch (notification.type) {
|
||||
case 'like':
|
||||
i18nString = 'favorited_you'
|
||||
break
|
||||
case 'repeat':
|
||||
i18nString = 'repeated_you'
|
||||
break
|
||||
case 'follow':
|
||||
i18nString = 'followed_you'
|
||||
break
|
||||
case 'move':
|
||||
i18nString = 'migrated_to'
|
||||
break
|
||||
case 'follow_request':
|
||||
i18nString = 'follow_request'
|
||||
break
|
||||
}
|
||||
|
||||
if (notification.type === 'pleroma:emoji_reaction') {
|
||||
notifObj.body = rootGetters.i18n.t('notifications.reacted_with', [notification.emoji])
|
||||
} else if (i18nString) {
|
||||
notifObj.body = rootGetters.i18n.t('notifications.' + i18nString)
|
||||
} else if (isStatusNotification(notification.type)) {
|
||||
notifObj.body = notification.status.text
|
||||
}
|
||||
|
||||
// Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
|
||||
if (status && status.attachments && status.attachments.length > 0 && !status.nsfw &&
|
||||
status.attachments[0].mimetype.startsWith('image/')) {
|
||||
notifObj.image = status.attachments[0].url
|
||||
}
|
||||
const notifObj = prepareNotificationObject(notification, rootGetters.i18n)
|
||||
|
||||
const reasonsToMuteNotif = (
|
||||
notification.seen ||
|
||||
|
@ -393,7 +358,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
|
|||
)
|
||||
)
|
||||
if (!reasonsToMuteNotif) {
|
||||
let desktopNotification = new window.Notification(title, notifObj)
|
||||
let desktopNotification = new window.Notification(notifObj.title, notifObj)
|
||||
// Chrome is known for not closing notifications automatically
|
||||
// according to MDN, anyway.
|
||||
setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
|
||||
|
|
|
@ -43,3 +43,47 @@ export const filteredNotificationsFromStore = (store, types) => {
|
|||
|
||||
export const unseenNotificationsFromStore = store =>
|
||||
filter(filteredNotificationsFromStore(store), ({ seen }) => !seen)
|
||||
|
||||
export const prepareNotificationObject = (notification, i18n) => {
|
||||
const notifObj = {
|
||||
tag: notification.id
|
||||
}
|
||||
const status = notification.status
|
||||
const title = notification.from_profile.name
|
||||
notifObj.title = title
|
||||
notifObj.icon = notification.from_profile.profile_image_url
|
||||
let i18nString
|
||||
switch (notification.type) {
|
||||
case 'like':
|
||||
i18nString = 'favorited_you'
|
||||
break
|
||||
case 'repeat':
|
||||
i18nString = 'repeated_you'
|
||||
break
|
||||
case 'follow':
|
||||
i18nString = 'followed_you'
|
||||
break
|
||||
case 'move':
|
||||
i18nString = 'migrated_to'
|
||||
break
|
||||
case 'follow_request':
|
||||
i18nString = 'follow_request'
|
||||
break
|
||||
}
|
||||
|
||||
if (notification.type === 'pleroma:emoji_reaction') {
|
||||
notifObj.body = i18n.t('notifications.reacted_with', [notification.emoji])
|
||||
} else if (i18nString) {
|
||||
notifObj.body = i18n.t('notifications.' + i18nString)
|
||||
} else if (isStatusNotification(notification.type)) {
|
||||
notifObj.body = notification.status.text
|
||||
}
|
||||
|
||||
// Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
|
||||
if (status && status.attachments && status.attachments.length > 0 && !status.nsfw &&
|
||||
status.attachments[0].mimetype.startsWith('image/')) {
|
||||
notifObj.image = status.attachments[0].url
|
||||
}
|
||||
|
||||
return notifObj
|
||||
}
|
||||
|
|
47
src/sw.js
47
src/sw.js
|
@ -1,6 +1,19 @@
|
|||
/* eslint-env serviceworker */
|
||||
|
||||
import localForage from 'localforage'
|
||||
import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
|
||||
import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import messages from './i18n/service_worker_messages.js'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
const i18n = new VueI18n({
|
||||
// By default, use the browser locale, we will update it if neccessary
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
messages
|
||||
})
|
||||
|
||||
function isEnabled () {
|
||||
return localForage.getItem('vuex-lz')
|
||||
|
@ -12,15 +25,33 @@ function getWindowClients () {
|
|||
.then((clientList) => clientList.filter(({ type }) => type === 'window'))
|
||||
}
|
||||
|
||||
self.addEventListener('push', (event) => {
|
||||
if (event.data) {
|
||||
event.waitUntil(isEnabled().then((isEnabled) => {
|
||||
return isEnabled && getWindowClients().then((list) => {
|
||||
const data = event.data.json()
|
||||
const setLocale = async () => {
|
||||
const state = await localForage.getItem('vuex-lz')
|
||||
const locale = state.config.interfaceLanguage || 'en'
|
||||
i18n.locale = locale
|
||||
}
|
||||
|
||||
if (list.length === 0) return self.registration.showNotification(data.title, data)
|
||||
})
|
||||
}))
|
||||
const maybeShowNotification = async (event) => {
|
||||
const enabled = await isEnabled()
|
||||
const activeClients = await getWindowClients()
|
||||
await setLocale()
|
||||
if (enabled && (activeClients.length === 0)) {
|
||||
const data = event.data.json()
|
||||
|
||||
const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
|
||||
const notification = await fetch(url, { headers: { Authorization: 'Bearer ' + data.access_token } })
|
||||
const notificationJson = await notification.json()
|
||||
const parsedNotification = parseNotification(notificationJson)
|
||||
|
||||
const res = prepareNotificationObject(parsedNotification, i18n)
|
||||
|
||||
self.registration.showNotification(res.title, res)
|
||||
}
|
||||
}
|
||||
|
||||
self.addEventListener('push', async (event) => {
|
||||
if (event.data) {
|
||||
event.waitUntil(maybeShowNotification(event))
|
||||
}
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in a new issue