From 6acd889589e46b18491d96b5fa992154b4e58d88 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 10 Dec 2019 21:30:27 +0200 Subject: Option to enable streaming --- src/components/settings/settings.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'src/components/settings/settings.js') diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index c49083f9..2d7723cc 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -84,7 +84,7 @@ const settings = { } }]) .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - // Special cases (need to transform values) + // Special cases (need to transform values or perform actions first) muteWordsString: { get () { return this.$store.getters.mergedConfig.muteWords.join('\n') }, set (value) { @@ -93,6 +93,18 @@ const settings = { value: filter(value.split('\n'), (word) => trim(word).length > 0) }) } + }, + useStreamingApi: { + get () { return this.$store.getters.mergedConfig.useStreamingApi }, + set (value) { + const promise = value + ? this.$store.dispatch('enableMastoSockets') + : this.$store.dispatch('disableMastoSockets') + + promise.then(() => { + this.$store.dispatch('setOption', { name: 'useStreamingApi', value }) + }) + } } }, // Updating nested properties -- cgit v1.2.3-70-g09d2 From 43197c424366099301e59d3d1c7be58b987cb833 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 26 Dec 2019 14:12:35 +0200 Subject: Some error handling --- src/components/settings/settings.js | 4 ++ src/modules/api.js | 87 ++++++++++++++++++++----------------- 2 files changed, 51 insertions(+), 40 deletions(-) (limited to 'src/components/settings/settings.js') diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 2d7723cc..31a9e9be 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -103,6 +103,10 @@ const settings = { promise.then(() => { this.$store.dispatch('setOption', { name: 'useStreamingApi', value }) + }).catch((e) => { + console.error('Failed starting MastoAPI Streaming socket', e) + this.$store.dispatch('disableMastoSockets') + this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false }) }) } } diff --git a/src/modules/api.js b/src/modules/api.js index dc91d00e..b6dd7fcf 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -35,60 +35,67 @@ const api = { enableMastoSockets (store) { const { state, dispatch } = store if (state.mastoUserSocket) return - dispatch('startMastoUserSocket') + return dispatch('startMastoUserSocket') }, disableMastoSockets (store) { const { state, dispatch } = store if (!state.mastoUserSocket) return - dispatch('stopMastoUserSocket') + return dispatch('stopMastoUserSocket') }, // MastoAPI 'User' sockets startMastoUserSocket (store) { - const { state, dispatch } = store - state.mastoUserSocket = state.backendInteractor.startUserSocket({ store }) - state.mastoUserSocket.addEventListener( - 'message', - ({ detail: message }) => { - if (!message) return // pings - if (message.event === 'notification') { - dispatch('addNewNotifications', { - notifications: [message.notification], - older: false - }) - } else if (message.event === 'update') { - dispatch('addNewStatuses', { - statuses: [message.status], - userId: false, - showImmediately: false, - timeline: 'friends' - }) - } - } - ) - state.mastoUserSocket.addEventListener('error', ({ detail: error }) => { - console.error('Error in MastoAPI websocket:', error) - }) - state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => { - const ignoreCodes = new Set([ - 1000, // Normal (intended) closure - 1001 // Going away - ]) - const { code } = closeEvent - if (ignoreCodes.has(code)) { - console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`) - } else { - console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`) - dispatch('startFetchingTimeline', { timeline: 'friends' }) - dispatch('startFetchingNotifications') - dispatch('restartMastoUserSocket') + return new Promise((resolve, reject) => { + try { + const { state, dispatch } = store + state.mastoUserSocket = state.backendInteractor.startUserSocket({ store }) + state.mastoUserSocket.addEventListener( + 'message', + ({ detail: message }) => { + if (!message) return // pings + if (message.event === 'notification') { + dispatch('addNewNotifications', { + notifications: [message.notification], + older: false + }) + } else if (message.event === 'update') { + dispatch('addNewStatuses', { + statuses: [message.status], + userId: false, + showImmediately: false, + timeline: 'friends' + }) + } + } + ) + state.mastoUserSocket.addEventListener('error', ({ detail: error }) => { + console.error('Error in MastoAPI websocket:', error) + }) + state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => { + const ignoreCodes = new Set([ + 1000, // Normal (intended) closure + 1001 // Going away + ]) + const { code } = closeEvent + if (ignoreCodes.has(code)) { + console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`) + } else { + console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`) + dispatch('startFetchingTimeline', { timeline: 'friends' }) + dispatch('startFetchingNotifications') + dispatch('restartMastoUserSocket') + } + }) + resolve() + } catch (e) { + reject(e) } }) }, restartMastoUserSocket ({ dispatch }) { // This basically starts MastoAPI user socket and stops conventional // fetchers when connection reestablished - dispatch('startMastoUserSocket').then(() => { + return dispatch('startMastoUserSocket').then(() => { dispatch('stopFetchingTimeline', { timeline: 'friends' }) dispatch('stopFetchingNotifications') }) -- cgit v1.2.3-70-g09d2 From bcebec478e43b3851e85c94335940e8fc7546cc8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 May 2020 06:46:06 +0300 Subject: moved stuff from settings, cleaned up naming for tabs, added close and peek --- src/App.scss | 48 -- src/components/modal/modal.vue | 16 +- src/components/settings/settings.js | 128 --- src/components/settings/settings.vue | 424 --------- src/components/settings_modal/settings_modal.js | 42 +- src/components/settings_modal/settings_modal.scss | 30 +- src/components/settings_modal/settings_modal.vue | 26 +- .../settings_modal/tabs/data_import_export.js | 65 -- .../settings_modal/tabs/data_import_export.vue | 43 - .../settings_modal/tabs/data_import_export_tab.js | 65 ++ .../settings_modal/tabs/data_import_export_tab.vue | 43 + .../settings_modal/tabs/filtering_tab.js | 26 + .../settings_modal/tabs/filtering_tab.vue | 86 ++ src/components/settings_modal/tabs/general_tab.js | 32 + src/components/settings_modal/tabs/general_tab.vue | 272 ++++++ .../tabs/helpers/shared_computed_object.js | 69 ++ .../settings_modal/tabs/mutes_and_blocks.js | 124 --- .../settings_modal/tabs/mutes_and_blocks.vue | 173 ---- .../settings_modal/tabs/mutes_and_blocks_tab.js | 124 +++ .../settings_modal/tabs/mutes_and_blocks_tab.vue | 173 ++++ .../settings_modal/tabs/notifications.js | 27 - .../settings_modal/tabs/notifications.vue | 42 - .../settings_modal/tabs/notifications_tab.js | 27 + .../settings_modal/tabs/notifications_tab.vue | 42 + src/components/settings_modal/tabs/profile.js | 179 ---- src/components/settings_modal/tabs/profile.scss | 82 -- src/components/settings_modal/tabs/profile.vue | 213 ----- src/components/settings_modal/tabs/profile_tab.js | 179 ++++ .../settings_modal/tabs/profile_tab.scss | 82 ++ src/components/settings_modal/tabs/profile_tab.vue | 213 +++++ src/components/settings_modal/tabs/security.js | 106 --- src/components/settings_modal/tabs/security.vue | 143 --- .../settings_modal/tabs/security_tab/confirm.js | 9 + .../settings_modal/tabs/security_tab/confirm.vue | 22 + .../settings_modal/tabs/security_tab/mfa.js | 155 ++++ .../settings_modal/tabs/security_tab/mfa.vue | 174 ++++ .../tabs/security_tab/mfa_backup_codes.js | 17 + .../tabs/security_tab/mfa_backup_codes.vue | 35 + .../settings_modal/tabs/security_tab/mfa_totp.js | 49 ++ .../settings_modal/tabs/security_tab/mfa_totp.vue | 43 + .../tabs/security_tab/security_tab.js | 106 +++ .../tabs/security_tab/security_tab.vue | 143 +++ .../settings_modal/tabs/theme_tab/preview.vue | 117 +++ .../settings_modal/tabs/theme_tab/theme_tab.js | 759 ++++++++++++++++ .../settings_modal/tabs/theme_tab/theme_tab.scss | 339 ++++++++ .../settings_modal/tabs/theme_tab/theme_tab.vue | 956 +++++++++++++++++++++ src/components/settings_modal/tabs/version_tab.js | 24 + src/components/settings_modal/tabs/version_tab.vue | 31 + src/components/style_switcher/preview.vue | 117 --- src/components/style_switcher/style_switcher.js | 758 ---------------- src/components/style_switcher/style_switcher.scss | 335 -------- src/components/style_switcher/style_switcher.vue | 956 --------------------- src/components/tab_switcher/tab_switcher.scss | 6 + src/components/user_card/user_card.vue | 11 +- src/components/user_settings/confirm.js | 9 - src/components/user_settings/confirm.vue | 22 - src/components/user_settings/mfa.js | 155 ---- src/components/user_settings/mfa.vue | 173 ---- src/components/user_settings/mfa_backup_codes.js | 17 - src/components/user_settings/mfa_backup_codes.vue | 33 - src/components/user_settings/mfa_totp.js | 49 -- src/components/user_settings/mfa_totp.vue | 43 - src/components/user_settings/user_settings.js | 140 --- src/components/user_settings/user_settings.vue | 119 --- src/i18n/en.json | 4 +- 65 files changed, 4509 insertions(+), 4761 deletions(-) delete mode 100644 src/components/settings/settings.js delete mode 100644 src/components/settings/settings.vue delete mode 100644 src/components/settings_modal/tabs/data_import_export.js delete mode 100644 src/components/settings_modal/tabs/data_import_export.vue create mode 100644 src/components/settings_modal/tabs/data_import_export_tab.js create mode 100644 src/components/settings_modal/tabs/data_import_export_tab.vue create mode 100644 src/components/settings_modal/tabs/filtering_tab.js create mode 100644 src/components/settings_modal/tabs/filtering_tab.vue create mode 100644 src/components/settings_modal/tabs/general_tab.js create mode 100644 src/components/settings_modal/tabs/general_tab.vue create mode 100644 src/components/settings_modal/tabs/helpers/shared_computed_object.js delete mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.js delete mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.vue create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.js create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.vue delete mode 100644 src/components/settings_modal/tabs/notifications.js delete mode 100644 src/components/settings_modal/tabs/notifications.vue create mode 100644 src/components/settings_modal/tabs/notifications_tab.js create mode 100644 src/components/settings_modal/tabs/notifications_tab.vue delete mode 100644 src/components/settings_modal/tabs/profile.js delete mode 100644 src/components/settings_modal/tabs/profile.scss delete mode 100644 src/components/settings_modal/tabs/profile.vue create mode 100644 src/components/settings_modal/tabs/profile_tab.js create mode 100644 src/components/settings_modal/tabs/profile_tab.scss create mode 100644 src/components/settings_modal/tabs/profile_tab.vue delete mode 100644 src/components/settings_modal/tabs/security.js delete mode 100644 src/components/settings_modal/tabs/security.vue create mode 100644 src/components/settings_modal/tabs/security_tab/confirm.js create mode 100644 src/components/settings_modal/tabs/security_tab/confirm.vue create mode 100644 src/components/settings_modal/tabs/security_tab/mfa.js create mode 100644 src/components/settings_modal/tabs/security_tab/mfa.vue create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_totp.js create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_totp.vue create mode 100644 src/components/settings_modal/tabs/security_tab/security_tab.js create mode 100644 src/components/settings_modal/tabs/security_tab/security_tab.vue create mode 100644 src/components/settings_modal/tabs/theme_tab/preview.vue create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.js create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.scss create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.vue create mode 100644 src/components/settings_modal/tabs/version_tab.js create mode 100644 src/components/settings_modal/tabs/version_tab.vue delete mode 100644 src/components/style_switcher/preview.vue delete mode 100644 src/components/style_switcher/style_switcher.js delete mode 100644 src/components/style_switcher/style_switcher.scss delete mode 100644 src/components/style_switcher/style_switcher.vue delete mode 100644 src/components/user_settings/confirm.js delete mode 100644 src/components/user_settings/confirm.vue delete mode 100644 src/components/user_settings/mfa.js delete mode 100644 src/components/user_settings/mfa.vue delete mode 100644 src/components/user_settings/mfa_backup_codes.js delete mode 100644 src/components/user_settings/mfa_backup_codes.vue delete mode 100644 src/components/user_settings/mfa_totp.js delete mode 100644 src/components/user_settings/mfa_totp.vue delete mode 100644 src/components/user_settings/user_settings.js delete mode 100644 src/components/user_settings/user_settings.vue (limited to 'src/components/settings/settings.js') diff --git a/src/App.scss b/src/App.scss index 7db9461c..120eea53 100644 --- a/src/App.scss +++ b/src/App.scss @@ -860,54 +860,6 @@ nav { } } -// DELETE -.setting-item { - border-bottom: 2px solid var(--fg, $fallback--fg); - margin: 1em 1em 1.4em; - padding-bottom: 1.4em; - - > div { - margin-bottom: .5em; - &:last-child { - margin-bottom: 0; - } - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; - } - - select { - min-width: 10em; - } - - - textarea { - width: 100%; - max-width: 100%; - height: 100px; - } - - .unavailable, - .unavailable i { - color: var(--cRed, $fallback--cRed); - color: $fallback--cRed; - } - - .btn { - min-height: 28px; - min-width: 10em; - padding: 0 2em; - } - - .number-input { - max-width: 6em; - } -} -// DELETE - .select-multiple { display: flex; .option-list { diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index cee24241..e5ecc0c0 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -3,6 +3,7 @@ v-show="isOpen" v-body-scroll-lock="isOpen" class="modal-view" + :class="{ 'modal-background': !noBackground }" @click.self="$emit('backdropClicked')" > @@ -15,6 +16,10 @@ export default { isOpen: { type: Boolean, default: true + }, + noBackground: { + type: Boolean, + default: false } } } @@ -32,10 +37,19 @@ export default { justify-content: center; align-items: center; overflow: auto; + pointer-events: none; animation-duration: 0.2s; - background-color: rgba(0, 0, 0, 0.5); animation-name: modal-background-fadein; + > * { + pointer-events: initial; + } + + &.modal-background { + pointer-events: initial; + background-color: rgba(0, 0, 0, 0.5); + } + body:not(.scroll-locked) & { opacity: 0; } diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js deleted file mode 100644 index 31a9e9be..00000000 --- a/src/components/settings/settings.js +++ /dev/null @@ -1,128 +0,0 @@ -/* eslint-env browser */ -import { filter, trim } from 'lodash' - -import TabSwitcher from '../tab_switcher/tab_switcher.js' -import StyleSwitcher from '../style_switcher/style_switcher.vue' -import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' -import { extractCommit } from '../../services/version/version.service' -import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js' -import Checkbox from '../checkbox/checkbox.vue' - -const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/' -const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/' - -const multiChoiceProperties = [ - 'postContentType', - 'subjectLineBehavior' -] - -const settings = { - data () { - const instance = this.$store.state.instance - - return { - loopSilentAvailable: - // Firefox - Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || - // Chrome-likes - Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') || - // Future spec, still not supported in Nightly 63 as of 08/2018 - Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'), - - backendVersion: instance.backendVersion, - frontendVersion: instance.frontendVersion - } - }, - components: { - TabSwitcher, - StyleSwitcher, - InterfaceLanguageSwitcher, - Checkbox - }, - computed: { - user () { - return this.$store.state.users.currentUser - }, - currentSaveStateNotice () { - return this.$store.state.interface.settings.currentSaveStateNotice - }, - postFormats () { - return this.$store.state.instance.postFormats || [] - }, - instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, - frontendVersionLink () { - return pleromaFeCommitUrl + this.frontendVersion - }, - backendVersionLink () { - return pleromaBeCommitUrl + extractCommit(this.backendVersion) - }, - // Getting localized values for instance-default properties - ...instanceDefaultProperties - .filter(key => multiChoiceProperties.includes(key)) - .map(key => [ - key + 'DefaultValue', - function () { - return this.$store.getters.instanceDefaultConfig[key] - } - ]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - ...instanceDefaultProperties - .filter(key => !multiChoiceProperties.includes(key)) - .map(key => [ - key + 'LocalizedValue', - function () { - return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key]) - } - ]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - // Generating computed values for vuex properties - ...Object.keys(configDefaultState) - .map(key => [key, { - get () { return this.$store.getters.mergedConfig[key] }, - set (value) { - this.$store.dispatch('setOption', { name: key, value }) - } - }]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - // Special cases (need to transform values or perform actions first) - muteWordsString: { - get () { return this.$store.getters.mergedConfig.muteWords.join('\n') }, - set (value) { - this.$store.dispatch('setOption', { - name: 'muteWords', - value: filter(value.split('\n'), (word) => trim(word).length > 0) - }) - } - }, - useStreamingApi: { - get () { return this.$store.getters.mergedConfig.useStreamingApi }, - set (value) { - const promise = value - ? this.$store.dispatch('enableMastoSockets') - : this.$store.dispatch('disableMastoSockets') - - promise.then(() => { - this.$store.dispatch('setOption', { name: 'useStreamingApi', value }) - }).catch((e) => { - console.error('Failed starting MastoAPI Streaming socket', e) - this.$store.dispatch('disableMastoSockets') - this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false }) - }) - } - } - }, - // Updating nested properties - watch: { - notificationVisibility: { - handler (value) { - this.$store.dispatch('setOption', { - name: 'notificationVisibility', - value: this.$store.getters.mergedConfig.notificationVisibility - }) - }, - deep: true - } - } -} - -export default settings diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue deleted file mode 100644 index 9e14b449..00000000 --- a/src/components/settings/settings.vue +++ /dev/null @@ -1,424 +0,0 @@ -