From 2a757851815b06089ab8c446135bc6a855372a02 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 23 Dec 2024 10:26:56 +0100 Subject: [PATCH] ui: fix perfwarnings container margin --- .../Player/MobilePlayer/PerfWarnings.tsx | 82 +++++++++++-------- frontend/package.json | 2 +- frontend/yarn.lock | 10 +-- 3 files changed, 56 insertions(+), 38 deletions(-) diff --git a/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx b/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx index 87631936d..76d528841 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx @@ -1,4 +1,4 @@ -import { MobilePerformanceEvent } from "Player/web/messages"; +import { MobilePerformanceEvent } from 'Player/web/messages'; import React from 'react'; import { MobilePlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; @@ -6,7 +6,7 @@ import { Icon } from 'UI'; import { mapIphoneModel } from 'Player/mobile/utils'; import cn from 'classnames'; import { NONE } from 'App/mstore/uiPlayerStore'; -import { useStore } from "App/mstore"; +import { useStore } from 'App/mstore'; type warningsType = | 'thermalState' @@ -39,24 +39,38 @@ const elements = { }, background: { title: 'In Background', - icon: 'eye-slash' + icon: 'eye-slash', }, } as const; function PerfWarnings({ userDevice }: { userDevice: string }) { const { store } = React.useContext(MobilePlayerContext); - const { uiPlayerStore } = useStore(); - const { scale, performanceListNow, performanceList, inBackground } = store.get() + const { uiPlayerStore, sessionStore } = useStore(); + const { scale, performanceListNow, performanceList, inBackground } = + store.get(); const bottomBlock = uiPlayerStore.bottomBlock; const allElements = Object.keys(elements) as warningsType[]; - const list = React.useMemo(() => allElements - .filter(el => performanceList.findIndex((pw: MobilePerformanceEvent & { techName: warningsType }) => pw.techName === el) !== -1) - , [performanceList.length]) + const list = React.useMemo( + () => + allElements.filter( + (el) => + performanceList.findIndex( + (pw: MobilePerformanceEvent & { techName: warningsType }) => + pw.techName === el + ) !== -1 + ), + [performanceList.length] + ); + const width = sessionStore.current.screenWidth ?? 0; + const leftMargin = + width > 0 + ? (width / 2) * scale + 20 + : (mapIphoneModel(userDevice).styles.shell.width / 2 + 10) * scale; const contStyles = { left: '50%', display: 'flex', - marginLeft: `${(mapIphoneModel(userDevice).styles.shell.width / 2 + 10) * scale}px`, + marginLeft: `${leftMargin}px`, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', @@ -69,36 +83,38 @@ function PerfWarnings({ userDevice }: { userDevice: string }) { } as const; const activeWarnings = React.useMemo(() => { - const warnings: warningsType[] = [] - performanceListNow.forEach((warn: MobilePerformanceEvent & { techName: warningsType }) => { - switch (warn.techName) { - case 'thermalState': - if (warn.value > 1) warnings.push(warn.techName) // 2 = serious 3 = overheating - break; - case 'memoryWarning': - warnings.push(warn.techName) - break; - case 'lowDiskSpace': - warnings.push(warn.techName) - break; - case 'isLowPowerModeEnabled': - if (warn.value === 1) warnings.push(warn.techName) - break; - case 'batteryLevel': - if (warn.value < 25) warnings.push(warn.techName) - break; + const warnings: warningsType[] = []; + performanceListNow.forEach( + (warn: MobilePerformanceEvent & { techName: warningsType }) => { + switch (warn.techName) { + case 'thermalState': + if (warn.value > 1) warnings.push(warn.techName); // 2 = serious 3 = overheating + break; + case 'memoryWarning': + warnings.push(warn.techName); + break; + case 'lowDiskSpace': + warnings.push(warn.techName); + break; + case 'isLowPowerModeEnabled': + if (warn.value === 1) warnings.push(warn.techName); + break; + case 'batteryLevel': + if (warn.value < 25) warnings.push(warn.techName); + break; + } } - }) - return warnings + ); + return warnings; }, [performanceListNow.length]); if (bottomBlock !== NONE) return null; return ( -
+
{inBackground ? (
@@ -109,7 +125,9 @@ function PerfWarnings({ userDevice }: { userDevice: string }) {
a === w) !== -1 ? 'opacity-100' : 'opacity-0' + activeWarnings.findIndex((a) => a === w) !== -1 + ? 'opacity-100' + : 'opacity-0' )} > diff --git a/frontend/package.json b/frontend/package.json index 6586276c8..c79c32fb7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -113,7 +113,7 @@ "country-data": "0.0.31", "css-loader": "^7.1.2", "cssnano": "^7.0.6", - "cypress": "^13.3.0", + "cypress": "13.17.0", "cypress-image-snapshot": "^4.0.1", "dotenv": "^6.2.0", "esbuild-loader": "^4.2.2", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index f1b91f871..f3e479cf7 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -6170,9 +6170,9 @@ __metadata: languageName: node linkType: hard -"cypress@npm:^13.3.0": - version: 13.15.2 - resolution: "cypress@npm:13.15.2" +"cypress@npm:13.17.0": + version: 13.17.0 + resolution: "cypress@npm:13.17.0" dependencies: "@cypress/request": "npm:^3.0.6" "@cypress/xvfb": "npm:^1.2.4" @@ -6219,7 +6219,7 @@ __metadata: yauzl: "npm:^2.10.0" bin: cypress: bin/cypress - checksum: 10c1/e0a23aafc6a7ab882b3396351387843de4cdeb68f83e829a96bbe8b954c398a943e7f71e201272c61a3c66eb3f704b5efb63876d319b9b83fe556e9e4bf50e16 + checksum: 10c1/390ea671a12960bc7b2940fe9a54fdc1580ad17e1191100b455fecda82940ec975202cd2b5200343169ba67d84d9d77126a12e7e1e511ad51ce650ccbd9b65e0 languageName: node linkType: hard @@ -11604,7 +11604,7 @@ __metadata: country-flag-icons: "npm:^1.5.7" css-loader: "npm:^7.1.2" cssnano: "npm:^7.0.6" - cypress: "npm:^13.3.0" + cypress: "npm:13.17.0" cypress-image-snapshot: "npm:^4.0.1" dotenv: "npm:^6.2.0" esbuild-loader: "npm:^4.2.2"