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

package/src/Inputs/MouseController.ts

@@ -1,249 +1,91 @@
-// Copyright Epic Games, Inc. All Rights Reserved.
-
 import { MouseButtonsMask, MouseButton } from './MouseButtons';
-import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
-import { CoordinateConverter } from '../Util/CoordinateConverter';
+import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { VideoPlayer } from '../VideoPlayer/VideoPlayer';
-import { IMouseEvents } from './IMouseEvents';
-import { LockedMouseEvents } from './LockedMouseEvents';
-import { HoveringMouseEvents } from './HoveringMouseEvents';
 import type { ActiveKeys } from './InputClassesFactory';
-import { EventListenerTracker } from '../Util/EventListenerTracker';
+import { IInputController } from './IInputController';
 
 /**
- * Handles the Mouse Inputs for the document
+ * Extra types for Document and WheelEvent
  */
-export class MouseController {
-    videoElementProvider: VideoPlayer;
-    toStreamerMessagesProvider: StreamMessageController;
-    coordinateConverter: CoordinateConverter;
-    activeKeysProvider: ActiveKeys;
-
-    // Utility for keeping track of event handlers and to unregister them.
-    private mouseEventListenerTracker = new EventListenerTracker();
-
-    /**
-     * @param toStreamerMessagesProvider - Stream message instance
-     * @param videoElementProvider - Video Player instance
-     * @param normalizeAndQuantize - A normalize and quantize instance
-     */
-    constructor(
-        toStreamerMessagesProvider: StreamMessageController,
-        videoElementProvider: VideoPlayer,
-        coordinateConverter: CoordinateConverter,
-        activeKeysProvider: ActiveKeys
-    ) {
-        this.toStreamerMessagesProvider = toStreamerMessagesProvider;
-        this.coordinateConverter = coordinateConverter;
-        this.videoElementProvider = videoElementProvider;
-        this.activeKeysProvider = activeKeysProvider;
-        this.registerMouseEnterAndLeaveEvents();
+declare global {
+    interface Document {
+        mozPointerLockElement: unknown;
+        mozExitPointerLock?(): void;
     }
 
-    /**
-     * Clears all the click events on the current video element parent div
-     */
-    unregisterMouseEvents() {
-        this.mouseEventListenerTracker.unregisterAll();
+    interface WheelEvent {
+        wheelDelta: number;
     }
+}
 
-    /**
-     * Register a locked mouse class
-     * @param mouseController - a mouse controller instance
-     * @param playerStyleAttributesProvider - a player style attributes instance
-     */
-    registerLockedMouseEvents(mouseController: MouseController) {
-        const videoElementParent =
-            this.videoElementProvider.getVideoParentElement() as HTMLDivElement;
-        const lockedMouseEvents: IMouseEvents = new LockedMouseEvents(
-            this.videoElementProvider,
-            mouseController,
-            this.activeKeysProvider
-        );
-
-        videoElementParent.requestPointerLock =
-            videoElementParent.requestPointerLock ||
-            videoElementParent.mozRequestPointerLock;
-        document.exitPointerLock =
-            document.exitPointerLock || document.mozExitPointerLock;
-
-        // minor hack to alleviate ios not supporting pointerlock
-        if (videoElementParent.requestPointerLock) {
-            const onclick = () => {
-                videoElementParent.requestPointerLock();
-            };
-            videoElementParent.addEventListener('click', onclick);
-            this.mouseEventListenerTracker.addUnregisterCallback(
-                () => videoElementParent.removeEventListener('click', onclick)
-            );
-        }
+/**
+ * The base class for mouse controllers. Since there is a bunch of shared behaviour between locked and
+ * hover mouse controllers this is where that shared behaviour lives.
+ */
+export class MouseController implements IInputController {
+    videoPlayer: VideoPlayer;
+    streamMessageController: StreamMessageController;
+    coordinateConverter: InputCoordTranslator;
+    activeKeys: ActiveKeys;
 
-        const lockStateChangeListener = () =>
-            lockedMouseEvents.lockStateChange();
-        document.addEventListener(
-            'pointerlockchange',
-            lockStateChangeListener,
-            false
-        );
-        document.addEventListener(
-            'mozpointerlockchange',
-            lockStateChangeListener,
-            false
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => document.removeEventListener(
-                'pointerlockchange',
-                lockStateChangeListener,
-                false
-            )
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => document.removeEventListener(
-                'mozpointerlockchange',
-                lockStateChangeListener,
-                false
-            )
-        );
+    // bound listeners
+    onEnterListener: (event: MouseEvent) => void;
+    onLeaveListener: (event: MouseEvent) => void;
 
-        const onmousedown = (mouseEvent: MouseEvent) =>
-            lockedMouseEvents.handleMouseDown(mouseEvent);
-        const onmouseup = (mouseEvent: MouseEvent) =>
-            lockedMouseEvents.handleMouseUp(mouseEvent);
-        const onwheel = (wheelEvent: WheelEvent) =>
-            lockedMouseEvents.handleMouseWheel(wheelEvent);
-        const ondblclick = (mouseEvent: MouseEvent) =>
-            lockedMouseEvents.handleMouseDouble(mouseEvent);
-        videoElementParent.addEventListener('mousedown', onmousedown);
-        videoElementParent.addEventListener('mouseup', onmouseup);
-        videoElementParent.addEventListener('wheel', onwheel);
-        videoElementParent.addEventListener('dblclick', ondblclick);
+    constructor(
+        streamMessageController: StreamMessageController,
+        videoPlayer: VideoPlayer,
+        coordinateConverter: InputCoordTranslator,
+        activeKeys: ActiveKeys
+    ) {
+        this.streamMessageController = streamMessageController;
+        this.coordinateConverter = coordinateConverter;
+        this.videoPlayer = videoPlayer;
+        this.activeKeys = activeKeys;
 
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mousedown', onmousedown)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mouseup', onmouseup)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('wheel', onwheel)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('dblclick', ondblclick)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => lockedMouseEvents.unregisterMouseEvents()
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(() => {
-            if (
-                document.exitPointerLock &&
-                (document.pointerLockElement === videoElementParent ||
-                    document.mozPointerLockElement === videoElementParent)
-            ) {
-                document.exitPointerLock();
-            }
-        });
+        this.onEnterListener = this.onMouseEnter.bind(this);
+        this.onLeaveListener = this.onMouseLeave.bind(this);
     }
 
-    /**
-     * Register a hovering mouse class
-     * @param mouseController - A mouse controller object
-     */
-    registerHoveringMouseEvents(mouseController: MouseController) {
-        const videoElementParent =
-            this.videoElementProvider.getVideoParentElement() as HTMLDivElement;
-        const hoveringMouseEvents = new HoveringMouseEvents(mouseController);
-
-        const onmousemove = (mouseEvent: MouseEvent) =>
-            hoveringMouseEvents.updateMouseMovePosition(mouseEvent);
-        const onmousedown = (mouseEvent: MouseEvent) =>
-            hoveringMouseEvents.handleMouseDown(mouseEvent);
-        const onmouseup = (mouseEvent: MouseEvent) =>
-            hoveringMouseEvents.handleMouseUp(mouseEvent);
-        const oncontextmenu = (mouseEvent: MouseEvent) =>
-            hoveringMouseEvents.handleContextMenu(mouseEvent);
-        const onwheel = (wheelEvent: WheelEvent) =>
-            hoveringMouseEvents.handleMouseWheel(wheelEvent);
-        const ondblclick = (mouseEvent: MouseEvent) =>
-            hoveringMouseEvents.handleMouseDouble(mouseEvent);
-        videoElementParent.addEventListener('mousemove', onmousemove);
-        videoElementParent.addEventListener('mousedown', onmousedown);
-        videoElementParent.addEventListener('mouseup', onmouseup);
-        videoElementParent.addEventListener('contextmenu', oncontextmenu);
-        videoElementParent.addEventListener('wheel', onwheel);
-        videoElementParent.addEventListener('dblclick', ondblclick);
+    register() {
+        this.registerMouseEnterAndLeaveEvents();
+    }
 
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mousemove', onmousemove)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mousedown', onmousedown)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mouseup', onmouseup)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('contextmenu', oncontextmenu)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('wheel', onwheel)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('dblclick', ondblclick)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => hoveringMouseEvents.unregisterMouseEvents()
-        );
+    unregister() {
+        this.unregisterMouseEnterAndLeaveEvents();
     }
 
-    /**
-     * Set the mouse enter and mouse leave events
-     */
     registerMouseEnterAndLeaveEvents() {
-        const videoElementParent =
-            this.videoElementProvider.getVideoParentElement() as HTMLDivElement;
+        const videoElementParent = this.videoPlayer.getVideoParentElement() as HTMLDivElement;
+        videoElementParent.addEventListener('mouseenter', this.onEnterListener);
+        videoElementParent.addEventListener('mouseleave', this.onLeaveListener);
+    }
 
-        // Handle when the Mouse has entered the element
-        const onmouseenter = (event: MouseEvent) => {
-            if (!this.videoElementProvider.isVideoReady()) {
-                return;
-            }
-            Logger.Log(Logger.GetStackTrace(), 'Mouse Entered', 6);
-            this.sendMouseEnter();
-            this.pressMouseButtons(event.buttons, event.x, event.y);
-        };
+    unregisterMouseEnterAndLeaveEvents() {
+        const videoElementParent = this.videoPlayer.getVideoParentElement() as HTMLDivElement;
+        videoElementParent.removeEventListener('mouseenter', this.onEnterListener);
+        videoElementParent.removeEventListener('mouseleave', this.onLeaveListener);
+    }
 
-        // Handles when the mouse has left the element
-        const onmouseleave = (event: MouseEvent) => {
-            if (!this.videoElementProvider.isVideoReady()) {
-                return;
-            }
-            Logger.Log(Logger.GetStackTrace(), 'Mouse Left', 6);
-            this.sendMouseLeave();
-            this.releaseMouseButtons(event.buttons, event.x, event.y);
-        };
-        videoElementParent.addEventListener('mouseenter', onmouseenter);
-        videoElementParent.addEventListener('mouseleave', onmouseleave);
+    private onMouseEnter(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        this.streamMessageController.toStreamerHandlers.get('MouseEnter')();
+        this.pressMouseButtons(event.buttons, event.x, event.y);
+    }
 
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mouseenter', onmouseenter)
-        );
-        this.mouseEventListenerTracker.addUnregisterCallback(
-            () => videoElementParent.removeEventListener('mouseleave', onmouseleave)
-        );
+    private onMouseLeave(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        this.streamMessageController.toStreamerHandlers.get('MouseLeave')();
+        this.releaseMouseButtons(event.buttons, event.x, event.y);
     }
 
-    /**
-     * Handle when a mouse button is released
-     * @param buttons - Mouse Button
-     * @param X - Mouse pointer X coordinate
-     * @param Y - Mouse pointer Y coordinate
-     */
-    releaseMouseButtons(buttons: number, X: number, Y: number) {
-        const coord = this.coordinateConverter.normalizeAndQuantizeUnsigned(
-            X,
-            Y
-        );
+    private releaseMouseButtons(buttons: number, X: number, Y: number) {
+        const coord = this.coordinateConverter.translateUnsigned(X, Y);
         if (buttons & MouseButtonsMask.primaryButton) {
             this.sendMouseUp(MouseButton.mainButton, coord.x, coord.y);
         }
@@ -261,20 +103,11 @@ export class MouseController {
         }
     }
 
-    /**
-     * Handle when a mouse button is pressed
-     * @param buttons - Mouse Button
-     * @param X - Mouse pointer X coordinate
-     * @param Y - Mouse pointer Y coordinate
-     */
-    pressMouseButtons(buttons: number, X: number, Y: number) {
-        if (!this.videoElementProvider.isVideoReady()) {
+    private pressMouseButtons(buttons: number, X: number, Y: number) {
+        if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        const coord = this.coordinateConverter.normalizeAndQuantizeUnsigned(
-            X,
-            Y
-        );
+        const coord = this.coordinateConverter.translateUnsigned(X, Y);
         if (buttons & MouseButtonsMask.primaryButton) {
             this.sendMouseDown(MouseButton.mainButton, coord.x, coord.y);
         }
@@ -292,71 +125,12 @@ export class MouseController {
         }
     }
 
-    /**
-     * Handles mouse enter
-     */
-    sendMouseEnter() {
-        if (!this.videoElementProvider.isVideoReady()) {
-            return;
-        }
-        const toStreamerHandlers =
-            this.toStreamerMessagesProvider.toStreamerHandlers;
-        toStreamerHandlers.get('MouseEnter')();
+    private sendMouseDown(button: number, X: number, Y: number) {
+        this.streamMessageController.toStreamerHandlers.get('MouseDown')?.([button, X, Y]);
     }
 
-    /**
-     * Handles mouse Leave
-     */
-    sendMouseLeave() {
-        if (!this.videoElementProvider.isVideoReady()) {
-            return;
-        }
-        const toStreamerHandlers =
-            this.toStreamerMessagesProvider.toStreamerHandlers;
-        toStreamerHandlers.get('MouseLeave')();
-    }
-
-    /**
-     * Handles when a mouse button is pressed down
-     * @param button - Mouse Button Pressed
-     * @param X  - Mouse X Coordinate
-     * @param Y  - Mouse Y Coordinate
-     */
-    sendMouseDown(button: number, X: number, Y: number) {
-        if (!this.videoElementProvider.isVideoReady()) {
-            return;
-        }
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `mouse button ${button} down at (${X}, ${Y})`,
-            6
-        );
-        const toStreamerHandlers =
-            this.toStreamerMessagesProvider.toStreamerHandlers;
-        toStreamerHandlers.get('MouseDown')([button, X, Y]);
-    }
-
-    /**
-     * Handles when a mouse button is pressed up
-     * @param button - Mouse Button Pressed
-     * @param X  - Mouse X Coordinate
-     * @param Y  - Mouse Y Coordinate
-     */
-    sendMouseUp(button: number, X: number, Y: number) {
-        if (!this.videoElementProvider.isVideoReady()) {
-            return;
-        }
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `mouse button ${button} up at (${X}, ${Y})`,
-            6
-        );
-        const coord = this.coordinateConverter.normalizeAndQuantizeUnsigned(
-            X,
-            Y
-        );
-        const toStreamerHandlers =
-            this.toStreamerMessagesProvider.toStreamerHandlers;
-        toStreamerHandlers.get('MouseUp')([button, coord.x, coord.y]);
+    private sendMouseUp(button: number, X: number, Y: number) {
+        const coord = this.coordinateConverter.translateUnsigned(X, Y);
+        this.streamMessageController.toStreamerHandlers.get('MouseUp')?.([button, coord.x, coord.y]);
     }
 }

package/src/Inputs/MouseControllerHovering.ts

@@ -0,0 +1,118 @@
+import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
+import { InputCoordTranslator } from '../Util/InputCoordTranslator';
+import { VideoPlayer } from '../VideoPlayer/VideoPlayer';
+import type { ActiveKeys } from './InputClassesFactory';
+import { MouseController } from './MouseController';
+
+/**
+ * A mouse controller that allows the mouse to freely float over the video document.
+ */
+export class MouseControllerHovering extends MouseController {
+    videoElementParent: HTMLDivElement;
+
+    onMouseUpListener: (event: MouseEvent) => void;
+    onMouseDownListener: (event: MouseEvent) => void;
+    onMouseDblClickListener: (event: MouseEvent) => void;
+    onMouseWheelListener: (event: WheelEvent) => void;
+    onMouseMoveListener: (event: MouseEvent) => void;
+    onContextMenuListener: (event: MouseEvent) => void;
+
+    constructor(
+        streamMessageController: StreamMessageController,
+        videoPlayer: VideoPlayer,
+        coordinateConverter: InputCoordTranslator,
+        activeKeys: ActiveKeys
+    ) {
+        super(streamMessageController, videoPlayer, coordinateConverter, activeKeys);
+        this.videoElementParent = videoPlayer.getVideoParentElement() as HTMLDivElement;
+        this.onMouseUpListener = this.onMouseUp.bind(this);
+        this.onMouseDownListener = this.onMouseDown.bind(this);
+        this.onMouseDblClickListener = this.onMouseDblClick.bind(this);
+        this.onMouseWheelListener = this.onMouseWheel.bind(this);
+        this.onMouseMoveListener = this.onMouseMove.bind(this);
+        this.onContextMenuListener = this.onContextMenu.bind(this);
+    }
+
+    register(): void {
+        super.register();
+
+        this.videoElementParent.addEventListener('mousemove', this.onMouseMoveListener);
+        this.videoElementParent.addEventListener('mousedown', this.onMouseDownListener);
+        this.videoElementParent.addEventListener('mouseup', this.onMouseUpListener);
+        this.videoElementParent.addEventListener('contextmenu', this.onContextMenuListener);
+        this.videoElementParent.addEventListener('wheel', this.onMouseWheelListener);
+        this.videoElementParent.addEventListener('dblclick', this.onMouseDblClickListener);
+    }
+
+    unregister(): void {
+        this.videoElementParent.removeEventListener('mousemove', this.onMouseMoveListener);
+        this.videoElementParent.removeEventListener('mousedown', this.onMouseDownListener);
+        this.videoElementParent.removeEventListener('mouseup', this.onMouseUpListener);
+        this.videoElementParent.removeEventListener('contextmenu', this.onContextMenuListener);
+        this.videoElementParent.removeEventListener('wheel', this.onMouseWheelListener);
+        this.videoElementParent.removeEventListener('dblclick', this.onMouseDblClickListener);
+
+        super.unregister();
+    }
+
+    private onMouseDown(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        this.streamMessageController.toStreamerHandlers.get('MouseDown')([event.button, coord.x, coord.y]);
+        event.preventDefault();
+    }
+
+    private onMouseUp(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        this.streamMessageController.toStreamerHandlers.get('MouseUp')([event.button, coord.x, coord.y]);
+        event.preventDefault();
+    }
+
+    private onContextMenu(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        event.preventDefault();
+    }
+
+    private onMouseMove(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        const delta = this.coordinateConverter.translateSigned(event.movementX, event.movementY);
+        this.streamMessageController.toStreamerHandlers.get('MouseMove')([
+            coord.x,
+            coord.y,
+            delta.x,
+            delta.y
+        ]);
+        event.preventDefault();
+    }
+
+    private onMouseWheel(event: WheelEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        this.streamMessageController.toStreamerHandlers.get('MouseWheel')([
+            event.wheelDelta,
+            coord.x,
+            coord.y
+        ]);
+        event.preventDefault();
+    }
+
+    private onMouseDblClick(event: MouseEvent) {
+        if (!this.videoPlayer.isVideoReady()) {
+            return;
+        }
+        const coord = this.coordinateConverter.translateUnsigned(event.offsetX, event.offsetY);
+        this.streamMessageController.toStreamerHandlers.get('MouseDouble')([event.button, coord.x, coord.y]);
+    }
+}