141 lines
3.9 KiB
TypeScript
141 lines
3.9 KiB
TypeScript
import { MobilePerformanceEvent } from 'Player/web/messages';
|
|
import React from 'react';
|
|
import { MobilePlayerContext } from 'App/components/Session/playerContext';
|
|
import { observer } from 'mobx-react-lite';
|
|
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';
|
|
|
|
type warningsType =
|
|
| 'thermalState'
|
|
| 'memoryWarning'
|
|
| 'lowDiskSpace'
|
|
| 'isLowPowerModeEnabled'
|
|
| 'batteryLevel'
|
|
| 'background';
|
|
|
|
const elements = {
|
|
thermalState: {
|
|
title: 'Overheating',
|
|
icon: 'thermometer-sun',
|
|
},
|
|
memoryWarning: {
|
|
title: 'High Memory Usage',
|
|
icon: 'memory-ios',
|
|
},
|
|
lowDiskSpace: {
|
|
title: 'Low Disk Space',
|
|
icon: 'low-disc-space',
|
|
},
|
|
isLowPowerModeEnabled: {
|
|
title: 'Low Power Mode',
|
|
icon: 'battery-charging',
|
|
},
|
|
batteryLevel: {
|
|
title: 'Low Battery',
|
|
icon: 'battery',
|
|
},
|
|
background: {
|
|
title: 'In Background',
|
|
icon: 'eye-slash',
|
|
},
|
|
} as const;
|
|
|
|
function PerfWarnings({ userDevice }: { userDevice: string }) {
|
|
const { store } = React.useContext(MobilePlayerContext);
|
|
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 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: `${leftMargin}px`,
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'center',
|
|
gap: '6px',
|
|
position: 'absolute',
|
|
width: '200px',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
zIndex: 0,
|
|
} 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;
|
|
}
|
|
}
|
|
);
|
|
return warnings;
|
|
}, [performanceListNow.length]);
|
|
if (bottomBlock !== NONE) return null;
|
|
return (
|
|
<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'
|
|
)}
|
|
>
|
|
<Icon name={elements.background.icon} size={16} />
|
|
<span>{elements.background.title}</span>
|
|
</div>
|
|
) : null}
|
|
{list.map((w) => (
|
|
<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'
|
|
)}
|
|
>
|
|
<Icon name={elements[w].icon} size={16} />
|
|
<span>{elements[w].title}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(PerfWarnings);
|