HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix(client): emoji data format change

Browse source
This commit is contained in:
eana 2024-03-30 15:30:03 +00:00
parent 3b2db417a8
commit 4370bd1012
2 changed files with 30 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/client/src/components/MkEmojiPicker.vue
View file

@ -113,19 +113,19 @@
<header>{{ i18n.ts.emoji }}</header> <header>{{ i18n.ts.emoji }}</header>
<XSection <XSection
v-for="category in unicodeEmojiCategories" v-for="category in unicodeEmojiCategories"
:key="category" :key="category.slug"
:skin-tone-selector="category === 'people'" :skin-tone-selector="category.slug === 'people_body'"
:skin-tones="unicodeEmojiSkinTones" :skin-tones="unicodeEmojiSkinTones"
:skin-tone-labels="unicodeEmojiSkinToneLabels" :skin-tone-labels="unicodeEmojiSkinToneLabels"
:emojis=" :emojis="
emojilist emojilist
.filter((e) => e.category === category) .filter(
(e) => e.category_slug === category.slug,
)
.map((e) => e.emoji) .map((e) => e.emoji)
" "
@chosen="chosen" @chosen="chosen"
>{{ >{{ category.name }}</XSection
getNicelyLabeledCategory(category) || category
}}</XSection
> >
</div> </div>
</div> </div>
@ -169,11 +169,7 @@ import type { entities } from "firefish-js";
import { FocusTrap } from "focus-trap-vue"; import { FocusTrap } from "focus-trap-vue";
import XSection from "@/components/MkEmojiPicker.section.vue"; import XSection from "@/components/MkEmojiPicker.section.vue";
import type { UnicodeEmojiDef } from "@/scripts/emojilist"; import type { UnicodeEmojiDef } from "@/scripts/emojilist";
import { import { emojilist, unicodeEmojiCategories } from "@/scripts/emojilist";
emojilist,
getNicelyLabeledCategory,
unicodeEmojiCategories,
} from "@/scripts/emojilist";
import { getStaticImageUrl } from "@/scripts/get-static-image-url"; import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import Ripple from "@/components/MkRipple.vue"; import Ripple from "@/components/MkRipple.vue";
import * as os from "@/os"; import * as os from "@/os";

85
packages/client/src/scripts/emojilist.ts
View file

@ -6,35 +6,17 @@ import { defaultStore } from "@/store";
export interface UnicodeEmojiDef { export interface UnicodeEmojiDef {
emoji: string; emoji: string;
category: (typeof unicodeEmojiCategories)[number]; category: (typeof unicodeEmojiCategories)[number]["name"];
category_slug: (typeof unicodeEmojiCategories)[number]["slug"];
skin_tone_support: boolean; skin_tone_support: boolean;
slug: string; slug: string;
keywords?: string[]; keywords?: string[];
} }
export const unicodeEmojiCategories = [ export const unicodeEmojiCategories = data.map((categories) => ({
"emotion", slug: categories.slug,
"people", name: categories.name,
"animals_and_nature", }));
"food_and_drink",
"activity",
"travel_and_places",
"objects",
"symbols",
"flags",
] as const;
export const categoryMapping = {
"Smileys & Emotion": "emotion",
"People & Body": "people",
"Animals & Nature": "animals_and_nature",
"Food & Drink": "food_and_drink",
Activities: "activity",
"Travel & Places": "travel_and_places",
Objects: "objects",
Symbols: "symbols",
Flags: "flags",
} as const;
export function addSkinTone(emoji: string, skinTone?: number) { export function addSkinTone(emoji: string, skinTone?: number) {
const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone; const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
@ -57,41 +39,20 @@ export function addSkinTone(emoji: string, skinTone?: number) {
} }
} }
const newData = {}; export const emojilist: UnicodeEmojiDef[] = data
.flatMap((category) =>
for (const originalCategory of Object.keys(data)) { category.emojis.map((emoji) => ({
const newCategory = categoryMapping[originalCategory]; ...emoji,
if (newCategory) { category: category.name,
newData[newCategory] = newData[newCategory] || []; category_slug: category.slug,
for (const emojiIndex of Object.keys(data[originalCategory])) { keywords: keywordSet[emoji.emoji],
const emojiObj = { ...data[originalCategory][emojiIndex] }; })),
emojiObj.category = newCategory; )
emojiObj.keywords = keywordSet[emojiObj.emoji]; .map((item) => ({
newData[newCategory].push(emojiObj); emoji: item.emoji,
} slug: item.slug,
} category: item.category,
} category_slug: item.category_slug,
skin_tone_support: item.skin_tone_support || false,
export const emojilist: UnicodeEmojiDef[] = Object.keys(newData).reduce( keywords: item.keywords || [],
(acc, category) => { }));
const categoryItems = newData[category].map((item) => {
return {
emoji: item.emoji,
slug: item.slug,
category: item.category,
skin_tone_support: item.skin_tone_support || false,
keywords: item.keywords || [],
};
});
return acc.concat(categoryItems);
},
[],
);
export function getNicelyLabeledCategory(internalName) {
return (
Object.keys(categoryMapping).find(
(key) => categoryMapping[key] === internalName,
) || internalName
);
}