mattermost-mobile/app/screens/thread/index.tsx
Mattermost Build a68b1560a5
MM-51228 - Calls: UX redesign & theming support (#7283) (#7328)
* UX redesign

* fix call bar profile on Android

* update @mattermost/calls; use common color utils

* collapseIcon and time colour fixes (not correct yet on Onyx or Quartz)

* fix time and collapseIcon colors; fix unavailable wrapper

* center users, scroll when full; statusBar bg and styling

* better spacing; better screenshare; no reaction bar when no reactions

* remove margins from bottom; speaker/react buttonOn colour is now callsBg

* update calls-common; update raised hand button colors

* i18n

* cleaning up style sheets

* fix package-lock

* fix vertical alignment of phone icon

* add a noBorder prop to UserAvatarsStack

* typography, icon sizing, spacing changes

* add rounded header; UI improvements; refactor observables

* updating phone icon, join call margins

* join call text; color theming

* remove unneeded container

* phone-outline -> phone

* split CallsChannelState into boolean components

* use sidebar bg to generate calls bg

* fix hand icon, button texts

(cherry picked from commit f8f6839945)

Co-authored-by: Christopher Poile <cpoile@gmail.com>
2023-05-04 14:23:26 -04:00

56 lines
1.9 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
import withObservables from '@nozbe/with-observables';
import {distinctUntilChanged, switchMap, combineLatest, of as of$} from 'rxjs';
import {observeChannelsWithCalls, observeCurrentCall} from '@calls/state';
import {withServerUrl} from '@context/server';
import {observePost} from '@queries/servers/post';
import {observeIsCRTEnabled} from '@queries/servers/thread';
import Thread from './thread';
import type {WithDatabaseArgs} from '@typings/database/database';
type EnhanceProps = WithDatabaseArgs & {
serverUrl: string;
rootId: string;
}
const enhanced = withObservables(['rootId'], ({database, serverUrl, rootId}: EnhanceProps) => {
const rootPost = observePost(database, rootId);
const channelId = rootPost.pipe(
switchMap((r) => of$(r?.channelId || '')),
distinctUntilChanged(),
);
const isCallInCurrentChannel = combineLatest([channelId, observeChannelsWithCalls(serverUrl)]).pipe(
switchMap(([id, calls]) => of$(Boolean(calls[id]))),
distinctUntilChanged(),
);
const currentCall = observeCurrentCall();
const ccChannelId = currentCall.pipe(
switchMap((call) => of$(call?.channelId)),
distinctUntilChanged(),
);
const isInACall = currentCall.pipe(
switchMap((call) => of$(Boolean(call?.connected))),
distinctUntilChanged(),
);
const isInCurrentChannelCall = combineLatest([channelId, ccChannelId]).pipe(
switchMap(([id, ccId]) => of$(id === ccId)),
distinctUntilChanged(),
);
return {
isCRTEnabled: observeIsCRTEnabled(database),
isCallInCurrentChannel,
isInACall,
isInCurrentChannelCall,
rootPost,
};
});
export default withDatabase(withServerUrl(enhanced(Thread)));