Merge branch 'fkwp/delegation_of_delayed_events' into fkwp/feature_relax_homeserver_offline

backend/dev_livekit-othersite.yaml

@@ -18,3 +18,7 @@ keys:
   devkey: secret
 room:
   auto_create: false
+webhook:
+  api_key: devkey
+  urls:
+    - https://matrix-rtc.othersite.m.localhost/livekit/jwt/sfu_webhook

backend/dev_livekit.yaml

@@ -18,3 +18,7 @@ keys:
   devkey: secret
 room:
   auto_create: false
+webhook:
+  api_key: devkey
+  urls:
+    - https://matrix-rtc.m.localhost/livekit/jwt/sfu_webhook

dev-backend-docker-compose.yml

@@ -62,7 +62,10 @@ services:
       - 7882:7882/tcp
       - 50100-50200:50100-50200/udp
     volumes:
+      - ./backend/dev_tls_m.localhost.crt:/local_cert.pem:Z
       - ./backend/dev_livekit.yaml:/etc/livekit.yaml:Z
+    environment:
+      - SSL_CERT_FILE=/local_cert.pem
     networks:
       - ecbackend
 
@@ -82,7 +85,10 @@ services:
       - 17882:17882/tcp
       - 50300-50400:50300-50400/udp
     volumes:
+      - ./backend/dev_tls_m.localhost.crt:/local_cert.pem:Z
       - ./backend/dev_livekit-othersite.yaml:/etc/livekit.yaml:Z
+    environment:
+      - SSL_CERT_FILE=/local_cert.pem
     networks:
       - ecbackend
 
@@ -164,6 +170,8 @@ services:
       - "8448:8448"
     extra_hosts:
       - "host.docker.internal:host-gateway"
+      - "auth-server:127.0.0.1"
+      - "auth-server-1:127.0.0.1"
     depends_on:
       - synapse
     networks:

src/useCallViewKeyboardShortcuts.test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { render } from "@testing-library/react";
-import { type FC, useRef } from "react";
+import { type FC, useRef, useState } from "react";
 import { expect, test, vi } from "vitest";
 import { Button } from "@vector-im/compound-web";
 import userEvent from "@testing-library/user-event";
@@ -17,6 +17,7 @@ import {
   ReactionSet,
   ReactionsRowSize,
 } from "./reactions";
+import { type Controls } from "./controls";
 
 // Test Explanation:
 // - The main objective is to test `useCallViewKeyboardShortcuts`.
@@ -27,6 +28,7 @@ interface TestComponentProps {
   onButtonClick?: () => void;
   sendReaction?: () => void;
   toggleHandRaised?: () => void;
+  initialModalOpen?: boolean;
 }
 
 const TestComponent: FC<TestComponentProps> = ({
@@ -34,7 +36,9 @@ const TestComponent: FC<TestComponentProps> = ({
   onButtonClick = (): void => {},
   sendReaction = (reaction: ReactionOption): void => {},
   toggleHandRaised = (): void => {},
+  initialModalOpen = false,
 }) => {
+  const [modalOpen, setModalOpen] = useState(initialModalOpen);
   const ref = useRef<HTMLDivElement | null>(null);
   useCallViewKeyboardShortcuts(
     ref,
@@ -47,6 +51,19 @@ const TestComponent: FC<TestComponentProps> = ({
   return (
     <div ref={ref}>
       <Button onClick={onButtonClick}>TEST</Button>
+      {modalOpen && (
+        <dialog
+          open
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              setModalOpen(false);
+            }
+          }}
+        >
+          <button>InModalButton</button>
+        </dialog>
+      )}
     </div>
   );
 };
@@ -118,6 +135,27 @@ test("raised hand can be sent via keyboard presses", async () => {
   expect(toggleHandRaised).toHaveBeenCalledOnce();
 });
 
+test("raised hand cannot be sent via keyboard presses if modal open and focussed", async () => {
+  const user = userEvent.setup();
+  const toggleHandRaised = vi.fn();
+  const { getByRole } = render(
+    <TestComponent
+      toggleHandRaised={toggleHandRaised}
+      initialModalOpen={true}
+    />,
+  );
+  getByRole("button", { name: "InModalButton" }).focus();
+  await user.keyboard("h");
+
+  expect(toggleHandRaised).not.toHaveBeenCalledOnce();
+
+  // once we press esc...
+  await user.keyboard("[Escape]");
+  // we can toggle the hand raise...
+  await user.keyboard("h");
+  expect(toggleHandRaised).toHaveBeenCalledOnce();
+});
+
 test("unmuting happens in place of the default action", async () => {
   const user = userEvent.setup();
   const defaultPrevented = vi.fn();
@@ -138,3 +176,35 @@ test("unmuting happens in place of the default action", async () => {
   await user.keyboard("[Space]");
   expect(defaultPrevented).toBeCalledWith(true);
 });
+
+test("escape button triggers the controls back action", async () => {
+  const user = userEvent.setup();
+
+  window.controls = { onBackButtonPressed: vi.fn() } as unknown as Controls;
+  // In the real application, we mostly just want the spacebar shortcut to avoid
+  // scrolling the page. But to test that here in JSDOM, we need some kind of
+  // container element that can be interactive and receive focus / keydown
+  // events. <video> is kind of a weird choice, but it'll do the job.
+  render(<TestComponent setAudioEnabled={() => {}} />);
+
+  await user.keyboard("[Escape]");
+  expect(window.controls.onBackButtonPressed).toHaveBeenCalled();
+});
+
+test("escape button does not trigger back if sth else is focused", async () => {
+  const user = userEvent.setup();
+
+  window.controls = { onBackButtonPressed: vi.fn() } as unknown as Controls;
+
+  const { getByRole } = render(<TestComponent initialModalOpen={true} />);
+  getByRole("button", { name: "InModalButton" }).focus();
+
+  // First Escape: the dialog's onKeyDown intercepts it and closes the modal.
+  await user.keyboard("[Escape]");
+  expect(window.controls.onBackButtonPressed).not.toHaveBeenCalled();
+
+  // Second Escape: modal is gone, focus has fallen back to document.body,
+  // which *does* contain the ref div, so the hook fires and back IS triggered.
+  await user.keyboard("[Escape]");
+  expect(window.controls.onBackButtonPressed).toHaveBeenCalled();
+});

src/useCallViewKeyboardShortcuts.ts

@@ -68,6 +68,8 @@ export function useCallViewKeyboardShortcuts(
         } else if (KeyToReactionMap[event.key]) {
           event.preventDefault();
           sendReaction(KeyToReactionMap[event.key]);
+        } else if (event.key === "Escape") {
+          window.controls.onBackButtonPressed?.();
         }
       },
       [