usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(InstanceTicker): リモートサーバーのアイコンが初期画像になる問題 (taiyme#211)

This commit is contained in:
taiy 2024-05-02 22:38:53 +09:00 committed by kakkokari-gtyih
parent 6274b371cf
commit 6ea3666806
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/components/MkInstanceTicker.vue
View File

@ -20,7 +20,8 @@ import { getTickerColors, getTickerInfo } from '@/utility/instance-ticker.js';
export type TickerProps = { export type TickerProps = {
readonly instance?: { readonly instance?: {
readonly name?: string | null; readonly name?: string | null;
readonly iconUrl?: string | null; // NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
// readonly iconUrl?: string | null;
readonly faviconUrl?: string | null; readonly faviconUrl?: string | null;
readonly themeColor?: string | null; readonly themeColor?: string | null;
} | null; } | null;

11
packages/frontend/src/utility/instance-ticker.ts
View File

@ -23,27 +23,24 @@ export const getTickerInfo = (props: TickerProps): TickerInfo => {
if (props.channel != null) { if (props.channel != null) {
return { return {
name: props.channel.name, name: props.channel.name,
iconUrl: getProxiedIconUrl(localInstance) ?? '/favicon.ico', iconUrl: getProxiedImageUrlNullable(localInstance.iconUrl, 'preview') ?? '/favicon.ico',
themeColor: props.channel.color, themeColor: props.channel.color,
} as const satisfies TickerInfo; } as const satisfies TickerInfo;
} }
if (props.instance != null) { if (props.instance != null) {
return { return {
name: props.instance.name ?? '', name: props.instance.name ?? '',
iconUrl: getProxiedIconUrl(props.instance) ?? '/client-assets/dummy.png', // NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
iconUrl: getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png',
themeColor: props.instance.themeColor ?? TICKER_BG_COLOR_DEFAULT, themeColor: props.instance.themeColor ?? TICKER_BG_COLOR_DEFAULT,
} as const satisfies TickerInfo; } as const satisfies TickerInfo;
} }
return { return {
name: localInstance.name ?? host, name: localInstance.name ?? host,
iconUrl: getProxiedIconUrl(localInstance) ?? '/favicon.ico', iconUrl: getProxiedImageUrlNullable(localInstance.iconUrl, 'preview') ?? '/favicon.ico',
themeColor: localInstance.themeColor ?? document.querySelector<HTMLMetaElement>('meta[name="theme-color-orig"]')?.content ?? TICKER_BG_COLOR_DEFAULT, themeColor: localInstance.themeColor ?? document.querySelector<HTMLMetaElement>('meta[name="theme-color-orig"]')?.content ?? TICKER_BG_COLOR_DEFAULT,
} as const satisfies TickerInfo; } as const satisfies TickerInfo;
}; };
const getProxiedIconUrl = (instance: NonNullable<TickerProps['instance']>): string | null => {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? null;
};
//#endregion ticker info //#endregion ticker info
//#region ticker colors //#region ticker colors