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.

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

fix: revert minimized calling cell #17696

Merged
merged 1 commit into from
Jul 5, 2024
Merged
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion src/i18n/en-US.json
Original file line number Diff line number Diff line change
@@ -1544,7 +1544,6 @@
"videoCallvideoInputCamera": "Camera",
"videoSpeakersTabAll": "All ({{count}})",
"videoSpeakersTabSpeakers": "Speakers",
"viewingInAnotherWindow": "Viewing in another window",
"warningCallIssues": "This version of {{brandName}} can not participate in the call. Please use",
"warningCallQualityPoor": "Poor connection",
"warningCallUnsupportedIncoming": "{{user}} is calling. Your browser doesn’t support calls.",
21 changes: 11 additions & 10 deletions src/script/components/Conversation/Conversation.tsx
Original file line number Diff line number Diff line change
@@ -490,16 +490,17 @@ export const Conversation = ({
}

return (
<CallingCell
key={conversation.id}
classifiedDomains={classifiedDomains}
call={call}
callActions={callingViewModel.callActions}
callingRepository={callingRepository}
pushToTalkKey={callingViewModel.propertiesRepository.getPreference(
PROPERTIES_TYPE.CALL.PUSH_TO_TALK_KEY,
)}
/>
<div className="calling-cell" key={conversation.id}>
<CallingCell
classifiedDomains={classifiedDomains}
call={call}
callActions={callingViewModel.callActions}
callingRepository={callingRepository}
pushToTalkKey={callingViewModel.propertiesRepository.getPreference(
PROPERTIES_TYPE.CALL.PUSH_TO_TALK_KEY,
)}
/>
</div>
);
})}

Original file line number Diff line number Diff line change
@@ -72,6 +72,7 @@ const createProps = async () => {
pushToTalkKey: null,
conversation,
hasAccessToCamera: true,
isSelfVerified: true,
teamState: mockTeamState,
videoGrid: {grid: [], thumbnail: undefined},
} as CallingCellProps;
654 changes: 654 additions & 0 deletions src/script/components/calling/CallingCell.tsx

Large diffs are not rendered by default.

53 changes: 0 additions & 53 deletions src/script/components/calling/CallingCell/CallingCell.styles.ts

This file was deleted.

368 changes: 0 additions & 368 deletions src/script/components/calling/CallingCell/CallingCell.tsx

This file was deleted.

This file was deleted.

This file was deleted.

20 changes: 0 additions & 20 deletions src/script/components/calling/CallingCell/CallingControls/index.ts

This file was deleted.

This file was deleted.

This file was deleted.

20 changes: 0 additions & 20 deletions src/script/components/calling/CallingCell/CallingHeader/index.ts

This file was deleted.

20 changes: 0 additions & 20 deletions src/script/components/calling/CallingCell/index.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -72,8 +72,8 @@ export const DetachedCallingCell = ({
pushToTalkKey={pushToTalkKey}
isFullUi
hasAccessToCamera={hasAccessToCamera}
isSelfVerified={selfUser.is_verified()}
setMaximizedParticipant={participant => activeCall.maximizedParticipant(participant)}
isDetached
/>
</DetachedWindow>
);
63 changes: 23 additions & 40 deletions src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
Original file line number Diff line number Diff line change
@@ -51,11 +51,10 @@ import {EmptyConversationList} from './EmptyConversationList';
import {getTabConversations} from './helpers';
import {SidebarStatus, SidebarTabs, useFolderState, useSidebarStore} from './state';

import {CallState} from '../../../../calling/CallState';
import {CallingViewMode, CallState} from '../../../../calling/CallState';
import {createLabel} from '../../../../conversation/ConversationLabelRepository';
import {ConversationRepository} from '../../../../conversation/ConversationRepository';
import {ConversationState} from '../../../../conversation/ConversationState';
import type {Conversation} from '../../../../entity/Conversation';
import {User} from '../../../../entity/User';
import {useConversationFocus} from '../../../../hooks/useConversationFocus';
import {PreferenceNotificationRepository} from '../../../../notification/PreferenceNotificationRepository';
@@ -105,7 +104,6 @@ const Conversations: React.FC<ConversationsProps> = ({
const [isConversationFilterFocused, setIsConversationFilterFocused] = useState(false);
const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
const {connectRequests} = useKoSubscribableChildren(userState, ['connectRequests']);
const {notifications} = useKoSubscribableChildren(preferenceNotificationRepository, ['notifications']);

const {
activeConversation,
@@ -122,8 +120,9 @@ const Conversations: React.FC<ConversationsProps> = ({
'unreadConversations',
'visibleConversations',
]);
const {activeCalls, viewMode} = useKoSubscribableChildren(callState, ['activeCalls', 'viewMode']);

const {activeCalls} = useKoSubscribableChildren(callState, ['activeCalls']);
const isCallWindowDetached = viewMode === CallingViewMode.DETACHED_WINDOW;

const {conversationLabelRepository} = conversationRepository;
const favoriteConversations = conversationLabelRepository.getFavorites(conversations);
@@ -143,11 +142,8 @@ const Conversations: React.FC<ConversationsProps> = ({
const {openFolder, closeFolder, expandedFolder, isFoldersTabOpen, toggleFoldersTab} = useFolderState();
const {currentFocus, handleKeyDown, resetConversationFocus} = useConversationFocus(conversations);

// false when screen is larger than 1000px
// true when screen is smaller than 1000px
const isScreenLessThanMdBreakpoint = useMatchMedia('(max-width: 1000px)');
const isSideBarOpen =
sidebarStatus === SidebarStatus.AUTO ? !isScreenLessThanMdBreakpoint : sidebarStatus === SidebarStatus.OPEN;
const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
const isSideBarOpen = sidebarStatus === SidebarStatus.AUTO ? mdBreakpoint : sidebarStatus === SidebarStatus.OPEN;

const {conversations: currentTabConversations, searchInputPlaceholder} = getTabConversations({
currentTab,
@@ -181,20 +177,6 @@ const Conversations: React.FC<ConversationsProps> = ({
}
}, [activeConversation, conversationState, listViewModel.contentViewModel, conversations.length]);

useEffect(() => {
amplify.subscribe(WebAppEvents.CONVERSATION.SHOW, (conversation?: Conversation) => {
if (!conversation) {
return;
}

const includesConversation = currentTabConversations.includes(conversation);

if (!includesConversation) {
setCurrentTab(SidebarTabs.RECENT);
}
});
}, [currentTabConversations]);

useEffect(() => {
if (!activeConversation) {
return () => {};
@@ -256,7 +238,7 @@ const Conversations: React.FC<ConversationsProps> = ({
}

const sidebar = (
<nav className="conversations-sidebar" css={conversationsSidebarStyles(isScreenLessThanMdBreakpoint)}>
<nav className="conversations-sidebar" css={conversationsSidebarStyles(mdBreakpoint)}>
<FadingScrollbar className="conversations-sidebar-items" data-is-collapsed={!isSideBarOpen}>
<UserDetails
user={selfUser}
@@ -275,7 +257,6 @@ const Conversations: React.FC<ConversationsProps> = ({
archivedConversations={archivedConversations}
conversationRepository={conversationRepository}
onClickPreferences={() => onClickPreferences(ContentState.PREFERENCES_ACCOUNT)}
showNotificationsBadge={notifications.length > 0}
/>
</FadingScrollbar>

@@ -297,17 +278,20 @@ const Conversations: React.FC<ConversationsProps> = ({
const {callingRepository} = callingViewModel;

return (
conversation && (
<CallingCell
key={conversation.id}
classifiedDomains={classifiedDomains}
call={call}
callActions={callingViewModel.callActions}
callingRepository={callingRepository}
pushToTalkKey={propertiesRepository.getPreference(PROPERTIES_TYPE.CALL.PUSH_TO_TALK_KEY)}
isFullUi
hasAccessToCamera={callingViewModel.hasAccessToCamera()}
/>
conversation &&
!isCallWindowDetached && (
<div className="calling-cell" key={conversation.id}>
<CallingCell
classifiedDomains={classifiedDomains}
call={call}
callActions={callingViewModel.callActions}
callingRepository={callingRepository}
pushToTalkKey={propertiesRepository.getPreference(PROPERTIES_TYPE.CALL.PUSH_TO_TALK_KEY)}
isFullUi
hasAccessToCamera={callingViewModel.hasAccessToCamera()}
isSelfVerified={selfUser.is_verified()}
/>
</div>
)
);
})}
@@ -325,7 +309,7 @@ const Conversations: React.FC<ConversationsProps> = ({

return (
<div className="conversations-wrapper">
<div className="conversations-sidebar-spacer" css={conversationsSpacerStyles(isScreenLessThanMdBreakpoint)} />
<div className="conversations-sidebar-spacer" css={conversationsSpacerStyles(mdBreakpoint)} />
<ListWrapper
id="conversations"
headerElement={
@@ -343,7 +327,7 @@ const Conversations: React.FC<ConversationsProps> = ({
}
hasHeader={!isPreferences}
sidebar={sidebar}
footer={callingView}
before={callingView}
>
{isPreferences ? (
<Preferences
@@ -366,8 +350,7 @@ const Conversations: React.FC<ConversationsProps> = ({
/>
)}

{((showSearchInput && currentTabConversations.length === 0) ||
(hasNoConversations && currentTab !== SidebarTabs.ARCHIVES)) && (
{((showSearchInput && currentTabConversations.length === 0) || hasNoConversations) && (
<EmptyConversationList
currentTab={currentTab}
onChangeTab={changeTab}
30 changes: 17 additions & 13 deletions src/script/page/LeftSidebar/panels/TemporaryGuestConversations.tsx
Original file line number Diff line number Diff line change
@@ -82,19 +82,23 @@ const TemporaryGuestConversations: React.FC<TemporaryGuestConversations> = ({
const {conversation} = call;
return (
!isCallWindowDetached && (
<CallingCell
key={conversation.id}
data-uie-name="item-call"
data-uie-uid={conversation.id}
data-uie-value={conversation.display_name()}
call={call}
isTemporaryUser
isFullUi
callActions={callingViewModel.callActions}
callingRepository={callingViewModel.callingRepository}
hasAccessToCamera={callingViewModel.hasAccessToCamera()}
pushToTalkKey={callingViewModel.propertiesRepository.getPreference(PROPERTIES_TYPE.CALL.PUSH_TO_TALK_KEY)}
/>
<div key={conversation.id} className="calling-cell">
<CallingCell
data-uie-name="item-call"
data-uie-uid={conversation.id}
data-uie-value={conversation.display_name()}
call={call}
isTemporaryUser
isFullUi
isSelfVerified={false}
callActions={callingViewModel.callActions}
callingRepository={callingViewModel.callingRepository}
hasAccessToCamera={callingViewModel.hasAccessToCamera()}
pushToTalkKey={callingViewModel.propertiesRepository.getPreference(
PROPERTIES_TYPE.CALL.PUSH_TO_TALK_KEY,
)}
/>
</div>
)
);
})}
2 changes: 1 addition & 1 deletion src/style/components/group-video-grid.less
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@
overflow: hidden;
height: 168px;
border-radius: 8px;
margin-bottom: 8px;
margin: 8px;

&--no-camera-access {
display: flex;
37 changes: 31 additions & 6 deletions src/style/components/list/conversation-list-calling-cell.less
Original file line number Diff line number Diff line change
@@ -162,7 +162,7 @@ svg.small-icon {
display: flex;
flex-direction: column;
flex-shrink: 0;
margin: 10px 12px 20px;
margin: 10px 14px 16px;
animation: show-call-ui @animation-timing-fast ease-in-out 0s 1;

&.dark-bg {
@@ -210,31 +210,56 @@ svg.small-icon {
.conversation-list-calling-cell-background {
display: flex;
flex-direction: column;
padding: 12px 12px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--app-bg-secondary);
}

.conversation-list-cell-button::after {
display: none;
}

.conversation-list-calling-cell-controls {
display: flex;
width: 100%;
justify-content: space-between;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
margin-top: 8px;

&-left,
&-right {
.list-unstyled;
display: flex;
margin: 0;
}
}

.conversation-list-cell-right {
padding-right: 0;
.conversation-list-calling-cell-controls-item {
& + & {
margin-left: 8px;
}
}

.conversation-list-calling-cell__info-bar {
.label-small-medium;
padding: 4px;
border-radius: 6px;
margin: 8px 8px 0;
background-color: var(--accent-color);
color: var(--app-bg-secondary);
text-align: center;
}

@keyframes show-call-ui {
0% {
//max-height: 0;
max-height: 0;
opacity: 0;
transform: scale(0.9);
}
100% {
//max-height: 500px;
max-height: 500px;
opacity: 1;
transform: scale(1);
}
23 changes: 23 additions & 0 deletions src/style/list/conversation-list-cell.less
Original file line number Diff line number Diff line change
@@ -71,6 +71,12 @@
}
}

.conversation-list-cell-button {
overflow: hidden;
width: 100%;
flex: 1;
}

.conversation-list-cell-left {
.flex-center;

@@ -96,6 +102,23 @@

padding-right: 16px;
border-bottom: 1px solid var(--border-color);

&__calling {
position: relative;
display: flex;
width: 100%;
height: 56px;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: @font-weight-regular;
& > * {
border-radius: 8px;
}
& > *,
& > * > * {
border: none;
}
}
}

.conversation-recent-view-list {

Unchanged files with check annotations Beta

private initStaticRoutes() {
this.app.use(RedirectRoutes(this.config, this.clientConfig));
this.app.use('/audio', express.static(path.join(__dirname, 'static/audio')));

Check warning on line 168 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 168 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/ext', express.static(path.join(__dirname, 'static/ext')));

Check warning on line 169 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 169 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/font', express.static(path.join(__dirname, 'static/font')));

Check warning on line 170 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 170 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/image', express.static(path.join(__dirname, 'static/image')));

Check warning on line 171 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 171 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/min', express.static(path.join(__dirname, 'static/min')));

Check warning on line 172 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 172 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/proto', express.static(path.join(__dirname, 'static/proto')));

Check warning on line 173 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 173 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/style', express.static(path.join(__dirname, 'static/style')));

Check warning on line 174 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 174 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/worker', express.static(path.join(__dirname, 'static/worker')));

Check warning on line 175 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 175 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.use('/assets', express.static(path.join(__dirname, 'static/assets')));

Check warning on line 176 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead

Check warning on line 176 in server/Server.ts

GitHub Actions / test

Caution: `express` also has a named export `static`. Check if you meant to write `import {static} from 'express'` instead
this.app.get('/favicon.ico', (_req, res) => res.sendFile(path.join(__dirname, 'static/image/favicon.ico')));
if (!this.config.DEVELOPMENT) {
SHOW_LOADING_INFORMATION: env.FEATURE_SHOW_LOADING_INFORMATION == 'true',
USE_CORE_CRYPTO: env.FEATURE_USE_CORE_CRYPTO == 'true',
MAX_USERS_TO_PING_WITHOUT_ALERT:
(env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT && Number(env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT)) || 4,

Check warning on line 70 in server/config/client.config.ts

GitHub Actions / test

No magic number: 4

Check warning on line 70 in server/config/client.config.ts

GitHub Actions / test

No magic number: 4
},
MAX_GROUP_PARTICIPANTS: (env.MAX_GROUP_PARTICIPANTS && Number(env.MAX_GROUP_PARTICIPANTS)) || 500,
MAX_VIDEO_PARTICIPANTS: (env.MAX_VIDEO_PARTICIPANTS && Number(env.MAX_VIDEO_PARTICIPANTS)) || 4,