@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 1.2.4 → 1.3.0

package/src/Inputs/MouseController.ts

@@ -5,6 +5,7 @@ import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { VideoPlayer } from '../VideoPlayer/VideoPlayer';
 import type { ActiveKeys } from './InputClassesFactory';
 import { IInputController } from './IInputController';
+import { Config } from '../Config/Config';
 
 /**
  * Extra types for Document and WheelEvent
@@ -29,6 +30,7 @@ export class MouseController implements IInputController {
     streamMessageController: StreamMessageController;
     coordinateConverter: InputCoordTranslator;
     activeKeys: ActiveKeys;
+    config: Config;
 
     // bound listeners
     onEnterListener: (event: MouseEvent) => void;
@@ -38,12 +40,14 @@ export class MouseController implements IInputController {
         streamMessageController: StreamMessageController,
         videoPlayer: VideoPlayer,
         coordinateConverter: InputCoordTranslator,
-        activeKeys: ActiveKeys
+        activeKeys: ActiveKeys,
+        config: Config
     ) {
         this.streamMessageController = streamMessageController;
         this.coordinateConverter = coordinateConverter;
         this.videoPlayer = videoPlayer;
         this.activeKeys = activeKeys;
+        this.config = config;
 
         this.onEnterListener = this.onMouseEnter.bind(this);
         this.onLeaveListener = this.onMouseLeave.bind(this);

package/src/Inputs/MouseControllerHovering.ts

@@ -4,6 +4,7 @@ import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { VideoPlayer } from '../VideoPlayer/VideoPlayer';
 import type { ActiveKeys } from './InputClassesFactory';
 import { MouseController } from './MouseController';
+import { Config, Flags } from '../Config/Config';
 
 /**
  * A mouse controller that allows the mouse to freely float over the video document.
@@ -18,13 +19,21 @@ export class MouseControllerHovering extends MouseController {
     onMouseMoveListener: (event: MouseEvent) => void;
     onContextMenuListener: (event: MouseEvent) => void;
 
+    // Buttons currently held down. While non-empty, mousemove/mouseup are
+    // listened for on `window` rather than the video element so the press is
+    // tracked even when the cursor leaves the element. UE pairs every
+    // MouseDown with a later MouseUp; without this the engine can be left
+    // with a stuck button when the user releases outside the video element.
+    private pressedButtons = new Set<number>();
+
     constructor(
         streamMessageController: StreamMessageController,
         videoPlayer: VideoPlayer,
         coordinateConverter: InputCoordTranslator,
-        activeKeys: ActiveKeys
+        activeKeys: ActiveKeys,
+        config: Config
     ) {
-        super(streamMessageController, videoPlayer, coordinateConverter, activeKeys);
+        super(streamMessageController, videoPlayer, coordinateConverter, activeKeys, config);
         this.videoElementParent = videoPlayer.getVideoParentElement() as HTMLDivElement;
         this.onMouseUpListener = this.onMouseUp.bind(this);
         this.onMouseDownListener = this.onMouseDown.bind(this);
@@ -52,26 +61,73 @@ export class MouseControllerHovering extends MouseController {
         this.videoElementParent.removeEventListener('contextmenu', this.onContextMenuListener);
         this.videoElementParent.removeEventListener('wheel', this.onMouseWheelListener);
         this.videoElementParent.removeEventListener('dblclick', this.onMouseDblClickListener);
+        // If a button was held when unregister was called, clean up the
+        // window-level listeners too.
+        if (this.pressedButtons.size > 0) {
+            window.removeEventListener('mousemove', this.onMouseMoveListener);
+            window.removeEventListener('mouseup', this.onMouseUpListener);
+            this.pressedButtons.clear();
+        }
 
         super.unregister();
     }
 
+    private startCapturing() {
+        // Move move/up listeners off the element and onto the window so they
+        // keep firing while the cursor is outside the video.
+        this.videoElementParent.removeEventListener('mousemove', this.onMouseMoveListener);
+        this.videoElementParent.removeEventListener('mouseup', this.onMouseUpListener);
+        window.addEventListener('mousemove', this.onMouseMoveListener);
+        window.addEventListener('mouseup', this.onMouseUpListener);
+    }
+
+    private stopCapturing() {
+        window.removeEventListener('mousemove', this.onMouseMoveListener);
+        window.removeEventListener('mouseup', this.onMouseUpListener);
+        this.videoElementParent.addEventListener('mousemove', this.onMouseMoveListener);
+        this.videoElementParent.addEventListener('mouseup', this.onMouseUpListener);
+    }
+
+    /**
+     * Compute (offsetX, offsetY) relative to the video element from a window-
+     * level event whose `target` may be any other element on the page.
+     */
+    private offsetFromVideo(event: MouseEvent): { x: number; y: number } {
+        if (event.currentTarget === this.videoElementParent) {
+            return { x: event.offsetX, y: event.offsetY };
+        }
+        const rect = this.videoElementParent.getBoundingClientRect();
+        return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    }
+
     private onMouseDown(event: MouseEvent) {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        const off = this.offsetFromVideo(event);
+        const coord = this.coordinateConverter.translateUnsigned(off.x, off.y);
         this.streamMessageController.toStreamerHandlers.get('MouseDown')([event.button, coord.x, coord.y]);
         event.preventDefault();
+
+        if (this.pressedButtons.size === 0) {
+            this.startCapturing();
+        }
+        this.pressedButtons.add(event.button);
     }
 
     private onMouseUp(event: MouseEvent) {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        const off = this.offsetFromVideo(event);
+        const coord = this.coordinateConverter.translateUnsigned(off.x, off.y);
         this.streamMessageController.toStreamerHandlers.get('MouseUp')([event.button, coord.x, coord.y]);
         event.preventDefault();
+
+        this.pressedButtons.delete(event.button);
+        if (this.pressedButtons.size === 0) {
+            this.stopCapturing();
+        }
     }
 
     private onContextMenu(event: MouseEvent) {
@@ -85,7 +141,8 @@ export class MouseControllerHovering extends MouseController {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        const off = this.offsetFromVideo(event);
+        const coord = this.coordinateConverter.translateUnsigned(off.x, off.y);
         const delta = this.coordinateConverter.translateSigned(event.movementX, event.movementY);
         this.streamMessageController.toStreamerHandlers.get('MouseMove')([
             coord.x,
@@ -93,7 +150,12 @@ export class MouseControllerHovering extends MouseController {
             delta.x,
             delta.y
         ]);
-        event.preventDefault();
+        // Only call preventDefault when the event originated on the video
+        // element. On window-level events the target may be a page element
+        // for which preventDefault would be wrong.
+        if (event.currentTarget === this.videoElementParent) {
+            event.preventDefault();
+        }
     }
 
     private onMouseWheel(event: WheelEvent) {
@@ -115,5 +177,16 @@ export class MouseControllerHovering extends MouseController {
         }
         const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
         this.streamMessageController.toStreamerHandlers.get('MouseDouble')([event.button, coord.x, coord.y]);
+
+        // The streamer plugin treats `MouseDouble` as a press-class event (it routes to
+        // Slate's RoutePointerDoubleClickEvent / IGenericApplicationMessageHandler::OnMouseDoubleClick)
+        // but never synthesizes the matching release. The browser's preceding `mouseup` was
+        // already consumed by the prior `MouseUp` message, so without this UE is left thinking
+        // the button is still held — manifesting as e.g. camera pans that latch on after a
+        // double-click. See issue #10.
+        // Disable Flags.MouseDoubleClickAutoRelease to restore the pre-fix behaviour.
+        if (this.config.isFlagEnabled(Flags.MouseDoubleClickAutoRelease)) {
+            this.streamMessageController.toStreamerHandlers.get('MouseUp')([event.button, coord.x, coord.y]);
+        }
     }
 }

package/src/Inputs/MouseControllerLocked.ts

@@ -5,6 +5,7 @@ import { InputCoordTranslator, TranslatedCoordUnsigned } from '../Util/InputCoor
 import { VideoPlayer } from '../VideoPlayer/VideoPlayer';
 import type { ActiveKeys } from './InputClassesFactory';
 import { MouseController } from './MouseController';
+import { Config, Flags } from '../Config/Config';
 
 /**
  * A mouse controller that locks the mouse to the video document and prevents it from leaving the window
@@ -28,9 +29,10 @@ export class MouseControllerLocked extends MouseController {
         streamMessageController: StreamMessageController,
         videoPlayer: VideoPlayer,
         coordinateConverter: InputCoordTranslator,
-        activeKeys: ActiveKeys
+        activeKeys: ActiveKeys,
+        config: Config
     ) {
-        super(streamMessageController, videoPlayer, coordinateConverter, activeKeys);
+        super(streamMessageController, videoPlayer, coordinateConverter, activeKeys, config);
         this.videoElementParent = videoPlayer.getVideoParentElement() as HTMLDivElement;
         this.x = this.videoElementParent.getBoundingClientRect().width / 2;
         this.y = this.videoElementParent.getBoundingClientRect().height / 2;
@@ -85,7 +87,7 @@ export class MouseControllerLocked extends MouseController {
     }
 
     private onRequestLock() {
-        this.videoElementParent.requestPointerLock();
+        void this.videoElementParent.requestPointerLock();
     }
 
     private onLockStateChange() {
@@ -191,5 +193,20 @@ export class MouseControllerLocked extends MouseController {
             this.normalizedCoord.x,
             this.normalizedCoord.y
         ]);
+
+        // The streamer plugin treats `MouseDouble` as a press-class event (it routes to
+        // Slate's RoutePointerDoubleClickEvent / IGenericApplicationMessageHandler::OnMouseDoubleClick)
+        // but never synthesizes the matching release. The browser's preceding `mouseup` was
+        // already consumed by the prior `MouseUp` message, so without this UE is left thinking
+        // the button is still held — manifesting as e.g. camera pans that latch on after a
+        // double-click. See issue #10.
+        // Disable Flags.MouseDoubleClickAutoRelease to restore the pre-fix behaviour.
+        if (this.config.isFlagEnabled(Flags.MouseDoubleClickAutoRelease)) {
+            this.streamMessageController.toStreamerHandlers.get('MouseUp')([
+                event.button,
+                this.normalizedCoord.x,
+                this.normalizedCoord.y
+            ]);
+        }
     }
 }

package/src/PeerConnectionController/PeerConnectionController.ts

@@ -60,7 +60,7 @@ export class PeerConnectionController {
      * Create an offer for the Web RTC handshake and send the offer to the signaling server via websocket
      * @param offerOptions - RTC Offer Options
      */
-    async createOffer(offerOptions: RTCOfferOptions, config: Config) {
+    createOffer(offerOptions: RTCOfferOptions, config: Config) {
         Logger.Info('Create Offer');
 
         const isLocalhostConnection = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
@@ -78,13 +78,13 @@ export class PeerConnectionController {
             );
         }
 
-        this.setupTransceiversAsync(useMic, useCamera).finally(() => {
+        void this.setupTransceiversAsync(useMic, useCamera).finally(() => {
             this.peerConnection
                 ?.createOffer(offerOptions)
                 .then((offer: RTCSessionDescriptionInit) => {
                     this.showTextOverlayConnecting();
                     offer.sdp = this.mungeSDP(offer.sdp, useMic);
-                    this.peerConnection?.setLocalDescription(offer);
+                    void this.peerConnection?.setLocalDescription(offer);
                     this.onSendWebRTCOffer(offer);
                 })
                 .catch(() => {
@@ -96,7 +96,7 @@ export class PeerConnectionController {
     /**
      * Receive offer from UE side and process it as the remote description of this peer connection
      */
-    async receiveOffer(offer: RTCSessionDescriptionInit, config: Config) {
+    receiveOffer(offer: RTCSessionDescriptionInit, config: Config) {
         Logger.Info('Receive Offer');
 
         // If UE or JSStreamer did send abs-capture-time RTP header extension to a non-Chrome browser
@@ -110,7 +110,7 @@ export class PeerConnectionController {
             );
         }
 
-        this.peerConnection?.setRemoteDescription(offer).then(() => {
+        void this.peerConnection?.setRemoteDescription(offer).then(() => {
             // Fire event for when remote offer description is set
             this.onSetRemoteDescription(offer);
 
@@ -136,7 +136,7 @@ export class PeerConnectionController {
                 this.fuzzyIntersectUEAndBrowserCodecs(offer)
             );
 
-            this.setupTransceiversAsync(useMic, useCamera).finally(() => {
+            void this.setupTransceiversAsync(useMic, useCamera).finally(() => {
                 this.peerConnection
                     ?.createAnswer()
                     .then((Answer: RTCSessionDescriptionInit) => {
@@ -158,7 +158,7 @@ export class PeerConnectionController {
      * @param answer - RTC Session Descriptor from the Signaling Server
      */
     receiveAnswer(answer: RTCSessionDescriptionInit) {
-        this.peerConnection?.setRemoteDescription(answer);
+        void this.peerConnection?.setRemoteDescription(answer);
 
         // Add our list of preferred codecs, in order of preference
         this.config.setOptionSettingOptions(
@@ -171,7 +171,7 @@ export class PeerConnectionController {
      * Generate Aggregated Stats and then fire a onVideo Stats event
      */
     generateStats() {
-        this.peerConnection.getStats().then((statsData: RTCStatsReport) => {
+        void this.peerConnection?.getStats().then((statsData: RTCStatsReport) => {
             this.aggregatedStats.processStats(statsData);
 
             this.onVideoStats(this.aggregatedStats);
@@ -293,15 +293,15 @@ export class PeerConnectionController {
             }
         }
 
-        this.peerConnection?.addIceCandidate(iceCandidate);
+        void this.peerConnection?.addIceCandidate(iceCandidate);
     }
 
     /**
      * When the RTC Peer Connection Signaling server state Changes
      * @param state - Signaling Server State Change Event
      */
-    handleSignalStateChange(state: Event) {
-        Logger.Info('signaling state change: ' + state);
+    handleSignalStateChange(_state: Event) {
+        Logger.Info('signaling state change: ' + this.peerConnection?.signalingState);
     }
 
     /**
@@ -309,7 +309,7 @@ export class PeerConnectionController {
      * @param state - Ice Connection State
      */
     handleIceConnectionStateChange(state: Event) {
-        Logger.Info('ice connection state change: ' + state);
+        Logger.Info('ice connection state change: ' + this.peerConnection?.iceConnectionState);
         this.onIceConnectionStateChange(state);
     }
 
@@ -326,13 +326,13 @@ export class PeerConnectionController {
      * @param event - The webRtc track event
      */
     handleOnTrack(event: RTCTrackEvent) {
-        if (event.streams.length < 1 || event.streams[0].id == 'probator') {
+        if (event.streams.length < 1 || event.streams[0].id === 'probator') {
             return;
         }
-        if (event.track.kind == 'video') {
+        if (event.track.kind === 'video') {
             this.videoTrack = event.track;
         }
-        if (event.track.kind == 'audio') {
+        if (event.track.kind === 'audio') {
             this.audioTrack = event.track;
         }
         this.onTrack(event);
@@ -538,8 +538,8 @@ export class PeerConnectionController {
                 for (const transceiver of this.peerConnection?.getTransceivers() ?? []) {
                     if (RTCUtils.canTransceiverReceiveVideo(transceiver)) {
                         for (const track of stream.getTracks()) {
-                            if (track.kind && track.kind == 'video') {
-                                transceiver.sender.replaceTrack(track);
+                            if (track.kind === 'video') {
+                                void transceiver.sender.replaceTrack(track);
                                 transceiver.direction = 'sendrecv';
                             }
                         }
@@ -547,7 +547,7 @@ export class PeerConnectionController {
                 }
             } else {
                 for (const track of stream.getTracks()) {
-                    if (track.kind && track.kind == 'video') {
+                    if (track.kind === 'video') {
                         this.peerConnection?.addTransceiver(track, {
                             direction: 'sendrecv'
                         });
@@ -587,8 +587,8 @@ export class PeerConnectionController {
                 for (const transceiver of this.peerConnection?.getTransceivers() ?? []) {
                     if (RTCUtils.canTransceiverReceiveAudio(transceiver)) {
                         for (const track of stream.getTracks()) {
-                            if (track.kind && track.kind == 'audio') {
-                                transceiver.sender.replaceTrack(track);
+                            if (track.kind === 'audio') {
+                                void transceiver.sender.replaceTrack(track);
                                 transceiver.direction = 'sendrecv';
                             }
                         }
@@ -596,7 +596,7 @@ export class PeerConnectionController {
                 }
             } else {
                 for (const track of stream.getTracks()) {
-                    if (track.kind && track.kind == 'audio') {
+                    if (track.kind === 'audio') {
                         this.peerConnection?.addTransceiver(track, {
                             direction: 'sendrecv'
                         });
@@ -692,7 +692,7 @@ export class PeerConnectionController {
                         .join(';');
                 const match = matcher.exec(str);
                 if (match !== null) {
-                    if (c.name == 'VP9') {
+                    if (c.name === 'VP9') {
                         // UE answers don't specify profile but we know we want profile 0
                         c.parameters = {
                             'profile-id': '0'

package/src/PixelStreaming/PixelStreaming.ts

@@ -518,6 +518,32 @@ export class PixelStreaming {
     _onVideoInitialized() {
         this._eventEmitter.dispatchEvent(new VideoInitializedEvent());
         this._videoStartTime = Date.now();
+        this.checkForAutoEnterVR();
+    }
+
+    /**
+     * If the AutoEnterVR flag is set and an immersive-vr session is supported,
+     * request the WebXR session. Browsers typically require a user gesture for
+     * `requestSession`; if no gesture is currently active the request will be
+     * rejected and a warning is logged. Callers that need a guaranteed entry
+     * (e.g. AutoConnect from a fresh page load) should still wire up a button.
+     */
+    private checkForAutoEnterVR() {
+        if (!this.config.isFlagEnabled(Flags.AutoEnterVR)) {
+            return;
+        }
+        WebXRController.isSessionSupported('immersive-vr')
+            .then((supported: boolean) => {
+                if (!supported) {
+                    Logger.Info('AutoEnterVR is on but immersive-vr is not supported on this device.');
+                    return;
+                }
+                this._webXrController.xrClicked();
+            })
+            .catch((err: unknown) => {
+                const msg = err instanceof Error ? err.message : JSON.stringify(err);
+                Logger.Warning(`AutoEnterVR check failed: ${msg}`);
+            });
     }
 
     /**

package/src/UeInstanceMessage/SendMessageController.ts

@@ -62,7 +62,6 @@ export class SendMessageController {
         }
 
         let byteLength = 0;
-        const textEncoder = new TextEncoder();
         // One loop to calculate the length in bytes of all of the provided data
         messageData.forEach((element: number | string, idx: number) => {
             const type = messageFormat.structure[idx];
@@ -90,8 +89,8 @@ export class SendMessageController {
                 case 'string':
                     // 2 bytes for string length
                     byteLength += 2;
-                    // 2 bytes per characters
-                    byteLength += 2 * textEncoder.encode(element as string).length;
+                    // 2 bytes per character
+                    byteLength += 2 * (element as string).length;
                     break;
             }
         });

package/src/UeInstanceMessage/StreamMessageController.ts

@@ -8,8 +8,8 @@ export class ToStreamerMessage {
 }
 
 export class StreamMessageController {
-    toStreamerHandlers: Map<string, (messageData?: Array<number | string> | undefined) => void>;
-    fromStreamerHandlers: Map<string, (messageType: string, messageData?: ArrayBuffer | undefined) => void>;
+    toStreamerHandlers: Map<string, (messageData?: Array<number | string>) => void>;
+    fromStreamerHandlers: Map<string, (messageType: string, messageData?: ArrayBuffer) => void>;
     //                        Type      Format
     toStreamerMessages: Map<string, ToStreamerMessage>;
     //                         ID      Type
@@ -204,7 +204,7 @@ export class StreamMessageController {
     registerMessageHandler(
         messageDirection: MessageDirection,
         messageType: string,
-        messageHandler: (messageData?: unknown | undefined) => void
+        messageHandler: (messageData?: unknown) => void
     ) {
         switch (messageDirection) {
             case MessageDirection.ToStreamer:

package/src/VideoPlayer/StreamController.ts

@@ -27,7 +27,7 @@ export class StreamController {
         Logger.Info('handleOnTrack ' + JSON.stringify(rtcTrackEvent.streams));
         // Do not add the track if the ID is `probator` as this is special track created by mediasoup for bitrate probing.
         // Refer to https://github.com/EpicGamesExt/PixelStreamingInfrastructure/pull/86 for more details.
-        if (rtcTrackEvent.streams.length < 1 || rtcTrackEvent.streams[0].id == 'probator') {
+        if (rtcTrackEvent.streams.length < 1 || rtcTrackEvent.streams[0].id === 'probator') {
             return;
         }
 
@@ -44,11 +44,11 @@ export class StreamController {
             );
         }
 
-        if (rtcTrackEvent.track.kind == 'audio') {
+        if (rtcTrackEvent.track.kind === 'audio') {
             this.CreateAudioTrack(rtcTrackEvent.streams[0]);
             return;
         } else if (
-            rtcTrackEvent.track.kind == 'video' &&
+            rtcTrackEvent.track.kind === 'video' &&
             videoElement.srcObject !== rtcTrackEvent.streams[0]
         ) {
             videoElement.srcObject = rtcTrackEvent.streams[0];

package/src/VideoPlayer/VideoPlayer.test.ts

@@ -0,0 +1,141 @@
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+import { Config, Flags, NumericParameters } from '../Config/Config';
+import { mockRTCRtpReceiver, unmockRTCRtpReceiver } from '../__test__/mockRTCRtpReceiver';
+import { VideoPlayer } from './VideoPlayer';
+
+/**
+ * Tests for the ViewportResScale numeric parameter added to VideoPlayer.
+ *
+ * The callback onMatchViewportResolutionCallback is invoked with the scaled
+ * viewport dimensions when MatchViewportResolution is enabled. We validate:
+ *   - default scale (1.0) leaves dimensions unchanged
+ *   - explicit scale multiplies both dimensions
+ *   - non-integer products are rounded to integers
+ *   - dimensions > 4096 emit a warning via Logger
+ *   - a Config missing the setting falls back to 1.0 instead of throwing
+ */
+describe('VideoPlayer.updateVideoStreamSize — ViewportResScale', () => {
+    let parent: HTMLDivElement;
+    let config: Config;
+    let player: VideoPlayer;
+    let callback: jest.Mock;
+
+    const setViewportSize = (w: number, h: number) => {
+        Object.defineProperty(parent, 'clientWidth', { configurable: true, value: w });
+        Object.defineProperty(parent, 'clientHeight', { configurable: true, value: h });
+    };
+
+    beforeEach(() => {
+        mockRTCRtpReceiver();
+        parent = document.createElement('div');
+        document.body.appendChild(parent);
+
+        config = new Config({ initialSettings: { [Flags.MatchViewportResolution]: true } });
+
+        player = new VideoPlayer(parent, config);
+        callback = jest.fn();
+        player.onMatchViewportResolutionCallback = callback;
+
+        // Bypass the 300ms throttle in updateVideoStreamSize.
+        (player as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+    });
+
+    afterEach(() => {
+        player.destroy();
+        parent.remove();
+        unmockRTCRtpReceiver();
+        jest.restoreAllMocks();
+    });
+
+    it('passes viewport dimensions through unchanged when scale is 1.0 (default)', () => {
+        setViewportSize(375, 667);
+        player.updateVideoStreamSize();
+        expect(callback).toHaveBeenCalledWith(375, 667);
+    });
+
+    it('multiplies both dimensions by the configured scale', () => {
+        config.setNumericSetting(NumericParameters.ViewportResScale, 2.0);
+        setViewportSize(375, 667);
+
+        // lastTimeResized was updated on construction, reset again.
+        (player as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+        player.updateVideoStreamSize();
+
+        expect(callback).toHaveBeenCalledWith(750, 1334);
+    });
+
+    it('rounds non-integer products to integers', () => {
+        config.setNumericSetting(NumericParameters.ViewportResScale, 1.5);
+        setViewportSize(375, 667);
+
+        (player as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+        player.updateVideoStreamSize();
+
+        // 375 * 1.5 = 562.5 → 563, 667 * 1.5 = 1000.5 → 1001
+        expect(callback).toHaveBeenCalledWith(563, 1001);
+        const [w, h] = callback.mock.calls[0] as [number, number];
+        expect(Number.isInteger(w)).toBe(true);
+        expect(Number.isInteger(h)).toBe(true);
+    });
+
+    it('logs a warning when scaled width or height exceeds 4096', () => {
+        const warnSpy = jest.spyOn(Logger, 'Warning').mockImplementation(() => {});
+
+        config.setNumericSetting(NumericParameters.ViewportResScale, 3.0);
+        setViewportSize(2000, 1000); // 2000*3 = 6000 > 4096
+
+        (player as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+        player.updateVideoStreamSize();
+
+        expect(warnSpy).toHaveBeenCalledTimes(1);
+        expect(warnSpy.mock.calls[0][0]).toContain('4096');
+        expect(warnSpy.mock.calls[0][0]).toContain('6000');
+        expect(callback).toHaveBeenCalledWith(6000, 3000);
+    });
+
+    it('does not warn when scaled dimensions stay within the encoder limit', () => {
+        const warnSpy = jest.spyOn(Logger, 'Warning').mockImplementation(() => {});
+
+        config.setNumericSetting(NumericParameters.ViewportResScale, 2.0);
+        setViewportSize(1920, 1080); // 3840 x 2160, under 4096
+
+        (player as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+        player.updateVideoStreamSize();
+
+        expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it('falls back to scale 1.0 when the setting is not registered on the Config', () => {
+        const strippedConfig = new Config({ initialSettings: { [Flags.MatchViewportResolution]: true } });
+        // Remove the registration to simulate a custom Config subclass that omits it.
+        const params = (strippedConfig as unknown as { numericParameters: Map<string, unknown> })
+            .numericParameters;
+        params.delete(NumericParameters.ViewportResScale);
+
+        const strippedParent = document.createElement('div');
+        document.body.appendChild(strippedParent);
+        const strippedPlayer = new VideoPlayer(strippedParent, strippedConfig);
+        const strippedCallback = jest.fn();
+        strippedPlayer.onMatchViewportResolutionCallback = strippedCallback;
+
+        Object.defineProperty(strippedParent, 'clientWidth', { configurable: true, value: 500 });
+        Object.defineProperty(strippedParent, 'clientHeight', { configurable: true, value: 400 });
+
+        (strippedPlayer as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+        expect(() => strippedPlayer.updateVideoStreamSize()).not.toThrow();
+        expect(strippedCallback).toHaveBeenCalledWith(500, 400);
+
+        strippedPlayer.destroy();
+        strippedParent.remove();
+    });
+
+    it('does not invoke the callback when MatchViewportResolution is disabled', () => {
+        config.setFlagEnabled(Flags.MatchViewportResolution, false);
+        setViewportSize(375, 667);
+
+        (player as unknown as { lastTimeResized: number }).lastTimeResized = 0;
+        player.updateVideoStreamSize();
+
+        expect(callback).not.toHaveBeenCalled();
+    });
+});