From 72048cc1062dec15b771ad2092c8b54fe28c26a0 Mon Sep 17 00:00:00 2001 From: sylenien Date: Fri, 18 Nov 2022 16:29:30 +0100 Subject: [PATCH] change(ui): change file upl confirmation --- .../Assist/RecordingsList/RecordsListItem.tsx | 13 ++++++++++--- .../components/AssistActions/AssistActions.tsx | 2 +- .../Session_/ScreenRecorder/ScreenRecorder.tsx | 13 ++++++++++--- frontend/app/services/RecordingsService.ts | 15 +++++++++++++-- .../tracker-assist/src/ScreenRecordingState.ts | 7 +++++++ 5 files changed, 41 insertions(+), 9 deletions(-) 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]) })