sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2025-03-23 08:08:27 +09:00
parent 798a50da0e
commit 53386fb5fc
3 changed files with 42 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/frontend-embed/src/components/EmPagination.vue
View File

@@ -63,8 +63,6 @@ export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints>
reversed?: boolean; reversed?: boolean;
offsetMode?: boolean; offsetMode?: boolean;
pageEl?: HTMLElement;
}; };
type MisskeyEntity = { type MisskeyEntity = {
@@ -136,8 +134,7 @@ const isBackTop = ref(false);
const empty = computed(() => items.value.size === 0); const empty = computed(() => items.value.size === 0);
const error = ref(false); const error = ref(false);
const contentEl = computed(() => props.pagination.pageEl ?? rootEl.value); const scrollableElement = computed(() => rootEl.value ? getScrollContainer(rootEl.value) : document.body);
const scrollableElement = computed(() => contentEl.value ? getScrollContainer(contentEl.value) : document.body);
const visibility = useDocumentVisibility(); const visibility = useDocumentVisibility();
@@ -168,11 +165,11 @@ watch(rootEl, () => {
}); });
}); });
watch([backed, contentEl], () => { watch([backed, rootEl], () => {
if (!backed.value) { if (!backed.value) {
if (!contentEl.value) return; if (!rootEl.value) return;
scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE); scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(rootEl.value, executeQueue, TOLERANCE);
} else { } else {
if (scrollRemove.value) scrollRemove.value(); if (scrollRemove.value) scrollRemove.value();
scrollRemove.value = null; scrollRemove.value = null;
@@ -345,7 +342,7 @@ const appearFetchMoreAhead = async (): Promise<void> => {
fetchMoreAppearTimeout(); fetchMoreAppearTimeout();
}; };
const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isTailVisible : isHeadVisible)(contentEl.value!, TOLERANCE); const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isTailVisible : isHeadVisible)(rootEl.value!, TOLERANCE);
watch(visibility, () => { watch(visibility, () => {
if (visibility.value === 'hidden') { if (visibility.value === 'hidden') {
@@ -443,7 +440,7 @@ onDeactivated(() => {
}); });
function toBottom() { function toBottom() {
scrollToBottom(contentEl.value!); scrollToBottom(rootEl.value!);
} }
onBeforeMount(() => { onBeforeMount(() => {

17
packages/frontend/src/components/MkPagination.vue
View File

@@ -74,8 +74,6 @@ export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints>
reversed?: boolean; reversed?: boolean;
offsetMode?: boolean; offsetMode?: boolean;
pageEl?: HTMLElement;
}; };
type MisskeyEntityMap = Map<string, MisskeyEntity>; type MisskeyEntityMap = Map<string, MisskeyEntity>;
@@ -142,8 +140,7 @@ const {
enableInfiniteScroll, enableInfiniteScroll,
} = prefer.r; } = prefer.r;
const contentEl = computed(() => props.pagination.pageEl ?? rootEl.value); const scrollableElement = computed(() => rootEl.value ? getScrollContainer(rootEl.value) : window.document.body);
const scrollableElement = computed(() => contentEl.value ? getScrollContainer(contentEl.value) : window.document.body);
const visibility = useDocumentVisibility(); const visibility = useDocumentVisibility();
@@ -174,13 +171,13 @@ watch(rootEl, () => {
}); });
}); });
watch([backed, contentEl], () => { watch([backed, rootEl], () => {
if (!backed.value) { if (!backed.value) {
if (!contentEl.value) return; if (!rootEl.value) return;
scrollRemove.value = props.pagination.reversed scrollRemove.value = props.pagination.reversed
? onScrollBottom(contentEl.value, executeQueue, TOLERANCE) ? onScrollBottom(rootEl.value, executeQueue, TOLERANCE)
: onScrollTop(contentEl.value, (topVisible) => { if (topVisible) executeQueue(); }, TOLERANCE); : onScrollTop(rootEl.value, (topVisible) => { if (topVisible) executeQueue(); }, TOLERANCE);
} else { } else {
if (scrollRemove.value) scrollRemove.value(); if (scrollRemove.value) scrollRemove.value();
scrollRemove.value = null; scrollRemove.value = null;
@@ -350,7 +347,7 @@ const appearFetchMoreAhead = async (): Promise<void> => {
fetchMoreAppearTimeout(); fetchMoreAppearTimeout();
}; };
const isHead = (): boolean => isBackTop.value || (props.pagination.reversed && !props.scrollReversed ? isTailVisible : isHeadVisible)(contentEl.value!, TOLERANCE); const isHead = (): boolean => isBackTop.value || (props.pagination.reversed && !props.scrollReversed ? isTailVisible : isHeadVisible)(rootEl.value!, TOLERANCE);
watch(visibility, () => { watch(visibility, () => {
if (visibility.value === 'hidden') { if (visibility.value === 'hidden') {
@@ -450,7 +447,7 @@ onDeactivated(() => {
}); });
function toBottom() { function toBottom() {
scrollToBottom(contentEl.value!); scrollToBottom(rootEl.value!);
} }
onBeforeMount(() => { onBeforeMount(() => {

28
packages/frontend/src/pages/chat/room.vue
View File

@@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<PageWithHeader reversed> <PageWithHeader reversed>
<div ref="rootEl" :class="$style.root">
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userId || roomId" :pagination="pagination" :disableAutoLoad="true" :scrollReversed="true"> <MkPagination v-if="pagination" ref="pagingComponent" :key="userId || roomId" :pagination="pagination" :disableAutoLoad="true" :scrollReversed="true">
<template #empty> <template #empty>
@@ -33,7 +32,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
</MkPagination> </MkPagination>
</MkSpacer> </MkSpacer>
</div>
<template #footer> <template #footer>
<div :class="$style.footer"> <div :class="$style.footer">
@@ -77,7 +75,6 @@ const props = defineProps<{
roomId?: string; roomId?: string;
}>(); }>();
const rootEl = useTemplateRef('rootEl');
const pagingComponent = useTemplateRef('pagingComponent'); const pagingComponent = useTemplateRef('pagingComponent');
const fetching = ref(true); const fetching = ref(true);
@@ -107,7 +104,6 @@ async function fetch() {
userId: user.value.id, userId: user.value.id,
}, },
reversed: true, reversed: true,
pageEl: rootEl.value,
}; };
connection.value = useStream().useChannel('chat', { connection.value = useStream().useChannel('chat', {
otherId: user.value.id, otherId: user.value.id,
@@ -123,7 +119,6 @@ async function fetch() {
roomId: room?.id, roomId: room?.id,
}, },
reversed: true, reversed: true,
pageEl: $$(rootEl).value,
}; };
connection = useStream().useChannel('chat', { connection = useStream().useChannel('chat', {
room: room?.id, room: room?.id,
@@ -141,8 +136,6 @@ async function fetch() {
function onMessage(message) { function onMessage(message) {
//sound.play('chat'); //sound.play('chat');
//const _isBottom = isBottomVisible(rootEl, 64);
pagingComponent.value.prepend(message); pagingComponent.value.prepend(message);
if (message.userId !== $i.id && !window.document.hidden) { if (message.userId !== $i.id && !window.document.hidden) {
connection.value?.send('read', { connection.value?.send('read', {
@@ -150,16 +143,9 @@ function onMessage(message) {
}); });
} }
/* if (message.userId !== $i.id) {
if (_isBottom) {
// Scroll to bottom
nextTick(() => {
thisScrollToBottom();
});
} else if (message.userId !== $i.id) {
// Notify
notifyNewMessage(); notifyNewMessage();
}*/ }
} }
function onDeleted(id) { function onDeleted(id) {
@@ -169,22 +155,12 @@ function onDeleted(id) {
} }
} }
function thisScrollToBottom() {
scrollToBottom(rootEl.value, { behavior: 'smooth' });
}
function onIndicatorClick() { function onIndicatorClick() {
showIndicator.value = false; showIndicator.value = false;
thisScrollToBottom();
} }
function notifyNewMessage() { function notifyNewMessage() {
showIndicator.value = true; showIndicator.value = true;
scrollRemove.value = onScrollBottom(rootEl, () => {
showIndicator.value = false;
scrollRemove.value = null;
});
} }
function onVisibilitychange() { function onVisibilitychange() {