feat: Add Badge Image to Push Notification (#8012)
* fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * ✌️ * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * ✌️ * clean up config * typesを戻した * backend/src/web/index.ts * notification-badges * add scripts * change create-notification.ts * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * refactor * キャッシュ対策 * Truncate push notification message * fix * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * fix * i18n.ts * update * ✌️ * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * pollEnded * URLをsw.jsに戻す * clean up * fix lint * changelog * alpha-test * also with twemoji * add isMimeImage function * catch * Colour => Color * char2file => char2filePath * Update autocomplete.vue * remove clone? Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
tamaina
GitHub
8
packages/backend/src/misc/is-mime-image.ts
Normal file
8
packages/backend/src/misc/is-mime-image.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
|
||||
|
||||
const dictionary = {
|
||||
'safe-file': FILE_TYPE_BROWSERSAFE,
|
||||
'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'],
|
||||
};
|
||||
|
||||
export const isMimeImage = (mime: string, type: keyof typeof dictionary): boolean => dictionary[type].includes(mime);
|
||||
@ -1,13 +1,16 @@
|
||||
import * as fs from 'node:fs';
|
||||
import Koa from 'koa';
|
||||
import { serverLogger } from '../index.js';
|
||||
import sharp from 'sharp';
|
||||
import { IImage, convertToWebp } from '@/services/drive/image-processor.js';
|
||||
import { createTemp } from '@/misc/create-temp.js';
|
||||
import { downloadUrl } from '@/misc/download-url.js';
|
||||
import { detectType } from '@/misc/get-file-info.js';
|
||||
import { StatusError } from '@/misc/fetch.js';
|
||||
import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
|
||||
import { serverLogger } from '../index.js';
|
||||
import { isMimeImage } from '@/misc/is-mime-image.js';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
||||
export async function proxyMedia(ctx: Koa.Context) {
|
||||
const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
|
||||
|
||||
@ -23,14 +26,50 @@ export async function proxyMedia(ctx: Koa.Context) {
|
||||
await downloadUrl(url, path);
|
||||
|
||||
const { mime, ext } = await detectType(path);
|
||||
const isConvertibleImage = isMimeImage(mime, 'sharp-convertible-image');
|
||||
|
||||
let image: IImage;
|
||||
|
||||
if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'].includes(mime)) {
|
||||
if ('static' in ctx.query && isConvertibleImage) {
|
||||
image = await convertToWebp(path, 498, 280);
|
||||
} else if ('preview' in ctx.query && ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/svg+xml'].includes(mime)) {
|
||||
} else if ('preview' in ctx.query && isConvertibleImage) {
|
||||
image = await convertToWebp(path, 200, 200);
|
||||
} else if (['image/svg+xml'].includes(mime)) {
|
||||
} else if ('badge' in ctx.query) {
|
||||
if (!isConvertibleImage) {
|
||||
// 画像でないなら404でお茶を濁す
|
||||
throw new StatusError('Unexpected mime', 404);
|
||||
}
|
||||
|
||||
const mask = sharp(path)
|
||||
.resize(96, 96, {
|
||||
fit: 'inside',
|
||||
withoutEnlargement: false,
|
||||
})
|
||||
.greyscale()
|
||||
.normalise()
|
||||
.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
|
||||
.flatten({ background: '#000' })
|
||||
.toColorspace('b-w');
|
||||
|
||||
const stats = await mask.clone().stats();
|
||||
|
||||
if (stats.entropy < 0.1) {
|
||||
// エントロピーがあまりない場合は404にする
|
||||
throw new StatusError('Skip to provide badge', 404);
|
||||
}
|
||||
|
||||
const data = sharp({
|
||||
create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
|
||||
})
|
||||
.pipelineColorspace('b-w')
|
||||
.boolean(await mask.png().toBuffer(), 'eor');
|
||||
|
||||
image = {
|
||||
data: await data.png().toBuffer(),
|
||||
ext: 'png',
|
||||
type: 'image/png',
|
||||
};
|
||||
} else if (mime === 'image/svg+xml') {
|
||||
image = await convertToWebp(path, 2048, 2048, 1);
|
||||
} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
|
||||
throw new StatusError('Rejected type', 403, 'Rejected type');
|
||||
@ -48,7 +87,7 @@ export async function proxyMedia(ctx: Koa.Context) {
|
||||
} catch (e) {
|
||||
serverLogger.error(`${e}`);
|
||||
|
||||
if (e instanceof StatusError && e.isClientError) {
|
||||
if (e instanceof StatusError && (e.statusCode === 302 || e.isClientError)) {
|
||||
ctx.status = e.statusCode;
|
||||
} else {
|
||||
ctx.status = 500;
|
||||
|
||||
@ -11,6 +11,7 @@ import Router from '@koa/router';
|
||||
import send from 'koa-send';
|
||||
import favicon from 'koa-favicon';
|
||||
import views from 'koa-views';
|
||||
import sharp from 'sharp';
|
||||
import { createBullBoard } from '@bull-board/api';
|
||||
import { BullAdapter } from '@bull-board/api/bullAdapter.js';
|
||||
import { KoaAdapter } from '@bull-board/koa';
|
||||
@ -140,6 +141,49 @@ router.get('/twemoji/(.*)', async ctx => {
|
||||
});
|
||||
});
|
||||
|
||||
router.get('/twemoji-badge/(.*)', async ctx => {
|
||||
const path = ctx.path.replace('/twemoji-badge/', '');
|
||||
|
||||
if (!path.match(/^[0-9a-f-]+\.png$/)) {
|
||||
ctx.status = 404;
|
||||
return;
|
||||
}
|
||||
|
||||
const mask = await sharp(
|
||||
`${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/${path.replace('.png', '')}.svg`,
|
||||
{ density: 1000 },
|
||||
)
|
||||
.resize(488, 488)
|
||||
.greyscale()
|
||||
.normalise()
|
||||
.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
|
||||
.flatten({ background: '#000' })
|
||||
.extend({
|
||||
top: 12,
|
||||
bottom: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
background: '#000',
|
||||
})
|
||||
.toColorspace('b-w')
|
||||
.png()
|
||||
.toBuffer();
|
||||
|
||||
const buffer = await sharp({
|
||||
create: { width: 512, height: 512, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
|
||||
})
|
||||
.pipelineColorspace('b-w')
|
||||
.boolean(mask, 'eor')
|
||||
.resize(96, 96)
|
||||
.png()
|
||||
.toBuffer();
|
||||
|
||||
ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
|
||||
ctx.set('Cache-Control', 'max-age=2592000');
|
||||
ctx.set('Content-Type', 'image/png');
|
||||
ctx.body = buffer;
|
||||
});
|
||||
|
||||
// ServiceWorker
|
||||
router.get(`/sw.js`, async ctx => {
|
||||
await send(ctx as any, `/sw.js`, {
|
||||
|
||||
Reference in New Issue
Block a user