diff --git a/.changeset/cold-toys-arrive.md b/.changeset/cold-toys-arrive.md new file mode 100644 index 000000000..f2cc31da9 --- /dev/null +++ b/.changeset/cold-toys-arrive.md @@ -0,0 +1,6 @@ +--- +'@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.7': minor +'@epicgames-ps/lib-pixelstreamingfrontend-ue5.7': minor +--- + +Added Viewport Resolution Scale parameter to request higher resolution streams on small screens diff --git a/Frontend/Docs/Settings Panel.md b/Frontend/Docs/Settings Panel.md index 7e1aee1ae..45ea48f8e 100644 --- a/Frontend/Docs/Settings Panel.md +++ b/Frontend/Docs/Settings Panel.md @@ -30,7 +30,8 @@ This page will be updated with new features and commands as they become availabl ### UI | **Setting** | **Description** | | --- | --- | -| **Match viewport resolution** | Resizes the Unreal Engine application resolution to match the browser's video element size.| +| **Match viewport resolution** | Resizes the Unreal Engine application resolution to match the browser's video element size. (Note: We recommend using `-windowed` on the UE side to allow scaling beyond monitor size.)| +| **Viewport Resolution Scale** | Scale factor for viewport resolution when Match Viewport Resolution is enabled. Range: 0.1-3.0, Default: 1.0 (no scaling). Values above 1.0 (e.g., 1.5, 2.0) can improve visual quality on small screens by requesting higher resolution streams. | | **Control scheme** | If the scheme is `locked mouse` the browser will use `pointerlock` to capture your mouse, whereas if the scheme is `hovering mouse` you will retain your OS/browser cursor. | | **Color scheme** | Allows you to switch between light mode and dark mode. | diff --git a/Frontend/library/src/Config/Config.ts b/Frontend/library/src/Config/Config.ts index 165359ee1..7b52689af 100644 --- a/Frontend/library/src/Config/Config.ts +++ b/Frontend/library/src/Config/Config.ts @@ -65,6 +65,7 @@ export class NumericParameters { static MaxReconnectAttempts = 'MaxReconnectAttempts' as const; static StreamerAutoJoinInterval = 'StreamerAutoJoinInterval' as const; static KeepaliveDelay = 'KeepaliveDelay' as const; + static ViewportResolutionScale = 'ViewportResScale' as const; } export type NumericParametersKeys = Exclude; @@ -821,6 +822,22 @@ export class Config { useUrlParams ) ); + + this.numericParameters.set( + NumericParameters.ViewportResolutionScale, + new SettingNumber( + NumericParameters.ViewportResolutionScale, + 'Viewport Resolution Scale', + 'Scale factor for viewport resolution when MatchViewportResolution is enabled. 1.0 = 100%, 0.5 = 50%, 2.0 = 200%.', + 0.1 /*min*/, + 3.0 /*max*/, + settings && + Object.prototype.hasOwnProperty.call(settings, NumericParameters.ViewportResolutionScale) + ? settings[NumericParameters.ViewportResolutionScale] + : 1.0 /*value*/, + useUrlParams + ) + ); } /** diff --git a/Frontend/library/src/VideoPlayer/VideoPlayer.ts b/Frontend/library/src/VideoPlayer/VideoPlayer.ts index 70e64b854..40d2b66c8 100644 --- a/Frontend/library/src/VideoPlayer/VideoPlayer.ts +++ b/Frontend/library/src/VideoPlayer/VideoPlayer.ts @@ -1,6 +1,6 @@ // Copyright Epic Games, Inc. All Rights Reserved. -import { Config, Flags } from '../Config/Config'; +import { Config, Flags, NumericParameters } from '../Config/Config'; import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.7'; /** @@ -222,9 +222,13 @@ export class VideoPlayer { return; } + const viewportResolutionScale = this.config.getNumericSettingValue( + NumericParameters.ViewportResolutionScale + ); + this.onMatchViewportResolutionCallback( - videoElementParent.clientWidth, - videoElementParent.clientHeight + videoElementParent.clientWidth * viewportResolutionScale, + videoElementParent.clientHeight * viewportResolutionScale ); this.lastTimeResized = new Date().getTime(); diff --git a/Frontend/ui-library/src/Config/ConfigUI.ts b/Frontend/ui-library/src/Config/ConfigUI.ts index 375932bec..ffcc1162b 100644 --- a/Frontend/ui-library/src/Config/ConfigUI.ts +++ b/Frontend/ui-library/src/Config/ConfigUI.ts @@ -203,6 +203,12 @@ export class ConfigUI { if (isSettingEnabled(settingsConfig, Flags.MatchViewportResolution)) this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.MatchViewportResolution)); + if (isSettingEnabled(settingsConfig, NumericParameters.ViewportResolutionScale)) + this.addSettingNumeric( + viewSettingsSection, + this.numericParametersUi.get(NumericParameters.ViewportResolutionScale) + ); + if (isSettingEnabled(settingsConfig, Flags.HoveringMouseMode)) this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.HoveringMouseMode));