v/deskreen
1
0
Fork 0
mirror of https://github.com/pavlobu/deskreen.git synced 2025-05-31 23:00:09 -07:00
Code Issues Projects Releases Wiki Activity

git commit fix bug with device faide out in devices list

Browse Source
This commit is contained in:
Pavlo Buidenkov 2022-06-01 01:39:30 +02:00
parent ae5de8dc22
commit 10d8d780d7
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/ConnectedDevicesListDrawer.tsx
View File

@ -26,6 +26,8 @@ type DeviceWithDesktopCapturerSourceId = Device & {
desktopCapturerSourceId: string; desktopCapturerSourceId: string;
}; };
const ANIMATION_DURATION = 700;
const Fade = require('react-reveal/Fade'); const Fade = require('react-reveal/Fade');
interface ConnectedDevicesListDrawerProps { interface ConnectedDevicesListDrawerProps {
@ -134,6 +136,10 @@ export default function ConnectedDevicesListDrawer(
const newDevicesDisplayed = new Map(devicesDisplayed); const newDevicesDisplayed = new Map(devicesDisplayed);
newDevicesDisplayed.set(id, false); newDevicesDisplayed.set(id, false);
setDevicesDisplayed(newDevicesDisplayed); setDevicesDisplayed(newDevicesDisplayed);
setTimeout(() => {
newDevicesDisplayed.delete(id);
setDevicesDisplayed(newDevicesDisplayed);
}, ANIMATION_DURATION);
}, },
[devicesDisplayed, setDevicesDisplayed] [devicesDisplayed, setDevicesDisplayed]
); );
@ -182,7 +188,9 @@ export default function ConnectedDevicesListDrawer(
size={Drawer.SIZE_LARGE} size={Drawer.SIZE_LARGE}
isOpen={props.isOpen} isOpen={props.isOpen}
onClose={props.handleToggle} onClose={props.handleToggle}
transitionDuration={isWithReactRevealAnimations() ? 700 : 0} transitionDuration={
isWithReactRevealAnimations() ? ANIMATION_DURATION : 0
}
> >
<Row between="xs" middle="xs" className={classes.drawerInnerTopPanel}> <Row between="xs" middle="xs" className={classes.drawerInnerTopPanel}>
<Col xs={11}> <Col xs={11}>
@ -214,7 +222,7 @@ export default function ConnectedDevicesListDrawer(
<Fade <Fade
bottom bottom
cascade cascade
duration={isWithReactRevealAnimations() ? 700 : 0} duration={isWithReactRevealAnimations() ? ANIMATION_DURATION : 0}
> >
<div className={classes.zoomFullWidth}> <div className={classes.zoomFullWidth}>
{connectedDevices.map((device) => { {connectedDevices.map((device) => {
@ -224,7 +232,7 @@ export default function ConnectedDevicesListDrawer(
collapse collapse
opposite opposite
when={devicesDisplayed.get(device.id)} when={devicesDisplayed.get(device.id)}
duration={isProduction() ? 700 : 0} duration={isProduction() ? ANIMATION_DURATION : 0}
> >
<Card className="connected-device-card"> <Card className="connected-device-card">
<Row middle="xs"> <Row middle="xs">
@ -283,7 +291,9 @@ export default function ConnectedDevicesListDrawer(
setIsAlertDisconectAllOpen(false); setIsAlertDisconectAllOpen(false);
}} }}
onConfirm={handleDisconnectAndHideAllDevices} onConfirm={handleDisconnectAndHideAllDevices}
transitionDuration={isWithReactRevealAnimations() ? 700 : 0} transitionDuration={
isWithReactRevealAnimations() ? ANIMATION_DURATION : 0
}
> >
<H4> <H4>
{t( {t(