Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: fix some type errors

Browse source
This commit is contained in:
yukineko 2024-01-09 01:10:47 +09:00
parent 09b47fc402
commit 7387cae138
No known key found for this signature in database
GPG key ID: E5BACB72109B7B90
13 changed files with 85 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/frontend/src/components/MkCwButton.vue
View file

@ -17,22 +17,14 @@ import MkButton from '@/components/MkButton.vue';
const props = defineProps<{
modelValue: boolean;
text: string | null;
renote: Misskey.entities.Note | null;
files: Misskey.entities.DriveFile[];
poll?: {
expiresAt: string | null;
multiple: boolean;
choices: {
isVoted: boolean;
text: string;
votes: number;
}[];
} | {
renote?: Misskey.entities.Note | null;
files?: Misskey.entities.DriveFile[];
poll?: Misskey.entities.Note['poll'] | {
choices: string[];
multiple: boolean;
expiresAt: string | null;
expiredAfter: string | null;
};
} | null;
}>();
const emit = defineEmits<{
@ -43,7 +35,7 @@ const label = computed(() => {
return concat([
props.text ? [i18n.t('_cw.chars', { count: props.text.length })] : [],
props.renote ? [i18n.ts.quote] : [],
props.files.length !== 0 ? [i18n.t('_cw.files', { count: props.files.length })] : [],
props.files && props.files.length !== 0 ? [i18n.t('_cw.files', { count: props.files.length })] : [],
props.poll != null ? [i18n.ts.poll] : [],
] as string[][]).join(' / ');
});

6
packages/frontend/src/components/MkInstanceTicker.vue
View file

@ -18,9 +18,9 @@ import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
const props = defineProps<{
instance?: {
faviconUrl?: string
name: string
themeColor?: string
faviconUrl?: string | null
name?: string | null
themeColor?: string | null
}
}>();

17
packages/frontend/src/components/MkMediaList.vue
View file

@ -52,7 +52,7 @@ const count = computed(() => props.mediaList.filter(media => previewable(media))
let lightbox: PhotoSwipeLightbox | null;
const popstateHandler = (): void => {
if (lightbox.pswp && lightbox.pswp.isOpen === true) {
if (lightbox?.pswp && lightbox.pswp.isOpen === true) {
lightbox.pswp.close();
}
};
@ -67,7 +67,10 @@ async function calcAspectRatio() {
return;
}
const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
const ratioMax = (ratio: number) => {
if (!img.properties.width || !img.properties.height) return '';
return `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
};
switch (defaultStore.state.mediaListWithOneImageAppearance) {
case '16_9':
@ -137,7 +140,7 @@ onMounted(() => {
// element is children
const { element } = itemData;
const id = element.dataset.id;
const id = element?.dataset.id;
const file = props.mediaList.find(media => media.id === id);
if (!file) return;
@ -147,14 +150,14 @@ onMounted(() => {
if (file.properties.orientation != null && file.properties.orientation >= 5) {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
itemData.msrc = file.thumbnailUrl ?? undefined;
itemData.alt = file.comment ?? file.name;
itemData.comment = file.comment ?? file.name;
itemData.thumbCropped = true;
});
lightbox.on('uiRegister', () => {
lightbox.pswp.ui.registerElement({
lightbox?.pswp?.ui?.registerElement({
name: 'altText',
className: 'pwsp__alt-text-container',
appendTo: 'wrapper',
@ -163,8 +166,8 @@ onMounted(() => {
textBox.className = 'pwsp__alt-text _acrylic';
el.appendChild(textBox);
pwsp.on('change', (a) => {
textBox.textContent = pwsp.currSlide.data.comment;
pwsp.on('change', () => {
textBox.textContent = pwsp.currSlide?.data.comment;
});
},
});

6
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -16,8 +16,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<video
ref="videoEl"
:class="$style.video"
:poster="video.thumbnailUrl"
:title="video.comment"
:poster="video.thumbnailUrl ?? undefined"
:title="video.comment ?? undefined"
:alt="video.comment"
preload="none"
controls
@ -51,7 +51,7 @@ watch(videoEl, () => {
if (videoEl.value) {
videoEl.value.volume = 0.3;
hasAudio(videoEl.value).then(had => {
if (!had) {
if (!had && videoEl.value) {
videoEl.value.loop = videoEl.value.muted = true;
videoEl.value.play();
}

5
packages/frontend/src/components/MkMenu.child.vue
View file

@ -33,6 +33,7 @@ const align = 'left';
const SCROLLBAR_THICKNESS = 16;
function setPosition() {
if (!el.value) return;
const rootRect = props.rootElement.getBoundingClientRect();
const parentRect = props.targetElement.getBoundingClientRect();
const myRect = el.value.getBoundingClientRect();
@ -66,7 +67,7 @@ const ro = new ResizeObserver((entries, observer) => {
});
onMounted(() => {
ro.observe(el.value);
if (el.value) ro.observe(el.value);
setPosition();
nextTick(() => {
setPosition();
@ -79,7 +80,7 @@ onUnmounted(() => {
defineExpose({
checkHit: (ev: MouseEvent) => {
return (ev.target === el.value || el.value.contains(ev.target));
return (ev.target === el.value || el.value?.contains(ev.target as Node));
},
});
</script>

20
packages/frontend/src/components/MkMenu.vue
View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
@contextmenu.self="e => e.preventDefault()"
>
<template v-for="(item, i) in items2">
<template v-for="(item, i) in (items2 ?? [])">
<div v-if="item.type === 'divider'" role="separator" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item]">
<span style="opacity: 0.7;">{{ item.text }}</span>
@ -63,12 +63,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</button>
</template>
<span v-if="items2.length === 0" :class="[$style.none, $style.item]">
<span v-if="!items2 || items2.length === 0" :class="[$style.none, $style.item]">
<span>{{ i18n.ts.none }}</span>
</span>
</div>
<div v-if="childMenu">
<XChild ref="child" :items="childMenu" :targetElement="childTarget" :rootElement="itemsEl" showing @actioned="childActioned" @close="close(false)"/>
<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" showing @actioned="childActioned" @close="close(false)"/>
</div>
</div>
</template>
@ -104,7 +104,7 @@ const emit = defineEmits<{
const itemsEl = shallowRef<HTMLDivElement>();
const items2 = ref<InnerMenuItem[]>([]);
const items2 = ref<InnerMenuItem[]>();
const child = shallowRef<InstanceType<typeof XChild>>();
@ -119,15 +119,15 @@ const childShowingItem = ref<MenuItem | null>();
let preferClick = isTouchUsing || props.asDrawer;
watch(() => props.items, () => {
const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
const items = [...props.items].filter(item => item !== undefined) as (NonNullable<MenuItem> | MenuPending)[];
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item && 'then' in item) { // if item is Promise
if ('then' in item) { // if item is Promise
items[i] = { type: 'pending' };
item.then(actualItem => {
items2.value[i] = actualItem;
if (items2.value?.[i]) items2.value[i] = actualItem;
});
}
}
@ -151,7 +151,7 @@ function childActioned() {
}
const onGlobalMousedown = (event: MouseEvent) => {
if (childTarget.value && (event.target === childTarget.value || childTarget.value.contains(event.target))) return;
if (childTarget.value && (event.target === childTarget.value || childTarget.value.contains(event.target as Node))) return;
if (child.value && child.value.checkHit(event)) return;
closeChild();
};
@ -169,7 +169,7 @@ function onItemMouseLeave(item) {
}
async function showChildren(item: MenuParent, ev: MouseEvent) {
const children = await (async () => {
const children: MenuItem[] = await (async () => {
if (childrenCache.has(item)) {
return childrenCache.get(item)!;
} else {
@ -189,7 +189,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
});
emit('hide');
} else {
childTarget.value = ev.currentTarget ?? ev.target;
childTarget.value = (ev.currentTarget ?? ev.target) as HTMLElement;
// これでもリアクティビティは保たれる
childMenu.value = children;
childShowingItem.value = item;

4
packages/frontend/src/components/MkMiniChart.vue
View file

@ -22,8 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only
stroke-width="2"
/>
<circle
:cx="headX"
:cy="headY"
:cx="headX ?? undefined"
:cy="headY ?? undefined"
r="3"
:fill="color"
/>

4
packages/frontend/src/components/MkModalWindow.vue
View file

@ -51,7 +51,7 @@ const bodyWidth = ref(0);
const bodyHeight = ref(0);
const close = () => {
modal.value.close();
modal.value?.close();
};
const onBgClick = () => {
@ -67,11 +67,13 @@ const onKeydown = (evt) => {
};
const ro = new ResizeObserver((entries, observer) => {
if (!rootEl.value || !headerEl.value) return;
bodyWidth.value = rootEl.value.offsetWidth;
bodyHeight.value = rootEl.value.offsetHeight - headerEl.value.offsetHeight;
});
onMounted(() => {
if (!rootEl.value || !headerEl.value) return;
bodyWidth.value = rootEl.value.offsetWidth;
bodyHeight.value = rootEl.value.offsetHeight - headerEl.value.offsetHeight;
ro.observe(rootEl.value);

64
packages/frontend/src/components/MkNote.vue
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div
v-if="!hardMuted && !muted"
v-show="!isDeleted"
ref="el"
ref="rootEl"
v-hotkey="keymap"
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined"
@ -72,16 +72,16 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
<div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/>
<div v-else>
<div v-else-if="translation">
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
</div>
</div>
</div>
<div v-if="appearNote.files.length > 0">
<div v-if="appearNote.files && appearNote.files.length > 0">
<MkMediaList :mediaList="appearNote.files"/>
</div>
<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
@ -126,7 +126,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="showMenu()">
<i class="ti ti-dots"></i>
</button>
</footer>
@ -214,7 +214,7 @@ if (noteViewInterruptors.length > 0) {
let result: Misskey.entities.Note | null = deepClone(note.value);
for (const interruptor of noteViewInterruptors) {
try {
result = await interruptor.handler(result);
result = await interruptor.handler(result!) as Misskey.entities.Note | null;
if (result === null) {
isDeleted.value = true;
return;
@ -223,7 +223,7 @@ if (noteViewInterruptors.length > 0) {
console.error(err);
}
}
note.value = result;
note.value = result as Misskey.entities.Note;
});
}
@ -231,11 +231,11 @@ const isRenote = (
note.value.renote != null &&
note.value.text == null &&
note.value.cw == null &&
note.value.fileIds.length === 0 &&
note.value.fileIds && note.value.fileIds.length === 0 &&
note.value.poll == null
);
const el = shallowRef<HTMLElement>();
const rootEl = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>();
const renoteButton = shallowRef<HTMLElement>();
const renoteTime = shallowRef<HTMLElement>();
@ -254,8 +254,8 @@ const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hard
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
const translating = ref(false);
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i.id));
const renoteCollapsed = ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || (appearNote.value.myReaction != null)));
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
const renoteCollapsed = ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) ?? (appearNote.value.myReaction != null)));
function checkMute(note: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null): boolean {
if (mutedWords == null) return false;
@ -269,11 +269,11 @@ function checkMute(note: Misskey.entities.Note, mutedWords: Array<string | strin
const keymap = {
'r': () => reply(true),
'e|a|plus': () => react(true),
'q': () => renoteButton.value.renote(true),
'q': () => renote(true),
'up|k|shift+tab': focusBefore,
'down|j|tab': focusAfter,
'esc': blur,
'm|o': () => menu(true),
'm|o': () => showMenu(true),
's': () => showContent.value !== showContent.value,
};
@ -290,7 +290,7 @@ if (props.mock) {
}, { deep: true });
} else {
useNoteCapture({
rootEl: el,
rootEl: rootEl,
note: appearNote,
pureNote: note,
isDeletedRef: isDeleted,
@ -336,7 +336,7 @@ function reply(viaKeyboard = false): void {
reply: appearNote.value,
channel: appearNote.value.channel,
animation: !viaKeyboard,
}, () => {
}).then(() => {
focus();
});
}
@ -355,7 +355,7 @@ function react(viaKeyboard = false): void {
noteId: appearNote.value.id,
reaction: '❤️',
});
const el = reactButton.value as HTMLElement | null | undefined;
const el = reactButton.value;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
@ -364,7 +364,7 @@ function react(viaKeyboard = false): void {
}
} else {
blur();
reactionPicker.show(reactButton.value, reaction => {
reactionPicker.show(reactButton.value ?? null, reaction => {
sound.play('reaction');
if (props.mock) {
@ -385,8 +385,8 @@ function react(viaKeyboard = false): void {
}
}
function undoReact(note): void {
const oldReaction = note.myReaction;
function undoReact(targetNote: Misskey.entities.Note): void {
const oldReaction = targetNote.myReaction;
if (!oldReaction) return;
if (props.mock) {
@ -395,7 +395,7 @@ function undoReact(note): void {
}
misskeyApi('notes/reactions/delete', {
noteId: note.id,
noteId: targetNote.id,
});
}
@ -404,32 +404,34 @@ function onContextmenu(ev: MouseEvent): void {
return;
}
const isLink = (el: HTMLElement) => {
const isLink = (el: HTMLElement): boolean => {
if (el.tagName === 'A') return true;
// 再生速度の選択などのために、Audio要素のコンテキストメニューはブラウザデフォルトとする。
if (el.tagName === 'AUDIO') return true;
if (el.parentElement) {
return isLink(el.parentElement);
}
return false;
};
if (isLink(ev.target)) return;
if (window.getSelection().toString() !== '') return;
if (ev.target && isLink(ev.target as HTMLElement)) return;
if (window.getSelection()?.toString() !== '') return;
if (defaultStore.state.useReactionPickerForContextMenu) {
ev.preventDefault();
react();
} else {
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value });
os.contextMenu(menu, ev).then(focus).finally(cleanup);
}
}
function menu(viaKeyboard = false): void {
function showMenu(viaKeyboard = false): void {
if (props.mock) {
return;
}
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value });
os.popupMenu(menu, menuButton.value, {
viaKeyboard,
}).then(focus).finally(cleanup);
@ -476,7 +478,7 @@ function showRenoteMenu(viaKeyboard = false): void {
getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
{ type: 'divider' },
getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote),
$i.isModerator || $i.isAdmin ? getUnrenote() : undefined,
($i?.isModerator || $i?.isAdmin) ? getUnrenote() : undefined,
], renoteTime.value, {
viaKeyboard: viaKeyboard,
});
@ -484,19 +486,19 @@ function showRenoteMenu(viaKeyboard = false): void {
}
function focus() {
el.value.focus();
rootEl.value?.focus();
}
function blur() {
el.value.blur();
rootEl.value?.blur();
}
function focusBefore() {
focusPrev(el.value);
focusPrev(rootEl.value ?? null);
}
function focusAfter() {
focusNext(el.value);
focusNext(rootEl.value ?? null);
}
function readPromo() {

2
packages/frontend/src/components/MkSwitch.button.vue
View file

@ -24,7 +24,7 @@ import { i18n } from '@/i18n.js';
const props = withDefaults(defineProps<{
checked: boolean | Ref<boolean>;
disabled?: boolean;
disabled?: boolean | Ref<boolean>;
}>(), {
disabled: false,
});

15
packages/frontend/src/scripts/get-note-menu.ts
View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { defineAsyncComponent, Ref } from 'vue';
import { defineAsyncComponent, Ref, ShallowRef } from 'vue';
import * as Misskey from 'misskey-js';
import { claimAchievement } from './achievements.js';
import { $i } from '@/account.js';
@ -36,7 +36,7 @@ export async function getNoteClipMenu(props: {
const appearNote = isRenote ? props.note.renote as Misskey.entities.Note : props.note;
const clips = await clipsCache.fetch();
return [...clips.map(clip => ({
const menu: MenuItem[] = [...clips.map(clip => ({
text: clip.name,
action: () => {
claimAchievement('noteClipped1');
@ -93,6 +93,8 @@ export async function getNoteClipMenu(props: {
os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
},
}];
return menu;
}
export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): MenuItem {
@ -122,7 +124,6 @@ export function getCopyNoteLinkMenu(note: Misskey.entities.Note, text: string):
export function getNoteMenu(props: {
note: Misskey.entities.Note;
menuButton: Ref<HTMLElement>;
translation: Ref<Misskey.entities.NotesTranslateResponse | null>;
translating: Ref<boolean>;
isDeleted: Ref<boolean>;
@ -471,7 +472,7 @@ function smallerVisibility(a: Visibility | string, b: Visibility | string): Visi
export function getRenoteMenu(props: {
note: Misskey.entities.Note;
renoteButton: Ref<HTMLElement>;
renoteButton: ShallowRef<HTMLElement | undefined>;
mock?: boolean;
}) {
const isRenote = (
@ -491,7 +492,7 @@ export function getRenoteMenu(props: {
text: i18n.ts.inChannelRenote,
icon: 'ti ti-repeat',
action: () => {
const el = props.renoteButton.value as HTMLElement | null | undefined;
const el = props.renoteButton.value;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
@ -527,7 +528,7 @@ export function getRenoteMenu(props: {
text: i18n.ts.renote,
icon: 'ti ti-repeat',
action: () => {
const el = props.renoteButton.value as HTMLElement | null | undefined;
const el = props.renoteButton.value;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
@ -567,7 +568,7 @@ export function getRenoteMenu(props: {
const renoteItems = [
...normalRenoteItems,
...(channelRenoteItems.length > 0 && normalRenoteItems.length > 0) ? [{ type: 'divider' }] : [],
...(channelRenoteItems.length > 0 && normalRenoteItems.length > 0) ? [{ type: 'divider' }] as MenuItem[] : [],
...channelRenoteItems,
];

2
packages/frontend/src/scripts/reaction-picker.ts
View file

@ -38,7 +38,7 @@ class ReactionPicker {
});
}
public show(src: HTMLElement, onChosen?: ReactionPicker['onChosen'], onClosed?: ReactionPicker['onClosed']) {
public show(src: HTMLElement | null, onChosen?: ReactionPicker['onChosen'], onClosed?: ReactionPicker['onClosed']) {
this.src.value = src;
this.manualShowing.value = true;
this.onChosen = onChosen;

6
packages/frontend/src/scripts/use-note-capture.ts
View file

@ -3,13 +3,13 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { onUnmounted, Ref } from 'vue';
import { onUnmounted, Ref, ShallowRef } from 'vue';
import * as Misskey from 'misskey-js';
import { useStream } from '@/stream.js';
import { $i } from '@/account.js';
export function useNoteCapture(props: {
rootEl: Ref<HTMLElement>;
rootEl: ShallowRef<HTMLElement | undefined>;
note: Ref<Misskey.entities.Note>;
pureNote: Ref<Misskey.entities.Note>;
isDeletedRef: Ref<boolean>;
@ -83,7 +83,7 @@ export function useNoteCapture(props: {
function capture(withHandler = false): void {
if (connection) {
// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
connection.send(document.body.contains(props.rootEl.value) ? 'sr' : 's', { id: note.value.id });
connection.send(document.body.contains(props.rootEl.value ?? null as Node | null) ? 'sr' : 's', { id: note.value.id });
if (pureNote.value.id !== note.value.id) connection.send('s', { id: pureNote.value.id });
if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
}