Skip to content

Commit

Permalink
Modifications to recording, rl-recording branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@raphaellevisse
raphaellevisse committed Dec 20, 2024
1 parent 7929f18 commit 2556d44
Show file tree
Hide file tree
Showing 4 changed files with 334 additions and 35 deletions.
110 changes: 92 additions & 18 deletions src/ui/default_viewer_setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,25 +193,32 @@ export function setupDefaultViewer() {
};

(window as any).saveHistory = (sessionId: string) => {
const res: any[] = [];
const historyData: any[] = [];
let historyIndex = 0;
let state: string | null = null;
while (
(state = localStorage.getItem(`${sessionId}_${historyIndex}`)) !== null
(state = localStorage.getItem(`history_state_${sessionId}_${historyIndex}`)) !== null
) {
res.push(JSON.parse(state));
const action = localStorage.getItem(`history_action_${sessionId}_${historyIndex}`);
const timestamp = localStorage.getItem(`history_time_${sessionId}_${historyIndex}`);
historyData.push({
state: JSON.parse(state),
action: action,
time: timestamp
});
historyIndex++;
}
downloadObject(res, "history.json");
downloadObject(historyData, `episode_${sessionId}.json`);
};

let inReplay = false;

const ngReplay = (sessionId: string, skipForward = true) => {
if (inReplay) return;
hashBinding.recording = false;
inReplay = true;
let historyIndex = 0;
const preReplayState = viewer.state.toJSON();
console.log("pre replay state", preReplayState);
let nextState = localStorage.getItem(
`history_state_${sessionId}_${historyIndex}`,
);
Expand All @@ -226,34 +233,66 @@ export function setupDefaultViewer() {
let startTime = Date.now() - nextTime;

console.log("starting replay");
StatusMessage.showTemporaryMessage("starting replay");

let mouseMoved = false;

const handleMouseMove = () => {
mouseMoved = true;
};
// Mouse movement changes the internal state (cf index.ts) and will cause the replay state to fail because it does consistency of the browser is lost
// Thus why mouse movement instantly stops the replay
window.addEventListener("mousemove", handleMouseMove);

const loop = () => {
if (mouseMoved) {
console.log("Mouse movement detected. Stopping replay.");
window.removeEventListener("mousemove", handleMouseMove);
inReplay = false;
StatusMessage.showTemporaryMessage("Replay stopped due to mouse movement.");
viewer.state.restoreState(preReplayState);
return;
}

let elapsedTime = Date.now() - startTime;
if (skipForward && nextTime - elapsedTime > 5000) {
startTime -= nextTime - elapsedTime - 5000;
if (skipForward && nextTime - elapsedTime > 1000) {
startTime -= nextTime - elapsedTime - 1000;
elapsedTime = Date.now() - startTime;
// console.log("jumping forward");
}
//console.log("elapsed time", elapsedTime);
//console.log(mouseData.length, mouseIndex);

// console.log("replay", elapsedTime, historyIndex, nextTime - elapsedTime);
if (nextTime > 0 && elapsedTime >= nextTime) {
// set new state
viewer.state.restoreState(JSON.parse(nextState!));
// get next states
console.log("New frame", historyIndex);
const actionKey = `history_action_${sessionId}_${historyIndex}`;
const actionEvent = localStorage.getItem(actionKey);
console.log(`${actionEvent}`);
const parsedState = JSON.parse(nextState!);
try {
viewer.state.restoreState(parsedState);
}
catch (e) {
inReplay = false;
console.error(e);
return;
}
historyIndex++;
nextState = localStorage.getItem(
`history_state_${sessionId}_${historyIndex}`,
);
if (!nextState) {
inReplay = false;
console.log("done with replay");
StatusMessage.showTemporaryMessage("replay complete!");
StatusMessage.showTemporaryMessage("replay complete!");
window.removeEventListener("mousemove", handleMouseMove);
return;
}
nextTime = parseInt(
localStorage.getItem(`history_time_${sessionId}_${historyIndex}`)!,
);
}
//await new Promise(resolve => setTimeout(resolve, 1000));
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
Expand All @@ -263,9 +302,8 @@ export function setupDefaultViewer() {

let currentOverlay: Overlay | undefined = undefined;

document.addEventListener("keypress", (evt) => {
console.log(evt.key, evt.ctrlKey);
if (evt.key === "i") {
document.addEventListener("keydown", (evt) => {
if (evt.key === "r" && evt.ctrlKey) {
if (!currentOverlay || currentOverlay.wasDisposed) {
currentOverlay = showHistoryViewer();
} else {
Expand All @@ -292,6 +330,30 @@ export function setupDefaultViewer() {
title.textContent = "History";
historyViewer.append(title);

const buttonRecord = document.createElement("button");
buttonRecord.classList.add("record-button");
buttonRecord.textContent = "Record";
historyViewer.appendChild(buttonRecord);

const updateRecordButtonState = () => {
if (hashBinding.recording) {
buttonRecord.classList.add("active");
} else {
buttonRecord.classList.remove("active");
}
};
buttonRecord.addEventListener("click", () => {
hashBinding.recording = !hashBinding.recording;
if (!hashBinding.recording) {
console.log("Resetting session ID and history index to prepare for new recording");
hashBinding.resetSessionId();
hashBinding.resetHistoryIndex();
}
console.log(hashBinding.recording ? "Recording started" : "Recording stopped");
updateRecordButtonState();
});
updateRecordButtonState(); // sets the initial state

const buttonClose = document.createElement("button");
buttonClose.classList.add("close-button");
buttonClose.textContent = "Close";
Expand Down Expand Up @@ -331,8 +393,10 @@ export function setupDefaultViewer() {
const count = historyCounts[key];
const lastUpdateTime = historyTimes[key];

if (key === hashBinding.sessionId) continue;

if (key === hashBinding.sessionId) {
console.log("Skipping current session", key);
continue;
}
if (count < 10) {
deleteHistory(key);
continue;
Expand Down Expand Up @@ -368,7 +432,17 @@ export function setupDefaultViewer() {
showHistoryViewer();
});
listEl.appendChild(deleteHistoryBtn);


const saveButton = document.createElement("button");
saveButton.textContent = "Save";
saveButton.classList.add("save-button");
saveButton.addEventListener("click", () => {
//const sessionId = "mySession"; // Replace this with the dynamic session ID, if needed
console.log('Saving history for session:', key);
//saveHistory(sessionId);
(window as any).saveHistory(key);
});
listEl.appendChild(saveButton);
idx++;
}

Expand Down
2 changes: 1 addition & 1 deletion src/ui/history.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
margin-top: 20px;
display: grid;
white-space: nowrap;
grid-template-columns: auto auto auto min-content min-content;
grid-template-columns: auto auto auto min-content min-content min-content;
column-gap: 10px;
}
14 changes: 14 additions & 0 deletions src/ui/state_editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,17 @@
position: absolute;
right: 15px;
}

.record-button {
position: absolute;
right: 70px;
}
.record-button.active {
background-color: green; /* Green background when active (recording) */
color: white; /* White text when active */
}

.record-button:not(.active) {
background-color: rgb(255, 255, 255); /* White background when not active */
color: black; /* Black text when not active */
}
Loading

0 comments on commit 2556d44

Please sign in to comment.