Display started polls in timeline (without votes) (behind labs setting) (#7088)

* Display started polls in timeline (without votes)

* Update i18n info

* Keep original background colour of poll options, even on hover

* Show full avatar above a poll message

src/components/views/messages/MPollBody.tsx

@@ -0,0 +1,93 @@
+/*
+Copyright 2021 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 { _t } from '../../../languageHandler';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IBodyProps } from "./IBodyProps";
+import { IPollAnswer, IPollContent, POLL_START_EVENT_TYPE } from '../../../polls/consts';
+import StyledRadioButton from '../elements/StyledRadioButton';
+
+// TODO: [andyb] Use extensible events library when ready
+const TEXT_NODE_TYPE = "org.matrix.msc1767.text";
+
+interface IState {
+    selected?: string;
+}
+
+@replaceableComponent("views.messages.MPollBody")
+export default class MPollBody extends React.Component<IBodyProps, IState> {
+    constructor(props: IBodyProps) {
+        super(props);
+
+        this.state = {
+            selected: null,
+        };
+    }
+
+    private selectOption(answerId: string) {
+        this.setState({ selected: answerId });
+    }
+
+    private onOptionSelected = (e: React.FormEvent<HTMLInputElement>): void => {
+        this.selectOption(e.currentTarget.value);
+    };
+
+    render() {
+        const pollStart: IPollContent =
+            this.props.mxEvent.getContent()[POLL_START_EVENT_TYPE.name];
+        const pollId = this.props.mxEvent.getId();
+
+        return <div className="mx_MPollBody">
+            <h2>{ pollStart.question[TEXT_NODE_TYPE] }</h2>
+            <div className="mx_MPollBody_allOptions">
+                {
+                    pollStart.answers.map((answer: IPollAnswer) => {
+                        const checked = this.state.selected === answer.id;
+                        const classNames = `mx_MPollBody_option${
+                            checked ? " mx_MPollBody_option_checked": ""
+                        }`;
+                        return <div
+                            key={answer.id}
+                            className={classNames}
+                            onClick={() => this.selectOption(answer.id)}
+                        >
+                            <StyledRadioButton
+                                name={`poll_answer_select-${pollId}`}
+                                value={answer.id}
+                                checked={this.state.selected === answer.id}
+                                onChange={this.onOptionSelected}
+                            >
+                                <div className="mx_MPollBody_optionVoteCount">
+                                    { _t("%(number)s votes", { number: 0 }) }
+                                </div>
+                                <div className="mx_MPollBody_optionText">
+                                    { answer[TEXT_NODE_TYPE] }
+                                </div>
+                            </StyledRadioButton>
+                            <div className="mx_MPollBody_popularityBackground">
+                                <div className="mx_MPollBody_popularityAmount" />
+                            </div>
+                        </div>;
+                    })
+                }
+            </div>
+            <div className="mx_MPollBody_totalVotes">
+                { _t( "Based on %(total)s votes", { total: 0 } ) }
+            </div>
+        </div>;
+    }
+}

src/components/views/messages/MessageEvent.tsx

@@ -27,6 +27,7 @@ import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { ReactAnyComponent } from "../../../@types/common";
 import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
 import { IBodyProps } from "./IBodyProps";
+import { POLL_START_EVENT_TYPE } from '../../../polls/consts';
 
 // onMessageAllowed is handled internally
 interface IProps extends Omit<IBodyProps, "onMessageAllowed"> {
@@ -111,6 +112,15 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
                 // Fallback to UnknownBody otherwise if not redacted
                 BodyType = UnknownBody;
             }
+
+            if (type && type === POLL_START_EVENT_TYPE.name) {
+                // TODO: this can all disappear when Polls comes out of labs -
+                // instead, add something like this into this.evTypes:
+                // [EventType.Poll]: "messages.MPollBody"
+                if (SettingsStore.getValue("feature_polls")) {
+                    BodyType = sdk.getComponent('messages.MPollBody');
+                }
+            }
         }
 
         if (SettingsStore.getValue("feature_mjolnir")) {