sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance: カスタム絵文字関連の変更 (#9794)

Browse Source 
* PackedNoteなどのemojisはプロキシしていないURLを返すように

* MFMでx3/x4もしくはscale.x/yが2.5以上に指定されていた場合にはオリジナル品質の絵文字を使用する

* update CHANGELOG.md

* fix changelog

* ??

* wip

* fix

* merge

* Update packages/frontend/src/scripts/media-proxy.ts

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

* merge

* calc scale

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
tamaina
2023-04-12 10:58:56 +09:00
committed by GitHub
parent 0db88a5a3b
commit 81d2c5a4a7
5 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/frontend/src/components/mfm.ts
View File

@@ -51,6 +51,10 @@ export default defineComponent({
type: Object,
default: null,
},
rootScale: {
type: Number,
default: 1,
}
},
render() {
@@ -65,7 +69,12 @@ export default defineComponent({
const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
/**
* Gen Vue Elements from MFM AST
* @param ast MFM AST
* @param scale How times large the text is
*/
const genEl = (ast: mfm.MfmNode[], scale: number) => ast.map((token): VNode | string | (VNode | string)[] => {
switch (token.type) {
case 'text': {
const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
@@ -84,17 +93,17 @@ export default defineComponent({
}
case 'bold': {
return [h('b', genEl(token.children))];
return [h('b', genEl(token.children, scale))];
}
case 'strike': {
return [h('del', genEl(token.children))];
return [h('del', genEl(token.children, scale))];
}
case 'italic': {
return h('i', {
style: 'font-style: oblique;',
}, genEl(token.children));
}, genEl(token.children, scale));
}
case 'fn': {
@@ -155,17 +164,17 @@ export default defineComponent({
case 'x2': {
return h('span', {
class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
}, genEl(token.children));
}, genEl(token.children, scale * 2));
}
case 'x3': {
return h('span', {
class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
}, genEl(token.children));
}, genEl(token.children, scale * 3));
}
case 'x4': {
return h('span', {
class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
}, genEl(token.children));
}, genEl(token.children, scale * 4));
}
case 'font': {
const family =
@@ -182,7 +191,7 @@ export default defineComponent({
case 'blur': {
return h('span', {
class: '_mfm_blur_',
}, genEl(token.children));
}, genEl(token.children, scale));
}
case 'rainbow': {
const speed = validTime(token.props.args.speed) ?? '1s';
@@ -191,9 +200,9 @@ export default defineComponent({
}
case 'sparkle': {
if (!useAnim) {
return genEl(token.children);
return genEl(token.children, scale);
}
return h(MkSparkle, {}, genEl(token.children));
return h(MkSparkle, {}, genEl(token.children, scale));
}
case 'rotate': {
const degrees = parseFloat(token.props.args.deg ?? '90');
@@ -214,7 +223,8 @@ export default defineComponent({
}
const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
style = `transform: scale(${x}, ${y});`;
style = `transform: scale(${x}, ${y});`;
scale = scale * Math.max(x, y);
break;
}
case 'fg': {
@@ -231,24 +241,24 @@ export default defineComponent({
}
}
if (style == null) {
return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']);
} else {
return h('span', {
style: 'display: inline-block; ' + style,
}, genEl(token.children));
}, genEl(token.children, scale));
}
}
case 'small': {
return [h('small', {
style: 'opacity: 0.7;',
}, genEl(token.children))];
}, genEl(token.children, scale))];
}
case 'center': {
return [h('div', {
style: 'text-align:center;',
}, genEl(token.children))];
}, genEl(token.children, scale))];
}
case 'url': {
@@ -264,7 +274,7 @@ export default defineComponent({
key: Math.random(),
url: token.props.url,
rel: 'nofollow noopener',
}, genEl(token.children))];
}, genEl(token.children, scale))];
}
case 'mention': {
@@ -303,11 +313,11 @@ export default defineComponent({
if (!this.nowrap) {
return [h('div', {
style: QUOTE_STYLE,
}, genEl(token.children))];
}, genEl(token.children, scale))];
} else {
return [h('span', {
style: QUOTE_STYLE,
}, genEl(token.children))];
}, genEl(token.children, scale))];
}
}
@@ -319,6 +329,7 @@ export default defineComponent({
name: token.props.name,
normal: this.plain,
host: null,
useOriginalSize: scale >= 2.5,
})];
} else {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -332,6 +343,7 @@ export default defineComponent({
url: this.emojiUrls ? this.emojiUrls[token.props.name] : null,
normal: this.plain,
host: this.author.host,
useOriginalSize: scale >= 2.5,
})];
}
}
@@ -360,7 +372,7 @@ export default defineComponent({
}
case 'plain': {
return [h('span', genEl(token.children))];
return [h('span', genEl(token.children, scale))];
}
default: {
@@ -373,6 +385,6 @@ export default defineComponent({
}).flat(Infinity) as (VNode | string)[];
// Parse ast to DOM
return h('span', genEl(ast));
return h('span', genEl(ast, this.rootScale));
},
});