Group calling: fix participant hover state

stylesheets/_modules.scss

@@ -6266,7 +6266,7 @@ button.module-image__border-overlay:focus {
 
   &__remote-video-enabled {
     background-color: $color-gray-95;
-    height: 100vh;
+    height: 100%;
     width: 100%;
   }
 
@@ -6327,15 +6327,21 @@ button.module-image__border-overlay:focus {
 
     &--title {
       @include font-caption;
-      background: linear-gradient($color-black-alpha-40, transparent);
+      background: linear-gradient(
+        180deg,
+        $color-black 0%,
+        $color-black-alpha-60 100%
+      );
       bottom: 0;
       display: flex;
       padding: 6px;
       position: absolute;
       width: 100%;
+      z-index: 2;
     }
 
     &--contact-name {
+      color: $color-white;
       margin-right: 20px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -6522,6 +6528,7 @@ button.module-image__border-overlay:focus {
       display: flex;
       height: 120px;
       justify-content: center;
+      overflow: hidden;
       position: relative;
       width: 100%;
 

ts/components/CallScreen.tsx

@@ -224,7 +224,7 @@ export const CallScreen: React.FC<PropsType> = ({
               {call.callMode === CallMode.Group &&
               !call.remoteParticipants.length
                 ? i18n('calling__in-this-call--zero')
-                : conversation.title}
+                : ''}
               {call.callMode === CallMode.Direct &&
                 renderHeaderMessage(
                   i18n,

ts/components/CallingPip.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { Tooltip, TooltipTheme } from './Tooltip';
 import { CallingPipRemoteVideo } from './CallingPipRemoteVideo';
 import { LocalizerType } from '../types/Util';
 import { VideoFrameSource } from '../types/Calling';
@@ -184,16 +183,14 @@ export const CallingPip = ({
           }}
           type="button"
         />
-        <Tooltip content={i18n('calling__pip--off')} theme={TooltipTheme.Dark}>
+        <button
-          <button
+          aria-label={i18n('calling__pip--off')}
-            aria-label={i18n('calling__pip--off')}
+          className="module-calling-pip__button--pip"
-            className="module-calling-pip__button--pip"
+          onClick={togglePip}
-            onClick={togglePip}
+          type="button"
-            type="button"
+        >
-          >
+          <div />
-            <div />
+        </button>
-          </button>
-        </Tooltip>
       </div>
     </div>
   );

ts/components/GroupCallRemoteParticipant.tsx

@@ -172,6 +172,8 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       };
     }
 
+    const showHover = hasHover && !props.isInPip;
+
     return (
       <div
         className="module-ongoing-call__group-call-remote-participant"
@@ -179,7 +181,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
         onMouseLeave={() => setHover(false)}
         style={containerStyles}
       >
-        {hasHover && (
+        {showHover && (
           <div
             className={classNames(
               'module-ongoing-call__group-call-remote-participant--title',

ts/util/lint/exceptions.json

@@ -14409,7 +14409,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallingPip.js",
     "line": "    const videoContainerRef = react_1.default.useRef(null);",
-    "lineNumber": 16,
+    "lineNumber": 15,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Element is measured. Its HTML is not used."
@@ -14418,7 +14418,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallingPip.js",
     "line": "    const localVideoRef = react_1.default.useRef(null);",
-    "lineNumber": 17,
+    "lineNumber": 16,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Used to get the local video element for rendering."
@@ -14427,7 +14427,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallingPip.tsx",
     "line": "  const videoContainerRef = React.useRef(null);",
-    "lineNumber": 42,
+    "lineNumber": 41,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Element is measured. Its HTML is not used."
@@ -14436,7 +14436,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallingPip.tsx",
     "line": "  const localVideoRef = React.useRef(null);",
-    "lineNumber": 43,
+    "lineNumber": 42,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Used to get the local video element for rendering."