commit: 123913f34ffd91917a9ed4dd1c9d406fb547ef87
parent 99a368dbb3359c7aeb8aa8fc328c39fc913304d3
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:43:35 -0400
Optimise emoji picker loading process
Diffstat:
3 files changed, 34 insertions(+), 71 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
@@ -106,6 +106,7 @@ const EmojiPicker = {
},
triggerLoadMore (target) {
Object.keys(this.allCustomGroups)
+ .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
.map(groupId => {
const ref = this.$refs[`group-end-${groupId}`][0]
if (!ref) return undefined
@@ -123,9 +124,10 @@ const EmojiPicker = {
const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
// Always load when at the very top in case there's no scroll space yet
const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+ const unscrollable = top - bottom < target.clientHeight
// Don't load when looking at unicode category or at the very bottom
const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
- if (!bottomAboveViewport && (approachingBottom || atTop)) {
+ if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
return groupId
}
return undefined
@@ -176,12 +178,6 @@ const EmojiPicker = {
this.firstLoaded = true
})
})
- const bufferSize = this.customEmojiBuffer.length
- const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
- if (bufferPrefilledAll && !forceUpdate) {
- return
- }
- this.customEmojiBufferSlice = LOAD_EMOJI_BY
},
toggleStickers () {
this.showingStickers = !this.showingStickers
@@ -191,6 +187,9 @@ const EmojiPicker = {
},
limitedEmojis (list, groupId) {
return list.slice(0, this.loadedCount[groupId])
+ },
+ filterByKeyword (list, keyword) {
+ return filterByKeyword(list, keyword)
}
},
watch: {
@@ -210,51 +209,8 @@ const EmojiPicker = {
}
return 0
},
- allEmojis () {
- return this.$store.state.instance.customEmoji || []
- },
- filteredEmoji () {
- return filterByKeyword(
- this.allEmojis,
- trim(this.keyword)
- )
- },
- customEmojiBuffer () {
- return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
- },
- groupedCustomEmojis () {
- return this.customEmojiBuffer.reduce((res, emoji) => {
- const pack = packOf(emoji)
- if (!res[pack]) {
- res[pack] = {
- id: `custom-${pack}`,
- text: pack,
- /// FIXME
- // icon: 'smile-beam',
- image: emoji.imageUrl,
- emojis: []
- }
- }
- res[pack].emojis.push(emoji)
- return res
- }, {})
- },
allCustomGroups () {
- return this.filteredEmoji
- .reduce((res, emoji) => {
- const packName = packOf(emoji)
- const packId = `custom-${packName}`
- if (!res[packId]) {
- res[packId] = ({
- id: packId,
- text: packName,
- image: emoji.imageUrl,
- emojis: []
- })
- }
- res[packId].emojis.push(emoji)
- return res
- }, {})
+ return this.$store.getters.groupedCustomEmojis
},
sensibleInitialAmountForAGroup () {
const groupCount = Object.keys(this.allCustomGroups).length
@@ -271,21 +227,13 @@ const EmojiPicker = {
emojis: filterByKeyword(standardEmojis, this.keyword)
})
},
- emojis () {
- const standardEmojis = this.$store.state.instance.emoji || []
- // const customEmojis = this.customEmojiBuffer
-
- return [
- ...Object
- .keys(this.groupedCustomEmojis)
- .map(k => this.groupedCustomEmojis[k]),
- {
- id: 'standard',
- text: this.$t('emoji.unicode'),
- icon: 'box-open',
- emojis: filterByKeyword(standardEmojis, trim(this.keyword))
- }
- ]
+ filteredEmojiGroups () {
+ return this.allEmojiGroups
+ .map(group => ({
+ ...group,
+ emojis: filterByKeyword(group.emojis, this.keyword)
+ }))
+ .filter(group => group.emojis.length > 0)
},
loadedCount () {
return Object.keys(this.allCustomGroups)
@@ -297,9 +245,6 @@ const EmojiPicker = {
lastNonUnicodeGroupId () {
return this.emojis[this.emojis.length - 2].id
},
- emojisView () {
- return this.emojis.filter(value => value.emojis.length > 0)
- },
stickerPickerEnabled () {
return (this.$store.state.instance.stickers || []).length !== 0
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
@@ -3,7 +3,7 @@
<div class="heading">
<span class="emoji-tabs">
<span
- v-for="group in allEmojiGroups"
+ v-for="group in filteredEmojiGroups"
:key="group.id"
class="emoji-tabs-item"
:class="{
@@ -67,7 +67,7 @@
@scroll="onScroll"
>
<div
- v-for="group in allEmojiGroups"
+ v-for="group in filteredEmojiGroups"
:key="group.id"
class="emoji-group"
>
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -115,6 +115,24 @@ const instance = {
.map(key => [key, state[key]])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
},
+ groupedCustomEmojis (state) {
+ return state.customEmoji
+ .reduce((res, emoji) => {
+ emoji.tags.forEach(packName => {
+ const packId = `custom-${packName}`
+ if (!res[packId]) {
+ res[packId] = ({
+ id: packId,
+ text: packName,
+ image: emoji.imageUrl,
+ emojis: []
+ })
+ }
+ res[packId].emojis.push(emoji)
+ })
+ return res
+ }, {})
+ },
instanceDomain (state) {
return new URL(state.server).hostname
}
