mirror of
https://github.com/vector-im/element-call.git
synced 2026-03-31 07:00:26 +00:00
Merge branch 'livekit' into toger5/tiles_based_on_rtc_member
This commit is contained in:
Hugh Nimmo-Smith
@@ -25,230 +25,38 @@ There are two formats for Element Call urls.
|
||||
```
|
||||
|
||||
With this format the livekit alias that will be used is the `<room_name>`.
|
||||
All ppl connecting to this url will end up in the same unencrypted room.
|
||||
All people connecting to this URL will end up in the same unencrypted room.
|
||||
This does not scale, is super unsecure
|
||||
(ppl could end up in the same room by accident) and it also is not really
|
||||
(people could end up in the same room by accident) and it also is not really
|
||||
possible to support encryption.
|
||||
The url parameters are spit into two categories: **general** and **widget related**.
|
||||
|
||||
## Widget related params
|
||||
## Parameters
|
||||
|
||||
**widgetId**
|
||||
The id used by the widget. The presence of this parameter implies that element
|
||||
call will not connect to a homeserver directly and instead tries to establish
|
||||
postMessage communication via the `parentUrl`.
|
||||
|
||||
```ts
|
||||
widgetId: string | null;
|
||||
```
|
||||
|
||||
**parentUrl**
|
||||
The url used to send widget action postMessages. This should be the domain of
|
||||
the client or the webview the widget is hosted in. (in case the widget is not
|
||||
in an Iframe but in a dedicated webview we send the postMessages same webview
|
||||
the widget lives in. Filtering is done in the widget so it ignores the messages
|
||||
it receives from itself)
|
||||
|
||||
```ts
|
||||
parentUrl: string | null;
|
||||
```
|
||||
|
||||
**userId**
|
||||
The user's ID (only used in matryoshka mode).
|
||||
|
||||
```ts
|
||||
userId: string | null;
|
||||
```
|
||||
|
||||
**deviceId**
|
||||
The device's ID (only used in matryoshka mode).
|
||||
|
||||
```ts
|
||||
deviceId: string | null;
|
||||
```
|
||||
|
||||
**baseUrl**
|
||||
The base URL of the homeserver to use for media lookups in matryoshka mode.
|
||||
|
||||
```ts
|
||||
baseUrl: string | null;
|
||||
```
|
||||
|
||||
### General url parameters
|
||||
|
||||
**roomId**
|
||||
Anything about what room we're pointed to should be from useRoomIdentifier which
|
||||
parses the path and resolves alias with respect to the default server name, however
|
||||
roomId is an exception as we need the room ID in embedded (matroyska) mode, and not
|
||||
the room alias (or even the via params because we are not trying to join it). This
|
||||
is also not validated, where it is in useRoomIdentifier().
|
||||
|
||||
```ts
|
||||
roomId: string | null;
|
||||
```
|
||||
|
||||
**confineToRoom**
|
||||
Whether the app should keep the user confined to the current call/room.
|
||||
|
||||
```ts
|
||||
confineToRoom: boolean; (default: false)
|
||||
```
|
||||
|
||||
**appPrompt**
|
||||
Whether upon entering a room, the user should be prompted to launch the
|
||||
native mobile app. (Affects only Android and iOS.)
|
||||
|
||||
The app prompt must also be enabled in the config for this to take effect.
|
||||
|
||||
```ts
|
||||
appPrompt: boolean; (default: true)
|
||||
```
|
||||
|
||||
**preload**
|
||||
Whether the app should pause before joining the call until it sees an
|
||||
io.element.join widget action, allowing it to be preloaded.
|
||||
|
||||
```ts
|
||||
preload: boolean; (default: false)
|
||||
```
|
||||
|
||||
**hideHeader**
|
||||
Whether to hide the room header when in a call.
|
||||
|
||||
```ts
|
||||
hideHeader: boolean; (default: false)
|
||||
```
|
||||
|
||||
**showControls**
|
||||
Whether to show the buttons to mute, screen-share, invite, hangup are shown
|
||||
when in a call.
|
||||
|
||||
```ts
|
||||
showControls: boolean; (default: true)
|
||||
```
|
||||
|
||||
**hideScreensharing**
|
||||
Whether to hide the screen-sharing button.
|
||||
|
||||
```ts
|
||||
hideScreensharing: boolean; (default: false)
|
||||
```
|
||||
|
||||
**enableE2EE** (Deprecated)
|
||||
Whether to use end-to-end encryption. This is a legacy flag for the full mesh branch.
|
||||
It is not used on the livekit branch and has no impact there!
|
||||
|
||||
```ts
|
||||
enableE2EE: boolean; (default: true)
|
||||
```
|
||||
|
||||
**perParticipantE2EE**
|
||||
Whether to use per participant encryption.
|
||||
Keys will be exchanged over encrypted matrix room messages.
|
||||
|
||||
```ts
|
||||
perParticipantE2EE: boolean; (default: false)
|
||||
```
|
||||
|
||||
**password**
|
||||
E2EE password when using a shared secret.
|
||||
(For individual sender keys in embedded mode this is not required.)
|
||||
|
||||
```ts
|
||||
password: string | null;
|
||||
```
|
||||
|
||||
**displayName**
|
||||
The display name to use for auto-registration.
|
||||
|
||||
```ts
|
||||
displayName: string | null;
|
||||
```
|
||||
|
||||
**lang**
|
||||
The BCP 47 code of the language the app should use.
|
||||
|
||||
```ts
|
||||
lang: string | null;
|
||||
```
|
||||
|
||||
**fonts**
|
||||
The font/fonts which the interface should use.
|
||||
There can be multiple font url parameters: `?font=font-one&font=font-two...`
|
||||
|
||||
```ts
|
||||
font: string;
|
||||
font: string;
|
||||
...
|
||||
```
|
||||
|
||||
**fontScale**
|
||||
The factor by which to scale the interface's font size.
|
||||
|
||||
```ts
|
||||
fontScale: number | null;
|
||||
```
|
||||
|
||||
**analyticsID**
|
||||
The Posthog analytics ID. It is only available if the user has given consent for
|
||||
sharing telemetry in element web.
|
||||
|
||||
```ts
|
||||
analyticsID: string | null;
|
||||
```
|
||||
|
||||
**allowIceFallback**
|
||||
Whether the app is allowed to use fallback STUN servers for ICE in case the
|
||||
user's homeserver doesn't provide any.
|
||||
|
||||
```ts
|
||||
allowIceFallback: boolean; (default: false)
|
||||
```
|
||||
|
||||
**skipLobby**
|
||||
Setting this flag skips the lobby and brings you in the call directly.
|
||||
In the widget this can be combined with preload to pass the device settings
|
||||
with the join widget action.
|
||||
|
||||
```ts
|
||||
skipLobby: boolean; (default: false)
|
||||
```
|
||||
|
||||
**returnToLobby**
|
||||
Setting this flag makes element call show the lobby in widget mode after leaving
|
||||
a call.
|
||||
This is useful for video rooms.
|
||||
If set to false, the widget will show a blank page after leaving the call.
|
||||
|
||||
```ts
|
||||
returnToLobby: boolean; (default: false)
|
||||
```
|
||||
|
||||
**theme**
|
||||
The theme to use for element call.
|
||||
can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
|
||||
If not set element call will use the dark theme.
|
||||
|
||||
```ts
|
||||
theme: string | null;
|
||||
```
|
||||
|
||||
**viaServers**
|
||||
This defines the homeserver that is going to be used when joining a room.
|
||||
It has to be set to a non default value for links to rooms
|
||||
that are not on the default homeserver,
|
||||
that is in use for the current user.
|
||||
|
||||
```ts
|
||||
viaServers: string; (default: undefined)
|
||||
```
|
||||
|
||||
**homeserver**
|
||||
This defines the homeserver that is going to be used when registering
|
||||
a new (guest) user.
|
||||
This can be user to configure a non default guest user server when
|
||||
creating a spa link.
|
||||
|
||||
```ts
|
||||
homeserver: string; (default: undefined)
|
||||
```
|
||||
| Name | Values | Required for widget | Required for SPA | Description |
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `allowIceFallback` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any. |
|
||||
| `analyticsID` | Posthog analytics ID | No | No | Available only with user's consent for sharing telemetry in Element Web. |
|
||||
| `appPrompt` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config. |
|
||||
| `baseUrl` | | Yes | Not applicable | The base URL of the homeserver to use for media lookups. |
|
||||
| `confineToRoom` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Keeps the user confined to the current call/room. |
|
||||
| `deviceId` | Matrix device ID | Yes | Not applicable | The Matrix device ID for the widget host. |
|
||||
| `displayName` | | No | No | Display name used for auto-registration. |
|
||||
| `enableE2EE` (deprecated) | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch. |
|
||||
| `fontScale` | A decimal number such as `0.9` | No | No | Factor by which to scale the interface's font size. |
|
||||
| `fonts` | | No | No | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`. |
|
||||
| `hideHeader` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Hides the room header when in a call. |
|
||||
| `hideScreensharing` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Hides the screen-sharing button. |
|
||||
| `homeserver` | | Not applicable | No | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link. |
|
||||
| `lang` | [BCP 47](https://www.rfc-editor.org/info/bcp47) code | No | No | The language the app should use. |
|
||||
| `parentUrl` | | Yes | Not applicable | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a dedicated webview we send the postMessages same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself) |
|
||||
| `password` | | No | No | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.) |
|
||||
| `perParticipantE2EE` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages. |
|
||||
| `preload` | `true` or `false` | No, defaults to `false` | Not applicable | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading. |
|
||||
| `returnToLobby` | `true` or `false` | No, defaults to `false` | Not applicable | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms. |
|
||||
| `roomId` | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids) | Yes | No | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
|
||||
| `showControls` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Displays controls like mute, screen-share, invite, and hangup buttons during a call. |
|
||||
| `skipLobby` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. |
|
||||
| `theme` | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast` | No, defaults to `dark` | No, defaults to `dark` | UI theme to use. |
|
||||
| `userId` | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers) | Yes | Not applicable | The Matrix user ID. |
|
||||
| `viaServers` | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable | No | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver. |
|
||||
| `widgetId` | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes | Not applicable | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`. |
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
"preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
|
||||
"speaker_device_selection_label": "Speaker"
|
||||
},
|
||||
"star_rating_input_label_one": "{{count}} stars",
|
||||
"star_rating_input_label_one": "{{count}} star",
|
||||
"star_rating_input_label_other": "{{count}} stars",
|
||||
"start_new_call": "Start new call",
|
||||
"start_video_button_label": "Start video",
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"applinks": {
|
||||
"details": [
|
||||
{
|
||||
"appIDs": [
|
||||
"7J4U792NQT.io.element.elementx",
|
||||
"7J4U792NQT.io.element.elementx.nightly",
|
||||
"7J4U792NQT.io.element.elementx.pr"
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"?": {
|
||||
"no_universal_links": "?*"
|
||||
},
|
||||
"exclude": true,
|
||||
"comment": "Opt out of universal links"
|
||||
},
|
||||
{
|
||||
"/": "/*",
|
||||
"comment": "Matches any URL"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
[
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "io.element.android.x.debug",
|
||||
"sha256_cert_fingerprints": [
|
||||
"B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "io.element.android.x.nightly",
|
||||
"sha256_cert_fingerprints": [
|
||||
"CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "io.element.android.x",
|
||||
"sha256_cert_fingerprints": [
|
||||
"C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
|
||||
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { getRoomIdentifierFromUrl } from "../src/UrlParams";
|
||||
import { getRoomIdentifierFromUrl, getUrlParams } from "../src/UrlParams";
|
||||
|
||||
const ROOM_NAME = "roomNameHere";
|
||||
const ROOM_ID = "!d45f138fsd";
|
||||
@@ -86,4 +86,18 @@ describe("UrlParams", () => {
|
||||
.roomAlias,
|
||||
).toBeFalsy();
|
||||
});
|
||||
|
||||
describe("preload", () => {
|
||||
it("defaults to false", () => {
|
||||
expect(getUrlParams().preload).toBe(false);
|
||||
});
|
||||
|
||||
it("ignored in SPA mode", () => {
|
||||
expect(getUrlParams("?preload=true").preload).toBe(false);
|
||||
});
|
||||
|
||||
it("respected in widget mode", () => {
|
||||
expect(getUrlParams("?preload=true&widgetId=12345").preload).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -211,8 +211,11 @@ export const getUrlParams = (
|
||||
|
||||
const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
|
||||
|
||||
const widgetId = parser.getParam("widgetId");
|
||||
const isWidget = !!widgetId;
|
||||
|
||||
return {
|
||||
widgetId: parser.getParam("widgetId"),
|
||||
widgetId,
|
||||
parentUrl: parser.getParam("parentUrl"),
|
||||
|
||||
// NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
|
||||
@@ -224,7 +227,7 @@ export const getUrlParams = (
|
||||
confineToRoom:
|
||||
parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
|
||||
appPrompt: parser.getFlagParam("appPrompt", true),
|
||||
preload: parser.getFlagParam("preload"),
|
||||
preload: isWidget ? parser.getFlagParam("preload") : false,
|
||||
hideHeader: parser.getFlagParam("hideHeader"),
|
||||
showControls: parser.getFlagParam("showControls", true),
|
||||
hideScreensharing: parser.getFlagParam("hideScreensharing"),
|
||||
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
audioInput as audioInputSetting,
|
||||
audioOutput as audioOutputSetting,
|
||||
videoInput as videoInputSetting,
|
||||
Setting,
|
||||
} from "../settings/settings";
|
||||
import { isFirefox } from "../Platform";
|
||||
|
||||
@@ -58,7 +59,7 @@ function useObservableState<T>(
|
||||
|
||||
function useMediaDevice(
|
||||
kind: MediaDeviceKind,
|
||||
fallbackDevice: string | undefined,
|
||||
setting: Setting<string | undefined>,
|
||||
usingNames: boolean,
|
||||
alwaysDefault: boolean = false,
|
||||
): MediaDevice {
|
||||
@@ -84,15 +85,21 @@ function useMediaDevice(
|
||||
[kind, requestPermissions],
|
||||
);
|
||||
const available = useObservableState(deviceObserver, []);
|
||||
const [selectedId, select] = useState(fallbackDevice);
|
||||
const [preferredId, select] = useSetting(setting);
|
||||
|
||||
return useMemo(() => {
|
||||
let devId;
|
||||
if (available) {
|
||||
devId = available.some((d) => d.deviceId === selectedId)
|
||||
? selectedId
|
||||
: available.some((d) => d.deviceId === fallbackDevice)
|
||||
? fallbackDevice
|
||||
let selectedId: string | undefined = undefined;
|
||||
if (!alwaysDefault && available) {
|
||||
// If the preferred device is available, use it. Or if every available
|
||||
// device ID is falsy, the browser is probably just being paranoid about
|
||||
// fingerprinting and we should still try using the preferred device.
|
||||
// Worst case it is not available and the browser will gracefully fall
|
||||
// back to some other device for us when requesting the media stream.
|
||||
// Otherwise, select the first available device.
|
||||
selectedId =
|
||||
available.some((d) => d.deviceId === preferredId) ||
|
||||
available.every((d) => d.deviceId === "")
|
||||
? preferredId
|
||||
: available.at(0)?.deviceId;
|
||||
}
|
||||
|
||||
@@ -102,10 +109,10 @@ function useMediaDevice(
|
||||
// device entries for the exact same device ID; deduplicate them
|
||||
[...new Map(available.map((d) => [d.deviceId, d])).values()]
|
||||
: [],
|
||||
selectedId: alwaysDefault ? undefined : devId,
|
||||
selectedId,
|
||||
select,
|
||||
};
|
||||
}, [available, selectedId, fallbackDevice, select, alwaysDefault]);
|
||||
}, [available, preferredId, select, alwaysDefault]);
|
||||
}
|
||||
|
||||
const deviceStub: MediaDevice = {
|
||||
@@ -141,36 +148,22 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
|
||||
// for ouput devices because the selector wont be shown on FF.
|
||||
const useOutputNames = usingNames && !isFirefox();
|
||||
|
||||
const [storedAudioInput, setStoredAudioInput] = useSetting(audioInputSetting);
|
||||
const [storedAudioOutput, setStoredAudioOutput] =
|
||||
useSetting(audioOutputSetting);
|
||||
const [storedVideoInput, setStoredVideoInput] = useSetting(videoInputSetting);
|
||||
|
||||
const audioInput = useMediaDevice("audioinput", storedAudioInput, usingNames);
|
||||
const audioInput = useMediaDevice(
|
||||
"audioinput",
|
||||
audioInputSetting,
|
||||
usingNames,
|
||||
);
|
||||
const audioOutput = useMediaDevice(
|
||||
"audiooutput",
|
||||
storedAudioOutput,
|
||||
audioOutputSetting,
|
||||
useOutputNames,
|
||||
alwaysUseDefaultAudio,
|
||||
);
|
||||
const videoInput = useMediaDevice("videoinput", storedVideoInput, usingNames);
|
||||
|
||||
useEffect(() => {
|
||||
if (audioInput.selectedId !== undefined)
|
||||
setStoredAudioInput(audioInput.selectedId);
|
||||
}, [setStoredAudioInput, audioInput.selectedId]);
|
||||
|
||||
useEffect(() => {
|
||||
// Skip setting state for ff output. Redundent since it is set to always return 'undefined'
|
||||
// but makes it clear while debugging that this is not happening on FF. + perf ;)
|
||||
if (audioOutput.selectedId !== undefined && !isFirefox())
|
||||
setStoredAudioOutput(audioOutput.selectedId);
|
||||
}, [setStoredAudioOutput, audioOutput.selectedId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (videoInput.selectedId !== undefined)
|
||||
setStoredVideoInput(videoInput.selectedId);
|
||||
}, [setStoredVideoInput, videoInput.selectedId]);
|
||||
const videoInput = useMediaDevice(
|
||||
"videoinput",
|
||||
videoInputSetting,
|
||||
usingNames,
|
||||
);
|
||||
|
||||
const startUsingDeviceNames = useCallback(
|
||||
() => setNumCallersUsingNames((n) => n + 1),
|
||||
|
||||
@@ -20,7 +20,6 @@ import {
|
||||
TrackEvent,
|
||||
} from "livekit-client";
|
||||
import { useObservable, useObservableEagerState } from "observable-hooks";
|
||||
import { useEffect } from "react";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { useMediaDevices } from "../livekit/MediaDevicesContext";
|
||||
@@ -35,6 +34,7 @@ export function useSwitchCamera(
|
||||
video: Observable<LocalVideoTrack | null>,
|
||||
): (() => void) | null {
|
||||
const mediaDevices = useMediaDevices();
|
||||
const setVideoInput = useLatest(mediaDevices.videoInput.select);
|
||||
|
||||
// Produce an observable like the input 'video' observable, except make it
|
||||
// emit whenever the track is muted or the device changes
|
||||
@@ -75,6 +75,12 @@ export function useSwitchCamera(
|
||||
.restartTrack({
|
||||
facingMode: facingMode === "user" ? "environment" : "user",
|
||||
})
|
||||
.then(() => {
|
||||
// Inform the MediaDeviceContext which camera was chosen
|
||||
const deviceId =
|
||||
track.mediaStreamTrack.getSettings().deviceId;
|
||||
if (deviceId !== undefined) setVideoInput.current(deviceId);
|
||||
})
|
||||
.catch((e) =>
|
||||
logger.error("Failed to switch camera", facingMode, e),
|
||||
);
|
||||
@@ -83,16 +89,5 @@ export function useSwitchCamera(
|
||||
[videoTrack],
|
||||
);
|
||||
|
||||
const setVideoInput = useLatest(mediaDevices.videoInput.select);
|
||||
useEffect(() => {
|
||||
// Watch for device changes due to switching the camera and feed them back
|
||||
// into the MediaDeviceContext
|
||||
const subscription = videoTrack.subscribe((track) => {
|
||||
const deviceId = track?.mediaStreamTrack.getSettings().deviceId;
|
||||
if (deviceId !== undefined) setVideoInput.current(deviceId);
|
||||
});
|
||||
return (): void => subscription.unsubscribe();
|
||||
}, [videoTrack, setVideoInput]);
|
||||
|
||||
return useObservableEagerState(switchCamera);
|
||||
}
|
||||
|
||||
18
src/settings/DeviceSelection.module.css
Normal file
18
src/settings/DeviceSelection.module.css
Normal file
@@ -0,0 +1,18 @@
|
||||
.selection {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin-block: var(--cpd-space-3x) 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-block: 6px var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
}
|
||||
71
src/settings/DeviceSelection.tsx
Normal file
71
src/settings/DeviceSelection.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { ChangeEvent, FC, useCallback, useId } from "react";
|
||||
import {
|
||||
Heading,
|
||||
InlineField,
|
||||
Label,
|
||||
RadioControl,
|
||||
Separator,
|
||||
} from "@vector-im/compound-web";
|
||||
|
||||
import { MediaDevice } from "../livekit/MediaDevicesContext";
|
||||
import styles from "./DeviceSelection.module.css";
|
||||
|
||||
interface Props {
|
||||
devices: MediaDevice;
|
||||
caption: string;
|
||||
}
|
||||
|
||||
export const DeviceSelection: FC<Props> = ({ devices, caption }) => {
|
||||
const groupId = useId();
|
||||
const onChange = useCallback(
|
||||
(e: ChangeEvent<HTMLInputElement>) => {
|
||||
devices.select(e.target.value);
|
||||
},
|
||||
[devices],
|
||||
);
|
||||
|
||||
if (devices.available.length == 0) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.selection}>
|
||||
<Heading
|
||||
type="body"
|
||||
weight="semibold"
|
||||
size="sm"
|
||||
as="h4"
|
||||
className={styles.title}
|
||||
>
|
||||
{caption}
|
||||
</Heading>
|
||||
<Separator className={styles.separator} />
|
||||
<div className={styles.options}>
|
||||
{devices.available.map(({ deviceId, label }, index) => (
|
||||
<InlineField
|
||||
key={deviceId}
|
||||
name={groupId}
|
||||
control={
|
||||
<RadioControl
|
||||
checked={deviceId === devices.selectedId}
|
||||
onChange={onChange}
|
||||
value={deviceId}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Label>
|
||||
{!!label && label.trim().length > 0
|
||||
? label
|
||||
: `${caption} ${index + 1}`}
|
||||
</Label>
|
||||
</InlineField>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { ChangeEvent, FC, ReactNode, useCallback } from "react";
|
||||
import { ChangeEvent, FC, useCallback } from "react";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { Dropdown, Separator, Text } from "@vector-im/compound-web";
|
||||
import { Root as Form, Text } from "@vector-im/compound-web";
|
||||
|
||||
import { Modal } from "../Modal";
|
||||
import styles from "./SettingsModal.module.css";
|
||||
@@ -19,7 +19,6 @@ import { ProfileSettingsTab } from "./ProfileSettingsTab";
|
||||
import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
|
||||
import {
|
||||
useMediaDevices,
|
||||
MediaDevice,
|
||||
useMediaDeviceNames,
|
||||
} from "../livekit/MediaDevicesContext";
|
||||
import { widget } from "../widget";
|
||||
@@ -33,6 +32,7 @@ import {
|
||||
import { isFirefox } from "../Platform";
|
||||
import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
|
||||
import { Slider } from "../Slider";
|
||||
import { DeviceSelection } from "./DeviceSelection";
|
||||
|
||||
type SettingsTab =
|
||||
| "audio"
|
||||
@@ -70,40 +70,6 @@ export const SettingsModal: FC<Props> = ({
|
||||
);
|
||||
const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
|
||||
|
||||
// Generate a `SelectInput` with a list of devices for a given device kind.
|
||||
const generateDeviceSelection = (
|
||||
devices: MediaDevice,
|
||||
caption: string,
|
||||
): ReactNode => {
|
||||
if (devices.available.length == 0) return null;
|
||||
|
||||
const values = devices.available.map(
|
||||
({ deviceId, label }, index) =>
|
||||
[
|
||||
deviceId,
|
||||
!!label && label.trim().length > 0
|
||||
? label
|
||||
: `${caption} ${index + 1}`,
|
||||
] as [string, string],
|
||||
);
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
label={caption}
|
||||
defaultValue={
|
||||
devices.selectedId === "" || !devices.selectedId
|
||||
? "default"
|
||||
: devices.selectedId
|
||||
}
|
||||
onValueChange={(id): void => devices.select(id)}
|
||||
values={values}
|
||||
// XXX This is unused because we set a defaultValue. The component
|
||||
// shouldn't require this prop.
|
||||
placeholder=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const optInDescription = (
|
||||
<Text size="sm">
|
||||
<Trans i18nKey="settings.opt_in_description">
|
||||
@@ -125,25 +91,30 @@ export const SettingsModal: FC<Props> = ({
|
||||
name: t("common.audio"),
|
||||
content: (
|
||||
<>
|
||||
{generateDeviceSelection(devices.audioInput, t("common.microphone"))}
|
||||
{!isFirefox() &&
|
||||
generateDeviceSelection(
|
||||
devices.audioOutput,
|
||||
t("settings.speaker_device_selection_label"),
|
||||
)}
|
||||
<Separator />
|
||||
<div className={styles.volumeSlider}>
|
||||
<label>{t("settings.audio_tab.effect_volume_label")}</label>
|
||||
<p>{t("settings.audio_tab.effect_volume_description")}</p>
|
||||
<Slider
|
||||
label={t("video_tile.volume")}
|
||||
value={soundVolume}
|
||||
onValueChange={setSoundVolume}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
<Form>
|
||||
<DeviceSelection
|
||||
devices={devices.audioInput}
|
||||
caption={t("common.microphone")}
|
||||
/>
|
||||
</div>
|
||||
{!isFirefox() && (
|
||||
<DeviceSelection
|
||||
devices={devices.audioOutput}
|
||||
caption={t("settings.speaker_device_selection_label")}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.volumeSlider}>
|
||||
<label>{t("settings.audio_tab.effect_volume_label")}</label>
|
||||
<p>{t("settings.audio_tab.effect_volume_description")}</p>
|
||||
<Slider
|
||||
label={t("video_tile.volume")}
|
||||
value={soundVolume}
|
||||
onValueChange={setSoundVolume}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
</>
|
||||
),
|
||||
};
|
||||
@@ -151,7 +122,14 @@ export const SettingsModal: FC<Props> = ({
|
||||
const videoTab: Tab<SettingsTab> = {
|
||||
key: "video",
|
||||
name: t("common.video"),
|
||||
content: generateDeviceSelection(devices.videoInput, t("common.camera")),
|
||||
content: (
|
||||
<Form>
|
||||
<DeviceSelection
|
||||
devices={devices.videoInput}
|
||||
caption={t("common.camera")}
|
||||
/>
|
||||
</Form>
|
||||
),
|
||||
};
|
||||
|
||||
const preferencesTab: Tab<SettingsTab> = {
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
ConnectionState,
|
||||
LocalParticipant,
|
||||
Participant,
|
||||
ParticipantEvent,
|
||||
RemoteParticipant,
|
||||
} from "livekit-client";
|
||||
import * as ComponentsCore from "@livekit/components-core";
|
||||
@@ -211,11 +212,15 @@ function withCallViewModel(
|
||||
);
|
||||
const eventsSpy = vi
|
||||
.spyOn(ComponentsCore, "observeParticipantEvents")
|
||||
.mockImplementation((p) =>
|
||||
(speaking.get(p) ?? of(false)).pipe(
|
||||
map((s) => ({ ...p, isSpeaking: s }) as Participant),
|
||||
),
|
||||
);
|
||||
.mockImplementation((p, ...eventTypes) => {
|
||||
if (eventTypes.includes(ParticipantEvent.IsSpeakingChanged)) {
|
||||
return (speaking.get(p) ?? of(false)).pipe(
|
||||
map((s) => ({ ...p, isSpeaking: s }) as Participant),
|
||||
);
|
||||
} else {
|
||||
return of(p);
|
||||
}
|
||||
});
|
||||
|
||||
const roomEventSelectorSpy = vi
|
||||
.spyOn(ComponentsCore, "roomEventSelector")
|
||||
|
||||
@@ -24,7 +24,6 @@ import {
|
||||
EMPTY,
|
||||
Observable,
|
||||
Subject,
|
||||
audit,
|
||||
combineLatest,
|
||||
concat,
|
||||
distinctUntilChanged,
|
||||
@@ -77,6 +76,7 @@ import { spotlightExpandedLayout } from "./SpotlightExpandedLayout";
|
||||
import { oneOnOneLayout } from "./OneOnOneLayout";
|
||||
import { pipLayout } from "./PipLayout";
|
||||
import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
|
||||
import { observeSpeaker } from "./observeSpeaker";
|
||||
|
||||
// How long we wait after a focus switch before showing the real participant
|
||||
// list again
|
||||
@@ -259,22 +259,7 @@ class UserMedia {
|
||||
);
|
||||
}
|
||||
|
||||
this.speaker = this.vm.speaking.pipe(
|
||||
// Require 1 s of continuous speaking to become a speaker, and 60 s of
|
||||
// continuous silence to stop being considered a speaker
|
||||
audit((s) =>
|
||||
merge(
|
||||
timer(s ? 1000 : 60000),
|
||||
// If the speaking flag resets to its original value during this time,
|
||||
// end the silencing window to stick with that original value
|
||||
this.vm.speaking.pipe(filter((s1) => s1 !== s)),
|
||||
),
|
||||
),
|
||||
startWith(false),
|
||||
// Make this Observable hot so that the timers don't reset when you
|
||||
// resubscribe
|
||||
this.scope.state(),
|
||||
);
|
||||
this.speaker = observeSpeaker(this.vm.speaking).pipe(this.scope.state());
|
||||
|
||||
this.presenter = this.participant.pipe(
|
||||
switchMap(
|
||||
|
||||
119
src/state/observeSpeaker.test.ts
Normal file
119
src/state/observeSpeaker.test.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { describe, test } from "vitest";
|
||||
|
||||
import { withTestScheduler } from "../utils/test";
|
||||
import { observeSpeaker } from "./observeSpeaker";
|
||||
|
||||
const yesNo = {
|
||||
y: true,
|
||||
n: false,
|
||||
};
|
||||
|
||||
describe("observeSpeaker", () => {
|
||||
describe("does not activate", () => {
|
||||
const expectedOutputMarbles = "n";
|
||||
test("starts correctly", () => {
|
||||
// should default to false when no input is given
|
||||
const speakingInputMarbles = "";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("after no speaking", () => {
|
||||
const speakingInputMarbles = "n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("with speaking for 1ms", () => {
|
||||
const speakingInputMarbles = "y n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("with speaking for 999ms", () => {
|
||||
const speakingInputMarbles = "y 999ms n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("with speaking intermittently", () => {
|
||||
const speakingInputMarbles =
|
||||
"y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("with consecutive speaking then stops speaking", () => {
|
||||
const speakingInputMarbles = "y y y y y y y y y y n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("activates", () => {
|
||||
test("after 1s", () => {
|
||||
// this will active after 1s as no `n` follows it:
|
||||
const speakingInputMarbles = " y";
|
||||
const expectedOutputMarbles = "n 999ms y";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("speaking for 1001ms activates for 60s", () => {
|
||||
const speakingInputMarbles = " y 1s n ";
|
||||
const expectedOutputMarbles = "n 999ms y 60s n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("speaking for 5s activates for 64s", () => {
|
||||
const speakingInputMarbles = " y 5s n ";
|
||||
const expectedOutputMarbles = "n 999ms y 64s n";
|
||||
withTestScheduler(({ hot, expectObservable }) => {
|
||||
expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe(
|
||||
expectedOutputMarbles,
|
||||
yesNo,
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
36
src/state/observeSpeaker.ts
Normal file
36
src/state/observeSpeaker.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
import {
|
||||
Observable,
|
||||
audit,
|
||||
merge,
|
||||
timer,
|
||||
filter,
|
||||
startWith,
|
||||
distinctUntilChanged,
|
||||
} from "rxjs";
|
||||
|
||||
/**
|
||||
* Require 1 second of continuous speaking to become a speaker, and 60 second of
|
||||
* continuous silence to stop being considered a speaker
|
||||
*/
|
||||
export function observeSpeaker(
|
||||
isSpeakingObservable: Observable<boolean>,
|
||||
): Observable<boolean> {
|
||||
const distinct = isSpeakingObservable.pipe(distinctUntilChanged());
|
||||
|
||||
return distinct.pipe(
|
||||
// Either change to the new value after the timer or re-emit the same value if it toggles back
|
||||
// (audit will return the latest (toggled back) value) before the timeout.
|
||||
audit((s) =>
|
||||
merge(timer(s ? 1000 : 60000), distinct.pipe(filter((s1) => s1 !== s))),
|
||||
),
|
||||
// Filter the re-emissions (marked as: | ) that happen if we toggle quickly (<1s) from false->true->false|->..
|
||||
startWith(false),
|
||||
distinctUntilChanged(),
|
||||
);
|
||||
}
|
||||
@@ -93,6 +93,16 @@ test("reactions can be sent via keyboard presses", async () => {
|
||||
}
|
||||
});
|
||||
|
||||
test("reaction is not sent when modifier key is held", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const sendReaction = vi.fn();
|
||||
render(<TestComponent sendReaction={sendReaction} />);
|
||||
|
||||
await user.keyboard("{Meta>}1{/Meta}");
|
||||
expect(sendReaction).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("raised hand can be sent via keyboard presses", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
|
||||
@@ -43,6 +43,8 @@ export function useCallViewKeyboardShortcuts(
|
||||
(event: KeyboardEvent) => {
|
||||
if (focusElement.current === null) return;
|
||||
if (!mayReceiveKeyEvents(focusElement.current)) return;
|
||||
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
|
||||
return;
|
||||
|
||||
if (event.key === "m") {
|
||||
event.preventDefault();
|
||||
|
||||
@@ -82,6 +82,10 @@ export default defineConfig(({ mode }) => {
|
||||
// Default naming fallback
|
||||
return "assets/[name]-[hash][extname]";
|
||||
},
|
||||
manualChunks: {
|
||||
// we should be able to remove this one https://github.com/matrix-org/matrix-rust-sdk-crypto-wasm/pull/167 lands
|
||||
"matrix-sdk-crypto-wasm": ["@matrix-org/matrix-sdk-crypto-wasm"],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
18
yarn.lock
18
yarn.lock
@@ -1801,9 +1801,9 @@
|
||||
rxjs "7.8.1"
|
||||
|
||||
"@livekit/components-react@^2.0.0":
|
||||
version "2.6.8"
|
||||
resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.6.8.tgz#faa60410aef0f5d426afcc6f9b577686983c6b7b"
|
||||
integrity sha512-G6P+mrOyBiAnHjbmBTG28CxA6AT7wXT6/5dqu7M7uZAlvOCDKhPjhOs65awDQvaFlTxd/JlND75fa9d+oSbvIA==
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.6.9.tgz#2ff4691dc2cae6ed4c4b2e586a255d00e494bf9c"
|
||||
integrity sha512-j43i/Dm8dlI2jxv5wv0s+69QPVqVEjg0y2tyznfs/7RDcaIZsIIzNijPu1kLditerzvzQdRsOgFQ3UWONcTkGA==
|
||||
dependencies:
|
||||
"@livekit/components-core" "0.11.10"
|
||||
clsx "2.1.1"
|
||||
@@ -3320,9 +3320,9 @@
|
||||
prettier "^3.3.3"
|
||||
|
||||
"@vector-im/compound-web@^7.2.0":
|
||||
version "7.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.3.0.tgz#9594113ac50bff4794715104a30a60c52d15517d"
|
||||
integrity sha512-gDppQUtpk5LvNHUg+Zlv9qzo1iBAag0s3g8Ec0qS5q4zGBKG6ruXXrNUKg1aK8rpbo2hYQsGaHM6dD8NqLoq3Q==
|
||||
version "7.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.4.0.tgz#a5af8af6346f8ff6c14c70f5d4eb2eab7357a7cc"
|
||||
integrity sha512-ZRBUeEGNmj/fTkIRa8zGnyVN7ytowpfOtHChqNm+m/+OTJN3o/lOMuQHDV8jeSEW2YwPJqGvPuG/dRr89IcQkA==
|
||||
dependencies:
|
||||
"@floating-ui/react" "^0.26.24"
|
||||
"@radix-ui/react-context-menu" "^2.2.1"
|
||||
@@ -6067,9 +6067,9 @@ lines-and-columns@^1.1.6:
|
||||
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
|
||||
|
||||
livekit-client@^2.5.7:
|
||||
version "2.6.2"
|
||||
resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-2.6.2.tgz#7821cac8d293b7685a4272b8aa269685f0ae75a8"
|
||||
integrity sha512-SqXNHLgk2ZZOZyeHLXFAVAl+FVdSI+NK39LvIYstqS5X6IE5aCPlK4FqXY4l3aHpSft/BC/TR1CFGOq20ONkMA==
|
||||
version "2.6.3"
|
||||
resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-2.6.3.tgz#0c7e16bcd8b30f61e867ba287257b60db69c7801"
|
||||
integrity sha512-sUFjdERYdazGmYUCkxV46qKrL8Pg4Aw+9fs/DxV0EC/YtVd7zQh2QObip7IkyT8Ipj4gXhH8CkSinisZ1KpsJQ==
|
||||
dependencies:
|
||||
"@livekit/mutex" "1.0.0"
|
||||
"@livekit/protocol" "1.24.0"
|
||||
|
||||
Reference in New Issue
Block a user