Remove widget support for CallViewHeader

src/components/views/voip/CallView/CallViewHeader.tsx

@@ -16,26 +16,20 @@ limitations under the License.
 import { CallType } from 'matrix-js-sdk/src/webrtc/call';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import React from 'react';
-import { isUndefined } from 'lodash';
 import { _t } from '../../../../languageHandler';
 import RoomAvatar from '../../avatars/RoomAvatar';
 import AccessibleButton from '../../elements/AccessibleButton';
 import dis from '../../../../dispatcher/dispatcher';
-import WidgetAvatar from '../../avatars/WidgetAvatar';
-import { IApp } from '../../../../stores/WidgetStore';
-import WidgetUtils from '../../../../utils/WidgetUtils';
 
-const callTypeTranslationByType: Record<CallType | 'widget', (app?: IApp) => string> = {
+const callTypeTranslationByType: Record<CallType, () => string> = {
     [CallType.Video]: () => _t("Video Call"),
     [CallType.Voice]: () => _t("Voice Call"),
-    'widget': (app: IApp) => WidgetUtils.getWidgetName(app),
 };
 
 interface CallViewHeaderProps {
     pipMode: boolean;
-    type: CallType | 'widget';
+    type: CallType;
     callRooms?: Room[];
-    app?: IApp;
     onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }
 
@@ -63,7 +57,7 @@ const onExpandClick = (roomId: string) => {
 type CallControlsProps = Pick<CallViewHeaderProps, 'pipMode' | 'type'> & {
   roomId: string;
 };
-function CallControls({ pipMode = false, type, roomId }: CallControlsProps) {
+function CallViewHeaderControls({ pipMode = false, type, roomId }: CallControlsProps): JSX.Element {
     return <div className="mx_CallView_header_controls">
         { (pipMode && type === CallType.Video) &&
       <div className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
@@ -76,7 +70,7 @@ function CallControls({ pipMode = false, type, roomId }: CallControlsProps) {
         /> }
     </div>;
 }
-function SecondaryCallInfo({ callRoom }: {callRoom: Room}) {
+function SecondaryCallInfo({ callRoom }: {callRoom: Room}): JSX.Element {
     return <span className="mx_CallView_header_secondaryCallInfo">
         <AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
             <RoomAvatar room={callRoom} height={16} width={16} />
@@ -87,49 +81,48 @@ function SecondaryCallInfo({ callRoom }: {callRoom: Room}) {
     </span>;
 }
 
-function getAvatarBasedOnRoomType(roomOrWidget: Room | IApp) {
+function CallTypeIcon({ type }: {type: CallType}) {
-    if (roomOrWidget instanceof Room) {
+    const classes = {
-        return <RoomAvatar room={roomOrWidget} height={32} width={32} />;
+        [CallType.Video]: 'mx_CallView_header_callTypeIcon_video',
-    } else if (!isUndefined(roomOrWidget)) {
+        [CallType.Voice]: 'mx_CallView_header_callTypeIcon_voice',
-        return <WidgetAvatar app={roomOrWidget} height={32} width={32} />;
+    };
-    }
+    const iconClass = classes[type] ?? '';
-    return null;
+    return <div className={`mx_CallView_header_callTypeIcon ${iconClass}`} />;
 }
 
 export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
     type,
     pipMode = false,
     callRooms = [],
-    app,
     onPipMouseDown,
 }) => {
     const [callRoom, onHoldCallRoom] = callRooms;
-    const callTypeText = callTypeTranslationByType[type](app);
+    const callTypeText = callTypeTranslationByType[type];
-    const avatar = getAvatarBasedOnRoomType(callRoom ?? app);
+    const callRoomName = callRoom.name;
-    const callRoomName = type === 'widget' ? callTypeText : callRoom.name;
+    const { roomId } = callRoom;
-    const roomId = app ? app.roomId : callRoom.roomId;
     if (!pipMode) {
         return <div className="mx_CallView_header">
-            <div className="mx_CallView_header_phoneIcon" />
+            <CallTypeIcon type={type} />
             <span className="mx_CallView_header_callType">{ callTypeText }</span>
-            <CallControls roomId={roomId} pipMode={pipMode} type={type} />
+            <CallViewHeaderControls roomId={roomId} pipMode={pipMode} type={type} />
         </div>;
     }
-    return (<div
+    return (
-        className="mx_CallView_header"
+        <div
-        onMouseDown={onPipMouseDown}
+            className="mx_CallView_header"
-    >
+            onMouseDown={onPipMouseDown}
-        <AccessibleButton onClick={() => onRoomAvatarClick(roomId)}>
+        >
-            { avatar }
+            <AccessibleButton onClick={() => onRoomAvatarClick(roomId)}>
-        </AccessibleButton>
+                <RoomAvatar room={callRoom} height={32} width={32} />;
-        <div className="mx_CallView_header_callInfo">
+            </AccessibleButton>
-            <div className="mx_CallView_header_roomName">{ callRoomName }</div>
+            <div className="mx_CallView_header_callInfo">
-            <div className="mx_CallView_header_callTypeSmall">
+                <div className="mx_CallView_header_roomName">{ callRoomName }</div>
-                { callTypeText }
+                <div className="mx_CallView_header_callTypeSmall">
-                { onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }
+                    { callTypeText }
+                    { onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }
+                </div>
             </div>
+            <CallViewHeaderControls roomId={roomId} pipMode={pipMode} type={type} />
         </div>
-        <CallControls roomId={roomId} pipMode={pipMode} type={type} />
-    </div>
     );
 };

src/components/views/voip/PictureInPictureDragger.tsx

@@ -13,6 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import React, { createRef } from 'react';
 import UIStore from '../../../stores/UIStore';
 import { IApp } from '../../../stores/WidgetStore';