jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix type mismatch and refactor recorder comp

Browse source
This commit is contained in:
sylenien 2022-11-29 17:11:06 +01:00 • committed by Delirium
parent ed857861a9
commit 77de104262
2 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
View file

@ -3,12 +3,13 @@ import { screenRecorder } from 'App/utils/screenRecorder';
import { Tooltip } from 'react-tippy';
import { connect } from 'react-redux';
import { Button } from 'UI';
import { requestRecording, stopRecording, connectPlayer } from 'Player';
import { SessionRecordingStatus } from 'Player/MessageDistributor/managers/AssistManager';
import { SessionRecordingStatus } from 'Player';
let stopRecorderCb: () => void;
import { recordingsService } from 'App/services';
import { toast } from 'react-toastify';
import { durationFromMs, formatTimeOrDate } from 'App/date';
import { formatTimeOrDate } from 'App/date';
import { PlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
/**
* "edge" || "edg/" chromium based edge (dev or canary)
@ -32,14 +33,15 @@ const supportedBrowsers = ['Chrome v91+', 'Edge v90+'];
const supportedMessage = `Supported Browsers: ${supportedBrowsers.join(', ')}`;
function ScreenRecorder({
recordingState,
siteId,
sessionId,
}: {
recordingState: SessionRecordingStatus;
siteId: string;
sessionId: string;
}) {
const { player, store } = React.useContext(PlayerContext)
const recordingState = store.get().recordingState
const [isRecording, setRecording] = React.useState(false);
React.useEffect(() => {
@ -82,13 +84,13 @@ function ScreenRecorder({
};
const stopRecordingHandler = () => {
stopRecording();
player.assistManager.stopRecording();
stopRecorderCb?.();
setRecording(false);
};
const recordingRequest = () => {
requestRecording();
player.assistManager.requestRecording()
};
if (!isSupported()) {
@ -116,9 +118,7 @@ function ScreenRecorder({
);
}
export default connectPlayer((state: any) => ({ recordingState: state.recordingState }))(
connect((state: any) => ({
export default connect((state: any) => ({
siteId: state.getIn(['site', 'siteId']),
sessionId: state.getIn(['sessions', 'current', 'sessionId']),
}))(ScreenRecorder)
);
}))(observer(ScreenRecorder))

7
frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { List, AutoSizer } from 'react-virtualized';
import cn from 'classnames';
import { Duration } from 'luxon';
import { NoContent, Icon, Button } from 'UI';
import { NoContent, Button } from 'UI';
import { percentOf } from 'App/utils';
import BarRow from './BarRow';
@ -222,8 +222,8 @@ export default class TimeTable extends React.PureComponent<Props, State> {
>
{columns
.filter((i: any) => !i.hidden)
.map(({ dataKey, render, width }) => (
<div className={stl.cell} style={{ width: `${width}px` }}>
.map(({ dataKey, render, width, label }) => (
<div key={parseInt(label, 36)} className={stl.cell} style={{ width: `${width}px` }}>
{render
? render(row)
: row[dataKey || ''] || <i className="color-gray-light">{'empty'}</i>}
@ -327,6 +327,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
<div className={stl.infoHeaders}>
{columns.map(({ label, width, dataKey, onClick = null }) => (
<div
key={parseInt(label, 36)}
className={cn(stl.headerCell, 'flex items-center select-none', {
'cursor-pointer': typeof onClick === 'function',
})}