From 350eb489c22e6bac20de92284193a87af63c52a9 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 2 Nov 2020 15:46:49 +0200 Subject: add favicon badge for unread notifs --- src/services/favicon_service/favicon_service.js | 56 +++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/services/favicon_service/favicon_service.js (limited to 'src/services') diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js new file mode 100644 index 00000000..8e3f1170 --- /dev/null +++ b/src/services/favicon_service/favicon_service.js @@ -0,0 +1,56 @@ +import { find } from 'lodash' + +const createFaviconService = () => { + let favimg, favcanvas, favcontext, favicon + const faviconWidth = 48 + const faviconHeight = 48 + const strokeColor = 'rgb(200, 0, 0)' + const fillColor = 'rgb(255, 90, 90)' + const badgeRadius = 12 + + 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 clearFaviconBadge = () => { + if (!favimg || !favcontext || !favicon) return + + favcontext.clearRect(0, 0, faviconWidth, faviconHeight) + 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() + + favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) + favcontext.fillStyle = fillColor + favcontext.strokeStyle = strokeColor + favcontext.beginPath() + favcontext.arc(faviconWidth - badgeRadius, faviconHeight - badgeRadius, badgeRadius, 0, 2 * Math.PI, false) + favcontext.fill() + favcontext.stroke() + favicon.href = favcanvas.toDataURL('image/png') + } + + return { + initFaviconService, + clearFaviconBadge, + drawFaviconBadge + } +} + +const FaviconService = createFaviconService() + +export default FaviconService -- cgit v1.2.3-70-g09d2 From 1fa046126eb8a048440ff97be8febe3a8c6e6e58 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 2 Nov 2020 16:45:15 +0200 Subject: make badge just a ball, make it use theming --- src/services/favicon_service/favicon_service.js | 13 ++++++------- static/dev_favicon.png | Bin 7528 -> 13331 bytes static/favicon.png | Bin 0 -> 12920 bytes 3 files changed, 6 insertions(+), 7 deletions(-) create mode 100644 static/favicon.png (limited to 'src/services') diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js index 8e3f1170..5fa8e5c3 100644 --- a/src/services/favicon_service/favicon_service.js +++ b/src/services/favicon_service/favicon_service.js @@ -4,9 +4,7 @@ const createFaviconService = () => { let favimg, favcanvas, favcontext, favicon const faviconWidth = 48 const faviconHeight = 48 - const strokeColor = 'rgb(200, 0, 0)' - const fillColor = 'rgb(255, 90, 90)' - const badgeRadius = 12 + const badgeRadius = 14 const initFaviconService = () => { const nodes = document.getElementsByTagName('link') @@ -34,13 +32,14 @@ const createFaviconService = () => { clearFaviconBadge() + const style = getComputedStyle(document.body) + const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}` + favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) - favcontext.fillStyle = fillColor - favcontext.strokeStyle = strokeColor + favcontext.fillStyle = badgeColor favcontext.beginPath() - favcontext.arc(faviconWidth - badgeRadius, faviconHeight - badgeRadius, badgeRadius, 0, 2 * Math.PI, false) + favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false) favcontext.fill() - favcontext.stroke() favicon.href = favcanvas.toDataURL('image/png') } diff --git a/static/dev_favicon.png b/static/dev_favicon.png index 8b53d746..4223d5ca 100644 Binary files a/static/dev_favicon.png and b/static/dev_favicon.png differ diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 00000000..d1206dc5 Binary files /dev/null and b/static/favicon.png differ -- cgit v1.2.3-70-g09d2 From 0206b2bcc5cceae937bdad1922c57f8c84621d26 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 3 Nov 2020 11:55:29 +0200 Subject: change favicon dimensions for high res, add handling when favicon isn't available --- src/services/favicon_service/favicon_service.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'src/services') diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js index 5fa8e5c3..d1ddee41 100644 --- a/src/services/favicon_service/favicon_service.js +++ b/src/services/favicon_service/favicon_service.js @@ -2,9 +2,9 @@ import { find } from 'lodash' const createFaviconService = () => { let favimg, favcanvas, favcontext, favicon - const faviconWidth = 48 - const faviconHeight = 48 - const badgeRadius = 14 + const faviconWidth = 128 + const faviconHeight = 128 + const badgeRadius = 32 const initFaviconService = () => { const nodes = document.getElementsByTagName('link') @@ -19,11 +19,15 @@ const createFaviconService = () => { } } + const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0 + const clearFaviconBadge = () => { if (!favimg || !favcontext || !favicon) return favcontext.clearRect(0, 0, faviconWidth, faviconHeight) - favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 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') } @@ -35,7 +39,9 @@ const createFaviconService = () => { const style = getComputedStyle(document.body) const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}` - favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) + 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) -- cgit v1.2.3-70-g09d2 From d150dae5d156416351312f25b06de0013ee0a95d Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 10 Nov 2020 12:52:54 +0200 Subject: fixes to timeline error handling --- src/components/timeline/timeline.js | 12 +++-------- src/components/timeline/timeline.vue | 24 ++-------------------- src/components/timeline_menu/timeline_menu.js | 5 ++--- src/i18n/en.json | 2 +- src/modules/statuses.js | 2 -- src/services/api/api.service.js | 2 +- .../timeline_fetcher/timeline_fetcher.service.js | 15 ++++++++++---- 7 files changed, 20 insertions(+), 42 deletions(-) (limited to 'src/services') diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index cba46daf..665d195e 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -50,17 +50,10 @@ const Timeline = { TimelineMenu }, computed: { - timelineError () { - return this.$store.state.statuses.error - }, - errorData () { - return this.$store.state.statuses.errorData - }, newStatusCount () { return this.timeline.newStatusCount }, showLoadButton () { - if (this.timelineError || this.errorData) return false return this.timeline.newStatusCount > 0 || this.timeline.flushMarker !== 0 }, loadButtonString () { @@ -171,11 +164,12 @@ const Timeline = { userId: this.userId, tag: this.tag }).then(({ statuses }) => { - store.commit('setLoading', { timeline: this.timelineName, value: false }) if (statuses && statuses.length === 0) { this.bottomedOut = true } - }) + }).finally(() => + store.commit('setLoading', { timeline: this.timelineName, value: false }) + ) }, 1000, this), determineVisibleStatuses () { if (!this.$refs.timeline) return diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 04859852..d4da2a87 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -2,22 +2,8 @@
-
- {{ $t('timeline.error_fetching') }} -
-
- {{ errorData.statusText }} -
{{ $t('timeline.load_older') }}
 - -
{{ errorData.error }}
-
i18n key mapping, exported andnot in the computed +// Route -> i18n key mapping, exported and not in the computed // because nav panel benefits from the same information. export const timelineNames = () => { return { @@ -27,8 +27,7 @@ export const timelineNames = () => { 'bookmarks': 'nav.bookmarks', 'dms': 'nav.dms', 'public-timeline': 'nav.public_tl', - 'public-external-timeline': 'nav.twkn', - 'tag-timeline': 'tag' + 'public-external-timeline': 'nav.twkn' } } diff --git a/src/i18n/en.json b/src/i18n/en.json index d3d57562..d5c5db28 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -634,7 +634,7 @@ "timeline": { "collapse": "Collapse", "conversation": "Conversation", - "error_fetching": "Error fetching updates", + "error": "Error fetching timeline: {0}", "load_older": "Load older statuses", "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated", "repeated": "repeated", diff --git a/src/modules/statuses.js b/src/modules/statuses.js index e673141d..5296f611 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -50,8 +50,6 @@ export const defaultState = () => ({ maxId: 0, notifications: emptyNotifications(), favorites: new Set(), - error: false, - errorData: null, timelines: { mentions: emptyTl(), public: emptyTl(), diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 22b5e8ba..8da933c4 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -560,7 +560,7 @@ const fetchTimeline = ({ }) .then((data) => data.json()) .then((data) => { - if (!data.error) { + if (!data.errors) { return { data: data.map(isNotifications ? parseNotification : parseStatus), pagination } } else { data.status = status diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 72ea4890..0fdc579d 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -52,9 +52,8 @@ const fetchAndUpdate = ({ return apiService.fetchTimeline(args) .then(response => { - if (response.error) { - store.dispatch('setErrorData', { value: response }) - return + if (response.errors) { + throw new Error(`${response.status} ${response.statusText}`) } const { data: statuses, pagination } = response @@ -63,7 +62,15 @@ const fetchAndUpdate = ({ } update({ store, statuses, timeline, showImmediately, userId, pagination }) return { statuses, pagination } - }, () => store.dispatch('setError', { value: true })) + }) + .catch((error) => { + store.dispatch('pushGlobalNotice', { + level: 'error', + messageKey: 'timeline.error', + messageArgs: [error.message], + timeout: 5000 + }) + }) } const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => { -- cgit v1.2.3-70-g09d2 From 1d2ba946b6b81dc225d0eec21548a737ca2fac5e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 10 Nov 2020 14:28:10 +0200 Subject: make notifications also use the popup errors, remove all error from status/notif state --- CHANGELOG.md | 4 ++++ src/components/notifications/notifications.vue | 7 ------- src/i18n/en.json | 1 + src/modules/statuses.js | 21 +-------------------- .../notifications_fetcher.service.js | 18 ++++++++++++++---- .../timeline_fetcher/timeline_fetcher.service.js | 3 --- test/unit/specs/components/user_profile.spec.js | 3 +-- 7 files changed, 21 insertions(+), 36 deletions(-) (limited to 'src/services') diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f14bc59..a6b62bfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Fixed - Fixed regression in react popup alignment and overflowing - Fixed the occasional bug where screen would scroll 1px when typing into a reply form +- Fixed timeline errors locking timelines + +### Changed +- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers ## [2.2.0] - 2020-11-06 diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index bd875cca..b976026e 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -15,13 +15,6 @@ class="badge badge-notification unseen-count" >{{ unseenCount }}
-
- {{ $t('timeline.error_fetching') }} -
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 59e4d07e..e8d5ec6d 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -2,12 +2,10 @@ import Cropper from 'cropperjs' import 'cropperjs/dist/cropper.css' import { library } from '@fortawesome/fontawesome-svg-core' import { - faTimes, faCircleNotch } from '@fortawesome/free-solid-svg-icons' library.add( - faTimes, faCircleNotch ) @@ -53,8 +51,7 @@ const ImageCropper = { cropper: undefined, dataUrl: undefined, filename: undefined, - submitting: false, - submitError: null + submitting: false } }, computed: { @@ -66,9 +63,6 @@ const ImageCropper = { }, cancelText () { return this.cancelButtonLabel || this.$t('image_cropper.cancel') - }, - submitErrorMsg () { - return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError } }, methods: { @@ -82,12 +76,8 @@ const ImageCropper = { }, submit (cropping = true) { this.submitting = true - this.avatarUploadError = null this.submitHandler(cropping && this.cropper, this.file) .then(() => this.destroy()) - .catch((err) => { - this.submitError = err - }) .finally(() => { this.submitting = false }) @@ -113,9 +103,6 @@ const ImageCropper = { reader.readAsDataURL(this.file) this.$emit('changed', this.file, reader) } - }, - clearError () { - this.submitError = null } }, mounted () { diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 75def612..9524ccbc 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -37,17 +37,6 @@ icon="circle-notch" /> -
- {{ submitErrorMsg }} - -
this.$store.state.instance[slot + 'limit']) { const filesize = fileSizeFormatService.fileSizeFormat(file.size) const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) - this[slot + 'UploadError'] = [ - this.$t('upload.error.base'), - this.$t( - 'upload.error.file_too_big', - { + this.$store.dispatch('pushGlobalNotice', { + messageKey: 'upload.error.message', + messageArgs: [ + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit - } - ) - ].join(' ') + }) + ], + level: 'error' + }) return } // eslint-disable-next-line no-undef @@ -213,8 +211,9 @@ const ProfileTab = { that.$store.commit('setCurrentUser', user) resolve() }) - .catch((err) => { - reject(new Error(that.$t('upload.error.base') + ' ' + err.message)) + .catch((error) => { + that.displayUploadError(error) + reject(error) }) } @@ -235,24 +234,27 @@ const ProfileTab = { this.$store.commit('setCurrentUser', user) this.bannerPreview = null }) - .catch((err) => { - this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message - }) - .then(() => { this.bannerUploading = false }) + .catch(this.displayUploadError) + .finally(() => { this.bannerUploading = false }) }, submitBackground (background) { if (!this.backgroundPreview && background !== '') { return } this.backgroundUploading = true - this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => { - if (!data.error) { + this.$store.state.api.backendInteractor.updateProfileImages({ background }) + .then((data) => { this.$store.commit('addNewUsers', [data]) this.$store.commit('setCurrentUser', data) this.backgroundPreview = null - } else { - this.backgroundUploadError = this.$t('upload.error.base') + data.error - } - this.backgroundUploading = false + }) + .catch(this.displayUploadError) + .finally(() => { this.backgroundUploading = false }) + }, + displayUploadError (error) { + this.$store.dispatch('pushGlobalNotice', { + messageKey: 'upload.error.message', + messageArgs: [error.message], + level: 'error' }) } } diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index d62bc392..7271155e 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -229,17 +229,6 @@ > {{ $t('general.submit') }} -
- Error: {{ bannerUploadError }} - -

{{ $t('settings.profile_background') }}

@@ -279,18 +268,6 @@ > {{ $t('general.submit') }} -
- Error: {{ backgroundUploadError }} - -
diff --git a/src/i18n/en.json b/src/i18n/en.json index ef23efd6..5798ceb2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -758,6 +758,7 @@ "upload": { "error": { "base": "Upload failed.", + "message": "Upload failed: {0}", "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", "default": "Try again later" }, diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 8da933c4..f4483149 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -162,7 +162,12 @@ const updateProfileImages = ({ credentials, avatar = null, banner = null, backgr body: form }) .then((data) => data.json()) - .then((data) => parseUser(data)) + .then((data) => { + if (data.error) { + throw new Error(data.error) + } + return parseUser(data) + }) } const updateProfile = ({ credentials, params }) => { -- cgit v1.2.3-70-g09d2 From 24277571848e4f2a0994310e3a9680eda850fc9a Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 3 Dec 2020 16:09:40 +0200 Subject: fix your own chat messages disappearing --- CHANGELOG.md | 1 + src/services/chat_service/chat_service.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'src/services') diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e424a62..dd4a2836 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Fixed custom emoji not working in profile field names - Fixed pinned statuses not appearing in user profiles - Fixed some elements not being keyboard navigation friendly +- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session ### Changed - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js index 1fc4e390..e653ebc1 100644 --- a/src/services/chat_service/chat_service.js +++ b/src/services/chat_service/chat_service.js @@ -21,7 +21,7 @@ const clear = (storage) => { failedMessageIds.push(message.id) } else { delete storage.idIndex[message.id] - delete storage.idempotencyKeyIndex[message.id] + delete storage.idempotencyKeyIndex[message.idempotency_key] } } -- cgit v1.2.3-70-g09d2 From 415119cda949f2c92865f9ea5db3e377b83d1eb0 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 7 Dec 2020 00:11:21 +0200 Subject: use title html for poll options before vote --- CHANGELOG.md | 1 + src/components/poll/poll.vue | 3 ++- src/services/entity_normalizer/entity_normalizer.service.js | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) (limited to 'src/services') diff --git a/CHANGELOG.md b/CHANGELOG.md index dd4a2836..a1506eb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Fixed pinned statuses not appearing in user profiles - Fixed some elements not being keyboard navigation friendly - Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session +- Fixed custom emoji not showing in poll options before voting ### Changed - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index 264a5f03..42819c19 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -42,7 +42,8 @@ :value="index" >