feat: custom emojis, close #500
parent
41ef187379
commit
597617b7e6
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { Picker } from 'emoji-mart'
|
||||
import { updateCustomEmojis } from '~/composables/emojis'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', code: string): void
|
||||
|
@ -10,26 +11,33 @@ let picker = $ref<Picker>()
|
|||
|
||||
async function openEmojiPicker() {
|
||||
if (!picker) {
|
||||
updateCustomEmojis()
|
||||
const promise = import('@emoji-mart/data').then(r => r.default)
|
||||
const { Picker } = await import('emoji-mart')
|
||||
picker = new Picker({
|
||||
data: () => import('@emoji-mart/data').then(r => r.default),
|
||||
data: () => promise,
|
||||
onEmojiSelect(e: any) {
|
||||
emit('select', e.native)
|
||||
emit('select', e.native || e.shortcodes)
|
||||
},
|
||||
theme: isDark.value ? 'dark' : 'light',
|
||||
custom: customEmojisData.value,
|
||||
})
|
||||
// TODO: custom picker
|
||||
el?.appendChild(picker as any as HTMLElement)
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (!picker)
|
||||
return
|
||||
picker.update({
|
||||
watch(isDark, () => {
|
||||
picker?.update({
|
||||
theme: isDark.value ? 'dark' : 'light',
|
||||
})
|
||||
})
|
||||
|
||||
watch(customEmojisData, () => {
|
||||
picker?.update({
|
||||
custom: customEmojisData.value,
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -40,7 +48,7 @@ watchEffect(() => {
|
|||
<div i-ri:emotion-line />
|
||||
</button>
|
||||
<template #popper>
|
||||
<div ref="el" />
|
||||
<div ref="el" min-w-10 min-h-10 />
|
||||
</template>
|
||||
</VDropdown>
|
||||
</template>
|
||||
|
|
|
@ -0,0 +1,53 @@
|
|||
import type { Emoji } from 'masto'
|
||||
import type { CustomEmojisInfo } from './push-notifications/types'
|
||||
import { STORAGE_KEY_CUSTOM_EMOJIS } from '~/constants'
|
||||
|
||||
const TTL = 1000 * 60 * 60 * 24 // 1 day
|
||||
|
||||
function getDefault(): CustomEmojisInfo {
|
||||
return {
|
||||
lastUpdate: 0,
|
||||
emojis: [],
|
||||
}
|
||||
}
|
||||
|
||||
export const currentCustomEmojis = process.server
|
||||
? computed(getDefault)
|
||||
: useUserLocalStorage(STORAGE_KEY_CUSTOM_EMOJIS, getDefault)
|
||||
|
||||
export async function updateCustomEmojis() {
|
||||
if (Date.now() - currentCustomEmojis.value.lastUpdate < TTL)
|
||||
return
|
||||
|
||||
const masto = useMasto()
|
||||
const emojis = await masto.customEmojis.fetchAll()
|
||||
Object.assign(currentCustomEmojis.value, {
|
||||
lastUpdate: Date.now(),
|
||||
emojis,
|
||||
})
|
||||
}
|
||||
|
||||
function transformEmojiData(emojis: Emoji[]) {
|
||||
const result = []
|
||||
|
||||
for (const emoji of emojis) {
|
||||
if (!emoji.visibleInPicker)
|
||||
continue
|
||||
result.push({
|
||||
id: emoji.shortcode,
|
||||
native: ':emoji.shortcode:',
|
||||
name: emoji.shortcode,
|
||||
skins: [{ src: emoji.url || emoji.staticUrl }],
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export const customEmojisData = computed(() => currentCustomEmojis.value.emojis.length
|
||||
? [{
|
||||
id: 'custom',
|
||||
name: `Custom emojis on ${currentServer.value}`,
|
||||
emojis: transformEmojiData(currentCustomEmojis.value.emojis),
|
||||
}]
|
||||
: undefined)
|
|
@ -1,4 +1,4 @@
|
|||
import type { PushSubscription as MastoPushSubscription, PushSubscriptionAlerts, SubscriptionPolicy } from 'masto'
|
||||
import type { Emoji, PushSubscription as MastoPushSubscription, PushSubscriptionAlerts, SubscriptionPolicy } from 'masto'
|
||||
|
||||
import type { UserLogin } from '~/types'
|
||||
|
||||
|
@ -19,3 +19,8 @@ export interface CreatePushNotification {
|
|||
|
||||
export type PushNotificationRequest = Record<string, boolean>
|
||||
export type PushNotificationPolicy = Record<string, SubscriptionPolicy>
|
||||
|
||||
export interface CustomEmojisInfo {
|
||||
lastUpdate: number
|
||||
emojis: Emoji[]
|
||||
}
|
||||
|
|
|
@ -13,6 +13,7 @@ export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
|
|||
export const STORAGE_KEY_LANG = 'elk-lang'
|
||||
export const STORAGE_KEY_FONT_SIZE = 'elk-font-size'
|
||||
export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
|
||||
export const STORAGE_KEY_CUSTOM_EMOJIS = 'elk-custom-emojis'
|
||||
export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
|
||||
export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
|
||||
export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
|
||||
|
|
Loading…
Reference in New Issue