161sh/iceshrimp-161sh
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/iceshrimp-161sh.git synced 2024-11-24 21:19:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'refactor/emojis' into develop

Browse Source
This commit is contained in:
ThatOneCalculator 2023-06-22 22:09:25 -07:00
commit 993efa1752
12 changed files with 146 additions and 1823 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en-US.yml
View File

@ -1109,6 +1109,7 @@ isLocked: "This account has follow approvals"
isModerator: "Moderator"
isAdmin: "Administrator"
isPatron: "Calckey Patron"
reactionPickerSkinTone: "Preferred emoji skin tone"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing

2
package.json
View File

@ -6,7 +6,7 @@
"type": "git",
"url": "https://codeberg.org/calckey/calckey.git"
},
"packageManager": "pnpm@8.6.2",
"packageManager": "pnpm@8.6.3",
"private": true,
"scripts": {
"rebuild": "pnpm run clean && pnpm -r run build && pnpm run gulp",

2
packages/client/package.json
View File

@ -44,6 +44,7 @@
"cross-env": "7.0.3",
"cypress": "10.11.0",
"date-fns": "2.30.0",
"emojilib": "^3.0.10",
"escape-regexp": "0.0.1",
"eventemitter3": "4.0.7",
"focus-trap": "^7.4.3",
@ -79,6 +80,7 @@
"tsconfig-paths": "4.2.0",
"twemoji-parser": "14.0.0",
"typescript": "5.1.3",
"unicode-emoji-json": "^0.4.0",
"uuid": "9.0.0",
"vanilla-tilt": "1.8.0",
"vite": "4.3.9",

12
packages/client/src/components/MkAutocomplete.vue
View File

@ -114,19 +114,19 @@ type EmojiDef = {
const lib = emojilist.filter((x) => x.category !== "flags");
const emjdb: EmojiDef[] = lib.map((x) => ({
emoji: x.char,
name: x.name,
url: char2filePath(x.char),
emoji: x.emoji,
name: x.slug,
url: char2filePath(x.emoji),
}));
for (const x of lib) {
if (x.keywords) {
for (const k of x.keywords) {
emjdb.push({
emoji: x.char,
emoji: x.emoji,
name: k,
aliasOf: x.name,
url: char2filePath(x.char),
aliasOf: x.slug,
url: char2filePath(x.emoji),
});
}
}

41
packages/client/src/components/MkEmojiPicker.vue
View File

@ -42,13 +42,13 @@
<div v-if="searchResultUnicode.length > 0" class="body">
<button
v-for="emoji in searchResultUnicode"
:key="emoji.name"
:key="emoji.slug"
class="_button item"
:title="emoji.name"
:title="emoji.slug"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji.char" />
<MkEmoji class="emoji" :emoji="emoji.emoji" />
</button>
</div>
</section>
@ -111,15 +111,17 @@
<div v-once class="group">
<header>{{ i18n.ts.emoji }}</header>
<XSection
v-for="category in categories"
v-for="category in unicodeEmojiCategories"
:key="category"
:emojis="
emojilist
.filter((e) => e.category === category)
.map((e) => e.char)
.map((e) => e.emoji)
"
@chosen="chosen"
>{{ category }}</XSection
>{{
getNicelyLabeledCategory(category) || category
}}</XSection
>
</div>
</div>
@ -163,8 +165,9 @@ import * as Misskey from "calckey-js";
import XSection from "@/components/MkEmojiPicker.section.vue";
import {
emojilist,
unicodeEmojiCategories,
UnicodeEmojiDef,
unicodeEmojiCategories as categories,
getNicelyLabeledCategory,
} from "@/scripts/emojilist";
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import Ripple from "@/components/MkRipple.vue";
@ -232,7 +235,7 @@ watch(q, () => {
const newQ = q.value.replace(/:/g, "").toLowerCase();
const searchCustom = () => {
const max = 8;
const max = 16;
const emojis = customEmojis;
const matches = new Set<Misskey.entities.CustomEmoji>();
@ -304,11 +307,11 @@ watch(q, () => {
};
const searchUnicode = () => {
const max = 8;
const max = 32;
const emojis = emojilist;
const matches = new Set<UnicodeEmojiDef>();
const exactMatch = emojis.find((emoji) => emoji.name === newQ);
const exactMatch = emojis.find((emoji) => emoji.slug === newQ);
if (exactMatch) matches.add(exactMatch);
if (newQ.includes(" ")) {
@ -317,7 +320,7 @@ watch(q, () => {
// 名前にキーワードが含まれている
for (const emoji of emojis) {
if (keywords.every((keyword) => emoji.name.includes(keyword))) {
if (keywords.every((keyword) => emoji.slug.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -329,8 +332,8 @@ watch(q, () => {
if (
keywords.every(
(keyword) =>
emoji.name.includes(keyword) ||
emoji.keywords.some((alias) =>
emoji.slug.includes(keyword) ||
emoji.keywords?.some((alias) =>
alias.includes(keyword)
)
)
@ -341,7 +344,7 @@ watch(q, () => {
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(newQ)) {
if (emoji.slug.startsWith(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -350,7 +353,7 @@ watch(q, () => {
for (const emoji of emojis) {
if (
emoji.keywords.some((keyword) => keyword.startsWith(newQ))
emoji.keywords?.some((keyword) => keyword.startsWith(newQ))
) {
matches.add(emoji);
if (matches.size >= max) break;
@ -359,7 +362,7 @@ watch(q, () => {
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(newQ)) {
if (emoji.slug.includes(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -367,7 +370,7 @@ watch(q, () => {
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some((keyword) => keyword.includes(newQ))) {
if (emoji.keywords?.some((keyword) => keyword.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -397,7 +400,7 @@ function reset() {
function getKey(
emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef
): string {
return typeof emoji === "string" ? emoji : emoji.char || `:${emoji.name}:`;
return typeof emoji === "string" ? emoji : emoji.emoji || `:${emoji.name}:`;
}
function chosen(emoji: any, ev?: MouseEvent) {
@ -441,7 +444,7 @@ function done(query?: any): boolean | void {
return true;
}
const exactMatchUnicode = emojilist.find(
(emoji) => emoji.char === q2 || emoji.name === q2
(emoji) => emoji.emoji === q2 || emoji.slug === q2
);
if (exactMatchUnicode) {
chosen(exactMatchUnicode);

1785
packages/client/src/emojilist.json
View File

File diff suppressed because it is too large Load Diff

3
packages/client/src/pages/admin/settings.vue
View File

@ -131,21 +131,18 @@
}}</template>
<option value="⭐">
<MkEmoji
class="emoji"
emoji="⭐"
style="height: 1.7em"
/>
</option>
<option value="👍">
<MkEmoji
class="emoji"
emoji="👍"
style="height: 1.7em"
/>
</option>
<option value="❤️">
<MkEmoji
class="emoji"
emoji="❤️"
style="height: 1.7em"
/>

30
packages/client/src/pages/settings/reaction.vue
View File

@ -23,7 +23,11 @@
class="_button item"
@click="remove(element, $event)"
>
<MkEmoji :emoji="element" :normal="true" />
<MkEmoji
:emoji="element"
style="height: 1.7em"
class="emoji"
/>
</button>
</template>
<template #footer>
@ -41,6 +45,27 @@
>
</FromSlot>
<FormRadios v-model="reactionPickerSkinTone" class="_formBlock">
<template #label>{{ i18n.ts.reactionPickerSkinTone }}</template>
<option :value="1">
<MkEmoji style="height: 1.7em" emoji="✌️" />
</option>
<option :value="6">
<MkEmoji style="height: 1.7em" emoji="✌🏿" />
</option>
<option :value="5">
<MkEmoji style="height: 1.7em" emoji="✌🏾" />
</option>
<option :value="4">
<MkEmoji style="height: 1.7em" emoji="✌🏽" />
</option>
<option :value="3">
<MkEmoji style="height: 1.7em" emoji="✌🏼" />
</option>
<option :value="2">
<MkEmoji style="height: 1.7em" emoji="✌🏻" />
</option>
</FormRadios>
<FormRadios v-model="reactionPickerSize" class="_formBlock">
<template #label>{{ i18n.ts.size }}</template>
<option :value="1">{{ i18n.ts.small }}</option>
@ -125,6 +150,9 @@ async function reloadAsk() {
let reactions = $ref(deepClone(defaultStore.state.reactions));
const reactionPickerSkinTone = $computed(
defaultStore.makeGetterSetter("reactionPickerSkinTone")
);
const reactionPickerSize = $computed(
defaultStore.makeGetterSetter("reactionPickerSize")
);

74
packages/client/src/scripts/emojilist.ts
View File

@ -1,5 +1,10 @@
import data from "unicode-emoji-json/data-by-group.json";
import emojiComponents from "unicode-emoji-json/data-emoji-components.json";
import keywordSet from "emojilib";
import { defaultStore } from "@/store";
export const unicodeEmojiCategories = [
"face",
"emotion",
"people",
"animals_and_nature",
"food_and_drink",
@ -10,14 +15,69 @@ export const unicodeEmojiCategories = [
"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;
function addSkinTone(emoji: string) {
const skinTone = defaultStore.state.reactionPickerSkinTone;
if (skinTone === 1) return emoji;
if (skinTone === 2) return emoji + emojiComponents.light_skin_tone;
if (skinTone === 3) return emoji + emojiComponents.medium_light_skin_tone;
if (skinTone === 4) return emoji + emojiComponents.medium_skin_tone;
if (skinTone === 5) return emoji + emojiComponents.medium_dark_skin_tone;
if (skinTone === 6) return emoji + emojiComponents.dark_skin_tone;
return emoji;
}
const newData = {};
Object.keys(data).forEach((originalCategory) => {
const newCategory = categoryMapping[originalCategory];
if (newCategory) {
newData[newCategory] = newData[newCategory] || [];
Object.keys(data[originalCategory]).forEach((emojiIndex) => {
const emojiObj = { ...data[originalCategory][emojiIndex] };
if (emojiObj.skin_tone_support) {
emojiObj.emoji = addSkinTone(emojiObj.emoji);
}
emojiObj.category = newCategory;
emojiObj.keywords = keywordSet[emojiObj.emoji];
newData[newCategory].push(emojiObj);
});
}
});
export type UnicodeEmojiDef = {
name: string;
keywords: string[];
char: string;
emoji: string;
category: typeof unicodeEmojiCategories[number];
slug: string;
keywords?: string[];
};
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
import _emojilist from "../emojilist.json";
export const emojilist: UnicodeEmojiDef[] = Object.keys(newData).reduce((acc, category) => {
const categoryItems = newData[category].map((item) => {
return {
emoji: item.emoji,
slug: item.slug,
category: item.category,
keywords: item.keywords || [],
};
});
return acc.concat(categoryItems);
}, []);
export const emojilist = _emojilist as UnicodeEmojiDef[];
export function getNicelyLabeledCategory(internalName) {
return Object.keys(categoryMapping).find(
(key) => categoryMapping[key] === internalName
) || internalName;
}

4
packages/client/src/store.ts
View File

@ -242,6 +242,10 @@ export const defaultStore = markRaw(
where: "device",
default: "remote" as "none" | "remote" | "always",
},
reactionPickerSkinTone: {
where: "account",
default: 1,
},
reactionPickerSize: {
where: "device",
default: 3,

14
pnpm-lock.yaml
View File

@ -777,6 +777,9 @@ importers:
date-fns:
specifier: 2.30.0
version: 2.30.0
emojilib:
specifier: ^3.0.10
version: 3.0.10
escape-regexp:
specifier: 0.0.1
version: 0.0.1
@ -882,6 +885,9 @@ importers:
typescript:
specifier: 5.1.3
version: 5.1.3
unicode-emoji-json:
specifier: ^0.4.0
version: 0.4.0
uuid:
specifier: 9.0.0
version: 9.0.0
@ -6777,6 +6783,10 @@ packages:
/emoji-regex@9.2.2:
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
/emojilib@3.0.10:
resolution: {integrity: sha512-VQtCRroFykPTJaoEBEGFg5tI+rEluabjuaVDDbSftDtiRJ5GuqRG/LGV1mmDzkJP4bh5rzuEBOafMN68/YXQcQ==}
dev: true
/emojis-list@3.0.0:
resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
engines: {node: '>= 4'}
@ -14866,6 +14876,10 @@ packages:
busboy: 1.6.0
dev: false
/unicode-emoji-json@0.4.0:
resolution: {integrity: sha512-lVNOwh2AnmbwqtSrEVjAWKQoVzWgyWmXVqPuPkPfKb0tnA0+uYN/4ILCTdy9IRj/+3drAVhmjwjNJQr2dhCwnA==}
dev: true
/union-value@1.0.1:
resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
engines: {node: '>=0.10.0'}

1
rome.json
View File

@ -14,7 +14,6 @@
"packages/backend/src/server/web/manifest.ts",
"packages/backend/built/",
"*/model.json",
"packages/client/src/emojilist.json",
"*.md",
"**/tsconfig.json",
"*/.yml"