Merge branch 'develop' into feat/add-formating-buttons-to-wysiwyg

src/Lifecycle.ts

@@ -699,7 +699,7 @@ async function persistCredentials(credentials: IMatrixClientCreds): Promise<void
         } catch (e) {
             localStorage.setItem("mx_access_token", credentials.accessToken);
         }
-        if (localStorage.getItem("mx_has_pickle_key")) {
+        if (localStorage.getItem("mx_has_pickle_key") === "true") {
             logger.error("Expected a pickle key, but none provided.  Encryption may not work.");
         }
     }

src/components/atoms/Icon.tsx

@@ -17,13 +17,19 @@ limitations under the License.
 import React from "react";
 
 import liveIcon from "../../../res/img/element-icons/live.svg";
+import pauseIcon from "../../../res/img/element-icons/pause.svg";
+import playIcon from "../../../res/img/element-icons/play.svg";
 
 export enum IconType {
     Live,
+    Pause,
+    Play,
 }
 
 const iconTypeMap = new Map([
     [IconType.Live, liveIcon],
+    [IconType.Pause, pauseIcon],
+    [IconType.Play, playIcon],
 ]);
 
 export enum IconColour {

src/components/views/messages/MessageEvent.tsx

@@ -58,6 +58,10 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper
     isSeeingThroughMessageHiddenForModeration?: boolean;
 }
 
+interface State {
+    voiceBroadcastEnabled: boolean;
+}
+
 export interface IOperableEventTile {
     getEventTileOps(): IEventTileOps;
 }
@@ -81,7 +85,6 @@ const baseEvTypes = new Map<string, React.ComponentType<Partial<IBodyProps>>>([
     [M_POLL_START.altName, MPollBody],
     [M_BEACON_INFO.name, MBeaconBody],
     [M_BEACON_INFO.altName, MBeaconBody],
-    [VoiceBroadcastInfoEventType, VoiceBroadcastBody],
 ]);
 
 export default class MessageEvent extends React.Component<IProps, State> implements IMediaBody, IOperableEventTile {

src/i18n/strings/en_EN.json

@@ -638,6 +638,8 @@
     "See <b>%(msgtype)s</b> messages posted to this room": "See <b>%(msgtype)s</b> messages posted to this room",
     "See <b>%(msgtype)s</b> messages posted to your active room": "See <b>%(msgtype)s</b> messages posted to your active room",
     "Live": "Live",
+    "pause voice broadcast": "pause voice broadcast",
+    "resume voice broadcast": "resume voice broadcast",
     "Voice broadcast": "Voice broadcast",
     "Cannot reach homeserver": "Cannot reach homeserver",
     "Ensure you have a stable internet connection, or get in touch with the server admin": "Ensure you have a stable internet connection, or get in touch with the server admin",

src/voice-broadcast/components/VoiceBroadcastBody.tsx

@@ -15,19 +15,42 @@ limitations under the License.
 */
 
 import React from "react";
+import { MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
 
 import {
     VoiceBroadcastRecordingBody,
     VoiceBroadcastRecordingsStore,
+    shouldDisplayAsVoiceBroadcastRecordingTile,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastPlaybacksStore,
+    VoiceBroadcastPlaybackBody,
+    VoiceBroadcastInfoState,
 } from "..";
 import { IBodyProps } from "../../components/views/messages/IBodyProps";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 export const VoiceBroadcastBody: React.FC<IBodyProps> = ({ mxEvent }) => {
     const client = MatrixClientPeg.get();
-    const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client);
+    const room = client.getRoom(mxEvent.getRoomId());
+    const relations = room?.getUnfilteredTimelineSet()?.relations?.getChildEventsForEvent(
+        mxEvent.getId(),
+        RelationType.Reference,
+        VoiceBroadcastInfoEventType,
+    );
+    const relatedEvents = relations?.getRelations();
+    const state = !relatedEvents?.find((event: MatrixEvent) => {
+        return event.getContent()?.state === VoiceBroadcastInfoState.Stopped;
+    }) ? VoiceBroadcastInfoState.Started : VoiceBroadcastInfoState.Stopped;
 
-    return <VoiceBroadcastRecordingBody
-        recording={recording}
+    if (shouldDisplayAsVoiceBroadcastRecordingTile(state, client, mxEvent)) {
+        const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client);
+        return <VoiceBroadcastRecordingBody
+            recording={recording}
+        />;
+    }
+
+    const playback = VoiceBroadcastPlaybacksStore.instance().getByInfoEvent(mxEvent);
+    return <VoiceBroadcastPlaybackBody
+        playback={playback}
     />;
 };

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

@@ -0,0 +1,53 @@
+/*
+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 { VoiceBroadcastPlaybackState } from "../..";
+import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import { _t } from "../../../languageHandler";
+
+const stateIconMap = new Map([
+    [VoiceBroadcastPlaybackState.Playing, IconType.Pause],
+    [VoiceBroadcastPlaybackState.Paused, IconType.Play],
+    [VoiceBroadcastPlaybackState.Stopped, IconType.Play],
+]);
+
+interface Props {
+    onClick: () => void;
+    state: VoiceBroadcastPlaybackState;
+}
+
+export const PlaybackControlButton: React.FC<Props> = ({
+    onClick,
+    state,
+}) => {
+    const ariaLabel = state === VoiceBroadcastPlaybackState.Playing
+        ? _t("pause voice broadcast")
+        : _t("resume voice broadcast");
+
+    return <AccessibleButton
+        className="mx_BroadcastPlaybackControlButton"
+        onClick={onClick}
+        aria-label={ariaLabel}
+    >
+        <Icon
+            colour={IconColour.CompoundSecondaryContent}
+            type={stateIconMap.get(state)}
+        />
+    </AccessibleButton>;
+};

src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.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 from "react";
+
+import {
+    PlaybackControlButton,
+    VoiceBroadcastHeader,
+    VoiceBroadcastPlayback,
+} from "../..";
+import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
+
+interface VoiceBroadcastPlaybackBodyProps {
+    playback: VoiceBroadcastPlayback;
+}
+
+export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProps> = ({
+    playback,
+}) => {
+    const {
+        roomName,
+        sender,
+        toggle,
+        playbackState,
+    } = useVoiceBroadcastPlayback(playback);
+
+    return (
+        <div className="mx_VoiceBroadcastPlaybackBody">
+            <VoiceBroadcastHeader
+                live={false}
+                sender={sender}
+                roomName={roomName}
+                showBroadcast={true}
+            />
+            <div className="mx_VoiceBroadcastPlaybackBody_controls">
+                <PlaybackControlButton
+                    onClick={toggle}
+                    state={playbackState}
+                />
+            </div>
+        </div>
+    );
+};

src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts

@@ -0,0 +1,49 @@
+/*
+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 { useState } from "react";
+
+import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import {
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackEvent,
+    VoiceBroadcastPlaybackState,
+} from "..";
+
+export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
+    const client = MatrixClientPeg.get();
+    const room = client.getRoom(playback.infoEvent.getRoomId());
+    const playbackToggle = () => {
+        playback.toggle();
+    };
+
+    const [playbackState, setPlaybackState] = useState(playback.getState());
+    useTypedEventEmitter(
+        playback,
+        VoiceBroadcastPlaybackEvent.StateChanged,
+        (state: VoiceBroadcastPlaybackState, _playback: VoiceBroadcastPlayback) => {
+            setPlaybackState(state);
+        },
+    );
+
+    return {
+        roomName: room.name,
+        sender: playback.infoEvent.sender,
+        toggle: playbackToggle,
+        playbackState,
+    };
+};

src/voice-broadcast/index.ts

@@ -21,13 +21,18 @@ limitations under the License.
 
 import { RelationType } from "matrix-js-sdk/src/matrix";
 
+export * from "./models/VoiceBroadcastPlayback";
+export * from "./models/VoiceBroadcastRecording";
 export * from "./audio/VoiceBroadcastRecorder";
 export * from "./components/VoiceBroadcastBody";
 export * from "./components/atoms/LiveBadge";
+export * from "./components/atoms/PlaybackControlButton";
 export * from "./components/atoms/VoiceBroadcastHeader";
+export * from "./components/molecules/VoiceBroadcastPlaybackBody";
 export * from "./components/molecules/VoiceBroadcastRecordingBody";
-export * from "./models/VoiceBroadcastRecording";
+export * from "./stores/VoiceBroadcastPlaybacksStore";
 export * from "./stores/VoiceBroadcastRecordingsStore";
+export * from "./utils/shouldDisplayAsVoiceBroadcastRecordingTile";
 export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
 export * from "./utils/startNewVoiceBroadcastRecording";
 export * from "./hooks/useVoiceBroadcastRecording";

src/voice-broadcast/models/VoiceBroadcastPlayback.ts

@@ -0,0 +1,76 @@
+/*
+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 { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
+
+import { IDestroyable } from "../../utils/IDestroyable";
+
+export enum VoiceBroadcastPlaybackState {
+    Paused,
+    Playing,
+    Stopped,
+}
+
+export enum VoiceBroadcastPlaybackEvent {
+    StateChanged = "state_changed",
+}
+
+interface EventMap {
+    [VoiceBroadcastPlaybackEvent.StateChanged]: (state: VoiceBroadcastPlaybackState) => void;
+}
+
+export class VoiceBroadcastPlayback
+    extends TypedEventEmitter<VoiceBroadcastPlaybackEvent, EventMap>
+    implements IDestroyable {
+    private state = VoiceBroadcastPlaybackState.Stopped;
+
+    public constructor(
+        public readonly infoEvent: MatrixEvent,
+    ) {
+        super();
+    }
+
+    public start() {
+        this.setState(VoiceBroadcastPlaybackState.Playing);
+    }
+
+    public stop() {
+        this.setState(VoiceBroadcastPlaybackState.Stopped);
+    }
+
+    public toggle() {
+        if (this.state === VoiceBroadcastPlaybackState.Stopped) {
+            this.setState(VoiceBroadcastPlaybackState.Playing);
+            return;
+        }
+
+        this.setState(VoiceBroadcastPlaybackState.Stopped);
+    }
+
+    public getState(): VoiceBroadcastPlaybackState {
+        return this.state;
+    }
+
+    private setState(state: VoiceBroadcastPlaybackState): void {
+        this.state = state;
+        this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state);
+    }
+
+    public destroy(): void {
+        this.removeAllListeners();
+    }
+}

src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts

@@ -0,0 +1,71 @@
+/*
+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 { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
+
+import { VoiceBroadcastPlayback } from "..";
+
+export enum VoiceBroadcastPlaybacksStoreEvent {
+    CurrentChanged = "current_changed",
+}
+
+interface EventMap {
+    [VoiceBroadcastPlaybacksStoreEvent.CurrentChanged]: (recording: VoiceBroadcastPlayback) => void;
+}
+
+/**
+ * This store provides access to the current and specific Voice Broadcast playbacks.
+ */
+export class VoiceBroadcastPlaybacksStore extends TypedEventEmitter<VoiceBroadcastPlaybacksStoreEvent, EventMap> {
+    private current: VoiceBroadcastPlayback | null;
+    private playbacks = new Map<string, VoiceBroadcastPlayback>();
+
+    public constructor() {
+        super();
+    }
+
+    public setCurrent(current: VoiceBroadcastPlayback): void {
+        if (this.current === current) return;
+
+        this.current = current;
+        this.playbacks.set(current.infoEvent.getId(), current);
+        this.emit(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, current);
+    }
+
+    public getCurrent(): VoiceBroadcastPlayback {
+        return this.current;
+    }
+
+    public getByInfoEvent(infoEvent: MatrixEvent): VoiceBroadcastPlayback {
+        const infoEventId = infoEvent.getId();
+
+        if (!this.playbacks.has(infoEventId)) {
+            this.playbacks.set(infoEventId, new VoiceBroadcastPlayback(infoEvent));
+        }
+
+        return this.playbacks.get(infoEventId);
+    }
+
+    public static readonly _instance = new VoiceBroadcastPlaybacksStore();
+
+    /**
+     * TODO Michael W: replace when https://github.com/matrix-org/matrix-react-sdk/pull/9293 has been merged
+     */
+    public static instance() {
+        return VoiceBroadcastPlaybacksStore._instance;
+    }
+}

src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile.ts

@@ -0,0 +1,30 @@
+/*
+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 { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoState } from "..";
+
+export const shouldDisplayAsVoiceBroadcastRecordingTile = (
+    state: VoiceBroadcastInfoState,
+    client: MatrixClient,
+    event: MatrixEvent,
+): boolean => {
+    const userId = client.getUserId();
+    return !!userId
+        && userId === event.getSender()
+        && state !== VoiceBroadcastInfoState.Stopped;
+};