@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 0.1.3 → 0.2.1

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,15 +6,12 @@ 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 {
+export class SettingNumber<CustomIds extends string = NumericParametersIds> extends SettingBase {
     _min: number;
     _max: number;
 
     id: NumericParametersIds | CustomIds;
     onChangeEmit: (changedValue: number) => void;
-    useUrlParams: boolean;
 
     constructor(
         id: NumericParametersIds | CustomIds,
@@ -24,8 +21,10 @@ export class SettingNumber<
         max: number,
         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();
     }
 
     /**

package/src/Config/SettingOption.ts

@@ -6,13 +6,10 @@ 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;
 
     constructor(
         id: OptionParametersIds | CustomIds,
@@ -21,49 +18,23 @@ 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
+        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;
+        const stringToMatch: string = this.hasURLParam(this.id)
+            ? this.getURLParam(this.id)
+            : defaultTextValue;
         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;
     }
 
     /**
@@ -103,19 +74,15 @@ export class SettingOption<
     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
-        );
+        let filteredList = this.options.filter((option: string) => option.indexOf(value) !== -1);
         if (filteredList.length) {
             this.value = filteredList[0];
             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
-        );
+        filteredList = this.options.filter((option: string) => option.indexOf(value.split(' ')[0]) !== -1);
         if (filteredList.length) {
             this.value = filteredList[0];
             return;

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;
@@ -45,13 +45,16 @@ 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.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)
+        );
         return true;
     }
 
@@ -67,27 +70,33 @@ 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() {
@@ -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) : ''
+        };
     }
-
 }

package/src/DataChannel/DataChannelLatencyTestResults.ts

@@ -4,7 +4,6 @@
  * Data Channel Latency Test types
  */
 
-
 /**
  * Unix epoch
  */
@@ -22,7 +21,7 @@ export type DataChannelLatencyTestRequest = {
     Seq: DataChannelLatencyTestSeq;
     FillResponseSize: number;
     Filler: string;
-}
+};
 
 /**
  * Response from the Streamer
@@ -32,15 +31,15 @@ export type DataChannelLatencyTestResponse = {
     Filler: string;
     ReceivedTimestamp: DataChannelLatencyTestTimestamp;
     SentTimestamp: DataChannelLatencyTestTimestamp;
-}
+};
 
 export type DataChannelLatencyTestResult = {
-    records: Map<DataChannelLatencyTestSeq, DataChannelLatencyTestRecord>
-    dataChannelRtt: number,
-    playerToStreamerTime: number,
-    streamerToPlayerTime: number,
-    exportLatencyAsCSV: () => string
-}
+    records: Map<DataChannelLatencyTestSeq, DataChannelLatencyTestRecord>;
+    dataChannelRtt: number;
+    playerToStreamerTime: number;
+    streamerToPlayerTime: number;
+    exportLatencyAsCSV: () => string;
+};
 
 export class DataChannelLatencyTestRecord {
     seq: DataChannelLatencyTestSeq;
@@ -63,5 +62,4 @@ export class DataChannelLatencyTestRecord {
         this.streamerSentTimestamp = response.SentTimestamp;
         this.responseFillerSize = response.Filler ? response.Filler.length : 0;
     }
-
 }

package/src/DataChannel/DataChannelSender.ts

@@ -18,10 +18,8 @@ export class DataChannelSender {
 
     canSend(): boolean {
         return (
-            this.dataChannelProvider.getDataChannelInstance().dataChannel !==
-                undefined &&
-            this.dataChannelProvider.getDataChannelInstance().dataChannel
-                .readyState == 'open'
+            this.dataChannelProvider.getDataChannelInstance().dataChannel !== undefined &&
+            this.dataChannelProvider.getDataChannelInstance().dataChannel.readyState == 'open'
         );
     }
 
@@ -31,22 +29,14 @@ export class DataChannelSender {
      */
     sendData(data: ArrayBuffer) {
         // reset the afk inactivity
-        const dataChannelInstance =
-            this.dataChannelProvider.getDataChannelInstance();
+        const dataChannelInstance = this.dataChannelProvider.getDataChannelInstance();
 
         if (dataChannelInstance.dataChannel.readyState == 'open') {
             dataChannelInstance.dataChannel.send(data);
-            Logger.Log(
-                Logger.GetStackTrace(),
-                `Message Sent: ${new Uint8Array(data)}`,
-                6
-            );
+            Logger.Info(`Message Sent: ${new Uint8Array(data)}`);
             this.resetAfkWarningTimerOnDataSend();
         } else {
-            Logger.Error(
-                Logger.GetStackTrace(),
-                `Message Failed: ${new Uint8Array(data)}`
-            );
+            Logger.Error(`Message Failed: ${new Uint8Array(data)}`);
         }
     }