fix(ui): small fixes for player redesign (#1988)
This commit is contained in:
Delirium
GitHub
parent
3e1415eded
commit
7d38608b22
4 changed files with 226 additions and 131 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"printWidth": 100,
|
||||
"printWidth": 80,
|
||||
"singleQuote": true,
|
||||
"importOrderSeparation": true,
|
||||
"importOrderSortSpecifiers": true,
|
||||
|
|
|
|||
|
|
@ -1,33 +1,39 @@
|
|||
import {
|
||||
LaunchConsoleShortcut, LaunchEventsShortcut,
|
||||
LaunchNetworkShortcut, LaunchPerformanceShortcut,
|
||||
LaunchXRaShortcut
|
||||
} from "Components/Session_/Player/Controls/components/KeyboardHelp";
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import { connect } from 'react-redux';
|
||||
import { PlayButton, PlayingState, FullScreenButton } from 'App/player-ui';
|
||||
import cn from 'classnames';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Tooltip } from 'UI';
|
||||
import { MobilePlayerContext } from 'App/components/Session/playerContext';
|
||||
import { FullScreenButton, PlayButton, PlayingState } from 'App/player-ui';
|
||||
import ControlButton from 'Components/Session_/Player/Controls/ControlButton';
|
||||
import Timeline from 'Components/Session_/Player/Controls/Timeline';
|
||||
import {
|
||||
LaunchConsoleShortcut,
|
||||
LaunchEventsShortcut,
|
||||
LaunchNetworkShortcut,
|
||||
LaunchPerformanceShortcut,
|
||||
LaunchXRaShortcut,
|
||||
} from 'Components/Session_/Player/Controls/components/KeyboardHelp';
|
||||
import PlayerControls from 'Components/Session_/Player/Controls/components/PlayerControls';
|
||||
import styles from 'Components/Session_/Player/Controls/controls.module.css';
|
||||
import {
|
||||
CONSOLE,
|
||||
EXCEPTIONS,
|
||||
NETWORK,
|
||||
OVERVIEW,
|
||||
PERFORMANCE,
|
||||
STACKEVENTS,
|
||||
changeSkipInterval,
|
||||
fullscreenOff,
|
||||
fullscreenOn,
|
||||
OVERVIEW,
|
||||
toggleBottomBlock,
|
||||
changeSkipInterval,
|
||||
CONSOLE, STACKEVENTS, NETWORK, PERFORMANCE, EXCEPTIONS,
|
||||
} from 'Duck/components/player';
|
||||
import { MobilePlayerContext } from 'App/components/Session/playerContext';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { fetchSessions } from 'Duck/liveSearch';
|
||||
import { Tooltip } from 'UI';
|
||||
|
||||
import Timeline from 'Components/Session_/Player/Controls/Timeline';
|
||||
import ControlButton from 'Components/Session_/Player/Controls/ControlButton';
|
||||
import PlayerControls from 'Components/Session_/Player/Controls/components/PlayerControls';
|
||||
|
||||
import styles from 'Components/Session_/Player/Controls/controls.module.css';
|
||||
import XRayButton from 'Shared/XRayButton';
|
||||
import CreateNote from 'Components/Session_/Player/Controls/components/CreateNote';
|
||||
import { useStore } from "../../../../mstore";
|
||||
import { SummaryButton } from "../../../Session_/Player/Controls/Controls";
|
||||
|
||||
export const SKIP_INTERVALS = {
|
||||
2: 2e3,
|
||||
|
|
@ -44,13 +50,22 @@ function Controls(props: any) {
|
|||
|
||||
const { playing, completed, skip, speed, messagesLoading } = store.get();
|
||||
|
||||
const { bottomBlock, toggleBottomBlock, fullscreen, changeSkipInterval, skipInterval, session } =
|
||||
props;
|
||||
const {
|
||||
bottomBlock,
|
||||
toggleBottomBlock,
|
||||
fullscreen,
|
||||
changeSkipInterval,
|
||||
skipInterval,
|
||||
session,
|
||||
} = props;
|
||||
|
||||
const disabled = messagesLoading;
|
||||
const sessionTz = session?.timezone;
|
||||
const onKeyDown = (e: any) => {
|
||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
|
||||
if (
|
||||
e.target instanceof HTMLInputElement ||
|
||||
e.target instanceof HTMLTextAreaElement
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Esc' || e.key === 'Escape') {
|
||||
|
|
@ -112,22 +127,38 @@ function Controls(props: any) {
|
|||
forthTenSeconds={forthTenSeconds}
|
||||
toggleSpeed={(speedIndex) => player.toggleSpeed(speedIndex)}
|
||||
toggleSkip={() => player.toggleSkip()}
|
||||
playButton={<PlayButton state={state} togglePlay={player.togglePlay} iconSize={36} />}
|
||||
playButton={
|
||||
<PlayButton
|
||||
state={state}
|
||||
togglePlay={player.togglePlay}
|
||||
iconSize={36}
|
||||
/>
|
||||
}
|
||||
skipIntervals={SKIP_INTERVALS}
|
||||
setSkipInterval={changeSkipInterval}
|
||||
currentInterval={skipInterval}
|
||||
startedAt={session.startedAt}
|
||||
/>
|
||||
<div className={cn('mx-2')} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center h-full gap-2">
|
||||
<DevtoolsButtons toggleBottomTools={toggleBottomTools} bottomBlock={bottomBlock} />
|
||||
<Tooltip title="Fullscreen" delay={0} placement="top-start" className="mx-4">
|
||||
<DevtoolsButtons
|
||||
toggleBottomTools={toggleBottomTools}
|
||||
bottomBlock={bottomBlock}
|
||||
/>
|
||||
<Tooltip
|
||||
title="Fullscreen"
|
||||
delay={0}
|
||||
placement="top-start"
|
||||
className="mx-4"
|
||||
>
|
||||
<FullScreenButton
|
||||
size={16}
|
||||
onClick={props.fullscreenOn}
|
||||
customClasses={'rounded hover:bg-gray-light-shade color-gray-medium'}
|
||||
customClasses={
|
||||
'rounded hover:bg-gray-light-shade color-gray-medium'
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
@ -142,14 +173,42 @@ interface DevtoolsButtonsProps {
|
|||
bottomBlock: number;
|
||||
}
|
||||
|
||||
function DevtoolsButtons({ toggleBottomTools, bottomBlock }: DevtoolsButtonsProps) {
|
||||
const { store } = React.useContext(MobilePlayerContext);
|
||||
function DevtoolsButtons({
|
||||
toggleBottomTools,
|
||||
bottomBlock,
|
||||
}: DevtoolsButtonsProps) {
|
||||
const { aiSummaryStore } = useStore();
|
||||
const { store, player } = React.useContext(MobilePlayerContext);
|
||||
|
||||
const { exceptionsList, logMarkedCountNow, messagesLoading, stackMarkedCountNow, resourceMarkedCountNow } = store.get();
|
||||
const {
|
||||
exceptionsList,
|
||||
logMarkedCountNow,
|
||||
messagesLoading,
|
||||
stackMarkedCountNow,
|
||||
resourceMarkedCountNow,
|
||||
} = store.get();
|
||||
|
||||
const showExceptions = exceptionsList.length > 0;
|
||||
// @ts-ignore
|
||||
const originStr = window.env.ORIGIN || window.location.origin;
|
||||
const isSaas = /app\.openreplay\.com/.test(originStr);
|
||||
|
||||
const showSummary = () => {
|
||||
player.pause();
|
||||
if (bottomBlock !== OVERVIEW) {
|
||||
toggleBottomTools(OVERVIEW);
|
||||
}
|
||||
aiSummaryStore.setToggleSummary(!aiSummaryStore.toggleSummary);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isSaas ? (
|
||||
<SummaryButton
|
||||
onClick={showSummary}
|
||||
withToggle={bottomBlock === OVERVIEW}
|
||||
toggleValue={aiSummaryStore.toggleSummary}
|
||||
/>
|
||||
) : null}
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex items-center gap-2'}>
|
||||
|
|
@ -187,7 +246,7 @@ function DevtoolsButtons({ toggleBottomTools, bottomBlock }: DevtoolsButtonsProp
|
|||
label="Network"
|
||||
hasErrors={resourceMarkedCountNow > 0}
|
||||
/>
|
||||
{showExceptions ?
|
||||
{showExceptions ? (
|
||||
<ControlButton
|
||||
disabled={messagesLoading}
|
||||
onClick={() => toggleBottomTools(EXCEPTIONS)}
|
||||
|
|
@ -195,7 +254,7 @@ function DevtoolsButtons({ toggleBottomTools, bottomBlock }: DevtoolsButtonsProp
|
|||
hasErrors={showExceptions}
|
||||
label="Exceptions"
|
||||
/>
|
||||
: null}
|
||||
) : null}
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex gap-2 items-center'}>
|
||||
|
|
@ -234,8 +293,18 @@ export default connect(
|
|||
disabledRedux: isEnterprise && !permissions.includes('DEV_TOOLS'),
|
||||
fullscreen: state.getIn(['components', 'player', 'fullscreen']),
|
||||
bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
|
||||
showStorageRedux: !state.getIn(['components', 'player', 'hiddenHints', 'storage']),
|
||||
showStackRedux: !state.getIn(['components', 'player', 'hiddenHints', 'stack']),
|
||||
showStorageRedux: !state.getIn([
|
||||
'components',
|
||||
'player',
|
||||
'hiddenHints',
|
||||
'storage',
|
||||
]),
|
||||
showStackRedux: !state.getIn([
|
||||
'components',
|
||||
'player',
|
||||
'hiddenHints',
|
||||
'stack',
|
||||
]),
|
||||
session: state.getIn(['sessions', 'current']),
|
||||
totalAssistSessions: state.getIn(['liveSearch', 'total']),
|
||||
skipInterval: state.getIn(['components', 'player', 'skipInterval']),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
import { useStore } from 'App/mstore';
|
||||
import { session as sessionRoute, withSiteId } from 'App/routes';
|
||||
import { STORAGE_TYPES, StorageType, selectStorageType } from "Player";
|
||||
import { Switch } from "antd";
|
||||
import cn from "classnames";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { PlayerContext } from "App/components/Session/playerContext";
|
||||
import { useStore } from "App/mstore";
|
||||
import { FullScreenButton, PlayButton, PlayingState } from "App/player-ui";
|
||||
import { session as sessionRoute, withSiteId } from "App/routes";
|
||||
import useShortcuts from "Components/Session/Player/ReplayPlayer/useShortcuts";
|
||||
import {
|
||||
LaunchConsoleShortcut,
|
||||
LaunchEventsShortcut,
|
||||
|
|
@ -8,16 +18,8 @@ import {
|
|||
LaunchStateShortcut,
|
||||
LaunchXRaShortcut,
|
||||
} from 'Components/Session_/Player/Controls/components/KeyboardHelp';
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectStorageType, STORAGE_TYPES, StorageType } from 'Player';
|
||||
import { PlayButton, PlayingState, FullScreenButton } from 'App/player-ui';
|
||||
import { Switch } from 'antd'
|
||||
import {
|
||||
CONSOLE,
|
||||
fullscreenOff,
|
||||
fullscreenOn,
|
||||
GRAPHQL,
|
||||
INSPECTOR,
|
||||
NETWORK,
|
||||
|
|
@ -26,21 +28,19 @@ import {
|
|||
PROFILER,
|
||||
STACKEVENTS,
|
||||
STORAGE,
|
||||
toggleBottomBlock,
|
||||
changeSkipInterval,
|
||||
fullscreenOff,
|
||||
fullscreenOn,
|
||||
toggleBottomBlock,
|
||||
} from 'Duck/components/player';
|
||||
import { PlayerContext } from 'App/components/Session/playerContext';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { fetchSessions } from 'Duck/liveSearch';
|
||||
import { Icon } from 'UI';
|
||||
import { fetchSessions } from "Duck/liveSearch";
|
||||
import { Icon } from "UI";
|
||||
|
||||
import Timeline from './Timeline';
|
||||
import ControlButton from './ControlButton';
|
||||
import PlayerControls from './components/PlayerControls';
|
||||
import ControlButton from "./ControlButton";
|
||||
import Timeline from "./Timeline";
|
||||
import PlayerControls from "./components/PlayerControls";
|
||||
import styles from "./controls.module.css";
|
||||
|
||||
import styles from './controls.module.css';
|
||||
import CreateNote from 'Components/Session_/Player/Controls/components/CreateNote';
|
||||
import useShortcuts from 'Components/Session/Player/ReplayPlayer/useShortcuts';
|
||||
|
||||
export const SKIP_INTERVALS = {
|
||||
2: 2e3,
|
||||
|
|
@ -49,25 +49,25 @@ export const SKIP_INTERVALS = {
|
|||
15: 15e3,
|
||||
20: 2e4,
|
||||
30: 3e4,
|
||||
60: 6e4,
|
||||
60: 6e4
|
||||
};
|
||||
|
||||
function getStorageName(type: any) {
|
||||
switch (type) {
|
||||
case STORAGE_TYPES.REDUX:
|
||||
return 'Redux';
|
||||
return "Redux";
|
||||
case STORAGE_TYPES.MOBX:
|
||||
return 'Mobx';
|
||||
return "Mobx";
|
||||
case STORAGE_TYPES.VUEX:
|
||||
return 'Vuex';
|
||||
return "Vuex";
|
||||
case STORAGE_TYPES.NGRX:
|
||||
return 'NgRx';
|
||||
return "NgRx";
|
||||
case STORAGE_TYPES.ZUSTAND:
|
||||
return 'Zustand';
|
||||
return "Zustand";
|
||||
case STORAGE_TYPES.NONE:
|
||||
return 'State';
|
||||
return "State";
|
||||
default:
|
||||
return 'State';
|
||||
return "State";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ function Controls(props: any) {
|
|||
speed,
|
||||
messagesLoading,
|
||||
markedTargets,
|
||||
inspectorMode,
|
||||
inspectorMode
|
||||
} = store.get();
|
||||
|
||||
const {
|
||||
|
|
@ -97,7 +97,7 @@ function Controls(props: any) {
|
|||
previousSessionId,
|
||||
nextSessionId,
|
||||
siteId,
|
||||
setActiveTab,
|
||||
setActiveTab
|
||||
} = props;
|
||||
|
||||
const disabled = disabledRedux || messagesLoading || inspectorMode || markedTargets;
|
||||
|
|
@ -118,7 +118,7 @@ function Controls(props: any) {
|
|||
toggleBottomBlock,
|
||||
openNextSession: nextHandler,
|
||||
openPrevSession: prevHandler,
|
||||
setActiveTab,
|
||||
setActiveTab
|
||||
});
|
||||
|
||||
const forthTenSeconds = () => {
|
||||
|
|
@ -137,16 +137,16 @@ 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}>
|
||||
<Timeline />
|
||||
{!fullscreen && (
|
||||
<div className={cn(styles.buttons, '!px-2')}>
|
||||
<div className={cn(styles.buttons, "!px-2")}>
|
||||
<div className="flex items-center">
|
||||
<PlayerControls
|
||||
skip={skip}
|
||||
|
|
@ -163,7 +163,7 @@ function Controls(props: any) {
|
|||
currentInterval={skipInterval}
|
||||
startedAt={session.startedAt}
|
||||
/>
|
||||
<div className={cn('mx-2')} />
|
||||
<div className={cn("mx-2")} />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 items-center h-full">
|
||||
|
|
@ -179,7 +179,7 @@ function Controls(props: any) {
|
|||
<FullScreenButton
|
||||
size={16}
|
||||
onClick={props.fullscreenOn}
|
||||
customClasses={'rounded hover:bg-gray-light-shade color-gray-medium'}
|
||||
customClasses={"rounded hover:bg-gray-light-shade color-gray-medium"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -216,8 +216,8 @@ const DevtoolsButtons = observer(
|
|||
const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
|
||||
|
||||
const storageType = store.get().tabStates[currentTab]
|
||||
? selectStorageType(store.get().tabStates[currentTab])
|
||||
: StorageType.NONE;
|
||||
? selectStorageType(store.get().tabStates[currentTab])
|
||||
: StorageType.NONE;
|
||||
const profilesCount = profilesList.length;
|
||||
const graphqlCount = graphqlList.length;
|
||||
const showGraphql = graphqlCount > 0;
|
||||
|
|
@ -228,29 +228,34 @@ const DevtoolsButtons = observer(
|
|||
const showSummary = () => {
|
||||
player.pause();
|
||||
if (bottomBlock !== OVERVIEW) {
|
||||
toggleBottomTools(OVERVIEW)
|
||||
toggleBottomTools(OVERVIEW);
|
||||
}
|
||||
aiSummaryStore.setToggleSummary(!aiSummaryStore.toggleSummary);
|
||||
// showModal(<SummaryBlock sessionId={sessionId} />, { right: true, width: 330 });
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isSaas ? <SummaryButton onClick={showSummary} /> : null}
|
||||
{isSaas ? (
|
||||
<SummaryButton
|
||||
onClick={showSummary}
|
||||
withToggle={bottomBlock === OVERVIEW}
|
||||
toggleValue={aiSummaryStore.toggleSummary}
|
||||
/>
|
||||
) : null}
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex items-center gap-2'}>
|
||||
<div className={"flex items-center gap-2"}>
|
||||
<LaunchXRaShortcut />
|
||||
<div>Get a quick overview on the issues in this session.</div>
|
||||
</div>
|
||||
}
|
||||
label={'X-Ray'}
|
||||
label={"X-Ray"}
|
||||
onClick={() => toggleBottomTools(OVERVIEW)}
|
||||
active={bottomBlock === OVERVIEW && !inspectorMode}
|
||||
/>
|
||||
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex gap-2 items-center'}>
|
||||
<div className={"flex gap-2 items-center"}>
|
||||
<LaunchConsoleShortcut />
|
||||
<div>Launch Console</div>
|
||||
</div>
|
||||
|
|
@ -264,7 +269,7 @@ const DevtoolsButtons = observer(
|
|||
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex gap-2 items-center'}>
|
||||
<div className={"flex gap-2 items-center"}>
|
||||
<LaunchNetworkShortcut />
|
||||
<div>Launch Network</div>
|
||||
</div>
|
||||
|
|
@ -278,7 +283,7 @@ const DevtoolsButtons = observer(
|
|||
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex gap-2 items-center'}>
|
||||
<div className={"flex gap-2 items-center"}>
|
||||
<LaunchPerformanceShortcut />
|
||||
<div>Launch Performance</div>
|
||||
</div>
|
||||
|
|
@ -301,7 +306,7 @@ const DevtoolsButtons = observer(
|
|||
{showStorage && (
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex gap-2 items-center'}>
|
||||
<div className={"flex gap-2 items-center"}>
|
||||
<LaunchStateShortcut />
|
||||
<div>Launch State</div>
|
||||
</div>
|
||||
|
|
@ -314,7 +319,7 @@ const DevtoolsButtons = observer(
|
|||
)}
|
||||
<ControlButton
|
||||
popover={
|
||||
<div className={'flex gap-2 items-center'}>
|
||||
<div className={"flex gap-2 items-center"}>
|
||||
<LaunchEventsShortcut />
|
||||
<div>Launch Events</div>
|
||||
</div>
|
||||
|
|
@ -342,7 +347,7 @@ export function SummaryButton({
|
|||
onClick,
|
||||
withToggle,
|
||||
onToggle,
|
||||
toggleValue,
|
||||
toggleValue
|
||||
}: {
|
||||
onClick?: () => void,
|
||||
withToggle?: boolean,
|
||||
|
|
@ -360,64 +365,65 @@ export function SummaryButton({
|
|||
>
|
||||
{withToggle ? (
|
||||
<Switch
|
||||
size={"small"}
|
||||
checked={toggleValue}
|
||||
onChange={onToggle}
|
||||
/>
|
||||
) : null}
|
||||
<Icon name={'sparkles'} size={16} />
|
||||
<div className={'font-semibold text-main'}>Summary AI</div>
|
||||
<Icon name={"sparkles"} size={16} />
|
||||
<div className={"font-semibold text-main"}>Summary AI</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const gradientButton = {
|
||||
border: 'double 1px transparent',
|
||||
borderRadius: '60px',
|
||||
border: "double 1px transparent",
|
||||
borderRadius: "60px",
|
||||
background:
|
||||
'linear-gradient(#f6f6f6, #f6f6f6), linear-gradient(to right, #394EFF 0%, #3EAAAF 100%)',
|
||||
backgroundOrigin: 'border-box',
|
||||
backgroundClip: 'content-box, border-box',
|
||||
cursor: 'pointer',
|
||||
"linear-gradient(#f6f6f6, #f6f6f6), linear-gradient(to right, #394EFF 0%, #3EAAAF 100%)",
|
||||
backgroundOrigin: "border-box",
|
||||
backgroundClip: "content-box, border-box",
|
||||
cursor: "pointer"
|
||||
};
|
||||
const onHoverFillStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
borderRadius: '60px',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
borderRadius: "60px",
|
||||
gap: 2,
|
||||
alignItems: 'center',
|
||||
padding: '2px 8px',
|
||||
background: 'linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)',
|
||||
alignItems: "center",
|
||||
padding: "2px 8px",
|
||||
background: "linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)"
|
||||
};
|
||||
const fillStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
borderRadius: '60px',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
borderRadius: "60px",
|
||||
gap: 2,
|
||||
alignItems: 'center',
|
||||
padding: '2px 8px',
|
||||
alignItems: "center",
|
||||
padding: "2px 8px"
|
||||
};
|
||||
|
||||
const ControlPlayer = observer(Controls);
|
||||
|
||||
export default connect(
|
||||
(state: any) => {
|
||||
const permissions = state.getIn(['user', 'account', 'permissions']) || [];
|
||||
const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee';
|
||||
const permissions = state.getIn(["user", "account", "permissions"]) || [];
|
||||
const isEnterprise = state.getIn(["user", "account", "edition"]) === "ee";
|
||||
return {
|
||||
disabledRedux: isEnterprise && !permissions.includes('DEV_TOOLS'),
|
||||
fullscreen: state.getIn(['components', 'player', 'fullscreen']),
|
||||
bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
|
||||
showStorageRedux: !state.getIn(['components', 'player', 'hiddenHints', 'storage']),
|
||||
showStackRedux: !state.getIn(['components', 'player', 'hiddenHints', 'stack']),
|
||||
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']),
|
||||
disabledRedux: isEnterprise && !permissions.includes("DEV_TOOLS"),
|
||||
fullscreen: state.getIn(["components", "player", "fullscreen"]),
|
||||
bottomBlock: state.getIn(["components", "player", "bottomBlock"]),
|
||||
showStorageRedux: !state.getIn(["components", "player", "hiddenHints", "storage"]),
|
||||
showStackRedux: !state.getIn(["components", "player", "hiddenHints", "stack"]),
|
||||
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"])
|
||||
};
|
||||
},
|
||||
{
|
||||
|
|
@ -425,7 +431,7 @@ export default connect(
|
|||
fullscreenOff,
|
||||
toggleBottomBlock,
|
||||
fetchSessions,
|
||||
changeSkipInterval,
|
||||
changeSkipInterval
|
||||
}
|
||||
)(ControlPlayer);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { PayloadAction, createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
interface PlayerState {
|
||||
fullscreen: boolean;
|
||||
|
|
@ -12,8 +12,8 @@ interface PlayerState {
|
|||
enabled: boolean;
|
||||
startTs: number;
|
||||
endTs: number;
|
||||
}
|
||||
zoomTab: 'overview' | 'journey' | 'issues' | 'errors',
|
||||
};
|
||||
zoomTab: 'overview' | 'journey' | 'issues' | 'errors';
|
||||
}
|
||||
|
||||
const initialState: PlayerState = {
|
||||
|
|
@ -39,8 +39,15 @@ export const playerSlice = createSlice({
|
|||
toggleFullscreen: (state, action: PayloadAction<boolean | undefined>) => {
|
||||
state.fullscreen = action.payload !== undefined ? action.payload : !state.fullscreen;
|
||||
},
|
||||
fullscreenOff: (state) => {
|
||||
state.fullscreen = false;
|
||||
},
|
||||
fullscreenOn: (state) => {
|
||||
state.fullscreen = true;
|
||||
},
|
||||
toggleBottomBlock: (state, action: PayloadAction<number>) => {
|
||||
state.bottomBlock = state.bottomBlock !== action.payload && action.payload !== 0 ? action.payload : 0;
|
||||
state.bottomBlock =
|
||||
state.bottomBlock !== action.payload && action.payload !== 0 ? action.payload : 0;
|
||||
},
|
||||
closeBottomBlock: (state) => {
|
||||
state.bottomBlock = 0;
|
||||
|
|
@ -66,13 +73,26 @@ export const playerSlice = createSlice({
|
|||
},
|
||||
setZoomTab: (state, action: PayloadAction<'overview' | 'journey' | 'issues' | 'errors'>) => {
|
||||
state.zoomTab = action.payload;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
interface ToggleZoomPayload { enabled: boolean, range?: [number, number]}
|
||||
interface ToggleZoomPayload {
|
||||
enabled: boolean;
|
||||
range?: [number, number];
|
||||
}
|
||||
|
||||
export const { toggleFullscreen, toggleBottomBlock, changeSkipInterval, hideHint, toggleZoom, setZoomTab, closeBottomBlock } = playerSlice.actions;
|
||||
export const {
|
||||
toggleFullscreen,
|
||||
toggleBottomBlock,
|
||||
changeSkipInterval,
|
||||
hideHint,
|
||||
toggleZoom,
|
||||
setZoomTab,
|
||||
closeBottomBlock,
|
||||
fullscreenOff,
|
||||
fullscreenOn,
|
||||
} = playerSlice.actions;
|
||||
|
||||
export default playerSlice.reducer;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue