1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import { onUnmounted, Ref } from 'vue';
import * as misskey from 'misskey-js';
import { stream } from '@/stream';
import { $i } from '@/account';
export function useNoteCapture(props: {
rootEl: Ref<HTMLElement>;
appearNote: Ref<misskey.entities.Note>;
}) {
const appearNote = props.appearNote;
const connection = $i ? stream : null;
function onStreamNoteUpdated(data): void {
const { type, id, body } = data;
if (id !== appearNote.value.id) return;
switch (type) {
case 'reacted': {
const reaction = body.reaction;
const updated = JSON.parse(JSON.stringify(appearNote.value));
if (body.emoji) {
const emojis = appearNote.value.emojis || [];
if (!emojis.includes(body.emoji)) {
updated.emojis = [...emojis, body.emoji];
}
}
// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
const currentCount = (appearNote.value.reactions || {})[reaction] || 0;
updated.reactions[reaction] = currentCount + 1;
if ($i && (body.userId === $i.id)) {
updated.myReaction = reaction;
}
appearNote.value = updated;
break;
}
case 'unreacted': {
const reaction = body.reaction;
const updated = JSON.parse(JSON.stringify(appearNote.value));
// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
const currentCount = (appearNote.value.reactions || {})[reaction] || 0;
updated.reactions[reaction] = Math.max(0, currentCount - 1);
if ($i && (body.userId === $i.id)) {
updated.myReaction = null;
}
appearNote.value = updated;
break;
}
case 'pollVoted': {
const choice = body.choice;
const updated = JSON.parse(JSON.stringify(appearNote.value));
const choices = [...appearNote.value.poll.choices];
choices[choice] = {
...choices[choice],
votes: choices[choice].votes + 1,
...($i && (body.userId === $i.id) ? {
isVoted: true
} : {})
};
updated.poll.choices = choices;
appearNote.value = updated;
break;
}
case 'deleted': {
const updated = JSON.parse(JSON.stringify(appearNote.value));
updated.value = true;
appearNote.value = updated;
break;
}
}
}
function capture(withHandler = false): void {
if (connection) {
// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
connection.send(document.body.contains(props.rootEl.value) ? 'sr' : 's', { id: appearNote.value.id });
if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
}
}
function decapture(withHandler = false): void {
if (connection) {
connection.send('un', {
id: appearNote.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);
}
});
}
|
