fix(dgw): recording player now scales with the size of the window (#922)

Issue: DGW-198
Devolutions · Jul 17, 2024 · 4cb95a5 · 4cb95a5
1 parent 855c853
commit 4cb95a5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/webapp/player/index.html b/webapp/player/index.html
@@ -9,6 +9,8 @@
 </head>
 <style>
   video {
+    width: 100%;
+    height: 100%;
     position: absolute;
     top: 0px;
     right: 0px;
@@ -21,18 +23,28 @@
 
   html,
   body {
-    height: 100%;
-    margin: 0;
     background-color: black;
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
 
-</style>
+  #terminal {
+    height: 100%;
+  }
+
+  .xterm .xterm-screen {
+    position: relative;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden !important;
+  }
 
+  .xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  </style> 
 <body>
   <script src="./js/index.js" type="module"></script>
 </body>
-
 </html>
diff --git a/webapp/player/js/index.js b/webapp/player/js/index.js
@@ -8,6 +8,7 @@ var videoSrcInfo = `${gatewayAccessUrl}/jet/jrec/pull/${sessionId}/recording.jso
 var request = new XMLHttpRequest();
 
 request.onreadystatechange = function () {
+
   if (request.readyState !== XMLHttpRequest.DONE) {
     return false;
   }
@@ -20,6 +21,9 @@ request.onreadystatechange = function () {
   var recordingInfo = JSON.parse(request.responseText);
   var fileType = recordingInfo.files[0].fileName.split(".")[1];
 
+  var terminalDiv = document.createElement("div");
+  terminalDiv.setAttribute("id", "terminal")
+
   switch (fileType) {
     case "webm":
       // create the video object
@@ -58,7 +62,6 @@ request.onreadystatechange = function () {
 
     case "trp":
       // create the Div
-      var terminalDiv = document.createElement("div");
       document.body.appendChild(terminalDiv);
 
       let trpSrc = `${gatewayAccessUrl}/jet/jrec/pull/${sessionId}/${recordingInfo.files[0].fileName}?token=${token}`;
@@ -69,7 +72,7 @@ request.onreadystatechange = function () {
         // make the file a base64 embedded src url
         var url = "data:text/plain;base64," + btoa(castFileContent);
         var player = new XtermPlayer.XtermPlayer(url, terminalDiv);
-
+        
         // need a slight delay to play waiting for it to load
         setTimeout(function () {
           player.play();
@@ -79,7 +82,6 @@ request.onreadystatechange = function () {
       break;
     case "cast":
       // create the Div
-      var terminalDiv = document.createElement("div");
       document.body.appendChild(terminalDiv);
       let castSrc = `${gatewayAccessUrl}/jet/jrec/pull/${sessionId}/${recordingInfo.files[0].fileName}?token=${token}`;
       const player = new XtermPlayer.XtermPlayer(castSrc, terminalDiv , {
@@ -88,7 +90,7 @@ request.onreadystatechange = function () {
       player.play();
 
       break;
-  }
+  }   
 };
 
 request.open("GET", videoSrcInfo, true);
@@ -106,4 +108,4 @@ function loadFile(fileName, onLoad) {
     }
   };
   req.send(null);
-}
+}