diff --git a/new-client/src/app/bootstrap/mediasoup.ts b/new-client/src/app/bootstrap/mediasoup.ts index ae5bf6b..e866607 100644 --- a/new-client/src/app/bootstrap/mediasoup.ts +++ b/new-client/src/app/bootstrap/mediasoup.ts @@ -4,6 +4,7 @@ import { Device } from 'mediasoup-client' import { markRaw, watch } from 'vue' const ICE_SERVERS: RTCIceServer[] = [ + { urls: 'stun:stunserver2025.stunprotocol.org:3478' }, { urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun.l.google.com:5349' }, { urls: 'stun:stun1.l.google.com:3478' }, diff --git a/new-client/src/widgets/chat/composables/use-chat-scroll.ts b/new-client/src/widgets/chat/composables/use-chat-scroll.ts index 78b3a80..909635b 100644 --- a/new-client/src/widgets/chat/composables/use-chat-scroll.ts +++ b/new-client/src/widgets/chat/composables/use-chat-scroll.ts @@ -16,6 +16,7 @@ export function useChatScroll(target: TemplateRef, options?: MaybeR }) let lastScrollHeight = 0 + let lastScrollTop = 0 watch(el, (el) => { if (!el) @@ -25,19 +26,41 @@ export function useChatScroll(target: TemplateRef, options?: MaybeR getArrivedState() }, { flush: 'post' }) - useMutationObserver(el, () => { + useMutationObserver(el, (mutations) => { if (arrivedState.start) { scrollToStart(true) } else { - const heightDiff = el.value!.scrollHeight - lastScrollHeight + // const prepended = mutations.some(mutation => Array.from(mutation.addedNodes.values()).some(node => !!node.nextEle)) + // console.log('prepended', prepended) + // for (const mutation of mutations) { + // for (const node of mutation.addedNodes) { + // console.log('added node', node, !!node.nextSibling) + // if (node.nextSibling) { + // // добавлено сверху/в середину + // // el.value!.scrollTop += (node as HTMLElement).offsetHeight + // } + // } + // + // // for (const node of mutation.removedNodes) { + // // // previousSibling/nextSibling здесь — это соседи на момент удаления + // // if (mutation.previousSibling || mutation.nextSibling) { + // // // удалено сверху/в середину — уменьшаем scrollTop + // // el.value!.scrollTop -= (node as HTMLElement).offsetHeight + // // } + // // } + // } + const heightDiff = el.value!.scrollHeight - lastScrollHeight + // const scrollDiff = el.value!.scrollTop - lastScrollTop + // + // console.log('height', 'old', lastScrollHeight, 'new', el.value!.scrollHeight, 'diff', heightDiff) + // console.log('scroll', 'old', lastScrollTop, 'new', el.value!.scrollTop, 'diff', scrollDiff) + // el.value!.scrollTop += heightDiff } getArrivedState() - - lastScrollHeight = el.value!.scrollHeight }, { childList: true, subtree: true, @@ -46,6 +69,7 @@ export function useChatScroll(target: TemplateRef, options?: MaybeR useEventListener(el, 'scroll', () => { console.log('scroll', el.value!.scrollTop) getArrivedState() + lastScrollTop = el.value!.scrollTop }, { passive: true }) useEventListener(el, 'scrollend', () => { @@ -67,6 +91,8 @@ export function useChatScroll(target: TemplateRef, options?: MaybeR arrivedState.start = scrollTop + offsetHeight >= scrollHeight - startOffset arrivedState.end = scrollTop <= endOffset + + lastScrollHeight = el.value!.scrollHeight } function scrollToStart(instant = false) { diff --git a/new-client/src/widgets/chat/ui/Chat.vue b/new-client/src/widgets/chat/ui/Chat.vue index 607121d..069f34b 100644 --- a/new-client/src/widgets/chat/ui/Chat.vue +++ b/new-client/src/widgets/chat/ui/Chat.vue @@ -1,6 +1,9 @@