fix(frontend): MenuRadioの指定方法変更 (#17345)

* fix(frontend): MenuRadioの指定方法変更

* fix indent

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

packages/frontend/src/components/MkMediaAudio.vue

@@ -182,15 +182,28 @@ function showMenu(ev: MouseEvent) {
 			text: i18n.ts._mediaControls.playbackRate,
 			icon: 'ti ti-clock-play',
 			ref: speed,
-			options: {
+			options: [{
-				'0.25x': 0.25,
+				label: '0.25x',
-				'0.5x': 0.5,
+				value: 0.25,
-				'0.75x': 0.75,
+			}, {
-				'1.0x': 1,
+				label: '0.5x',
-				'1.25x': 1.25,
+				value: 0.5,
-				'1.5x': 1.5,
+			}, {
-				'2.0x': 2,
+				label: '0.75x',
-			},
+				value: 0.75,
+			}, {
+				label: '1.0x',
+				value: 1,
+			}, {
+				label: '1.25x',
+				value: 1.25,
+			}, {
+				label: '1.5x',
+				value: 1.5,
+			}, {
+				label: '2.0x',
+				value: 2,
+			}],
 		},
 		{
 			type: 'divider',

packages/frontend/src/components/MkMediaVideo.vue

@@ -204,15 +204,28 @@ function showMenu(ev: PointerEvent) {
 			text: i18n.ts._mediaControls.playbackRate,
 			icon: 'ti ti-clock-play',
 			ref: speed,
-			options: {
+			options: [{
-				'0.25x': 0.25,
+				label: '0.25x',
-				'0.5x': 0.5,
+				value: 0.25,
-				'0.75x': 0.75,
+			}, {
-				'1.0x': 1,
+				label: '0.5x',
-				'1.25x': 1.25,
+				value: 0.5,
-				'1.5x': 1.5,
+			}, {
-				'2.0x': 2,
+				label: '0.75x',
-			},
+				value: 0.75,
+			}, {
+				label: '1.0x',
+				value: 1,
+			}, {
+				label: '1.25x',
+				value: 1.25,
+			}, {
+				label: '1.5x',
+				value: 1.5,
+			}, {
+				label: '2.0x',
+				value: 2,
+			}],
 		},
 		...(window.document.pictureInPictureEnabled ? [{
 			text: i18n.ts._mediaControls.pip,

packages/frontend/src/components/MkMenu.vue

@@ -339,24 +339,23 @@ function onItemMouseLeave() {
 }
 
 async function showRadioOptions(item: MenuRadio, ev: MouseEvent | PointerEvent | KeyboardEvent) {
-	const children: MenuItem[] = Object.keys(item.options).map<MenuRadioOption>(key => {
+	const children: MenuItem[] = item.options.map<MenuRadioOption>(def => {
-		const value = item.options[key];
 		return {
 			type: 'radioOption',
-			text: key,
+			text: def.label,
 			action: () => {
 				if (isRef(item.ref)) {
-					item.ref.value = value;
+					item.ref.value = def.value;
 				} else {
 					// @ts-expect-error リアクティビティは保たれる
-					item.ref = value;
+					item.ref = def.value;
 				}
 			},
 			active: computed(() => {
 				if (isRef(item.ref)) {
-					return item.ref.value === value;
+					return item.ref.value === def.value;
 				} else {
-					return item.ref === value;
+					return item.ref === def.value;
 				}
 			}),
 		};
@@ -421,9 +420,14 @@ function close(actioned = false) {
 	});
 }
 
-function switchItem(item: MenuSwitch & { ref: any }) {
+function switchItem(item: MenuSwitch) {
 	if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
-	item.ref = !item.ref;
+	if (isRef(item.ref)) {
+		item.ref.value = !item.ref.value;
+	} else {
+		// @ts-expect-error リアクティビティは保たれる
+		item.ref = !item.ref;
+	}
 }
 
 function focusUp() {

packages/frontend/src/types/menu.ts

@@ -10,8 +10,6 @@ import type { OptionValue } from '@/types/option-value.js';
 
 type ComponentProps<T extends Component> = { [K in keyof CP<T>]: MaybeRef<CP<T>[K]> };
 
-type MenuRadioOptionsDef = Record<string, OptionValue>;
-
 type Text = string | ComputedRef<string>;
 
 export type MenuAction = (ev: PointerEvent) => void;
@@ -32,6 +30,12 @@ interface MenuBase {
 	type: string;
 }
 
+interface TextMenuBase extends MenuBase {
+	text: Text;
+	caption?: Text | null | undefined | ComputedRef<null | undefined>;
+	icon?: string;
+}
+
 export interface MenuDivider extends MenuBase {
 	type: 'divider';
 }
@@ -42,24 +46,18 @@ export interface MenuLabel extends MenuBase {
 	caption?: Text | null | undefined | ComputedRef<null | undefined>;
 }
 
-export interface MenuLink extends MenuBase {
+export interface MenuLink extends TextMenuBase {
 	type: 'link';
 	to: string;
-	text: Text;
-	caption?: Text | null | undefined | ComputedRef<null | undefined>;
-	icon?: string;
 	indicate?: boolean;
 	avatar?: Misskey.entities.User;
 }
 
-export interface MenuA extends MenuBase {
+export interface MenuA extends TextMenuBase {
 	type: 'a';
 	href: string;
 	target?: string;
 	download?: string;
-	text: Text;
-	caption?: Text | null | undefined | ComputedRef<null | undefined>;
-	icon?: string;
 	indicate?: boolean;
 }
 
@@ -71,22 +69,19 @@ export interface MenuUser extends MenuBase {
 	action: MenuAction;
 }
 
-export interface MenuSwitch extends MenuBase {
+export interface MenuSwitch extends TextMenuBase {
 	type: 'switch';
 	ref: Ref<boolean>;
-	text: Text;
-	caption?: Text | null | undefined | ComputedRef<null | undefined>;
-	icon?: string;
 	disabled?: boolean | Ref<boolean>;
 }
 
-export interface MenuRadio extends MenuBase {
+export interface MenuRadio extends TextMenuBase {
 	type: 'radio';
-	text: Text;
+	ref: Ref<OptionValue>;
-	caption?: Text | null | undefined | ComputedRef<null | undefined>;
+	options: {
-	icon?: string;
+		label: string;
-	ref: Ref<MenuRadioOptionsDef[keyof MenuRadioOptionsDef]>;
+		value: OptionValue;
-	options: MenuRadioOptionsDef;
+	}[];
 	disabled?: boolean | Ref<boolean>;
 }
 
@@ -104,11 +99,8 @@ export interface MenuComponent<T extends Component = any> extends MenuBase {
 	props?: ComponentProps<T>;
 }
 
-export interface MenuParent extends MenuBase {
+export interface MenuParent extends TextMenuBase {
 	type: 'parent';
-	text: Text;
-	caption?: Text | null | undefined | ComputedRef<null | undefined>;
-	icon?: string;
 	children: MenuItem[] | (() => Promise<MenuItem[]> | MenuItem[]);
 }