Add useIsEncrypted hooks and display encryption status on tile

.changeset/rotten-pumpkins-smoke.md

@@ -0,0 +1,6 @@
+---
+"@livekit/components-core": patch
+"@livekit/components-react": patch
+---
+
+Add useIsEncrypted hooks and display to tile

packages/core/etc/components-core.api.md

@@ -144,6 +144,9 @@ export const DataTopic: {
     readonly CHAT: "lk-chat-topic";
 };
 
+// @public (undocumented)
+export function encryptionStatusObservable(room: Room, participant: Participant): Observable<boolean>;
+
 // Warning: (ae-internal-missing-underscore) The name "getScrollBarWidth" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal

packages/core/src/observables/room.ts

@@ -1,7 +1,7 @@
 import type { Subscriber, Subscription } from 'rxjs';
 import { Subject, map, Observable, startWith, finalize, filter, concat } from 'rxjs';
 import type { Participant, TrackPublication } from 'livekit-client';
-import { Room, RoomEvent, Track } from 'livekit-client';
+import { LocalParticipant, Room, RoomEvent, Track } from 'livekit-client';
 import type { RoomEventCallbacks } from 'livekit-client/dist/src/room/Room';
 import { log } from '../logger';
 export function observeRoomEvents(room: Room, ...events: RoomEvent[]): Observable<Room> {
@@ -224,3 +224,17 @@ export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind)
     startWith(room.getActiveDevice(kind)),
   );
 }
+
+export function encryptionStatusObservable(room: Room, participant: Participant) {
+  return roomEventSelector(room, RoomEvent.ParticipantEncryptionStatusChanged).pipe(
+    filter(
+      ([, p]) =>
+        participant.identity === p?.identity ||
+        (!p && participant.identity === room.localParticipant.identity),
+    ),
+    map(([encrypted]) => encrypted),
+    startWith(
+      participant instanceof LocalParticipant ? participant.isE2EEEnabled : participant.isEncrypted,
+    ),
+  );
+}

packages/react/src/assets/icons/LockLockedIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgLockLockedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <path
+      fill="currentcolor"
+      fillRule="evenodd"
+      d="M4 6.104V4a4 4 0 1 1 8 0v2.104c1.154.326 2 1.387 2 2.646v4.5A2.75 2.75 0 0 1 11.25 16h-6.5A2.75 2.75 0 0 1 2 13.25v-4.5c0-1.259.846-2.32 2-2.646ZM5.5 4a2.5 2.5 0 0 1 5 0v2h-5V4Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLockLockedIcon;

packages/react/src/assets/icons/index.ts

@@ -5,6 +5,7 @@ export { default as Chevron } from './Chevron';
 export { default as FocusToggleIcon } from './FocusToggleIcon';
 export { default as GearIcon } from './GearIcon';
 export { default as LeaveIcon } from './LeaveIcon';
+export { default as LockLockedIcon } from './LockLockedIcon';
 export { default as MicDisabledIcon } from './MicDisabledIcon';
 export { default as MicIcon } from './MicIcon';
 export { default as QualityExcellentIcon } from './QualityExcellentIcon';

packages/react/src/components/participant/ParticipantTile.tsx

@@ -15,10 +15,11 @@ import {
 } from '../../context';
 import { FocusToggle } from '../controls/FocusToggle';
 import { ParticipantPlaceholder } from '../../assets/images';
-import { ScreenShareIcon } from '../../assets/icons';
+import { LockLockedIcon, ScreenShareIcon } from '../../assets/icons';
 import { VideoTrack } from './VideoTrack';
 import { AudioTrack } from './AudioTrack';
 import { useParticipantTile } from '../../hooks';
+import { useIsEncrypted } from '../../hooks/useIsEncrypted';
 
 /** @public */
 export function ParticipantContextIfNeeded(
@@ -81,7 +82,7 @@ export function ParticipantTile({
     disableSpeakingIndicator,
     onParticipantClick,
   });
-
+  const isEncrypted = useIsEncrypted();
   const layoutContext = useMaybeLayoutContext();
 
   const handleSubscribe = React.useCallback(
@@ -129,6 +130,7 @@ export function ParticipantTile({
               <div className="lk-participant-metadata-item">
                 {trackRef.source === Track.Source.Camera ? (
                   <>
+                    {isEncrypted && <LockLockedIcon style={{ marginRight: '0.25rem' }} />}
                     <TrackMutedIndicator
                       source={Track.Source.Microphone}
                       show={'muted'}

packages/react/src/hooks/useIsEncrypted.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { LocalParticipant } from 'livekit-client';
+import { encryptionStatusObservable } from '@livekit/components-core';
+import { useEnsureParticipant, useEnsureRoom } from '../context';
+import { useObservableState } from './internal';
+
+/**
+ * @alpha
+ */
+export function useIsEncrypted() {
+  const p = useEnsureParticipant();
+  const room = useEnsureRoom();
+
+  const observer = React.useMemo(() => encryptionStatusObservable(room, p), [room, p]);
+  const isEncrypted = useObservableState(
+    observer,
+    p instanceof LocalParticipant ? p.isE2EEEnabled : p.isEncrypted,
+  );
+  return isEncrypted;
+}

packages/react/src/hooks/useLiveKitRoom.ts

@@ -46,7 +46,7 @@ export function useLiveKitRoom<T extends HTMLElement>(
 
   React.useEffect(() => {
     setRoom(passedRoom ?? new Room(options));
-  }, [JSON.stringify(options), passedRoom]);
+  }, [passedRoom]);
 
   const htmlProps = React.useMemo(() => {
     const { className } = setupLiveKitRoom();