Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-02-02 04:05:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move 'behavior' to be a method on ObservableScope

Browse Source
This commit is contained in:
Robin
2025-07-12 00:20:44 -04:00
parent 32bf1c30d2
commit 2b76d3dd70
7 changed files with 406 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/state/Behavior.ts
View File

@@ -5,9 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { BehaviorSubject, distinctUntilChanged, Observable } from "rxjs";
import { type ObservableScope } from "./ObservableScope";
import { BehaviorSubject } from "rxjs";
/**
* A stateful, read-only reactive value. As an Observable, it is "hot" and
@@ -26,38 +24,3 @@ export type Behavior<T> = Omit<BehaviorSubject<T>, "next" | "observers">;
export function constant<T>(value: T): Behavior<T> {
return new BehaviorSubject(value);
}
declare module "rxjs" {
interface Observable<T> {
/**
* Converts this Observable into a Behavior. This requires the Observable to
* synchronously emit an initial value.
*/
behavior(scope: ObservableScope): Behavior<T>;
}
}
const nothing = Symbol("nothing");
Observable.prototype.behavior = function <T>(
this: Observable<T>,
scope: ObservableScope,
): Behavior<T> {
const subject$ = new BehaviorSubject<T | typeof nothing>(nothing);
// Push values from the Observable into the BehaviorSubject.
// BehaviorSubjects have an undesirable feature where if you call 'complete',
// they will no longer re-emit their current value upon subscription. We want
// to support Observables that complete (for example `of({})`), so we have to
// take care to not propagate the completion event.
this.pipe(scope.bind(), distinctUntilChanged()).subscribe({
next(value) {
subject$.next(value);
},
error(err) {
subject$.error(err);
},
});
if (subject$.value === nothing)
throw new Error("Behavior failed to synchronously emit an initial value");
return subject$ as Behavior<T>;
};

463
src/state/CallViewModel.ts
View File

@@ -272,9 +272,9 @@ class UserMedia {
this.participant$ as Behavior<LocalParticipant>,
encryptionSystem,
livekitRoom,
displayname$.behavior(this.scope),
handRaised$.behavior(this.scope),
reaction$.behavior(this.scope),
this.scope.behavior(displayname$),
this.scope.behavior(handRaised$),
this.scope.behavior(reaction$),
);
} else {
this.vm = new RemoteUserMediaViewModel(
@@ -285,16 +285,16 @@ class UserMedia {
>,
encryptionSystem,
livekitRoom,
displayname$.behavior(this.scope),
handRaised$.behavior(this.scope),
reaction$.behavior(this.scope),
this.scope.behavior(displayname$),
this.scope.behavior(handRaised$),
this.scope.behavior(reaction$),
);
}
this.speaker$ = observeSpeaker$(this.vm.speaking$).behavior(this.scope);
this.speaker$ = this.scope.behavior(observeSpeaker$(this.vm.speaking$));
this.presenter$ = this.participant$
.pipe(
this.presenter$ = this.scope.behavior(
this.participant$.pipe(
switchMap(
(p) =>
(p &&
@@ -307,8 +307,8 @@ class UserMedia {
).pipe(map((p) => p.isScreenShareEnabled))) ??
of(false),
),
)
.behavior(this.scope);
),
);
}
public updateParticipant(
@@ -349,7 +349,7 @@ class ScreenShare {
this.participant$.asObservable(),
encryptionSystem,
liveKitRoom,
displayName$.behavior(this.scope),
this.scope.behavior(displayName$),
participant.isLocal,
);
}
@@ -386,71 +386,72 @@ function getRoomMemberFromRtcMember(
// TODO: Move wayyyy more business logic from the call and lobby views into here
export class CallViewModel extends ViewModel {
public readonly localVideo$: Behavior<LocalVideoTrack | null> =
public readonly localVideo$ = this.scope.behavior<LocalVideoTrack | null>(
observeTrackReference$(
this.livekitRoom.localParticipant,
Track.Source.Camera,
)
.pipe(
map((trackRef) => {
const track = trackRef?.publication?.track;
return track instanceof LocalVideoTrack ? track : null;
}),
)
.behavior(this.scope);
).pipe(
map((trackRef) => {
const track = trackRef?.publication?.track;
return track instanceof LocalVideoTrack ? track : null;
}),
),
);
/**
* The raw list of RemoteParticipants as reported by LiveKit
*/
private readonly rawRemoteParticipants$: Behavior<RemoteParticipant[]> =
connectedParticipantsObserver(this.livekitRoom)
.pipe(startWith([]))
.behavior(this.scope);
private readonly rawRemoteParticipants$ = this.scope.behavior<
RemoteParticipant[]
>(connectedParticipantsObserver(this.livekitRoom).pipe(startWith([])));
/**
* Lists of RemoteParticipants to "hold" on display, even if LiveKit claims that
* they've left
*/
private readonly remoteParticipantHolds$: Behavior<RemoteParticipant[][]> =
this.connectionState$
.pipe(
withLatestFrom(this.rawRemoteParticipants$),
mergeMap(([s, ps]) => {
// Whenever we switch focuses, we should retain all the previous
// participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
// give their clients time to switch over and avoid jarring layout shifts
if (s === ECAddonConnectionState.ECSwitchingFocus) {
return concat(
// Hold these participants
of({ hold: ps }),
// Wait for time to pass and the connection state to have changed
forkJoin([
timer(POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
this.connectionState$.pipe(
filter((s) => s !== ECAddonConnectionState.ECSwitchingFocus),
take(1),
),
// Then unhold them
]).pipe(map(() => ({ unhold: ps }))),
);
} else {
return EMPTY;
}
}),
// Accumulate the hold instructions into a single list showing which
// participants are being held
accumulate([] as RemoteParticipant[][], (holds, instruction) =>
"hold" in instruction
? [instruction.hold, ...holds]
: holds.filter((h) => h !== instruction.unhold),
),
)
.behavior(this.scope);
private readonly remoteParticipantHolds$ = this.scope.behavior<
RemoteParticipant[][]
>(
this.connectionState$.pipe(
withLatestFrom(this.rawRemoteParticipants$),
mergeMap(([s, ps]) => {
// Whenever we switch focuses, we should retain all the previous
// participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
// give their clients time to switch over and avoid jarring layout shifts
if (s === ECAddonConnectionState.ECSwitchingFocus) {
return concat(
// Hold these participants
of({ hold: ps }),
// Wait for time to pass and the connection state to have changed
forkJoin([
timer(POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
this.connectionState$.pipe(
filter((s) => s !== ECAddonConnectionState.ECSwitchingFocus),
take(1),
),
// Then unhold them
]).pipe(map(() => ({ unhold: ps }))),
);
} else {
return EMPTY;
}
}),
// Accumulate the hold instructions into a single list showing which
// participants are being held
accumulate([] as RemoteParticipant[][], (holds, instruction) =>
"hold" in instruction
? [instruction.hold, ...holds]
: holds.filter((h) => h !== instruction.unhold),
),
),
);
/**
* The RemoteParticipants including those that are being "held" on the screen
*/
private readonly remoteParticipants$: Behavior<RemoteParticipant[]> =
private readonly remoteParticipants$ = this.scope.behavior<
RemoteParticipant[]
>(
combineLatest(
[this.rawRemoteParticipants$, this.remoteParticipantHolds$],
(raw, holds) => {
@@ -469,20 +470,24 @@ export class CallViewModel extends ViewModel {
return result;
},
).behavior(this.scope);
),
);
/**
* Displaynames for each member of the call. This will disambiguate
* any displaynames that clashes with another member. Only members
* joined to the call are considered here.
*/
public readonly memberDisplaynames$ = merge(
// Handle call membership changes.
fromEvent(this.matrixRTCSession, MatrixRTCSessionEvent.MembershipsChanged),
// Handle room membership changes (and displayname updates)
fromEvent(this.matrixRTCSession.room, RoomStateEvent.Members),
)
.pipe(
public readonly memberDisplaynames$ = this.scope.behavior(
merge(
// Handle call membership changes.
fromEvent(
this.matrixRTCSession,
MatrixRTCSessionEvent.MembershipsChanged,
),
// Handle room membership changes (and displayname updates)
fromEvent(this.matrixRTCSession.room, RoomStateEvent.Members),
).pipe(
startWith(null),
map(() => {
const displaynameMap = new Map<string, string>();
@@ -510,13 +515,13 @@ export class CallViewModel extends ViewModel {
// It turns out that doing the disambiguation above is rather expensive on Safari (10x slower
// than on Chrome/Firefox). This means it is important that we multicast the result so that we
// don't do this work more times than we need to. This is achieved by converting to a behavior:
)
.behavior(this.scope);
),
);
public readonly handsRaised$ = this.handsRaisedSubject$.behavior(this.scope);
public readonly handsRaised$ = this.scope.behavior(this.handsRaisedSubject$);
public readonly reactions$ = this.reactionsSubject$
.pipe(
public readonly reactions$ = this.scope.behavior(
this.reactionsSubject$.pipe(
map((v) =>
Object.fromEntries(
Object.entries(v).map(([a, { reactionOption }]) => [
@@ -525,26 +530,26 @@ export class CallViewModel extends ViewModel {
]),
),
),
)
.behavior(this.scope);
),
);
/**
* List of MediaItems that we want to display
*/
private readonly mediaItems$: Behavior<MediaItem[]> = combineLatest([
this.remoteParticipants$,
observeParticipantMedia(this.livekitRoom.localParticipant),
duplicateTiles.value$,
// Also react to changes in the MatrixRTC session list.
// The session list will also be update if a room membership changes.
// No additional RoomState event listener needs to be set up.
fromEvent(
this.matrixRTCSession,
MatrixRTCSessionEvent.MembershipsChanged,
).pipe(startWith(null)),
showNonMemberTiles.value$,
])
.pipe(
private readonly mediaItems$ = this.scope.behavior<MediaItem[]>(
combineLatest([
this.remoteParticipants$,
observeParticipantMedia(this.livekitRoom.localParticipant),
duplicateTiles.value$,
// Also react to changes in the MatrixRTC session list.
// The session list will also be update if a room membership changes.
// No additional RoomState event listener needs to be set up.
fromEvent(
this.matrixRTCSession,
MatrixRTCSessionEvent.MembershipsChanged,
).pipe(startWith(null)),
showNonMemberTiles.value$,
]).pipe(
scan(
(
prevItems,
@@ -707,19 +712,19 @@ export class CallViewModel extends ViewModel {
finalizeValue((ts) => {
for (const t of ts) t.destroy();
}),
)
.behavior(this.scope);
),
);
/**
* List of MediaItems that we want to display, that are of type UserMedia
*/
private readonly userMedia$: Behavior<UserMedia[]> = this.mediaItems$
.pipe(
private readonly userMedia$ = this.scope.behavior<UserMedia[]>(
this.mediaItems$.pipe(
map((mediaItems) =>
mediaItems.filter((m): m is UserMedia => m instanceof UserMedia),
),
)
.behavior(this.scope);
),
);
public readonly memberChanges$ = this.userMedia$
.pipe(map((mediaItems) => mediaItems.map((m) => m.id)))
@@ -737,17 +742,17 @@ export class CallViewModel extends ViewModel {
/**
* List of MediaItems that we want to display, that are of type ScreenShare
*/
private readonly screenShares$: Behavior<ScreenShare[]> = this.mediaItems$
.pipe(
private readonly screenShares$ = this.scope.behavior<ScreenShare[]>(
this.mediaItems$.pipe(
map((mediaItems) =>
mediaItems.filter((m): m is ScreenShare => m instanceof ScreenShare),
),
)
.behavior(this.scope);
),
);
private readonly spotlightSpeaker$: Behavior<UserMediaViewModel | null> =
this.userMedia$
.pipe(
private readonly spotlightSpeaker$ =
this.scope.behavior<UserMediaViewModel | null>(
this.userMedia$.pipe(
switchMap((mediaItems) =>
mediaItems.length === 0
? of([])
@@ -779,11 +784,11 @@ export class CallViewModel extends ViewModel {
null,
),
map((speaker) => speaker?.vm ?? null),
)
.behavior(this.scope);
),
);
private readonly grid$: Behavior<UserMediaViewModel[]> = this.userMedia$
.pipe(
private readonly grid$ = this.scope.behavior<UserMediaViewModel[]>(
this.userMedia$.pipe(
switchMap((mediaItems) => {
const bins = mediaItems.map((m) =>
combineLatest(
@@ -820,11 +825,11 @@ export class CallViewModel extends ViewModel {
);
}),
distinctUntilChanged(shallowEquals),
)
.behavior(this.scope);
),
);
private readonly spotlight$: Behavior<MediaViewModel[]> = this.screenShares$
.pipe(
private readonly spotlight$ = this.scope.behavior<MediaViewModel[]>(
this.screenShares$.pipe(
switchMap((screenShares) => {
if (screenShares.length > 0) {
return of(screenShares.map((m) => m.vm));
@@ -835,15 +840,15 @@ export class CallViewModel extends ViewModel {
);
}),
distinctUntilChanged(shallowEquals),
)
.behavior(this.scope);
),
);
private readonly pip$: Behavior<UserMediaViewModel | null> = combineLatest([
this.screenShares$,
this.spotlightSpeaker$,
this.mediaItems$,
])
.pipe(
private readonly pip$ = this.scope.behavior<UserMediaViewModel | null>(
combineLatest([
this.screenShares$,
this.spotlightSpeaker$,
this.mediaItems$,
]).pipe(
switchMap(([screenShares, spotlight, mediaItems]) => {
if (screenShares.length > 0) {
return this.spotlightSpeaker$;
@@ -873,8 +878,8 @@ export class CallViewModel extends ViewModel {
}),
);
}),
)
.behavior(this.scope);
),
);
private readonly hasRemoteScreenShares$: Observable<boolean> =
this.spotlight$.pipe(
@@ -888,11 +893,8 @@ export class CallViewModel extends ViewModel {
startWith(false),
);
private readonly naturalWindowMode$: Behavior<WindowMode> = fromEvent(
window,
"resize",
)
.pipe(
private readonly naturalWindowMode$ = this.scope.behavior<WindowMode>(
fromEvent(window, "resize").pipe(
startWith(null),
map(() => {
const height = window.innerHeight;
@@ -905,35 +907,36 @@ export class CallViewModel extends ViewModel {
if (width <= 600) return "narrow";
return "normal";
}),
)
.behavior(this.scope);
),
);
/**
* The general shape of the window.
*/
public readonly windowMode$: Behavior<WindowMode> = this.pipEnabled$
.pipe(
public readonly windowMode$ = this.scope.behavior<WindowMode>(
this.pipEnabled$.pipe(
switchMap((pip) =>
pip ? of<WindowMode>("pip") : this.naturalWindowMode$,
),
)
.behavior(this.scope);
),
);
private readonly spotlightExpandedToggle$ = new Subject<void>();
public readonly spotlightExpanded$: Behavior<boolean> =
this.spotlightExpandedToggle$
.pipe(accumulate(false, (expanded) => !expanded))
.behavior(this.scope);
public readonly spotlightExpanded$ = this.scope.behavior<boolean>(
this.spotlightExpandedToggle$.pipe(
accumulate(false, (expanded) => !expanded),
),
);
private readonly gridModeUserSelection$ = new Subject<GridMode>();
/**
* The layout mode of the media tile grid.
*/
public readonly gridMode$: Behavior<GridMode> =
public readonly gridMode$ =
// If the user hasn't selected spotlight and somebody starts screen sharing,
// automatically switch to spotlight mode and reset when screen sharing ends
this.gridModeUserSelection$
.pipe(
this.scope.behavior<GridMode>(
this.gridModeUserSelection$.pipe(
startWith(null),
switchMap((userSelection) =>
(userSelection === "spotlight"
@@ -952,8 +955,8 @@ export class CallViewModel extends ViewModel {
)
).pipe(startWith(userSelection ?? "grid")),
),
)
.behavior(this.scope);
),
);
public setGridMode(value: GridMode): void {
this.gridModeUserSelection$.next(value);
@@ -1014,8 +1017,8 @@ export class CallViewModel extends ViewModel {
/**
* The media to be used to produce a layout.
*/
private readonly layoutMedia$: Behavior<LayoutMedia> = this.windowMode$
.pipe(
private readonly layoutMedia$ = this.scope.behavior<LayoutMedia>(
this.windowMode$.pipe(
switchMap((windowMode) => {
switch (windowMode) {
case "normal":
@@ -1077,8 +1080,8 @@ export class CallViewModel extends ViewModel {
return this.pipLayoutMedia$;
}
}),
)
.behavior(this.scope);
),
);
// There is a cyclical dependency here: the layout algorithms want to know
// which tiles are on screen, but to know which tiles are on screen we have to
@@ -1088,13 +1091,13 @@ export class CallViewModel extends ViewModel {
private readonly setVisibleTiles = (value: number): void =>
this.visibleTiles$.next(value);
private readonly layoutInternals$: Behavior<
private readonly layoutInternals$ = this.scope.behavior<
LayoutScanState & { layout: Layout }
> = combineLatest([
this.layoutMedia$,
this.visibleTiles$.pipe(startWith(0), distinctUntilChanged()),
])
.pipe(
>(
combineLatest([
this.layoutMedia$,
this.visibleTiles$.pipe(startWith(0), distinctUntilChanged()),
]).pipe(
scan<
[LayoutMedia, number],
LayoutScanState & { layout: Layout },
@@ -1129,29 +1132,29 @@ export class CallViewModel extends ViewModel {
},
{ layout: null, tiles: TileStore.empty() },
),
)
.behavior(this.scope);
),
);
/**
* The layout of tiles in the call interface.
*/
public readonly layout$: Behavior<Layout> = this.layoutInternals$
.pipe(map(({ layout }) => layout))
.behavior(this.scope);
public readonly layout$ = this.scope.behavior<Layout>(
this.layoutInternals$.pipe(map(({ layout }) => layout)),
);
/**
* The current generation of the tile store, exposed for debugging purposes.
*/
public readonly tileStoreGeneration$: Behavior<number> = this.layoutInternals$
.pipe(map(({ tiles }) => tiles.generation))
.behavior(this.scope);
public readonly tileStoreGeneration$ = this.scope.behavior<number>(
this.layoutInternals$.pipe(map(({ tiles }) => tiles.generation)),
);
public showSpotlightIndicators$: Behavior<boolean> = this.layout$
.pipe(map((l) => l.type !== "grid"))
.behavior(this.scope);
public showSpotlightIndicators$ = this.scope.behavior<boolean>(
this.layout$.pipe(map((l) => l.type !== "grid")),
);
public showSpeakingIndicators$: Behavior<boolean> = this.layout$
.pipe(
public showSpeakingIndicators$ = this.scope.behavior<boolean>(
this.layout$.pipe(
switchMap((l) => {
switch (l.type) {
case "spotlight-landscape":
@@ -1175,29 +1178,30 @@ export class CallViewModel extends ViewModel {
return of(true);
}
}),
)
.behavior(this.scope);
),
);
public readonly toggleSpotlightExpanded$: Behavior<(() => void) | null> =
this.windowMode$
.pipe(
switchMap((mode) =>
mode === "normal"
? this.layout$.pipe(
map(
(l) =>
l.type === "spotlight-landscape" ||
l.type === "spotlight-expanded",
),
)
: of(false),
),
distinctUntilChanged(),
map((enabled) =>
enabled ? (): void => this.spotlightExpandedToggle$.next() : null,
),
)
.behavior(this.scope);
public readonly toggleSpotlightExpanded$ = this.scope.behavior<
(() => void) | null
>(
this.windowMode$.pipe(
switchMap((mode) =>
mode === "normal"
? this.layout$.pipe(
map(
(l) =>
l.type === "spotlight-landscape" ||
l.type === "spotlight-expanded",
),
)
: of(false),
),
distinctUntilChanged(),
map((enabled) =>
enabled ? (): void => this.spotlightExpandedToggle$.next() : null,
),
),
);
private readonly screenTap$ = new Subject<void>();
private readonly controlsTap$ = new Subject<void>();
@@ -1232,12 +1236,12 @@ export class CallViewModel extends ViewModel {
this.screenUnhover$.next();
}
public readonly showHeader$: Behavior<boolean> = this.windowMode$
.pipe(map((mode) => mode !== "pip" && mode !== "flat"))
.behavior(this.scope);
public readonly showHeader$ = this.scope.behavior<boolean>(
this.windowMode$.pipe(map((mode) => mode !== "pip" && mode !== "flat")),
);
public readonly showFooter$: Behavior<boolean> = this.windowMode$
.pipe(
public readonly showFooter$ = this.scope.behavior<boolean>(
this.windowMode$.pipe(
switchMap((mode) => {
switch (mode) {
case "pip":
@@ -1288,20 +1292,23 @@ export class CallViewModel extends ViewModel {
);
}
}),
)
.behavior(this.scope);
),
);
/**
* Whether audio is currently being output through the earpiece.
*/
public readonly earpieceMode$: Behavior<boolean> = combineLatest(
[
this.mediaDevices.audioOutput.available$,
this.mediaDevices.audioOutput.selected$,
],
(available, selected) =>
selected !== undefined && available.get(selected.id)?.type === "earpiece",
).behavior(this.scope);
public readonly earpieceMode$ = this.scope.behavior<boolean>(
combineLatest(
[
this.mediaDevices.audioOutput.available$,
this.mediaDevices.audioOutput.selected$,
],
(available, selected) =>
selected !== undefined &&
available.get(selected.id)?.type === "earpiece",
),
);
/**
* Callback to toggle between the earpiece and the loudspeaker.
@@ -1309,38 +1316,40 @@ export class CallViewModel extends ViewModel {
* This will be `null` in case the target does not exist in the list
* of available audio outputs.
*/
public readonly audioOutputSwitcher$: Behavior<{
public readonly audioOutputSwitcher$ = this.scope.behavior<{
targetOutput: "earpiece" | "speaker";
switch: () => void;
} | null> = combineLatest(
[
this.mediaDevices.audioOutput.available$,
this.mediaDevices.audioOutput.selected$,
],
(available, selected) => {
const selectionType = selected && available.get(selected.id)?.type;
} | null>(
combineLatest(
[
this.mediaDevices.audioOutput.available$,
this.mediaDevices.audioOutput.selected$,
],
(available, selected) => {
const selectionType = selected && available.get(selected.id)?.type;
// If we are in any output mode other than spaeker switch to speaker.
const newSelectionType: "earpiece" | "speaker" =
selectionType === "speaker" ? "earpiece" : "speaker";
const newSelection = [...available].find(
([, d]) => d.type === newSelectionType,
);
if (newSelection === undefined) return null;
// If we are in any output mode other than spaeker switch to speaker.
const newSelectionType: "earpiece" | "speaker" =
selectionType === "speaker" ? "earpiece" : "speaker";
const newSelection = [...available].find(
([, d]) => d.type === newSelectionType,
);
if (newSelection === undefined) return null;
const [id] = newSelection;
return {
targetOutput: newSelectionType,
switch: () => this.mediaDevices.audioOutput.select(id),
};
},
).behavior(this.scope);
const [id] = newSelection;
return {
targetOutput: newSelectionType,
switch: (): void => this.mediaDevices.audioOutput.select(id),
};
},
),
);
/**
* Emits an array of reactions that should be visible on the screen.
*/
public readonly visibleReactions$ = showReactions.value$
.pipe(
public readonly visibleReactions$ = this.scope.behavior(
showReactions.value$.pipe(
switchMap((show) => (show ? this.reactions$ : of({}))),
scan<
Record<string, ReactionOption>,
@@ -1355,8 +1364,8 @@ export class CallViewModel extends ViewModel {
}
return newSet;
}, []),
)
.behavior(this.scope);
),
);
/**
* Emits an array of reactions that should be played.

157
src/state/MediaDevices.ts
View File

@@ -106,8 +106,8 @@ function availableRawDevices$(
const devices$ = createMediaDeviceObserver(kind, logError, false);
const devicesWithNames$ = createMediaDeviceObserver(kind, logError, true);
return usingNames$
.pipe(
return scope.behavior(
usingNames$.pipe(
switchMap((withNames) =>
withNames
? // It might be that there is already a media stream running somewhere,
@@ -123,8 +123,8 @@ function availableRawDevices$(
: devices$,
),
startWith([]),
)
.behavior(scope);
),
);
}
function buildDeviceMap(
@@ -165,15 +165,12 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
private readonly availableRaw$: Behavior<MediaDeviceInfo[]> =
availableRawDevices$("audioinput", this.usingNames$, this.scope);
public readonly available$ = this.availableRaw$
.pipe(map(buildDeviceMap))
.behavior(this.scope);
public readonly available$ = this.scope.behavior(
this.availableRaw$.pipe(map(buildDeviceMap)),
);
public readonly selected$ = selectDevice$(
this.available$,
audioInputSetting.value$,
)
.pipe(
public readonly selected$ = this.scope.behavior(
selectDevice$(this.available$, audioInputSetting.value$).pipe(
map((id) =>
id === undefined
? undefined
@@ -191,8 +188,8 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
),
},
),
)
.behavior(this.scope);
),
);
public select(id: string): void {
audioInputSetting.setValue(id);
@@ -211,12 +208,8 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
class AudioOutput
implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
{
public readonly available$ = availableRawDevices$(
"audiooutput",
this.usingNames$,
this.scope,
)
.pipe(
public readonly available$ = this.scope.behavior(
availableRawDevices$("audiooutput", this.usingNames$, this.scope).pipe(
map((availableRaw) => {
const available: Map<string, AudioOutputDeviceLabel> =
buildDeviceMap(availableRaw);
@@ -233,14 +226,11 @@ class AudioOutput
// automatically track the default device.
return available;
}),
)
.behavior(this.scope);
),
);
public readonly selected$ = selectDevice$(
this.available$,
audioOutputSetting.value$,
)
.pipe(
public readonly selected$ = this.scope.behavior(
selectDevice$(this.available$, audioOutputSetting.value$).pipe(
map((id) =>
id === undefined
? undefined
@@ -249,8 +239,8 @@ class AudioOutput
virtualEarpiece: false,
},
),
)
.behavior(this.scope);
),
);
public select(id: string): void {
audioOutputSetting.setValue(id);
}
@@ -268,30 +258,32 @@ class AudioOutput
class ControlledAudioOutput
implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
{
public readonly available$ = combineLatest(
[controlledAvailableOutputDevices$.pipe(startWith([])), iosDeviceMenu$],
(availableRaw, iosDeviceMenu) => {
const available = new Map<string, AudioOutputDeviceLabel>(
availableRaw.map(
({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
let deviceLabel: AudioOutputDeviceLabel;
// if (isExternalHeadset) // Do we want this?
if (isEarpiece) deviceLabel = { type: "earpiece" };
else if (isSpeaker) deviceLabel = { type: "speaker" };
else deviceLabel = { type: "name", name };
return [id, deviceLabel];
},
),
);
public readonly available$ = this.scope.behavior(
combineLatest(
[controlledAvailableOutputDevices$.pipe(startWith([])), iosDeviceMenu$],
(availableRaw, iosDeviceMenu) => {
const available = new Map<string, AudioOutputDeviceLabel>(
availableRaw.map(
({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
let deviceLabel: AudioOutputDeviceLabel;
// if (isExternalHeadset) // Do we want this?
if (isEarpiece) deviceLabel = { type: "earpiece" };
else if (isSpeaker) deviceLabel = { type: "speaker" };
else deviceLabel = { type: "name", name };
return [id, deviceLabel];
},
),
);
// Create a virtual earpiece device in case a non-earpiece device is
// designated for this purpose
if (iosDeviceMenu && availableRaw.some((d) => d.forEarpiece))
available.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
// Create a virtual earpiece device in case a non-earpiece device is
// designated for this purpose
if (iosDeviceMenu && availableRaw.some((d) => d.forEarpiece))
available.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
return available;
},
).behavior(this.scope);
return available;
},
),
);
private readonly deviceSelection$ = new Subject<string>();
@@ -299,21 +291,23 @@ class ControlledAudioOutput
this.deviceSelection$.next(id);
}
public readonly selected$ = combineLatest(
[
this.available$,
merge(
controlledOutputSelection$.pipe(startWith(undefined)),
this.deviceSelection$,
),
],
(available, preferredId) => {
const id = preferredId ?? available.keys().next().value;
return id === undefined
? undefined
: { id, virtualEarpiece: id === EARPIECE_CONFIG_ID };
},
).behavior(this.scope);
public readonly selected$ = this.scope.behavior(
combineLatest(
[
this.available$,
merge(
controlledOutputSelection$.pipe(startWith(undefined)),
this.deviceSelection$,
),
],
(available, preferredId) => {
const id = preferredId ?? available.keys().next().value;
return id === undefined
? undefined
: { id, virtualEarpiece: id === EARPIECE_CONFIG_ID };
},
),
);
public constructor(private readonly scope: ObservableScope) {
this.selected$.subscribe((device) => {
@@ -335,19 +329,16 @@ class ControlledAudioOutput
}
class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
public readonly available$ = availableRawDevices$(
"videoinput",
this.usingNames$,
this.scope,
)
.pipe(map(buildDeviceMap))
.behavior(this.scope);
public readonly selected$ = selectDevice$(
this.available$,
videoInputSetting.value$,
)
.pipe(map((id) => (id === undefined ? undefined : { id })))
.behavior(this.scope);
public readonly available$ = this.scope.behavior(
availableRawDevices$("videoinput", this.usingNames$, this.scope).pipe(
map(buildDeviceMap),
),
);
public readonly selected$ = this.scope.behavior(
selectDevice$(this.available$, videoInputSetting.value$).pipe(
map((id) => (id === undefined ? undefined : { id })),
),
);
public select(id: string): void {
videoInputSetting.setValue(id);
}
@@ -381,12 +372,12 @@ export class MediaDevices {
// you to do to receive device names in lieu of a more explicit permissions
// API. This flag never resets to false, because once permissions are granted
// the first time, the user won't be prompted again until reload of the page.
private readonly usingNames$ = this.deviceNamesRequest$
.pipe(
private readonly usingNames$ = this.scope.behavior(
this.deviceNamesRequest$.pipe(
map(() => true),
startWith(false),
)
.behavior(this.scope);
),
);
public readonly audioInput: MediaDevice<
DeviceLabel,
SelectedAudioInputDevice

90
src/state/MediaViewModel.ts
View File

@@ -232,13 +232,13 @@ abstract class BaseMediaViewModel extends ViewModel {
private observeTrackReference$(
source: Track.Source,
): Behavior<TrackReferenceOrPlaceholder | undefined> {
return this.participant$
.pipe(
return this.scope.behavior(
this.participant$.pipe(
switchMap((p) =>
p === undefined ? of(undefined) : observeTrackReference$(p, source),
),
)
.behavior(this.scope);
),
);
}
public constructor(
@@ -269,16 +269,18 @@ abstract class BaseMediaViewModel extends ViewModel {
const audio$ = this.observeTrackReference$(audioSource);
this.video$ = this.observeTrackReference$(videoSource);
this.unencryptedWarning$ = combineLatest(
[audio$, this.video$],
(a, v) =>
encryptionSystem.kind !== E2eeType.NONE &&
(a?.publication?.isEncrypted === false ||
v?.publication?.isEncrypted === false),
).behavior(this.scope);
this.unencryptedWarning$ = this.scope.behavior(
combineLatest(
[audio$, this.video$],
(a, v) =>
encryptionSystem.kind !== E2eeType.NONE &&
(a?.publication?.isEncrypted === false ||
v?.publication?.isEncrypted === false),
),
);
this.encryptionStatus$ = this.participant$
.pipe(
this.encryptionStatus$ = this.scope.behavior(
this.participant$.pipe(
switchMap((participant): Observable<EncryptionStatus> => {
if (!participant) {
return of(EncryptionStatus.Connecting);
@@ -338,8 +340,8 @@ abstract class BaseMediaViewModel extends ViewModel {
);
}
}),
)
.behavior(this.scope);
),
);
}
}
@@ -358,8 +360,8 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
/**
* Whether the participant is speaking.
*/
public readonly speaking$ = this.participant$
.pipe(
public readonly speaking$ = this.scope.behavior(
this.participant$.pipe(
switchMap((p) =>
p
? observeParticipantEvents(
@@ -368,8 +370,8 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
).pipe(map((p) => p.isSpeaking))
: of(false),
),
)
.behavior(this.scope);
),
);
/**
* Whether this participant is sending audio (i.e. is unmuted on their side).
@@ -407,17 +409,17 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
displayName$,
);
const media$ = participant$
.pipe(
const media$ = this.scope.behavior(
participant$.pipe(
switchMap((p) => (p && observeParticipantMedia(p)) ?? of(undefined)),
)
.behavior(this.scope);
this.audioEnabled$ = media$
.pipe(map((m) => m?.microphoneTrack?.isMuted === false))
.behavior(this.scope);
this.videoEnabled$ = media$
.pipe(map((m) => m?.cameraTrack?.isMuted === false))
.behavior(this.scope);
),
);
this.audioEnabled$ = this.scope.behavior(
media$.pipe(map((m) => m?.microphoneTrack?.isMuted === false)),
);
this.videoEnabled$ = this.scope.behavior(
media$.pipe(map((m) => m?.cameraTrack?.isMuted === false)),
);
}
public toggleFitContain(): void {
@@ -443,8 +445,8 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
/**
* Whether the video should be mirrored.
*/
public readonly mirror$ = this.video$
.pipe(
public readonly mirror$ = this.scope.behavior(
this.video$.pipe(
switchMap((v) => {
const track = v?.publication?.track;
if (!(track instanceof LocalTrack)) return of(false);
@@ -455,8 +457,8 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
map(() => facingModeFromLocalTrack(track).facingMode === "user"),
);
}),
)
.behavior(this.scope);
),
);
/**
* Whether to show this tile in a highly visible location near the start of
@@ -520,12 +522,12 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
* The volume to which this participant's audio is set, as a scalar
* multiplier.
*/
public readonly localVolume$: Behavior<number> = merge(
this.locallyMutedToggle$.pipe(map(() => "toggle mute" as const)),
this.localVolumeAdjustment$,
this.localVolumeCommit$.pipe(map(() => "commit" as const)),
)
.pipe(
public readonly localVolume$ = this.scope.behavior<number>(
merge(
this.locallyMutedToggle$.pipe(map(() => "toggle mute" as const)),
this.localVolumeAdjustment$,
this.localVolumeCommit$.pipe(map(() => "commit" as const)),
).pipe(
accumulate({ volume: 1, committedVolume: 1 }, (state, event) => {
switch (event) {
case "toggle mute":
@@ -548,15 +550,15 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
}
}),
map(({ volume }) => volume),
)
.behavior(this.scope);
),
);
/**
* Whether this participant's audio is disabled.
*/
public readonly locallyMuted$: Behavior<boolean> = this.localVolume$
.pipe(map((volume) => volume === 0))
.behavior(this.scope);
public readonly locallyMuted$ = this.scope.behavior<boolean>(
this.localVolume$.pipe(map((volume) => volume === 0)),
);
public constructor(
id: string,

11
src/state/MuteAllAudioModel.ts
View File

@@ -10,12 +10,13 @@ import { combineLatest, startWith } from "rxjs";
import { setAudioEnabled$ } from "../controls";
import { muteAllAudio as muteAllAudioSetting } from "../settings/settings";
import { globalScope } from "./ObservableScope";
import "../state/Behavior"; // Patches in the Observable.behavior method
/**
* This can transition into sth more complete: `GroupCallViewModel.ts`
*/
export const muteAllAudio$ = combineLatest(
[setAudioEnabled$.pipe(startWith(true)), muteAllAudioSetting.value$],
(outputEnabled, settingsMute) => !outputEnabled || settingsMute,
).behavior(globalScope);
export const muteAllAudio$ = globalScope.behavior(
combineLatest(
[setAudioEnabled$.pipe(startWith(true)), muteAllAudioSetting.value$],
(outputEnabled, settingsMute) => !outputEnabled || settingsMute,
),
);

39
src/state/ObservableScope.ts
View File

@@ -5,10 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { type Observable, Subject, takeUntil } from "rxjs";
import {
BehaviorSubject,
distinctUntilChanged,
type Observable,
Subject,
takeUntil,
} from "rxjs";
import { type Behavior } from "./Behavior";
type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
const nothing = Symbol("nothing");
/**
* A scope which limits the execution lifetime of its bound Observables.
*/
@@ -25,6 +35,33 @@ export class ObservableScope {
return this.bindImpl;
}
/**
* Converts an Observable to a Behavior. If no initial value is specified, the
* Observable must synchronously emit an initial value.
*/
public behavior<T>(
setValue$: Observable<T>,
initialValue: T | typeof nothing = nothing,
): Behavior<T> {
const subject$ = new BehaviorSubject(initialValue);
// Push values from the Observable into the BehaviorSubject.
// BehaviorSubjects have an undesirable feature where if you call 'complete',
// they will no longer re-emit their current value upon subscription. We want
// to support Observables that complete (for example `of({})`), so we have to
// take care to not propagate the completion event.
setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
next(value) {
subject$.next(value);
},
error(err: unknown) {
subject$.error(err);
},
});
if (subject$.value === nothing)
throw new Error("Behavior failed to synchronously emit an initial value");
return subject$ as Behavior<T>;
}
/**
* Ends the scope, causing any bound Observables to complete.
*/

9
src/utils/test.ts
View File

@@ -124,10 +124,11 @@ export function withTestScheduler(
const initialValue =
values === undefined ? (initialMarble as T) : values[initialMarble];
// The remainder of the marble diagram should start on frame 1
return helpers
.hot(`-${marbles.slice(initialMarbleIndex + 1)}`, values, error)
.pipe(startWith(initialValue))
.behavior(scope);
return scope.behavior(
helpers
.hot(`-${marbles.slice(initialMarbleIndex + 1)}`, values, error)
.pipe(startWith(initialValue)),
);
},
}),
);