No OneTemporary
Actions

Size

28 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index bb55d3e526..87123ddc48 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,180 +1,181 @@
	# Changelog
	All notable changes to this project will be documented in this file.

	The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).


	## [Unreleased]
	### Fixed
	- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
	- Fixed custom emoji not working in profile field names
	- Fixed pinned statuses not appearing in user profiles


	## [2.2.1] - 2020-11-11
	### Fixed
	- Fixed regression in react popup alignment and overflowing


	## [2.2.0] - 2020-11-06
	### Added
	- New option to optimize timeline rendering to make the site more responsive (enabled by default)
	- New instance option `logoLeft` to move logo to the left side in desktop nav bar
	- Import/export a muted users
	- Proper handling of deletes when using websocket streaming
	- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
	+- Added a small red badge to the favicon when there's unread notifications

	### Fixed
	- Fixed clicking NSFW hider through status popover
	- Fixed chat-view back button being hard to click
	- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
	- Fixed multiple regressions in CSS styles
	- Fixed multiple issues with input fields when using CJK font as default
	- Fixed search field in navbar infringing into logo in some cases
	- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch.

	### Changed
	- Clicking immediately when timeline shifts is now blocked to prevent misclicks
	- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
	- Some icons changed for better accessibility (lock, globe)
	- Logo is now clickable
	- Changed default logo to SVG version


	## [2.1.2] - 2020-09-17
	### Fixed
	- Fixed chats list not updating its order when new messages come in
	- Fixed chat messages sometimes getting lost when you receive a message at the same time


	## [2.1.1] - 2020-09-08
	### Changed
	- Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.

	### Fixed
	- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling.
	- Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over.
	- Fixed weird autocomplete behavior when you write ":custom_emoji: ?"


	## [2.1.0] - 2020-08-28
	### Added
	- Autocomplete domains from list of known instances
	- 'Bot' settings option and badge
	- Added profile meta data fields that can be set in profile settings
	- Added option to reset avatar/banner in profile settings
	- Descriptions can be set on uploaded files before posting
	- Added status preview option to preview your statuses before posting
	- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style
	- Added ability to see all favoriting or repeating users when hovering the number on highlighted statuses
	- Bookmarks

	### Changed
	- Change heart to thumbs up in reaction picker
	- Close the media modal on navigation events
	- Add colons to the emoji alt text, to make them copyable
	- Add better visual indication for drag-and-drop for files
	- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc
	- Remove unnecessary options for 'automatic loading when loading older' and 'reply previews'
	- 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.
	- Updated Notification Settings to match new BE API

	### Fixed
	- Custom Emoji will display in poll options now.
	- Status ellipsis menu closes properly when selecting certain options
	- Cropped images look correct in Chrome
	- Newlines in the muted words settings work again
	- Clicking on non-latin hashtags won't open a new window
	- Uploading and drag-dropping multiple files works correctly now.
	- Subject field now appears disabled when posting
	- Fix status ellipsis menu being cut off in notifications column
	- Fixed autocomplete sometimes not returning the right user when there's already some results
	- Videos and audio and misc files show description as alt/title properly now
	- Clicking on non-image/video files no longer opens an empty modal
	- Audio files can now be played back in the frontend with hidden attachments
	- Videos are not cropped awkwardly in the uploads section anymore
	- Reply filtering options in Settings -> Filtering now work again using filtering on server
	- Don't show just blank-screen when cookies are disabled
	- Add status idempotency to prevent accidental double posting when posting returns an error
	- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
	- Multiple issues with muted statuses/notifications

	## [2.0.5] - 2020-05-12
	### Added
	- Added private notifications option for push notifications
	- 'Copy link' button for statuses (in the ellipsis menu)

	### Changed
	- Registration page no longer requires email if the server is configured not to require it

	### Fixed
	- Status ellipsis menu closes properly when selecting certain options

	## [2.0.3] - 2020-05-02
	### Fixed
	- Show more/less works correctly with auto-collapsed subjects and long posts
	- RTL characters won't look messed up in notifications

	### Changed
	- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:

	### Added
	- Follow request notification support

	## [2.0.2] - 2020-04-08
	### Fixed
	- Favorite/Repeat avatars not showing up on private instances/non-public posts
	- Autocorrect getting triggered in the captcha field
	- Overflow on long domains in follow/move notifications

	### Changed
	- Polish translation updated

	## [2.0.0] - 2020-02-28
	### Added
	- Tons of color slots including ones for hover/pressed/toggled buttons
	- Experimental `--variable[,mod]` syntax support for color slots in themes. the `mod` makes color brighter/darker depending on background color (makes darker color brighter/darker depending on background color)
	- Paper theme by Shpuld
	- Icons in nav panel
	- Private mode support
	- Support for 'Move' type notifications
	- Pleroma AMOLED dark theme
	- User level domain mutes, under User Settings -> Mutes
	- Emoji reactions for statuses
	- MRF keyword policy disclosure
	### Changed
	- Updated Pleroma default themes
	- theme engine update to 3 (themes v2.1 introduction)
	- massive internal changes in theme engine - slowly away from "generate things separately with spaghetti code" towards "feed all data into single 'generateTheme' function and declare slot inheritance and all in a separate file"
	- Breezy theme updates to make it closer to actual Breeze in some aspects
	- when using `--variable` in shadows it no longer uses the actual CSS3 variable, instead it generates color from other slots
	- theme doesn't get saved to local storage when opening FE anonymously
	- Captcha now resets on failed registrations
	- Notifications column now cleans itself up to optimize performance when tab is left open for a long time
	- 403 messaging
	### Fixed
	- Fixed loader-spinner not disappearing when a status preview fails to load
	- anon viewers won't get theme data saved to local storage, so admin changing default theme will have an effect for users coming back to instance.
	- Single notifications left unread when hitting read on another device/tab
	- Registration fixed
	- Deactivation of remote accounts from frontend
	- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
	- Improved performance of anything that uses popovers (most notably statuses)

	## [1.1.7 and earlier] - 2019-12-14
	### Added
	- Ability to hide/show repeats from user
	- User profile button clutter organized into a menu
	- Emoji picker
	- Started changelog anew
	- Ability to change user's email
	- About page
	- Added remote user redirect

	### Changed
	- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes

	### Fixed
	- improved hotkey behavior on autocomplete popup
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 3cbbf020c0..b472fcf64e 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,386 +1,389 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import routes from './routes'
	import App from '../App.vue'
	import { windowWidth } from '../services/window_utils/window_utils'
	import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
	import { applyTheme } from '../services/style_setter/style_setter.js'
	+import FaviconService from '../services/favicon_service/favicon_service.js'

	let staticInitialResults = null

	const parsedInitialResults = () => {
	if (!document.getElementById('initial-results')) {
	return null
	}
	if (!staticInitialResults) {
	staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent)
	}
	return staticInitialResults
	}

	const decodeUTF8Base64 = (data) => {
	const rawData = atob(data)
	const array = Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
	const text = new TextDecoder().decode(array)
	return text
	}

	const preloadFetch = async (request) => {
	const data = parsedInitialResults()
	if (!data \|\| !data[request]) {
	return window.fetch(request)
	}
	const decoded = decodeUTF8Base64(data[request])
	const requestData = JSON.parse(decoded)
	return {
	ok: true,
	json: () => requestData,
	text: () => requestData
	}
	}

	const getInstanceConfig = async ({ store }) => {
	try {
	const res = await preloadFetch('/api/v1/instance')
	if (res.ok) {
	const data = await res.json()
	const textlimit = data.max_toot_chars
	const vapidPublicKey = data.pleroma.vapid_public_key

	store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })

	if (vapidPublicKey) {
	store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
	}
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load instance config, potentially fatal')
	console.error(error)
	}
	}

	const getBackendProvidedConfig = async ({ store }) => {
	try {
	const res = await window.fetch('/api/pleroma/frontend_configurations')
	if (res.ok) {
	const data = await res.json()
	return data.pleroma_fe
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load backend-provided frontend config, potentially fatal')
	console.error(error)
	}
	}

	const getStaticConfig = async () => {
	try {
	const res = await window.fetch('/static/config.json')
	if (res.ok) {
	return res.json()
	} else {
	throw (res)
	}
	} catch (error) {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(error)
	return {}
	}
	}

	const setSettings = async ({ apiConfig, staticConfig, store }) => {
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const env = window.___pleromafe_mode.NODE_ENV

	// This takes static config and overrides properties that are present in apiConfig
	let config = {}
	if (overrides.staticConfigPreference && env === 'development') {
	console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
	config = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = (name) => {
	store.dispatch('setInstanceOption', { name, value: config[name] })
	}

	copyInstanceOption('nsfwCensorImage')
	copyInstanceOption('background')
	copyInstanceOption('hidePostStats')
	copyInstanceOption('hideUserStats')
	copyInstanceOption('hideFilteredStatuses')
	copyInstanceOption('logo')

	store.dispatch('setInstanceOption', {
	name: 'logoMask',
	value: typeof config.logoMask === 'undefined'
	? true
	: config.logoMask
	})

	store.dispatch('setInstanceOption', {
	name: 'logoMargin',
	value: typeof config.logoMargin === 'undefined'
	? 0
	: config.logoMargin
	})
	copyInstanceOption('logoLeft')
	store.commit('authFlow/setInitialStrategy', config.loginMethod)

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('minimalScopesMode')
	copyInstanceOption('hideMutedPosts')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('scopeCopy')
	copyInstanceOption('subjectLineBehavior')
	copyInstanceOption('postContentType')
	copyInstanceOption('alwaysShowSubjectInput')
	copyInstanceOption('showFeaturesPanel')
	copyInstanceOption('hideSitename')
	copyInstanceOption('sidebarRight')

	return store.dispatch('setTheme', config['theme'])
	}

	const getTOS = async ({ store }) => {
	try {
	const res = await window.fetch('/static/terms-of-service.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'tos', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load TOS")
	console.warn(e)
	}
	}

	const getInstancePanel = async ({ store }) => {
	try {
	const res = await preloadFetch('/instance/panel.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load instance panel")
	console.warn(e)
	}
	}

	const getStickers = async ({ store }) => {
	try {
	const res = await window.fetch('/static/stickers.json')
	if (res.ok) {
	const values = await res.json()
	const stickers = (await Promise.all(
	Object.entries(values).map(async ([name, path]) => {
	const resPack = await window.fetch(path + 'pack.json')
	var meta = {}
	if (resPack.ok) {
	meta = await resPack.json()
	}
	return {
	pack: name,
	path,
	meta
	}
	})
	)).sort((a, b) => {
	return a.meta.title.localeCompare(b.meta.title)
	})
	store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load stickers")
	console.warn(e)
	}
	}

	const getAppSecret = async ({ store }) => {
	const { state, commit } = store
	const { oauth, instance } = state
	return getOrCreateApp({ ...oauth, instance: instance.server, commit })
	.then((app) => getClientToken({ ...app, instance: instance.server }))
	.then((token) => {
	commit('setAppToken', token.access_token)
	commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	})
	}

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map(uri => uri.split('/').pop())
	store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
	}

	const getNodeInfo = async ({ store }) => {
	try {
	const res = await preloadFetch('/nodeinfo/2.0.json')
	if (res.ok) {
	const data = await res.json()
	const metadata = data.metadata
	const features = metadata.features
	store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
	store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
	store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
	store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
	store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
	store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
	store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
	store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
	store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
	store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })

	const uploadLimits = metadata.uploadLimits
	store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
	store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
	store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
	store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
	store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })

	store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
	store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })

	const suggestions = metadata.suggestions
	store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
	store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })

	const software = data.software
	store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })

	const priv = metadata.private
	store.dispatch('setInstanceOption', { name: 'private', value: priv })

	const frontendVersion = window.___pleromafe_commit_hash
	store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })

	const federation = metadata.federation

	store.dispatch('setInstanceOption', {
	name: 'tagPolicyAvailable',
	value: typeof federation.mrf_policies === 'undefined'
	? false
	: metadata.federation.mrf_policies.includes('TagPolicy')
	})

	store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
	store.dispatch('setInstanceOption', {
	name: 'federating',
	value: typeof federation.enabled === 'undefined'
	? true
	: federation.enabled
	})

	const accountActivationRequired = metadata.accountActivationRequired
	store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })

	const accounts = metadata.staffAccounts
	resolveStaffAccounts({ store, accounts })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn('Could not load nodeinfo')
	console.warn(e)
	}
	}

	const setConfig = async ({ store }) => {
	// apiConfig, staticConfig
	const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()])
	const apiConfig = configInfos[0]
	const staticConfig = configInfos[1]

	await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
	}

	const checkOAuthToken = async ({ store }) => {
	return new Promise(async (resolve, reject) => {
	if (store.getters.getUserToken()) {
	try {
	await store.dispatch('loginUser', store.getters.getUserToken())
	} catch (e) {
	console.error(e)
	}
	}
	resolve()
	})
	}

	const afterStoreSetup = async ({ store, i18n }) => {
	const width = windowWidth()
	store.dispatch('setMobileLayout', width <= 800)

	+ FaviconService.initFaviconService()
	+
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
	store.dispatch('setInstanceOption', { name: 'server', value: server })

	await setConfig({ store })

	const { customTheme, customThemeSource } = store.state.config
	const { theme } = store.state.instance
	const customThemePresent = customThemeSource \|\| customTheme

	if (customThemePresent) {
	if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
	applyTheme(customThemeSource)
	} else {
	applyTheme(customTheme)
	}
	} else if (theme) {
	// do nothing, it will load asynchronously
	} else {
	console.error('Failed to load any theme!')
	}

	// Now we can try getting the server settings and logging in
	// Most of these are preloaded into the index.html so blocking is minimized
	await Promise.all([
	checkOAuthToken({ store }),
	getInstancePanel({ store }),
	getNodeInfo({ store }),
	getInstanceConfig({ store })
	])

	// Start fetching things that don't need to block the UI
	store.dispatch('fetchMutes')
	getTOS({ store })
	getStickers({ store })

	const router = new VueRouter({
	mode: 'history',
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some(m => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { x: 0, y: 0 }
	}
	})

	/* eslint-disable no-new */
	return new Vue({
	router,
	store,
	i18n,
	el: '#app',
	render: h => h(App)
	})
	}

	export default afterStoreSetup
	diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
	index 4b479e1354..492585631d 100644
	--- a/src/components/notifications/notifications.js
	+++ b/src/components/notifications/notifications.js
	@@ -1,120 +1,123 @@
	import { mapGetters } from 'vuex'
	import Notification from '../notification/notification.vue'
	import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
	import {
	notificationsFromStore,
	filteredNotificationsFromStore,
	unseenNotificationsFromStore
	} from '../../services/notification_utils/notification_utils.js'
	+import FaviconService from '../../services/favicon_service/favicon_service.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch
	)

	const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

	const Notifications = {
	props: {
	// Disables display of panel header
	noHeading: Boolean,
	// Disables panel styles, unread mark, potentially other notification-related actions
	// meant for "Interactions" timeline
	minimalMode: Boolean,
	// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
	filterMode: Array
	},
	data () {
	return {
	bottomedOut: false,
	// How many seen notifications to display in the list. The more there are,
	// the heavier the page becomes. This count is increased when loading
	// older notifications, and cut back to default whenever hitting "Read!".
	seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
	}
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	notificationsFetcher.fetchAndUpdate({ store, credentials })
	},
	computed: {
	mainClass () {
	return this.minimalMode ? '' : 'panel panel-default'
	},
	notifications () {
	return notificationsFromStore(this.$store)
	},
	error () {
	return this.$store.state.statuses.notifications.error
	},
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	filteredNotifications () {
	return filteredNotificationsFromStore(this.$store, this.filterMode)
	},
	unseenCount () {
	return this.unseenNotifications.length
	},
	unseenCountTitle () {
	return this.unseenCount + (this.unreadChatCount)
	},
	loading () {
	return this.$store.state.statuses.notifications.loading
	},
	notificationsToDisplay () {
	return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
	},
	...mapGetters(['unreadChatCount'])
	},
	components: {
	Notification
	},
	watch: {
	unseenCountTitle (count) {
	if (count > 0) {
	+ FaviconService.drawFaviconBadge()
	this.$store.dispatch('setPageTitle', `(${count})`)
	} else {
	+ FaviconService.clearFaviconBadge()
	this.$store.dispatch('setPageTitle', '')
	}
	}
	},
	methods: {
	markAsSeen () {
	this.$store.dispatch('markNotificationsAsSeen')
	this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
	},
	fetchOlderNotifications () {
	if (this.loading) {
	return
	}

	const seenCount = this.filteredNotifications.length - this.unseenCount
	if (this.seenToDisplayCount < seenCount) {
	this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
	return
	} else if (this.seenToDisplayCount > seenCount) {
	this.seenToDisplayCount = seenCount
	}

	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setNotificationsLoading', { value: true })
	notificationsFetcher.fetchAndUpdate({
	store,
	credentials,
	older: true
	}).then(notifs => {
	store.commit('setNotificationsLoading', { value: false })
	if (notifs.length === 0) {
	this.bottomedOut = true
	}
	this.seenToDisplayCount += notifs.length
	})
	}
	}
	}

	export default Notifications
	diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
	new file mode 100644
	index 0000000000..d1ddee4102
	--- /dev/null
	+++ b/src/services/favicon_service/favicon_service.js
	@@ -0,0 +1,61 @@
	+import { find } from 'lodash'
	+
	+const createFaviconService = () => {
	+ let favimg, favcanvas, favcontext, favicon
	+ const faviconWidth = 128
	+ const faviconHeight = 128
	+ const badgeRadius = 32
	+
	+ const initFaviconService = () => {
	+ const nodes = document.getElementsByTagName('link')
	+ favicon = find(nodes, node => node.rel === 'icon')
	+ if (favicon) {
	+ favcanvas = document.createElement('canvas')
	+ favcanvas.width = faviconWidth
	+ favcanvas.height = faviconHeight
	+ favimg = new Image()
	+ favimg.src = favicon.href
	+ favcontext = favcanvas.getContext('2d')
	+ }
	+ }
	+
	+ const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0
	+
	+ const clearFaviconBadge = () => {
	+ if (!favimg \|\| !favcontext \|\| !favicon) return
	+
	+ favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
	+ if (isImageLoaded(favimg)) {
	+ favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
	+ }
	+ favicon.href = favcanvas.toDataURL('image/png')
	+ }
	+
	+ const drawFaviconBadge = () => {
	+ if (!favimg \|\| !favcontext \|\| !favcontext) return
	+
	+ clearFaviconBadge()
	+
	+ const style = getComputedStyle(document.body)
	+ const badgeColor = `${style.getPropertyValue('--badgeNotification') \|\| 'rgb(240, 100, 100)'}`
	+
	+ if (isImageLoaded(favimg)) {
	+ favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
	+ }
	+ favcontext.fillStyle = badgeColor
	+ favcontext.beginPath()
	+ favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
	+ favcontext.fill()
	+ favicon.href = favcanvas.toDataURL('image/png')
	+ }
	+
	+ return {
	+ initFaviconService,
	+ clearFaviconBadge,
	+ drawFaviconBadge
	+ }
	+}
	+
	+const FaviconService = createFaviconService()
	+
	+export default FaviconService

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 9:33 PM (1 d, 17 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723988
Default Alt Text: (28 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions