Voice rooms prototype

res/css/_components.scss

@@ -324,3 +324,4 @@
 @import "./views/voip/_DialPadModal.scss";
 @import "./views/voip/_PiPContainer.scss";
 @import "./views/voip/_VideoFeed.scss";
+@import "./views/voip/_VoiceChannelRadio.scss";

res/css/views/voip/_VoiceChannelRadio.scss

@@ -0,0 +1,121 @@
+/*
+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.
+*/
+
+.mx_VoiceChannelRadio {
+    background-color: $system;
+
+    > .mx_VoiceChannelRadio_statusBar {
+        display: flex;
+        padding: 12px 16px;
+        align-items: center;
+        gap: 12px;
+
+        > .mx_VoiceChannelRadio_titleContainer {
+            flex-grow: 1;
+
+            > .mx_VoiceChannelRadio_status {
+                font-size: $font-15px;
+                color: $accent;
+
+                &::before {
+                    content: '';
+                    display: inline-block;
+                    margin-right: 4px;
+                    width: 11px;
+                    height: 11px;
+                    background-color: $accent;
+                    mask-image: url('$(res)/img/voip/signal-bars.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                }
+            }
+
+            > .mx_VoiceChannelRadio_name {
+                font-size: $font-13px;
+                color: $secondary-content;
+            }
+        }
+
+        > .mx_VoiceChannelRadio_disconnectButton::before {
+            content: '';
+            display: block;
+            width: 36px;
+            height: 36px;
+            background-color: $tertiary-content;
+            mask-image: url('$(res)/img/element-icons/call/hangup.svg');
+            mask-position: center;
+            mask-size: 24px;
+            mask-repeat: no-repeat;
+        }
+    }
+
+    > .mx_VoiceChannelRadio_controlBar {
+        display: flex;
+        border-top: 1px solid $quinary-content;
+        padding: 12px 16px;
+        align-items: center;
+        justify-content: space-between;
+
+        > .mx_AccessibleButton {
+            font-size: $font-15px;
+            padding: 6px 0;
+
+            &.mx_VoiceChannelRadio_button_active {
+                padding: 6px 12px;
+                background-color: $quinary-content;
+                border-radius: 8px;
+                font-weight: 600;
+            }
+        }
+
+        > .mx_VoiceChannelRadio_videoButton::before {
+            content: '';
+            display: inline-block;
+            margin-right: 8px;
+            width: 16px;
+            height: 16px;
+            background-color: $primary-content;
+            vertical-align: sub;
+            mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+        }
+
+        > .mx_VoiceChannelRadio_videoButton.mx_VoiceChannelRadio_button_active::before {
+            mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
+        }
+
+        > .mx_VoiceChannelRadio_audioButton::before {
+            content: '';
+            display: inline-block;
+            margin-right: 4px;
+            width: 16px;
+            height: 16px;
+            background-color: $primary-content;
+            vertical-align: sub;
+            mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+        }
+
+        > .mx_VoiceChannelRadio_audioButton.mx_VoiceChannelRadio_button_active::before {
+            mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
+        }
+    }
+}

src/components/structures/LeftPanel.tsx

@@ -41,6 +41,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import IndicatorScrollbar from "./IndicatorScrollbar";
 import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import SettingsStore from "../../settings/SettingsStore";
+import VoiceChannelRadio from "../views/voip/VoiceChannelRadio";
 import UserMenu from "./UserMenu";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
@@ -443,6 +444,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             { roomList }
                         </div>
                     </div>
+                    { SettingsStore.getValue("feature_voice_rooms") && <VoiceChannelRadio /> }
                 </aside>
             </div>
         );

src/components/views/voip/VoiceChannelRadio.tsx

@@ -0,0 +1,91 @@
+/*
+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, { FC, useState, useContext } from "react";
+import classNames from "classnames";
+
+import { _t } from "../../../languageHandler";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import VoiceChannelStore, { VoiceChannelEvent } from "../../../stores/VoiceChannelStore";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+
+const _VoiceChannelRadio: FC<{ roomId: string }> = ({ roomId }) => {
+    const cli = useContext(MatrixClientContext);
+    const room = cli.getRoom(roomId);
+    const store = VoiceChannelStore.instance;
+
+    const [audioMuted, setAudioMuted] = useState<boolean>(store.audioMuted);
+    const [videoMuted, setVideoMuted] = useState<boolean>(store.videoMuted);
+
+    useEventEmitter(store, VoiceChannelEvent.MuteAudio, () => setAudioMuted(true));
+    useEventEmitter(store, VoiceChannelEvent.UnmuteAudio, () => setAudioMuted(false));
+    useEventEmitter(store, VoiceChannelEvent.MuteVideo, () => setVideoMuted(true));
+    useEventEmitter(store, VoiceChannelEvent.UnmuteVideo, () => setVideoMuted(false));
+
+    return <div className="mx_VoiceChannelRadio">
+        <div className="mx_VoiceChannelRadio_statusBar">
+            <DecoratedRoomAvatar room={room} avatarSize={36} />
+            <div className="mx_VoiceChannelRadio_titleContainer">
+                <div className="mx_VoiceChannelRadio_status">{ _t("Connected") }</div>
+                <div className="mx_VoiceChannelRadio_name">{ room.name }</div>
+            </div>
+            <AccessibleTooltipButton
+                className="mx_VoiceChannelRadio_disconnectButton"
+                title={_t("Disconnect")}
+                onClick={() => store.disconnect()}
+            />
+        </div>
+        <div className="mx_VoiceChannelRadio_controlBar">
+            <AccessibleButton
+                className={classNames({
+                    "mx_VoiceChannelRadio_videoButton": true,
+                    "mx_VoiceChannelRadio_button_active": !videoMuted,
+                })}
+                onClick={() => videoMuted ? store.unmuteVideo() : store.muteVideo()}
+            >
+                { videoMuted ? _t("Video off") : _t("Video") }
+            </AccessibleButton>
+            <AccessibleButton
+                className={classNames({
+                    "mx_VoiceChannelRadio_audioButton": true,
+                    "mx_VoiceChannelRadio_button_active": !audioMuted,
+                })}
+                onClick={() => audioMuted ? store.unmuteAudio() : store.muteAudio()}
+            >
+                { audioMuted ? _t("Mic off") : _t("Mic") }
+            </AccessibleButton>
+        </div>
+    </div>;
+};
+
+const VoiceChannelRadio: FC<{}> = () => {
+    const store = VoiceChannelStore.instance;
+
+    const [activeChannel, setActiveChannel] = useState<string>(VoiceChannelStore.instance.roomId);
+    useEventEmitter(store, VoiceChannelEvent.Connect, () =>
+        setActiveChannel(VoiceChannelStore.instance.roomId),
+    );
+    useEventEmitter(store, VoiceChannelEvent.Disconnect, () =>
+        setActiveChannel(null),
+    );
+
+    return activeChannel ? <_VoiceChannelRadio roomId={activeChannel} /> : null;
+};
+
+export default VoiceChannelRadio;

src/i18n/strings/en_EN.json

@@ -1016,6 +1016,12 @@
     "Your camera is turned off": "Your camera is turned off",
     "Your camera is still enabled": "Your camera is still enabled",
     "Dial": "Dial",
+    "Connected": "Connected",
+    "Disconnect": "Disconnect",
+    "Video off": "Video off",
+    "Video": "Video",
+    "Mic off": "Mic off",
+    "Mic": "Mic",
     "Dialpad": "Dialpad",
     "Mute the microphone": "Mute the microphone",
     "Unmute the microphone": "Unmute the microphone",
@@ -1367,7 +1373,6 @@
     "The identity server you have chosen does not have any terms of service.": "The identity server you have chosen does not have any terms of service.",
     "Disconnect identity server": "Disconnect identity server",
     "Disconnect from the identity server <idserver />?": "Disconnect from the identity server <idserver />?",
-    "Disconnect": "Disconnect",
     "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.": "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.",
     "You should:": "You should:",
     "check your browser plugins for anything that might block the identity server (such as Privacy Badger)": "check your browser plugins for anything that might block the identity server (such as Privacy Badger)",
@@ -1866,7 +1871,6 @@
     "Join": "Join",
     "Voice room": "Voice room",
     "Connecting…": "Connecting…",
-    "Connected": "Connected",
     "%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.",
     "%(count)s unread messages including mentions.|one": "1 unread mention.",
     "%(count)s unread messages.|other": "%(count)s unread messages.",