diff --git a/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx b/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx
index ec004221a..e4a0fe1cb 100644
--- a/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx
+++ b/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Icon, ItemMenu, Tooltip } from 'UI';
-import { durationFromMs, formatTimeOrDate, getDateFromMill } from 'App/date';
+import { durationFromMs, formatTimeOrDate } from 'App/date';
import { IRecord } from 'App/services/RecordingsService';
import { useStore } from 'App/mstore';
import { toast } from 'react-toastify';
@@ -32,7 +32,9 @@ function RecordsListItem(props: Props) {
const onDelete = () => {
recordingsStore.deleteRecording(record.recordId).then(() => {
- recordingsStore.setRecordings(recordingsStore.recordings.filter(rec => rec.recordId !== record.recordId))
+ recordingsStore.setRecordings(
+ recordingsStore.recordings.filter((rec) => rec.recordId !== record.recordId)
+ );
toast.success('Recording deleted');
});
};
@@ -40,7 +42,12 @@ function RecordsListItem(props: Props) {
const menuItems = [{ icon: 'trash', text: 'Delete', onClick: onDelete }];
const onSave = () => {
- recordingsStore.updateRecordingName(record.recordId, recordingTitle);
+ recordingsStore
+ .updateRecordingName(record.recordId, recordingTitle)
+ .then(() => {
+ toast.success('Name updated');
+ })
+ .catch(() => toast.error("Couldn't update name"));
setEdit(false);
};
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index 0f5ea510f..a474c9cc8 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -186,7 +186,7 @@ function AssistActions({
)}
{/* @ts-ignore wtf? */}
-
+ {isEnterprise ? : null}
{/* @ts-ignore */}
diff --git a/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx b/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
index 78c311266..345584e16 100644
--- a/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
+++ b/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
@@ -8,6 +8,7 @@ import { SessionRecordingStatus } from 'Player/MessageDistributor/managers/Assis
let stopRecorderCb: () => void;
import { recordingsService } from 'App/services';
import { toast } from 'react-toastify';
+import { durationFromMs, formatTimeOrDate } from 'App/date';
/**
* "edge" || "edg/" chromium based edge (dev or canary)
@@ -48,14 +49,16 @@ function ScreenRecorder({
const onSave = async (saveObj: { name: string; duration: number }, blob: Blob) => {
try {
toast.warn('Uploading the recording...');
- const url = await recordingsService.reserveUrl(siteId, saveObj);
- const status = recordingsService.saveFile(url, blob);
+ const { URL, key } = await recordingsService.reserveUrl(siteId, { ...saveObj, sessionId });
+ const status = recordingsService.saveFile(URL, blob);
if (status) {
+ await recordingsService.confirmFile(siteId, { ...saveObj, sessionId }, key);
toast.success('Session recording uploaded');
}
} catch (e) {
console.error(e);
+ toast.error("Couldn't upload the file");
}
};
@@ -69,7 +72,11 @@ function ScreenRecorder({
}, [recordingState, isRecording]);
const startRecording = async () => {
- const stop = await screenRecorder(`${sessionId}_${new Date().getTime()}`, sessionId, onSave);
+ const stop = await screenRecorder(
+ `${formatTimeOrDate(new Date().getTime(), undefined, true)}_${sessionId}`,
+ sessionId,
+ onSave
+ );
stopRecorderCb = stop;
setRecording(true);
};
diff --git a/frontend/app/services/RecordingsService.ts b/frontend/app/services/RecordingsService.ts
index 352a22e3b..f7885a36b 100644
--- a/frontend/app/services/RecordingsService.ts
+++ b/frontend/app/services/RecordingsService.ts
@@ -3,6 +3,7 @@ import APIClient from 'App/api_client';
interface RecordingData {
name: string;
duration: number;
+ sessionId: string;
}
interface FetchFilter {
@@ -34,10 +35,10 @@ export default class RecordingsService {
this.client = client || new APIClient();
}
- reserveUrl(siteId: string, recordingData: RecordingData): Promise {
+ reserveUrl(siteId: string, recordingData: RecordingData): Promise<{ URL: string; key: string }> {
return this.client.put(`/${siteId}/assist/save`, recordingData).then((r) => {
if (r.ok) {
- return r.json().then((j) => j.data.URL);
+ return r.json().then((j) => j.data);
} else {
throw new Error("Can't reserve space for recording: " + r.status);
}
@@ -58,6 +59,16 @@ export default class RecordingsService {
});
}
+ confirmFile(siteId: string, recordingData: RecordingData, key: string): Promise {
+ return this.client.put(`/${siteId}/assist/save/done`, { ...recordingData, key }).then((r) => {
+ if (r.ok) {
+ return r.json().then((j) => j.data);
+ } else {
+ throw new Error("Can't confirm file saving: " + r.status);
+ }
+ });
+ }
+
fetchRecordings(filters: FetchFilter): Promise {
return this.client.post(`/assist/records`, filters).then((r) => {
if (r.ok) {
diff --git a/tracker/tracker-assist/src/ScreenRecordingState.ts b/tracker/tracker-assist/src/ScreenRecordingState.ts
index 521a80370..8ceadec50 100644
--- a/tracker/tracker-assist/src/ScreenRecordingState.ts
+++ b/tracker/tracker-assist/src/ScreenRecordingState.ts
@@ -105,11 +105,18 @@ export default class ScreenRecordingState {
Object.assign(stopButton.style, styles)
stopButton.textContent = 'Stop Recording'
stopButton.id = 'or-recording-border'
+ stopButton.setAttribute('data-openreplay-obscured', '')
+ stopButton.setAttribute('data-openreplay-hidden', '')
+ stopButton.setAttribute('data-openreplay-ignore', '')
window.document.body.appendChild(stopButton)
Object.entries(borderEmulationStyles).forEach(([key, style,]) => {
Object.assign(borders[key].style, style)
borders[key].id = 'or-recording-border'
+
+ borders[key].setAttribute('data-openreplay-obscured', '')
+ borders[key].setAttribute('data-openreplay-hidden', '')
+ borders[key].setAttribute('data-openreplay-ignore', '')
window.document.body.appendChild(borders[key])
})