Merge branch 'develop' into fedi-absturztau-be

This commit is contained in:
Absturztaube 2020-10-07 18:51:14 +02:00
commit 7a9bd70a09
40 changed files with 376 additions and 111 deletions

View file

@ -4,15 +4,28 @@ 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]
### Added
- New option to optimize timeline rendering to make the site more responsive (enabled by default)
## [Unreleased patch]
### 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
### Added
- Import/export a muted users
## [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

View file

@ -941,6 +941,9 @@ nav {
min-height: 1.3rem;
max-height: 1.3rem;
line-height: 1.3rem;
max-width: 10em;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-layout {

View file

@ -80,6 +80,8 @@
class="video"
:attachment="attachment"
:controls="allowPlay"
@play="$emit('play')"
@pause="$emit('pause')"
/>
<i
v-if="!allowPlay"
@ -93,6 +95,8 @@
:alt="attachment.description"
:title="attachment.description"
controls
@play="$emit('play')"
@pause="$emit('pause')"
/>
<div

View file

@ -5,6 +5,7 @@ import ChatMessage from '../chat_message/chat_message.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js'
import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
const BOTTOMED_OUT_OFFSET = 10
@ -204,9 +205,9 @@ const Chat = {
}
},
readChat () {
if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return }
if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
if (document.hidden) { return }
const lastReadId = this.currentChatMessageService.lastMessage.id
const lastReadId = this.currentChatMessageService.maxId
this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
},
bottomedOut (offset) {
@ -244,9 +245,9 @@ const Chat = {
const chatId = chatMessageService.chatId
const fetchOlderMessages = !!maxId
const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id
const sinceId = fetchLatest && chatMessageService.maxId
this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
.then((messages) => {
// Clear the current chat in case we're recovering from a ws connection loss.
if (isFirstFetch) {
@ -287,7 +288,7 @@ const Chat = {
},
doStartFetching () {
this.$store.dispatch('startFetchingCurrentChat', {
fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
})
this.fetchChat({ isFirstFetch: true })
},
@ -303,7 +304,11 @@ const Chat = {
return this.backendInteractor.sendChatMessage(params)
.then(data => {
this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
this.$store.dispatch('addChatMessages', {
chatId: this.currentChat.id,
messages: [data],
updateMaxId: false
}).then(() => {
this.$nextTick(() => {
this.handleResize()
// When the posting form size changes because of a media attachment, we need an extra resize

View file

@ -63,7 +63,7 @@
@click.stop.prevent="togglePanel"
>
<div class="title">
<i class="icon-comment-empty" />
<i class="icon-megaphone" />
{{ $t('shoutbox.title') }}
</div>
</div>

View file

@ -44,7 +44,8 @@ const conversation = {
'isPage',
'pinnedStatusIdsObject',
'inProfile',
'profileUserId'
'profileUserId',
'virtualHidden'
],
created () {
if (this.isPage) {
@ -52,6 +53,13 @@ const conversation = {
}
},
computed: {
hideStatus () {
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.virtualHidden && this.$refs.statusComponent[0].suspendable
} else {
return this.virtualHidden
}
},
status () {
return this.$store.state.statuses.allStatusesObject[this.statusId]
},
@ -102,6 +110,10 @@ const conversation = {
},
isExpanded () {
return this.expanded || this.isPage
},
hiddenStyle () {
const height = (this.status && this.status.virtualHeight) || '120px'
return this.virtualHidden ? { height } : {}
}
},
components: {
@ -121,6 +133,12 @@ const conversation = {
if (value) {
this.fetchConversation()
}
},
virtualHidden (value) {
this.$store.dispatch(
'setVirtualHeight',
{ statusId: this.statusId, height: `${this.$el.clientHeight}px` }
)
}
},
methods: {

View file

@ -1,5 +1,7 @@
<template>
<div
v-if="!hideStatus"
:style="hiddenStyle"
class="Conversation"
:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
>
@ -18,6 +20,7 @@
<status
v-for="status in conversation"
:key="status.id"
ref="statusComponent"
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
:expandable="!isExpanded"
@ -33,6 +36,10 @@
@toggleExpanded="toggleExpanded"
/>
</div>
<div
v-else
:style="hiddenStyle"
/>
</template>
<script src="./conversation.js"></script>
@ -53,8 +60,8 @@
.conversation-status {
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-left: 4px solid $fallback--cRed;
border-left: 4px solid var(--cRed, $fallback--cRed);
border-left-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed);
}
.conversation-status:last-child {

View file

@ -8,7 +8,10 @@ const LOAD_EMOJI_BY = 60
const LOAD_EMOJI_MARGIN = 64
const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.displayText.includes(keyword))
const keywordLowercase = keyword.toLowerCase()
return list.filter(emoji =>
emoji.displayText.toLowerCase().includes(keywordLowercase)
)
}
const EmojiPicker = {

View file

@ -7,12 +7,12 @@
:to="{ name: timelinesRoute }"
:class="onTimelineRoute && 'router-link-active'"
>
<i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
<i class="button-icon icon-home-2" />{{ $t("nav.timelines") }}
</router-link>
</li>
<li v-if="currentUser">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
<i class="button-icon icon-bell-alt" />{{ $t("nav.interactions") }}
</router-link>
</li>
<li v-if="currentUser && pleromaChatMessagesAvailable">
@ -23,12 +23,12 @@
>
{{ unreadChatCount }}
</div>
<i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
<i class="button-icon icon-chat" />{{ $t("nav.chats") }}
</router-link>
</li>
<li v-if="currentUser && currentUser.locked">
<router-link :to="{ name: 'friend-requests' }">
<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
<i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
class="badge follow-request-count"
@ -39,7 +39,7 @@
</li>
<li>
<router-link :to="{ name: 'about' }">
<i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
<i class="button-icon icon-info-circled" />{{ $t("nav.about") }}
</router-link>
</li>
</ul>
@ -125,6 +125,10 @@
}
}
.nav-panel .button-icon {
margin-right: 0.5em;
}
.nav-panel .button-icon:before {
width: 1.1em;
}

View file

@ -1,5 +1,4 @@
import Popover from '../popover/popover.vue'
import { mapGetters } from 'vuex'
const ReactButton = {
props: ['status'],
@ -35,7 +34,9 @@ const ReactButton = {
}
return this.$store.state.instance.emoji || []
},
...mapGetters(['mergedConfig'])
mergedConfig () {
return this.$store.getters.mergedConfig
}
}
}

View file

@ -1,4 +1,3 @@
import { mapGetters } from 'vuex'
const RetweetButton = {
props: ['status', 'loggedIn', 'visibility'],
@ -28,7 +27,9 @@ const RetweetButton = {
'animate-spin': this.animated
}
},
...mapGetters(['mergedConfig'])
mergedConfig () {
return this.$store.getters.mergedConfig
}
}
}

View file

@ -1,6 +1,7 @@
import Importer from 'src/components/importer/importer.vue'
import Exporter from 'src/components/exporter/exporter.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import { mapState } from 'vuex'
const DataImportExportTab = {
data () {
@ -18,21 +19,26 @@ const DataImportExportTab = {
Checkbox
},
computed: {
user () {
return this.$store.state.users.currentUser
}
...mapState({
backendInteractor: (state) => state.api.backendInteractor,
user: (state) => state.users.currentUser
})
},
methods: {
getFollowsContent () {
return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
return this.backendInteractor.exportFriends({ id: this.user.id })
.then(this.generateExportableUsersContent)
},
getBlocksContent () {
return this.$store.state.api.backendInteractor.fetchBlocks()
return this.backendInteractor.fetchBlocks()
.then(this.generateExportableUsersContent)
},
getMutesContent () {
return this.backendInteractor.fetchMutes()
.then(this.generateExportableUsersContent)
},
importFollows (file) {
return this.$store.state.api.backendInteractor.importFollows({ file })
return this.backendInteractor.importFollows({ file })
.then((status) => {
if (!status) {
throw new Error('failed')
@ -40,7 +46,15 @@ const DataImportExportTab = {
})
},
importBlocks (file) {
return this.$store.state.api.backendInteractor.importBlocks({ file })
return this.backendInteractor.importBlocks({ file })
.then((status) => {
if (!status) {
throw new Error('failed')
}
})
},
importMutes (file) {
return this.backendInteractor.importMutes({ file })
.then((status) => {
if (!status) {
throw new Error('failed')

View file

@ -36,6 +36,23 @@
:export-button-label="$t('settings.block_export_button')"
/>
</div>
<div class="setting-item">
<h2>{{ $t('settings.mute_import') }}</h2>
<p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
<Importer
:submit-handler="importMutes"
:success-message="$t('settings.mutes_imported')"
:error-message="$t('settings.mute_import_error')"
/>
</div>
<div class="setting-item">
<h2>{{ $t('settings.mute_export') }}</h2>
<Exporter
:get-content="getMutesContent"
filename="mutes.csv"
:export-button-label="$t('settings.mute_export_button')"
/>
</div>
</div>
</template>

View file

@ -63,6 +63,11 @@
{{ $t('settings.emoji_reactions_on_timeline') }}
</Checkbox>
</li>
<li>
<Checkbox v-model="virtualScrolling">
{{ $t('settings.virtual_scrolling') }}
</Checkbox>
</li>
</ul>
</div>

View file

@ -90,7 +90,7 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'chat' }">
<i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
<i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
</router-link>
</li>
</ul>

View file

@ -15,7 +15,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { muteWordHits } from '../../services/status_parser/status_parser.js'
import { unescape, uniqBy } from 'lodash'
import { mapGetters, mapState } from 'vuex'
const Status = {
name: 'Status',
@ -54,6 +53,8 @@ const Status = {
replying: false,
unmuted: false,
userExpanded: false,
mediaPlaying: [],
suspendable: true,
error: null
}
},
@ -157,7 +158,7 @@ const Status = {
return this.mergedConfig.hideFilteredStatuses
},
hideStatus () {
return this.deleted || (this.muted && this.hideFilteredStatuses)
return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden
},
isFocused () {
// retweet or root of an expanded conversation
@ -207,11 +208,18 @@ const Status = {
hidePostStats () {
return this.mergedConfig.hidePostStats
},
...mapGetters(['mergedConfig']),
...mapState({
betterShadow: state => state.interface.browserSupport.cssFilter,
currentUser: state => state.users.currentUser
})
currentUser () {
return this.$store.state.users.currentUser
},
betterShadow () {
return this.$store.state.interface.browserSupport.cssFilter
},
mergedConfig () {
return this.$store.getters.mergedConfig
},
isSuspendable () {
return !this.replying && this.mediaPlaying.length === 0
}
},
methods: {
visibilityIcon (visibility) {
@ -251,6 +259,12 @@ const Status = {
},
generateUserProfileLink (id, name) {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
},
addMediaPlaying (id) {
this.mediaPlaying.push(id)
},
removeMediaPlaying (id) {
this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
}
},
watch: {
@ -280,6 +294,9 @@ const Status = {
if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
this.$store.dispatch('fetchFavs', this.status.id)
}
},
'isSuspendable': function (val) {
this.suspendable = val
}
},
filters: {

View file

@ -25,6 +25,11 @@ $status-margin: 0.75em;
--icon: var(--selectedPostIcon, $fallback--icon);
}
&.-conversation {
border-left-width: 4px;
border-left-style: solid;
}
.status-container {
display: flex;
padding: $status-margin;

View file

@ -16,7 +16,7 @@
/>
</div>
<template v-if="muted && !isPreview">
<div class="status-csontainer muted">
<div class="status-container muted">
<small class="status-username">
<i
v-if="muted && retweet"
@ -227,6 +227,7 @@
</span>
</a>
</StatusPopover>
<span
v-else
class="reply-to-no-popover"
@ -272,6 +273,8 @@
:no-heading="noHeading"
:highlight="highlight"
:focused="isFocused"
@mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)"
/>
<transition name="fade">
@ -354,6 +357,7 @@
@onSuccess="clearError"
/>
</div>
</div>
</div>
<div
@ -376,4 +380,5 @@
</template>
<script src="./status.js" ></script>
<style src="./status.scss" lang="scss"></style>

View file

@ -107,6 +107,8 @@
:attachment="attachment"
:allow-play="true"
:set-media="setMedia()"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
/>
<gallery
v-if="galleryAttachments.length > 0"

View file

@ -19,14 +19,16 @@ const StillImage = {
},
methods: {
onLoad () {
this.imageLoadHandler && this.imageLoadHandler(this.$refs.src)
const image = this.$refs.src
if (!image) return
this.imageLoadHandler && this.imageLoadHandler(image)
const canvas = this.$refs.canvas
if (!canvas) return
const width = this.$refs.src.naturalWidth
const height = this.$refs.src.naturalHeight
const width = image.naturalWidth
const height = image.naturalHeight
canvas.width = width
canvas.height = height
canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height)
canvas.getContext('2d').drawImage(image, 0, 0, width, height)
},
onError () {
this.imageLoadError && this.imageLoadError()

View file

@ -33,7 +33,8 @@ const Timeline = {
return {
paused: false,
unfocused: false,
bottomedOut: false
bottomedOut: false,
virtualScrollIndex: 0
}
},
components: {
@ -78,6 +79,16 @@ const Timeline = {
},
pinnedStatusIdsObject () {
return keyBy(this.pinnedStatusIds)
},
statusesToDisplay () {
const amount = this.timeline.visibleStatuses.length
const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
},
virtualScrollingEnabled () {
return this.$store.getters.mergedConfig.virtualScrolling
}
},
created () {
@ -85,7 +96,7 @@ const Timeline = {
const credentials = store.state.users.currentUser.credentials
const showImmediately = this.timeline.visibleStatuses.length === 0
window.addEventListener('scroll', this.scrollLoad)
window.addEventListener('scroll', this.handleScroll)
if (store.state.api.fetchers[this.timelineName]) { return false }
@ -104,9 +115,10 @@ const Timeline = {
this.unfocused = document.hidden
}
window.addEventListener('keydown', this.handleShortKey)
setTimeout(this.determineVisibleStatuses, 250)
},
destroyed () {
window.removeEventListener('scroll', this.scrollLoad)
window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('keydown', this.handleShortKey)
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@ -146,6 +158,48 @@ const Timeline = {
}
})
}, 1000, this),
determineVisibleStatuses () {
if (!this.$refs.timeline) return
if (!this.virtualScrollingEnabled) return
const statuses = this.$refs.timeline.children
const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
if (statuses.length === 0) return
const height = Math.max(document.body.offsetHeight, window.pageYOffset)
const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
// Start from approximating the index of some visible status by using the
// the center of the screen on the timeline.
let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
let err = statuses[approxIndex].getBoundingClientRect().y
// if we have a previous scroll index that can be used, test if it's
// closer than the previous approximation, use it if so
const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
if (Math.abs(err) > virtualScrollIndexY) {
approxIndex = cappedScrollIndex
err = virtualScrollIndexY
}
// if the status is too far from viewport, check the next/previous ones if
// they happen to be better
while (err < -20 && approxIndex < statuses.length - 1) {
err += statuses[approxIndex].offsetHeight
approxIndex++
}
while (err > window.innerHeight + 100 && approxIndex > 0) {
approxIndex--
err -= statuses[approxIndex].offsetHeight
}
// this status is now the center point for virtual scrolling and visible
// statuses will be nearby statuses before and after it
this.virtualScrollIndex = approxIndex
},
scrollLoad (e) {
const bodyBRect = document.body.getBoundingClientRect()
const height = Math.max(bodyBRect.height, -(bodyBRect.y))
@ -155,6 +209,10 @@ const Timeline = {
this.fetchOlderStatuses()
}
},
handleScroll: throttle(function (e) {
this.determineVisibleStatuses()
this.scrollLoad(e)
}, 200),
handleVisibilityChange () {
this.unfocused = document.hidden
}

View file

@ -32,7 +32,10 @@
</div>
</div>
<div :class="classes.body">
<div class="timeline">
<div
ref="timeline"
class="timeline"
>
<template v-for="statusId in pinnedStatusIds">
<conversation
v-if="timeline.statusesObject[statusId]"
@ -54,6 +57,7 @@
:collapsable="true"
:in-profile="inProfile"
:profile-user-id="userId"
:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
/>
</template>
</div>

View file

@ -138,15 +138,11 @@
&:last-child {
border: none;
}
i {
margin: 0 0.5em;
}
}
a {
display: block;
padding: 0.6em 0;
padding: 0.6em 0.65em;
&:hover {
background-color: $fallback--lightBg;
@ -174,6 +170,10 @@
text-decoration: underline;
}
}
i {
margin-right: 0.5em;
}
}
}

View file

@ -156,8 +156,7 @@
.user-profile-field {
display: flex;
margin: 0.25em auto;
max-width: 32em;
margin: 0.25em;
border: 1px solid var(--border, $fallback--border);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);

View file

@ -3,27 +3,48 @@ const VideoAttachment = {
props: ['attachment', 'controls'],
data () {
return {
loopVideo: this.$store.getters.mergedConfig.loopVideo
blocksSuspend: false,
// Start from true because removing "loop" property seems buggy in Vue
hasAudio: true
}
},
computed: {
loopVideo () {
if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
return !this.hasAudio
}
return this.$store.getters.mergedConfig.loopVideo
}
},
methods: {
onVideoDataLoad (e) {
onPlaying (e) {
this.setHasAudio(e)
if (this.loopVideo) {
this.$emit('play', { looping: true })
return
}
this.$emit('play')
},
onPaused (e) {
this.$emit('pause')
},
setHasAudio (e) {
const target = e.srcElement || e.target
// If hasAudio is false, we've already marked this video to not have audio,
// a video can't gain audio out of nowhere so don't bother checking again.
if (!this.hasAudio) return
if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
// non-zero if video has audio track
if (target.webkitAudioDecodedByteCount > 0) {
this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
}
} else if (typeof target.mozHasAudio !== 'undefined') {
// true if video has audio track
if (target.mozHasAudio) {
this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
}
} else if (typeof target.audioTracks !== 'undefined') {
if (target.audioTracks.length > 0) {
this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
}
if (target.webkitAudioDecodedByteCount > 0) return
}
if (typeof target.mozHasAudio !== 'undefined') {
// true if video has audio track
if (target.mozHasAudio) return
}
if (typeof target.audioTracks !== 'undefined') {
if (target.audioTracks.length > 0) return
}
this.hasAudio = false
}
}
}

View file

@ -7,7 +7,8 @@
:alt="attachment.description"
:title="attachment.description"
playsinline
@loadeddata="onVideoDataLoad"
@playing="onPlaying"
@pause="onPaused"
/>
</template>

View file

@ -113,7 +113,6 @@
"about": "About",
"administration": "Administration",
"back": "Back",
"chat": "Local Chat",
"friend_requests": "Follow Requests",
"mentions": "Mentions",
"interactions": "Interactions",
@ -276,6 +275,12 @@
"block_import": "Block import",
"block_import_error": "Error importing blocks",
"blocks_imported": "Blocks imported! Processing them will take a while.",
"mute_export": "Mute export",
"mute_export_button": "Export your mutes to a csv file",
"mute_import": "Mute import",
"mute_import_error": "Error importing mutes",
"mutes_imported": "Mutes imported! Processing them will take a while.",
"import_mutes_from_a_csv_file": "Import mutes from a csv file",
"blocks_tab": "Blocks",
"bot": "This is a bot account",
"btnRadius": "Buttons",
@ -431,6 +436,7 @@
"false": "no",
"true": "yes"
},
"virtual_scrolling": "Optimize timeline rendering",
"fun": "Fun",
"greentext": "Meme arrows",
"notifications": "Notifications",

View file

@ -20,7 +20,7 @@ const api = {
state.fetchers[fetcherName] = fetcher
},
removeFetcher (state, { fetcherName, fetcher }) {
window.clearInterval(fetcher)
state.fetchers[fetcherName].stop()
delete state.fetchers[fetcherName]
},
setWsToken (state, token) {

View file

@ -3,6 +3,7 @@ import { find, omitBy, orderBy, sumBy } from 'lodash'
import chatService from '../services/chat_service/chat_service.js'
import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
import { promiseInterval } from '../services/promise_interval/promise_interval.js'
const emptyChatList = () => ({
data: [],
@ -42,12 +43,10 @@ const chats = {
actions: {
// Chat list
startFetchingChats ({ dispatch, commit }) {
const fetcher = () => {
dispatch('fetchChats', { latest: true })
}
const fetcher = () => dispatch('fetchChats', { latest: true })
fetcher()
commit('setChatListFetcher', {
fetcher: () => setInterval(() => { fetcher() }, 5000)
fetcher: () => promiseInterval(fetcher, 5000)
})
},
stopFetchingChats ({ commit }) {
@ -113,14 +112,14 @@ const chats = {
setChatListFetcher (state, { commit, fetcher }) {
const prevFetcher = state.chatListFetcher
if (prevFetcher) {
clearInterval(prevFetcher)
prevFetcher.stop()
}
state.chatListFetcher = fetcher && fetcher()
},
setCurrentChatFetcher (state, { fetcher }) {
const prevFetcher = state.fetcher
if (prevFetcher) {
clearInterval(prevFetcher)
prevFetcher.stop()
}
state.fetcher = fetcher && fetcher()
},
@ -143,6 +142,7 @@ const chats = {
const isNewMessage = (chat.lastMessage && chat.lastMessage.id) !== (updatedChat.lastMessage && updatedChat.lastMessage.id)
chat.lastMessage = updatedChat.lastMessage
chat.unread = updatedChat.unread
chat.updated_at = updatedChat.updated_at
if (isNewMessage && chat.unread) {
newChatMessageSideEffects(updatedChat)
}
@ -181,30 +181,16 @@ const chats = {
setChatsLoading (state, { value }) {
state.chats.loading = value
},
addChatMessages (state, { commit, chatId, messages }) {
addChatMessages (state, { chatId, messages, updateMaxId }) {
const chatMessageService = state.openedChatMessageServices[chatId]
if (chatMessageService) {
chatService.add(chatMessageService, { messages: messages.map(parseChatMessage) })
commit('refreshLastMessage', { chatId })
chatService.add(chatMessageService, { messages: messages.map(parseChatMessage), updateMaxId })
}
},
refreshLastMessage (state, { chatId }) {
const chatMessageService = state.openedChatMessageServices[chatId]
if (chatMessageService) {
const chat = getChatById(state, chatId)
if (chat) {
chat.lastMessage = chatMessageService.lastMessage
if (chatMessageService.lastMessage) {
chat.updated_at = chatMessageService.lastMessage.created_at
}
}
}
},
deleteChatMessage (state, { commit, chatId, messageId }) {
deleteChatMessage (state, { chatId, messageId }) {
const chatMessageService = state.openedChatMessageServices[chatId]
if (chatMessageService) {
chatService.deleteMessage(chatMessageService, messageId)
commit('refreshLastMessage', { chatId })
}
},
resetChatNewMessageCount (state, _value) {

View file

@ -66,7 +66,8 @@ export const defaultState = {
useContainFit: false,
greentext: undefined, // instance default
hidePostStats: undefined, // instance default
hideUserStats: undefined // instance default
hideUserStats: undefined, // instance default
virtualScrolling: undefined // instance default
}
// caching the instance default properties

View file

@ -41,6 +41,7 @@ const defaultState = {
sidebarRight: false,
subjectLineBehavior: 'email',
theme: 'pleroma-dark',
virtualScrolling: true,
// Nasty stuff
customEmoji: [],

View file

@ -568,6 +568,9 @@ export const mutations = {
updateStatusWithPoll (state, { id, poll }) {
const status = state.allStatusesObject[id]
status.poll = poll
},
setVirtualHeight (state, { statusId, height }) {
state.allStatusesObject[statusId].virtualHeight = height
}
}
@ -761,6 +764,9 @@ const statuses = {
store.commit('addNewStatuses', { statuses: data.statuses })
return data
})
},
setVirtualHeight ({ commit }, { statusId, height }) {
commit('setVirtualHeight', { statusId, height })
}
},
mutations

View file

@ -3,6 +3,7 @@ import { parseStatus, parseUser, parseNotification, parseAttachment, parseChat,
import { RegistrationError, StatusCodeError } from '../errors/errors'
/* eslint-env browser */
const MUTES_IMPORT_URL = '/api/pleroma/mutes_import'
const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
@ -539,8 +540,10 @@ const fetchTimeline = ({
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
url += `?${queryString}`
let status = ''
let statusText = ''
let pagination = {}
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => {
@ -710,6 +713,17 @@ const setMediaDescription = ({ id, description, credentials }) => {
}).then((data) => parseAttachment(data))
}
const importMutes = ({ file, credentials }) => {
const formData = new FormData()
formData.append('list', file)
return fetch(MUTES_IMPORT_URL, {
body: formData,
method: 'POST',
headers: authHeaders(credentials)
})
.then((response) => response.ok)
}
const importBlocks = ({ file, credentials }) => {
const formData = new FormData()
formData.append('list', file)
@ -1280,6 +1294,7 @@ const apiService = {
getCaptcha,
updateProfileImages,
updateProfile,
importMutes,
importBlocks,
importFollows,
deleteAccount,

View file

@ -8,7 +8,7 @@ const empty = (chatId) => {
lastSeenTimestamp: 0,
chatId: chatId,
minId: undefined,
lastMessage: undefined
maxId: undefined
}
}
@ -18,7 +18,7 @@ const clear = (storage) => {
storage.newMessageCount = 0
storage.lastSeenTimestamp = 0
storage.minId = undefined
storage.lastMessage = undefined
storage.maxId = undefined
}
const deleteMessage = (storage, messageId) => {
@ -26,8 +26,9 @@ const deleteMessage = (storage, messageId) => {
storage.messages = storage.messages.filter(m => m.id !== messageId)
delete storage.idIndex[messageId]
if (storage.lastMessage && (storage.lastMessage.id === messageId)) {
storage.lastMessage = _.maxBy(storage.messages, 'id')
if (storage.maxId === messageId) {
const lastMessage = _.maxBy(storage.messages, 'id')
storage.maxId = lastMessage.id
}
if (storage.minId === messageId) {
@ -36,7 +37,7 @@ const deleteMessage = (storage, messageId) => {
}
}
const add = (storage, { messages: newMessages }) => {
const add = (storage, { messages: newMessages, updateMaxId = true }) => {
if (!storage) { return }
for (let i = 0; i < newMessages.length; i++) {
const message = newMessages[i]
@ -48,8 +49,10 @@ const add = (storage, { messages: newMessages }) => {
storage.minId = message.id
}
if (!storage.lastMessage || message.id > storage.lastMessage.id) {
storage.lastMessage = message
if (!storage.maxId || message.id > storage.maxId) {
if (updateMaxId) {
storage.maxId = message.id
}
}
if (!storage.idIndex[message.id]) {

View file

@ -1,4 +1,5 @@
import apiService from '../api/api.service.js'
import { promiseInterval } from '../promise_interval/promise_interval.js'
const fetchAndUpdate = ({ store, credentials }) => {
return apiService.fetchFollowRequests({ credentials })
@ -10,9 +11,9 @@ const fetchAndUpdate = ({ store, credentials }) => {
}
const startFetching = ({ credentials, store }) => {
fetchAndUpdate({ credentials, store })
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
return setInterval(boundFetchAndUpdate, 10000)
boundFetchAndUpdate()
return promiseInterval(boundFetchAndUpdate, 10000)
}
const followRequestFetcher = {

View file

@ -1,4 +1,5 @@
import apiService from '../api/api.service.js'
import { promiseInterval } from '../promise_interval/promise_interval.js'
const update = ({ store, notifications, older }) => {
store.dispatch('setNotificationsError', { value: false })
@ -39,6 +40,7 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
args['since'] = Math.max(...readNotifsIds)
fetchNotifications({ store, args, older })
}
return result
}
}
@ -53,13 +55,13 @@ const fetchNotifications = ({ store, args, older }) => {
}
const startFetching = ({ credentials, store }) => {
fetchAndUpdate({ credentials, store })
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
// Initially there's set flag to silence all desktop notifications so
// that there won't spam of them when user just opened up the FE we
// reset that flag after a while to show new notifications once again.
setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
return setInterval(boundFetchAndUpdate, 10000)
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
boundFetchAndUpdate()
return promiseInterval(boundFetchAndUpdate, 10000)
}
const notificationsFetcher = {

View file

@ -0,0 +1,27 @@
// promiseInterval - replacement for setInterval for promises, starts counting
// the interval only after a promise is done instead of immediately.
// - promiseCall is a function that returns a promise, it's called the first
// time after the first interval.
// - interval is the interval delay in ms.
export const promiseInterval = (promiseCall, interval) => {
let stopped = false
let timeout = null
const func = () => {
promiseCall().finally(() => {
if (stopped) return
timeout = window.setTimeout(func, interval)
})
}
const stopFetcher = () => {
stopped = true
window.clearTimeout(timeout)
}
timeout = window.setTimeout(func, interval)
return { stop: stopFetcher }
}

View file

@ -1,6 +1,7 @@
import { camelCase } from 'lodash'
import apiService from '../api/api.service.js'
import { promiseInterval } from '../promise_interval/promise_interval.js'
const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => {
const ccTimeline = camelCase(timeline)
@ -71,8 +72,9 @@ const startFetching = ({ timeline = 'friends', credentials, store, userId = fals
const showImmediately = timelineData.visibleStatuses.length === 0
timelineData.userId = userId
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
return setInterval(boundFetchAndUpdate, 10000)
const boundFetchAndUpdate = () =>
fetchAndUpdate({ timeline, credentials, store, userId, tag })
return promiseInterval(boundFetchAndUpdate, 10000)
}
const timelineFetcher = {
fetchAndUpdate,

View file

@ -405,6 +405,12 @@
"css": "block",
"code": 59434,
"src": "fontawesome"
},
{
"uid": "3e674995cacc2b09692c096ea7eb6165",
"css": "megaphone",
"code": 59435,
"src": "fontawesome"
}
]
}

View file

@ -33,12 +33,12 @@ describe('chatService', () => {
const chat = chatService.empty()
chatService.add(chat, { messages: [ message1 ] })
expect(chat.lastMessage.id).to.eql(message1.id)
expect(chat.maxId).to.eql(message1.id)
expect(chat.minId).to.eql(message1.id)
expect(chat.newMessageCount).to.eql(1)
chatService.add(chat, { messages: [ message2 ] })
expect(chat.lastMessage.id).to.eql(message2.id)
expect(chat.maxId).to.eql(message2.id)
expect(chat.minId).to.eql(message1.id)
expect(chat.newMessageCount).to.eql(2)
@ -60,15 +60,15 @@ describe('chatService', () => {
chatService.add(chat, { messages: [ message2 ] })
chatService.add(chat, { messages: [ message3 ] })
expect(chat.lastMessage.id).to.eql(message3.id)
expect(chat.maxId).to.eql(message3.id)
expect(chat.minId).to.eql(message1.id)
chatService.deleteMessage(chat, message3.id)
expect(chat.lastMessage.id).to.eql(message2.id)
expect(chat.maxId).to.eql(message2.id)
expect(chat.minId).to.eql(message1.id)
chatService.deleteMessage(chat, message1.id)
expect(chat.lastMessage.id).to.eql(message2.id)
expect(chat.maxId).to.eql(message2.id)
expect(chat.minId).to.eql(message2.id)
})
})