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

res/css/_components.scss

@@ -182,6 +182,7 @@
 @import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MJitsiWidgetEvent.scss";
 @import "./views/messages/_MNoticeBody.scss";
+@import "./views/messages/_MPollBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";

res/css/views/messages/_MPollBody.scss

@@ -0,0 +1,109 @@
+/*
+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.
+*/
+
+.mx_MPollBody {
+    margin-top: 8px;
+
+    h2 {
+        font-weight: 600;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        margin-top: 0;
+        margin-bottom: 8px;
+    }
+
+    h2::before {
+        content: '';
+        position: relative;
+        display: inline-block;
+        margin-right: 12px;
+        top: 3px;
+        left: 3px;
+        height: 20px;
+        width: 20px;
+        background-color: $secondary-content;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        mask-image: url('$(res)/img/element-icons/room/composer/poll.svg');
+    }
+
+    .mx_MPollBody_option {
+        border: 1px solid $quinary-content;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        padding: 6px;
+        max-width: 550px;
+        background-color: $background;
+
+        .mx_StyledRadioButton {
+            margin-bottom: 8px;
+        }
+
+        .mx_StyledRadioButton_content {
+            padding-top: 2px;
+        }
+
+        .mx_MPollBody_optionVoteCount {
+            position: absolute;
+            color: $secondary-content;
+            right: 4px;
+            font-size: $font-12px;
+        }
+
+        .mx_MPollBody_popularityBackground {
+            width: calc(100% - 4px);
+            height: 8px;
+            margin-right: 12px;
+            border-radius: 8px;
+            background-color: $system;
+
+            .mx_MPollBody_popularityAmount {
+                width: 0%;
+                height: 8px;
+                border-radius: 8px;
+                background-color: $quaternary-content;
+            }
+        }
+    }
+
+    .mx_MPollBody_option:last-child {
+        margin-bottom: 8px;
+    }
+
+    .mx_MPollBody_option_checked {
+        border-color: $accent-color;
+    }
+
+    .mx_StyledRadioButton_checked input[type="radio"] + div {
+        border-width: 2px;
+        border-color: $accent-color;
+        background-color: $accent-color;
+        background-image: url('$(res)/img/element-icons/check-white.svg');
+        background-size: 12px;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        div {
+            visibility: hidden;
+        }
+    }
+
+    .mx_MPollBody_totalVotes {
+        color: $secondary-content;
+        font-size: $font-12px;
+    }
+}

res/img/element-icons/check-white.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.54541 5.8884L4.80299 9.24274L12.4545 1.36395" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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")) {

src/components/views/rooms/EventTile.tsx

@@ -65,12 +65,14 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import Toolbar from '../../../accessibility/Toolbar';
+import { POLL_START_EVENT_TYPE } from '../../../polls/consts';
 import { RovingAccessibleTooltipButton } from '../../../accessibility/roving/RovingAccessibleTooltipButton';
 import { ThreadListContextMenu } from '../context_menus/ThreadListContextMenu';
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
     [EventType.Sticker]: 'messages.MessageEvent',
+    [POLL_START_EVENT_TYPE.name]: 'messages.MessageEvent',
     [EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion',
     [EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion',
     [EventType.CallInvite]: 'messages.CallEvent',

src/i18n/strings/en_EN.json

@@ -2021,6 +2021,8 @@
     "Declining …": "Declining …",
     "%(name)s wants to verify": "%(name)s wants to verify",
     "You sent a verification request": "You sent a verification request",
+    "%(number)s votes": "%(number)s votes",
+    "Based on %(total)s votes": "Based on %(total)s votes",
     "Error decrypting video": "Error decrypting video",
     "Error processing voice message": "Error processing voice message",
     "Add reaction": "Add reaction",

src/polls/consts.ts

@@ -24,16 +24,18 @@ export const POLL_KIND_UNDISCLOSED = new UnstableValue("m.poll.undisclosed", "or
 // TODO: [TravisR] Use extensible events library when ready
 const TEXT_NODE_TYPE = "org.matrix.msc1767.text";
 
+export interface IPollAnswer extends IContent {
+    id: string;
+    [TEXT_NODE_TYPE]: string;
+}
+
 export interface IPollContent extends IContent {
     [POLL_START_EVENT_TYPE.name]: {
         kind: string; // disclosed or undisclosed (untypeable for now)
         question: {
             [TEXT_NODE_TYPE]: string;
         };
-        answers: {
+        answers: IPollAnswer[];
-            id: string;
-            [TEXT_NODE_TYPE]: string;
-        }[];
     };
     [TEXT_NODE_TYPE]: string;
 }

src/utils/EventUtils.ts

@@ -24,6 +24,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { Thread } from 'matrix-js-sdk/src/models/thread';
 import { logger } from 'matrix-js-sdk/src/logger';
+import { POLL_START_EVENT_TYPE } from '../polls/consts';
 
 /**
  * Returns whether an event should allow actions like reply, reactions, edit, etc.
@@ -136,7 +137,8 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         !isLeftAlignedBubbleMessage &&
         eventType !== EventType.RoomMessage &&
         eventType !== EventType.Sticker &&
-        eventType !== EventType.RoomCreate
+        eventType !== EventType.RoomCreate &&
+        eventType !== POLL_START_EVENT_TYPE.name
     );
 
     // If we're showing hidden events in the timeline, we should use the