Skip to content

Commit 474f32d

Browse files
Belchy06Belchy06
committed
Add functionality to disable setting UI on a per setting basis
(cherry picked from commit ebf067b)
1 parent f5efdab commit 474f32d

File tree

3 files changed

+169
-83
lines changed

3 files changed

+169
-83
lines changed

‎Frontend/ui-library/src/Application/Application.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@ import { LabelledButton } from '../UI/LabelledButton';
2626
import { SettingsPanel } from '../UI/SettingsPanel';
2727
import { StatsPanel } from '../UI/StatsPanel';
2828
import { VideoQpIndicator } from '../UI/VideoQpIndicator';
29-
import { ConfigUI, ExtraFlags } from '../Config/ConfigUI';
29+
import { ConfigUI } from '../Config/ConfigUI';
3030
import {
3131
UIElementCreationMode,
3232
PanelConfiguration,
3333
isPanelEnabled,
34-
UIElementConfig
34+
UIElementConfig,
35+
SettingsPanelConfiguration,
36+
ExtraFlags
3537
} from '../UI/UIConfigurationTypes';
3638
import { FullScreenIconBase, FullScreenIconExternal } from '../UI/FullscreenIcon';
3739

@@ -55,7 +57,7 @@ export interface UIOptions {
5557
onColorModeChanged?: (isLightMode: boolean) => void;
5658
/** By default, a settings panel and associate visibility toggle button will be made.
5759
* If needed, this behaviour can be configured. */
58-
settingsPanelConfig?: PanelConfiguration;
60+
settingsPanelConfig?: SettingsPanelConfiguration;
5961
/** By default, a stats panel and associate visibility toggle button will be made.
6062
* If needed, this behaviour can be configured. */
6163
statsPanelConfig?: PanelConfiguration;
@@ -285,7 +287,10 @@ export class Application {
285287
*/
286288
configureSettings(): void {
287289
// This builds all the settings sections and flags under this `settingsContent` element.
288-
this.configUI.populateSettingsElement(this.settingsPanel.settingsContentElement);
290+
this.configUI.populateSettingsElement(
291+
this.settingsPanel.settingsContentElement,
292+
this._options.settingsPanelConfig
293+
);
289294

290295
this.configUI.addCustomFlagOnSettingChangedListener(ExtraFlags.LightMode, (isLightMode: boolean) => {
291296
this.configUI.setCustomFlagLabel(

‎Frontend/ui-library/src/Config/ConfigUI.ts‎

Lines changed: 116 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
SettingOption,
1818
Logger,
1919
SettingBase,
20-
OptionIds,
2120
isFlagId,
2221
isNumericId,
2322
isTextId,
@@ -27,15 +26,14 @@ import { SettingUIFlag } from './SettingUIFlag';
2726
import { SettingUINumber } from './SettingUINumber';
2827
import { SettingUIText } from './SettingUIText';
2928
import { SettingUIOption } from './SettingUIOption';
30-
31-
export class ExtraFlags {
32-
static LightMode = 'LightMode' as const;
33-
}
34-
35-
export type ExtraFlagsKeys = Exclude<keyof typeof ExtraFlags, 'prototype'>;
36-
export type ExtraFlagsIds = (typeof ExtraFlags)[ExtraFlagsKeys];
37-
38-
export type FlagsIdsExtended = FlagsIds | ExtraFlagsIds;
29+
import {
30+
ExtraFlags,
31+
ExtraFlagsIds,
32+
FlagsIdsExtended,
33+
isSettingEnabled,
34+
OptionIdsExtended,
35+
SettingsPanelConfiguration
36+
} from '../UI/UIConfigurationTypes';
3937

4038
export class ConfigUI {
4139
private customFlags = new Map<FlagsIdsExtended, SettingFlag<FlagsIdsExtended>>();
@@ -127,81 +125,116 @@ export class ConfigUI {
127125
* Setup flags with their default values and add them to the `Config.flags` map.
128126
* @param settingsElem - - The element that contains all the individual settings sections, flags, and so on.
129127
*/
130-
populateSettingsElement(settingsElem: HTMLElement): void {
128+
populateSettingsElement(settingsElem: HTMLElement, settingsConfig: SettingsPanelConfiguration): void {
131129
/* Setup all Pixel Streaming specific settings */
132130
const psSettingsSection = this.buildSectionWithHeading(settingsElem, 'Pixel Streaming');
133131

134132
// make settings show up in DOM
135-
this.addSettingText(psSettingsSection, this.textParametersUi.get(TextParameters.SignallingServerUrl));
136-
this.addSettingOption(psSettingsSection, this.optionParametersUi.get(OptionParameters.StreamerId));
137-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoConnect));
138-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoPlayVideo));
139-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseMic));
140-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseCamera));
141-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.StartVideoMuted));
142-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.IsQualityController));
143-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceMonoAudio));
144-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceTURN));
145-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.SuppressBrowserKeys));
146-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AFKDetection));
147-
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.WaitForStreamer));
148-
this.addSettingNumeric(
149-
psSettingsSection,
150-
this.numericParametersUi.get(NumericParameters.AFKTimeoutSecs)
151-
);
152-
this.addSettingNumeric(
153-
psSettingsSection,
154-
this.numericParametersUi.get(NumericParameters.AFKCountdownSecs)
155-
);
156-
this.addSettingNumeric(
157-
psSettingsSection,
158-
this.numericParametersUi.get(NumericParameters.MaxReconnectAttempts)
159-
);
160-
this.addSettingNumeric(
161-
psSettingsSection,
162-
this.numericParametersUi.get(NumericParameters.StreamerAutoJoinInterval)
163-
);
133+
if (isSettingEnabled(settingsConfig, TextParameters.SignallingServerUrl))
134+
this.addSettingText(
135+
psSettingsSection,
136+
this.textParametersUi.get(TextParameters.SignallingServerUrl)
137+
);
138+
if (isSettingEnabled(settingsConfig, OptionParameters.StreamerId))
139+
this.addSettingOption(
140+
psSettingsSection,
141+
this.optionParametersUi.get(OptionParameters.StreamerId)
142+
);
143+
if (isSettingEnabled(settingsConfig, Flags.AutoConnect))
144+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoConnect));
145+
if (isSettingEnabled(settingsConfig, Flags.AutoPlayVideo))
146+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoPlayVideo));
147+
if (isSettingEnabled(settingsConfig, Flags.UseMic))
148+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseMic));
149+
if (isSettingEnabled(settingsConfig, Flags.UseCamera))
150+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseCamera));
151+
if (isSettingEnabled(settingsConfig, Flags.StartVideoMuted))
152+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.StartVideoMuted));
153+
if (isSettingEnabled(settingsConfig, Flags.IsQualityController))
154+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.IsQualityController));
155+
if (isSettingEnabled(settingsConfig, Flags.ForceMonoAudio))
156+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceMonoAudio));
157+
if (isSettingEnabled(settingsConfig, Flags.ForceTURN))
158+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceTURN));
159+
if (isSettingEnabled(settingsConfig, Flags.SuppressBrowserKeys))
160+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.SuppressBrowserKeys));
161+
if (isSettingEnabled(settingsConfig, Flags.AFKDetection))
162+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AFKDetection));
163+
if (isSettingEnabled(settingsConfig, Flags.WaitForStreamer))
164+
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.WaitForStreamer));
165+
if (isSettingEnabled(settingsConfig, NumericParameters.AFKTimeoutSecs))
166+
this.addSettingNumeric(
167+
psSettingsSection,
168+
this.numericParametersUi.get(NumericParameters.AFKTimeoutSecs)
169+
);
170+
if (isSettingEnabled(settingsConfig, NumericParameters.AFKCountdownSecs))
171+
this.addSettingNumeric(
172+
psSettingsSection,
173+
this.numericParametersUi.get(NumericParameters.AFKCountdownSecs)
174+
);
175+
if (isSettingEnabled(settingsConfig, NumericParameters.MaxReconnectAttempts))
176+
this.addSettingNumeric(
177+
psSettingsSection,
178+
this.numericParametersUi.get(NumericParameters.MaxReconnectAttempts)
179+
);
180+
if (isSettingEnabled(settingsConfig, NumericParameters.StreamerAutoJoinInterval))
181+
this.addSettingNumeric(
182+
psSettingsSection,
183+
this.numericParametersUi.get(NumericParameters.StreamerAutoJoinInterval)
184+
);
164185

165186
/* Setup all view/ui related settings under this section */
166187
const viewSettingsSection = this.buildSectionWithHeading(settingsElem, 'UI');
167-
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.MatchViewportResolution));
188+
if (isSettingEnabled(settingsConfig, Flags.MatchViewportResolution))
189+
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.MatchViewportResolution));
168190

169-
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.HoveringMouseMode));
191+
if (isSettingEnabled(settingsConfig, Flags.HoveringMouseMode))
192+
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.HoveringMouseMode));
170193

171-
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(ExtraFlags.LightMode));
194+
if (isSettingEnabled(settingsConfig, ExtraFlags.LightMode))
195+
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(ExtraFlags.LightMode));
172196

173197
/* Setup all encoder related settings under this section */
174198
const inputSettingsSection = this.buildSectionWithHeading(settingsElem, 'Input');
175199

176-
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.KeyboardInput));
200+
if (isSettingEnabled(settingsConfig, Flags.KeyboardInput))
201+
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.KeyboardInput));
177202

178-
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.MouseInput));
203+
if (isSettingEnabled(settingsConfig, Flags.MouseInput))
204+
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.MouseInput));
179205

180-
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.FakeMouseWithTouches));
206+
if (isSettingEnabled(settingsConfig, Flags.FakeMouseWithTouches))
207+
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.FakeMouseWithTouches));
181208

182-
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.TouchInput));
209+
if (isSettingEnabled(settingsConfig, Flags.TouchInput))
210+
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.TouchInput));
183211

184-
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.GamepadInput));
212+
if (isSettingEnabled(settingsConfig, Flags.GamepadInput))
213+
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.GamepadInput));
185214

186-
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.XRControllerInput));
215+
if (isSettingEnabled(settingsConfig, Flags.XRControllerInput))
216+
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.XRControllerInput));
187217

188218
/* Setup all encoder related settings under this section */
189219
const encoderSettingsSection = this.buildSectionWithHeading(settingsElem, 'Encoder');
190220

191-
this.addSettingNumeric(
192-
encoderSettingsSection,
193-
this.numericParametersUi.get(NumericParameters.CompatQualityMin)
194-
);
195-
this.addSettingNumeric(
196-
encoderSettingsSection,
197-
this.numericParametersUi.get(NumericParameters.CompatQualityMax)
198-
);
221+
if (isSettingEnabled(settingsConfig, NumericParameters.CompatQualityMin))
222+
this.addSettingNumeric(
223+
encoderSettingsSection,
224+
this.numericParametersUi.get(NumericParameters.CompatQualityMin)
225+
);
226+
if (isSettingEnabled(settingsConfig, NumericParameters.CompatQualityMax))
227+
this.addSettingNumeric(
228+
encoderSettingsSection,
229+
this.numericParametersUi.get(NumericParameters.CompatQualityMax)
230+
);
199231

200232
const preferredCodecOption = this.optionParametersUi.get(OptionParameters.PreferredCodec);
201-
this.addSettingOption(
202-
encoderSettingsSection,
203-
this.optionParametersUi.get(OptionParameters.PreferredCodec)
204-
);
233+
if (isSettingEnabled(settingsConfig, OptionParameters.PreferredCodec))
234+
this.addSettingOption(
235+
encoderSettingsSection,
236+
this.optionParametersUi.get(OptionParameters.PreferredCodec)
237+
);
205238
if (
206239
preferredCodecOption &&
207240
[...preferredCodecOption.selector.options]
@@ -211,26 +244,30 @@ export class ConfigUI {
211244
preferredCodecOption.disable();
212245
}
213246

214-
this.addSettingOption(
215-
encoderSettingsSection,
216-
this.optionParametersUi.get(OptionParameters.PreferredQuality)
217-
);
247+
if (isSettingEnabled(settingsConfig, OptionParameters.PreferredQuality))
248+
this.addSettingOption(
249+
encoderSettingsSection,
250+
this.optionParametersUi.get(OptionParameters.PreferredQuality)
251+
);
218252

219253
/* Setup all webrtc related settings under this section */
220254
const webrtcSettingsSection = this.buildSectionWithHeading(settingsElem, 'WebRTC');
221255

222-
this.addSettingNumeric(
223-
webrtcSettingsSection,
224-
this.numericParametersUi.get(NumericParameters.WebRTCFPS)
225-
);
226-
this.addSettingNumeric(
227-
webrtcSettingsSection,
228-
this.numericParametersUi.get(NumericParameters.WebRTCMinBitrate)
229-
);
230-
this.addSettingNumeric(
231-
webrtcSettingsSection,
232-
this.numericParametersUi.get(NumericParameters.WebRTCMaxBitrate)
233-
);
256+
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCFPS))
257+
this.addSettingNumeric(
258+
webrtcSettingsSection,
259+
this.numericParametersUi.get(NumericParameters.WebRTCFPS)
260+
);
261+
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCMinBitrate))
262+
this.addSettingNumeric(
263+
webrtcSettingsSection,
264+
this.numericParametersUi.get(NumericParameters.WebRTCMinBitrate)
265+
);
266+
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCMaxBitrate))
267+
this.addSettingNumeric(
268+
webrtcSettingsSection,
269+
this.numericParametersUi.get(NumericParameters.WebRTCMaxBitrate)
270+
);
234271
}
235272

236273
/**
@@ -380,7 +417,7 @@ export class ConfigUI {
380417
return this.customFlags.get(id).flag as boolean;
381418
}
382419

383-
disableSetting(id: OptionIds | ExtraFlagsIds): void {
420+
disableSetting(id: OptionIdsExtended): void {
384421
if (isFlagId(id)) {
385422
this.flagsUi.get(id)?.disable();
386423
} else if (isNumericId(id)) {
@@ -392,7 +429,7 @@ export class ConfigUI {
392429
}
393430
}
394431

395-
enableSetting(id: OptionIds | ExtraFlagsIds): void {
432+
enableSetting(id: OptionIdsExtended): void {
396433
if (isFlagId(id)) {
397434
this.flagsUi.get(id)?.enable();
398435
} else if (isNumericId(id)) {

‎Frontend/ui-library/src/UI/UIConfigurationTypes.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
// Copyright Epic Games, Inc. All Rights Reserved.
2+
3+
import { FlagsIds, OptionIds } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5';
4+
5+
export class ExtraFlags {
6+
static LightMode = 'LightMode' as const;
7+
}
8+
9+
export type ExtraFlagsKeys = Exclude<keyof typeof ExtraFlags, 'prototype'>;
10+
export type ExtraFlagsIds = (typeof ExtraFlags)[ExtraFlagsKeys];
11+
12+
export type FlagsIdsExtended = FlagsIds | ExtraFlagsIds;
13+
14+
export type OptionIdsExtended = OptionIds | ExtraFlagsIds;
15+
116
/** Whether a stream UI element is internally made, externally provided, or disabled. */
217
export enum UIElementCreationMode {
318
CreateDefaultElement,
@@ -31,3 +46,32 @@ export type PanelConfiguration = {
3146
export function isPanelEnabled(config: PanelConfiguration | undefined): boolean {
3247
return !config || (!!config && config.isEnabled);
3348
}
49+
50+
/**
51+
* Type for all settings and a boolean to represent whether this setting UI is enabled
52+
*/
53+
export type AllSettingsConfig = {
54+
[K in OptionIdsExtended]: boolean;
55+
};
56+
57+
type SettingsConfiguration = {
58+
settingVisibility?: Partial<AllSettingsConfig>;
59+
};
60+
61+
/**
62+
* Overriden panel configuration to include setting visibility for the settings panel
63+
*/
64+
export type SettingsPanelConfiguration = PanelConfiguration & SettingsConfiguration;
65+
66+
export function isSettingEnabled(
67+
config: SettingsPanelConfiguration | undefined,
68+
setting: OptionIdsExtended
69+
): boolean {
70+
return (
71+
!config ||
72+
(!!config &&
73+
(!Object.prototype.hasOwnProperty.call(config.settingVisibility, setting) ||
74+
(Object.prototype.hasOwnProperty.call(config.settingVisibility, setting) &&
75+
config.settingVisibility[setting])))
76+
);
77+
}

0 commit comments

Comments
 (0)