Player info now hides when a song gets started

package.json

@@ -16,6 +16,7 @@
 		"critters": "^0.0.16",
 		"ioredis": "^5.2.3",
 		"next": "12",
+		"next-redux-wrapper": "^8.0.0",
 		"next-seo": "^5.9.0",
 		"next-themes": "^0.2.1",
 		"node-fetch": "^3.2.10",
@@ -24,6 +25,7 @@
 		"react-country-flag": "^3.0.2",
 		"react-dom": "^18.2.0",
 		"react-toastify": "^9.0.8",
+		"redux": "^4.2.0",
 		"sharp": "^0.31.1"
 	},
 	"devDependencies": {

src/components/SongInfo.js

@@ -62,6 +62,17 @@ export default class SongInfo extends Component {
 		const songTimerPercentage =
 			(this.props.data.currentSongTime / data.length) * 100000;
 
+		const cssVars = document.querySelector("." + styles.songInfoContainer);
+		if (cssVars) {
+			if (!this.props.data.isPlayerInfoVisible) {
+				cssVars.style.setProperty("margin-top", "5px");
+				cssVars.style.setProperty("--pos", "none");
+			} else {
+				cssVars.style.setProperty("margin-top", "0px");
+				cssVars.style.setProperty("--pos", 0);
+			}
+		}
+
 		return (
 			<div className={styles.songInfoContainer}>
 				<Image

src/pages/overlay.js

@@ -42,6 +42,7 @@ export default class Overlay extends Component {
 
 			socket: undefined,
 			isVisible: false,
+			isPlayerInfoVisible: false,
 			songInfo: undefined,
 			beatSaverData: undefined,
 			currentSongTime: 0,
@@ -111,6 +112,7 @@ export default class Overlay extends Component {
 			setTimeout(async () => {
 				await this.updateData(id);
 			}, 10); // 10ms
+			this.setState({ isPlayerInfoVisible: true });
 		}
 
 		let shouldConnectSocket = false;
@@ -307,6 +309,13 @@ export default class Overlay extends Component {
 				await this.updateData(this.state.id);
 			}, 1000); // 1 second
 		}
+
+		if (visible) {
+			this.setState({ isPlayerInfoVisible: false });
+		} else {
+			this.setState({ isPlayerInfoVisible: true });
+		}
+
 		this.cutData = [];
 		this.cutData.SaberA = {
 			count: [0, 0, 0],
@@ -432,6 +441,7 @@ export default class Overlay extends Component {
 			websiteType,
 			showPlayerStats,
 			loadingPlayerData,
+			isPlayerInfoVisible,
 			id,
 		} = this.state;
 
@@ -452,7 +462,7 @@ export default class Overlay extends Component {
 						</div>
 					) : (
 						<div className={styles.overlay}>
-							{showPlayerStats && !loadingPlayerData ? (
+							{showPlayerStats && !loadingPlayerData && isPlayerInfoVisible ? (
 								<PlayerStats
 									pp={data.pp.toLocaleString("en-US", {
 										maximumFractionDigits: 2,
@@ -475,7 +485,8 @@ export default class Overlay extends Component {
 							)}
 							{this.state.showSongInfo &&
 							this.state.beatSaverData !== undefined &&
-							this.state.isVisible ? (
+							this.state.isVisible &&
+							!isPlayerInfoVisible ? (
 								<SongInfo data={this.state} />
 							) : (
 								<></>

src/styles/globals.css

@@ -2,4 +2,8 @@
 html,
 body {
 	background-color: transparent;
+
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 150ms;
 }

src/styles/songInfo.module.css

@@ -1,8 +1,10 @@
 .songInfoContainer {
+	--pos: 0;
+
 	display: flex;
 	position: fixed;
-	bottom: 0;
-	left: 0;
+	bottom: var(--pos);
+	left: var(--pos);
 	margin-left: 5px;
 	margin-bottom: 5px;
 }

yarn.lock

@@ -17,6 +17,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.0.tgz#824a9ef325ffde6f78056059db3168c08785e24a"
+  integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
 "@beam-australia/react-env@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@beam-australia/react-env/-/react-env-3.1.1.tgz#63cb8316861b8fbdb4b9c550a62139cd90675e40"
@@ -2325,6 +2332,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+next-redux-wrapper@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/next-redux-wrapper/-/next-redux-wrapper-8.0.0.tgz#588f2d89146c60c77d4a40c0af7e5282acfe4773"
+  integrity sha512-zKRdpvDeqNXQr1j5DUWwsB2fz6XpHR32iy2qJGItTKLsbLB9GvtxDL9b4mFCfhDvnzy5dw97UqMjWDpFY8h0zA==
+
 next-seo@^5.9.0:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.9.0.tgz#1bc68a25677f0459609c587264c5ee90a2a00730"
@@ -2720,6 +2732,18 @@ redis-parser@^3.0.0:
   dependencies:
     redis-errors "^1.0.0"
 
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+regenerator-runtime@^0.13.10:
+  version "0.13.10"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"