jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix perfwarnings container margin

Browse source
This commit is contained in:
nick-delirium 2024-12-23 10:26:56 +01:00
parent ddfaaeb6c5
commit 2a75785181
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
3 changed files with 56 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx
View file

@ -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 (
<div style={contStyles}>
<div id={'warnings-container'} style={contStyles}>
{inBackground ? (
<div
className={cn(
'transition-all flex items-center gap-1 bg-white border rounded px-2 py-1',
'opacity-100',
'opacity-100'
)}
>
<Icon name={elements.background.icon} size={16} />
@ -109,7 +125,9 @@ function PerfWarnings({ userDevice }: { userDevice: string }) {
<div
className={cn(
'transition-all flex items-center gap-1 bg-white border rounded px-2 py-1',
activeWarnings.findIndex((a) => a === w) !== -1 ? 'opacity-100' : 'opacity-0'
activeWarnings.findIndex((a) => a === w) !== -1
? 'opacity-100'
: 'opacity-0'
)}
>
<Icon name={elements[w].icon} size={16} />

2
frontend/package.json
View file

@ -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",

10
frontend/yarn.lock
View file

@ -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"