Merge branch 'notification-unification-experiments' into 'develop'

Notification unification / WebPush i18n.

See merge request pleroma/pleroma-fe!1142
This commit is contained in:
lain 2020-06-19 13:34:04 +00:00
commit 1afa0f0044
6 changed files with 134 additions and 46 deletions

View file

@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed ### Changed
- Greentext now has separate color slot for it - Greentext now has separate color slot for it
- Removed the use of with_move parameters when fetching notifications - Removed the use of with_move parameters when fetching notifications
- Push notifications now are the same as normal notfication, and are localized.
### Fixed ### Fixed
- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully) - Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)

View 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

View 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)
}

View file

@ -13,7 +13,7 @@ import {
omitBy omitBy
} from 'lodash' } from 'lodash'
import { set } from 'vue' 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 apiService from '../services/api/api.service.js'
import { muteWordHits } from '../services/status_parser/status_parser.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 state.notifications.idStore[notification.id] = notification
if ('Notification' in window && window.Notification.permission === 'granted') { if ('Notification' in window && window.Notification.permission === 'granted') {
const notifObj = {} const notifObj = prepareNotificationObject(notification, rootGetters.i18n)
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 reasonsToMuteNotif = ( const reasonsToMuteNotif = (
notification.seen || notification.seen ||
@ -393,7 +358,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
) )
) )
if (!reasonsToMuteNotif) { 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 // Chrome is known for not closing notifications automatically
// according to MDN, anyway. // according to MDN, anyway.
setTimeout(desktopNotification.close.bind(desktopNotification), 5000) setTimeout(desktopNotification.close.bind(desktopNotification), 5000)

View file

@ -43,3 +43,47 @@ export const filteredNotificationsFromStore = (store, types) => {
export const unseenNotificationsFromStore = store => export const unseenNotificationsFromStore = store =>
filter(filteredNotificationsFromStore(store), ({ seen }) => !seen) 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
}

View file

@ -1,6 +1,19 @@
/* eslint-env serviceworker */ /* eslint-env serviceworker */
import localForage from 'localforage' 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 () { function isEnabled () {
return localForage.getItem('vuex-lz') return localForage.getItem('vuex-lz')
@ -12,15 +25,33 @@ function getWindowClients () {
.then((clientList) => clientList.filter(({ type }) => type === 'window')) .then((clientList) => clientList.filter(({ type }) => type === 'window'))
} }
self.addEventListener('push', (event) => { const setLocale = async () => {
if (event.data) { const state = await localForage.getItem('vuex-lz')
event.waitUntil(isEnabled().then((isEnabled) => { const locale = state.config.interfaceLanguage || 'en'
return isEnabled && getWindowClients().then((list) => { i18n.locale = locale
const data = event.data.json() }
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))
} }
}) })