Update earpiece overlay button text for clarity (#3370)

* Update earpiece overlay button text for clarity

* update test snapshots

locales/cs/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Zobrazit možnost sluchátek pro iPhone na všech platformách",
     "crypto_version": "Kryptografická verze: {{version}}",
     "debug_tile_layout_label": "Ladění rozložení dlaždic",
     "device_id": "ID zařízení: {{id}}",
@@ -173,8 +174,10 @@
     "devices": {
       "camera": "Fotoaparát",
       "camera_numbered": "Fotoaparát {{n}}",
+      "change_device_button": "Změnit zvukové zařízení",
       "default": "Výchozí",
       "default_named": "Výchozí <2> ({{name}}) </2>",
+      "earpiece": "Sluchátka",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Reproduktor",

locales/da/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Vis mulighed for iPhone-høretelefon på alle platforme",
     "crypto_version": "Krypto-version: {{version}}",
     "debug_tile_layout_label": "Fejlfinding af fliselayout",
     "device_id": "Enheds-id: {{id}}",
@@ -70,6 +71,7 @@
     "livekit_server_info": "LiveKit Serverinfo",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Slå al lyd fra (deltagere, reaktioner, deltagelseslyde)",
     "show_connection_stats": "Vis forbindelsesstatistik",
     "show_non_member_tiles": "Vis fliser for medier fra ikke-medlemmer",
     "url_params": "URL-parametre",
@@ -164,12 +166,17 @@
       "effect_volume_description": "Juster den lydstyrke som reaktioner og håndsoprækninger afspilles med.",
       "effect_volume_label": "Lydstyrke for lydeffekter"
     },
+    "background_blur_header": "Baggrund",
+    "background_blur_label": "Gør videoens baggrund sløret",
+    "blur_not_supported_by_browser": "(Baggrundssløring understøttes ikke af denne enhed.)",
     "developer_tab_title": "Udvikler",
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Skift lydenhed",
       "default": "Standard",
       "default_named": "Standard <2>({{name}})</2>",
+      "earpiece": "Høretelefon",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Højttaler",

locales/de/app.json

@@ -79,10 +79,15 @@
     "use_to_device_key_transport": "To-Device media E2EE Schlüssel-Transport verwenden. Falls ein anderer Teilnehmer bereits den Raumschlüssel-Transport verwendet, wird automatisch auf Raumschlüssel-Transport zurückgegriffen."
   },
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
+  "earpiece": {
+    "overlay_back_button": "Zurück zum Lautsprechermodus",
+    "overlay_description": "Nur bei App im Vordergrund nutzbar",
+    "overlay_title": "Ohrhörer Modus"
+  },
   "error": {
     "call_is_not_supported": "Anrufe werden nicht unterstützt",
     "call_not_found": "Anruf nicht gefunden",
-    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
+    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <2> erstellen Sie einen neuen</2>. </0>",
     "connection_lost": "Verbindung verloren",
     "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
     "e2ee_unsupported": "Inkompatibler Browser",
@@ -173,9 +178,11 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Audiogerät wechseln",
       "default": "Standard",
       "default_named": "Standard<2> ({{name}} )</2>",
       "earpiece": "Ohrhörer",
+      "loudspeaker": "Lautsprecher",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",
       "speaker": "Lautsprecher",

locales/en/app.json

@@ -80,14 +80,14 @@
   },
   "disconnected_banner": "Connectivity to the server has been lost.",
   "earpiece": {
-    "overlay_back_button": "Back to video",
+    "overlay_back_button": "Back to Speaker Mode",
     "overlay_description": "Only works while using app",
-    "overlay_title": "Earpiece only mode"
+    "overlay_title": "Earpiece Mode"
   },
   "error": {
     "call_is_not_supported": "Call is not supported",
     "call_not_found": "Call not found",
-    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <1>create a new one</1>.</0>",
+    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <2>create a new one</2>.</0>",
     "connection_lost": "Connection lost",
     "connection_lost_description": "You were disconnected from the call.",
     "e2ee_unsupported": "Incompatible browser",

locales/et/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Näita iPhone'i kuulari valikut kõikidel platvormidel",
     "crypto_version": "Krüptoteekide versioon: {{version}}",
     "debug_tile_layout_label": "Meediapaanide paigutus",
     "device_id": "Seadme tunnus: {{id}}",
@@ -78,10 +79,15 @@
     "use_to_device_key_transport": "Kasuta seadmepõhist krüptovõtmete vahetust. Kui jututoa liige peaks saatma jututoakohase krüptovõtme, siis kasuta jututoakohast võtmevahetust"
   },
   "disconnected_banner": "Võrguühendus serveriga on katkenud.",
+  "earpiece": {
+    "overlay_back_button": "Tagasi videovaatesse",
+    "overlay_description": "Toimib vaid rakenduse kasutamise ajal",
+    "overlay_title": "Toimib vaid kuularitega"
+  },
   "error": {
     "call_is_not_supported": "Kõne pole toetatud",
     "call_not_found": "Kõnet ei leidu",
-    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <1>loo uus</1>.</0>",
+    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <2>loo uus</2>.</0>",
     "connection_lost": "Ühendus on katkenud",
     "connection_lost_description": "Sinu ühendus selle kõnega on katkenud.",
     "e2ee_unsupported": "Mitteühilduv brauser",
@@ -172,8 +178,11 @@
     "devices": {
       "camera": "Kaamera",
       "camera_numbered": "Kaamera {{n}}",
+      "change_device_button": "Muuda heliseadet",
       "default": "Vaikimisi",
       "default_named": "Vaikimisi <2>({{name}})</2>",
+      "earpiece": "Kuular",
+      "loudspeaker": "Valjuhääldi",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Kõlar",

locales/ru/app.json

@@ -61,6 +61,7 @@
     "video": "Видео"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Показать опцию наушников для iPhone на всех платформах",
     "crypto_version": "Версия криптографии: {{version}}",
     "debug_tile_layout_label": "Отладка расположения плиток",
     "device_id": "Идентификатор устройства: {{id}}",
@@ -70,6 +71,7 @@
     "livekit_server_info": "Информация о сервере LiveKit",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Отключить все звуки (участников, реакции, звуки присоединения)",
     "show_connection_stats": "Показать статистику подключений",
     "show_non_member_tiles": "Показать плитки для медиафайлов, не являющихся участниками",
     "url_params": "Параметры URL-адреса",
@@ -172,8 +174,10 @@
     "devices": {
       "camera": "Камера",
       "camera_numbered": "Камера {{n}}",
+      "change_device_button": "Изменить аудиоустройство",
       "default": "По умолчанию",
       "default_named": "По умолчанию <2>({{name}})</2>",
+      "earpiece": "Наушник",
       "microphone": "Микрофон",
       "microphone_numbered": "Микрофон {{n}}",
       "speaker": "Динамик",

locales/sk/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Zobraziť možnosť slúchadla iPhone na všetkých platformách",
     "crypto_version": "Krypto verzia: {{version}}",
     "debug_tile_layout_label": "Ladenie rozloženia dlaždíc",
     "device_id": "ID zariadenia: {{id}}",
@@ -78,10 +79,15 @@
     "use_to_device_key_transport": "Používa sa na prenos kľúča zariadenia. Toto sa vráti k prenosu kľúča miestnosti, keď iný účastník hovoru poslal kľúč od miestnosti"
   },
   "disconnected_banner": "Spojenie so serverom sa stratilo.",
+  "earpiece": {
+    "overlay_back_button": "Späť na video",
+    "overlay_description": "Funguje iba pri používaní aplikácie",
+    "overlay_title": "Režim iba so slúchadlami"
+  },
   "error": {
     "call_is_not_supported": "Hovor nie je podporovaný",
     "call_not_found": "Hovor nebol nájdený",
-    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <1> vytvorte nový</1>. </0>",
+    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <2>vytvorte nový</2>.</0>",
     "connection_lost": "Strata spojenia",
     "connection_lost_description": "Boli ste odpojení od hovoru.",
     "e2ee_unsupported": "Nekompatibilný prehliadač",
@@ -173,8 +179,11 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Zmeniť zvukové zariadenie",
       "default": "Predvolené",
       "default_named": "Predvolené <2>({{name}})</2>",
+      "earpiece": "Slúchadlo",
+      "loudspeaker": "Reproduktor",
       "microphone": "Mikrofón",
       "microphone_numbered": "Mikrofón {{n}}",
       "speaker": "Reproduktor",

locales/sv/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Visa iPhone-hörsnäckealternativ på alla plattformar",
     "crypto_version": "Kryptoversion: {{version}}",
     "debug_tile_layout_label": "Felsök panelarrangemang",
     "device_id": "Enhets-ID: {{id}}",
@@ -70,6 +71,7 @@
     "livekit_server_info": "LiveKit-serverinfo",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix-ID: {{id}}",
+    "mute_all_audio": "Tysta allt ljud (deltagare, reaktioner, anslutningsljud)",
     "show_connection_stats": "Visa anslutningsstatistik",
     "show_non_member_tiles": "Visa paneler för media som inte är medlemmar",
     "url_params": "URL-parametrar",
@@ -164,12 +166,17 @@
       "effect_volume_description": "Justera volymen vid vilken reaktioner och handuppräckningseffekter spelas",
       "effect_volume_label": "Ljudeffektsvolym"
     },
+    "background_blur_header": "Bakgrund",
+    "background_blur_label": "Gör bakgrunden i videon suddig",
+    "blur_not_supported_by_browser": "(Bakgrundssuddighet stöds inte av den här enheten.)",
     "developer_tab_title": "Utvecklare",
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Byt ljudenhet",
       "default": "Förval",
       "default_named": "Förval <2>({{name}})</2>",
+      "earpiece": "Hörsnäcka",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Högtalare",

src/room/LobbyView.tsx

@@ -184,6 +184,16 @@ export const LobbyView: FC<Props> = ({
         null) as LocalVideoTrack | null,
     [tracks],
   );
+
+  useEffect(() => {
+    if (videoTrack && videoInputId === undefined) {
+      // If we have a video track but no videoInputId,
+      // we have to update the available devices. So that we select the first
+      // available video input device as the default instead of the `""` id.
+      devices.requestDeviceNames();
+    }
+  }, [devices, videoInputId, videoTrack]);
+
   useTrackProcessorSync(videoTrack);
   const showSwitchCamera = useShowSwitchCamera(
     useObservable(

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`InCallView > rendering > renders 1`] = `
       <h2
         class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
       >
-        Earpiece only mode
+        Earpiece Mode
       </h2>
       <p
         class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
@@ -123,7 +123,7 @@ exports[`InCallView > rendering > renders 1`] = `
         role="button"
         tabindex="0"
       >
-        Back to video
+        Back to Speaker Mode
       </button>
     </div>
     <div

src/state/MediaDevices.ts

@@ -18,7 +18,7 @@ import {
   type Observable,
 } from "rxjs";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
 import {
   audioInput as audioInputSetting,
@@ -33,10 +33,12 @@ import {
 } from "../controls";
 import { getUrlParams } from "../UrlParams";
 import { platform } from "../Platform";
+import { switchWhen } from "../utils/observable";
 
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
 const EARPIECE_CONFIG_ID = "earpiece-id";
+const logger = rootLogger.getChild("[MediaDevices]");
 
 export type DeviceLabel =
   | { type: "name"; name: string }
@@ -99,13 +101,25 @@ function availableRawDevices$(
   usingNames$: Observable<boolean>,
   scope: ObservableScope,
 ): Observable<MediaDeviceInfo[]> {
+  const logError = (e: Error): void =>
+    logger.error("Error creating MediaDeviceObserver", e);
+  const devices$ = createMediaDeviceObserver(kind, logError, false);
+  const devicesWithNames$ = createMediaDeviceObserver(kind, logError, true);
+
   return usingNames$.pipe(
-    switchMap((usingNames) =>
-      createMediaDeviceObserver(
-        kind,
-        (e) => logger.error("Error creating MediaDeviceObserver", e),
-        usingNames,
-      ),
+    switchMap((withNames) =>
+      withNames
+        ? // It might be that there is already a media stream running somewhere,
+          // and so we can do without requesting a second one. Only switch to the
+          // device observer that explicitly requests the names if we see that
+          // names are in fact missing from the initial device enumeration.
+          devices$.pipe(
+            switchWhen(
+              (devices, i) => i === 0 && devices.every((d) => !d.label),
+              devicesWithNames$,
+            ),
+          )
+        : devices$,
     ),
     startWith([]),
     scope.state(),
@@ -184,7 +198,11 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   public constructor(
     private readonly usingNames$: Observable<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    this.available$.subscribe((available) => {
+      logger.info("[audio-input] available devices:", available);
+    });
+  }
 }
 
 class AudioOutput
@@ -236,7 +254,11 @@ class AudioOutput
   public constructor(
     private readonly usingNames$: Observable<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    this.available$.subscribe((available) => {
+      logger.info("[audio-output] available devices:", available);
+    });
+  }
 }
 
 class ControlledAudioOutput
@@ -302,6 +324,9 @@ class ControlledAudioOutput
         window.controls.onOutputDeviceSelect?.(device.id);
       }
     });
+    this.available$.subscribe((available) => {
+      logger.info("[controlled-output] available devices:", available);
+    });
   }
 }
 
@@ -327,7 +352,12 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   public constructor(
     private readonly usingNames$: Observable<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    // This also has the purpose of subscribing to the available devices
+    this.available$.subscribe((available) => {
+      logger.info("[video-input] available devices:", available);
+    });
+  }
 }
 
 export class MediaDevices {

src/utils/observable.ts

@@ -5,7 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable, defer, finalize, scan, startWith, tap } from "rxjs";
+import {
+  type Observable,
+  concat,
+  defer,
+  finalize,
+  map,
+  scan,
+  startWith,
+  takeWhile,
+  tap,
+} from "rxjs";
 
 const nothing = Symbol("nothing");
 
@@ -39,6 +49,29 @@ export function accumulate<State, Event>(
     events$.pipe(scan(update, initial), startWith(initial));
 }
 
+const switchSymbol = Symbol("switch");
+
+/**
+ * RxJS operator which behaves like the input Observable (A) until it emits a
+ * value satisfying the given predicate, then behaves like Observable B.
+ *
+ * The switch is immediate; the value that triggers the switch will not be
+ * present in the output.
+ */
+export function switchWhen<A, B>(
+  predicate: (a: A, index: number) => boolean,
+  b$: Observable<B>,
+) {
+  return (a$: Observable<A>): Observable<A | B> =>
+    concat(
+      a$.pipe(
+        map((a, index) => (predicate(a, index) ? switchSymbol : a)),
+        takeWhile((a) => a !== switchSymbol),
+      ) as Observable<A>,
+      b$,
+    );
+}
+
 /**
  * Reads the current value of a state Observable without reacting to future
  * changes.

yarn.lock

@@ -9907,8 +9907,8 @@ __metadata:
   linkType: hard
 
 "livekit-client@npm:^2.13.0":
-  version: 2.13.8
-  resolution: "livekit-client@npm:2.13.8"
+  version: 2.14.0
+  resolution: "livekit-client@npm:2.14.0"
   dependencies:
     "@livekit/mutex": "npm:1.1.1"
     "@livekit/protocol": "npm:1.39.2"
@@ -9921,7 +9921,7 @@ __metadata:
     webrtc-adapter: "npm:^9.0.1"
   peerDependencies:
     "@types/dom-mediacapture-record": ^1
-  checksum: 10c0/bf1ba10891ab5beb44a30016c3923a635d0bb637d604280686b98ea366794985eec0a4a294fb1478a8a68ac90ba8ab0ea5c1e64986603d8ce53019399994385b
+  checksum: 10c0/2c3a134c5463fb06f7b5b191329530546cf28309c919f0cfc1fb1b334daa92e8d1ad23dba570d55ee12ad68592871ab18fcab02e784ed340773c84b19619a9ca
   languageName: node
   linkType: hard