Skip to content

Commit 21b5297

Browse files
gabriellshgabriellsh
committed
WIP: Call open in popout warning
1 parent 55b8b41 commit 21b5297

3 files changed

Lines changed: 62 additions & 24 deletions

File tree

‎packages/i18n/src/locales/en.i18n.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1027,6 +1027,7 @@
10271027
"Call_not_found": "Call not found",
10281028
"Call_not_found_error": "This could happen when the call URL is not valid, or you're having connection issues. Please check with the source of the call URL and try again, or talk to your workspace administrator if the problem persists",
10291029
"Call_ongoing": "Call ongoing",
1030+
"Call_open_separate_window": "Call open in a separate window",
10301031
"Call_provider": "Call Provider",
10311032
"Call_ringer_volume": "Call ringer volume",
10321033
"Call_ringer_volume_hint": "For all incoming voice and video call notifications",
@@ -4933,6 +4934,7 @@
49334934
"Show_agent_email": "Show agent email",
49344935
"Show_agent_info": "Show agent information",
49354936
"Show_all": "Show All",
4937+
"Show_call_here": "Show call here",
49364938
"Show_counter": "Mark as unread",
49374939
"Show_default_content": "Show default content",
49384940
"Show_email_field": "Show email field",

‎packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, ButtonGroup } from '@rocket.chat/fuselage';
1+
import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
22
import { memo, useState, useCallback } from 'react';
33
import { useTranslation } from 'react-i18next';
44

@@ -148,12 +148,25 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
148148
{...getSplitStyles(showChat)}
149149
>
150150
<CardListSection>
151-
<CardListContainer focusedCard={focusedCard ? focusedCardElement : undefined} shouldWrapCards={shouldWrapCards}>
152-
<PeerCard displayName={user.displayName} avatarUrl={user.avatarUrl} muted={muted} held={held} />
153-
<PeerCard displayName={peerInfo.displayName} avatarUrl={peerInfo.avatarUrl} muted={remoteMuted} held={remoteHeld} />
154-
{focusedCard !== 'remote' && remoteStreamCard}
155-
{focusedCard !== 'local' && localStreamCard}
156-
</CardListContainer>
151+
{isPopout && (
152+
<Box mb={20} p={24} w='full' display='flex' flexDirection='column' justifyContent='space-between' alignItems='center'>
153+
<Box is='h1' color='font-default' mbe={40}>
154+
{t('Call_open_separate_window')}
155+
</Box>
156+
{/* TODO: new icon missing */}
157+
<Button onClick={togglePopout} icon='arrow-collapse' large>
158+
{t('Show_call_here')}
159+
</Button>
160+
</Box>
161+
)}
162+
{!isPopout && (
163+
<CardListContainer focusedCard={focusedCard ? focusedCardElement : undefined} shouldWrapCards={shouldWrapCards}>
164+
<PeerCard displayName={user.displayName} avatarUrl={user.avatarUrl} muted={muted} held={held} />
165+
<PeerCard displayName={peerInfo.displayName} avatarUrl={peerInfo.avatarUrl} muted={remoteMuted} held={remoteHeld} />
166+
{focusedCard !== 'remote' && remoteStreamCard}
167+
{focusedCard !== 'local' && localStreamCard}
168+
</CardListContainer>
169+
)}
157170
</CardListSection>
158171
<ActionStrip
159172
leftSlot={

‎packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx‎

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Box, ButtonGroup } from '@rocket.chat/fuselage';
1+
import { Box, ButtonGroup, Callout } from '@rocket.chat/fuselage';
2+
import { useCallback } from 'react';
23
import { useTranslation } from 'react-i18next';
34

45
import {
@@ -17,6 +18,8 @@ import {
1718
CardWidgetContainer,
1819
StreamCard,
1920
} from '../../components';
21+
import { useMediaCallInstance } from '../../context';
22+
import type { AvailableViews } from '../../context/MediaCallInstanceContext';
2023
import { useMediaCallView } from '../../context/MediaCallViewContext';
2124
import { usePlayMediaStream } from '../../providers/usePlayMediaStream';
2225

@@ -35,6 +38,18 @@ const OngoingCall = () => {
3538
widgetPositionTracker,
3639
} = useMediaCallView();
3740
const { muted, held, remoteMuted, remoteHeld, peerInfo, connectionState, startedAt } = sessionState;
41+
const { currentViews, setCurrentViews } = useMediaCallInstance();
42+
const isPopout = currentViews.has('popout');
43+
44+
const closePopout = useCallback(() => {
45+
setCurrentViews((prev) => {
46+
if (!prev.has('popout')) {
47+
return prev;
48+
}
49+
prev.delete('popout');
50+
return new Set<AvailableViews>(prev);
51+
});
52+
}, [setCurrentViews]);
3853

3954
const { localScreen, remoteScreen } = streams;
4055

@@ -59,28 +74,36 @@ const OngoingCall = () => {
5974
{onClickDirectMessage && (
6075
<ActionButton tiny secondary={false} label={t('Direct_Message')} icon='balloon' onClick={onClickDirectMessage} />
6176
)}
77+
{/* TODO: translation and icon */}
78+
{isPopout && <ActionButton tiny secondary={false} label={t('Close_popout')} icon='arrow-collapse' onClick={closePopout} />}
6279
<DevicePicker />
6380
</WidgetHeader>
6481
<WidgetContent>
6582
<CardWidgetContainer>
6683
<PeerInfo {...peerInfo} slots={remoteSlots} remoteMuted={remoteMuted} />
6784

68-
{remoteScreen?.active && (
69-
<StreamCard autoHeight maxHeight={120}>
70-
<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={remoteStreamRefCallback}>
71-
<track kind='captions' />
72-
</video>
73-
</StreamCard>
74-
)}
75-
{localScreen?.active && (
76-
<Box display='flex' flexDirection='column'>
77-
<StreamCard own autoHeight maxHeight={120} onClickStopSharing={onToggleScreenSharing}>
78-
<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={localStreamRefCallback}>
79-
<track kind='captions' />
80-
</video>
81-
</StreamCard>
82-
<WidgetInfo slots={[{ text: t('You_are_sharing_your_screen'), type: 'warning' }]} variant='card-content' />
83-
</Box>
85+
{isPopout && <Callout>{t('Call_open_separate_window')}</Callout>}
86+
87+
{!isPopout && (
88+
<>
89+
{remoteScreen?.active && (
90+
<StreamCard autoHeight maxHeight={120}>
91+
<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={remoteStreamRefCallback}>
92+
<track kind='captions' />
93+
</video>
94+
</StreamCard>
95+
)}
96+
{localScreen?.active && (
97+
<Box display='flex' flexDirection='column'>
98+
<StreamCard own autoHeight maxHeight={120} onClickStopSharing={onToggleScreenSharing}>
99+
<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={localStreamRefCallback}>
100+
<track kind='captions' />
101+
</video>
102+
</StreamCard>
103+
<WidgetInfo slots={[{ text: t('You_are_sharing_your_screen'), type: 'warning' }]} variant='card-content' />
104+
</Box>
105+
)}
106+
</>
84107
)}
85108
</CardWidgetContainer>
86109
</WidgetContent>

0 commit comments

Comments
 (0)