From c8cba2aeaae9ef7a121e29a8a1163997c80afb38 Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 13 Dec 2022 13:36:22 +0100 Subject: [PATCH] change(ui): more tests for the clickmaps --- .../components/Session_/Player/Overlay.tsx | 4 +- .../app/components/Session_/Player/Player.js | 6 ++- frontend/app/player/web/Screen/Screen.ts | 28 +++++++++---- frontend/app/player/web/Screen/types.ts | 2 +- frontend/app/player/web/WebPlayer.ts | 4 ++ .../app/player/web/addons/TargetMarker.ts | 40 ++++++++++++++++--- 6 files changed, 68 insertions(+), 16 deletions(-) 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 + + +}