Merge remote-tracking branch 'origin/livekit' into dbkr/openid

public/locales/de/app.json

@@ -113,5 +113,7 @@
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Wir würden uns freuen, deine Rückmeldung zu hören, um deine Erfahrung verbessern zu können.</0>",
   "How did it go?": "Wie ist es gelaufen?",
   "{{count}} stars|one": "{{count}} Stern",
-  "<0>Thanks for your feedback!</0>": "<0>Danke für deine Rückmeldung!</0>"
+  "<0>Thanks for your feedback!</0>": "<0>Danke für deine Rückmeldung!</0>",
+  "{{displayName}} is presenting": "{{displayName}} präsentiert",
+  "Show connection stats": "Verbindungsstatistiken zeigen"
 }

src/Header.tsx

@@ -24,9 +24,7 @@ import styles from "./Header.module.css";
 import { useModalTriggerState } from "./Modal";
 import { Button } from "./button";
 import { ReactComponent as Logo } from "./icons/Logo.svg";
-import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import { Subtitle } from "./typography/Typography";
-import { Avatar, Size } from "./Avatar";
 import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -116,21 +114,11 @@ export function HeaderLogo({ className }: HeaderLogoProps) {
 
 interface RoomHeaderInfo {
   roomName: string;
-  avatarUrl: string | null;
 }
 
-export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
+export function RoomHeaderInfo({ roomName }: RoomHeaderInfo) {
   return (
     <>
-      <div className={styles.roomAvatar}>
-        <Avatar
-          size={Size.MD}
-          src={avatarUrl ?? undefined}
-          bgKey={roomName}
-          fallback={roomName.slice(0, 1).toUpperCase()}
-        />
-        <VideoIcon width={16} height={16} />
-      </div>
       <Subtitle data-testid="roomHeader_roomName" fontWeight="semiBold">
         {roomName}
       </Subtitle>

src/room/GroupCallView.tsx

@@ -34,7 +34,6 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { UserChoices } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
-import { useRoomAvatar } from "./useRoomAvatar";
 import { OpenIDLoader } from "../livekit/OpenIDLoader";
 
 declare global {
@@ -82,14 +81,12 @@ export function GroupCallView({
   }, [groupCall]);
 
   const { displayName, avatarUrl } = useProfile(client);
-  const roomAvatarUrl = useRoomAvatar(groupCall.room);
 
   const matrixInfo: MatrixInfo = {
     displayName,
     avatarUrl,
     roomName: groupCall.room.name,
     roomIdOrAlias,
-    roomAvatarUrl,
   };
 
   useEffect(() => {

src/room/InCallView.tsx

@@ -390,10 +390,7 @@ export function InCallView({
       {!hideHeader && maximisedParticipant === null && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo
-              roomName={matrixInfo.roomName}
-              avatarUrl={matrixInfo.roomAvatarUrl}
-            />
+            <RoomHeaderInfo roomName={matrixInfo.roomName} />
             <VersionMismatchWarning
               users={unencryptedEventsFromUsers}
               room={groupCall.room}

src/room/LobbyView.tsx

@@ -55,10 +55,7 @@ export function LobbyView(props: Props) {
       {!props.hideHeader && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo
-              roomName={props.matrixInfo.roomName}
-              avatarUrl={props.matrixInfo.roomAvatarUrl}
-            />
+            <RoomHeaderInfo roomName={props.matrixInfo.roomName} />
           </LeftNav>
           <RightNav>
             <UserMenuContainer />

src/room/VideoPreview.tsx

@@ -35,7 +35,6 @@ export type MatrixInfo = {
   avatarUrl: string;
   roomName: string;
   roomIdOrAlias: string;
-  roomAvatarUrl: string | null;
 };
 
 interface Props {

src/video-grid/NewVideoGrid.tsx

@@ -257,6 +257,11 @@ export function NewVideoGrid<T>({
       );
   };
 
+  const [lastTappedTileId, setLastTappedTileId] = useState<string | undefined>(
+    undefined
+  );
+  const [lastTapTime, setLastTapTime] = useState<number>(0);
+
   // Callback for useDrag. We could call useDrag here, but the default
   // pattern of spreading {...bind()} across the children to bind the gesture
   // ends up breaking memoization and ruining this component's performance.
@@ -272,7 +277,14 @@ export function NewVideoGrid<T>({
     }: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
   ) => {
     if (tap) {
-      toggleFocus?.(items.find((i) => i.id === tileId)!);
+      const now = Date.now();
+
+      if (tileId === lastTappedTileId && now - lastTapTime < 500) {
+        toggleFocus?.(items.find((i) => i.id === tileId)!);
+      }
+
+      setLastTappedTileId(tileId);
+      setLastTapTime(now);
     } else {
       const tileController = springRef.current.find(
         (c) => (c.item as Tile<T>).item.id === tileId