diff --git a/src/components/views/voip/CallView/CallViewHeader.tsx b/src/components/views/voip/CallView/CallViewHeader.tsx index 4650e65853..d721fe30e3 100644 --- a/src/components/views/voip/CallView/CallViewHeader.tsx +++ b/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 string> = { +const callTypeTranslationByType: Record 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) => void; } @@ -63,7 +57,7 @@ const onExpandClick = (roomId: string) => { type CallControlsProps = Pick & { roomId: string; }; -function CallControls({ pipMode = false, type, roomId }: CallControlsProps) { +function CallViewHeaderControls({ pipMode = false, type, roomId }: CallControlsProps): JSX.Element { return
{ (pipMode && type === CallType.Video) &&
}
; } -function SecondaryCallInfo({ callRoom }: {callRoom: Room}) { +function SecondaryCallInfo({ callRoom }: {callRoom: Room}): JSX.Element { return onRoomAvatarClick(callRoom.roomId)}> @@ -87,49 +81,48 @@ function SecondaryCallInfo({ callRoom }: {callRoom: Room}) { ; } -function getAvatarBasedOnRoomType(roomOrWidget: Room | IApp) { - if (roomOrWidget instanceof Room) { - return ; - } else if (!isUndefined(roomOrWidget)) { - return ; - } - return null; +function CallTypeIcon({ type }: {type: CallType}) { + const classes = { + [CallType.Video]: 'mx_CallView_header_callTypeIcon_video', + [CallType.Voice]: 'mx_CallView_header_callTypeIcon_voice', + }; + const iconClass = classes[type] ?? ''; + return
; } export const CallViewHeader: React.FC = ({ type, pipMode = false, callRooms = [], - app, onPipMouseDown, }) => { const [callRoom, onHoldCallRoom] = callRooms; - const callTypeText = callTypeTranslationByType[type](app); - const avatar = getAvatarBasedOnRoomType(callRoom ?? app); - const callRoomName = type === 'widget' ? callTypeText : callRoom.name; - const roomId = app ? app.roomId : callRoom.roomId; + const callTypeText = callTypeTranslationByType[type]; + const callRoomName = callRoom.name; + const { roomId } = callRoom; if (!pipMode) { return
-
+ { callTypeText } - +
; } - return (
- onRoomAvatarClick(roomId)}> - { avatar } - -
-
{ callRoomName }
-
- { callTypeText } - { onHoldCallRoom && } + return ( +
+ onRoomAvatarClick(roomId)}> + ; + +
+
{ callRoomName }
+
+ { callTypeText } + { onHoldCallRoom && } +
+
- -
); }; diff --git a/src/components/views/voip/PictureInPictureDragger.tsx b/src/components/views/voip/PictureInPictureDragger.tsx index 1ef7867992..d55d431e8f 100644 --- a/src/components/views/voip/PictureInPictureDragger.tsx +++ b/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';