iceshrimp/packages/client/src/components/MkNoteDetailed.vue

621 lines
12 KiB
Vue
Raw Normal View History

<template>
2023-04-08 09:01:42 +09:00
<div
v-if="!muted.muted"
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="lxwezrsl _block"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
<MkNoteSub
v-for="note in conversation"
:key="note.id"
class="reply-to-more"
:note="note"
/>
<MkNoteSub
v-if="appearNote.reply"
:note="appearNote.reply"
class="reply-to"
/>
2023-04-23 09:22:53 +09:00
<div ref="noteEl" class="article" tabindex="-1">
<MkNote
@contextmenu.stop="onContextmenu"
tabindex="-1"
:note="appearNote"
:detailedView="true"
></MkNote>
2023-04-08 09:01:42 +09:00
</div>
2023-04-08 09:01:42 +09:00
<MkNoteSub
v-for="note in directReplies"
:key="note.id"
:note="note"
class="reply"
:conversation="replies"
/>
</div>
<div v-else class="_panel muted" @click="muted.muted = false">
2023-05-04 14:13:13 +09:00
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
2023-04-08 09:01:42 +09:00
<template #name>
<MkA
v-user-preview="appearNote.userId"
class="name"
:to="userPage(appearNote.user)"
>
<MkUserName :user="appearNote.user" />
</MkA>
</template>
<template #reason>
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
</template>
</I18n>
</div>
</template>
<script lang="ts" setup>
2023-04-08 09:01:42 +09:00
import {
computed,
inject,
onMounted,
onUnmounted,
onUpdated,
reactive,
ref,
} from "vue";
import * as mfm from "mfm-js";
import type * as misskey from "calckey-js";
import MkNote from "@/components/MkNote.vue";
2023-04-08 09:01:42 +09:00
import MkNoteSub from "@/components/MkNoteSub.vue";
import XNoteSimple from "@/components/MkNoteSimple.vue";
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
import XMediaList from "@/components/MkMediaList.vue";
import XCwButton from "@/components/MkCwButton.vue";
import XPoll from "@/components/MkPoll.vue";
import XStarButton from "@/components/MkStarButton.vue";
import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
2023-04-08 09:01:42 +09:00
import XRenoteButton from "@/components/MkRenoteButton.vue";
import XQuoteButton from "@/components/MkQuoteButton.vue";
import MkUrlPreview from "@/components/MkUrlPreview.vue";
import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
import MkVisibility from "@/components/MkVisibility.vue";
import { pleaseLogin } from "@/scripts/please-login";
import { getWordSoftMute } from "@/scripts/check-word-mute";
2023-04-08 09:01:42 +09:00
import { userPage } from "@/filters/user";
import { notePage } from "@/filters/note";
import { useRouter } from "@/router";
import * as os from "@/os";
import { defaultStore, noteViewInterruptors } from "@/store";
import { reactionPicker } from "@/scripts/reaction-picker";
import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
import { $i } from "@/account";
import { i18n } from "@/i18n";
import { getNoteMenu } from "@/scripts/get-note-menu";
import { useNoteCapture } from "@/scripts/use-note-capture";
import { deepClone } from "@/scripts/clone";
import { stream } from "@/stream";
import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
const router = useRouter();
const props = defineProps<{
note: misskey.entities.Note;
pinned?: boolean;
}>();
2023-04-08 09:01:42 +09:00
const inChannel = inject("inChannel", null);
let note = $ref(deepClone(props.note));
2022-03-05 01:23:34 +09:00
2023-05-04 14:13:13 +09:00
const softMuteReasonI18nSrc = (what?: string) => {
if (what === "note")
return i18n.ts.userSaysSomethingReason;
if (what === "reply")
return i18n.ts.userSaysSomethingReasonReply;
if (what === "renote")
return i18n.ts.userSaysSomethingReasonRenote;
if (what === "quote")
return i18n.ts.userSaysSomethingReasonQuote;
// I don't think here is reachable, but just in case
return i18n.ts.userSaysSomething;
}
const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
2022-03-05 01:23:34 +09:00
// plugin
if (noteViewInterruptors.length > 0) {
onMounted(async () => {
let result = deepClone(note);
2022-03-05 01:23:34 +09:00
for (const interruptor of noteViewInterruptors) {
result = await interruptor.handler(result);
}
note = result;
});
}
2023-04-08 09:01:42 +09:00
const isRenote =
note.renote != null &&
note.text == null &&
note.fileIds.length === 0 &&
2023-04-08 09:01:42 +09:00
note.poll == null;
const el = ref<HTMLElement>();
const noteEl = $ref();
const menuButton = ref<HTMLElement>();
2022-10-26 12:20:41 +09:00
const starButton = ref<InstanceType<typeof XStarButton>>();
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
const renoteTime = ref<HTMLElement>();
const reactButton = ref<HTMLElement>();
2023-04-08 09:01:42 +09:00
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);
const muted = ref(getWordSoftMute(appearNote, $i, defaultStore.state.mutedWords));
const translation = ref(null);
const translating = ref(false);
2023-04-08 09:01:42 +09:00
const urls = appearNote.text
? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
: 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 directReplies = ref<misskey.entities.Note[]>([]);
let isScrolling;
const keymap = {
2023-04-08 09:01:42 +09:00
r: () => reply(true),
"e|a|plus": () => react(true),
q: () => renoteButton.value.renote(true),
esc: blur,
"m|o": () => menu(true),
s: () => showContent.value !== showContent.value,
};
useNoteCapture({
rootEl: el,
note: $$(appearNote),
isDeletedRef: isDeleted,
});
function reply(viaKeyboard = false): void {
pleaseLogin();
2023-05-01 01:29:50 +09:00
os.post({
reply: appearNote,
animation: !viaKeyboard,
}).then(() => {
focus();
});
}
function react(viaKeyboard = false): void {
pleaseLogin();
blur();
2023-04-08 09:01:42 +09:00
reactionPicker.show(
reactButton.value,
(reaction) => {
os.api("notes/reactions/create", {
noteId: appearNote.id,
reaction: reaction,
});
},
() => {
focus();
}
);
}
function undoReact(note): void {
const oldReaction = note.myReaction;
if (!oldReaction) return;
2023-04-08 09:01:42 +09:00
os.api("notes/reactions/delete", {
2022-06-05 12:26:36 +09:00
noteId: note.id,
});
}
2022-01-18 21:35:57 +09:00
function onContextmenu(ev: MouseEvent): void {
const isLink = (el: HTMLElement) => {
2023-04-08 09:01:42 +09:00
if (el.tagName === "A") return true;
if (el.parentElement) {
return isLink(el.parentElement);
}
};
2022-01-18 21:35:57 +09:00
if (isLink(ev.target)) return;
2023-04-08 09:01:42 +09:00
if (window.getSelection().toString() !== "") return;
if (defaultStore.state.useReactionPickerForContextMenu) {
2022-01-18 21:35:57 +09:00
ev.preventDefault();
react();
} else {
2023-04-08 09:01:42 +09:00
os.contextMenu(
getNoteMenu({
note: note,
translating,
translation,
menuButton,
isDeleted,
}),
ev
).then(focus);
}
}
function menu(viaKeyboard = false): void {
2023-04-08 09:01:42 +09:00
os.popupMenu(
getNoteMenu({
note: note,
translating,
translation,
menuButton,
isDeleted,
}),
menuButton.value,
{
viaKeyboard,
}
).then(focus);
}
function showRenoteMenu(viaKeyboard = false): void {
if (!isMyRenote) return;
2023-04-08 09:01:42 +09:00
os.popupMenu(
[
{
text: i18n.ts.unrenote,
icon: "ph-trash ph-bold ph-lg",
danger: true,
action: () => {
os.api("notes/delete", {
noteId: note.id,
});
isDeleted.value = true;
},
},
],
renoteTime.value,
{
viaKeyboard: viaKeyboard,
}
);
}
function focus() {
noteEl.focus();
}
function blur() {
noteEl.blur();
}
2023-04-08 09:01:42 +09:00
os.api("notes/children", {
noteId: appearNote.id,
2022-07-26 05:41:45 +09:00
limit: 30,
2023-02-25 01:55:51 +09:00
depth: 12,
2023-04-08 09:01:42 +09:00
}).then((res) => {
replies.value = res;
2023-04-08 09:01:42 +09:00
directReplies.value = res
.filter(
(note) =>
note.replyId === appearNote.id ||
note.renoteId === appearNote.id
)
.reverse();
});
if (appearNote.replyId) {
2023-04-08 09:01:42 +09:00
os.api("notes/conversation", {
2022-06-05 12:26:36 +09:00
noteId: appearNote.replyId,
limit: 30,
2023-04-08 09:01:42 +09:00
}).then((res) => {
conversation.value = res.reverse();
focus();
});
}
2023-05-01 01:29:50 +09:00
async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
const { type, id, body } = noteData;
2023-05-01 01:29:50 +09:00
let found = -1;
if (id === appearNote.id) {
found = 0;
} else {
for (let i = 0; i < replies.value.length; i++) {
const reply = replies.value[i];
if (reply.id === id) {
found = i + 1;
break;
}
}
}
if (found === -1) {
return;
}
switch (type) {
case "replied":
const { id: createdId } = body;
const replyNote = await os.api("notes/show", {
noteId: createdId,
});
replies.value.splice(found, 0, replyNote);
if (found === 0) {
directReplies.value.unshift(replyNote);
}
break;
case "deleted":
if (found === 0) {
isDeleted.value = true;
} else {
replies.value.splice(found - 1, 1);
}
2023-05-01 01:29:50 +09:00
break;
}
}
document.addEventListener("wheel", () => {
isScrolling = true;
2023-04-08 09:01:42 +09:00
});
onMounted(() => {
2023-05-01 01:29:50 +09:00
stream.on("noteUpdated", onNoteUpdated);
isScrolling = false;
2023-05-01 01:29:50 +09:00
noteEl?.scrollIntoView();
});
onUpdated(() => {
if (!isScrolling) {
2023-05-01 01:29:50 +09:00
noteEl?.scrollIntoView();
}
2023-04-08 09:01:42 +09:00
});
onUnmounted(() => {
2023-05-01 01:29:50 +09:00
stream.off("noteUpdated", onNoteUpdated);
});
</script>
<style lang="scss" scoped>
2021-08-16 15:21:58 +09:00
.lxwezrsl {
font-size: 1.05em;
position: relative;
transition: box-shadow 0.1s ease;
contain: content;
&:focus-visible {
outline: none;
&:after {
content: "";
pointer-events: none;
display: block;
position: absolute;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
2022-07-29 01:25:11 +09:00
border: solid 1px var(--focus);
border-radius: var(--radius);
box-sizing: border-box;
}
}
&:hover > .article > .main > .footer > .button {
opacity: 1;
}
> .reply-to {
2023-01-07 08:58:52 +09:00
margin-bottom: -16px;
}
> .reply-to-more {
2023-01-07 08:58:52 +09:00
// opacity: 0.7;
2022-11-25 06:55:23 +09:00
cursor: pointer;
2022-12-02 15:39:50 +09:00
@media (pointer: coarse) {
cursor: default;
}
}
> .renote {
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
> .avatar {
flex-shrink: 0;
display: inline-block;
width: 28px;
height: 28px;
margin: 0 8px 0 0;
border-radius: 6px;
}
> i {
margin-right: 4px;
}
> span {
overflow: hidden;
flex-shrink: 1;
text-overflow: ellipsis;
white-space: nowrap;
> .name {
font-weight: bold;
}
}
> .info {
margin-left: auto;
font-size: 0.9em;
> .time {
flex-shrink: 0;
color: inherit;
> .dropdownIcon {
margin-right: 4px;
}
}
}
}
> .renote + .article {
padding-top: 8px;
}
> .article {
padding-block: 28px 6px;
2023-02-26 09:59:58 +09:00
&:last-child {
padding-bottom: 24px;
}
font-size: 1.1em;
overflow: clip;
outline: none;
scroll-margin-top: calc(var(--stickyTop) + 20vh);
:deep(.article) {
cursor: unset;
}
}
> .reply {
border-top: solid 0.5px var(--divider);
2022-11-25 06:55:23 +09:00
cursor: pointer;
2023-02-26 09:59:58 +09:00
padding-top: 24px;
padding-bottom: 10px;
2022-12-02 15:39:50 +09:00
@media (pointer: coarse) {
cursor: default;
}
2022-08-17 16:36:29 +09:00
}
2023-02-25 14:19:39 +09:00
// Hover
2023-04-08 09:01:42 +09:00
.reply :deep(.main),
.reply-to,
.reply-to-more,
:deep(.more) {
2023-02-25 14:19:39 +09:00
position: relative;
&::before {
content: "";
position: absolute;
inset: -12px -24px;
bottom: -0px;
background: var(--panelHighlight);
border-radius: var(--radius);
opacity: 0;
2023-04-08 09:01:42 +09:00
transition: opacity 0.2s;
2023-02-25 14:19:39 +09:00
z-index: -1;
}
2023-04-08 09:01:42 +09:00
&.reply-to,
&.reply-to-more {
2023-02-25 14:19:39 +09:00
&::before {
inset: 0px 8px;
}
2023-02-26 02:36:57 +09:00
&:first-of-type::before {
top: 12px;
}
}
// &::after {
// content: "";
// position: absolute;
// inset: -9999px;
// background: var(--modalBg);
// opacity: 0;
// z-index: -2;
// pointer-events: none;
// transition: opacity .2s;
// }
2023-02-25 14:19:39 +09:00
&.more::before {
inset: 0 !important;
}
2023-04-08 09:01:42 +09:00
&:hover,
&:focus-within {
2023-02-25 14:19:39 +09:00
&::before {
opacity: 1;
}
}
// @media (pointer: coarse) {
// &:has(.button:focus-within) {
// z-index: 2;
// --X13: transparent;
// &::after {
// opacity: 1;
// backdrop-filter: var(--modalBgFilter);
// }
// }
// }
}
&.max-width_500px {
font-size: 0.9em;
}
2023-04-08 09:01:42 +09:00
&.max-width_450px {
2023-01-08 16:30:42 +09:00
> .reply-to-more:first-child {
padding-top: 14px;
}
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
padding: 6px 0 0 0;
2023-01-07 08:58:52 +09:00
> .header > .body {
padding-left: 10px;
}
}
}
&.max-width_350px {
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
}
}
&.max-width_300px {
font-size: 0.825em;
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
}
}
.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
}
</style>