imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update video rooms to new design specs (#8207)

Browse source 
* Remove radio component

* "Voice room" → "video room"

* Remove interactivity from video room tiles

* Update connection state when joining via widget

* Simplify room header buttons for video rooms

* Split out video room creation into a separate menu option

* Simplify room options for video rooms

* Update video room tile layout

* Tell the Jitsi widget whether it's a video channel

* Update tests

* "Voice" → "video" in more places

* Fix tests

* Re-add frame to immersive Jitsi widgets

* Comment ack

* Make updateDevices more readable

* Type FacePile
This commit is contained in:
Robin 2022-04-01 10:36:10 -04:00 • committed by GitHub
parent 020c1c6f31
commit 1f64835fab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 798 additions and 1305 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/utils/VoiceChannelUtils.ts → src/utils/VideoChannelUtils.ts
View file

@ -22,26 +22,26 @@ import WidgetStore, { IApp } from "../stores/WidgetStore";
import { WidgetType } from "../widgets/WidgetType";
import WidgetUtils from "./WidgetUtils";
export const VOICE_CHANNEL = "io.element.voice";
export const VOICE_CHANNEL_MEMBER = "io.element.voice.member";
export const VIDEO_CHANNEL = "io.element.video";
export const VIDEO_CHANNEL_MEMBER = "io.element.video.member";
export interface IVoiceChannelMemberContent {
export interface IVideoChannelMemberContent {
// Connected device IDs
devices: string[];
}
export const getVoiceChannel = (roomId: string): IApp => {
export const getVideoChannel = (roomId: string): IApp => {
const apps = WidgetStore.instance.getApps(roomId);
return apps.find(app => WidgetType.JITSI.matches(app.type) && app.id === VOICE_CHANNEL);
return apps.find(app => WidgetType.JITSI.matches(app.type) && app.id === VIDEO_CHANNEL);
};
export const addVoiceChannel = async (roomId: string, roomName: string) => {
await WidgetUtils.addJitsiWidget(roomId, CallType.Voice, "Voice channel", VOICE_CHANNEL, roomName);
export const addVideoChannel = async (roomId: string, roomName: string) => {
await WidgetUtils.addJitsiWidget(roomId, CallType.Video, "Video channel", VIDEO_CHANNEL, roomName);
};
export const getConnectedMembers = (state: RoomState): RoomMember[] =>
state.getStateEvents(VOICE_CHANNEL_MEMBER)
state.getStateEvents(VIDEO_CHANNEL_MEMBER)
// Must have a device connected and still be joined to the room
.filter(e => e.getContent<IVoiceChannelMemberContent>().devices?.length)
.filter(e => e.getContent<IVideoChannelMemberContent>().devices?.length)
.map(e => state.getMember(e.getStateKey()))
.filter(member => member.membership === "join");

3
src/utils/WidgetUtils.ts
View file

@ -36,6 +36,7 @@ import { Jitsi } from "../widgets/Jitsi";
import { objectClone } from "./objects";
import { _t } from "../languageHandler";
import { IApp } from "../stores/WidgetStore";
import { VIDEO_CHANNEL } from "./VideoChannelUtils";
// How long we wait for the state event echo to come back from the server
// before waitFor[Room/User]Widget rejects its promise
@ -469,6 +470,7 @@ export default class WidgetUtils {
conferenceId: confId,
roomName: oobRoomName ?? MatrixClientPeg.get().getRoom(roomId)?.name,
isAudioOnly: type === CallType.Voice,
isVideoChannel: widgetId === VIDEO_CHANNEL,
domain,
auth,
});
@ -515,6 +517,7 @@ export default class WidgetUtils {
'conferenceDomain=$domain',
'conferenceId=$conferenceId',
'isAudioOnly=$isAudioOnly',
'isVideoChannel=$isVideoChannel',
'displayName=$matrix_display_name',
'avatarUrl=$matrix_avatar_url',
'userId=$matrix_user_id',

4
src/utils/space.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
import React from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomType } from "matrix-js-sdk/src/@types/event";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { JoinRule } from "matrix-js-sdk/src/@types/partials";
@ -92,12 +93,13 @@ export const showAddExistingRooms = (space: Room): void => {
);
};
export const showCreateNewRoom = async (space: Room): Promise<boolean> => {
export const showCreateNewRoom = async (space: Room, type?: RoomType): Promise<boolean> => {
const modal = Modal.createTrackedDialog<[boolean, IOpts]>(
"Space Landing",
"Create Room",
CreateRoomDialog,
{
type,
defaultPublic: space.getJoinRule() === JoinRule.Public,
parentSpace: space,
},