diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index 879d3c024..314e3383c 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -18,7 +18,7 @@ export default class PlayerBlock extends React.PureComponent {
const shouldShowSubHeader = !fullscreen && !fullView && !isMultiview && !isClickmap
return (
-
+
{shouldShowSubHeader ? (
) : null}
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index fda25702b..46b694329 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -233,7 +233,7 @@ export default class MessageManager {
.finally(this.onFileReadFinally)
// load devtools
- if (this.session.devtoolsURL.length) {
+ if (this.session.devtoolsURL?.length) {
this.state.update({ devtoolsLoading: true })
loadFiles(this.session.devtoolsURL, createNewParser())
.catch(() =>
diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts
index f10a3bd35..4e6e768bb 100644
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@@ -117,6 +117,10 @@ export default class Screen {
return this.iframe.contentDocument;
}
+ get iframeStylesRef(): CSSStyleDeclaration {
+ return this.iframe.style
+ }
+
private boundingRect: DOMRect | null = null;
private getBoundingClientRect(): DOMRect {
if (this.boundingRect === null) {
@@ -216,16 +220,25 @@ export default class Screen {
}
scaleFullPage() {
- const { height, width } = this.document.body.getBoundingClientRect();
- this.cursor.toggle(false)
- const offsetHeight = this.parentElement.getBoundingClientRect().height
if (!this.parentElement) return;
+ const { height: boxHeight, width: boxWidth } = this.parentElement.getBoundingClientRect();
+ const { height, width } = this.document.body.getBoundingClientRect();
+ this.overlay.remove()
- this.scaleRatio = 1
- this.screen.style.transform = `scale(1) translate(-50%, -50%)`;
- this.screen.style.overflow = 'scroll';
- this.screen.style.height = `${offsetHeight - 50}px`;
+ this.scaleRatio = boxWidth/width;
+ if (this.scaleRatio > 1) {
+ this.scaleRatio = 1;
+ } else {
+ this.scaleRatio = Math.round(this.scaleRatio * 1e3) / 1e3;
+ }
+
+ this.screen.style.transform = `scale(${this.scaleRatio})`;
+ this.screen.style.width = width + 'px';
+ this.screen.style.height = height + 'px';
+ this.screen.style.top = '0';
+ this.screen.style.left = '0';
this.iframe.style.width = width + 'px';
this.iframe.style.height = height + 'px';
}
+
}
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index bdf4c0c15..267dfdd4d 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -1,6 +1,6 @@
import { Log, LogLevel } from './types'
-import type { Store } from '../common/types'
+import type { Store } from 'App/player'
import Player, { State as PlayerState } from '../player/Player'
import MessageManager from './MessageManager'
diff --git a/frontend/app/player/web/addons/TargetMarker.ts b/frontend/app/player/web/addons/TargetMarker.ts
index 028858f6d..0066243b5 100644
--- a/frontend/app/player/web/addons/TargetMarker.ts
+++ b/frontend/app/player/web/addons/TargetMarker.ts
@@ -66,12 +66,12 @@ export default class TargetMarker {
if (!parentEl) return {top:0, left:0, width:0,height:0} //TODO: can be initialized(?) on mounted screen only
const { top, left, width, height } = el.getBoundingClientRect()
const s = this.screen.getScale()
- const scrinRect = this.screen.overlay.getBoundingClientRect() //this.screen.getBoundingClientRect() (now private)
+ const screenRect = this.screen.overlay.getBoundingClientRect() //this.screen.getBoundingClientRect() (now private)
const parentRect = parentEl.getBoundingClientRect()
return {
- top: top*s + scrinRect.top - parentRect.top,
- left: left*s + scrinRect.left - parentRect.left,
+ top: top*s + screenRect.top - parentRect.top,
+ left: left*s + screenRect.left - parentRect.left,
width: width*s,
height: height*s,
}
@@ -142,17 +142,21 @@ export default class TargetMarker {
return a + b.count
}, 0);
+ this.clickMapOverlay?.remove()
const overlay = document.createElement("div")
- Object.assign(overlay.style, clickmapStyles.overlayStyle)
+ const iframeSize = this.screen.iframeStylesRef
+ console.log(iframeSize)
+ const scaleRatio = this.screen.getScale()
+ Object.assign(overlay.style, clickmapStyles.overlayStyle({ height: iframeSize.height, width: iframeSize.width, scale: scaleRatio }))
this.clickMapOverlay = overlay
selections.forEach((s, i) => {
const el = this.screen.getElementBySelector(s.selector);
+ console.log(el, s.selector)
if (!el) return;
const bubbleContainer = document.createElement("div")
const {top, left, width, height} = el.getBoundingClientRect()
-
const totalClicks = document.createElement("div")
totalClicks.innerHTML = `${s.count} ${s.count !== 1 ? 'Clicks' : 'Click'}`
Object.assign(totalClicks.style, clickmapStyles.totalClicks)
@@ -177,21 +181,32 @@ export default class TargetMarker {
smallClicksBubble.id = smallClicksId
this.smallClicks.push(smallClicksBubble)
- border.onclick = () => {
- this.clickContainers.forEach(container => {
- if (container.id === containerId) {
- container.style.visibility = "visible"
- } else {
- container.style.visibility = "hidden"
- }
- })
- this.smallClicks.forEach(container => {
- if (container.id !== smallClicksId) {
- container.style.visibility = "visible"
- } else {
- container.style.visibility = "hidden"
- }
- })
+ border.onclick = (e) => {
+ e.stopPropagation()
+ this.clickContainers.forEach(container => {
+ if (container.id === containerId) {
+ container.style.visibility = "visible"
+ } else {
+ container.style.visibility = "hidden"
+ }
+ })
+ this.smallClicks.forEach(container => {
+ if (container.id !== smallClicksId) {
+ container.style.visibility = "visible"
+ } else {
+ container.style.visibility = "hidden"
+ }
+ })
+ }
+
+ overlay.onclick = (e) => {
+ e.stopPropagation()
+ this.clickContainers.forEach(container => {
+ container.style.visibility = "hidden"
+ })
+ this.smallClicks.forEach(container => {
+ container.style.visibility = "visible"
+ })
}
Object.assign(smallClicksBubble.style, clickmapStyles.clicks)
@@ -201,8 +216,7 @@ export default class TargetMarker {
overlay.appendChild(border)
});
- this.screen.document.body.appendChild(overlay)
- // this.store.update({ markedTargets });
+ this.screen.getParentElement().appendChild(overlay)
} else {
this.store.update({ markedTargets: null });
this.clickMapOverlay?.remove()
diff --git a/frontend/app/player/web/addons/clickmapStyles.ts b/frontend/app/player/web/addons/clickmapStyles.ts
index 086260089..d69c5f7fa 100644
--- a/frontend/app/player/web/addons/clickmapStyles.ts
+++ b/frontend/app/player/web/addons/clickmapStyles.ts
@@ -1,14 +1,16 @@
export const clickmapStyles = {
- overlayStyle: {
+ overlayStyle: ({ height, width, scale }: { height: string, width: string, scale: number }) => ({
+ transform: `scale(${scale})`,
position: 'absolute',
top: '0px',
left: '0px',
- width: '100%',
- height: '100%',
+ width: width,
+ height: height,
background: 'rgba(0,0,0, 0.15)',
zIndex: 9 * 10e3,
+ transformOrigin: 'left top',
// pointerEvents: 'none',
- },
+ }),
totalClicks: {
fontSize: '16px',
fontWeight: '600',