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

feat(tracker) update assist session with uxt id

Browse source
This commit is contained in:
nick-delirium 2023-12-11 09:59:24 +01:00
parent 267ff6f5d3
commit 106e9d0695
8 changed files with 118 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
tracker/tracker-assist/bun.lockb
View file

Binary file not shown.

4
tracker/tracker-assist/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@openreplay/tracker-assist",
"description": "Tracker plugin for screen assistance through the WebRTC",
"version": "7.0.1-3",
"version": "7.0.1-4",
"keywords": [
"WebRTC",
"assistance",
@ -34,7 +34,7 @@
"socket.io-client": "^4.7.2"
},
"peerDependencies": {
"@openreplay/tracker": "^11.0.1"
"@openreplay/tracker": "^11.0.2-2"
},
"devDependencies": {
"@openreplay/tracker": "file:../tracker",

3
tracker/tracker-assist/src/Assist.ts
View file

@ -129,6 +129,9 @@ export default class Assist {
const observer = titleNode && new MutationObserver(() => {
this.emit('UPDATE_SESSION', { pageTitle: document.title, })
})
app.addOnUxtCb((uxtId: number) => {
this.emit('UPDATE_SESSION', { uxtId, })
})
app.attachStartCallback(() => {
if (this.assistDemandedRestart) { return }
this.onStart()

2
tracker/tracker-assist/src/version.ts
View file

@ -1 +1 @@
export const pkgVersion = '7.0.1-3'
export const pkgVersion = '7.0.1-4'

2
tracker/tracker/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@openreplay/tracker",
"description": "The OpenReplay tracker main package",
"version": "11.0.2-0",
"version": "11.0.2-12",
"keywords": [
"logging",
"replay"

37
tracker/tracker/src/main/app/index.ts
View file

@ -53,16 +53,29 @@ interface OnStartInfo {
const CANCELED = 'canceled' as const
const uxtStorageKey = 'or_uxt_active'
const START_ERROR = ':(' as const
type SuccessfulStart = OnStartInfo & { success: true }
type SuccessfulStart = OnStartInfo & {
success: true
}
type UnsuccessfulStart = {
reason: typeof CANCELED | string
success: false
}
type RickRoll = { source: string; context: string } & (
| { line: 'never-gonna-give-you-up' }
| { line: 'never-gonna-let-you-down'; token: string }
| { line: 'never-gonna-run-around-and-desert-you'; token: string }
type RickRoll = {
source: string
context: string
} & (
| {
line: 'never-gonna-give-you-up'
}
| {
line: 'never-gonna-let-you-down'
token: string
}
| {
line: 'never-gonna-run-around-and-desert-you'
token: string
}
)
const UnsuccessfulStart = (reason: string): UnsuccessfulStart => ({ reason, success: false })
@ -725,7 +738,12 @@ export default class App {
}
if (uxtId && !this.uxtManager.isActive) {
this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag))
// eslint-disable-next-line
this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag)).then((id) => {
if (id) {
this.onUxtCb.forEach((cb: (id: number) => void) => cb(id))
}
})
}
return SuccessfulStart(onStartInfo)
@ -743,6 +761,13 @@ export default class App {
})
}
onUxtCb = []
addOnUxtCb(cb: (id: number) => void) {
// @ts-ignore
this.onUxtCb.push(cb)
}
getUxtId(): number | null {
return this.uxtManager?.getTestId()
}

52
tracker/tracker/src/main/modules/userTesting/index.ts
View file

@ -1,5 +1,4 @@
import App from '../../app/index.js'
import { containerStyle } from './styles.js'
import * as styles from './styles.js'
import Recorder, { Quality } from './recorder.js'
import attachDND from './dnd.js'
@ -157,7 +156,7 @@ export default class UserTestManager {
this.testId = id
this.token = token
const ingest = this.app.options.ingestPoint
fetch(`${ingest}/v1/web/uxt/test/${id}`, {
return fetch(`${ingest}/v1/web/uxt/test/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
@ -175,6 +174,7 @@ export default class UserTestManager {
this.showTaskSection()
}
})
.then(() => id)
.catch((err) => {
console.log('OR: Error fetching test', err)
})
@ -216,7 +216,7 @@ export default class UserTestManager {
this.removeGreeting()
this.durations.testStart = this.app.timestamp()
void this.signalTest('begin')
this.container.style.gap = '8px'
Object.assign(this.container.style, styles.containerWidgetStyle)
this.showWidget(this.test?.guidelines || '', this.test?.tasks || [])
}
@ -251,7 +251,7 @@ export default class UserTestManager {
})
// Create title section
const titleSection = this.createTitleSection()
Object.assign(this.container.style, styles.containerStyle)
Object.assign(this.container.style, styles.containerWidgetStyle)
const descriptionSection = this.createDescriptionSection(guidelines)
const tasksSection = this.createTasksSection(tasks)
const stopButton = createElement('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session')
@ -283,6 +283,8 @@ export default class UserTestManager {
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '100%',
fontSize: 16,
lineHeight: 'auto',
cursor: 'pointer',
},
this.test?.title,
@ -346,7 +348,16 @@ export default class UserTestManager {
createDescriptionSection(guidelines: string) {
const section = createElement('div', 'description_section_or', styles.descriptionWidgetStyle)
const titleContainer = createElement('div', 'description_s_title_or', styles.sectionTitleStyle)
const title = createElement('div', 'title', {}, 'Introduction & Guidelines')
const title = createElement(
'div',
'title',
{
fontSize: 13,
fontWeight: 500,
lineHeight: 'auto',
},
'Introduction & Guidelines',
)
const icon = createElement('div', 'icon', styles.symbolIcon, '-')
const content = createElement('div', 'content', styles.contentStyle)
const descriptionC = createElement('div', 'text_description', {
@ -355,6 +366,7 @@ export default class UserTestManager {
whiteSpace: 'pre-wrap',
fontSize: 13,
color: '#454545',
lineHeight: 'auto',
})
descriptionC.innerHTML = guidelines
const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test')
@ -414,10 +426,19 @@ export default class UserTestManager {
allow_typing: boolean
}[],
) {
Object.assign(this.container.style, styles.containerStyle)
Object.assign(this.container.style, styles.containerWidgetStyle)
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 title = createElement(
'div',
'title',
{
fontSize: '14px',
fontWeight: '500',
lineHeight: 'auto',
},
'Tasks',
)
const icon = createElement('div', 'icon', styles.symbolIcon, '-')
const content = createElement('div', 'content', styles.contentStyle)
const pagination = createElement('div', 'pagination', styles.paginationStyle)
@ -466,7 +487,22 @@ export default class UserTestManager {
// pagination.appendChild(leftArrow)
tasks.forEach((_, index) => {
const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString())
const pageNumber = createElement(
'span',
`or_task_${index}`,
{
outline: '1px solid #efefef',
fontSize: '13px',
height: '24px',
width: '24px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '6.25em',
},
(index + 1).toString(),
)
pageNumber.id = `or_task_${index}`
pagination.append(pageNumber)
})

62
tracker/tracker/src/main/modules/userTesting/styles.ts
View file

@ -14,10 +14,10 @@ export const bgStyle = {
export const containerStyle = {
display: 'flex',
flexDirection: 'column',
gap: '0.5rem',
gap: '2rem',
alignItems: 'center',
padding: '1.5rem',
borderRadius: '0.375rem',
borderRadius: '2px',
border: '1px solid #D9D9D9',
background: '#FFF',
width: '22rem',
@ -25,12 +25,12 @@ export const containerStyle = {
export const containerWidgetStyle = {
display: 'flex',
'flex-direction': 'column',
gap: '1.5rem',
gap: 'unset',
'align-items': 'center',
padding: '1rem',
'border-radius': '0.375rem',
padding: 'unset',
'border-radius': '2px',
border: '1px solid #D9D9D9',
background: '#FFF',
background: 'rgba(255, 255, 255, 0.75)',
width: '22rem',
}
@ -49,10 +49,10 @@ export const descriptionStyle = {
padding: '1.25rem 0rem',
color: 'rgba(0, 0, 0, 0.85)',
fontFamily: 'Verdana, sans-serif',
fontSize: '1rem',
fontSize: '13px',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.5rem',
lineHeight: 'auto',
whiteSpace: 'pre-wrap',
}
@ -87,9 +87,9 @@ export const buttonStyle = {
export const sectionTitleStyle = {
fontFamily: 'Verdana, sans-serif',
fontSize: '0.875rem',
fontSize: '13px',
fontWeight: '500',
lineHeight: '1.375rem',
lineHeight: 'auto',
display: 'flex',
justifyContent: 'space-between',
width: '100%',
@ -101,6 +101,8 @@ export const contentStyle = {
flexDirection: 'column',
alignItems: 'flex-start',
gap: '0.625rem',
fontSize: '13px',
lineHeight: 'auto',
}
// New widget styles
@ -108,16 +110,16 @@ export const titleWidgetStyle = {
padding: '0.5rem',
gap: '0.5rem',
fontFamily: 'Verdana, sans-serif',
fontSize: '1.25rem',
fontSize: '16px',
fontStyle: 'normal',
fontWeight: '500',
lineHeight: '1.75rem',
lineHeight: 'auto',
color: 'white',
display: 'flex',
alignItems: 'center',
width: '100%',
borderRadius: '0.375rem',
background: 'rgba(0, 0, 0, 0.60)',
borderRadius: '2px',
background: 'rgba(0, 0, 0, 0.75)',
boxSizing: 'border-box',
}
@ -125,17 +127,16 @@ export const descriptionWidgetStyle = {
boxSizing: 'border-box',
display: 'block',
width: '100%',
borderRadius: '0.375rem',
border: '1px solid #D9D9D9',
borderBottom: '1px solid #D9D9D9',
background: '#FFF',
padding: '0.625rem 1rem',
padding: '0.65rem',
alignSelf: 'stretch',
color: '#000',
fontFamily: 'Verdana, sans-serif',
fontSize: '0.875rem',
// fontSize: '0.875rem',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.375rem',
// lineHeight: '1.375rem',
}
export const endSectionStyle = {
@ -177,9 +178,12 @@ export const buttonWidgetStyle = {
export const stopWidgetStyle = {
marginTop: '1rem',
marginBottom: '1rem',
cursor: 'pointer',
display: 'block',
fontWeight: '600',
fontWeight: '500',
fontSize: 13,
lineHeight: 'auto',
}
export const paginationStyle = {
@ -194,21 +198,27 @@ export const paginationStyle = {
export const taskNumberActive = {
display: 'flex',
padding: '0.0625rem 0.5rem',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '6.25em',
outline: '1px solid #394EFF',
fontSize: '13px',
height: '24px',
width: '24px',
}
export const taskNumberDone = {
display: 'flex',
padding: '0.0625rem 0.5rem',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '6.25em',
outline: '1px solid #D2DFFF',
boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
background: '#D2DFFF',
fontSize: '13px',
height: '24px',
width: '24px',
}
export const taskDescriptionCard = {
@ -228,8 +238,8 @@ export const taskTextStyle = {
}
export const taskDescriptionStyle = {
color: '#454545',
fontSize: 13,
fontSize: '13px',
lineHeight: 'auto',
}
export const taskButtonStyle = {
@ -238,10 +248,10 @@ export const taskButtonStyle = {
color: '#394EFF',
textAlign: 'center',
fontFamily: 'Verdana, sans-serif',
fontSize: '0.875rem',
fontSize: '13px',
fontStyle: 'normal',
fontWeight: '500',
lineHeight: '1.375rem',
lineHeight: 'auto',
}
export const taskButtonBorderedStyle = {
...taskButtonStyle,