From edb2e6403535e677eb3691a4a89e7706deb95831 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 4 May 2025 19:29:57 +0900
Subject: [PATCH] =?UTF-8?q?refactor(InstanceTicker):=20=E5=8F=82=E7=85=A7?=
 =?UTF-8?q?=E3=81=AE=E6=A7=8B=E9=80=A0=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: taiy <53635909+taiyme@users.noreply.github.com>
---
 .../MkInstanceTicker.impl.ts}                 | 33 +++++++++++++------
 .../src/components/MkInstanceTicker.vue       | 19 ++---------
 2 files changed, 26 insertions(+), 26 deletions(-)
 rename packages/frontend/src/{utility/instance-ticker.ts => components/MkInstanceTicker.impl.ts} (72%)

diff --git a/packages/frontend/src/utility/instance-ticker.ts b/packages/frontend/src/components/MkInstanceTicker.impl.ts
similarity index 72%
rename from packages/frontend/src/utility/instance-ticker.ts
rename to packages/frontend/src/components/MkInstanceTicker.impl.ts
index 1b4f0b3ef1..1da350a8b3 100644
--- a/packages/frontend/src/utility/instance-ticker.ts
+++ b/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);
 
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index d006d6c7c1..df3e493fea 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/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 = {
-	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));