fix(ui) uxt fixes
This commit is contained in:
nick-delirium
parent
6975282599
commit
99ed87c45a
14 changed files with 68 additions and 30 deletions
|
|
@ -18,7 +18,7 @@ function LivePlayerBlock(props: IProps) {
|
|||
return (
|
||||
<div className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')} style={{ zIndex: undefined, minWidth: isMultiview ? '100%' : undefined }}>
|
||||
{shouldShowSubHeader ? (
|
||||
<SubHeader />
|
||||
<SubHeader live />
|
||||
) : null}
|
||||
<Player
|
||||
fullView={fullView}
|
||||
|
|
|
|||
|
|
@ -112,6 +112,10 @@ function WebPlayer(props: any) {
|
|||
[params.sessionId]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveTab('EVENTS')
|
||||
}, [uxtestingStore.isUxt()])
|
||||
|
||||
const onNoteClose = () => {
|
||||
setNoteItem(undefined);
|
||||
contextValue.player.play();
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ class EventGroupWrapper extends React.Component {
|
|||
presentInSearch,
|
||||
isNote,
|
||||
isTabChange,
|
||||
filterOutNote
|
||||
filterOutNote,
|
||||
} = this.props;
|
||||
const isLocation = event.type === TYPES.LOCATION;
|
||||
const isUtxEvent = event.type === TYPES.UTX_EVENT;
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ function EventsBlock(props: IProps) {
|
|||
const usedEvents = React.useMemo(() => {
|
||||
if (tabStates !== undefined) {
|
||||
tabChangeEvents.forEach((ev) => {
|
||||
const urlsList = tabStates[ev.tabId].urlsList;
|
||||
const urlsList = tabStates[ev.tabId]?.urlsList || [];
|
||||
let found = false;
|
||||
let i = urlsList.length - 1;
|
||||
while (!found && i >= 0) {
|
||||
|
|
@ -180,7 +180,7 @@ function EventsBlock(props: IProps) {
|
|||
<div className={cn(styles.header, 'p-4')}>
|
||||
{uxtestingStore.isUxt() ? (
|
||||
<div style={{ width: 240, height: 130 }} className={'relative'}>
|
||||
<video className={'z-20 fixed'} autoPlay controls src={props.utxVideo} width={240} />
|
||||
<video className={'z-20 fixed'} muted autoPlay controls src={props.utxVideo} width={240} />
|
||||
<div style={{ top: '40%', left: '50%', transform: 'translate(-50%, -50%)' }} className={'absolute z-10'}>No video</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
import React from 'react'
|
||||
import { durationFromMsFormatted } from "App/date";
|
||||
import { Tooltip } from 'antd'
|
||||
|
||||
function UtxEvent({ event }: any) {
|
||||
return (
|
||||
<div className={'flex flex-col'}>
|
||||
<div className={'border border-gray-light rounded bg-teal-light py-2 px-4 m-4 shadow'}>
|
||||
<div className={'w-full flex items-center justify-between'}>
|
||||
<div className={'bg-white rounded border border-gray-light px-2'}>{event.title}</div>
|
||||
<div className={'color-gray-medium'}>{durationFromMsFormatted(event.duration)}</div>
|
||||
<div className={'border border-gray-light rounded bg-teal-light pt-2 pb-1 px-4 m-4 shadow'}>
|
||||
<div className={'w-full flex items-center gap-2'}>
|
||||
<div className={'bg-white rounded border border-gray-light px-2'}>Task {event.indexNum}</div>
|
||||
<Tooltip title={event.description}>
|
||||
<div className={'text-disabled-text underline-dashed cursor-pointer'}>instructions</div>
|
||||
</Tooltip>
|
||||
<div className={'color-gray-medium ml-auto'}>{durationFromMsFormatted(event.duration)}</div>
|
||||
</div>
|
||||
{event.description && <div className="font-semibold">{event.description}</div>}
|
||||
<div className="font-semibold">{event.title}</div>
|
||||
</div>
|
||||
{event.comment ? (
|
||||
<div className={'border border-gray-light rounded bg-cyan py-2 px-4 mx-4 mb-4 shadow'}>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,10 @@ function SubHeader(props) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full px-4 flex items-center border-b relative">
|
||||
<div
|
||||
className="w-full px-4 flex items-center border-b relative"
|
||||
style={{ background: uxtestingStore.isUxt() ? props.live ? '#F6FFED' : '#EBF4F5' : undefined }}
|
||||
>
|
||||
{showWarning ? (
|
||||
<div
|
||||
className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ const SVG = (props: Props) => {
|
|||
case 'event/code': return <svg viewBox="0 0 576 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m228.5 511.8-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3 18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4 144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>;
|
||||
case 'event/i-cursor': return <svg viewBox="0 0 192 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M96 38.223C75.091 13.528 39.824 1.336 6.191.005 2.805-.129 0 2.617 0 6.006v20.013c0 3.191 2.498 5.847 5.686 5.989C46.519 33.825 80 55.127 80 80v160H38a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h42v160c0 24.873-33.481 46.175-74.314 47.992-3.188.141-5.686 2.797-5.686 5.989v20.013c0 3.389 2.806 6.135 6.192 6.002C40.03 510.658 75.193 498.351 96 473.777c20.909 24.695 56.176 36.887 89.809 38.218 3.386.134 6.191-2.612 6.191-6.001v-20.013c0-3.191-2.498-5.847-5.686-5.989C145.481 478.175 112 456.873 112 432V272h42a6 6 0 0 0 6-6v-20a6 6 0 0 0-6-6h-42V80c0-24.873 33.481-46.175 74.314-47.992 3.188-.142 5.686-2.798 5.686-5.989V6.006c0-3.389-2.806-6.135-6.192-6.002C151.97 1.342 116.807 13.648 96 38.223z"/></svg>;
|
||||
case 'event/input': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 2a.5.5 0 0 1 .5-.5c.862 0 1.573.287 2.06.566.174.099.321.198.44.286.119-.088.266-.187.44-.286A4.165 4.165 0 0 1 10.5 1.5a.5.5 0 0 1 0 1c-.638 0-1.177.213-1.564.434a3.49 3.49 0 0 0-.436.294V7.5H9a.5.5 0 0 1 0 1h-.5v4.272c.1.08.248.187.436.294.387.221.926.434 1.564.434a.5.5 0 0 1 0 1 4.165 4.165 0 0 1-2.06-.566A4.561 4.561 0 0 1 8 13.65a4.561 4.561 0 0 1-.44.285 4.165 4.165 0 0 1-2.06.566.5.5 0 0 1 0-1c.638 0 1.177-.213 1.564-.434.188-.107.335-.214.436-.294V8.5H7a.5.5 0 0 1 0-1h.5V3.228a3.49 3.49 0 0 0-.436-.294A3.166 3.166 0 0 0 5.5 2.5.5.5 0 0 1 5 2z"/><path d="M10 5h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4v1h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4v1zM6 5V4H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v-1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4z"/></svg>;
|
||||
case 'event/input_hesitation': return <svg viewBox="0 0 32 32" fill="none" width={ `${ width }px` } height={ `${ height }px` } ><path fill="transparent" d="M0 0h32v32H0z"/><path fill="transparent" d="M-.34-.647h32.155v32.155H-.34z"/><path d="M27.796 9.401a2.01 2.01 0 0 1 2.01 2.01v10.048a2.01 2.01 0 0 1-2.01 2.01H3.68a2.01 2.01 0 0 1-2.01-2.01V11.411A2.01 2.01 0 0 1 3.68 9.4h24.116ZM3.68 7.391a4.02 4.02 0 0 0-4.02 4.02v10.048a4.02 4.02 0 0 0 4.02 4.02h24.116a4.02 4.02 0 0 0 4.02-4.02V11.411a4.02 4.02 0 0 0-4.02-4.02H3.68Z"/><path d="M25.786 19.952a.503.503 0 0 1 .503-.503h1.005a.503.503 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502h-1.005a.503.503 0 0 1-.503-.502v-1.005Zm0-4.02a.502.502 0 0 1 .503-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503h-1.005a.502.502 0 0 1-.503-.503v-1.005Zm-10.048 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H16.24a.502.502 0 0 1-.502-.503v-1.005Zm4.02 0a.502.502 0 0 1 .502-.502h3.014a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H20.26a.502.502 0 0 1-.503-.503v-1.005Zm2.009 4.02a.503.503 0 0 1 .502-.503h1.005a.502.502 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502H22.27a.503.503 0 0 1-.502-.502v-1.005Zm-10.049-4.02a.502.502 0 0 1 .503-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H12.22a.502.502 0 0 1-.503-.503v-1.005Zm-4.019 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .503.502v1.005a.502.502 0 0 1-.503.503H8.201a.502.502 0 0 1-.502-.503v-1.005Zm-4.02 0a.502.502 0 0 1 .503-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H4.182a.502.502 0 0 1-.502-.503v-1.005Zm22.107-4.019a.503.503 0 0 1 .503-.502h1.005a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502h-1.005a.502.502 0 0 1-.503-.502v-1.005Zm-4.02 0a.502.502 0 0 1 .503-.502h1.005a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502H22.27a.502.502 0 0 1-.502-.502v-1.005Zm-4.018 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .502.502v1.005a.503.503 0 0 1-.502.502H18.25a.503.503 0 0 1-.503-.502v-1.005Zm-4.02 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .503.502v1.005a.502.502 0 0 1-.503.502H14.23a.502.502 0 0 1-.502-.502v-1.005Zm-4.02 0a.502.502 0 0 1 .503-.502h1.005a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502h-1.005a.502.502 0 0 1-.502-.502v-1.005Zm-6.028 0a.502.502 0 0 1 .502-.502h3.015a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502H4.182a.502.502 0 0 1-.502-.502v-1.005Zm0 8.039a.503.503 0 0 1 .502-.503h1.005a.502.502 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502H4.182a.503.503 0 0 1-.502-.502v-1.005Zm4.02 0a.503.503 0 0 1 .501-.503h11.054a.502.502 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502H8.2a.503.503 0 0 1-.502-.502v-1.005Z"/><path fill="transparent" d="M7.738.063h16v16h-16z"/><path d="m17.432 7.21-.004.004-.598.612h-.001c-.248.252-.493.523-.666.888-.118.25-.194.527-.23.85h-.354c.04-.53.273-1.008.63-1.37l.823-.836c.34-.333.54-.794.54-1.295 0-1.01-.824-1.833-1.833-1.833-.836 0-1.545.565-1.764 1.333h-.345a2.167 2.167 0 0 1 4.276.5c0 .45-.184.857-.474 1.147ZM15.739.897a7.17 7.17 0 0 0-7.167 7.166 7.17 7.17 0 0 0 7.167 7.167 7.17 7.17 0 0 0 7.167-7.167A7.17 7.17 0 0 0 15.739.897Zm-.167 11.333v-.333h.334v.333h-.334Z" stroke="#fff"/></svg>;
|
||||
case 'event/input_hesitation': return <svg viewBox="0 0 32 32" width={ `${ width }px` } height={ `${ height }px` } ><path fill="transparent" d="M0 0h32v32H0z"/><path fill="transparent" d="M-.34-.647h32.155v32.155H-.34z"/><path d="M27.796 9.401a2.01 2.01 0 0 1 2.01 2.01v10.048a2.01 2.01 0 0 1-2.01 2.01H3.68a2.01 2.01 0 0 1-2.01-2.01V11.411A2.01 2.01 0 0 1 3.68 9.4h24.116ZM3.68 7.391a4.02 4.02 0 0 0-4.02 4.02v10.048a4.02 4.02 0 0 0 4.02 4.02h24.116a4.02 4.02 0 0 0 4.02-4.02V11.411a4.02 4.02 0 0 0-4.02-4.02H3.68Z" fillOpacity=".54"/><path d="M25.786 19.952a.503.503 0 0 1 .503-.503h1.005a.503.503 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502h-1.005a.503.503 0 0 1-.503-.502v-1.005Zm0-4.02a.502.502 0 0 1 .503-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503h-1.005a.502.502 0 0 1-.503-.503v-1.005Zm-10.048 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H16.24a.502.502 0 0 1-.502-.503v-1.005Zm4.02 0a.502.502 0 0 1 .502-.502h3.014a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H20.26a.502.502 0 0 1-.503-.503v-1.005Zm2.009 4.02a.503.503 0 0 1 .502-.503h1.005a.502.502 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502H22.27a.503.503 0 0 1-.502-.502v-1.005Zm-10.049-4.02a.502.502 0 0 1 .503-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H12.22a.502.502 0 0 1-.503-.503v-1.005Zm-4.019 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .503.502v1.005a.502.502 0 0 1-.503.503H8.201a.502.502 0 0 1-.502-.503v-1.005Zm-4.02 0a.502.502 0 0 1 .503-.502h1.005a.502.502 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.503H4.182a.502.502 0 0 1-.502-.503v-1.005Zm22.107-4.019a.503.503 0 0 1 .503-.502h1.005a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502h-1.005a.502.502 0 0 1-.503-.502v-1.005Zm-4.02 0a.502.502 0 0 1 .503-.502h1.005a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502H22.27a.502.502 0 0 1-.502-.502v-1.005Zm-4.018 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .502.502v1.005a.503.503 0 0 1-.502.502H18.25a.503.503 0 0 1-.503-.502v-1.005Zm-4.02 0a.502.502 0 0 1 .502-.502h1.005a.502.502 0 0 1 .503.502v1.005a.502.502 0 0 1-.503.502H14.23a.502.502 0 0 1-.502-.502v-1.005Zm-4.02 0a.502.502 0 0 1 .503-.502h1.005a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502h-1.005a.502.502 0 0 1-.502-.502v-1.005Zm-6.028 0a.502.502 0 0 1 .502-.502h3.015a.503.503 0 0 1 .502.502v1.005a.502.502 0 0 1-.502.502H4.182a.502.502 0 0 1-.502-.502v-1.005Zm0 8.039a.503.503 0 0 1 .502-.503h1.005a.502.502 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502H4.182a.503.503 0 0 1-.502-.502v-1.005Zm4.02 0a.503.503 0 0 1 .501-.503h11.054a.502.502 0 0 1 .502.503v1.005a.502.502 0 0 1-.502.502H8.2a.503.503 0 0 1-.502-.502v-1.005Z"/><path fill="transparent" d="M7.738.063h16v16h-16z"/><path d="m17.432 7.21-.004.004-.598.612h-.001c-.248.252-.493.523-.666.888-.118.25-.194.527-.23.85h-.354c.04-.53.273-1.008.63-1.37l.823-.836c.34-.333.54-.794.54-1.295 0-1.01-.824-1.833-1.833-1.833-.836 0-1.545.565-1.764 1.333h-.345a2.167 2.167 0 0 1 4.276.5c0 .45-.184.857-.474 1.147ZM15.739.897a7.17 7.17 0 0 0-7.167 7.166 7.17 7.17 0 0 0 7.167 7.167 7.17 7.17 0 0 0 7.167-7.167A7.17 7.17 0 0 0 15.739.897Zm-.167 11.333v-.333h.334v.333h-.334Z" fillOpacity=".87" stroke="#fff"/></svg>;
|
||||
case 'event/link': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/></svg>;
|
||||
case 'event/location': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/></svg>;
|
||||
case 'event/mouse_thrashing': return <svg viewBox="0 0 32 32" fill="none" width={ `${ width }px` } height={ `${ height }px` } ><path fill="transparent" d="M0 0h32v32H0z"/><g opacity=".5"><path fill="transparent" d="M15.225-3.633 37.32 6.27l-9.903 22.096L5.32 18.463z"/><path d="m18.722 2.844 10.6 10.955a1.045 1.045 0 0 1-.706 1.77l-4.363.184-.512.021.182.48 2.151 5.648a1.046 1.046 0 0 1-1.954.746L21.97 17l-.182-.48-.398.325-3.379 2.765a1.046 1.046 0 0 1-1.707-.851l.622-15.231a1.046 1.046 0 0 1 1.796-.685Z" stroke="#000" strokeWidth=".74"/></g><path clipRule="evenodd" d="M8.25 5.522A1.913 1.913 0 0 0 5.761 8.01l7.653 19.132a1.913 1.913 0 0 0 3.487.143l2.64-5.278 5.774 5.777a1.913 1.913 0 1 0 2.705-2.707L22.245 19.3l5.28-2.639a1.914 1.914 0 0 0-.145-3.485L8.25 5.522Z"/><path d="M3.838 12.892a1.153 1.153 0 0 0-1.126 1.796l9.578 13.815a1.153 1.153 0 0 0 2.068-.386l1.135-4.68.134-.55.48.301 5.645 3.54L3.838 12.892Zm0 0 16.608 2.592-16.608-2.592Zm19.138 11.88-5.648-3.539-.48-.3.438-.36 3.716-3.061a1.152 1.152 0 0 0-.555-2.028l2.529 9.289Zm0 0a1.153 1.153 0 0 1-1.224 1.956l1.224-1.955Z" stroke="#000" strokeWidth=".816" opacity=".3"/></svg>;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<rect width="32" height="32" fill="transparent"/>
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
|
@ -241,6 +241,7 @@ export class UtxEvent {
|
|||
taskId: number;
|
||||
timestamp: number;
|
||||
title: string;
|
||||
indexNum: number;
|
||||
|
||||
constructor(event: Record<string, any>) {
|
||||
Object.assign(this, {
|
||||
|
|
@ -254,6 +255,7 @@ export class UtxEvent {
|
|||
taskId: event.taskId,
|
||||
timestamp: event.timestamp,
|
||||
title: event.title,
|
||||
indexNum: event.indexNum,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -365,16 +365,22 @@ export default class Session {
|
|||
const utxDoneEvents = userTestingEvents.filter(e => e.status === 'done' && e.title).map(e => ({ ...e, type: 'UTX_EVENT', key: e.signal_id }))
|
||||
const rawEvents: (EventData & { key: number })[] = [];
|
||||
|
||||
let utxIndexNum = 0;
|
||||
if (sessionEvents.length) {
|
||||
const eventsWithUtx = mergeEventLists(sessionEvents, utxDoneEvents)
|
||||
eventsWithUtx.forEach((event, k) => {
|
||||
const isRawUtx = 'allow_typing' in event
|
||||
if (isRawUtx) {
|
||||
utxIndexNum += 1;
|
||||
event.indexNum = utxIndexNum;
|
||||
}
|
||||
const time = event.timestamp - this.startedAt;
|
||||
if (event.type !== TYPES.CONSOLE && time <= this.durationSeconds) {
|
||||
const EventClass = SessionEvent({ ...event, time, key: k });
|
||||
if (EventClass) {
|
||||
events.push(EventClass);
|
||||
}
|
||||
rawEvents.push({ ...event, time, key: k });
|
||||
rawEvents.push({ ...event, time, key: k, });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@openreplay/tracker",
|
||||
"description": "The OpenReplay tracker main package",
|
||||
"version": "11.0.1-6",
|
||||
"version": "11.0.1-11",
|
||||
"keywords": [
|
||||
"logging",
|
||||
"replay"
|
||||
|
|
|
|||
|
|
@ -308,8 +308,6 @@ export default class App {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.uxtManager = new UserTestManager(this, uxtStorageKey)
|
||||
}
|
||||
|
||||
private _debug(context: string, e: any) {
|
||||
|
|
@ -710,6 +708,7 @@ export default class App {
|
|||
}
|
||||
this.restartAttempts = 0
|
||||
|
||||
this.uxtManager = new UserTestManager(this, uxtStorageKey)
|
||||
let uxtId: number | undefined
|
||||
const savedUxtTag = this.localStorage.getItem(uxtStorageKey)
|
||||
if (savedUxtTag) {
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ export default class UserTestManager {
|
|||
this.userRecorder = new Recorder(app)
|
||||
const sessionId = this.app.getSessionID()
|
||||
const savedSessionId = this.app.localStorage.getItem('or_uxt_session_id')
|
||||
console.log(sessionId, savedSessionId)
|
||||
if (sessionId !== savedSessionId) {
|
||||
this.app.localStorage.removeItem(this.storageKey)
|
||||
this.app.localStorage.removeItem('or_uxt_session_id')
|
||||
|
|
@ -119,6 +120,8 @@ export default class UserTestManager {
|
|||
signalTest = (status: 'begin' | 'done' | 'skipped') => {
|
||||
const timestamp = this.app.timestamp()
|
||||
if (status === 'begin' && this.testId) {
|
||||
const sessionId = this.app.getSessionID()
|
||||
this.app.localStorage.setItem('or_uxt_session_id', sessionId as unknown as string)
|
||||
this.app.localStorage.setItem(this.storageKey, this.testId.toString())
|
||||
this.app.localStorage.setItem('or_uxt_test_start', timestamp.toString())
|
||||
} else {
|
||||
|
|
@ -266,7 +269,18 @@ export default class UserTestManager {
|
|||
createTitleSection() {
|
||||
const title = createElement('div', 'title', styles.titleWidgetStyle)
|
||||
const leftIcon = generateGrid()
|
||||
const titleText = createElement('div', 'title_text', {}, this.test?.title)
|
||||
const titleText = createElement(
|
||||
'div',
|
||||
'title_text',
|
||||
{
|
||||
maxWidth: '19rem',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
this.test?.title,
|
||||
)
|
||||
const rightIcon = generateChevron()
|
||||
|
||||
title.append(leftIcon, titleText, rightIcon)
|
||||
|
|
@ -306,12 +320,14 @@ export default class UserTestManager {
|
|||
return isVisible
|
||||
}
|
||||
|
||||
rightIcon.onclick = () => {
|
||||
const collapseWidget = () => {
|
||||
Object.assign(rightIcon.style, {
|
||||
transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
|
||||
})
|
||||
toggleWidget(!this.widgetVisible)
|
||||
}
|
||||
titleText.onclick = collapseWidget
|
||||
rightIcon.onclick = collapseWidget
|
||||
attachDND(this.bg, leftIcon)
|
||||
|
||||
this.collapseWidget = () => toggleWidget(false)
|
||||
|
|
@ -331,6 +347,8 @@ export default class UserTestManager {
|
|||
maxHeight: '250px',
|
||||
overflowY: 'auto',
|
||||
whiteSpace: 'pre-wrap',
|
||||
fontSize: 13,
|
||||
color: '#454545',
|
||||
})
|
||||
descriptionC.innerHTML = guidelines
|
||||
const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test')
|
||||
|
|
@ -390,14 +408,15 @@ export default class UserTestManager {
|
|||
allow_typing: boolean
|
||||
}[],
|
||||
) {
|
||||
Object.assign(this.container.style, styles.containerStyle)
|
||||
const section = createElement('div', 'task_section_or', styles.descriptionWidgetStyle)
|
||||
const titleContainer = createElement('div', 'description_t_title_or', styles.sectionTitleStyle)
|
||||
const title = createElement('div', 'title', {}, 'Tasks')
|
||||
const icon = createElement('div', 'icon', styles.symbolIcon, '-')
|
||||
const content = createElement('div', 'content', styles.contentStyle)
|
||||
const pagination = createElement('div', 'pagination', styles.paginationStyle)
|
||||
const leftArrow = createElement('span', 'leftArrow', {}, '<')
|
||||
const rightArrow = createElement('span', 'rightArrow', {}, '>')
|
||||
// const leftArrow = createElement('span', 'leftArrow', {}, '<')
|
||||
// const rightArrow = createElement('span', 'rightArrow', {}, '>')
|
||||
const taskCard = createElement('div', 'taskCard', styles.taskDescriptionCard)
|
||||
const taskText = createElement('div', 'taskText', styles.taskTextStyle)
|
||||
const taskDescription = createElement('div', 'taskDescription', styles.taskDescriptionStyle)
|
||||
|
|
@ -413,13 +432,13 @@ export default class UserTestManager {
|
|||
'div',
|
||||
'closePanelButton',
|
||||
styles.taskButtonStyle,
|
||||
'Collapse panel',
|
||||
'Collapse Panel',
|
||||
)
|
||||
const nextButton = createElement(
|
||||
'div',
|
||||
'nextButton',
|
||||
styles.taskButtonBorderedStyle,
|
||||
'Done, next',
|
||||
'Done, Next',
|
||||
)
|
||||
|
||||
titleContainer.append(title, icon)
|
||||
|
|
@ -439,13 +458,13 @@ export default class UserTestManager {
|
|||
}
|
||||
}
|
||||
|
||||
pagination.appendChild(leftArrow)
|
||||
// pagination.appendChild(leftArrow)
|
||||
tasks.forEach((_, index) => {
|
||||
const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString())
|
||||
pageNumber.id = `or_task_${index}`
|
||||
pagination.append(pageNumber)
|
||||
})
|
||||
pagination.appendChild(rightArrow)
|
||||
// pagination.appendChild(rightArrow)
|
||||
|
||||
const toggleTasksVisibility = () => {
|
||||
this.widgetTasksVisible = !this.widgetTasksVisible
|
||||
|
|
@ -548,7 +567,7 @@ export default class UserTestManager {
|
|||
'div',
|
||||
'end_button_or',
|
||||
styles.buttonWidgetStyle,
|
||||
'Uploading session...',
|
||||
'Submitting Feedback',
|
||||
)
|
||||
|
||||
if (this.test?.reqMic || this.test?.reqCamera) {
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@ export const bgStyle = {
|
|||
export const containerStyle = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
gap: '0.5rem',
|
||||
alignItems: 'center',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.375rem',
|
||||
border: '1px solid #D9D9D9',
|
||||
background: '#FFF',
|
||||
width: '29rem',
|
||||
width: '22rem',
|
||||
}
|
||||
export const containerWidgetStyle = {
|
||||
display: 'flex',
|
||||
|
|
@ -31,7 +31,7 @@ export const containerWidgetStyle = {
|
|||
'border-radius': '0.375rem',
|
||||
border: '1px solid #D9D9D9',
|
||||
background: '#FFF',
|
||||
width: '29rem',
|
||||
width: '22rem',
|
||||
}
|
||||
|
||||
export const titleStyle = {
|
||||
|
|
@ -176,7 +176,7 @@ export const buttonWidgetStyle = {
|
|||
}
|
||||
|
||||
export const stopWidgetStyle = {
|
||||
marginTop: '2rem',
|
||||
marginTop: '1rem',
|
||||
cursor: 'pointer',
|
||||
display: 'block',
|
||||
fontWeight: '600',
|
||||
|
|
@ -228,7 +228,8 @@ export const taskTextStyle = {
|
|||
}
|
||||
|
||||
export const taskDescriptionStyle = {
|
||||
color: '#8C8C8C',
|
||||
color: '#454545',
|
||||
fontSize: 13,
|
||||
}
|
||||
|
||||
export const taskButtonStyle = {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue