Skip to content

Commit

Permalink
Formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrtcppv
jrtcppv committed Jan 22, 2025
1 parent d40ef5a commit 5d521c9
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 75 deletions.
7 changes: 6 additions & 1 deletion ui/src/js/annotation/annotation-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand Down
159 changes: 89 additions & 70 deletions ui/src/js/annotation/layout-mode-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand All @@ -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);
Expand All @@ -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;
}

Expand All @@ -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;
});
Expand All @@ -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);
}
Expand All @@ -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 &&
Expand All @@ -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";
Expand All @@ -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"));
}

}
16 changes: 12 additions & 4 deletions ui/src/js/annotation/save-dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 5d521c9

Please sign in to comment.