From 6de2168d92487b84d922f35c00a532055198be99 Mon Sep 17 00:00:00 2001 From: Delirium Date: Tue, 26 Mar 2024 15:54:10 +0100 Subject: [PATCH] fix ui batch of small fixes for notes, controls, shortcuts (#2001) --- .../Player/MobilePlayer/MobileControls.tsx | 69 +++++------ .../Player/MobilePlayer/PlayerBlock.tsx | 3 + .../Player/MobilePlayer/PlayerContent.tsx | 2 +- .../Player/MobilePlayer/PlayerInst.tsx | 2 + .../Player/ReplayPlayer/useShortcuts.ts | 113 +++++++++--------- .../Player/Controls/components/CreateNote.tsx | 7 +- frontend/app/services/NotesService.ts | 2 +- 7 files changed, 104 insertions(+), 94 deletions(-) diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx index 2ba520525..b9df5a792 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx @@ -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 (
@@ -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']), }; }, { diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx index 800fb4f97..59a31de3c 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx @@ -13,6 +13,7 @@ interface IProps { activeTab: string; jiraConfig: Record 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) { ) : null} diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx index 4cdad1a0e..04144fdc9 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx @@ -58,7 +58,7 @@ function PlayerContent({ session, fullscreen, activeTab, setActiveTab }: IProps) style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)' } : undefined} >
- +
{activeTab !== '' && ( diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx index 3752500b8..e82511aea 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx @@ -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 ? ( activeTab === tab ? props.setActiveTab('') : props.setActiveTab(tab)} speedDown={playerContext.player.speedDown} speedUp={playerContext.player.speedUp} jump={playerContext.player.jump} diff --git a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts index dc27dd1b7..04fd64145 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts +++ b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts @@ -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]); } diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx index 421d67efa..cbb8acf8d 100644 --- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx @@ -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" /> diff --git a/frontend/app/services/NotesService.ts b/frontend/app/services/NotesService.ts index 1fbe8b7d4..0299df4b3 100644 --- a/frontend/app/services/NotesService.ts +++ b/frontend/app/services/NotesService.ts @@ -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)', }