250 lines
8.5 KiB
TypeScript
250 lines
8.5 KiB
TypeScript
import { onUnmounted, Ref } from "vue";
|
||
import * as misskey from "calckey-js";
|
||
import { stream } from "@/stream";
|
||
import { $i } from "@/account";
|
||
import * as os from "@/os";
|
||
import { endpoints, packed } from "magnetar-common";
|
||
import {
|
||
magConvertReaction,
|
||
magReactionIndex,
|
||
noteIsMag,
|
||
} from "@/scripts-mag/mag-util";
|
||
|
||
export function useNoteCapture(props: {
|
||
rootEl: Ref<HTMLElement>;
|
||
note: Ref<packed.PackNoteMaybeFull | misskey.entities.Note>;
|
||
isDeletedRef: Ref<boolean>;
|
||
}) {
|
||
const note = props.note;
|
||
const connection = $i ? stream : null;
|
||
|
||
async function onStreamNoteUpdated(noteData): Promise<void> {
|
||
const { type, id, body } = noteData;
|
||
|
||
if (id !== note.value.id) return;
|
||
|
||
if (noteIsMag(note.value)) {
|
||
switch (type) {
|
||
case "reacted": {
|
||
const reaction = body.reaction as string;
|
||
|
||
if (body.emoji) {
|
||
const emojis = note.value.emojis || [];
|
||
if (!emojis.includes(body.emoji)) {
|
||
note.value.emojis = [
|
||
...emojis,
|
||
{
|
||
id: body.emoji.id,
|
||
shortcode: body.emoji.name,
|
||
url: body.emoji.url,
|
||
width: body.emoji.width ?? null,
|
||
height: body.emoji.height ?? null,
|
||
category: null,
|
||
},
|
||
];
|
||
}
|
||
}
|
||
|
||
const reactionType = magConvertReaction(reaction);
|
||
const foundReaction = magReactionIndex(
|
||
note.value.reactions,
|
||
reactionType
|
||
);
|
||
|
||
const selfReact = ($i && body.userId === $i.id) || false;
|
||
if (foundReaction >= 0) {
|
||
note.value.reactions[foundReaction] = [
|
||
note.value.reactions[foundReaction][0],
|
||
note.value.reactions[foundReaction][1] + 1,
|
||
selfReact,
|
||
];
|
||
} else {
|
||
note.value.reactions.push([reactionType, 1, selfReact]);
|
||
}
|
||
break;
|
||
}
|
||
|
||
case "unreacted": {
|
||
const reaction = body.reaction;
|
||
|
||
const reactionType = magConvertReaction(reaction);
|
||
const foundReaction = magReactionIndex(
|
||
note.value.reactions,
|
||
reactionType
|
||
);
|
||
|
||
if (foundReaction >= 0) {
|
||
const cnt = note.value.reactions[foundReaction][1];
|
||
note.value.reactions[foundReaction] = [
|
||
note.value.reactions[foundReaction][0],
|
||
cnt === 0 ? 0 : cnt - 1,
|
||
false,
|
||
];
|
||
}
|
||
|
||
break;
|
||
}
|
||
|
||
case "pollVoted": {
|
||
const choice = body.choice;
|
||
|
||
if (note.value.poll) {
|
||
const options = [...note.value.poll.options];
|
||
options[choice] = {
|
||
...options[choice],
|
||
votes_count: options[choice].votes_count + 1,
|
||
voted: ($i && body.userId === $i.id) || null,
|
||
};
|
||
note.value.poll.options = options;
|
||
}
|
||
|
||
break;
|
||
}
|
||
|
||
case "deleted": {
|
||
props.isDeletedRef.value = true;
|
||
break;
|
||
}
|
||
|
||
case "updated": {
|
||
const editedNote = await os.magApi(
|
||
endpoints.GetNoteById,
|
||
{
|
||
attachments: true,
|
||
context: true,
|
||
},
|
||
{ id }
|
||
);
|
||
|
||
const keys = new Set<string>();
|
||
Object.keys(editedNote)
|
||
.concat(Object.keys(note.value))
|
||
.forEach((key) => keys.add(key));
|
||
keys.forEach((key) => {
|
||
note.value[key] = editedNote[key];
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
} else {
|
||
switch (type) {
|
||
case "reacted": {
|
||
const reaction = body.reaction;
|
||
|
||
if (body.emoji) {
|
||
const emojis = note.value.emojis || [];
|
||
if (!emojis.includes(body.emoji)) {
|
||
note.value.emojis = [...emojis, body.emoji];
|
||
}
|
||
}
|
||
|
||
// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
|
||
const currentCount = note.value.reactions?.[reaction] || 0;
|
||
|
||
note.value.reactions[reaction] = currentCount + 1;
|
||
|
||
if ($i && body.userId === $i.id) {
|
||
note.value.myReaction = reaction;
|
||
}
|
||
break;
|
||
}
|
||
|
||
case "unreacted": {
|
||
const reaction = body.reaction;
|
||
|
||
// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
|
||
const currentCount = note.value.reactions?.[reaction] || 0;
|
||
|
||
note.value.reactions[reaction] = Math.max(
|
||
0,
|
||
currentCount - 1
|
||
);
|
||
|
||
if ($i && body.userId === $i.id) {
|
||
note.value.myReaction = undefined;
|
||
}
|
||
break;
|
||
}
|
||
|
||
case "pollVoted": {
|
||
const choice = body.choice;
|
||
|
||
if (note.value.poll) {
|
||
const choices = [...note.value.poll.choices];
|
||
choices[choice] = {
|
||
...choices[choice],
|
||
votes: choices[choice].votes + 1,
|
||
...($i && body.userId === $i.id
|
||
? {
|
||
isVoted: true,
|
||
}
|
||
: {}),
|
||
};
|
||
note.value.poll.choices = choices;
|
||
}
|
||
|
||
break;
|
||
}
|
||
|
||
case "deleted": {
|
||
props.isDeletedRef.value = true;
|
||
break;
|
||
}
|
||
|
||
case "updated": {
|
||
const editedNote = await os.api("notes/show", {
|
||
noteId: id,
|
||
});
|
||
|
||
const keys = new Set<string>();
|
||
Object.keys(editedNote)
|
||
.concat(Object.keys(note.value))
|
||
.forEach((key) => keys.add(key));
|
||
keys.forEach((key) => {
|
||
note.value[key] = editedNote[key];
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function capture(withHandler = false): void {
|
||
if (connection) {
|
||
// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
|
||
connection.send(
|
||
document.body.contains(props.rootEl.value) ? "sr" : "s",
|
||
{
|
||
id: note.value.id,
|
||
}
|
||
);
|
||
if (withHandler) connection.on("noteUpdated", onStreamNoteUpdated);
|
||
}
|
||
}
|
||
|
||
function decapture(withHandler = false): void {
|
||
if (connection) {
|
||
connection.send("un", {
|
||
id: note.value.id,
|
||
});
|
||
if (withHandler) connection.off("noteUpdated", onStreamNoteUpdated);
|
||
}
|
||
}
|
||
|
||
function onStreamConnected() {
|
||
capture(false);
|
||
}
|
||
|
||
capture(true);
|
||
if (connection) {
|
||
connection.on("_connected_", onStreamConnected);
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
decapture(true);
|
||
if (connection) {
|
||
connection.off("_connected_", onStreamConnected);
|
||
}
|
||
});
|
||
}
|