fix(dgw): support for .cast files that have two slices with the same …

…timestamp in recording player (#1054) In some cases, two slices may have the same timestamp. Previously this caused errors.
Devolutions · Oct 9, 2024 · 8ed5163 · 8ed5163
1 parent 7fb1dfe
commit 8ed5163
Show file tree

Hide file tree

Showing 11 changed files with 2,204 additions and 5 deletions.
diff --git a/webapp/player/js/cast-parser.js b/webapp/player/js/cast-parser.js
@@ -0,0 +1,21 @@
+export function ensureNoSameTimeCues(content) {
+  const lines = content.split('\n');
+  let prevLine = null; // Correctly using let to track previous line
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    try {
+      const parsed = JSON.parse(line);
+      if (Array.isArray(parsed)) {
+        if (prevLine && prevLine[0] === parsed[0]) {
+          parsed[0] += 0.001; // Adjust timestamp if same as previous
+        }
+        // Update the current line in the array after modification
+        lines[i] = JSON.stringify(parsed);
+        prevLine = parsed; // Update prevLine to the current parsed line
+      }
+    } catch (e) {
+      // If parsing fails (e.g., it's a non-JSON line), skip or handle error
+    }
+  }
+  return lines.join('\n');
+}
diff --git a/webapp/player/js/index.js b/webapp/player/js/index.js
@@ -1,3 +1,4 @@
+import { ensureNoSameTimeCues } from './cast-parser.js';
 import { convertTRPtoCast } from './trp-decoder.js';
 
 const windowURL = new URL(window.location.href);
@@ -92,12 +93,15 @@ request.onreadystatechange = () => {
     // create the Div
     document.body.appendChild(terminalDiv);
     const castSrc = `${gatewayAccessUrl}/jet/jrec/pull/${sessionId}/${recordingInfo.files[0].fileName}?token=${token}`;
-    const player = new XtermPlayer.XtermPlayer(castSrc, terminalDiv, {
-      fontSize: 12,
+
+    loadFile(castSrc, (castFileContent) => {
+      const fixedContent = ensureNoSameTimeCues(new TextDecoder().decode(castFileContent));
+      const objectUrl = URL.createObjectURL(new Blob([fixedContent], { type: 'text/plain' }));
+      const player = new XtermPlayer.XtermPlayer(objectUrl, terminalDiv);
+      setTimeout(() => {
+        player.play();
+      }, 500);
     });
-    setTimeout(() => {
-      player.play();
-    }, 500);
   }
 };
 

diff --git a/webapp/recording-player-tester/.gitignore b/webapp/recording-player-tester/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/webapp/recording-player-tester/index.html b/webapp/recording-player-tester/index.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Recording Player Tester</title>
+
+</head>
+
+<body>
+  <div id="app">
+    <h1>Recording Player Tester</h1>
+    <p>Please upload your recording file (.trp, .webm, .cast):</p>
+    <input type="file" id="fileInput" accept=".trp,.webm,.cast" />
+    <div id="fileDetails"></div>
+    <button class="btn" id="playButton">Play</button>
+  </div>
+  <div id="player" style="display: none;">
+    <button id="closePlayer" >close </button>
+    <div id="frameWrapper"></div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f5f5;
+  }
+
+  #app {
+    text-align: center;
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    color: #333;
+    margin-bottom: 1.5rem;
+  }
+
+  input[type="file"] {
+    padding: 0.5rem;
+    margin-top: 1rem;
+    cursor: pointer;
+  }
+
+  #fileDetails {
+    margin-top: 1.5rem;
+    font-size: 0.9rem;
+    color: #555;
+  }
+
+  #fileDetails p {
+    margin: 0.5rem 0;
+  }
+
+  .error {
+    color: red;
+    font-weight: bold;
+  }
+
+  .btn {
+    margin-top: 2rem;
+    padding: 0.75rem 1.5rem;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+  }
+
+  .btn:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+
+  #player {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2rem;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  .iframeContent {
+    position: relative;
+    height: 50vh;
+    width: 50vw;
+    border: none;
+    overflow: hidden;
+  }
+
+  .col-actions {
+    width: 80px;
+  }
+
+  .date-selector-button {
+    margin: 0;
+    margin-top: 4px;
+    margin-right: 14px;
+  }
+
+  .full-page-table.p-datatable {
+    height: 100%;
+  }
+
+  #closePlayer{
+    position: absolute;
+    top: 100px;
+    right: 400px;
+  }
+</style>
+
+</html>