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

refactor(InstanceTicker): 参照の構造を変更 

Co-Authored-By: taiy <53635909+taiyme@users.noreply.github.com>
This commit is contained in:
kakkokari-gtyih 2025-05-04 19:29:57 +09:00
parent 6ea3666806
commit edb2e64035
2 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/src/utility/instance-ticker.ts → packages/frontend/src/components/MkInstanceTicker.impl.ts
View File

@ -8,10 +8,23 @@ import { instance as localInstance } from '@/instance.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { hexToRgb } from '@/utility/color.js';
import type { HEX } from '@/utility/color.js';
import type { TickerProps } from '@/components/MkInstanceTicker.vue';
export type MkInstanceTickerProps = {
readonly instance?: {
readonly name?: string | null;
// NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
// readonly iconUrl?: string | null;
readonly faviconUrl?: string | null;
readonly themeColor?: string | null;
} | null;
readonly channel?: {
readonly name: string;
readonly color: string;
} | null;
};
//#region ticker info
type TickerInfo = {
type ITickerInfo = {
readonly name: string;
readonly iconUrl: string;
readonly themeColor: string;
@ -19,13 +32,13 @@ type TickerInfo = {
const TICKER_BG_COLOR_DEFAULT = '#777777' as const;
export const getTickerInfo = (props: TickerProps): TickerInfo => {
export const getTickerInfo = (props: MkInstanceTickerProps): ITickerInfo => {
if (props.channel != null) {
return {
name: props.channel.name,
iconUrl: getProxiedImageUrlNullable(localInstance.iconUrl, 'preview') ?? '/favicon.ico',
themeColor: props.channel.color,
} as const satisfies TickerInfo;
} as const satisfies ITickerInfo;
}
if (props.instance != null) {
return {
@ -33,18 +46,18 @@ export const getTickerInfo = (props: TickerProps): TickerInfo => {
// 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,
} as const satisfies TickerInfo;
} as const satisfies ITickerInfo;
}
return {
name: localInstance.name ?? host,
iconUrl: getProxiedImageUrlNullable(localInstance.iconUrl, 'preview') ?? '/favicon.ico',
themeColor: localInstance.themeColor ?? document.querySelector<HTMLMetaElement>('meta[name="theme-color-orig"]')?.content ?? TICKER_BG_COLOR_DEFAULT,
} as const satisfies TickerInfo;
} as const satisfies ITickerInfo;
};
//#endregion ticker info
//#region ticker colors
type TickerColors = {
type ITickerColors = {
readonly '--ticker-bg': string;
readonly '--ticker-fg': string;
readonly '--ticker-bg-rgb': string;
@ -54,9 +67,9 @@ const TICKER_YUV_THRESHOLD = 191 as const;
const TICKER_FG_COLOR_LIGHT = '#ffffff' as const;
const TICKER_FG_COLOR_DARK = '#2f2f2fcc' as const;
const tickerColorsCache = new Map<HEX, TickerColors>();
const tickerColorsCache = new Map<HEX, ITickerColors>();
export const getTickerColors = (info: TickerInfo): TickerColors => {
export const getTickerColors = (info: ITickerInfo): ITickerColors => {
const bgHex = info.themeColor;
const cachedTickerColors = tickerColorsCache.get(bgHex);
if (cachedTickerColors != null) return cachedTickerColors;
@ -69,7 +82,7 @@ export const getTickerColors = (info: TickerInfo): TickerColors => {
'--ticker-fg': fgHex,
'--ticker-bg': bgHex,
'--ticker-bg-rgb': `${r}, ${g}, ${b}`,
} as const satisfies TickerColors;
} as const satisfies ITickerColors;
tickerColorsCache.set(bgHex, tickerColors);

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

@ -15,23 +15,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed } from 'vue';
import { getTickerColors, getTickerInfo } from '@/utility/instance-ticker.js';
import { getTickerColors, getTickerInfo } from '@/components/MkInstanceTicker.impl.js';
import type { MkInstanceTickerProps } from '@/components/MkInstanceTicker.impl.js';
export type TickerProps = {
readonly instance?: {
readonly name?: string | null;
// NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
// readonly iconUrl?: string | null;
readonly faviconUrl?: string | null;
readonly themeColor?: string | null;
} | null;
readonly channel?: {
readonly name: string;
readonly color: string;
} | null;
};
const props = defineProps<TickerProps>();
const props = defineProps<MkInstanceTickerProps>();
const tickerInfoRef = computed(() => getTickerInfo(props));
const tickerColorsRef = computed(() => getTickerColors(tickerInfoRef.value));