feat(player): automatically start play on open

Devolutions · Sep 25, 2024 · b0ecb1b · b0ecb1b
1 parent 46ccab2
commit b0ecb1b
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/webapp/player/js/index.js b/webapp/player/js/index.js
@@ -8,7 +8,6 @@ var videoSrcInfo = `${gatewayAccessUrl}/jet/jrec/pull/${sessionId}/recording.jso
 var request = new XMLHttpRequest();
 
 request.onreadystatechange = function () {
-
   if (request.readyState !== XMLHttpRequest.DONE) {
     return false;
   }
@@ -22,7 +21,7 @@ request.onreadystatechange = function () {
   var fileType = recordingInfo.files[0].fileName.split(".")[1];
 
   var terminalDiv = document.createElement("div");
-  terminalDiv.setAttribute("id", "terminal")
+  terminalDiv.setAttribute("id", "terminal");
 
   switch (fileType) {
     case "webm":
@@ -35,6 +34,8 @@ request.onreadystatechange = function () {
 
       var videoSrcElement = document.createElement("source");
       videoSrcElement.id = "videoSrcElement";
+      videoSrcElement.type = "video/webm";
+      videoPlayer.muted = true;
 
       videoPlayer.appendChild(videoSrcElement);
       document.body.appendChild(videoPlayer);
@@ -47,6 +48,8 @@ request.onreadystatechange = function () {
       var currentIndex = 0;
       var maxIndex = recordingInfo.files.length - 1;
 
+      videoPlayer.play();
+
       videoPlayer.onended = function () {
         currentIndex++;
         if (currentIndex > maxIndex) {
@@ -68,19 +71,21 @@ request.onreadystatechange = function () {
 
       loadFile(trpSrc, (trpFileContent) => {
         const castFileContent = convertTRPtoCast(trpFileContent);
-        const objectUrl = URL.createObjectURL(new Blob([castFileContent], { type: 'text/plain' }));
+        const objectUrl = URL.createObjectURL(
+          new Blob([castFileContent], { type: "text/plain" })
+        );
         const originalFetch = window.fetch;
         // HACK: override fetch to return the cast file content, we should definately update the XtermPlayer to avoid this
         window.fetch = (url, options) => {
-          if (url === objectUrl){
+          if (url === objectUrl) {
             return Promise.resolve({
               text: () => {
                 return Promise.resolve(castFileContent);
               },
             });
           }
           return originalFetch(url, options);
-        }
+        };
         const player = new XtermPlayer.XtermPlayer(objectUrl, terminalDiv);
         window.fetch = originalFetch;
 
@@ -95,10 +100,12 @@ request.onreadystatechange = function () {
       // create the 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 , {
-        fontSize: 12
+      const player = new XtermPlayer.XtermPlayer(castSrc, terminalDiv, {
+        fontSize: 12,
       });
-      player.play();
+      setTimeout(() => {
+        player.play();
+      }, 500);
 
       break;
   }