brutalism design

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' },

new-client/src/widgets/chat/composables/use-chat-scroll.ts

@@ -16,6 +16,7 @@ export function useChatScroll(target: TemplateRef<HTMLElement>, options?: MaybeR
   })
 
   let lastScrollHeight = 0
+  let lastScrollTop = 0
 
   watch(el, (el) => {
     if (!el)
@@ -25,19 +26,41 @@ export function useChatScroll(target: TemplateRef<HTMLElement>, 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<HTMLElement>, 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<HTMLElement>, options?: MaybeR
 
     arrivedState.start = scrollTop + offsetHeight >= scrollHeight - startOffset
     arrivedState.end = scrollTop <= endOffset
+
+    lastScrollHeight = el.value!.scrollHeight
   }
 
   function scrollToStart(instant = false) {

new-client/src/widgets/chat/ui/Chat.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="chat">
     <ChatMessages class="chat__messages" />
+    <!--    <ChadButton @click="loadMoreMessages()"> -->
+    <!--      PENIS -->
+    <!--    </ChadButton> -->
     <ChatInput class="chat__input" />
   </div>
 </template>