merged

Extras/JSStreamer/package.json

@@ -29,9 +29,9 @@
         "ts-loader": "^9.5.2",
         "typescript": "^5.7.3",
         "typescript-eslint": "^8.24.0",
-        "webpack": "^5.97.1",
+        "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1",
-        "webpack-dev-server": "^5.2.0",
+        "webpack-dev-server": "^5.2.1",
         "webpack-node-externals": "^3.0.0"
     },
     "dependencies": {

Frontend/implementations/react/package.json

@@ -19,7 +19,7 @@
         "html-webpack-plugin": "^5.6.3",
         "ts-loader": "^9.5.2",
         "typescript": "^5.7.3",
-        "webpack": "^5.97.1",
+        "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1"
     },
     "dependencies": {

Frontend/implementations/typescript/package.json

@@ -17,7 +17,7 @@
         "html-loader": "^5.1.0",
         "html-webpack-plugin": "^5.6.3",
         "ts-loader": "^9.5.2",
-        "webpack": "^5.97.1",
+        "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1"
     },
     "dependencies": {

Frontend/library/src/VideoPlayer/StreamController.ts

@@ -52,6 +52,7 @@ export class StreamController {
             videoElement.srcObject !== rtcTrackEvent.streams[0]
         ) {
             videoElement.srcObject = rtcTrackEvent.streams[0];
+            this.videoElementProvider.switchToWebRTCStream();
             Logger.Info('Set video source from video track ontrack.');
             return;
         }

Frontend/library/src/VideoPlayer/VideoPlayer.ts

@@ -21,16 +21,27 @@ export class VideoPlayer {
     private audioElement?: HTMLAudioElement;
     private orientationChangeTimeout: number;
     private lastTimeResized = new Date().getTime();
-
     onMatchViewportResolutionCallback: (width: number, height: number) => void;
     onResizePlayerCallback: () => void;
     resizeTimeoutHandle: number;
-
+    private placeholderVideo: HTMLVideoElement;
     /**
      * @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: HTMLElement, config: Config) {
+
+        this.placeholderVideo = document.createElement('video');
+        this.placeholderVideo.id = 'placeholderVideo';
+        this.placeholderVideo.src = './video/1.mp4'; // Set path to your local video
+        this.placeholderVideo.controls = false;
+        this.placeholderVideo.autoplay = true;
+        this.placeholderVideo.loop = true;
+        this.placeholderVideo.muted = true;
+        this.placeholderVideo.style.width = '100%';
+        this.placeholderVideo.style.height = '100%';
+        this.placeholderVideo.style.position = 'absolute';
+
         this.videoElement = document.createElement('video');
         this.config = config;
         this.videoElement.id = 'streamingVideo';
@@ -41,6 +52,7 @@ export class VideoPlayer {
         this.videoElement.style.position = 'absolute';
         this.videoElement.style.pointerEvents = 'all';
         videoElementParent.appendChild(this.videoElement);
+        videoElementParent.appendChild(this.placeholderVideo);
 
         this.onResizePlayerCallback = () => {
             console.log('Resolution changed, restyling player, did you forget to override this function?');
@@ -74,6 +86,12 @@ export class VideoPlayer {
         this.audioElement = audioElement;
     }
 
+    // Method to switch from placeholder to WebRTC stream
+    public switchToWebRTCStream(): void {
+        this.placeholderVideo.style.display = 'none';
+        this.videoElement.style.display = 'block';
+    }
+
     /**
      * 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.

Frontend/ui-library/src/Overlay/DisconnectOverlay.ts

@@ -13,6 +13,8 @@ export class DisconnectOverlay extends ActionOverlay {
         const disconnectOverlayHtml = document.createElement('div');
         disconnectOverlayHtml.id = 'disconnectOverlay';
         disconnectOverlayHtml.className = 'clickableState';
+        disconnectOverlayHtml.style.background = 'rgba(0, 0, 0, 0.3)'; // Semi-transparent black overlay
+        disconnectOverlayHtml.style.transition = 'opacity 0.8s ease-in-out';
         return disconnectOverlayHtml;
     }
 

Frontend/ui-library/src/UI/FullscreenIcon.ts

@@ -136,7 +136,9 @@ export class FullScreenIcon extends FullScreenIconBase {
         createdButton.appendChild(this.maximizeIcon);
         createdButton.appendChild(this.minimizeIcon);
         createdButton.appendChild(this.tooltipText);
-
+        createdButton.style.position = 'absolute'; // Change to 'fixed' if you want it to stay in the same place even when scrolling
+        createdButton.style.top = '1px';  // Adjust vertical position
+        createdButton.style.left = '60px'; // Adjust horizontal position
         this.rootElement = createdButton;
     }
 

Frontend/ui-library/src/UI/SettingsIcon.ts

@@ -19,6 +19,7 @@ export class SettingsIcon {
             this._rootElement.id = 'settingsBtn';
             this._rootElement.appendChild(this.settingsIcon);
             this._rootElement.appendChild(this.tooltipText);
+            this._rootElement.setAttributeNS(null, 'style', 'display: None;');
         }
         return this._rootElement;
     }

Frontend/ui-library/src/UI/StatsIcon.ts

@@ -19,6 +19,7 @@ export class StatsIcon {
             this._rootElement.id = 'statsBtn';
             this._rootElement.appendChild(this.statsIcon);
             this._rootElement.appendChild(this.tooltipText);
+            this._rootElement.setAttributeNS(null, 'style', 'display: None;');
         }
         return this._rootElement;
     }
@@ -39,7 +40,6 @@ export class StatsIcon {
             this._statsIcon.setAttributeNS(null, 'x', '0px');
             this._statsIcon.setAttributeNS(null, 'y', '0px');
             this._statsIcon.setAttributeNS(null, 'viewBox', '0 0 330 330');
-
             // create svg group for the paths
             const svgGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
             svgGroup.classList.add('svgIcon');

Frontend/ui-library/src/UI/VideoQpIndicator.ts

@@ -42,6 +42,9 @@ export class VideoQpIndicator {
             this._rootElement = document.createElement('div');
             this._rootElement.id = 'connection';
             this._rootElement.classList.add('UiTool');
+            this._rootElement.style.position = 'absolute'; // Change to 'fixed' if you want it to stay in the same place even when scrolling
+            this._rootElement.style.top = '25px';  // Adjust vertical position
+            this._rootElement.style.left = '20px'; // Adjust horizontal position
 
             // add svg icon for the connection strength
             this._rootElement.appendChild(this.qualityStatus);