sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-03 23:16:28 +09:00
Code Issues Projects Releases Wiki Activity

enhance: Proxy custom emojis to reduce image size and accelerate the frontend (#9431)

Browse Source 
* fix(server): /emoji to accept `@.` host expression

* fix(client): use MkEmoji for custom emoji in MkEmojiPicker

* change convertToWebp

* nanka iroiro

* remove

* fix

* nearLosslessは労多くして益少なしなのでやめる

* do not cleanup tmp for development

* update sharp.js to 0.31.3

* mixed: true

* fix MkAutocomplete of 912791b3ab

* clean up

* https://github.com/misskey-dev/misskey/pull/9431#discussion_r1059215943
This commit is contained in:
tamaina
2022-12-30 12:00:50 +09:00
committed by GitHub
parent f227091826
commit 8b46edeccf
20 changed files with 140 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/frontend/src/scripts/get-static-image-url.ts
View File

@ -1,19 +0,0 @@
import { url as instanceUrl } from '@/config';
import * as url from '@/scripts/url';
export function getStaticImageUrl(baseUrl: string): string {
const u = new URL(baseUrl);
if (u.href.startsWith(`${instanceUrl}/proxy/`)) {
// もう既にproxyっぽそうだったらsearchParams付けるだけ
u.searchParams.set('static', '1');
return u.href;
}
// 拡張子がないとキャッシュしてくれないCDNがあるのでダミーの名前を指定する
const dummy = `${encodeURIComponent(`${u.host}${u.pathname}`)}.webp`;
return `${instanceUrl}/proxy/${dummy}?${url.query({
url: u.href,
static: '1',
})}`;
}

34
packages/frontend/src/scripts/media-proxy.ts
View File

@ -1,7 +1,15 @@
import { query } from '@/scripts/url';
import { query, appendQuery } from '@/scripts/url';
import { url } from '@/config';
export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
if (imageUrl.startsWith(`${url}/proxy/`) || imageUrl.startsWith('/proxy/')) {
// もう既にproxyっぽそうだったらsearchParams付けるだけ
return appendQuery(imageUrl, query({
fallback: '1',
...(type ? { [type]: '1' } : {}),
}));
}
return `${url}/proxy/image.webp?${query({
url: imageUrl,
fallback: '1',
@ -13,3 +21,27 @@ export function getProxiedImageUrlNullable(imageUrl: string | null | undefined,
if (imageUrl == null) return null;
return getProxiedImageUrl(imageUrl, type);
}
export function getStaticImageUrl(baseUrl: string): string {
const u = baseUrl.startsWith('http') ? new URL(baseUrl) : new URL(baseUrl, url);
if (u.href.startsWith(`${url}/proxy/`)) {
// もう既にproxyっぽそうだったらsearchParams付けるだけ
u.searchParams.set('static', '1');
return u.href;
}
if (u.href.startsWith(`${url}/emoji/`)) {
// もう既にemojiっぽそうだったらsearchParams付けるだけ
u.searchParams.set('static', '1');
return u.href;
}
// 拡張子がないとキャッシュしてくれないCDNがあるのでダミーの名前を指定する
const dummy = `${encodeURIComponent(`${u.host}${u.pathname}`)}.webp`;
return `${url}/proxy/${dummy}?${query({
url: u.href,
static: '1',
})}`;
}

5
packages/frontend/src/scripts/url.ts
View File

@ -1,3 +1,8 @@
/* objを検査して
* 1. 配列に何も入っていない時はクエリを付けない
* 2. プロパティがundefinedの時はクエリを付けない
* （new URLSearchParams(obj)ではそこまで丁寧なことをしてくれない）
*/
export function query(obj: Record<string, any>): string {
const params = Object.entries(obj)
.filter(([, v]) => Array.isArray(v) ? v.length : v !== undefined)