Add voice broadcast recording body (#9316)

* Add voice broadcast recording body

* Change icon element; update css variables

* Update Icon-test snapshots

src/voice-broadcast/components/VoiceBroadcastBody.tsx

@@ -0,0 +1,70 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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 from "react";
+import { MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState, VoiceBroadcastRecordingBody } from "..";
+import { IBodyProps } from "../../components/views/messages/IBodyProps";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+
+/**
+ * Temporary component to display voice broadcasts.
+ * XXX: To be refactored to some fancy store/hook/controller architecture.
+ */
+export const VoiceBroadcastBody: React.FC<IBodyProps> = ({
+    getRelationsForEvent,
+    mxEvent,
+}) => {
+    const client = MatrixClientPeg.get();
+    const relations = getRelationsForEvent?.(
+        mxEvent.getId(),
+        RelationType.Reference,
+        VoiceBroadcastInfoEventType,
+    );
+    const relatedEvents = relations?.getRelations();
+    const live = !relatedEvents?.find((event: MatrixEvent) => {
+        return event.getContent()?.state === VoiceBroadcastInfoState.Stopped;
+    });
+
+    const stopVoiceBroadcast = () => {
+        if (!live) return;
+
+        client.sendStateEvent(
+            mxEvent.getRoomId(),
+            VoiceBroadcastInfoEventType,
+            {
+                state: VoiceBroadcastInfoState.Stopped,
+                ["m.relates_to"]: {
+                    rel_type: RelationType.Reference,
+                    event_id: mxEvent.getId(),
+                },
+            },
+            client.getUserId(),
+        );
+    };
+
+    const room = client.getRoom(mxEvent.getRoomId());
+    const senderId = mxEvent.getSender();
+    const sender = mxEvent.sender;
+    return <VoiceBroadcastRecordingBody
+        onClick={stopVoiceBroadcast}
+        live={live}
+        member={sender}
+        userId={senderId}
+        title={`${sender?.name ?? senderId} • ${room.name}`}
+    />;
+};

src/voice-broadcast/components/atoms/LiveBadge.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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 from "react";
+
+import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
+import { _t } from "../../../languageHandler";
+
+export const LiveBadge: React.FC = () => {
+    return <div className="mx_LiveBadge">
+        <Icon type={IconType.Live} colour={IconColour.LiveBadge} />
+        { _t("Live") }
+    </div>;
+};

src/voice-broadcast/components/index.ts

@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+
+export * from "./atoms/LiveBadge";
+export * from "./molecules/VoiceBroadcastRecordingBody";
+export * from "./VoiceBroadcastBody";

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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, { MouseEventHandler } from "react";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+
+import { LiveBadge } from "../..";
+import MemberAvatar from "../../../components/views/avatars/MemberAvatar";
+
+interface VoiceBroadcastRecordingBodyProps {
+    live: boolean;
+    member: RoomMember;
+    onClick: MouseEventHandler<HTMLDivElement>;
+    title: string;
+    userId: string;
+}
+
+export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({
+    live,
+    member,
+    onClick,
+    title,
+    userId,
+}) => {
+    const liveBadge = live
+        ? <LiveBadge />
+        : null;
+
+    return (
+        <div
+            className="mx_VoiceBroadcastRecordingBody"
+            onClick={onClick}
+        >
+            <MemberAvatar member={member} fallbackUserId={userId} />
+            <div className="mx_VoiceBroadcastRecordingBody_content">
+                <div className="mx_VoiceBroadcastRecordingBody_title">
+                    { title }
+                </div>
+            </div>
+            { liveBadge }
+        </div>
+    );
+};

src/voice-broadcast/index.ts

@@ -14,4 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/**
+ * Voice Broadcast module
+ * {@link https://github.com/vector-im/element-meta/discussions/632}
+ */
+
+import { RelationType } from "matrix-js-sdk/src/matrix";
+
+export * from "./components";
+export * from "./utils";
+
 export const VoiceBroadcastInfoEventType = "io.element.voice_broadcast_info";
+
+export enum VoiceBroadcastInfoState {
+    Started = "started",
+    Paused = "paused",
+    Running = "running",
+    Stopped = "stopped",
+}
+
+export interface VoiceBroadcastInfoEventContent {
+    state: VoiceBroadcastInfoState;
+    chunk_length: number;
+    ["m.relates_to"]?: {
+        rel_type: RelationType;
+        event_id: string;
+    };
+}

src/voice-broadcast/utils/index.ts

@@ -0,0 +1,17 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+
+export * from "./shouldDisplayAsVoiceBroadcastTile";

src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
+
+export const shouldDisplayAsVoiceBroadcastTile = (event: MatrixEvent) => (
+    event.getType?.() === VoiceBroadcastInfoEventType
+    && (
+        event.getContent?.()?.state === VoiceBroadcastInfoState.Started
+        || event.isRedacted()
+    )
+);