fix: 表示済みのカラムから別のチャンネルを選択した時、タイムラインの内容が追従して変更されない問題に対処 (#12237)

* 表示済みのカラムから別のチャンネルを選択した時、タイムラインの内容が追従して変更されない問題に対処

* fix CHANGELOG.md

* fix code style

* Update MkTimeline.vue

* コメント対応(MkButtonのimportとonBeforeUpdate->watch)

* fix CHANGELOG.md

* Update MkPagination.vue

---------

Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
おさむのひと 2023-11-15 11:24:54 +09:00 committed by GitHub
parent 6cc0685f2a
commit 96f1728573
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 130 additions and 85 deletions

View file

@ -22,6 +22,7 @@
### Client ### Client
- Enhance: プラグインでエラーが発生した場合のハンドリングを強化 - Enhance: プラグインでエラーが発生した場合のハンドリングを強化
- Enhance: 細かなUIのブラッシュアップ - Enhance: 細かなUIのブラッシュアップ
- Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236
- Fix: プラグインでノートの表示を書き換えられない問題を修正 - Fix: プラグインでノートの表示を書き換えられない問題を修正
- Fix: アイコンデコレーションが見切れる場合がある問題を修正 - Fix: アイコンデコレーションが見切れる場合がある問題を修正
- Fix: 「フォロー中の人全員の返信を含める/含めないようにする」のボタンを押下した際の確認が機能していない問題を修正 - Fix: 「フォロー中の人全員の返信を含める/含めないようにする」のボタンを押下した際の確認が機能していない問題を修正

View file

@ -43,12 +43,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue'; import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, watch } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll.js'; import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll.js';
import { useDocumentVisibility } from '@/scripts/use-document-visibility.js'; import { useDocumentVisibility } from '@/scripts/use-document-visibility.js';
import MkButton from '@/components/MkButton.vue';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { MisskeyEntity } from '@/types/date-separated-list'; import { MisskeyEntity } from '@/types/date-separated-list';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
@ -91,6 +90,7 @@ function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): M
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { infoImageUrl } from '@/instance.js'; import { infoImageUrl } from '@/instance.js';
import MkButton from '@/components/MkButton.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
pagination: Paging; pagination: Paging;
@ -185,9 +185,8 @@ watch([$$(backed), $$(contentEl)], () => {
} }
}); });
if (props.pagination.params && isRef(props.pagination.params)) { // ID
watch(props.pagination.params, init, { deep: true }); watch(() => props.pagination.params, init, { deep: true });
}
watch(queue, (a, b) => { watch(queue, (a, b) => {
if (a.size === 0 && b.size === 0) return; if (a.size === 0 && b.size === 0) return;
@ -440,8 +439,6 @@ const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => M
if (queueItem) queue.value.set(id, replacer(queueItem)); if (queueItem) queue.value.set(id, replacer(queueItem));
}; };
const inited = init();
onActivated(() => { onActivated(() => {
isBackTop.value = false; isBackTop.value = false;
}); });
@ -454,8 +451,8 @@ function toBottom() {
scrollToBottom(contentEl!); scrollToBottom(contentEl!);
} }
onMounted(() => { onBeforeMount(() => {
inited.then(() => { init().then(() => {
if (props.pagination.reversed) { if (props.pagination.reversed) {
nextTick(() => { nextTick(() => {
setTimeout(toBottom, 800); setTimeout(toBottom, 800);
@ -487,7 +484,6 @@ defineExpose({
queue, queue,
backed, backed,
more, more,
inited,
reload, reload,
prepend, prepend,
append: appendItem, append: appendItem,

View file

@ -5,12 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()"> <MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/> <MkNotes
v-if="paginationQuery"
ref="tlComponent"
:pagination="paginationQuery"
:noGap="!defaultStore.state.showGapBetweenNotesInTimeline"
@queue="emit('queue', $event)"
@status="prComponent.setDisabled($event)"
/>
</MkPullToRefresh> </MkPullToRefresh>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, provide, onUnmounted } from 'vue'; import { computed, watch, onUnmounted, provide } from 'vue';
import { Connection } from 'misskey-js/built/streaming.js';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import { useStream } from '@/stream.js'; import { useStream } from '@/stream.js';
@ -18,6 +26,7 @@ import * as sound from '@/scripts/sound.js';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { instance } from '@/instance.js'; import { instance } from '@/instance.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { Paging } from '@/components/MkPagination.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
src: string; src: string;
@ -42,6 +51,17 @@ const emit = defineEmits<{
provide('inChannel', computed(() => props.src === 'channel')); provide('inChannel', computed(() => props.src === 'channel'));
type TimelineQueryType = {
antennaId?: string,
withRenotes?: boolean,
withReplies?: boolean,
withFiles?: boolean,
visibility?: string,
listId?: string,
channelId?: string,
roleId?: string
}
const prComponent: InstanceType<typeof MkPullToRefresh> = $ref(); const prComponent: InstanceType<typeof MkPullToRefresh> = $ref();
const tlComponent: InstanceType<typeof MkNotes> = $ref(); const tlComponent: InstanceType<typeof MkNotes> = $ref();
@ -63,13 +83,13 @@ const prepend = note => {
} }
}; };
let endpoint; let connection: Connection;
let query; let connection2: Connection;
let connection; let paginationQuery: Paging | null = null;
let connection2;
const stream = useStream(); const stream = useStream();
const connectChannel = () => {
function connectChannel() {
if (props.src === 'antenna') { if (props.src === 'antenna') {
connection = stream.useChannel('antenna', { connection = stream.useChannel('antenna', {
antennaId: props.antenna, antennaId: props.antenna,
@ -123,78 +143,106 @@ const connectChannel = () => {
}); });
} }
if (props.src !== 'directs' || props.src !== 'mentions') connection.on('note', prepend); if (props.src !== 'directs' || props.src !== 'mentions') connection.on('note', prepend);
}; }
if (props.src === 'antenna') { function disconnectChannel() {
if (connection) connection.dispose();
if (connection2) connection2.dispose();
}
function updatePaginationQuery() {
let endpoint: string | null;
let query: TimelineQueryType | null;
if (props.src === 'antenna') {
endpoint = 'antennas/notes'; endpoint = 'antennas/notes';
query = { query = {
antennaId: props.antenna, antennaId: props.antenna,
}; };
} else if (props.src === 'home') { } else if (props.src === 'home') {
endpoint = 'notes/timeline'; endpoint = 'notes/timeline';
query = { query = {
withRenotes: props.withRenotes, withRenotes: props.withRenotes,
withFiles: props.onlyFiles ? true : undefined, withFiles: props.onlyFiles ? true : undefined,
}; };
} else if (props.src === 'local') { } else if (props.src === 'local') {
endpoint = 'notes/local-timeline'; endpoint = 'notes/local-timeline';
query = { query = {
withRenotes: props.withRenotes, withRenotes: props.withRenotes,
withReplies: props.withReplies, withReplies: props.withReplies,
withFiles: props.onlyFiles ? true : undefined, withFiles: props.onlyFiles ? true : undefined,
}; };
} else if (props.src === 'social') { } else if (props.src === 'social') {
endpoint = 'notes/hybrid-timeline'; endpoint = 'notes/hybrid-timeline';
query = { query = {
withRenotes: props.withRenotes, withRenotes: props.withRenotes,
withReplies: props.withReplies, withReplies: props.withReplies,
withFiles: props.onlyFiles ? true : undefined, withFiles: props.onlyFiles ? true : undefined,
}; };
} else if (props.src === 'global') { } else if (props.src === 'global') {
endpoint = 'notes/global-timeline'; endpoint = 'notes/global-timeline';
query = { query = {
withRenotes: props.withRenotes, withRenotes: props.withRenotes,
withFiles: props.onlyFiles ? true : undefined, withFiles: props.onlyFiles ? true : undefined,
}; };
} else if (props.src === 'mentions') { } else if (props.src === 'mentions') {
endpoint = 'notes/mentions'; endpoint = 'notes/mentions';
} else if (props.src === 'directs') { query = null;
} else if (props.src === 'directs') {
endpoint = 'notes/mentions'; endpoint = 'notes/mentions';
query = { query = {
visibility: 'specified', visibility: 'specified',
}; };
} else if (props.src === 'list') { } else if (props.src === 'list') {
endpoint = 'notes/user-list-timeline'; endpoint = 'notes/user-list-timeline';
query = { query = {
withFiles: props.onlyFiles ? true : undefined, withFiles: props.onlyFiles ? true : undefined,
listId: props.list, listId: props.list,
}; };
} else if (props.src === 'channel') { } else if (props.src === 'channel') {
endpoint = 'channels/timeline'; endpoint = 'channels/timeline';
query = { query = {
channelId: props.channel, channelId: props.channel,
}; };
} else if (props.src === 'role') { } else if (props.src === 'role') {
endpoint = 'roles/notes'; endpoint = 'roles/notes';
query = { query = {
roleId: props.role, roleId: props.role,
}; };
} } else {
endpoint = null;
query = null;
}
if (!defaultStore.state.disableStreamingTimeline) { if (endpoint && query) {
connectChannel(); paginationQuery = {
onUnmounted(() => {
connection.dispose();
if (connection2) connection2.dispose();
});
}
const pagination = {
endpoint: endpoint, endpoint: endpoint,
limit: 10, limit: 10,
params: query, params: query,
}; };
} else {
paginationQuery = null;
}
}
function refreshEndpointAndChannel() {
if (!defaultStore.state.disableStreamingTimeline) {
disconnectChannel();
connectChannel();
}
updatePaginationQuery();
}
// IDTL
watch(() => [props.list, props.antenna, props.channel, props.role], refreshEndpointAndChannel);
//
refreshEndpointAndChannel();
onUnmounted(() => {
disconnectChannel();
});
function reloadTimeline() { function reloadTimeline() {
return new Promise<void>((res) => { return new Promise<void>((res) => {