diff --git a/webapp/player/js/cast-parser.js b/webapp/player/js/cast-parser.js
new file mode 100644
index 00000000..040e976e
--- /dev/null
+++ 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
index 0dfaa0ef..ce5cf6e8 100644
--- 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
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ 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
new file mode 100644
index 00000000..6fad56d7
--- /dev/null
+++ b/webapp/recording-player-tester/index.html
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
+ Recording Player Tester
+
+
+
+
+
+
Recording Player Tester
+
Please upload your recording file (.trp, .webm, .cast):
+
+
+
+
File name: ${fileName}
+ File size: ${fileSize} MB
+ File type: ${fileExtension}
`;
+ playButton.disabled = false; // Enable the play button when a valid file is uploaded
+ fileDetails.classList.remove('error');
+ // upload file to server
+ const formData = new FormData();
+ formData.append('file', file);
+ fetch('upload', {
+ method: 'POST',
+ body: formData,
+ });
+ }
+ } else {
+ fileDetails.innerHTML = `Invalid file type. Only .trp, .webm, and .cast files are allowed.
`;
+ fileInput.value = ''; // Clear the input if the file type is invalid
+ playButton.disabled = true; // Disable the play button
+ }
+});
+
+closePlayer.addEventListener('click', () => {
+ player.style.display = 'none'; // Hide the player div
+ if (!iframeContent) {
+ throw new Error('Iframe content not found');
+ }
+ iframeContent.innerHTML = ''; // Clear the iframe content
+});
+
+// Empty function for Play button (add functionality later)
+playButton.addEventListener('click', () => {
+ const currentUrl = window.location.href;
+ const url = new URL(currentUrl);
+ url.searchParams.set('token', '123456');
+ url.searchParams.set('sessionId', '123456');
+ url.pathname = '/jet/jrec/play';
+ const finalUrl = url.toString();
+
+ player.style.display = 'flex'; // Display the player div
+ if (!iframeContent) {
+ throw new Error('Iframe content not found');
+ }
+ iframeContent.innerHTML = `
+
+ `;
+});
diff --git a/webapp/recording-player-tester/src/vite-env.d.ts b/webapp/recording-player-tester/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/webapp/recording-player-tester/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/webapp/recording-player-tester/tsconfig.json b/webapp/recording-player-tester/tsconfig.json
new file mode 100644
index 00000000..0511b9f0
--- /dev/null
+++ b/webapp/recording-player-tester/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/webapp/recording-player-tester/vite.config.ts b/webapp/recording-player-tester/vite.config.ts
new file mode 100644
index 00000000..69cb2175
--- /dev/null
+++ b/webapp/recording-player-tester/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ server: {
+ proxy: {
+ '/upload': 'http://localhost:3000',
+ '/jet': 'http://localhost:3000',
+ },
+ }
+})