mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-09 19:43:09 +02:00
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:
parent
6cc0685f2a
commit
96f1728573
3 changed files with 130 additions and 85 deletions
|
@ -22,6 +22,7 @@
|
||||||
### Client
|
### Client
|
||||||
- Enhance: プラグインでエラーが発生した場合のハンドリングを強化
|
- Enhance: プラグインでエラーが発生した場合のハンドリングを強化
|
||||||
- Enhance: 細かなUIのブラッシュアップ
|
- Enhance: 細かなUIのブラッシュアップ
|
||||||
|
- Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236
|
||||||
- Fix: プラグインでノートの表示を書き換えられない問題を修正
|
- Fix: プラグインでノートの表示を書き換えられない問題を修正
|
||||||
- Fix: アイコンデコレーションが見切れる場合がある問題を修正
|
- Fix: アイコンデコレーションが見切れる場合がある問題を修正
|
||||||
- Fix: 「フォロー中の人全員の返信を含める/含めないようにする」のボタンを押下した際の確認が機能していない問題を修正
|
- Fix: 「フォロー中の人全員の返信を含める/含めないようにする」のボタンを押下した際の確認が機能していない問題を修正
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
||||||
|
|
||||||
|
// IDが切り替わったら切り替え先のTLを表示させたい
|
||||||
|
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) => {
|
||||||
|
|
Loading…
Reference in a new issue