diff --git a/frontend/app/components/Session_/Player/Overlay.tsx b/frontend/app/components/Session_/Player/Overlay.tsx
index 37a94b8c6..e7645b34e 100644
--- a/frontend/app/components/Session_/Player/Overlay.tsx
+++ b/frontend/app/components/Session_/Player/Overlay.tsx
@@ -19,11 +19,13 @@ import { observer } from 'mobx-react-lite';
interface Props {
nextId: string,
closedLive?: boolean,
+ isClickmap?: boolean,
}
function Overlay({
nextId,
closedLive,
+ isClickmap,
}: Props) {
const { player, store } = React.useContext(PlayerContext)
@@ -49,7 +51,7 @@ function Overlay({
const concetionStatus = peerConnectionStatus
const showAutoplayTimer = !live && completed && autoplay && nextId
- const showPlayIconLayer = !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
+ const showPlayIconLayer = !isClickmap && !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
const showLiveStatusText = live && livePlay && liveStatusText && !loading;
const showRequestWindow =
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index d2e155b1c..a247e3e0b 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -45,7 +45,7 @@ function Player(props) {
activeTab,
fullView,
isMultiview,
- isClickmap,
+ isClickmap = true,
} = props;
const playerContext = React.useContext(PlayerContext);
const screenWrapper = React.useRef();
@@ -57,6 +57,8 @@ function Player(props) {
const parentElement = findDOMNode(screenWrapper.current); //TODO: good architecture
playerContext.player.attach(parentElement);
playerContext.player.play();
+
+ setInterval(() => playerContext.player.scaleFullPage(), 4000)
}
}, []);
@@ -74,7 +76,7 @@ function Player(props) {
>
{fullscreen && }
{!fullscreen && !!bottomBlock && (
diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts
index 043be5357..8925e387e 100644
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@@ -191,22 +191,22 @@ export default class Screen {
this.iframe.style.display = flag ? '' : 'none';
}
- private s: number = 1;
+ private scaleRatio: number = 1;
getScale() {
- return this.s;
+ return this.scaleRatio;
}
scale({ height, width }: Dimensions) {
if (!this.parentElement) return;
const { offsetWidth, offsetHeight } = this.parentElement;
- this.s = Math.min(offsetWidth / width, offsetHeight / height);
- if (this.s > 1) {
- this.s = 1;
+ this.scaleRatio = Math.min(offsetWidth / width, offsetHeight / height);
+ if (this.scaleRatio > 1) {
+ this.scaleRatio = 1;
} else {
- this.s = Math.round(this.s * 1e3) / 1e3;
+ this.scaleRatio = Math.round(this.scaleRatio * 1e3) / 1e3;
}
- this.screen.style.transform = `scale(${ this.s }) translate(-50%, -50%)`;
+ this.screen.style.transform = `scale(${ this.scaleRatio }) translate(-50%, -50%)`;
this.screen.style.width = width + 'px';
this.screen.style.height = height + 'px';
this.iframe.style.width = width + 'px';
@@ -214,4 +214,18 @@ export default class Screen {
this.boundingRect = this.overlay.getBoundingClientRect();
}
+
+ scaleFullPage() {
+ const { height, width } = this.document.body.getBoundingClientRect();
+ const offsetHeight = this.parentElement.getBoundingClientRect().height
+ if (!this.parentElement) return;
+
+ console.log(height, width)
+ 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.iframe.style.width = width + 'px';
+ this.iframe.style.height = height + 'px';
+ }
}
diff --git a/frontend/app/player/web/Screen/types.ts b/frontend/app/player/web/Screen/types.ts
index 2c464fdfc..093649892 100644
--- a/frontend/app/player/web/Screen/types.ts
+++ b/frontend/app/player/web/Screen/types.ts
@@ -6,4 +6,4 @@ export interface Point {
export interface Dimensions {
width: number
height: number
-}
\ No newline at end of file
+}
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index bd80c1189..fc0534e2a 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -87,6 +87,10 @@ export default class WebPlayer extends Player {
// this.updateMarketTargets() ??
}
+ scaleFullPage =() => {
+ return this.screen.scaleFullPage()
+ }
+
// Inspector & marker
mark(e: Element) {
this.inspectorController.marker?.mark(e)
diff --git a/frontend/app/player/web/addons/TargetMarker.ts b/frontend/app/player/web/addons/TargetMarker.ts
index 49282e96a..a21e0b089 100644
--- a/frontend/app/player/web/addons/TargetMarker.ts
+++ b/frontend/app/player/web/addons/TargetMarker.ts
@@ -36,6 +36,7 @@ export interface State {
export default class TargetMarker {
+ private clickMapOverlay: HTMLDivElement
static INITIAL_STATE: State = {
markedTargets: null,
activeTargetIndex: 0
@@ -50,8 +51,8 @@ export default class TargetMarker {
const { markedTargets } = this.store.get()
if (markedTargets) {
this.store.update({
- markedTargets: markedTargets.map((mt: any) => ({
- ...mt,
+ markedTargets: markedTargets.map((mt: any) => ({
+ ...mt,
boundingRect: this.calculateRelativeBoundingRect(mt.el),
})),
});
@@ -95,22 +96,48 @@ export default class TargetMarker {
})
}, 0)
}
-
+
}
this.store.update({ activeTargetIndex: index });
}
private actualScroll: Point | null = null
markTargets(selections: { selector: string, count: number }[] | null) {
+
if (selections) {
const totalCount = selections.reduce((a, b) => {
return a + b.count
}, 0);
const markedTargets: MarkedTarget[] = [];
let index = 0;
+
+ const overlay = document.createElement("div")
+ overlay.style.position = "absolute"
+ overlay.style.top = "0px"
+ overlay.style.left = "0px"
+ overlay.style.width = '100%'
+ overlay.style.height = "100%"
+ overlay.style.background = 'rgba(0,0,0, 0.1)'
+ this.screen.document.body.appendChild(overlay)
+ this.clickMapOverlay = overlay
selections.forEach((s) => {
const el = this.screen.getElementBySelector(s.selector);
if (!el) return;
+ const test = document.createElement("div")
+ const top = el.getBoundingClientRect().top
+ const left = el.getBoundingClientRect().left
+ test.innerHTML = '' + s.count + 'Clicks'
+ Object.assign(test.style, {
+ position: 'absolute',
+ top: top + 'px',
+ left: left + 'px',
+ padding: '10px',
+ borderRadius: '12px',
+ background: 'white',
+ boxShadow: '0px 2px 10px 2px rgba(0,0,0,0.5)',
+ })
+
+ overlay.appendChild(test)
markedTargets.push({
...s,
el,
@@ -120,7 +147,7 @@ export default class TargetMarker {
count: s.count,
})
});
- this.actualScroll = this.screen.getCurrentScroll()
+ this.actualScroll = this.screen.getCurrentScroll()
this.store.update({ markedTargets });
} else {
if (this.actualScroll) {
@@ -128,7 +155,10 @@ export default class TargetMarker {
this.actualScroll = null
}
this.store.update({ markedTargets: null });
+ this.clickMapOverlay.remove()
}
}
-}
\ No newline at end of file
+
+
+}