Merge pull request #19445 from wireapp/chore/merge_dev_again

chore: merge dev branch into master

Author: aweiss-dev

.github/workflows/pull_translations.yml

@@ -28,7 +28,7 @@ jobs:
         run: yarn --immutable
 
       - name: Sync translations
-        uses: crowdin/github-action@v2.9.1
+        uses: crowdin/github-action@v2.10.0
         env:
           GITHUB_TOKEN: ${{secrets.OTTO_THE_BOT_GH_TOKEN}}
           GITHUB_ACTOR: otto-the-bot

.github/workflows/sync_translations.yml

@@ -37,7 +37,7 @@ jobs:
         run: yarn translate:merge
 
       - name: Download translations
-        uses: crowdin/github-action@v2.9.1
+        uses: crowdin/github-action@v2.10.0
         env:
           GITHUB_TOKEN: ${{secrets.OTTO_THE_BOT_GH_TOKEN}}
           CROWDIN_PROJECT_ID: 342359

src/i18n/de-DE.json

@@ -910,7 +910,7 @@
   "dataSharingModalDecline": "Ablehnen",
   "dataSharingModalDescription": "Helfen Sie mit, Wire zu verbessern, indem Sie Ihre Nutzungsdaten über eine pseudonyme ID mit uns teilen. Die Daten werden weder mit Ihren persönlichen Informationen verknüpft noch an Dritte außer der Wire Gruppe weitergegeben. Sie beinhalten zum Beispiel, wann Sie eine Funktion nutzen, Ihre App-Version, den Gerätetyp oder Ihr Betriebssystem. Diese Daten werden spätestens nach 365 Tagen gelöscht.<br />Weitere Einzelheiten finden Sie in unserer [link]Datenschutzerklärung[/link]. Sie können Ihre Zustimmung jederzeit widerrufen.",
   "dataSharingModalTitle": "Einwilligung zum Teilen von Nutzungsdaten",
-  "deletedUser": "Deleted User",
+  "deletedUser": "Gelöschter Nutzer",
   "downloadLatestMLS": "Laden Sie die neueste MLS-Wire-Version herunter",
   "enumerationAnd": " und ",
   "ephemeralRemaining": "verbleibend",
@@ -1981,7 +1981,7 @@
   "videoCallOverlayShareScreen": "Bildschirm teilen",
   "videoCallOverlayShowParticipantsList": "Teilnehmerliste anzeigen",
   "videoCallOverlayViewModeAll": "Alle Teilnehmer anzeigen",
-  "videoCallOverlayViewModeLabel": "View mode",
+  "videoCallOverlayViewModeLabel": "Ansicht",
   "videoCallOverlayViewModeSpeakers": "Nur aktive Sprecher anzeigen",
   "videoCallParticipantConnecting": "Verbinden…",
   "videoCallParticipantLowerYourHand": "Hand senken",
@@ -1992,9 +1992,9 @@
   "videoCallParticipantRaisedSortByTime": "Die erste Person auf der Liste hob zuerst die Hand.",
   "videoCallParticipantRaisedTheirHandUp": "{name} hat die Hand gehoben",
   "videoCallPaused": "Video wurde angehalten",
-  "videoCallScreenShareEndConfirm": "End screen share",
-  "videoCallScreenShareEndConfirmDescription": "If you minimize the window, your screen share will end.",
-  "videoCallScreenShareEnded": "Your screen share has ended.",
+  "videoCallScreenShareEndConfirm": "Bildschirmfreigabe beenden",
+  "videoCallScreenShareEndConfirmDescription": "Wenn Sie das Anruf-Fenster verkleinern, endet die Bildschirmfreigabe.",
+  "videoCallScreenShareEnded": "Ihre Bildschirmfreigabe wurde beendet.",
   "videoCallScreenShareNotSupported": "Bildschirmfreigabe wird von diesem Browser nicht unterstützt",
   "videoCallaudioInputMicrophone": "Mikrofon",
   "videoCallaudioOutputSpeaker": "Lautsprecher",

src/script/components/MessagesList/VirtualizedMessagesList/VirtualizedMessagesList.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {MutableRefObject, useEffect, useState} from 'react';
+import {MutableRefObject, useEffect, useMemo, useState} from 'react';
 
 import {useVirtualizer} from '@tanstack/react-virtual';
 import cx from 'classnames';
@@ -38,7 +38,7 @@ import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 
 import {VirtualizedJumpToLastMessageButton} from '../VirtualizedJumpToLastMessageButton';
 
-const ESTIMATED_ELEMENT_SIZE = 36;
+const ESTIMATED_ELEMENT_SIZE = 48;
 
 interface Props extends Omit<MessagesListParams, 'isRightSidebarOpen' | 'onLoading' | 'isConversationLoaded'> {
   parentElement: HTMLDivElement;
@@ -87,7 +87,10 @@ export const VirtualizedMessagesList = ({
   ]);
 
   const filteredMessages = filterMessages(allMessages);
-  const groupedMessages = groupMessagesBySenderAndTime(filteredMessages, conversationLastReadTimestamp.current);
+
+  const groupedMessages = useMemo(() => {
+    return groupMessagesBySenderAndTime(filteredMessages, conversationLastReadTimestamp.current);
+  }, [conversationLastReadTimestamp, filteredMessages]);
 
   const initialMessageId = conversation.initialMessage()?.id;
 
@@ -223,9 +226,9 @@ export const VirtualizedMessagesList = ({
 
           return (
             <div
+              key={virtualItem.key}
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
-              key={virtualItem.index}
               style={{
                 position: 'absolute',
                 width: '100%',

src/script/components/MessagesList/VirtualizedMessagesList/useLoadMessages.ts

@@ -26,7 +26,7 @@ import {Conversation} from 'Repositories/entity/Conversation';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {isLastReceivedMessage} from 'Util/conversationMessages';
 
-const SCROLL_THRESHOLD = 30;
+const SCROLL_THRESHOLD = 10;
 
 interface Props {
   conversation: Conversation;

src/script/components/MessagesList/VirtualizedMessagesList/useScrollMessages.ts

@@ -32,12 +32,28 @@ interface Props {
   setAlreadyScrolledToLastMessage: (scrolled: boolean) => void;
 }
 
+function shouldStickToBottomFromPrev(
+  virtualizer: Virtualizer<HTMLDivElement, Element>,
+  prevTotalSize: number,
+  threshold = 100,
+) {
+  const el = virtualizer.options.getScrollElement?.();
+  if (!el) {
+    return false;
+  }
+
+  const scrollBottomPosition = (virtualizer.scrollOffset || 0) + el.clientHeight;
+  const distanceFromPrevBottom = Math.max(0, prevTotalSize - scrollBottomPosition);
+
+  return distanceFromPrevBottom < threshold;
+}
+
 export const useScrollMessages = (
   virtualizer: Virtualizer<HTMLDivElement, Element>,
   {messages, highlightedMessage, userId, conversationLastReadTimestamp, setAlreadyScrolledToLastMessage}: Props,
 ) => {
   const prevNbMessages = useRef(0);
-  const newNbMessages = messages.length;
+  const prevTotalSizeRef = useRef(0);
 
   const initiallyScrolled = useRef(false);
   const newMessagesCount = useRef(messages.length);
@@ -82,25 +98,19 @@ export const useScrollMessages = (
   const [scrollToHighlightedMessage, setScrollToHighlightedMessage] = useState(false);
 
   useLayoutEffect(() => {
-    if (messages.length === 0) {
+    if (!initiallyScrolled.current && messages.length === 0) {
       return;
     }
 
-    const lastMessageItem = messages[newNbMessages - 1];
+    const lastMessageItem = messages[messages.length - 1];
 
     if (isMarker(lastMessageItem)) {
       return;
     }
 
     const lastMessage = lastMessageItem?.message;
 
-    const element = virtualizer.scrollElement;
-    const scrollTop = element?.scrollTop || 0;
-    const scrollHeight = element?.scrollHeight || 0;
-    const clientHeight = element?.clientHeight || 0;
-
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    const shouldStickToBottom = distanceFromBottom < 100;
+    const shouldStickToBottom = shouldStickToBottomFromPrev(virtualizer, prevTotalSizeRef.current, 100);
 
     if (highlightedMessage && !scrollToHighlightedMessage) {
       // If we have an element we want to focus
@@ -114,7 +124,8 @@ export const useScrollMessages = (
       }
     } else if (shouldStickToBottom) {
       // We only want to animate the scroll if there are new messages in the list
-      const nbNewMessages = newNbMessages - prevNbMessages.current;
+      const nbNewMessages = messages.length - prevNbMessages.current;
+
       if (nbNewMessages >= 1) {
         // Simple content update, we just scroll to bottom if we are in the stick to bottom threshold
         const index = messages.findIndex(message => !isMarker(message) && message.message.id === lastMessage.id);
@@ -135,5 +146,6 @@ export const useScrollMessages = (
     }
 
     prevNbMessages.current = messages.length;
-  }, [highlightedMessage, messages, virtualizer, userId, newNbMessages, scrollToHighlightedMessage]);
+    prevTotalSizeRef.current = virtualizer.getTotalSize();
+  }, [highlightedMessage, messages, virtualizer, userId, scrollToHighlightedMessage]);
 };