diff --git a/tracker/tracker-assist/src/Assist.ts b/tracker/tracker-assist/src/Assist.ts index e27b35915..8afc5f45f 100644 --- a/tracker/tracker-assist/src/Assist.ts +++ b/tracker/tracker-assist/src/Assist.ts @@ -37,6 +37,7 @@ export interface Options { onCallDeny?: () => any; onRemoteControlDeny?: (agentInfo: Record) => any; onRecordingDeny?: (agentInfo: Record) => any; + onDragCamera?: (dx: number, dy: number) => void; session_calling_peer_key: string; session_control_peer_key: string; callConfirm: ConfirmOptions; @@ -106,6 +107,7 @@ export default class Assist { onCallStart: () => {}, onAgentConnect: () => {}, onRemoteControlStart: () => {}, + onDragCamera: () => {}, callConfirm: {}, controlConfirm: {}, // TODO: clear options passing/merging/overwriting recordingConfirm: {}, diff --git a/tracker/tracker-assist/src/Mouse.ts b/tracker/tracker-assist/src/Mouse.ts index 989c5da21..4672bafd0 100644 --- a/tracker/tracker-assist/src/Mouse.ts +++ b/tracker/tracker-assist/src/Mouse.ts @@ -1,3 +1,5 @@ +import { hasOpenreplayAttribute } from "./utils.js" + type XY = [number, number] type XYDXDY = [number, number, number, number] @@ -7,7 +9,7 @@ export default class Mouse { private position: [number,number] = [0,0,] private isDragging = false - constructor(private readonly agentName?: string) { + constructor(private readonly agentName?: string, private onDragCamera?: (dx: number, dy: number) => void) { this.mouse = document.createElement('div') const agentBubble = document.createElement('div') const svg ='' @@ -26,6 +28,8 @@ export default class Mouse { whiteSpace: 'nowrap', }) + this.onDragCamera = onDragCamera + const agentNameStr = this.agentName ? this.agentName.length > 10 ? this.agentName.slice(0, 9) + '...' : this.agentName : 'Agent' agentBubble.innerHTML = `${agentNameStr}` @@ -106,9 +110,9 @@ export default class Mouse { buttons: 1, }); el.dispatchEvent(moveEvt); - } - if ((window as any).__REMOTE__) { - (window as any).__REMOTE__.dragCamera(dx, dy); + if (hasOpenreplayAttribute(el, 'draggable') && this.onDragCamera) { + this.onDragCamera(dx, dy); + } } } diff --git a/tracker/tracker-assist/src/RemoteControl.ts b/tracker/tracker-assist/src/RemoteControl.ts index 7c9b426a8..54962cfae 100644 --- a/tracker/tracker-assist/src/RemoteControl.ts +++ b/tracker/tracker-assist/src/RemoteControl.ts @@ -94,7 +94,7 @@ export default class RemoteControl { if (this.mouse) { this.resetMouse() } - this.mouse = new Mouse(agentName) + this.mouse = new Mouse(agentName, this.options.onDragCamera) this.mouse.mount() document.addEventListener('visibilitychange', () => { if (document.hidden) this.releaseControl(false, true) diff --git a/tracker/tracker-assist/src/utils.ts b/tracker/tracker-assist/src/utils.ts new file mode 100644 index 000000000..37fb4ed33 --- /dev/null +++ b/tracker/tracker-assist/src/utils.ts @@ -0,0 +1,33 @@ +export const DOCS_HOST = 'https://docs.openreplay.com' + +const warnedFeatures: { [key: string]: boolean } = {} + +export function deprecationWarn(nameOfFeature: string, useInstead: string, docsPath = '/'): void { + if (warnedFeatures[nameOfFeature]) { + return + } + console.warn( + `OpenReplay: ${nameOfFeature} is deprecated. ${ + useInstead ? `Please, use ${useInstead} instead.` : '' + } Visit ${DOCS_HOST}${docsPath} for more information.`, + ) + warnedFeatures[nameOfFeature] = true + } + +export function hasOpenreplayAttribute(e: Element, attr: string): boolean { + const newName = `data-openreplay-${attr}` + if (e.hasAttribute(newName)) { + // @ts-ignore + if (DEPRECATED_ATTRS[attr]) { + deprecationWarn( + `"${newName}" attribute`, + // @ts-ignore + `"${DEPRECATED_ATTRS[attr] as string}" attribute`, + '/en/sdk/sanitize-data', + ) + } + return true + } + + return false + } \ No newline at end of file