@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 0.1.4 → 0.3.0

package/src/Config/SettingBase.ts

@@ -6,6 +6,8 @@
 export class SettingBase {
     id: string;
     description: string;
+    useUrlParams: boolean;
+    _urlParams: Record<string, string>;
     _label: string;
     _value: unknown;
     onChange: (changedValue: unknown, setting: SettingBase) => void;
@@ -16,9 +18,13 @@ export class SettingBase {
         label: string,
         description: string,
         defaultSettingValue: unknown,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
+            /* Do nothing, to be overridden. */
+        }
     ) {
+        this.parseURLParams();
+
         this.onChange = defaultOnChangeListener;
 
         this.onChangeEmit = () => {
@@ -62,4 +68,57 @@ export class SettingBase {
         this.onChange(this._value, this);
         this.onChangeEmit(this._value);
     }
+
+    /**
+     * Persist the setting value in URL.
+     */
+    public updateURLParams() {
+        if (this.useUrlParams) {
+            // set url params
+            const urlParams = new URLSearchParams(window.location.search);
+            const valueString = this.getValueAsString();
+            let set = false;
+            for (const [name, _value] of urlParams) {
+                if (name.toLowerCase() == this.id.toLowerCase()) {
+                    urlParams.set(name, valueString);
+                    set = true;
+                    break;
+                }
+            }
+            if (!set) {
+                urlParams.set(this.id, valueString);
+            }
+            window.history.replaceState(
+                {},
+                '',
+                urlParams.toString() !== '' ? `${location.pathname}?${urlParams}` : `${location.pathname}`
+            );
+        }
+    }
+
+    /**
+     * Allows sub types to provide their value for the url search params.
+     */
+    protected getValueAsString(): string {
+        return '';
+    }
+
+    private parseURLParams(): void {
+        this._urlParams = {};
+        const params = new URLSearchParams(window.location.search);
+        for (const [name, value] of params) {
+            this._urlParams[name.toLowerCase()] = value;
+        }
+    }
+
+    protected hasURLParam(name: string): boolean {
+        return name.toLowerCase() in this._urlParams;
+    }
+
+    protected getURLParam(name: string): string {
+        if (this.hasURLParam(name)) {
+            return this._urlParams[name.toLowerCase()];
+        }
+        return '';
+    }
 }

package/src/Config/SettingFlag.ts

@@ -6,12 +6,9 @@ import { SettingBase } from './SettingBase';
 /**
  * A boolean flag setting object with a text label.
  */
-export class SettingFlag<
-    CustomIds extends string = FlagsIds
-> extends SettingBase {
+export class SettingFlag<CustomIds extends string = FlagsIds> extends SettingBase {
     id: FlagsIds | CustomIds;
     onChangeEmit: (changedValue: boolean) => void;
-    useUrlParams: boolean;
 
     constructor(
         id: FlagsIds | CustomIds,
@@ -19,60 +16,25 @@ export class SettingFlag<
         description: string,
         defaultFlagValue: boolean,
         useUrlParams: boolean,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
+            /* Do nothing, to be overridden. */
+        }
     ) {
         super(id, label, description, defaultFlagValue, defaultOnChangeListener);
 
-        const urlParams = new URLSearchParams(window.location.search);
-        if (!useUrlParams || !urlParams.has(this.id)) {
+        if (!useUrlParams || !this.hasURLParam(this.id)) {
             this.flag = defaultFlagValue;
         } else {
             // parse flag from url parameters
-            const urlParamFlag = this.getUrlParamFlag();
-            this.flag = urlParamFlag;
+            const urlParamFlag = this.getURLParam(this.id);
+            this.flag = urlParamFlag.toLowerCase() != 'false';
         }
         this.useUrlParams = useUrlParams;
     }
 
-    /**
-     * Parse the flag value from the url parameters.
-     * @returns True if the url parameters contains /?id, but False if /?id=false
-     */
-    getUrlParamFlag(): boolean {
-        const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has(this.id)) {
-            if (
-                urlParams.get(this.id) === 'false' ||
-                urlParams.get(this.id) === 'False'
-            ) {
-                return false;
-            }
-            return true;
-        }
-        return false;
-    }
-
-    /**
-     * Persist the setting value in URL.
-     */
-    public updateURLParams() {
-        if (this.useUrlParams) {
-            // set url params
-            const urlParams = new URLSearchParams(window.location.search);
-            if (this.flag === true) {
-                urlParams.set(this.id, 'true');
-            } else {
-                urlParams.set(this.id, 'false');
-            }
-            window.history.replaceState(
-                {},
-                '',
-                urlParams.toString() !== ''
-                    ? `${location.pathname}?${urlParams}`
-                    : `${location.pathname}`
-            );
-        }
+    protected getValueAsString(): string {
+        return this.flag ? 'true' : 'false';
     }
 
     /**

package/src/Config/SettingNumber.ts

@@ -6,26 +6,25 @@ import { SettingBase } from './SettingBase';
 /**
  * A number setting object with a text label. Min and max limit the range of allowed values.
  */
-export class SettingNumber<
-    CustomIds extends string = NumericParametersIds
-> extends SettingBase {
-    _min: number;
-    _max: number;
+export class SettingNumber<CustomIds extends string = NumericParametersIds> extends SettingBase {
+    _min: number | null;
+    _max: number | null;
 
     id: NumericParametersIds | CustomIds;
     onChangeEmit: (changedValue: number) => void;
-    useUrlParams: boolean;
 
     constructor(
         id: NumericParametersIds | CustomIds,
         label: string,
         description: string,
-        min: number,
-        max: number,
+        min: number | null,
+        max: number | null,
         defaultNumber: number,
         useUrlParams: boolean,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
+            /* Do nothing, to be overridden. */
+        }
     ) {
         super(id, label, description, defaultNumber, defaultOnChangeListener);
 
@@ -33,34 +32,17 @@ export class SettingNumber<
         this._max = max;
 
         // attempt to read the number from the url params
-        const urlParams = new URLSearchParams(window.location.search);
-        if (!useUrlParams || !urlParams.has(this.id)) {
+        if (!useUrlParams || !this.hasURLParam(this.id)) {
             this.number = defaultNumber;
         } else {
-            const parsedValue = Number.parseFloat(urlParams.get(this.id));
-            this.number = Number.isNaN(parsedValue)
-                ? defaultNumber
-                : parsedValue;
+            const parsedValue = Number.parseFloat(this.getURLParam(this.id));
+            this.number = Number.isNaN(parsedValue) ? defaultNumber : parsedValue;
         }
         this.useUrlParams = useUrlParams;
     }
 
-    /**
-     * Persist the setting value in URL.
-     */
-    public updateURLParams(): void {
-        if (this.useUrlParams) {
-            // set url params like ?id=number
-            const urlParams = new URLSearchParams(window.location.search);
-            urlParams.set(this.id, this.number.toString());
-            window.history.replaceState(
-                {},
-                '',
-                urlParams.toString() !== ''
-                    ? `${location.pathname}?${urlParams}`
-                    : `${location.pathname}`
-            );
-        }
+    protected getValueAsString(): string {
+        return this.number.toString();
     }
 
     /**
@@ -83,7 +65,15 @@ export class SettingNumber<
      * @returns The clamped number.
      */
     public clamp(inNumber: number): number {
-        return Math.max(Math.min(this._max, inNumber), this._min);
+        if (this._min == null && this._max == null) {
+            return inNumber;
+        } else if (this._min == null) {
+            return Math.min(this._max, inNumber);
+        } else if (this._max == null) {
+            return Math.max(this._min, inNumber);
+        } else {
+            return Math.max(Math.min(this._max, inNumber), this._min);
+        }
     }
 
     /**

package/src/Config/SettingOption.ts

@@ -1,18 +1,19 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import type { OptionParametersIds } from './Config';
 import { SettingBase } from './SettingBase';
 
 /**
  * An Option setting object with a text label. Allows you to specify an array of options and select one of them.
  */
-export class SettingOption<
-    CustomIds extends string = OptionParametersIds
-> extends SettingBase {
+export class SettingOption<CustomIds extends string = OptionParametersIds> extends SettingBase {
     id: OptionParametersIds | CustomIds;
     onChangeEmit: (changedValue: string) => void;
     _options: Array<string>;
-    useUrlParams: boolean;
+
+    /* Transforms the url parameter value into something else, by default no transformation is made, the url param is returned as-is. */
+    _urlParamResolver: (urlParamValue: string) => string;
 
     constructor(
         id: OptionParametersIds | CustomIds,
@@ -21,49 +22,31 @@ export class SettingOption<
         defaultTextValue: string,
         options: Array<string>,
         useUrlParams: boolean,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultUrlParamResolver: (urlParamValue: string) => string = function (value: string) {
+            /* Return the string as-is by default */
+            return value;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
+            /* Do nothing, to be overridden. */
+        }
     ) {
         super(id, label, description, defaultTextValue, defaultOnChangeListener);
 
-        this.options = options;
-        const urlParams = new URLSearchParams(window.location.search);
-        const stringToMatch: string =
-            useUrlParams && urlParams.has(this.id)
-                ? this.getUrlParamText()
-                : defaultTextValue;
+        this._urlParamResolver = defaultUrlParamResolver;
+
+        const stringToMatch: string = this.hasURLParam(this.id)
+            ? this._urlParamResolver(this.getURLParam(this.id))
+            : defaultTextValue;
+
+        this.options = options ?? [stringToMatch];
         this.selected = stringToMatch;
         this.useUrlParams = useUrlParams;
     }
 
-    /**
-     * Parse the text value from the url parameters.
-     * @returns The text value parsed from the url if the url parameters contains /?id=value, but empty string if just /?id or no url param found.
-     */
-    getUrlParamText(): string {
-        const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has(this.id)) {
-            return urlParams.get(this.id) ?? '';
-        }
-        return '';
-    }
-
-    /**
-     * Persist the setting value in URL.
-     */
-    public updateURLParams() {
-        if (this.useUrlParams) {
-            // set url params
-            const urlParams = new URLSearchParams(window.location.search);
-            urlParams.set(this.id, this.selected);
-            window.history.replaceState(
-                {},
-                '',
-                urlParams.toString() !== ''
-                    ? `${location.pathname}?${urlParams}`
-                    : `${location.pathname}`
-            );
-        }
+    protected getValueAsString(): string {
+        return this.selected;
     }
 
     /**
@@ -101,24 +84,26 @@ export class SettingOption<
      * @param value Selected option
      */
     public set selected(value: string) {
-        // A user may not specify the full possible value so we instead use the closest match.
-        // eg ?xxx=H264 would select 'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f'
-        let filteredList = this.options.filter(
-            (option: string) => option.indexOf(value) !== -1
-        );
-        if (filteredList.length) {
-            this.value = filteredList[0];
+        if (value === undefined) {
             return;
-        } 
+        }
 
-        // A user has specified a codec with a fmtp string but this codec + fmtp line isn't available.
-        // in that case, just use the codec
-        filteredList = this.options.filter(
-            (option: string) => option.indexOf(value.split(' ')[0]) !== -1
-        );
-        if (filteredList.length) {
-            this.value = filteredList[0];
-            return;
+        // If options contains the value, then set that as selected
+        if (this.options.includes(value)) {
+            this.value = value;
+        } else {
+            Logger.Error(
+                `Could not set "${value}" as the selected option for ${this.id} because it wasn't one of the options.`
+            );
         }
     }
+
+    /**
+     * Set the url parameter resolver to do some transformation to the string value
+     * that is extracted from the url parameters.
+     * @param urlParam A function that transforms the extracted url parameter string for this setting to something else.
+     */
+    public set urlParamResolver(value: (urlParam: string) => string) {
+        this._urlParamResolver = value;
+    }
 }

package/src/Config/SettingText.ts

@@ -6,9 +6,7 @@ import { SettingBase } from './SettingBase';
 /**
  * A text setting object with a text label.
  */
-export class SettingText<
-    CustomIds extends string = TextParametersIds
-> extends SettingBase {
+export class SettingText<CustomIds extends string = TextParametersIds> extends SettingBase {
     id: TextParametersIds | CustomIds;
     onChangeEmit: (changedValue: string) => void;
     useUrlParams: boolean;
@@ -19,50 +17,24 @@ export class SettingText<
         description: string,
         defaultTextValue: string,
         useUrlParams: boolean,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
+            /* Do nothing, to be overridden. */
+        }
     ) {
         super(id, label, description, defaultTextValue, defaultOnChangeListener);
 
-        const urlParams = new URLSearchParams(window.location.search);
-        if (!useUrlParams || !urlParams.has(this.id)) {
+        if (!useUrlParams || !this.hasURLParam(this.id)) {
             this.text = defaultTextValue;
         } else {
             // parse flag from url parameters
-            const urlParamFlag = this.getUrlParamText();
-            this.text = urlParamFlag;
+            this.text = this.getURLParam(this.id);
         }
         this.useUrlParams = useUrlParams;
     }
 
-    /**
-     * Parse the text value from the url parameters.
-     * @returns The text value parsed from the url if the url parameters contains /?id=value, but empty string if just /?id or no url param found.
-     */
-    getUrlParamText(): string {
-        const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has(this.id)) {
-            return urlParams.get(this.id) ?? '';
-        }
-        return '';
-    }
-
-    /**
-     * Persist the setting value in URL.
-     */
-    public updateURLParams() {
-        if (this.useUrlParams) {
-            // set url params
-            const urlParams = new URLSearchParams(window.location.search);
-            urlParams.set(this.id, this.text);
-            window.history.replaceState(
-                {},
-                '',
-                urlParams.toString() !== ''
-                    ? `${location.pathname}?${urlParams}`
-                    : `${location.pathname}`
-            );
-        }
+    protected getValueAsString(): string {
+        return this.text;
     }
 
     /**

package/src/DataChannel/DataChannelController.ts

@@ -39,10 +39,7 @@ export class DataChannelController {
             this.datachannelOptions.ordered = true;
         }
 
-        this.dataChannel = this.peerConnection.createDataChannel(
-            this.label,
-            this.datachannelOptions
-        );
+        this.dataChannel = this.peerConnection.createDataChannel(this.label, this.datachannelOptions);
         this.setupDataChannel();
     }
 
@@ -51,8 +48,7 @@ export class DataChannelController {
         this.dataChannel.binaryType = 'arraybuffer';
         this.dataChannel.onopen = (ev: Event) => this.handleOnOpen(ev);
         this.dataChannel.onclose = (ev: Event) => this.handleOnClose(ev);
-        this.dataChannel.onmessage = (ev: MessageEvent) =>
-            this.handleOnMessage(ev);
+        this.dataChannel.onmessage = (ev: MessageEvent) => this.handleOnMessage(ev);
         this.dataChannel.onerror = (ev: MessageEvent) => this.handleOnError(ev);
     }
 
@@ -60,11 +56,7 @@ export class DataChannelController {
      * Handles when the Data Channel is opened
      */
     handleOnOpen(ev: Event) {
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `Data Channel (${this.label}) opened.`,
-            7
-        );
+        Logger.Info(`Data Channel (${this.label}) opened.`);
         this.onOpen(this.dataChannel?.label, ev);
     }
 
@@ -72,11 +64,7 @@ export class DataChannelController {
      * Handles when the Data Channel is closed
      */
     handleOnClose(ev: Event) {
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `Data Channel (${this.label}) closed.`,
-            7
-        );
+        Logger.Info(`Data Channel (${this.label}) closed.`);
         this.onClose(this.dataChannel?.label, ev);
     }
 
@@ -86,11 +74,7 @@ export class DataChannelController {
      */
     handleOnMessage(event: MessageEvent) {
         // Higher log level to prevent log spam with messages received
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `Data Channel (${this.label}) message: ${event}`,
-            8
-        );
+        Logger.Info(`Data Channel (${this.label}) message: ${event}`);
     }
 
     /**
@@ -98,11 +82,7 @@ export class DataChannelController {
      * @param event - Error Event
      */
     handleOnError(event: MessageEvent) {
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `Data Channel (${this.label}) error: ${event}`,
-            7
-        );
+        Logger.Info(`Data Channel (${this.label}) error: ${event}`);
         this.onError(this.dataChannel?.label, event);
     }
 

package/src/DataChannel/DataChannelLatencyTestController.ts

@@ -8,7 +8,7 @@ import {
     DataChannelLatencyTestResult,
     DataChannelLatencyTestSeq,
     DataChannelLatencyTestTimestamp
-} from "./DataChannelLatencyTestResults";
+} from './DataChannelLatencyTestResults';
 
 export type DataChannelLatencyTestConfig = {
     // test duration in milliseconds
@@ -19,7 +19,7 @@ export type DataChannelLatencyTestConfig = {
     requestSize: number;
     //response filler size
     responseSize: number;
-}
+};
 
 export type DataChannelLatencyTestSink = (request: DataChannelLatencyTestRequest) => void;
 export type DataChannelLatencyTestResultCallback = (result: DataChannelLatencyTestResult) => void;
@@ -30,7 +30,7 @@ export class DataChannelLatencyTestController {
     callback: DataChannelLatencyTestResultCallback;
     records: Map<DataChannelLatencyTestSeq, DataChannelLatencyTestRecord>;
     seq: DataChannelLatencyTestSeq;
-    interval: NodeJS.Timer;
+    intervalHandle: number = undefined;
 
     constructor(sink: DataChannelLatencyTestSink, callback: DataChannelLatencyTestResultCallback) {
         this.sink = sink;
@@ -45,20 +45,23 @@ export class DataChannelLatencyTestController {
         }
         this.startTime = Date.now();
         this.records.clear();
-        this.interval = setInterval((() => {
-            if (Date.now() - this.startTime >= config.duration) {
-                this.stop();
-            } else {
-                this.sendRequest(config.requestSize, config.responseSize);
-            }
-        }).bind(this), Math.floor(1000/config.rps));
+        this.intervalHandle = window.setInterval(
+            (() => {
+                if (Date.now() - this.startTime >= config.duration) {
+                    this.stop();
+                } else {
+                    this.sendRequest(config.requestSize, config.responseSize);
+                }
+            }).bind(this),
+            Math.floor(1000 / config.rps)
+        );
         return true;
     }
 
     stop() {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = undefined;
+        if (this.intervalHandle) {
+            window.clearInterval(this.intervalHandle);
+            this.intervalHandle = undefined;
             this.callback(this.produceResult());
         }
     }
@@ -67,31 +70,37 @@ export class DataChannelLatencyTestController {
         const resultRecords = new Map(this.records);
         return {
             records: resultRecords,
-            dataChannelRtt: Math.ceil(Array.from(this.records.values()).reduce((acc, next) => {
-                return acc + (next.playerReceivedTimestamp - next.playerSentTimestamp);
-            }, 0) / this.records.size),
-            playerToStreamerTime: Math.ceil(Array.from(this.records.values()).reduce((acc, next) => {
-                return acc + (next.streamerReceivedTimestamp - next.playerSentTimestamp);
-            }, 0) / this.records.size),
-            streamerToPlayerTime: Math.ceil(Array.from(this.records.values()).reduce((acc, next) => {
-                return acc + (next.playerReceivedTimestamp - next.streamerSentTimestamp);
-            }, 0) / this.records.size),
+            dataChannelRtt: Math.ceil(
+                Array.from(this.records.values()).reduce((acc, next) => {
+                    return acc + (next.playerReceivedTimestamp - next.playerSentTimestamp);
+                }, 0) / this.records.size
+            ),
+            playerToStreamerTime: Math.ceil(
+                Array.from(this.records.values()).reduce((acc, next) => {
+                    return acc + (next.streamerReceivedTimestamp - next.playerSentTimestamp);
+                }, 0) / this.records.size
+            ),
+            streamerToPlayerTime: Math.ceil(
+                Array.from(this.records.values()).reduce((acc, next) => {
+                    return acc + (next.playerReceivedTimestamp - next.streamerSentTimestamp);
+                }, 0) / this.records.size
+            ),
             exportLatencyAsCSV: () => {
-                let csv = "Timestamp;RTT;PlayerToStreamer;StreamerToPlayer;\n";
+                let csv = 'Timestamp;RTT;PlayerToStreamer;StreamerToPlayer;\n';
                 resultRecords.forEach((record) => {
-                    csv += record.playerSentTimestamp + ";";
-                    csv += (record.playerReceivedTimestamp - record.playerSentTimestamp) + ";";
-                    csv += (record.streamerReceivedTimestamp - record.playerSentTimestamp) + ";";
-                    csv += (record.playerReceivedTimestamp - record.streamerSentTimestamp) + ";";
-                    csv += "\n";
-                })
+                    csv += record.playerSentTimestamp + ';';
+                    csv += record.playerReceivedTimestamp - record.playerSentTimestamp + ';';
+                    csv += record.streamerReceivedTimestamp - record.playerSentTimestamp + ';';
+                    csv += record.playerReceivedTimestamp - record.streamerSentTimestamp + ';';
+                    csv += '\n';
+                });
                 return csv;
             }
-        }
+        };
     }
 
     isRunning() {
-        return !!this.interval;
+        return !!this.intervalHandle;
     }
 
     receive(response: DataChannelLatencyTestResponse) {
@@ -99,10 +108,7 @@ export class DataChannelLatencyTestController {
             return;
         }
         if (!response) {
-            Logger.Error(
-                Logger.GetStackTrace(),
-                "Undefined response from server"
-            );
+            Logger.Error('Undefined response from server');
             return;
         }
         const record = this.records.get(response.Seq);
@@ -122,8 +128,7 @@ export class DataChannelLatencyTestController {
         return {
             Seq: this.seq++,
             FillResponseSize: responseSize,
-            Filler: requestSize ? "A".repeat(requestSize) : ""
-        }
+            Filler: requestSize ? 'A'.repeat(requestSize) : ''
+        };
     }
-
 }