nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add fade animation

Browse Source
This commit is contained in:
Bill 2021-09-13 12:29:04 -04:00
parent 5892902ee2
commit 35d31af30f
4 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.tsx
View File

@ -5,6 +5,7 @@ import { useConfigurationEvent } from './hooks/events/core/configuration/configu
import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
import { TransitionAnimation, TransitionAnimationTypes } from './layout';
import { LoadingView } from './views/loading/LoadingView';
import { MainView } from './views/main/MainView';
@ -126,7 +127,9 @@ export const App: FC<{}> = props =>
return (
<div className="nitro-app">
{ (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
{ (isReady && !isError) && <MainView /> }
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }>
<MainView />
</TransitionAnimation>
</div>
);
}

5
src/views/main/MainView.tsx
View File

@ -2,6 +2,7 @@ import { RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetCommunication } from '../../api';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
import { AchievementsView } from '../achievements/AchievementsView';
import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
import { CameraWidgetView } from '../camera/CameraWidgetView';
@ -50,7 +51,9 @@ export const MainView: FC<MainViewProps> = props =>
return (
<div className="nitro-main">
{ landingViewVisible && <HotelView /> }
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }>
<HotelView />
</TransitionAnimation>
<ToolbarView isInRoom={ !landingViewVisible } />
<ModToolsView />
<RoomHostView />

9
src/views/room-host/RoomHostView.tsx
View File

@ -3,6 +3,7 @@ import { FC, useCallback, useState } from 'react';
import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api';
import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
import { RoomView } from '../room/RoomView';
export const RoomHostView: FC<{}> = props =>
@ -49,8 +50,10 @@ export const RoomHostView: FC<{}> = props =>
useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
return (
<div className="nitro-room-host w-100 h-100">
<RoomView roomSession={ roomSession } />
</div>
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ !!roomSession } timeout={ 300 }>
<div className="nitro-room-host w-100 h-100">
<RoomView roomSession={ roomSession } />
</div>
</TransitionAnimation>
);
}

2
src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
View File

@ -24,7 +24,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
const [ infoStandEvent, setInfoStandEvent ] = useState<RoomWidgetUpdateInfostandEvent>(null);
const [ isGameMode, setGameMode ] = useState(false);
const [ isDancing, setIsDancing ] = useState(false);
const [ isDecorating, setIsDecorating ] = useState(GetRoomSession().isDecorating);
const [ isDecorating, setIsDecorating ] = useState(false);
const [ rentableBotChatEvent, setRentableBotChatEvent ] = useState<RoomWidgetUpdateRentableBotChatEvent>(null);
const removeNameBubble = useCallback((index: number) =>