ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group Calls: More fixes (#3534)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-20 15:58:56 +02:00
parent c00aa8ef3f
commit c8ffb46782
15 changed files with 88 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/calls/group/GroupCall.module.scss
View File

@ -1,3 +1,5 @@
@import "../../../styles/mixins";
.root {
--group-call-panel-color: #212121;
--group-call-panel-header-border-color: #3b3b3b;
@ -53,7 +55,7 @@
flex-direction: column;
height: 100%;
overflow: auto;
overflow-y: scroll;
position: relative;
}
@ -72,6 +74,8 @@
border-bottom: 0.0625rem solid transparent;
padding: 0.375rem 0.875rem;
@include adapt-padding-to-scrollbar(0.875rem);
user-select: none;
z-index: 1;
background: var(--group-call-panel-color);
@ -135,6 +139,7 @@
.participants {
position: relative;
margin: 0.125rem 0.5rem 0;
@include adapt-margin-to-scrollbar(0.5rem);
}
.participantVideos {

15
src/components/calls/group/GroupCall.tsx
View File

@ -207,7 +207,7 @@ const GroupCall: FC<OwnProps & StateProps> = ({
toggleGroupCallPresentation();
});
const canPinVideo = videoParticipants.length > 1 && isLandscapeLayout;
const canPinVideo = videoParticipants.length > 1 && !isMobile;
const isLandscapeWithVideos = isLandscapeLayout && hasVideoParticipants;
const [pinnedVideo, setPinnedVideo] = useState<VideoParticipant | undefined>(undefined);
const {
@ -221,6 +221,13 @@ const GroupCall: FC<OwnProps & StateProps> = ({
pinnedVideo,
});
const handleSetPinnedVideo = useLastCallback((video: VideoParticipant | undefined) => {
setPinnedVideo(video);
if (video && !isFullscreen) {
openFullscreen();
}
});
const handleOpenFirstPresentation = useLastCallback(() => {
if (!firstPresentation) return;
@ -405,10 +412,9 @@ const GroupCall: FC<OwnProps & StateProps> = ({
key={`${layout.participantId}_${layout.type}`}
layout={layout}
canPin={canPinVideo}
setPinned={setPinnedVideo}
setPinned={handleSetPinnedVideo}
pinnedVideo={pinnedVideo}
participant={participant}
onStopSharing={handleToggleGroupCallPresentation}
/>
);
})}
@ -448,11 +454,10 @@ const GroupCall: FC<OwnProps & StateProps> = ({
key={`${layout.participantId}_${layout.type}`}
layout={layout}
canPin={canPinVideo}
setPinned={setPinnedVideo}
setPinned={handleSetPinnedVideo}
pinnedVideo={pinnedVideo}
participant={participant}
className={styles.video}
onStopSharing={handleToggleGroupCallPresentation}
/>
);
})}

1
src/components/calls/group/GroupCallParticipant.module.scss
View File

@ -15,6 +15,7 @@
.fullName {
font-weight: 500;
font-size: 1rem;
--emoji-size: 1rem;
}
}
}

11
src/components/calls/group/GroupCallParticipant.tsx
View File

@ -8,10 +8,12 @@ import { withGlobal } from '../../../global';
import type { ApiChat, ApiUser } from '../../../api/types';
import { GROUP_CALL_DEFAULT_VOLUME, GROUP_CALL_VOLUME_MULTIPLIER } from '../../../config';
import { GROUP_CALL_DEFAULT_VOLUME } from '../../../config';
import buildClassName from '../../../util/buildClassName';
import renderText from '../../common/helpers/renderText';
import { selectChat, selectUser } from '../../../global/selectors';
import formatGroupCallVolume from './helpers/formatGroupCallVolume';
import useLang from '../../../hooks/useLang';
import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
import useMenuPosition from '../../../hooks/useMenuPosition';
@ -99,8 +101,7 @@ const GroupCallParticipant: FC<OwnProps & StateProps> = ({
if (hasCustomVolume) {
return [
lang('SpeakingWithVolume',
(participant.volume! / GROUP_CALL_VOLUME_MULTIPLIER).toString())
lang('SpeakingWithVolume', formatGroupCallVolume(participant))
.replace('%%', '%'),
styles.subtitleGreen,
];
@ -118,9 +119,7 @@ const GroupCallParticipant: FC<OwnProps & StateProps> = ({
}
return participant.about ? [participant.about, ''] : [lang('Listening'), styles.subtitleBlue];
}, [
isMutedByMe, isRaiseHand, isSelf, hasCustomVolume, isMuted, isSpeaking, participant.about, participant.volume, lang,
]);
}, [isMutedByMe, isRaiseHand, hasCustomVolume, isMuted, isSpeaking, isSelf, participant, lang]);
if (!peer) {
return undefined;

20
src/components/calls/group/GroupCallParticipantList.tsx
View File

@ -35,8 +35,8 @@ const GroupCallParticipantList: FC<OwnProps & StateProps> = ({
loadMoreGroupCallParticipants,
} = getActions();
const participantsIds = useMemo(() => {
return Object.keys(participants || {});
const orderedParticipantIds = useMemo(() => {
return Object.values(participants || {}).sort(compareParticipants).map((participant) => participant.id);
}, [participants]);
const handleLoadMoreGroupCallParticipants = useLastCallback(() => {
@ -45,8 +45,8 @@ const GroupCallParticipantList: FC<OwnProps & StateProps> = ({
const [viewportIds, getMore] = useInfiniteScroll(
handleLoadMoreGroupCallParticipants,
participantsIds,
participantsIds.length >= participantsCount,
orderedParticipantIds,
orderedParticipantIds.length >= participantsCount,
);
return (
@ -61,6 +61,7 @@ const GroupCallParticipantList: FC<OwnProps & StateProps> = ({
participants[participantId] && (
<GroupCallParticipant
key={participantId}
teactOrderKey={orderedParticipantIds.indexOf(participantId)}
participant={participants[participantId]}
/>
)
@ -70,6 +71,17 @@ const GroupCallParticipantList: FC<OwnProps & StateProps> = ({
);
};
function compareFields<T>(a: T, b: T) {
return Number(b) - Number(a);
}
function compareParticipants(a: TypeGroupCallParticipant, b: TypeGroupCallParticipant) {
return compareFields(!a.isMuted, !b.isMuted)
|| compareFields(a.presentation, b.presentation)
|| compareFields(a.video, b.video)
|| compareFields(a.raiseHandRating, b.raiseHandRating);
}
export default memo(withGlobal<OwnProps>(
(global): StateProps => {
const { participantsCount, participants } = selectActiveGroupCall(global) || {};

2
src/components/calls/group/GroupCallParticipantMenu.tsx
View File

@ -226,7 +226,7 @@ const GroupCallParticipantMenu: FC<OwnProps & StateProps> = ({
{!isSelf && (
// TODO cross mic
<MenuItem
icon={isMuted ? (isAdmin ? 'allow-speak' : 'microphone-alt') : 'microphone-alt'}
icon={isMuted ? (isAdmin && shouldRaiseHand ? 'allow-speak' : 'microphone-alt') : 'microphone-alt'}
onClick={handleMute}
>
{isAdmin

36
src/components/calls/group/GroupCallParticipantVideo.module.scss
View File

@ -141,6 +141,7 @@
overflow: hidden;
white-space: nowrap;
font-size: 1rem;
--emoji-size: 1rem;
}
}
@ -153,38 +154,3 @@
.icon {
margin-left: auto;
}
.hidePresentation {
visibility: hidden;
}
.ownPresentation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.75rem;
width: 100%;
height: 100%;
background: rgb(0, 0, 0, 0.6);
font-weight: 500;
font-size: 0.875rem;
border-radius: inherit;
}
.ownPresentationText {
max-width: 70%;
text-align: center;
}
.stopSharingButton {
width: auto;
min-width: 6rem;
font-weight: 500;
max-height: 2.25rem;
}

61
src/components/calls/group/GroupCallParticipantVideo.tsx
View File

@ -8,13 +8,16 @@ import type { VideoLayout, VideoParticipant } from './hooks/useGroupCallVideoLay
import type { GroupCallParticipant as TypeGroupCallParticipant } from '../../../lib/secret-sauce';
import type { ApiChat, ApiUser } from '../../../api/types';
import { GROUP_CALL_DEFAULT_VOLUME, GROUP_CALL_VOLUME_MULTIPLIER } from '../../../config';
import { IS_CANVAS_FILTER_SUPPORTED } from '../../../util/windowEnvironment';
import { GROUP_CALL_DEFAULT_VOLUME } from '../../../config';
import { getUserStreams, THRESHOLD } from '../../../lib/secret-sauce';
import buildClassName from '../../../util/buildClassName';
import { selectChat, selectUser } from '../../../global/selectors';
import { animate } from '../../../util/animation';
import { fastRaf } from '../../../util/schedulers';
import { requestMutation } from '../../../lib/fasterdom/fasterdom';
import formatGroupCallVolume from './helpers/formatGroupCallVolume';
import fastBlur from '../../../lib/fastBlur';
import useLang from '../../../hooks/useLang';
import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
@ -30,6 +33,8 @@ import Skeleton from '../../ui/Skeleton';
import styles from './GroupCallParticipantVideo.module.scss';
const BLUR_RADIUS = 2;
const BLUR_ITERATIONS = 2;
const VIDEO_FALLBACK_UPDATE_INTERVAL = 1000;
type OwnProps = {
@ -39,7 +44,6 @@ type OwnProps = {
canPin: boolean;
participant: TypeGroupCallParticipant;
className?: string;
onStopSharing: VoidFunction;
};
type StateProps = {
@ -56,7 +60,6 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
participant,
user,
chat,
onStopSharing,
}) => {
const lang = useLang();
@ -78,7 +81,6 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
const isSpeaking = (participant.amplitude || 0) > THRESHOLD;
const isRaiseHand = Boolean(participant.raiseHandRating);
const shouldFlipVideo = type === 'video' && participant.isSelf;
const shouldHidePresentation = type === 'screen' && participant.isSelf;
const status = useMemo(() => {
if (isSelf) {
@ -98,13 +100,12 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
}
if (participant.volume && participant.volume !== GROUP_CALL_DEFAULT_VOLUME) {
return lang('SpeakingWithVolume',
(participant.volume / GROUP_CALL_VOLUME_MULTIPLIER).toString())
return lang('SpeakingWithVolume', formatGroupCallVolume(participant))
.replace('%%', '%');
}
return lang('Speaking');
}, [isSpeaking, participant.volume, lang, isSelf, isMutedByMe, isRaiseHand, isMuted]);
}, [isSelf, isMutedByMe, isRaiseHand, isMuted, isSpeaking, participant, lang]);
const prevLayoutRef = useRef<VideoLayout>();
if (!isRemoved) {
@ -156,9 +157,8 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
// every VIDEO_FALLBACK_UPDATE_INTERVAL milliseconds.
useInterval(() => {
if (!stream?.active) return;
const video = videoRef.current;
const canvas = videoFallbackRef.current;
if (!video || !canvas) return;
const video = videoRef.current!;
const canvas = videoFallbackRef.current!;
requestMutation(() => {
canvas.width = video.videoWidth;
@ -188,6 +188,9 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
return false;
}
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, thumbnail.width, thumbnail.height);
if (!IS_CANVAS_FILTER_SUPPORTED) {
fastBlur(ctx, 0, 0, thumbnail.width, thumbnail.height, BLUR_RADIUS, BLUR_ITERATIONS);
}
return true;
};
@ -271,9 +274,7 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
)}
{stream && (
<video
className={buildClassName(
styles.video, shouldFlipVideo && styles.flipped, shouldHidePresentation && styles.hidePresentation,
)}
className={buildClassName(styles.video, shouldFlipVideo && styles.flipped)}
muted
autoPlay
playsInline
@ -282,22 +283,10 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
onCanPlay={handleCanPlay}
/>
)}
{!shouldHidePresentation && (
<canvas
className={buildClassName(styles.videoFallback, shouldFlipVideo && styles.flipped)}
ref={videoFallbackRef}
/>
)}
{shouldHidePresentation && (
<div className={styles.ownPresentation}>
<div className={styles.ownPresentationText}>{lang('VoiceChat.Sharing.Placeholder')}</div>
<Button className={styles.stopSharingButton} onClick={onStopSharing}>
{lang('VoiceChat.Sharing.Stop')}
</Button>
</div>
)}
<canvas
className={buildClassName(styles.videoFallback, shouldFlipVideo && styles.flipped)}
ref={videoFallbackRef}
/>
<div className={styles.thumbnailWrapper}>
<canvas
className={buildClassName(styles.thumbnail, shouldFlipVideo && styles.flipped)}
@ -317,15 +306,13 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
<i className={buildClassName('icon', isPinned ? 'icon-unpin' : 'icon-pin')} />
</Button>
)}
{!shouldHidePresentation && (
<div className={styles.bottomPanel}>
<div className={styles.info}>
<FullNameTitle peer={user || chat!} className={styles.name} />
<div className={styles.status}>{status}</div>
</div>
<OutlinedMicrophoneIcon participant={participant} className={styles.icon} noColor />
<div className={styles.bottomPanel}>
<div className={styles.info}>
<FullNameTitle peer={user || chat!} className={styles.name} />
<div className={styles.status}>{status}</div>
</div>
)}
<OutlinedMicrophoneIcon participant={participant} className={styles.icon} noColor />
</div>
</div>
<GroupCallParticipantMenu

6
src/components/calls/group/helpers/formatGroupCallVolume.ts Normal file
View File

@ -0,0 +1,6 @@
import type { GroupCallParticipant } from '../../../../lib/secret-sauce';
import { GROUP_CALL_DEFAULT_VOLUME, GROUP_CALL_VOLUME_MULTIPLIER } from '../../../../config';
export default function formatGroupCallVolume(participant: GroupCallParticipant) {
return Math.floor((participant.volume || GROUP_CALL_DEFAULT_VOLUME) / GROUP_CALL_VOLUME_MULTIPLIER).toString();
}

4
src/components/main/Main.scss
View File

@ -22,8 +22,8 @@
--call-header-height: 2rem;
#LeftColumn, #MiddleColumn, #RightColumn-wrapper {
height: calc(100% - 2rem);
margin-top: 2rem;
height: calc(100% - var(--call-header-height));
margin-top: var(--call-header-height);
}
}

2
src/components/middle/composer/DropArea.scss
View File

@ -5,7 +5,7 @@
left: 0;
height: 100vh;
z-index: var(--z-drop-area);
padding: 80px 20px 20px;
padding: calc(80px + var(--call-header-height, 0rem)) 20px 20px;
display: flex;
flex-direction: column;

4
src/components/ui/FloatingActionButton.scss
View File

@ -2,7 +2,7 @@
position: absolute;
right: 1rem;
bottom: 1rem;
transform: translateY(calc(5rem - var(--call-header-height, 0rem)));
transform: translateY(5rem);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
@ -11,7 +11,7 @@
}
&.revealed {
transform: translateY(calc(0rem - var(--call-header-height, 0rem)));
transform: translateY(0);
}
&[dir="rtl"] {

5
src/styles/_mixins.scss
View File

@ -9,6 +9,11 @@
padding-inline-end: calc($padding - var(--scrollbar-width));
}
@mixin adapt-margin-to-scrollbar($margin) {
margin-inline-end: calc($margin - var(--scrollbar-width));
}
@mixin reset-range() {
input[type="range"] {
-webkit-appearance: none;

1
src/styles/_variables.scss
View File

@ -200,6 +200,7 @@ $color-message-reaction-chosen-hover-own: #3f9d4b;
--right-column-width: 26.5rem;
--header-height: 3.5rem;
--custom-emoji-size: 1.25rem;
--emoji-size: 1.25rem;
--custom-emoji-border-radius: 0;
--symbol-menu-width: 24rem;

10
src/styles/index.scss
View File

@ -107,6 +107,10 @@ body.cursor-ew-resize {
height: 0;
}
#middle-column-portals {
top: calc(0rem - var(--call-header-height, 0rem));
}
.hidden {
visibility: hidden;
}
@ -188,11 +192,11 @@ body:not(.is-ios) {
.emoji-small {
background: no-repeat;
background-size: 1.25rem;
background-size: var(--emoji-size);
color: transparent;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
width: var(--emoji-size);
height: var(--emoji-size);
margin-inline-end: 1px;
overflow: hidden;
flex-shrink: 0;