Skip to content

Commit

Permalink
Add: Functionality to disable UI on a per section basis (#377)
Browse files Browse the repository at this point in the history 
* Add functionality to disable UI on a per section basis

* Remove erroneus setting from other dev work

* Update section header to use the Sections string

* Restore player.ts after dev work

* Fix linting errors

* Split sections into SettingsSections and StatsSections for better autocomplete
  • Loading branch information
@Belchy06
Belchy06 authored Dec 18, 2024
1 parent fca136b commit 7a5d5ac
Show file tree
Hide file tree
Showing 6 changed files with 245 additions and 144 deletions.
6 changes: 3 additions & 3 deletions Frontend/ui-library/src/Application/Application.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ import { VideoQpIndicator } from '../UI/VideoQpIndicator';
import { ConfigUI } from '../Config/ConfigUI';
import {
UIElementCreationMode,
PanelConfiguration,
isPanelEnabled,
UIElementConfig,
SettingsPanelConfiguration,
StatsPanelConfiguration,
ExtraFlags
} from '../UI/UIConfigurationTypes';
import { FullScreenIconBase, FullScreenIconExternal } from '../UI/FullscreenIcon';
Expand Down Expand Up @@ -60,7 +60,7 @@ export interface UIOptions {
settingsPanelConfig?: SettingsPanelConfiguration;
/** By default, a stats panel and associate visibility toggle button will be made.
* If needed, this behaviour can be configured. */
statsPanelConfig?: PanelConfiguration;
statsPanelConfig?: StatsPanelConfiguration;
/** If needed, the full screen button can be external or disabled. */
fullScreenControlsConfig?: UIElementConfig;
/** If needed, XR button can be external or disabled. */
Expand Down Expand Up @@ -115,7 +115,7 @@ export class Application {

if (isPanelEnabled(options.statsPanelConfig)) {
// Add stats panel
this.statsPanel = new StatsPanel();
this.statsPanel = new StatsPanel(options.statsPanelConfig);
this.uiFeaturesElement.appendChild(this.statsPanel.rootElement);
}

Expand Down
268 changes: 143 additions & 125 deletions Frontend/ui-library/src/Config/ConfigUI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@ import {
ExtraFlags,
ExtraFlagsIds,
FlagsIdsExtended,
isSectionEnabled,
isSettingEnabled,
OptionIdsExtended,
SettingsSections,
SettingsPanelConfiguration
} from '../UI/UIConfigurationTypes';

Expand Down Expand Up @@ -126,148 +128,164 @@ export class ConfigUI {
* @param settingsElem - - The element that contains all the individual settings sections, flags, and so on.
*/
populateSettingsElement(settingsElem: HTMLElement, settingsConfig: SettingsPanelConfiguration): void {
/* Setup all Pixel Streaming specific settings */
const psSettingsSection = this.buildSectionWithHeading(settingsElem, 'Pixel Streaming');

// make settings show up in DOM
if (isSettingEnabled(settingsConfig, TextParameters.SignallingServerUrl))
this.addSettingText(
psSettingsSection,
this.textParametersUi.get(TextParameters.SignallingServerUrl)
);
if (isSettingEnabled(settingsConfig, OptionParameters.StreamerId))
this.addSettingOption(
psSettingsSection,
this.optionParametersUi.get(OptionParameters.StreamerId)
);
if (isSettingEnabled(settingsConfig, Flags.AutoConnect))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoConnect));
if (isSettingEnabled(settingsConfig, Flags.AutoPlayVideo))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoPlayVideo));
if (isSettingEnabled(settingsConfig, Flags.UseMic))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseMic));
if (isSettingEnabled(settingsConfig, Flags.UseCamera))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseCamera));
if (isSettingEnabled(settingsConfig, Flags.StartVideoMuted))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.StartVideoMuted));
if (isSettingEnabled(settingsConfig, Flags.IsQualityController))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.IsQualityController));
if (isSettingEnabled(settingsConfig, Flags.ForceMonoAudio))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceMonoAudio));
if (isSettingEnabled(settingsConfig, Flags.ForceTURN))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceTURN));
if (isSettingEnabled(settingsConfig, Flags.SuppressBrowserKeys))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.SuppressBrowserKeys));
if (isSettingEnabled(settingsConfig, Flags.AFKDetection))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AFKDetection));
if (isSettingEnabled(settingsConfig, Flags.WaitForStreamer))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.WaitForStreamer));
if (isSettingEnabled(settingsConfig, NumericParameters.AFKTimeoutSecs))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.AFKTimeoutSecs)
);
if (isSettingEnabled(settingsConfig, NumericParameters.AFKCountdownSecs))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.AFKCountdownSecs)
);
if (isSettingEnabled(settingsConfig, NumericParameters.MaxReconnectAttempts))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.MaxReconnectAttempts)
);
if (isSettingEnabled(settingsConfig, NumericParameters.StreamerAutoJoinInterval))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.StreamerAutoJoinInterval)
if (isSectionEnabled(settingsConfig, SettingsSections.PixelStreaming)) {
/* Setup all Pixel Streaming specific settings */
const psSettingsSection = this.buildSectionWithHeading(
settingsElem,
SettingsSections.PixelStreaming
);

/* Setup all view/ui related settings under this section */
const viewSettingsSection = this.buildSectionWithHeading(settingsElem, 'UI');
if (isSettingEnabled(settingsConfig, Flags.MatchViewportResolution))
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.MatchViewportResolution));

if (isSettingEnabled(settingsConfig, Flags.HoveringMouseMode))
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.HoveringMouseMode));
// make settings show up in DOM
if (isSettingEnabled(settingsConfig, TextParameters.SignallingServerUrl))
this.addSettingText(
psSettingsSection,
this.textParametersUi.get(TextParameters.SignallingServerUrl)
);
if (isSettingEnabled(settingsConfig, OptionParameters.StreamerId))
this.addSettingOption(
psSettingsSection,
this.optionParametersUi.get(OptionParameters.StreamerId)
);
if (isSettingEnabled(settingsConfig, Flags.AutoConnect))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoConnect));
if (isSettingEnabled(settingsConfig, Flags.AutoPlayVideo))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AutoPlayVideo));
if (isSettingEnabled(settingsConfig, Flags.UseMic))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseMic));
if (isSettingEnabled(settingsConfig, Flags.UseCamera))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.UseCamera));
if (isSettingEnabled(settingsConfig, Flags.StartVideoMuted))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.StartVideoMuted));
if (isSettingEnabled(settingsConfig, Flags.IsQualityController))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.IsQualityController));
if (isSettingEnabled(settingsConfig, Flags.ForceMonoAudio))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceMonoAudio));
if (isSettingEnabled(settingsConfig, Flags.ForceTURN))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.ForceTURN));
if (isSettingEnabled(settingsConfig, Flags.SuppressBrowserKeys))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.SuppressBrowserKeys));
if (isSettingEnabled(settingsConfig, Flags.AFKDetection))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.AFKDetection));
if (isSettingEnabled(settingsConfig, Flags.WaitForStreamer))
this.addSettingFlag(psSettingsSection, this.flagsUi.get(Flags.WaitForStreamer));
if (isSettingEnabled(settingsConfig, NumericParameters.AFKTimeoutSecs))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.AFKTimeoutSecs)
);
if (isSettingEnabled(settingsConfig, NumericParameters.AFKCountdownSecs))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.AFKCountdownSecs)
);
if (isSettingEnabled(settingsConfig, NumericParameters.MaxReconnectAttempts))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.MaxReconnectAttempts)
);
if (isSettingEnabled(settingsConfig, NumericParameters.StreamerAutoJoinInterval))
this.addSettingNumeric(
psSettingsSection,
this.numericParametersUi.get(NumericParameters.StreamerAutoJoinInterval)
);
}

if (isSettingEnabled(settingsConfig, ExtraFlags.LightMode))
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(ExtraFlags.LightMode));
if (isSectionEnabled(settingsConfig, SettingsSections.UI)) {
/* Setup all view/ui related settings under this section */
const viewSettingsSection = this.buildSectionWithHeading(settingsElem, SettingsSections.UI);
if (isSettingEnabled(settingsConfig, Flags.MatchViewportResolution))
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.MatchViewportResolution));

/* Setup all encoder related settings under this section */
const inputSettingsSection = this.buildSectionWithHeading(settingsElem, 'Input');
if (isSettingEnabled(settingsConfig, Flags.HoveringMouseMode))
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.HoveringMouseMode));

if (isSettingEnabled(settingsConfig, Flags.KeyboardInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.KeyboardInput));
if (isSettingEnabled(settingsConfig, ExtraFlags.LightMode))
this.addSettingFlag(viewSettingsSection, this.flagsUi.get(ExtraFlags.LightMode));
}

if (isSettingEnabled(settingsConfig, Flags.MouseInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.MouseInput));
if (isSectionEnabled(settingsConfig, SettingsSections.Input)) {
/* Setup all encoder related settings under this section */
const inputSettingsSection = this.buildSectionWithHeading(settingsElem, SettingsSections.Input);

if (isSettingEnabled(settingsConfig, Flags.FakeMouseWithTouches))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.FakeMouseWithTouches));
if (isSettingEnabled(settingsConfig, Flags.KeyboardInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.KeyboardInput));

if (isSettingEnabled(settingsConfig, Flags.TouchInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.TouchInput));
if (isSettingEnabled(settingsConfig, Flags.MouseInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.MouseInput));

if (isSettingEnabled(settingsConfig, Flags.GamepadInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.GamepadInput));
if (isSettingEnabled(settingsConfig, Flags.FakeMouseWithTouches))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.FakeMouseWithTouches));

if (isSettingEnabled(settingsConfig, Flags.XRControllerInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.XRControllerInput));
if (isSettingEnabled(settingsConfig, Flags.TouchInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.TouchInput));

/* Setup all encoder related settings under this section */
const encoderSettingsSection = this.buildSectionWithHeading(settingsElem, 'Encoder');
if (isSettingEnabled(settingsConfig, Flags.GamepadInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.GamepadInput));

if (isSettingEnabled(settingsConfig, NumericParameters.CompatQualityMin))
this.addSettingNumeric(
encoderSettingsSection,
this.numericParametersUi.get(NumericParameters.CompatQualityMin)
);
if (isSettingEnabled(settingsConfig, NumericParameters.CompatQualityMax))
this.addSettingNumeric(
encoderSettingsSection,
this.numericParametersUi.get(NumericParameters.CompatQualityMax)
);

const preferredCodecOption = this.optionParametersUi.get(OptionParameters.PreferredCodec);
if (isSettingEnabled(settingsConfig, OptionParameters.PreferredCodec))
this.addSettingOption(
encoderSettingsSection,
this.optionParametersUi.get(OptionParameters.PreferredCodec)
);
if (
preferredCodecOption &&
[...preferredCodecOption.selector.options]
.map((o) => o.value)
.includes('Only available on Chrome')
) {
preferredCodecOption.disable();
if (isSettingEnabled(settingsConfig, Flags.XRControllerInput))
this.addSettingFlag(inputSettingsSection, this.flagsUi.get(Flags.XRControllerInput));
}

if (isSettingEnabled(settingsConfig, OptionParameters.PreferredQuality))
this.addSettingOption(
encoderSettingsSection,
this.optionParametersUi.get(OptionParameters.PreferredQuality)
if (isSectionEnabled(settingsConfig, SettingsSections.Encoder)) {
/* Setup all encoder related settings under this section */
const encoderSettingsSection = this.buildSectionWithHeading(
settingsElem,
SettingsSections.Encoder
);

/* Setup all webrtc related settings under this section */
const webrtcSettingsSection = this.buildSectionWithHeading(settingsElem, 'WebRTC');
if (isSettingEnabled(settingsConfig, NumericParameters.CompatQualityMin))
this.addSettingNumeric(
encoderSettingsSection,
this.numericParametersUi.get(NumericParameters.CompatQualityMin)
);
if (isSettingEnabled(settingsConfig, NumericParameters.CompatQualityMax))
this.addSettingNumeric(
encoderSettingsSection,
this.numericParametersUi.get(NumericParameters.CompatQualityMax)
);

const preferredCodecOption = this.optionParametersUi.get(OptionParameters.PreferredCodec);
if (isSettingEnabled(settingsConfig, OptionParameters.PreferredCodec))
this.addSettingOption(
encoderSettingsSection,
this.optionParametersUi.get(OptionParameters.PreferredCodec)
);
if (
preferredCodecOption &&
[...preferredCodecOption.selector.options]
.map((o) => o.value)
.includes('Only available on Chrome')
) {
preferredCodecOption.disable();
}

if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCFPS))
this.addSettingNumeric(
webrtcSettingsSection,
this.numericParametersUi.get(NumericParameters.WebRTCFPS)
);
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCMinBitrate))
this.addSettingNumeric(
webrtcSettingsSection,
this.numericParametersUi.get(NumericParameters.WebRTCMinBitrate)
);
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCMaxBitrate))
this.addSettingNumeric(
webrtcSettingsSection,
this.numericParametersUi.get(NumericParameters.WebRTCMaxBitrate)
);
if (isSettingEnabled(settingsConfig, OptionParameters.PreferredQuality))
this.addSettingOption(
encoderSettingsSection,
this.optionParametersUi.get(OptionParameters.PreferredQuality)
);
}

if (isSectionEnabled(settingsConfig, SettingsSections.WebRTC)) {
/* Setup all webrtc related settings under this section */
const webrtcSettingsSection = this.buildSectionWithHeading(settingsElem, SettingsSections.WebRTC);

if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCFPS))
this.addSettingNumeric(
webrtcSettingsSection,
this.numericParametersUi.get(NumericParameters.WebRTCFPS)
);
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCMinBitrate))
this.addSettingNumeric(
webrtcSettingsSection,
this.numericParametersUi.get(NumericParameters.WebRTCMinBitrate)
);
if (isSettingEnabled(settingsConfig, NumericParameters.WebRTCMaxBitrate))
this.addSettingNumeric(
webrtcSettingsSection,
this.numericParametersUi.get(NumericParameters.WebRTCMaxBitrate)
);
}
}

/**
Expand Down
3 changes: 2 additions & 1 deletion Frontend/ui-library/src/UI/DataChannelLatencyTest.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Copyright Epic Games, Inc. All Rights Reserved.

import { Logger, DataChannelLatencyTestResult } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5';
import { StatsSections } from './UIConfigurationTypes';

/**
* DataChannel Latency test UI elements and results handling.
Expand All @@ -26,7 +27,7 @@ export class DataChannelLatencyTest {
this._rootElement.appendChild(heading);

const headingText = document.createElement('div');
headingText.innerHTML = 'Data Channel Latency Test';
headingText.innerHTML = StatsSections.DataChannelLatencyTest;
heading.appendChild(headingText);
heading.appendChild(this.latencyTestButton);

Expand Down
3 changes: 2 additions & 1 deletion Frontend/ui-library/src/UI/LatencyTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { LatencyTestResults } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5';
import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5';
import { StatsSections } from './UIConfigurationTypes';

/**
* Latency test UI elements and results handling.
Expand All @@ -27,7 +28,7 @@ export class LatencyTest {
this._rootElement.appendChild(heading);

const headingText = document.createElement('div');
headingText.innerHTML = 'Latency Test';
headingText.innerHTML = StatsSections.LatencyTest;
heading.appendChild(headingText);
heading.appendChild(this.latencyTestButton);

Expand Down
Loading

0 comments on commit 7a5d5ac

Please sign in to comment.