feat(interface): add options to minimize overlay in auto-hide setting

GoldenChrysus · May 31, 2024 · ffd3fca · ffd3fca
1 parent e734d6f
commit ffd3fca
Show file tree

Hide file tree

Showing 15 changed files with 271 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.7.0
+
+**Released: [in staging]**
+
+### Bug Fixes
+- N/A
+
+### Features
+- Added options to minimize overlay instead of fully hiding when inactive
+
+### UI Changes
+- N/A
+
+### Code Changes
+- N/A
+
+### Miscellaneous
+- N/A
+
 ## 1.6.1
 
 **Released: 2024-05-09**

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
 	"name": "ffxiv-ember-overlay",
 	"description": "React + Redux overlay for the OverlayPlugin and ACTWebSocket plugins for Advanced Combat Tracker for use with Final Fantasy XIV.",
 	"license": "GPL-3.0-only",
-	"version": "1.6.1",
+	"version": "1.7.0",
 	"keywords": [
 		"ffxiv",
 		"endwalker",

diff --git a/src/components/Parser.js b/src/components/Parser.js
@@ -5,6 +5,7 @@ import "./../styles/components/parser/parser-theme.less";
 
 import Container from "./Parser/Container";
 import Placeholder from "./Parser/Placeholder";
+import { updateToggle } from "../redux/actions";
 
 class Parser extends React.Component {
 	constructor(props) {
@@ -18,6 +19,7 @@ class Parser extends React.Component {
 			always_visible : {
 				spells : true,
 			},
+			minimized_last_activity : 0,
 		};
 	}
 
@@ -47,18 +49,30 @@ class Parser extends React.Component {
 	processAutoHide() {
 		let visible = true;
 
-		if (this.state.always_visible[this.props.mode]) {
+		if (this.props.auto_hide === "disabled" || this.state.always_visible[this.props.mode]) {
 			return;
 		}
 
 		if (this.props.auto_hide && this.props.auto_hide_delay > 0 && ((new Date().getTime() / 1000) - this.props.last_activity) > this.props.auto_hide_delay) {
 			visible = false;
 		}
 
-		if (this.state.visible !== visible) {
-			this.setState({
-				visible,
-			});
+		if (!visible) {
+			if (this.props.auto_hide === "hide") {
+				if (this.state.visible !== visible) {
+					this.setState({
+						visible,
+						last_activity : this.props.last_activity,
+					});
+				}
+			} else if (this.props.auto_hide.startsWith("minimize_")) {
+				const location = this.props.auto_hide.substring(9);
+
+				if (!this.props.toggles[location] && this.props.last_activity !== this.state.minimized_last_activity) {
+					this.setState({ minimized_last_activity : this.props.last_activity });
+					this.props.autoHideMinimize(location);
+				}
+			}
 		}
 	}
 
@@ -131,10 +145,10 @@ class Parser extends React.Component {
 					{setting_style}
 					{this.props.css}
 				</style>
-				<Placeholder type='top left' theme={this.props.theme}/>
-				<Placeholder type='top right' theme={this.props.theme}/>
-				<Placeholder type='bottom left' theme={this.props.theme}/>
-				<Placeholder type='bottom right' theme={this.props.theme}/>
+				<Placeholder location='top_left' theme={this.props.theme}/>
+				<Placeholder location='top_right' theme={this.props.theme}/>
+				<Placeholder location='bottom_left' theme={this.props.theme}/>
+				<Placeholder location='bottom_right' theme={this.props.theme}/>
 				<div id='root-inner' key='root-inner' className={root_inner_classes}>
 					<Container key='container-component'/>
 				</div>
@@ -147,6 +161,12 @@ class Parser extends React.Component {
 	}
 }
 
+const mapDispatchToProps = dispatch => ({
+	autoHideMinimize(location) {
+		dispatch(updateToggle({ location, enabled : true }));
+	},
+});
+
 const mapStateToProps = state => ({
 	collapsed                : state.settings.intrinsic.collapsed,
 	collapse_down            : state.settings.interface.collapse_down,
@@ -165,6 +185,7 @@ const mapStateToProps = state => ({
 	invert_spells_horizontal : state.settings.spells_mode.invert_horizontal,
 	has_spells               : (Object.keys(state.internal.spells.in_use).length > 0),
 	using_ui_builder         : state.settings.spells_mode.ui.use,
+	toggles                  : state.internal.toggles,
 });
 
-export default connect(mapStateToProps)(Parser);
+export default connect(mapStateToProps, mapDispatchToProps)(Parser);
diff --git a/src/components/Parser/Container.js b/src/components/Parser/Container.js
@@ -323,14 +323,18 @@ class Container extends EmberComponent {
 			container_classes.push(this.props.horizontal_alignment || "left");
 		}
 
+		if (Object.values(this.props.toggles).some(x => x)) {
+			container_classes.push("hidden");
+		}
+
 		return (
 			<React.Fragment key='container-fragment'>
 				<ContextMenuTrigger key='right-click-menu' id='right-click-menu' holdToDisplay={-1}>
 					<div id='container' className={container_classes.join(" ")} key='container'>
-						<PlaceholderToggle type='top left'/>
-						<PlaceholderToggle type='top right'/>
-						<PlaceholderToggle type='bottom left'/>
-						<PlaceholderToggle type='bottom right'/>
+						<PlaceholderToggle location='top_left'/>
+						<PlaceholderToggle location='top_right'/>
+						<PlaceholderToggle location='bottom_left'/>
+						<PlaceholderToggle location='bottom_right'/>
 						<div id='inner' key='inner'>
 							{this.getGameState(encounter, active)}
 							<div id='content' key='content'>
@@ -506,6 +510,7 @@ const mapStateToProps = state => ({
 	hide_top_bar          : state.settings.interface.hide_top_bar,
 	ui_builder            : state.internal.ui_builder,
 	last_settings_update  : state.internal.last_settings_update,
+	toggles               : state.internal.toggles,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Container);
diff --git a/src/components/Parser/Placeholder.js b/src/components/Parser/Placeholder.js
@@ -1,23 +1,18 @@
 import React from "react";
-import $ from "jquery";
+import { connect } from "react-redux";
+import { updateToggle } from "../../redux/actions";
 
 class Placeholder extends React.Component {
-	togglePlaceholders() {
-		const $container = $(document).find("#container");
-		const active     = $container.hasClass("hidden");
-
-		$(document).find(".placeholder").each(function() {
-			$(this).toggleClass("hidden", active);
-		});
-
-		$container.toggleClass("hidden", !active);
-	}
-
 	render() {
-		const image_src = `img/icons/placeholder-${this.props.theme}-theme.png`;
+		const image_src   = `img/icons/placeholder-${this.props.theme}-theme.png`;
+		const class_names = ["placeholder", this.props.location.replace("_", " ")];
+
+		if (!this.props.toggles[this.props.location]) {
+			class_names.push("hidden");
+		}
 
 		return (
-			<div className={"placeholder " + this.props.type + " hidden"} onClick={this.togglePlaceholders.bind(this)}>
+			<div className={class_names.join(" ")} onClick={() => this.props.untoggle(this.props.location)}>
 				<div className='inner'>
 					<img src={image_src} alt='Minimized button'></img>
 				</div>
@@ -26,4 +21,14 @@ class Placeholder extends React.Component {
 	}
 }
 
-export default Placeholder;
+const mapDispatchToProps = dispatch => ({
+	untoggle(location) {
+		dispatch(updateToggle({ location, enabled : false }));
+	},
+});
+
+const mapStateToProps = state => ({
+	toggles : state.internal.toggles,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Placeholder);
diff --git a/src/components/Parser/Placeholder/Toggle.js b/src/components/Parser/Placeholder/Toggle.js
@@ -1,25 +1,26 @@
 import React from "react";
-import $ from "jquery";
+import { connect } from "react-redux";
+import { updateToggle } from "../../../redux/actions";
 
 class Toggle extends React.Component {
-	togglePlaceholders() {
-		const $container = $(document).find("#container");
-		const self       = this;
-
-		$(document).find(".placeholder").each(function() {
-			const hidden = (!$(this).hasClass(self.props.type));
-
-			$(this).toggleClass("hidden", hidden);
-		});
-
-		$container.toggleClass("hidden", true);
-	}
-
 	render() {
 		return (
-			<div className={"toggle " + this.props.type} onClick={this.togglePlaceholders.bind(this)}></div>
+			<div
+				className={"toggle " + this.props.location.replace("_", " ")}
+				onClick={() => this.props.toggle(this.props.location)}>
+			</div>
 		);
 	}
 }
 
-export default Toggle;
+const mapDispatchToProps = dispatch => ({
+	toggle(location) {
+		dispatch(updateToggle({ location, enabled : true }));
+	},
+});
+
+const mapStateToProps = state => ({
+	toggles : state.internal.toggles,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Toggle);
diff --git a/src/constants/Migrations.js b/src/constants/Migrations.js
@@ -3,7 +3,8 @@ const Migrations = [
 	"02-store-settings-in-overlayplugin",
 	"03-convert-light-theme",
 	"04-convert-spell-layout",
-	"05-copy-spell-tts",
+	"06-change-critical-hp-setting-key",
+	"07-convert-auto-hide-to-options",
 ];
 
 export default Migrations;
diff --git a/src/constants/SettingsSchema.js b/src/constants/SettingsSchema.js
@@ -126,7 +126,8 @@ const SettingsSchema = {
 							},
 							{
 								key_path      : "interface.auto_hide",
-								type          : "checkbox",
+								type          : "select",
+								options       : () => LocalizationService.getAutoHideOptions(),
 								exclude_modes : [
 									"spells",
 								],

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -410,6 +410,15 @@ const TTSRules = [
 	"encounter.end",
 ];
 
+const AutoHideOptions = [
+	"disabled",
+	"hide",
+	"minimize_top_left",
+	"minimize_top_right",
+	"minimize_bottom_left",
+	"minimize_bottom_right",
+];
+
 export default {
 	GameJobs,
 	GameJobsID,
@@ -421,4 +430,5 @@ export default {
 	MonsterDataCustomDataValues,
 	MonsterDataTitles,
 	TTSRules,
+	AutoHideOptions,
 };
diff --git a/src/data/locales/settings.json b/src/data/locales/settings.json
@@ -1538,6 +1538,88 @@
 				"short_both"  : "И. Ф."
 			}
 		},
+		"auto_hide_options" : {
+			"en" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"pt" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"cn" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"jp" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"de" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"es" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"fr" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"kr" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"ua" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			},
+			"ru" : {
+				"disabled"              : "Disabled",
+				"hide"                  : "Hide",
+				"minimize_top_left"     : "Minimize to Top Left",
+				"minimize_top_right"    : "Minimize to Top Right",
+				"minimize_bottom_left"  : "Minimize to Bottom Left",
+				"minimize_bottom_right" : "Minimize to Bottom Right"
+			}
+		},
 		"alignment_options" : {
 			"en" : {
 				"left"   : "Left",