Group Calls: More fixes (#3534)

src/components/calls/group/GroupCall.module.scss

@@ -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 {

src/components/calls/group/GroupCall.tsx

@@ -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}
             />
           );
         })}

src/components/calls/group/GroupCallParticipant.module.scss

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

src/components/calls/group/GroupCallParticipant.tsx

@@ -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',
+        lang('SpeakingWithVolume', formatGroupCallVolume(participant))
-          (participant.volume! / GROUP_CALL_VOLUME_MULTIPLIER).toString())
           .replace('%%', '%'),
         styles.subtitleGreen,
       ];
@@ -118,9 +119,7 @@ const GroupCallParticipant: FC<OwnProps & StateProps> = ({
     }
 
     return participant.about ? [participant.about, ''] : [lang('Listening'), styles.subtitleBlue];
-  }, [
+  }, [isMutedByMe, isRaiseHand, hasCustomVolume, isMuted, isSpeaking, isSelf, participant, lang]);
-    isMutedByMe, isRaiseHand, isSelf, hasCustomVolume, isMuted, isSpeaking, participant.about, participant.volume, lang,
-  ]);
 
   if (!peer) {
     return undefined;

src/components/calls/group/GroupCallParticipantList.tsx

@@ -35,8 +35,8 @@ const GroupCallParticipantList: FC<OwnProps & StateProps> = ({
     loadMoreGroupCallParticipants,
   } = getActions();
 
-  const participantsIds = useMemo(() => {
+  const orderedParticipantIds = useMemo(() => {
-    return Object.keys(participants || {});
+    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,
+    orderedParticipantIds,
-    participantsIds.length >= participantsCount,
+    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) || {};

src/components/calls/group/GroupCallParticipantMenu.tsx

@@ -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

src/components/calls/group/GroupCallParticipantVideo.module.scss

@@ -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;
-}

src/components/calls/group/GroupCallParticipantVideo.tsx

@@ -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',
+      return lang('SpeakingWithVolume', formatGroupCallVolume(participant))
-        (participant.volume / GROUP_CALL_VOLUME_MULTIPLIER).toString())
         .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 video = videoRef.current!;
-    const canvas = videoFallbackRef.current;
+    const canvas = videoFallbackRef.current!;
-    if (!video || !canvas) return;
 
     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(
+            className={buildClassName(styles.video, shouldFlipVideo && styles.flipped)}
-              styles.video, shouldFlipVideo && styles.flipped, shouldHidePresentation && styles.hidePresentation,
-            )}
             muted
             autoPlay
             playsInline
@@ -282,22 +283,10 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
             onCanPlay={handleCanPlay}
           />
         )}
-        {!shouldHidePresentation && (
+        <canvas
-          <canvas
+          className={buildClassName(styles.videoFallback, shouldFlipVideo && styles.flipped)}
-            className={buildClassName(styles.videoFallback, shouldFlipVideo && styles.flipped)}
+          ref={videoFallbackRef}
-            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>
-        )}
-
         <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.bottomPanel}>
+          <div className={styles.info}>
-            <div className={styles.info}>
+            <FullNameTitle peer={user || chat!} className={styles.name} />
-              <FullNameTitle peer={user || chat!} className={styles.name} />
+            <div className={styles.status}>{status}</div>
-              <div className={styles.status}>{status}</div>
-            </div>
-            <OutlinedMicrophoneIcon participant={participant} className={styles.icon} noColor />
           </div>
-        )}
+          <OutlinedMicrophoneIcon participant={participant} className={styles.icon} noColor />
+        </div>
       </div>
 
       <GroupCallParticipantMenu

src/components/calls/group/helpers/formatGroupCallVolume.ts

@@ -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();
+}

src/components/main/Main.scss

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

src/components/middle/composer/DropArea.scss

@@ -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;

src/components/ui/FloatingActionButton.scss

@@ -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"] {

src/styles/_mixins.scss

@@ -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;

src/styles/_variables.scss

@@ -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;

src/styles/index.scss

@@ -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;
+  width: var(--emoji-size);
-  height: 1.25rem;
+  height: var(--emoji-size);
   margin-inline-end: 1px;
   overflow: hidden;
   flex-shrink: 0;