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

package/dist/esm/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,174 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+import { Flags } from '../Config/Config';
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+/**
+ * The video player html element
+ */
+export class VideoPlayer {
+    /**
+     * @param videoElementParent the html div the the video player will be injected into
+     * @param config the applications configuration. We're interested in the startVideoMuted flag
+     */
+    constructor(videoElementParent, config) {
+        this.lastTimeResized = new Date().getTime();
+        this.videoElement = document.createElement('video');
+        this.config = config;
+        this.videoElement.id = 'streamingVideo';
+        this.videoElement.disablePictureInPicture = true;
+        this.videoElement.playsInline = true;
+        this.videoElement.style.width = '100%';
+        this.videoElement.style.height = '100%';
+        this.videoElement.style.position = 'absolute';
+        this.videoElement.style.pointerEvents = 'all';
+        videoElementParent.appendChild(this.videoElement);
+        this.onResizePlayerCallback = () => {
+            console.log('Resolution changed, restyling player, did you forget to override this function?');
+        };
+        this.onMatchViewportResolutionCallback = () => {
+            console.log('Resolution changed and match viewport resolution is turned on, did you forget to override this function?');
+        };
+        // set play for video (and audio)
+        this.videoElement.onclick = () => {
+            if (this.audioElement != undefined && this.audioElement.paused) {
+                this.audioElement.play();
+            }
+            if (this.videoElement.paused) {
+                this.videoElement.play();
+            }
+        };
+        this.videoElement.onloadedmetadata = () => {
+            this.onVideoInitialized();
+        };
+        // set resize events to the windows if it is resized or its orientation is changed
+        window.addEventListener('resize', () => this.resizePlayerStyle(), true);
+        window.addEventListener('orientationchange', () => this.onOrientationChange());
+    }
+    setAudioElement(audioElement) {
+        this.audioElement = audioElement;
+    }
+    /**
+     * Sets up the video element with any application config and plays the video element.
+     * @returns A promise for if playing the video was successful or not.
+     */
+    play() {
+        this.videoElement.muted = this.config.isFlagEnabled(Flags.StartVideoMuted);
+        this.videoElement.autoplay = this.config.isFlagEnabled(Flags.AutoPlayVideo);
+        return this.videoElement.play();
+    }
+    /**
+     * @returns True if the video element is paused.
+     */
+    isPaused() {
+        return this.videoElement.paused;
+    }
+    /**
+     * @returns - whether the video element is playing.
+     */
+    isVideoReady() {
+        return this.videoElement.readyState !== undefined && this.videoElement.readyState > 0;
+    }
+    /**
+     * @returns True if the video element has a valid video source (srcObject).
+     */
+    hasVideoSource() {
+        return this.videoElement.srcObject !== undefined && this.videoElement.srcObject !== null;
+    }
+    /**
+     * Get the current context of the html video element
+     * @returns - the current context of the video element
+     */
+    getVideoElement() {
+        return this.videoElement;
+    }
+    /**
+     * Get the current context of the html video elements parent
+     * @returns - the current context of the video elements parent
+     */
+    getVideoParentElement() {
+        return this.videoElement.parentElement;
+    }
+    /**
+     * Set the Video Elements src object tracks to enable
+     * @param enabled - Enable Tracks on the Src Object
+     */
+    setVideoEnabled(enabled) {
+        // this is a temporary hack until type scripts video element is updated to reflect the need for tracks on a html video element
+        const videoElement = this.videoElement;
+        videoElement.srcObject
+            .getTracks()
+            .forEach((track) => (track.enabled = enabled));
+    }
+    /**
+     * An override for when the video has been initialized with a srcObject
+     */
+    onVideoInitialized() {
+        // Default Functionality: Do Nothing
+    }
+    /**
+     * On the orientation change of a window clear the timeout
+     */
+    onOrientationChange() {
+        clearTimeout(this.orientationChangeTimeout);
+        this.orientationChangeTimeout = window.setTimeout(() => {
+            this.resizePlayerStyle();
+        }, 500);
+    }
+    /**
+     * Resizes the player style based on the window height and width
+     * @returns - nil if requirements are satisfied
+     */
+    resizePlayerStyle() {
+        const videoElementParent = this.getVideoParentElement();
+        if (!videoElementParent) {
+            return;
+        }
+        this.updateVideoStreamSize();
+        if (videoElementParent.classList.contains('fixed-size')) {
+            this.onResizePlayerCallback();
+            return;
+        }
+        // controls for resizing the player
+        this.resizePlayerStyleToFillParentElement();
+        this.onResizePlayerCallback();
+    }
+    /**
+     * Resizes the player element to fill the parent element
+     */
+    resizePlayerStyleToFillParentElement() {
+        const videoElementParent = this.getVideoParentElement();
+        //Video is not initialized yet so set videoElementParent to size of parent element
+        const styleWidth = '100%';
+        const styleHeight = '100%';
+        const styleTop = 0;
+        const styleLeft = 0;
+        videoElementParent.setAttribute('style', 'top: ' +
+            styleTop +
+            'px; left: ' +
+            styleLeft +
+            'px; width: ' +
+            styleWidth +
+            '; height: ' +
+            styleHeight +
+            '; cursor: default;');
+    }
+    updateVideoStreamSize() {
+        if (!this.config.isFlagEnabled(Flags.MatchViewportResolution)) {
+            return;
+        }
+        const now = new Date().getTime();
+        if (now - this.lastTimeResized > 300) {
+            const videoElementParent = this.getVideoParentElement();
+            if (!videoElementParent) {
+                return;
+            }
+            this.onMatchViewportResolutionCallback(videoElementParent.clientWidth, videoElementParent.clientHeight);
+            this.lastTimeResized = new Date().getTime();
+        }
+        else {
+            Logger.Info('Resizing too often - skipping');
+            clearTimeout(this.resizeTimeoutHandle);
+            this.resizeTimeoutHandle = window.setTimeout(() => this.updateVideoStreamSize(), 100);
+        }
+    }
+}
+//# sourceMappingURL=VideoPlayer.js.map

package/dist/esm/VideoPlayer/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","sourceRoot":"","sources":["../../../src/VideoPlayer/VideoPlayer.ts"],"names":[],"mappings":"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"}