Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout for avoiding overlapping of voice/text chat, screenshare, plugins #625

Merged
merged 8 commits into from
Feb 14, 2023
Merged

Layout for avoiding overlapping of voice/text chat, screenshare, plugins #625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d38625d
feat(layout): initial attempt of creating layout helping avoid overla…
dmitry-yudakov Feb 2, 2023
175c2c4
Merge remote-tracking branch 'origin/develop' into feat/sectioned-layout
dmitry-yudakov Feb 7, 2023
9a90636
feat(layout): relatively working layout of screenshare/plugin and voi…
dmitry-yudakov Feb 8, 2023
bf0e6f6
wip - grid with nth-children
dmitry-yudakov Feb 10, 2023
d14d268
Merge branch 'develop' into wip/sections-flexbox-self
dmitry-yudakov Feb 10, 2023
ed4890c
feat: align elements in different screen sections
dmitry-yudakov Feb 10, 2023
710da9c
style(voice-chat): slightly shrink bottom actions to look better next…
dmitry-yudakov Feb 13, 2023
ab24411
Merge remote-tracking branch 'origin/develop' into feat/sectioned-layout
dmitry-yudakov Feb 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/app/src/scenes/AppLayers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, {FC, lazy} from 'react';
import {observer} from 'mobx-react-lite';
import {toast} from 'react-toastify';
import {useTheme} from 'styled-components';
import {SectionedScreen} from '@momentum-xyz/ui-kit';
import {UnityControlContextProvider} from '@momentum-xyz/sdk';

import {useStore} from 'shared/hooks';
Expand All @@ -27,6 +28,9 @@ const AppLayers: FC<PropsInterface> = (props) => {
<div data-testid="AppLayers-test">
<ToastMessage position={toast.POSITION.BOTTOM_RIGHT} theme={theme} />
<UnityControlContextProvider value={unityStore.unityInstanceStore.unityControlInst}>
<div id="sectioned-screen-container">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is temporary solution. It should be designed properly.

<SectionedScreen />
</div>
{renderUnity && <Widgets />}
<main id="main">
<div className="main-content">{children}</div>
Expand Down
15 changes: 12 additions & 3 deletions packages/app/src/scenes/object/pages/ObjectPluginPage/ObjectPluginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import {observer} from 'mobx-react-lite';
import {useTheme} from 'styled-components';
import {
ErrorBoundary,
// ObjectTopBar, SpacePage,
ScreenSectionsEnum,
SectionedScreenPortal,
Text,
WindowPanel
} from '@momentum-xyz/ui-kit';
Expand Down Expand Up @@ -103,7 +104,13 @@ const PluginInnerWrapper = ({
const {content, objectView} = plugin.usePlugin(pluginProps);

return !pluginLoader.isError ? (
<styled.Wrapper>
<SectionedScreenPortal
data-testid="ObjectPluginPage-test"
section={
pluginLoader.isExpanded ? ScreenSectionsEnum.TOP_LEFT : ScreenSectionsEnum.BOTTOM_RIGHT
}
maximized={pluginLoader.isExpanded}
>
{content ? (
<styled.Container className={cn(pluginLoader.isExpanded && 'expanded')}>
{content}
Expand All @@ -113,14 +120,16 @@ const PluginInnerWrapper = ({
title={objectView.title || ''}
subtitle={objectView.subtitle}
actions={objectView.actions}
initialIsExpanded={pluginLoader.isExpanded}
onToggleExpand={pluginProps.onToggleExpand}
onClose={pluginProps.onClose}
>
{objectView.content}
</WindowPanel>
) : (
<Text text={t('errors.errorPluginContactDev')} size="l" />
)}
</styled.Wrapper>
</SectionedScreenPortal>
) : (
<Text text={t('errors.errorWhileLoadingPlugin')} size="l" />
);
Expand Down
76 changes: 0 additions & 76 deletions packages/app/src/scenes/widgets/pages/ScreenShareWidget/ScreenShareWidget.styled.ts
View file
Open in desktop

This file was deleted.

71 changes: 25 additions & 46 deletions packages/app/src/scenes/widgets/pages/ScreenShareWidget/ScreenShareWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, {FC, useCallback, useEffect} from 'react';
import {observer} from 'mobx-react-lite';
import cn from 'classnames';
import {Portal, SvgButton, Text} from '@momentum-xyz/ui-kit';
import {ScreenSectionsEnum, SectionedScreenPortal, WindowPanel} from '@momentum-xyz/ui-kit';
import {useTranslation} from 'react-i18next';

import {useStore} from 'shared/hooks';

import {ScreenChoice, ScreenVideo} from './components/templates';
import * as styled from './ScreenShareWidget.styled';

const ScreenShareWidget: FC = () => {
const {widgetsStore, agoraStore, sessionStore, unityStore} = useStore();
Expand Down Expand Up @@ -43,50 +41,31 @@ const ScreenShareWidget: FC = () => {
};

return (
<Portal data-testid="ScreenShareWidget-test">
<styled.Modal className={cn(screenShareStore.isExpanded && 'expanded')}>
<styled.HeaderElement className="left">
<styled.Title>
<Text
text={unityWorldStore.world?.name}
transform="uppercase"
weight="medium"
size="xl"
isMultiline={false}
/>
</styled.Title>
<styled.SubTitle>
<Text
text={`/ ${t('labels.screenShare')}`}
transform="uppercase"
size="xl"
isMultiline={false}
/>
</styled.SubTitle>
</styled.HeaderElement>
<styled.HeaderElement className="right">
<SvgButton
iconName={screenShareStore.isExpanded ? 'minimise' : 'fullscreen'}
size="medium-large"
onClick={screenShareStore.togglePage}
isWhite
<SectionedScreenPortal
data-testid="ScreenShareWidget-test"
section={
screenShareStore.isExpanded ? ScreenSectionsEnum.TOP_LEFT : ScreenSectionsEnum.BOTTOM_RIGHT
}
maximized={screenShareStore.isExpanded}
>
<WindowPanel
title={unityWorldStore.world?.name || ''}
subtitle={t('labels.screenShare')}
initialIsExpanded={screenShareStore.isExpanded}
onToggleExpand={screenShareStore.togglePage}
onClose={handleClose}
>
{!localVideoTrack && !remoteVideoTrack ? (
<ScreenChoice
isSettingUp={agoraScreenShareStore.isSettingUp}
// canShare={//share permission}
startScreenShare={startScreenSharing}
/>

<SvgButton iconName="close" size="medium-large" isWhite onClick={handleClose} />
</styled.HeaderElement>
<styled.InnerContainer>
{!localVideoTrack && !remoteVideoTrack ? (
<ScreenChoice
isSettingUp={agoraScreenShareStore.isSettingUp}
// canShare={//share permission}
startScreenShare={startScreenSharing}
/>
) : (
<ScreenVideo videoTrack={localVideoTrack ? localVideoTrack : remoteVideoTrack} />
)}
</styled.InnerContainer>
</styled.Modal>
</Portal>
) : (
<ScreenVideo videoTrack={localVideoTrack ? localVideoTrack : remoteVideoTrack} />
)}
</WindowPanel>
</SectionedScreenPortal>
);
};

Expand Down
11 changes: 2 additions & 9 deletions packages/app/src/scenes/widgets/pages/TextChatWidget/TextChatWidget.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import {rgba} from 'polished';
import styled from 'styled-components';

export const Modal = styled.div`
display: flex;
position: absolute;
right: 0;
top: 0;
margin: 20px;
`;

export const Container = styled.div`
background: ${(props) => props.theme.bg && rgba(props.theme.bg, 0.75)};
border-radius: 10px;
overflow: hidden;
width: 280px;
height: 584px;
max-height: 584px;
height: 100%;

display: flex;
flex-direction: column;
Expand Down
61 changes: 32 additions & 29 deletions packages/app/src/scenes/widgets/pages/TextChatWidget/TextChatWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React, {FC, useEffect} from 'react';
import {Heading, IconSvg, Portal, SvgButton} from '@momentum-xyz/ui-kit';
import {
Heading,
IconSvg,
ScreenSectionsEnum,
SectionedScreenPortal,
SvgButton
} from '@momentum-xyz/ui-kit';
import {observer} from 'mobx-react-lite';
import {useTranslation} from 'react-i18next';

Expand All @@ -11,7 +17,7 @@ import * as styled from './TextChatWidget.styled';
const TextChatWidget: FC = () => {
const {widgetsStore, sessionStore, unityStore} = useStore();
const {unityInstanceStore} = unityStore;
const {textChatStore, voiceChatStore} = widgetsStore;
const {textChatStore} = widgetsStore;
const {streamChat} = textChatStore;

const {t} = useTranslation();
Expand All @@ -25,33 +31,30 @@ const TextChatWidget: FC = () => {
}, [sessionStore.user, sessionStore.userId, streamChat, unityStore.worldId]);

return (
<Portal>
{/* FIXME: Design discussion in order to avoid relation to VoiceChatStore */}
<styled.Modal style={{marginRight: voiceChatStore.dialog.isOpen ? '310px' : '20px'}}>
<styled.Container>
<styled.Header>
<styled.HeaderItemsGroup>
<IconSvg name="groupChat" size="medium" />
<Heading label={t('labels.chat')} transform="uppercase" type="h2" />
</styled.HeaderItemsGroup>
<styled.HeaderItemsGroup>
<SvgButton iconName="close" size="medium" onClick={textChatStore.dialog.close} />
</styled.HeaderItemsGroup>
</styled.Header>

<styled.Body>
{streamChat.client && streamChat.currentChannel && (
<TextChat
client={streamChat.client}
channel={streamChat.currentChannel}
onFocus={() => unityInstanceStore.changeKeyboardControl(false)}
onBlur={() => unityInstanceStore.changeKeyboardControl(true)}
/>
)}
</styled.Body>
</styled.Container>
</styled.Modal>
</Portal>
<SectionedScreenPortal section={ScreenSectionsEnum.TOP_RIGHT}>
<styled.Container>
<styled.Header>
<styled.HeaderItemsGroup>
<IconSvg name="groupChat" size="medium" />
<Heading label={t('labels.chat')} transform="uppercase" type="h2" />
</styled.HeaderItemsGroup>
<styled.HeaderItemsGroup>
<SvgButton iconName="close" size="medium" onClick={textChatStore.dialog.close} />
</styled.HeaderItemsGroup>
</styled.Header>

<styled.Body>
{streamChat.client && streamChat.currentChannel && (
<TextChat
client={streamChat.client}
channel={streamChat.currentChannel}
onFocus={() => unityInstanceStore.changeKeyboardControl(false)}
onBlur={() => unityInstanceStore.changeKeyboardControl(true)}
/>
)}
</styled.Body>
</styled.Container>
</SectionedScreenPortal>
);
};

Expand Down
11 changes: 2 additions & 9 deletions packages/app/src/scenes/widgets/pages/VoiceChatWidget/VoiceChatWidget.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import {rgba} from 'polished';
import styled from 'styled-components';

export const Modal = styled.div`
display: flex;
position: absolute;
right: 0;
top: 0;
margin: 20px;
`;

export const Container = styled.div`
background: ${(props) => props.theme.bg && rgba(props.theme.bg, 0.75)};
border-radius: 10px;
overflow: hidden;
width: 280px;
height: 584px;
max-height: 584px;
height: 100%;

display: flex;
flex-direction: column;
Expand Down
Loading