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

fix ui batch of small fixes for notes, controls, shortcuts (#2001)

Browse source
This commit is contained in:
Delirium 2024-03-26 15:54:10 +01:00 • committed by GitHub
parent e84aac012e
commit 6de2168d92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 104 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
View file

@ -2,6 +2,7 @@ import cn from 'classnames';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { connect } from 'react-redux';
import { useHistory } from 'react-router';
import { MobilePlayerContext } from 'App/components/Session/playerContext';
import { FullScreenButton, PlayButton, PlayingState } from 'App/player-ui';
@ -31,9 +32,10 @@ import {
import { fetchSessions } from 'Duck/liveSearch';
import { Tooltip } from 'UI';
import XRayButton from 'Shared/XRayButton';
import { useStore } from "../../../../mstore";
import { SummaryButton } from "../../../Session_/Player/Controls/Controls";
import { useStore } from '../../../../mstore';
import { session as sessionRoute, withSiteId } from '../../../../routes';
import { SummaryButton } from '../../../Session_/Player/Controls/Controls';
import useShortcuts from '../ReplayPlayer/useShortcuts';
export const SKIP_INTERVALS = {
2: 2e3,
@ -47,7 +49,7 @@ export const SKIP_INTERVALS = {
function Controls(props: any) {
const { player, store } = React.useContext(MobilePlayerContext);
const history = useHistory();
const { playing, completed, skip, speed, messagesLoading } = store.get();
const {
@ -57,40 +59,32 @@ function Controls(props: any) {
changeSkipInterval,
skipInterval,
session,
setActiveTab,
previousSessionId,
nextSessionId,
siteId,
} = props;
const disabled = messagesLoading;
const sessionTz = session?.timezone;
const onKeyDown = (e: any) => {
if (
e.target instanceof HTMLInputElement ||
e.target instanceof HTMLTextAreaElement
) {
return;
}
if (e.key === 'Esc' || e.key === 'Escape') {
props.fullscreenOff();
}
if (e.key === 'ArrowRight') {
forthTenSeconds();
}
if (e.key === 'ArrowLeft') {
backTenSeconds();
}
if (e.key === 'ArrowDown') {
player.speedDown();
}
if (e.key === 'ArrowUp') {
player.speedUp();
}
const nextHandler = () => {
history.push(withSiteId(sessionRoute(nextSessionId), siteId));
};
React.useEffect(() => {
document.addEventListener('keydown', onKeyDown.bind(this));
return () => {
document.removeEventListener('keydown', onKeyDown.bind(this));
};
}, []);
const prevHandler = () => {
history.push(withSiteId(sessionRoute(previousSessionId), siteId));
};
useShortcuts({
skipInterval,
fullScreenOn: props.fullscreenOn,
fullScreenOff: props.fullscreenOff,
toggleBottomBlock,
openNextSession: nextHandler,
openPrevSession: prevHandler,
setActiveTab,
});
const forthTenSeconds = () => {
// @ts-ignore
@ -107,10 +101,10 @@ function Controls(props: any) {
};
const state = completed
? PlayingState.Completed
: playing
? PlayingState.Playing
: PlayingState.Paused;
? PlayingState.Completed
: playing
? PlayingState.Playing
: PlayingState.Paused;
return (
<div className={styles.controls}>
@ -308,6 +302,9 @@ export default connect(
session: state.getIn(['sessions', 'current']),
totalAssistSessions: state.getIn(['liveSearch', 'total']),
skipInterval: state.getIn(['components', 'player', 'skipInterval']),
previousSessionId: state.getIn(['sessions', 'previousId']),
nextSessionId: state.getIn(['sessions', 'nextId']),
siteId: state.getIn(['site', 'siteId']),
};
},
{

3
frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx
View file

@ -13,6 +13,7 @@ interface IProps {
activeTab: string;
jiraConfig: Record<string, any>
fullView?: boolean
setActiveTab: (tab: string) => void
}
function PlayerBlock(props: IProps) {
@ -23,6 +24,7 @@ function PlayerBlock(props: IProps) {
activeTab,
jiraConfig,
fullView = false,
setActiveTab,
} = props;
const shouldShowSubHeader = !fullscreen && !fullView
@ -34,6 +36,7 @@ function PlayerBlock(props: IProps) {
<MobilePlayerSubheader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
) : null}
<Player
setActiveTab={setActiveTab}
activeTab={activeTab}
fullView={fullView}
/>

2
frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx
View file

@ -58,7 +58,7 @@ function PlayerContent({ session, fullscreen, activeTab, setActiveTab }: IProps)
style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)' } : undefined}
>
<div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
<PlayerBlock activeTab={activeTab} />
<PlayerBlock setActiveTab={setActiveTab} activeTab={activeTab} />
</div>
</div>
{activeTab !== '' && (

2
frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx
View file

@ -39,6 +39,7 @@ interface IProps {
activeTab: string;
updateLastPlayedSession: (id: string) => void
videoURL: string[];
setActiveTab: (tab: string) => void;
userDevice: string;
}
@ -142,6 +143,7 @@ function Player(props: IProps) {
)}
{!fullView ? (
<MobileControls
setActiveTab={(tab: string) => activeTab === tab ? props.setActiveTab('') : props.setActiveTab(tab)}
speedDown={playerContext.player.speedDown}
speedUp={playerContext.player.speedUp}
jump={playerContext.player.jump}

113
frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts
View file

@ -1,6 +1,7 @@
import { SKIP_INTERVALS } from 'Components/Session_/Player/Controls/Controls';
import { useEffect, useContext } from 'react';
import { useContext, useEffect } from 'react';
import { PlayerContext } from 'Components/Session/playerContext';
import { SKIP_INTERVALS } from 'Components/Session_/Player/Controls/Controls';
import { blockValues, blocks } from 'Duck/components/player';
function useShortcuts({
@ -32,63 +33,67 @@ function useShortcuts({
useEffect(() => {
const handleShortcuts = (e: KeyboardEvent) => {
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
return;
}
// shift + f = fullscreenOn
if (e.shiftKey) {
e.preventDefault();
player.toggleInspectorMode(false)
switch (e.key) {
case 'F':
return fullScreenOn();
case 'X':
return toggleBottomBlock(blocks.overview);
case 'P':
return toggleBottomBlock(blocks.performance);
case 'N':
return toggleBottomBlock(blocks.network);
case 'C':
return toggleBottomBlock(blocks.console);
case 'R':
return toggleBottomBlock(blocks.storage);
case 'E':
return toggleBottomBlock(blocks.stackEvents);
case '>':
return openNextSession();
case '<':
return openPrevSession();
case 'A':
player.pause();
return setActiveTab('EVENTS');
default:
break;
if (
e.target instanceof HTMLInputElement ||
e.target instanceof HTMLTextAreaElement
) {
return false;
} else {
// shift + f = fullscreenOn
if (e.shiftKey) {
e.preventDefault();
player.toggleInspectorMode(false);
switch (e.key) {
case 'F':
return fullScreenOn();
case 'X':
return toggleBottomBlock(blocks.overview);
case 'P':
return toggleBottomBlock(blocks.performance);
case 'N':
return toggleBottomBlock(blocks.network);
case 'C':
return toggleBottomBlock(blocks.console);
case 'R':
return toggleBottomBlock(blocks.storage);
case 'E':
return toggleBottomBlock(blocks.stackEvents);
case '>':
return openNextSession();
case '<':
return openPrevSession();
case 'A':
player.pause();
return setActiveTab('EVENTS');
default:
break;
}
}
if (e.key === 'Esc' || e.key === 'Escape') {
fullScreenOff();
}
if (e.key === ' ') {
(document.activeElement as HTMLInputElement | null)?.blur?.();
player.togglePlay();
}
if (e.key === 'ArrowRight') {
forthTenSeconds();
}
if (e.key === 'ArrowLeft') {
backTenSeconds();
}
if (e.key === 'ArrowDown') {
player.speedDown();
}
if (e.key === 'ArrowUp') {
player.speedUp();
}
}
if (e.key === 'Esc' || e.key === 'Escape') {
fullScreenOff();
}
if (e.key === ' ') {
(document.activeElement as HTMLInputElement | null)?.blur?.();
player.togglePlay();
}
if (e.key === 'ArrowRight') {
forthTenSeconds();
}
if (e.key === 'ArrowLeft') {
backTenSeconds();
}
if (e.key === 'ArrowDown') {
player.speedDown();
}
if (e.key === 'ArrowUp') {
player.speedUp();
}
};
document.addEventListener('keydown', handleShortcuts, true);
document.addEventListener('keydown', handleShortcuts);
return () => {
document.removeEventListener('keydown', handleShortcuts, true);
document.removeEventListener('keydown', handleShortcuts);
};
}, [forthTenSeconds, backTenSeconds, player, fullScreenOn, fullScreenOff]);
}

7
frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
View file

@ -194,11 +194,14 @@ function CreateNote({
ref={inputRef}
name="message"
id="message"
placeholder="Add Messave"
placeholder="Enter your note here..."
rows={3}
value={text}
autoFocus
onChange={(e) => setText(e.target.value)}
onChange={(e) => {
console.log(e, e.target.value)
setText(e.target.value)}
}
className="text-area"
/>

2
frontend/app/services/NotesService.ts
View file

@ -3,7 +3,7 @@ import APIClient from 'App/api_client';
export const tagProps = {
'ISSUE': 'red',
'QUERY': 'green',
'QUERY': 'geekblue',
'TASK': 'cyan',
'OTHER': 'rgba(0, 0, 0, 0.6)',
}