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

Co-Authored-By: taiy <53635909+taiyme@users.noreply.github.com>

packages/frontend/src/components/MkInstanceTicker.impl.ts

@@ -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);
 

packages/frontend/src/components/MkInstanceTicker.vue

@@ -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 = {
+const props = defineProps<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;
-};
-
-const props = defineProps<TickerProps>();
 
 const tickerInfoRef = computed(() => getTickerInfo(props));
 const tickerColorsRef = computed(() => getTickerColors(tickerInfoRef.value));