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

Merge remote-tracking branch 'misskey-dev/develop' into develop

Browse source 
# Conflicts:
#	package.json
This commit is contained in:
mattyatea 2023-09-11 18:57:08 +09:00
commit 94a7eca882
249 changed files with 6467 additions and 8437 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,13 +13,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref } from 'vue';
import { UserLite } from 'misskey-js/built/entities';
import * as Misskey from 'misskey-js';
import MkMention from './MkMention.vue';
import { i18n } from '@/i18n';
import { host as localHost } from '@/config';
import { api } from '@/os';
const user = ref<UserLite>();
const user = ref<Misskey.entities.UserLite>();
const props = defineProps<{
movedTo: string; // user id

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

@ -52,14 +52,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { onMounted } from 'vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements';
const props = withDefaults(defineProps<{
user: misskey.entities.User;
user: Misskey.entities.User;
withLocked: boolean;
withDescription: boolean;
}>(), {

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

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue';
@ -31,7 +31,7 @@ import { i18n } from '@/i18n';
import { $i, updateAccount } from '@/account';
const props = withDefaults(defineProps<{
announcement: misskey.entities.Announcement;
announcement: Misskey.entities.Announcement;
}>(), {
});

13
packages/frontend/src/components/MkAsUi.vue
View file

@ -38,6 +38,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option>
</MkSelect>
<MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton>
<div v-else-if="c.type === 'postForm'" :class="$style.postForm">
<MkPostForm
fixed
:instant="true"
:initialText="c.form.text"
/>
</div>
<MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
<template #label>{{ c.title }}</template>
<template v-for="child in c.children" :key="child">
@ -62,6 +69,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
import MkSelect from '@/components/MkSelect.vue';
import { AsUiComponent } from '@/scripts/aiscript/ui';
import MkFolder from '@/components/MkFolder.vue';
import MkPostForm from '@/components/MkPostForm.vue';
const props = withDefaults(defineProps<{
component: AsUiComponent;
@ -114,4 +122,9 @@ function openPostForm() {
.fontMonospace {
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
}
.postForm {
background: var(--bg);
border-radius: 8px;
}
</style>

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

@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
import { UserLite } from 'misskey-js/built/entities';
const props = withDefaults(defineProps<{
userIds: string[];
@ -24,11 +24,11 @@ const props = withDefaults(defineProps<{
limit: Infinity,
});
const users = ref<UserLite[]>([]);
const users = ref<Misskey.entities.UserLite[]>([]);
onMounted(async () => {
users.value = await os.api('users/show', {
userIds: props.userIds,
}) as unknown as UserLite[];
}) as unknown as Misskey.entities.UserLite[];
});
</script>

8
packages/frontend/src/components/MkCropperDialog.vue
View file

@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import Cropper from 'cropperjs';
import tinycolor from 'tinycolor2';
import MkModalWindow from '@/components/MkModalWindow.vue';
@ -44,13 +44,13 @@ import { i18n } from '@/i18n';
import { getProxiedImageUrl } from '@/scripts/media-proxy';
const emit = defineEmits<{
(ev: 'ok', cropped: misskey.entities.DriveFile): void;
(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
(ev: 'cancel'): void;
(ev: 'closed'): void;
}>();
const props = defineProps<{
file: misskey.entities.DriveFile;
file: Misskey.entities.DriveFile;
aspectRatio: number;
uploadFolder?: string | null;
}>();
@ -62,7 +62,7 @@ let cropper: Cropper | null = null;
let loading = $ref(true);
const ok = async () => {
const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
const promise = new Promise<Misskey.entities.DriveFile>(async (res) => {
const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
croppedCanvas?.toBlob(blob => {
if (!blob) return;

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

@ -12,13 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { concat } from '@/scripts/array';
import { i18n } from '@/i18n';
const props = defineProps<{
modelValue: boolean;
note: misskey.entities.Note;
note: Misskey.entities.Note;
}>();
const emit = defineEmits<{

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

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA
v-for="file in items"
:key="file.id"
v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${dateString(file.createdAt)}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${dateString(file.createdAt)}\nby ${file.user ? '@' + Misskey.acct.toString(file.user) : 'system'}`"
:to="`/admin/file/${file.id}`"
class="file _button"
>
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as Acct from 'misskey-js/built/acct';
import * as Misskey from 'misskey-js';
import MkPagination from '@/components/MkPagination.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import bytes from '@/filters/bytes';

2
packages/frontend/src/components/MkFlashPreview.vue
View file

@ -23,7 +23,7 @@ import { } from 'vue';
import { userName } from '@/filters/user';
const props = defineProps<{
//flash: misskey.entities.Flash;
//flash: Misskey.entities.Flash;
flash: any;
}>();
</script>

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

@ -32,13 +32,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { computed, ref } from 'vue';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import { defaultStore } from '@/store';
const props = defineProps<{
post: misskey.entities.GalleryPost;
post: Misskey.entities.GalleryPost;
}>();
const hover = ref(false);

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

@ -15,13 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkMiniChart from '@/components/MkMiniChart.vue';
import * as os from '@/os';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
const props = defineProps<{
instance: misskey.entities.Instance;
instance: Misskey.entities.Instance;
}>();
let chartValues = $ref<number[] | null>(null);

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

@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import copyToClipboard from '@/scripts/copy-to-clipboard';
@ -67,7 +67,7 @@ import { i18n } from '@/i18n';
import * as os from '@/os';
const props = defineProps<{
invite: misskey.entities.Invite;
invite: Misskey.entities.Invite;
moderator?: boolean;
}>();

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

@ -34,12 +34,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { soundConfigStore } from '@/scripts/sound';
import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{
media: misskey.entities.DriveFile;
media: Misskey.entities.DriveFile;
}>(), {
});

43
packages/frontend/src/components/MkMediaImage.vue
View file

@ -5,33 +5,40 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
<a
:class="$style.imageContainer"
:href="image.url"
:title="image.name"
<component
:is="disableImageLink ? 'div' : 'a'"
v-bind="disableImageLink ? {
title: image.name,
class: $style.imageContainer,
} : {
title: image.name,
class: $style.imageContainer,
href: image.url,
style: 'cursor: zoom-in;'
}"
>
<ImgWithBlurhash
:hash="image.blurhash"
:src="(defaultStore.state.enableDataSaverMode && hide) ? null : url"
:forceBlurhash="hide"
:cover="hide"
:cover="hide || cover"
:alt="image.comment || image.name"
:title="image.comment || image.name"
:width="image.properties.width"
:height="image.properties.height"
:style="hide ? 'filter: brightness(0.5);' : null"
/>
</a>
</component>
<template v-if="hide">
<div :class="$style.hiddenText">
<div :class="$style.hiddenTextWrapper">
<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }}</b>
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
<span v-if="controls" style="display: block;">{{ i18n.ts.clickToShow }}</span>
</div>
</div>
</template>
<template v-else>
<template v-else-if="controls">
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
<div v-if="image.comment" :class="$style.indicator">ALT</div>
@ -45,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { watch } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/media-proxy';
import bytes from '@/filters/bytes';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
@ -54,10 +61,17 @@ import { i18n } from '@/i18n';
import * as os from '@/os';
import { iAmModerator } from '@/account';
const props = defineProps<{
image: misskey.entities.DriveFile;
const props = withDefaults(defineProps<{
image: Misskey.entities.DriveFile;
raw?: boolean;
}>();
cover?: boolean;
disableImageLink?: boolean;
controls?: boolean;
}>(), {
cover: false,
disableImageLink: false,
controls: true,
});
let hide = $ref(true);
let darkMode: boolean = $ref(defaultStore.state.darkMode);
@ -70,6 +84,9 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
);
function onclick() {
if (!props.controls) {
return;
}
if (hide) {
hide = false;
}
@ -117,6 +134,7 @@ function showMenu(ev: MouseEvent) {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.hide {
@ -167,7 +185,6 @@ function showMenu(ev: MouseEvent) {
.imageContainer {
display: block;
cursor: zoom-in;
overflow: hidden;
width: 100%;
height: 100%;

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

@ -64,7 +64,7 @@ async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLE
<script lang="ts" setup>
import { onMounted, onUnmounted, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
import 'photoswipe/style.css';
@ -77,7 +77,7 @@ import { defaultStore } from '@/store';
import { getScrollContainer, getBodyScrollHeight } from '@/scripts/scroll';
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
mediaList: Misskey.entities.DriveFile[];
raw?: boolean;
}>();
@ -252,7 +252,7 @@ onUnmounted(() => {
lightbox = null;
});
const previewable = (file: misskey.entities.DriveFile): boolean => {
const previewable = (file: Misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);

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

@ -32,13 +32,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import bytes from '@/filters/bytes';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
const props = defineProps<{
video: misskey.entities.DriveFile;
video: Misskey.entities.DriveFile;
}>();
const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));

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

@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</I18n>
<div :class="$style.renoteInfo">
<button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()">
<i v-if="isMyRenote" class="ti ti-dots" :class="$style.renoteMenu"></i>
<i class="ti ti-dots" :class="$style.renoteMenu"></i>
<MkTime :time="note.createdAt"/>
</button>
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
@ -140,7 +140,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue';
import MkNoteHeader from '@/components/MkNoteHeader.vue';
import MkNoteSimple from '@/components/MkNoteSimple.vue';
@ -161,7 +161,7 @@ import { reactionPicker } from '@/scripts/reaction-picker';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
import { $i } from '@/account';
import { i18n } from '@/i18n';
import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu';
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu';
import { useNoteCapture } from '@/scripts/use-note-capture';
import { deepClone } from '@/scripts/clone';
import { useTooltip } from '@/scripts/use-tooltip';
@ -173,12 +173,12 @@ import { showMovedDialog } from '@/scripts/show-moved-dialog';
import { shouldCollapsed } from '@/scripts/collapsed';
const props = defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
pinned?: boolean;
}>();
const inChannel = inject('inChannel', null);
const currentClip = inject<Ref<misskey.entities.Clip> | null>('currentClip', null);
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
let note = $ref(deepClone(props.note));
@ -206,7 +206,7 @@ const renoteButton = shallowRef<HTMLElement>();
const renoteTime = shallowRef<HTMLElement>();
const reactButton = shallowRef<HTMLElement>();
const clipButton = shallowRef<HTMLElement>();
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
let appearNote = $computed(() => isRenote ? note.renote as Misskey.entities.Note : note);
const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false);
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
@ -319,9 +319,15 @@ function renote(viaKeyboard = false) {
const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
const localOnly = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
let visibility = appearNote.visibility;
visibility = smallerVisibility(visibility, configuredVisibility);
if (appearNote.channel?.isSensitive) {
visibility = smallerVisibility(visibility, 'home');
}
os.api('notes/create', {
localOnly,
visibility: smallerVisibility(appearNote.visibility, configuredVisibility),
visibility,
renoteId: appearNote.id,
}).then(() => {
os.toast(i18n.ts.renoted);
@ -425,21 +431,39 @@ async function clip() {
}
function showRenoteMenu(viaKeyboard = false): void {
if (!isMyRenote) return;
pleaseLogin();
os.popupMenu([{
text: i18n.ts.unrenote,
icon: 'ti ti-trash',
danger: true,
action: () => {
os.api('notes/delete', {
noteId: note.id,
});
isDeleted.value = true;
},
}], renoteTime.value, {
viaKeyboard: viaKeyboard,
});
function getUnrenote(): MenuItem {
return {
text: i18n.ts.unrenote,
icon: 'ti ti-trash',
danger: true,
action: () => {
os.api('notes/delete', {
noteId: note.id,
});
isDeleted.value = true;
},
};
}
if (isMyRenote) {
pleaseLogin();
os.popupMenu([
getCopyNoteLinkMenu(note, i18n.ts.copyLinkRenote),
null,
getUnrenote(),
], renoteTime.value, {
viaKeyboard: viaKeyboard,
});
} else {
os.popupMenu([
getCopyNoteLinkMenu(note, i18n.ts.copyLinkRenote),
null,
getAbuseNoteMenu(note, i18n.ts.reportAbuseRenote),
$i.isModerator || $i.isAdmin ? getUnrenote() : undefined,
], renoteTime.value, {
viaKeyboard: viaKeyboard,
});
}
}
function focus() {

10
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -141,7 +141,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, inject, onMounted, ref, shallowRef } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue';
import MkNoteSimple from '@/components/MkNoteSimple.vue';
import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
@ -171,7 +171,7 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/scripts/show-moved-dialog';
const props = defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
}>();
const inChannel = inject('inChannel', null);
@ -202,7 +202,7 @@ const renoteButton = shallowRef<HTMLElement>();
const renoteTime = shallowRef<HTMLElement>();
const reactButton = shallowRef<HTMLElement>();
const clipButton = shallowRef<HTMLElement>();
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
let appearNote = $computed(() => isRenote ? note.renote as Misskey.entities.Note : note);
const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false);
const isDeleted = ref(false);
@ -211,8 +211,8 @@ const translation = ref(null);
const translating = ref(false);
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
const conversation = ref<misskey.entities.Note[]>([]);
const replies = ref<misskey.entities.Note[]>([]);
const conversation = ref<Misskey.entities.Note[]>([]);
const replies = ref<Misskey.entities.Note[]>([]);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
const keymap = {

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

@ -30,13 +30,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { i18n } from '@/i18n';
import { notePage } from '@/filters/note';
import { userPage } from '@/filters/user';
defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
}>();
</script>

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

@ -23,14 +23,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkNoteHeader from '@/components/MkNoteHeader.vue';
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
import MkCwButton from '@/components/MkCwButton.vue';
import { $i } from '@/account';
const props = defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
}>();
const showContent = $ref(false);

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

@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkNoteHeader from '@/components/MkNoteHeader.vue';
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
import MkCwButton from '@/components/MkCwButton.vue';
@ -54,7 +54,7 @@ import { checkWordMute } from "@/scripts/check-word-mute";
import { defaultStore } from "@/store";
const props = withDefaults(defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
detail?: boolean;
// how many notes are in between this one and the note being viewed in detail
@ -66,7 +66,7 @@ const props = withDefaults(defineProps<{
const muted = ref(checkWordMute(props.note, $i, defaultStore.state.mutedWords));
let showContent = $ref(false);
let replies: misskey.entities.Note[] = $ref([]);
let replies: Misskey.entities.Note[] = $ref([]);
if (props.detail) {
os.api('notes/children', {

8
packages/frontend/src/components/MkNotification.vue
View file

@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.head">
<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
<img v-else-if="notification.type === 'test'" :class="$style.icon" :src="infoImageUrl"/>
<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
<div
@ -47,6 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<header :class="$style.header">
<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
<span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span>
<span v-else-if="notification.type === 'test'">{{ i18n.ts._notification.testNotification }}</span>
<MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
<span v-else>{{ notification.header }}</span>
<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
@ -91,6 +93,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton :class="$style.followRequestCommandButton" rounded danger @click="rejectFollowRequest()"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
</div>
</template>
<span v-else-if="notification.type === 'test'" :class="$style.text">{{ i18n.ts._notification.notificationWillBeDisplayedLikeThis }}</span>
<span v-else-if="notification.type === 'app'" :class="$style.text">
<Mfm :text="notification.body" :nowrap="false"/>
</span>
@ -101,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import XReactionTooltip from '@/components/MkReactionTooltip.vue';
@ -113,9 +116,10 @@ import { i18n } from '@/i18n';
import * as os from '@/os';
import { useTooltip } from '@/scripts/use-tooltip';
import { $i } from '@/account';
import { infoImageUrl } from '@/instance';
const props = withDefaults(defineProps<{
notification: misskey.entities.Notification;
notification: Misskey.entities.Notification;
withTime?: boolean;
full?: boolean;
}>(), {

47
packages/frontend/src/components/MkPagePreview.vue
View file

@ -5,7 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<div v-if="page.eyeCatchingImage" class="thumbnail">
<MediaImage
:image="page.eyeCatchingImage"
:disableImageLink="true"
:controls="false"
:cover="true"
:class="$style.eyeCatchingImageRoot"
/>
</div>
<article>
<header>
<h1 :title="page.title">{{ page.title }}</h1>
@ -21,14 +29,24 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { userName } from '@/filters/user';
import MediaImage from '@/components/MkMediaImage.vue';
const props = defineProps<{
page: misskey.entities.Page;
page: Misskey.entities.Page;
}>();
</script>
<style module>
.eyeCatchingImageRoot {
width: 100%;
height: 200px;
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
}
</style>
<style lang="scss" scoped>
.vhpxefrj {
display: block;
@ -39,32 +57,15 @@ const props = defineProps<{
}
> .thumbnail {
width: 100%;
height: 200px;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
> button {
font-size: 3.5em;
opacity: 0.7;
&:hover {
font-size: 4em;
opacity: 0.9;
}
}
& + article {
left: 100px;
width: calc(100% - 100px);
border-radius: 0 0 var(--radius) var(--radius);
}
}
> article {
background-color: var(--panel);
padding: 16px;
border-radius: var(--radius);
> header {
margin-bottom: 8px;

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

@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts">
import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';
import { useDocumentVisibility } from '@/scripts/use-document-visibility';
@ -57,10 +57,10 @@ const SECOND_FETCH_LIMIT = 30;
const TOLERANCE = 16;
const APPEAR_MINIMUM_INTERVAL = 600;
export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints> = {
endpoint: E;
limit: number;
params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
params?: Misskey.Endpoints[E]['req'] | ComputedRef<Misskey.Endpoints[E]['req']>;
/**
* 検索APIのような、ページング不可なエンドポイントを利用する場合

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

@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { sum } from '@/scripts/array';
import { pleaseLogin } from '@/scripts/please-login';
import * as os from '@/os';
@ -36,7 +36,7 @@ import { i18n } from '@/i18n';
import { useInterval } from '@/scripts/use-interval';
const props = defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
readOnly?: boolean;
}>();

35
packages/frontend/src/components/MkPostForm.vue
View file

@ -100,10 +100,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import insertTextAtCursor from 'insert-text-at-cursor';
import { toASCII } from 'punycode/';
import * as Acct from 'misskey-js/built/acct';
import MkNoteSimple from '@/components/MkNoteSimple.vue';
import MkNotePreview from '@/components/MkNotePreview.vue';
import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
@ -129,17 +128,17 @@ import { claimAchievement } from '@/scripts/achievements';
const modal = inject('modal');
const props = withDefaults(defineProps<{
reply?: misskey.entities.Note;
renote?: misskey.entities.Note;
channel?: misskey.entities.Channel; // TODO
mention?: misskey.entities.User;
specified?: misskey.entities.User;
reply?: Misskey.entities.Note;
renote?: Misskey.entities.Note;
channel?: Misskey.entities.Channel; // TODO
mention?: Misskey.entities.User;
specified?: Misskey.entities.User;
initialText?: string;
initialVisibility?: (typeof misskey.noteVisibilities)[number];
initialFiles?: misskey.entities.DriveFile[];
initialVisibility?: (typeof Misskey.noteVisibilities)[number];
initialFiles?: Misskey.entities.DriveFile[];
initialLocalOnly?: boolean;
initialVisibleUsers?: misskey.entities.User[];
initialNote?: misskey.entities.Note;
initialVisibleUsers?: Misskey.entities.User[];
initialNote?: Misskey.entities.Note;
instant?: boolean;
fixed?: boolean;
autofocus?: boolean;
@ -175,7 +174,7 @@ let showPreview = $ref(defaultStore.state.showPreview);
watch($$(showPreview), () => defaultStore.set('showPreview', showPreview));
let cw = $ref<string | null>(null);
let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof misskey.noteVisibilities[number]);
let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]);
let visibleUsers = $ref([]);
if (props.initialVisibleUsers) {
props.initialVisibleUsers.forEach(pushVisibleUser);
@ -416,7 +415,7 @@ function updateFileName(file, name) {
files[files.findIndex(x => x.id === file.id)].name = name;
}
function replaceFile(file: misskey.entities.DriveFile, newFile: misskey.entities.DriveFile): void {
function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void {
files[files.findIndex(x => x.id === file.id)] = newFile;
}
@ -516,7 +515,7 @@ function addVisibleUser() {
pushVisibleUser(user);
if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
text = `@${Acct.toString(user)} ${text}`;
text = `@${Misskey.acct.toString(user)} ${text}`;
}
});
}
@ -630,6 +629,8 @@ function onDrop(ev): void {
}
function saveDraft() {
if (props.instant) return;
const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
draftData[draftKey] = {
@ -761,7 +762,7 @@ async function post(ev?: MouseEvent) {
'https://youtu.be/Efrlqw8ytg4',
'https://www.youtube.com/watch?v=Efrlqw8ytg4',
'https://m.youtube.com/watch?v=Efrlqw8ytg4',
'https://youtu.be/XVCwzwxdHuA',
'https://www.youtube.com/watch?v=XVCwzwxdHuA',
'https://m.youtube.com/watch?v=XVCwzwxdHuA',
@ -804,7 +805,7 @@ function cancel() {
function insertMention() {
os.selectUser().then(user => {
insertTextAtCursor(textareaEl, '@' + Acct.toString(user) + ' ');
insertTextAtCursor(textareaEl, '@' + Misskey.acct.toString(user) + ' ');
});
}
@ -825,7 +826,7 @@ function showActions(ev) {
})), ev.currentTarget ?? ev.target);
}
let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
function openAccountMenu(ev: MouseEvent) {
openAccountMenu_({

12
packages/frontend/src/components/MkPostFormAttaches.vue
View file

@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
@ -36,9 +36,9 @@ const props = defineProps<{
const emit = defineEmits<{
(ev: 'update:modelValue', value: any[]): void;
(ev: 'detach', id: string): void;
(ev: 'changeSensitive', file: misskey.entities.DriveFile, isSensitive: boolean): void;
(ev: 'changeName', file: misskey.entities.DriveFile, newName: string): void;
(ev: 'replaceFile', file: misskey.entities.DriveFile, newFile: misskey.entities.DriveFile): void;
(ev: 'changeSensitive', file: Misskey.entities.DriveFile, isSensitive: boolean): void;
(ev: 'changeName', file: Misskey.entities.DriveFile, newName: string): void;
(ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void;
}>();
let menuShowing = false;
@ -92,12 +92,12 @@ async function describe(file) {
}, 'closed');
}
async function crop(file: misskey.entities.DriveFile): Promise<void> {
async function crop(file: Misskey.entities.DriveFile): Promise<void> {
const newFile = await os.cropImage(file, { aspectRatio: NaN });
emit('replaceFile', file, newFile);
}
function showFileMenu(file: misskey.entities.DriveFile, ev: MouseEvent): void {
function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
if (menuShowing) return;
const isImage = file.type.startsWith('image/');

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

@ -11,22 +11,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkModal from '@/components/MkModal.vue';
import MkPostForm from '@/components/MkPostForm.vue';
const props = defineProps<{
reply?: misskey.entities.Note;
renote?: misskey.entities.Note;
reply?: Misskey.entities.Note;
renote?: Misskey.entities.Note;
channel?: any; // TODO
mention?: misskey.entities.User;
specified?: misskey.entities.User;
mention?: Misskey.entities.User;
specified?: Misskey.entities.User;
initialText?: string;
initialVisibility?: typeof misskey.noteVisibilities;
initialFiles?: misskey.entities.DriveFile[];
initialVisibility?: typeof Misskey.noteVisibilities;
initialFiles?: Misskey.entities.DriveFile[];
initialLocalOnly?: boolean;
initialVisibleUsers?: misskey.entities.User[];
initialNote?: misskey.entities.Note;
initialVisibleUsers?: Misskey.entities.User[];
initialNote?: Misskey.entities.Note;
instant?: boolean;
fixed?: boolean;
autofocus?: boolean;

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

@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted, watch } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkUserCardMini from '@/components/MkUserCardMini.vue';
@ -54,12 +54,12 @@ const emit = defineEmits<{
}>();
const props = defineProps<{
noteId: misskey.entities.Note['id'];
noteId: Misskey.entities.Note['id'];
}>();
const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let note = $ref<misskey.entities.Note>();
let note = $ref<Misskey.entities.Note>();
let tab = $ref<string>();
let reactions = $ref<string[]>();
let users = $ref();

38
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="buttonEl"
v-ripple="canToggle"
class="_button"
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]"
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
@click="toggleReaction()"
>
<MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, onMounted, shallowRef, watch } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import XDetails from '@/components/MkReactionsViewer.details.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import * as os from '@/os';
@ -33,7 +33,7 @@ const props = defineProps<{
reaction: string;
count: number;
isInitial: boolean;
note: misskey.entities.Note;
note: Misskey.entities.Note;
}>();
const buttonEl = shallowRef<HTMLElement>();
@ -115,10 +115,11 @@ useTooltip(buttonEl, async (showing) => {
<style lang="scss" module>
.root {
display: inline-block;
height: 32px;
height: 42px;
margin: 2px;
padding: 0 6px;
border-radius: 4px;
font-size: 1.5em;
border-radius: 6px;
&.canToggle {
background: var(--buttonBg);
@ -132,14 +133,25 @@ useTooltip(buttonEl, async (showing) => {
cursor: default;
}
&.large {
height: 42px;
font-size: 1.5em;
border-radius: 6px;
&.small {
height: 32px;
font-size: 1em;
border-radius: 4px;
> .count {
font-size: 0.7em;
line-height: 42px;
font-size: 0.9em;
line-height: 32px;
}
}
&.large {
height: 52px;
font-size: 2em;
border-radius: 8px;
> .count {
font-size: 0.6em;
line-height: 52px;
}
}
@ -159,8 +171,8 @@ useTooltip(buttonEl, async (showing) => {
}
.count {
font-size: 0.9em;
line-height: 32px;
font-size: 0.7em;
line-height: 42px;
margin: 0 0 0 4px;
}
</style>

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

@ -18,13 +18,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { watch } from 'vue';
import XReaction from '@/components/MkReactionsViewer.reaction.vue';
import { defaultStore } from '@/store';
const props = withDefaults(defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
maxNumber?: number;
}>(), {
maxNumber: Infinity,

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

@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkUserCardMini from '@/components/MkUserCardMini.vue';
import { userPage } from '@/filters/user';
@ -47,12 +47,12 @@ const emit = defineEmits<{
}>();
const props = defineProps<{
noteId: misskey.entities.Note['id'];
noteId: Misskey.entities.Note['id'];
}>();
const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let note = $ref<misskey.entities.Note>();
let note = $ref<Misskey.entities.Note>();
let renotes = $ref();
let users = $ref();

113
packages/frontend/src/components/MkSignin.vue
View file

@ -6,16 +6,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<form :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="_gaps_m">
<div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : undefined, marginBottom: message ? '1.5em' : undefined }"></div>
<MkInfo v-if="message">
{{ message }}
</MkInfo>
<div v-if="!totpLogin" class="normal-signin _gaps_m">
<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password" :withPasswordToggle="true" required data-cy-signin-password>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required data-cy-signin-password>
<template #prefix><i class="ti ti-lock"></i></template>
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
</MkInput>
@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
<div v-if="user && user.securityKeys" class="twofa-group tap-group">
<p>{{ i18n.ts.tapSecurityKey }}</p>
<p>{{ i18n.ts.useSecurityKey }}</p>
<MkButton v-if="!queryingKey" @click="queryKey">
{{ i18n.ts.retry }}
</MkButton>
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<p class="or-msg">{{ i18n.ts.or }}</p>
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
<p style="margin-bottom:0;">{{ i18n.ts['2fa'] }}</p>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :withPasswordToggle="true" required>
<template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template>
@ -51,32 +51,29 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { toUnicode } from 'punycode/';
import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
import { UserDetailed } from 'misskey-js/built/entities';
import { supported as webAuthnSupported, get as webAuthnRequest, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
import { showSuspendedDialog } from '@/scripts/show-suspended-dialog';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkInfo from '@/components/MkInfo.vue';
import { host as configHost } from '@/config';
import { byteify, hexify } from '@/scripts/2fa';
import * as os from '@/os';
import { login } from '@/account';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
let signing = $ref(false);
let user = $ref(null);
let user = $ref<UserDetailed | null>(null);
let username = $ref('');
let password = $ref('');
let token = $ref('');
let host = $ref(toUnicode(configHost));
let totpLogin = $ref(false);
let credential = $ref(null);
let challengeData = $ref(null);
let queryingKey = $ref(false);
let credentialRequest = $ref<CredentialRequestOptions | null>(null);
let hCaptchaResponse = $ref(null);
let reCaptchaResponse = $ref(null);
const meta = $computed(() => instance);
const emit = defineEmits<{
(ev: 'login', v: any): void;
}>();
@ -99,7 +96,7 @@ const props = defineProps({
},
});
function onUsernameChange() {
function onUsernameChange(): void {
os.api('users/show', {
username: username,
}).then(userResponse => {
@ -109,58 +106,46 @@ function onUsernameChange() {
});
}
function onLogin(res) {
function onLogin(res: any): Promise<void> | void {
if (props.autoSet) {
return login(res.i);
}
}
function queryKey() {
async function queryKey(): Promise<void> {
queryingKey = true;
return navigator.credentials.get({
publicKey: {
challenge: byteify(challengeData.challenge, 'base64'),
allowCredentials: challengeData.securityKeys.map(key => ({
id: byteify(key.id, 'hex'),
type: 'public-key',
transports: ['usb', 'nfc', 'ble', 'internal'],
})),
timeout: 60 * 1000,
},
}).catch(() => {
queryingKey = false;
return Promise.reject(null);
}).then(credential => {
queryingKey = false;
signing = true;
return os.api('signin', {
username,
password,
signature: hexify(credential.response.signature),
authenticatorData: hexify(credential.response.authenticatorData),
clientDataJSON: hexify(credential.response.clientDataJSON),
credentialId: credential.id,
challengeId: challengeData.challengeId,
'hcaptcha-response': hCaptchaResponse,
'g-recaptcha-response': reCaptchaResponse,
await webAuthnRequest(credentialRequest)
.catch(() => {
queryingKey = false;
return Promise.reject(null);
}).then(credential => {
credentialRequest = null;
queryingKey = false;
signing = true;
return os.api('signin', {
username,
password,
credential: credential.toJSON(),
'hcaptcha-response': hCaptchaResponse,
'g-recaptcha-response': reCaptchaResponse,
});
}).then(res => {
emit('login', res);
return onLogin(res);
}).catch(err => {
if (err === null) return;
os.alert({
type: 'error',
text: i18n.ts.signinFailed,
});
signing = false;
});
}).then(res => {
emit('login', res);
return onLogin(res);
}).catch(err => {
if (err === null) return;
os.alert({
type: 'error',
text: i18n.ts.signinFailed,
});
signing = false;
});
}
function onSubmit() {
function onSubmit(): void {
signing = true;
if (!totpLogin && user && user.twoFactorEnabled) {
if (window.PublicKeyCredential && user.securityKeys) {
if (webAuthnSupported() && user.securityKeys) {
os.api('signin', {
username,
password,
@ -169,9 +154,12 @@ function onSubmit() {
}).then(res => {
totpLogin = true;
signing = false;
challengeData = res;
return queryKey();
}).catch(loginFailed);
credentialRequest = parseRequestOptionsFromJSON({
publicKey: res,
});
})
.then(() => queryKey())
.catch(loginFailed);
} else {
totpLogin = true;
signing = false;
@ -182,7 +170,7 @@ function onSubmit() {
password,
'hcaptcha-response': hCaptchaResponse,
'g-recaptcha-response': reCaptchaResponse,
token: user && user.twoFactorEnabled ? token : undefined,
token: user?.twoFactorEnabled ? token : undefined,
}).then(res => {
emit('login', res);
onLogin(res);
@ -190,7 +178,7 @@ function onSubmit() {
}
}
function loginFailed(err) {
function loginFailed(err: any): void {
switch (err.id) {
case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
os.alert({
@ -221,7 +209,7 @@ function loginFailed(err) {
break;
}
default: {
console.log(err);
console.error(err);
os.alert({
type: 'error',
title: i18n.ts.loginFailed,
@ -230,12 +218,11 @@ function loginFailed(err) {
}
}
challengeData = null;
totpLogin = false;
signing = false;
}
function resetPassword() {
function resetPassword(): void {
os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
}, 'closed');
}

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

@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkMediaList from '@/components/MkMediaList.vue';
import MkPoll from '@/components/MkPoll.vue';
import { i18n } from '@/i18n';
@ -39,7 +39,7 @@ import { $i } from '@/account';
import { shouldCollapsed } from '@/scripts/collapsed';
const props = defineProps<{
note: misskey.entities.Note;
note: Misskey.entities.Note;
}>();
const isLong = shouldCollapsed(props.note);

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

@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import { permissions as kinds } from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkInput from './MkInput.vue';
import MkSwitch from './MkSwitch.vue';
import MkButton from './MkButton.vue';
@ -74,7 +74,7 @@ if (props.initialPermissions) {
permissions[kind] = true;
}
} else {
for (const kind of kinds) {
for (const kind of Misskey.permissions) {
permissions[kind] = false;
}
}

3
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<div v-else>
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" :class="$style.thumbnail" :style="`background-image: url('${thumbnail}')`">
<div v-if="thumbnail" :class="$style.thumbnail" :style="defaultStore.state.enableDataSaverMode ? '' : `background-image: url('${thumbnail}')`">
</div>
<article :class="$style.body">
<header :class="$style.header">
@ -260,6 +260,7 @@ onUnmounted(() => {
height: 100%;
background-position: center;
background-size: cover;
background-color: var(--bg);
display: flex;
justify-content: center;
align-items: center;

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

@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
@ -62,7 +62,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkRadios from '@/components/MkRadios.vue';
const props = defineProps<{
user: misskey.entities.User,
user: Misskey.entities.User,
announcement?: any,
}>();

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

@ -15,14 +15,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { onMounted } from 'vue';
import MkMiniChart from '@/components/MkMiniChart.vue';
import * as os from '@/os';
import { acct } from '@/filters/user';
const props = withDefaults(defineProps<{
user: misskey.entities.User;
user: Misskey.entities.User;
withChart: boolean;
}>(), {
withChart: true,

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

@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkFollowButton from '@/components/MkFollowButton.vue';
import number from '@/filters/number';
import { userPage } from '@/filters/user';
@ -43,7 +43,7 @@ import { $i } from '@/account';
import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe';
defineProps<{
user: misskey.entities.UserDetailed;
user: Misskey.entities.UserDetailed;
}>();
</script>

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

@ -17,11 +17,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { i18n } from '@/i18n';
const props = defineProps<{
user: misskey.entities.User;
user: Misskey.entities.User;
}>();
const text = $computed(() => {

7
packages/frontend/src/components/MkUserPopup.vue
View file

@ -56,8 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as Acct from 'misskey-js/built/acct';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkFollowButton from '@/components/MkFollowButton.vue';
import { userPage } from '@/filters/user';
import * as os from '@/os';
@ -81,7 +80,7 @@ const emit = defineEmits<{
}>();
const zIndex = os.claimZIndex('middle');
let user = $ref<misskey.entities.UserDetailed | null>(null);
let user = $ref<Misskey.entities.UserDetailed | null>(null);
let top = $ref(0);
let left = $ref(0);
@ -95,7 +94,7 @@ onMounted(() => {
user = props.q;
} else {
const query = props.q.startsWith('@') ?
Acct.parse(props.q.substring(1)) :
Misskey.acct.parse(props.q.substring(1)) :
{ userId: props.q };
os.api('users/show', query).then(res => {

10
packages/frontend/src/components/MkUserSelectDialog.vue
View file

@ -58,7 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkInput from '@/components/MkInput.vue';
import FormSplit from '@/components/form/split.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
@ -69,7 +69,7 @@ import { $i } from '@/account';
import { hostname } from '@/config';
const emit = defineEmits<{
(ev: 'ok', selected: misskey.entities.UserDetailed): void;
(ev: 'ok', selected: Misskey.entities.UserDetailed): void;
(ev: 'cancel'): void;
(ev: 'closed'): void;
}>();
@ -80,9 +80,9 @@ const props = defineProps<{
let username = $ref('');
let host = $ref('');
let users: misskey.entities.UserDetailed[] = $ref([]);
let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
let selected: misskey.entities.UserDetailed | null = $ref(null);
let users: Misskey.entities.UserDetailed[] = $ref([]);
let recentUsers: Misskey.entities.UserDetailed[] = $ref([]);
let selected: Misskey.entities.UserDetailed | null = $ref(null);
let dialogEl = $ref();
const search = () => {

4
packages/frontend/src/components/MkUserSetupDialog.User.vue
View file

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { ref } from 'vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n';
@ -33,7 +33,7 @@ import { $i } from '@/account';
import * as os from '@/os';
const props = defineProps<{
user: misskey.entities.UserDetailed;
user: Misskey.entities.UserDetailed;
}>();
const isFollowing = ref(false);

8
packages/frontend/src/components/MkVisibilityPicker.vue
View file

@ -43,27 +43,27 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { nextTick } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkModal from '@/components/MkModal.vue';
import { i18n } from '@/i18n';
const modal = $shallowRef<InstanceType<typeof MkModal>>();
const props = withDefaults(defineProps<{
currentVisibility: typeof misskey.noteVisibilities[number];
currentVisibility: typeof Misskey.noteVisibilities[number];
localOnly: boolean;
src?: HTMLElement;
}>(), {
});
const emit = defineEmits<{
(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
(ev: 'changeVisibility', v: typeof Misskey.noteVisibilities[number]): void;
(ev: 'closed'): void;
}>();
let v = $ref(props.currentVisibility);
function choose(visibility: typeof misskey.noteVisibilities[number]): void {
function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
v = visibility;
emit('changeVisibility', visibility);
nextTick(() => {

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

@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import { Instance } from 'misskey-js/built/entities';
import * as Misskey from 'misskey-js';
import XTimeline from './welcome.timeline.vue';
import XSigninDialog from '@/components/MkSigninDialog.vue';
import XSignupDialog from '@/components/MkSignupDialog.vue';
@ -67,7 +67,7 @@ import number from '@/filters/number';
import MkNumber from '@/components/MkNumber.vue';
import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
let meta = $ref<Instance>();
let meta = $ref<Misskey.entities.Instance>();
let stats = $ref(null);
os.api('meta', { detail: true }).then(_meta => {

4
packages/frontend/src/components/global/MkAcct.vue
View file

@ -15,14 +15,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import { toUnicode } from 'punycode/';
import MkCondensedLine from './MkCondensedLine.vue';
import { host as hostRaw } from '@/config';
import { defaultStore } from '@/store';
defineProps<{
user: misskey.entities.UserDetailed;
user: Misskey.entities.UserDetailed;
detail?: boolean;
}>();

4
packages/frontend/src/components/global/MkAvatar.vue
View file

@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { watch } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
import MkImgWithBlurhash from '../MkImgWithBlurhash.vue';
import MkA from './MkA.vue';
import { getStaticImageUrl } from '@/scripts/media-proxy';
@ -42,7 +42,7 @@ const squareAvatars = $ref(defaultStore.state.squareAvatars);
const useBlurEffect = $ref(defaultStore.state.useBlurEffect);
const props = withDefaults(defineProps<{
user: misskey.entities.User;
user: Misskey.entities.User;
target?: string | null;
link?: boolean;
preview?: boolean;

4
packages/frontend/src/components/global/MkUserName.vue
View file

@ -9,10 +9,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as Misskey from 'misskey-js';
const props = withDefaults(defineProps<{
user: misskey.entities.User;
user: Misskey.entities.User;
nowrap?: boolean;
}>(), {
nowrap: true,

12
packages/frontend/src/components/page/page.image.vue
View file

@ -5,20 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<ImgWithBlurhash v-if="image" style="max-width: 100%;" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
<MediaImage
v-if="image"
:image="image"
:disableImageLink="true"
/>
</div>
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import { ImageBlock } from './block.type';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import MediaImage from '@/components/MkMediaImage.vue';
const props = defineProps<{
block: ImageBlock,
page: Misskey.entities.Page,
}>();
const image = props.page.attachedFiles.find(x => x.id === props.block.fileId);
const image = ref<Misskey.entities.DriveFile>(props.page.attachedFiles.find(x => x.id === props.block.fileId));
</script>

2
packages/frontend/src/components/page/page.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }">
<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }" class="_gaps_s">
<XBlock v-for="child in page.content" :key="child.id" :page="page" :block="child" :h="2"/>
</div>
</template>