diff --git a/ui/src/js/annotation/annotation-page.js b/ui/src/js/annotation/annotation-page.js index 0cdaa39a2..a8d6f3dff 100644 --- a/ui/src/js/annotation/annotation-page.js +++ b/ui/src/js/annotation/annotation-page.js @@ -446,7 +446,12 @@ export class AnnotationPage extends TatorPage { this._sidebar.videoIsPlaying = false; playerControlManagement(player, false); }); - this.layoutModeController = new LayoutModeController(player, this._sidebar, this._browser, this._header); + this.layoutModeController = new LayoutModeController( + player, + this._sidebar, + this._browser, + this._header + ); }); const nextPromise = fetchCredentials( `/rest/MediaNext/${newValue}${window.location.search}`, diff --git a/ui/src/js/annotation/layout-mode-controller.js b/ui/src/js/annotation/layout-mode-controller.js index 6e56b7314..1149d285e 100644 --- a/ui/src/js/annotation/layout-mode-controller.js +++ b/ui/src/js/annotation/layout-mode-controller.js @@ -7,24 +7,22 @@ export class LayoutModeController { this.canvas = player._video ? player._video : player._gridDiv.parentElement; this.sidebar = sidebar; this.browser = browser; - this.header = header._shadow.querySelectorAll('header')[0]; + this.header = header._shadow.querySelectorAll("header")[0]; this.controls = this.player._controls_and_scrub; - this.warningLight = header._shadow.querySelectorAll('warning-light')[0]; - this.successLight = header._shadow.querySelectorAll('success-light')[0]; - this.preview = this.player._preview._shadow.querySelectorAll('.tooltip-seek-preview')[0]; - this.fullscreen = this.player._shadow.querySelectorAll('video-fullscreen')[0]; - this.fullscreen.addEventListener('click', this.toggleFullscreen.bind(this)); - this.allControls = [ - this.controls, - this.sidebar, - this.browser, - this.header, - ]; + this.warningLight = header._shadow.querySelectorAll("warning-light")[0]; + this.successLight = header._shadow.querySelectorAll("success-light")[0]; + this.preview = this.player._preview._shadow.querySelectorAll( + ".tooltip-seek-preview" + )[0]; + this.fullscreen = + this.player._shadow.querySelectorAll("video-fullscreen")[0]; + this.fullscreen.addEventListener("click", this.toggleFullscreen.bind(this)); + this.allControls = [this.controls, this.sidebar, this.browser, this.header]; this.showModes = [MouseMode.QUERY, MouseMode.SELECT]; this.keepHidden = false; // Control visibility based on mouse movement - document.addEventListener('mousemove', (event) => { - if (window.MODE != 'FULLSCREEN' || this.keepHidden) { + document.addEventListener("mousemove", (event) => { + if (window.MODE != "FULLSCREEN" || this.keepHidden) { return; } if (!this.shouldShowControls()) { @@ -42,8 +40,8 @@ export class LayoutModeController { }); // Hide controls on click outside controls - document.addEventListener('click', (event) => { - if (window.MODE != 'FULLSCREEN' || !this.shouldShowControls()) { + document.addEventListener("click", (event) => { + if (window.MODE != "FULLSCREEN" || !this.shouldShowControls()) { return; } clearTimeout(this.hideTimeout); @@ -58,10 +56,16 @@ export class LayoutModeController { } shouldShowControls() { - const modeOkay = this.videoCanvas.every(canvas => this.showModes.includes(canvas._mouseMode)); - const lightsVisible = this.warningLight.style.opacity > 0 || this.successLight.style.opacity > 0; + const modeOkay = this.videoCanvas.every((canvas) => + this.showModes.includes(canvas._mouseMode) + ); + const lightsVisible = + this.warningLight.style.opacity > 0 || + this.successLight.style.opacity > 0; const saveDialogs = Object.values(this.player.parent._saves); - const saveDialogVisible = saveDialogs.some(dlg => dlg.classList.contains("is-open")); + const saveDialogVisible = saveDialogs.some((dlg) => + dlg.classList.contains("is-open") + ); return modeOkay && !lightsVisible && !saveDialogVisible; } @@ -81,10 +85,10 @@ export class LayoutModeController { clearTimeout(this.hideTimeout); clearTimeout(this.inactivityTimeout); this.allControls.forEach((control) => { - if (control.tagName == 'HEADER') { - control.style.display = 'flex'; + if (control.tagName == "HEADER") { + control.style.display = "flex"; } else { - control.style.display = 'block'; + control.style.display = "block"; } control.style.opacity = 0.5; }); @@ -98,7 +102,7 @@ export class LayoutModeController { if (realHide) { this.hideTimeout = setTimeout(() => { this.allControls.forEach((control) => { - control.style.display = 'none'; + control.style.display = "none"; }); }, 500 + 50); } @@ -115,7 +119,7 @@ export class LayoutModeController { } getControlUnderMouse(x, y) { - return this.allControls.find(control => { + return this.allControls.find((control) => { const rect = control.getBoundingClientRect(); return ( event.clientX >= rect.left && @@ -128,84 +132,100 @@ export class LayoutModeController { toggleFullscreen() { this.player._hideCanvasMenus(); - this.contextMenus = this.videoCanvas.flatMap(canvas => Array.from(canvas._shadow.querySelectorAll('canvas-context-menu'))); + this.contextMenus = this.videoCanvas.flatMap((canvas) => + Array.from(canvas._shadow.querySelectorAll("canvas-context-menu")) + ); if (this.fullscreen.hasAttribute("is-maximized")) { clearTimeout(this.hideTimeout); clearTimeout(this.inactivityTimeout); window.MODE = undefined; - this.canvas.setAttribute('style', this.styles.canvas); - this.contextMenus.forEach(menu => menu._div.setAttribute('style', this.styles.contextMenus.shift())); - this.controls.setAttribute('style', this.styles.controls); - this.sidebar.setAttribute('style', this.styles.sidebar); - this.browser.setAttribute('style', this.styles.browser); - this.header.setAttribute('style', this.styles.header); - this.successLight._svg.setAttribute('style', this.styles.successLightSvg); - this.successLight._message_div.setAttribute('style', this.styles.successLightDiv); + this.canvas.setAttribute("style", this.styles.canvas); + this.contextMenus.forEach((menu) => + menu._div.setAttribute("style", this.styles.contextMenus.shift()) + ); + this.controls.setAttribute("style", this.styles.controls); + this.sidebar.setAttribute("style", this.styles.sidebar); + this.browser.setAttribute("style", this.styles.browser); + this.header.setAttribute("style", this.styles.header); + this.successLight._svg.setAttribute("style", this.styles.successLightSvg); + this.successLight._message_div.setAttribute( + "style", + this.styles.successLightDiv + ); this.parents.successLight.appendChild(this.successLight); - this.warningLight._svg.setAttribute('style', this.styles.warningLightSvg); - this.warningLight._message_div.setAttribute('style', this.styles.warningLightDiv); + this.warningLight._svg.setAttribute("style", this.styles.warningLightSvg); + this.warningLight._message_div.setAttribute( + "style", + this.styles.warningLightDiv + ); this.parents.warningLight.appendChild(this.warningLight); - this.preview.setAttribute('style', this.styles.preview); + this.preview.setAttribute("style", this.styles.preview); this.fullscreen.removeAttribute("is-maximized"); } else { - window.MODE = 'FULLSCREEN'; + window.MODE = "FULLSCREEN"; // Save off styles so we can restore them later this.styles = { - canvas: this.canvas.getAttribute('style'), - contextMenus: this.contextMenus.map(menu => menu._div.getAttribute('style')), - controls: this.controls.getAttribute('style'), - sidebar: this.sidebar.getAttribute('style'), - browser: this.browser.getAttribute('style'), - header: this.header.getAttribute('style'), - successLightSvg: this.successLight._svg.getAttribute('style'), - successLightDiv: this.successLight._message_div.getAttribute('style'), - warningLightSvg: this.warningLight._svg.getAttribute('style'), - warningLightDiv: this.warningLight._message_div.getAttribute('style'), - preview: this.preview.getAttribute('style'), + canvas: this.canvas.getAttribute("style"), + contextMenus: this.contextMenus.map((menu) => + menu._div.getAttribute("style") + ), + controls: this.controls.getAttribute("style"), + sidebar: this.sidebar.getAttribute("style"), + browser: this.browser.getAttribute("style"), + header: this.header.getAttribute("style"), + successLightSvg: this.successLight._svg.getAttribute("style"), + successLightDiv: this.successLight._message_div.getAttribute("style"), + warningLightSvg: this.warningLight._svg.getAttribute("style"), + warningLightDiv: this.warningLight._message_div.getAttribute("style"), + preview: this.preview.getAttribute("style"), }; this.parents = { successLight: this.successLight.parentElement, warningLight: this.warningLight.parentElement, - contextMenus: this.contextMenus.map(menu => menu.parentElement), + contextMenus: this.contextMenus.map((menu) => menu.parentElement), }; - this.contextMenus.forEach(menu => { - menu._div.style.position = 'fixed'; + this.contextMenus.forEach((menu) => { + menu._div.style.position = "fixed"; }); - this.canvas.style.position = 'fixed'; - if (this.canvas.tagName == 'DIV') { - this.canvas.style.maxWidth = '100%'; - this.canvas.style.maxHeight = '100%'; + this.canvas.style.position = "fixed"; + if (this.canvas.tagName == "DIV") { + this.canvas.style.maxWidth = "100%"; + this.canvas.style.maxHeight = "100%"; } - this.videoCanvas.forEach(canvas => canvas._canvas.style.maxHeight = null); - this.videoCanvas.forEach(canvas => canvas.parentNode.style.maxWidth = null); + this.videoCanvas.forEach( + (canvas) => (canvas._canvas.style.maxHeight = null) + ); + this.videoCanvas.forEach( + (canvas) => (canvas.parentNode.style.maxWidth = null) + ); // Move controls to bottom of screen - this.controls.style.position = 'fixed'; + this.controls.style.position = "fixed"; this.controls.style.bottom = 0; this.controls.style.left = 0; this.controls.style.zIndex = 4; - this.controls.style.width = '100%'; + this.controls.style.width = "100%"; this.controls.style.margin = 0; this.controls.style.padding = 10; - this.controls.style.boxSizing = 'border-box'; - this.controls.style.transition = 'opacity 0.5s ease'; + this.controls.style.boxSizing = "border-box"; + this.controls.style.transition = "opacity 0.5s ease"; // Move sidebar to left of screen - this.sidebar.style.position = 'fixed'; + this.sidebar.style.position = "fixed"; this.sidebar.style.top = "72"; this.sidebar.style.left = 0; this.sidebar.style.zIndex = 4; - this.sidebar.style.transition = 'opacity 0.5s ease'; + this.sidebar.style.transition = "opacity 0.5s ease"; // Move browser to right of screen - this.browser.style.position = 'fixed'; + this.browser.style.position = "fixed"; this.browser.style.top = "72"; this.browser.style.right = 0; this.browser.style.zIndex = 4; - this.browser.style.transition = 'opacity 0.5s ease'; + this.browser.style.transition = "opacity 0.5s ease"; // Set up header - this.header.style.position = 'fixed'; + this.header.style.position = "fixed"; this.header.style.top = 0; this.header.style.left = 0; this.header.style.zIndex = 4; - this.header.style.transition = 'opacity 0.5s ease'; + this.header.style.transition = "opacity 0.5s ease"; // Set up warning light document.body.appendChild(this.warningLight); this.warningLight._svg.style.position = "fixed"; @@ -225,14 +245,13 @@ export class LayoutModeController { this.successLight._message_div.style.right = "10px"; this.successLight._message_div.style.width = "300px"; // Set up preview - this.preview.style.position = 'fixed'; + this.preview.style.position = "fixed"; // Hide video controls this.hideControls(); this.fullscreen.setAttribute("is-maximized", ""); } - window.dispatchEvent(new Event('resize')); + window.dispatchEvent(new Event("resize")); } - } diff --git a/ui/src/js/annotation/save-dialog.js b/ui/src/js/annotation/save-dialog.js index 7197991df..a81f35fff 100644 --- a/ui/src/js/annotation/save-dialog.js +++ b/ui/src/js/annotation/save-dialog.js @@ -349,10 +349,18 @@ export class SaveDialog extends TatorElement { const canvasDefined = typeof this._canvasPosition !== "undefined"; if (dragDefined && canvasDefined) { if (window.MODE == "FULLSCREEN") { - const boxLeft = Math.min(this._dragInfo.start.x, this._dragInfo.end.x) + this._canvasPosition.left; - const boxRight = Math.max(this._dragInfo.start.x, this._dragInfo.end.x) + this._canvasPosition.left; - const boxTop = Math.min(this._dragInfo.start.y, this._dragInfo.end.y) + this._canvasPosition.top; - const boxBottom = Math.max(this._dragInfo.start.y, this._dragInfo.end.y) + this._canvasPosition.top; + const boxLeft = + Math.min(this._dragInfo.start.x, this._dragInfo.end.x) + + this._canvasPosition.left; + const boxRight = + Math.max(this._dragInfo.start.x, this._dragInfo.end.x) + + this._canvasPosition.left; + const boxTop = + Math.min(this._dragInfo.start.y, this._dragInfo.end.y) + + this._canvasPosition.top; + const boxBottom = + Math.max(this._dragInfo.start.y, this._dragInfo.end.y) + + this._canvasPosition.top; const width = this.clientWidth; const height = this.clientHeight; if (boxRight + 20 + width < window.innerWidth) {