2023-07-27 05:31:52 +00:00
|
|
|
<!--
|
|
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2020-01-29 19:37:25 +00:00
|
|
|
<template>
|
2023-11-02 09:07:42 +00:00
|
|
|
<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
|
2023-11-15 02:24:54 +00:00
|
|
|
<MkNotes
|
|
|
|
v-if="paginationQuery"
|
|
|
|
ref="tlComponent"
|
|
|
|
:pagination="paginationQuery"
|
|
|
|
:noGap="!defaultStore.state.showGapBetweenNotesInTimeline"
|
|
|
|
@queue="emit('queue', $event)"
|
2024-01-05 03:52:24 +00:00
|
|
|
@status="prComponent?.setDisabled($event)"
|
2023-11-15 02:24:54 +00:00
|
|
|
/>
|
2023-10-30 00:12:20 +00:00
|
|
|
</MkPullToRefresh>
|
2020-01-29 19:37:25 +00:00
|
|
|
</template>
|
|
|
|
|
2022-01-09 13:57:27 +00:00
|
|
|
<script lang="ts" setup>
|
2024-01-05 03:52:24 +00:00
|
|
|
import { computed, watch, onUnmounted, provide, ref, shallowRef } from 'vue';
|
2023-11-15 02:24:54 +00:00
|
|
|
import { Connection } from 'misskey-js/built/streaming.js';
|
2023-02-22 02:00:34 +00:00
|
|
|
import MkNotes from '@/components/MkNotes.vue';
|
2023-10-30 00:12:20 +00:00
|
|
|
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
2023-11-10 08:52:50 +00:00
|
|
|
import { useStream } from '@/stream.js';
|
2023-09-19 07:37:43 +00:00
|
|
|
import * as sound from '@/scripts/sound.js';
|
|
|
|
import { $i } from '@/account.js';
|
2023-10-08 08:56:44 +00:00
|
|
|
import { instance } from '@/instance.js';
|
2023-09-19 07:37:43 +00:00
|
|
|
import { defaultStore } from '@/store.js';
|
2023-11-15 02:24:54 +00:00
|
|
|
import { Paging } from '@/components/MkPagination.vue';
|
2020-01-29 19:37:25 +00:00
|
|
|
|
2023-09-28 02:41:41 +00:00
|
|
|
const props = withDefaults(defineProps<{
|
2022-01-09 13:57:27 +00:00
|
|
|
src: string;
|
|
|
|
list?: string;
|
|
|
|
antenna?: string;
|
|
|
|
channel?: string;
|
2023-04-12 02:40:08 +00:00
|
|
|
role?: string;
|
2022-01-09 13:57:27 +00:00
|
|
|
sound?: boolean;
|
2023-09-28 02:41:41 +00:00
|
|
|
withRenotes?: boolean;
|
2023-10-11 01:15:44 +00:00
|
|
|
withReplies?: boolean;
|
2023-09-29 07:56:17 +00:00
|
|
|
onlyFiles?: boolean;
|
2023-09-28 02:41:41 +00:00
|
|
|
}>(), {
|
|
|
|
withRenotes: true,
|
2023-10-11 01:15:44 +00:00
|
|
|
withReplies: false,
|
2023-09-29 07:56:17 +00:00
|
|
|
onlyFiles: false,
|
2023-09-28 02:41:41 +00:00
|
|
|
});
|
2020-01-29 19:37:25 +00:00
|
|
|
|
2022-01-09 13:57:27 +00:00
|
|
|
const emit = defineEmits<{
|
2022-05-26 13:53:09 +00:00
|
|
|
(ev: 'note'): void;
|
|
|
|
(ev: 'queue', count: number): void;
|
2022-01-09 13:57:27 +00:00
|
|
|
}>();
|
|
|
|
|
|
|
|
provide('inChannel', computed(() => props.src === 'channel'));
|
|
|
|
|
2023-11-15 02:24:54 +00:00
|
|
|
type TimelineQueryType = {
|
|
|
|
antennaId?: string,
|
|
|
|
withRenotes?: boolean,
|
|
|
|
withReplies?: boolean,
|
|
|
|
withFiles?: boolean,
|
|
|
|
visibility?: string,
|
|
|
|
listId?: string,
|
|
|
|
channelId?: string,
|
|
|
|
roleId?: string
|
|
|
|
}
|
|
|
|
|
2024-01-05 03:52:24 +00:00
|
|
|
const prComponent = shallowRef<InstanceType<typeof MkPullToRefresh>>();
|
|
|
|
const tlComponent = shallowRef<InstanceType<typeof MkNotes>>();
|
2022-01-09 13:57:27 +00:00
|
|
|
|
2023-10-08 08:56:44 +00:00
|
|
|
let tlNotesCount = 0;
|
|
|
|
|
2024-01-05 03:52:24 +00:00
|
|
|
function prepend(note) {
|
|
|
|
if (tlComponent.value == null) return;
|
|
|
|
|
2023-10-08 08:56:44 +00:00
|
|
|
tlNotesCount++;
|
|
|
|
|
|
|
|
if (instance.notesPerOneAd > 0 && tlNotesCount % instance.notesPerOneAd === 0) {
|
|
|
|
note._shouldInsertAd_ = true;
|
|
|
|
}
|
|
|
|
|
2023-12-07 05:42:09 +00:00
|
|
|
tlComponent.value.pagingComponent?.prepend(note);
|
2022-01-09 13:57:27 +00:00
|
|
|
|
|
|
|
emit('note');
|
|
|
|
|
|
|
|
if (props.sound) {
|
2024-01-09 04:25:33 +00:00
|
|
|
sound.playMisskeySfx($i && (note.userId === $i.id) ? 'noteMy' : 'note');
|
2020-01-29 19:37:25 +00:00
|
|
|
}
|
2024-01-05 03:52:24 +00:00
|
|
|
}
|
2022-01-09 13:57:27 +00:00
|
|
|
|
2023-11-15 02:24:54 +00:00
|
|
|
let connection: Connection;
|
|
|
|
let connection2: Connection;
|
|
|
|
let paginationQuery: Paging | null = null;
|
2022-01-09 13:57:27 +00:00
|
|
|
|
2023-05-15 10:08:46 +00:00
|
|
|
const stream = useStream();
|
2023-11-15 02:24:54 +00:00
|
|
|
|
|
|
|
function connectChannel() {
|
2023-10-30 00:12:20 +00:00
|
|
|
if (props.src === 'antenna') {
|
|
|
|
connection = stream.useChannel('antenna', {
|
|
|
|
antennaId: props.antenna,
|
|
|
|
});
|
|
|
|
} else if (props.src === 'home') {
|
|
|
|
connection = stream.useChannel('homeTimeline', {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
});
|
|
|
|
connection2 = stream.useChannel('main');
|
|
|
|
} else if (props.src === 'local') {
|
|
|
|
connection = stream.useChannel('localTimeline', {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withReplies: props.withReplies,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
});
|
|
|
|
} else if (props.src === 'social') {
|
|
|
|
connection = stream.useChannel('hybridTimeline', {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withReplies: props.withReplies,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
});
|
|
|
|
} else if (props.src === 'global') {
|
|
|
|
connection = stream.useChannel('globalTimeline', {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
});
|
|
|
|
} else if (props.src === 'mentions') {
|
|
|
|
connection = stream.useChannel('main');
|
|
|
|
connection.on('mention', prepend);
|
|
|
|
} else if (props.src === 'directs') {
|
|
|
|
const onNote = note => {
|
|
|
|
if (note.visibility === 'specified') {
|
|
|
|
prepend(note);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
connection = stream.useChannel('main');
|
|
|
|
connection.on('mention', onNote);
|
|
|
|
} else if (props.src === 'list') {
|
|
|
|
connection = stream.useChannel('userList', {
|
2024-01-07 00:57:01 +00:00
|
|
|
withRenotes: props.withRenotes,
|
2023-10-30 00:12:20 +00:00
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
listId: props.list,
|
|
|
|
});
|
|
|
|
} else if (props.src === 'channel') {
|
|
|
|
connection = stream.useChannel('channel', {
|
|
|
|
channelId: props.channel,
|
|
|
|
});
|
|
|
|
} else if (props.src === 'role') {
|
|
|
|
connection = stream.useChannel('roleTimeline', {
|
|
|
|
roleId: props.role,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (props.src !== 'directs' || props.src !== 'mentions') connection.on('note', prepend);
|
2023-11-15 02:24:54 +00:00
|
|
|
}
|
2023-05-15 10:08:46 +00:00
|
|
|
|
2023-11-15 02:24:54 +00:00
|
|
|
function disconnectChannel() {
|
|
|
|
if (connection) connection.dispose();
|
|
|
|
if (connection2) connection2.dispose();
|
2023-10-30 00:12:20 +00:00
|
|
|
}
|
|
|
|
|
2023-11-15 02:24:54 +00:00
|
|
|
function updatePaginationQuery() {
|
|
|
|
let endpoint: string | null;
|
|
|
|
let query: TimelineQueryType | null;
|
2023-10-30 00:12:20 +00:00
|
|
|
|
2023-11-15 02:24:54 +00:00
|
|
|
if (props.src === 'antenna') {
|
|
|
|
endpoint = 'antennas/notes';
|
|
|
|
query = {
|
|
|
|
antennaId: props.antenna,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'home') {
|
|
|
|
endpoint = 'notes/timeline';
|
|
|
|
query = {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'local') {
|
|
|
|
endpoint = 'notes/local-timeline';
|
|
|
|
query = {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withReplies: props.withReplies,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'social') {
|
|
|
|
endpoint = 'notes/hybrid-timeline';
|
|
|
|
query = {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withReplies: props.withReplies,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'global') {
|
|
|
|
endpoint = 'notes/global-timeline';
|
|
|
|
query = {
|
|
|
|
withRenotes: props.withRenotes,
|
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'mentions') {
|
|
|
|
endpoint = 'notes/mentions';
|
|
|
|
query = null;
|
|
|
|
} else if (props.src === 'directs') {
|
|
|
|
endpoint = 'notes/mentions';
|
|
|
|
query = {
|
|
|
|
visibility: 'specified',
|
|
|
|
};
|
|
|
|
} else if (props.src === 'list') {
|
|
|
|
endpoint = 'notes/user-list-timeline';
|
|
|
|
query = {
|
2024-01-07 00:57:01 +00:00
|
|
|
withRenotes: props.withRenotes,
|
2023-11-15 02:24:54 +00:00
|
|
|
withFiles: props.onlyFiles ? true : undefined,
|
|
|
|
listId: props.list,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'channel') {
|
|
|
|
endpoint = 'channels/timeline';
|
|
|
|
query = {
|
|
|
|
channelId: props.channel,
|
|
|
|
};
|
|
|
|
} else if (props.src === 'role') {
|
|
|
|
endpoint = 'roles/notes';
|
|
|
|
query = {
|
|
|
|
roleId: props.role,
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
endpoint = null;
|
|
|
|
query = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (endpoint && query) {
|
|
|
|
paginationQuery = {
|
|
|
|
endpoint: endpoint,
|
|
|
|
limit: 10,
|
|
|
|
params: query,
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
paginationQuery = null;
|
|
|
|
}
|
2022-01-09 13:57:27 +00:00
|
|
|
}
|
|
|
|
|
2023-11-15 02:24:54 +00:00
|
|
|
function refreshEndpointAndChannel() {
|
|
|
|
if (!defaultStore.state.disableStreamingTimeline) {
|
|
|
|
disconnectChannel();
|
|
|
|
connectChannel();
|
|
|
|
}
|
|
|
|
|
|
|
|
updatePaginationQuery();
|
|
|
|
}
|
|
|
|
|
2024-01-07 00:57:01 +00:00
|
|
|
// デッキのリストカラムでwithRenotesを変更した場合に自動的に更新されるようにさせる
|
2023-11-15 02:24:54 +00:00
|
|
|
// IDが切り替わったら切り替え先のTLを表示させたい
|
2024-01-07 00:57:01 +00:00
|
|
|
watch(() => [props.list, props.antenna, props.channel, props.role, props.withRenotes], refreshEndpointAndChannel);
|
2023-11-15 02:24:54 +00:00
|
|
|
|
|
|
|
// 初回表示用
|
|
|
|
refreshEndpointAndChannel();
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
disconnectChannel();
|
|
|
|
});
|
2022-01-09 13:57:27 +00:00
|
|
|
|
2023-11-02 09:07:42 +00:00
|
|
|
function reloadTimeline() {
|
|
|
|
return new Promise<void>((res) => {
|
2024-01-05 03:52:24 +00:00
|
|
|
if (tlComponent.value == null) return;
|
|
|
|
|
2023-11-02 09:07:42 +00:00
|
|
|
tlNotesCount = 0;
|
2023-10-30 00:12:20 +00:00
|
|
|
|
2023-12-07 05:42:09 +00:00
|
|
|
tlComponent.value.pagingComponent?.reload().then(() => {
|
2023-11-02 09:07:42 +00:00
|
|
|
res();
|
|
|
|
});
|
2023-10-30 00:12:20 +00:00
|
|
|
});
|
2023-11-02 09:07:42 +00:00
|
|
|
}
|
2023-10-30 00:12:20 +00:00
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
reloadTimeline,
|
2020-01-29 19:37:25 +00:00
|
|
|
});
|
|
|
|
</script>
|