feat(Polls): Display creator name for polls

css/_polls.scss

@@ -21,6 +21,12 @@
     margin-bottom: 8px;
 }
 
+.poll-creator {
+    color: #C2C2C2;
+    font-weight: 600;
+    margin: 4px 0 16px 0;
+}
+
 .poll-answer-container {
     background: #3D3D3D;
     border-radius: 3px;
@@ -134,7 +140,7 @@ ol.poll-result-list {
 .poll-question {
     font-size: 16px;
     font-weight: 600;
-    margin-bottom: 16px;
+    line-height: 26px;
 }
 
 .poll-answer-voters {

lang/main.json

@@ -634,6 +634,7 @@
     "passwordSetRemotely": "Set by another participant",
     "passwordDigitsOnly": "Up to {{number}} digits",
     "polls": {
+        "by": "By {{ name }}",
         "create": {
             "addOption": "Add option",
             "answerPlaceholder": "Option {{index}}",

react/features/base/util/hooks.js

@@ -0,0 +1,13 @@
+// @flow
+import { useSelector } from 'react-redux';
+
+/**
+ * Takes a redux selector and binds it to specific values.
+ *
+ * @param {Function} selector - The selector function.
+ * @param {...any} args - The values to bind to.
+ * @returns {any}
+ */
+export function useBoundSelector(selector: Function, ...args: any[]) {
+    return useSelector(state => selector(state, ...args));
+}

react/features/polls/components/AbstractPollAnswer.js

@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { sendAnalytics, createPollEvent } from '../../analytics';
 import { getLocalParticipant, getParticipantById } from '../../base/participants';
+import { useBoundSelector } from '../../base/util/hooks';
 import { registerVote, setVoteChanging } from '../actions';
 import { COMMAND_ANSWER_POLL } from '../constants';
 import type { Poll } from '../types';
@@ -24,6 +25,7 @@ type InputProps = {
  **/
 export type AbstractProps = {
     checkBoxStates: Function,
+    creatorName: string,
     poll: Poll,
     setCheckbox: Function,
     skipAnswer: Function,
@@ -56,6 +58,7 @@ const AbstractPollAnswer = (Component: AbstractComponent<AbstractProps>) => (pro
 
         return new Array(poll.answers.length).fill(false);
     });
+    const participant = useBoundSelector(getParticipantById, poll.senderId);
 
     const setCheckbox = useCallback((index, state) => {
         const newCheckBoxStates = [ ...checkBoxStates ];
@@ -67,7 +70,7 @@ const AbstractPollAnswer = (Component: AbstractComponent<AbstractProps>) => (pro
 
     const dispatch = useDispatch();
 
-    const localParticipant = useSelector(state => getParticipantById(state, localId));
+    const localParticipant = useBoundSelector(getParticipantById, localId);
     const localName: string = localParticipant.name ? localParticipant.name : 'Fellow Jitster';
 
     const submitAnswer = useCallback(() => {
@@ -99,6 +102,7 @@ const AbstractPollAnswer = (Component: AbstractComponent<AbstractProps>) => (pro
 
     return (<Component
         checkBoxStates = { checkBoxStates }
+        creatorName = { participant ? participant.name : '' }
         poll = { poll }
         setCheckbox = { setCheckbox }
         skipAnswer = { skipAnswer }

react/features/polls/components/AbstractPollResults.js

@@ -6,6 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { sendAnalytics, createPollEvent } from '../../analytics';
+import { getParticipantById } from '../../base/participants/functions';
+import { useBoundSelector } from '../../base/util/hooks';
 import { setVoteChanging } from '../actions';
 import { getPoll } from '../functions';
 
@@ -33,6 +35,7 @@ export type AnswerInfo = {
 export type AbstractProps = {
     answers: Array<AnswerInfo>,
     changeVote: Function,
+    creatorName: string,
     showDetails: boolean,
     question: string,
     t: Function,
@@ -51,6 +54,7 @@ const AbstractPollResults = (Component: AbstractComponent<AbstractProps>) => (pr
     const { pollId } = props;
 
     const pollDetails = useSelector(getPoll(pollId));
+    const participant = useBoundSelector(getParticipantById, pollDetails.senderId);
 
     const [ showDetails, setShowDetails ] = useState(false);
     const toggleIsDetailed = useCallback(() => {
@@ -105,6 +109,7 @@ const AbstractPollResults = (Component: AbstractComponent<AbstractProps>) => (pr
         <Component
             answers = { answers }
             changeVote = { changeVote }
+            creatorName = { participant ? participant.name : '' }
             haveVoted = { pollDetails.lastVote !== null }
             question = { pollDetails.question }
             showDetails = { showDetails }

react/features/polls/components/web/PollAnswer.js

@@ -9,6 +9,7 @@ import type { AbstractProps } from '../AbstractPollAnswer';
 
 const PollAnswer = (props: AbstractProps) => {
     const {
+        creatorName,
         checkBoxStates,
         poll,
         setCheckbox,
@@ -25,6 +26,9 @@ const PollAnswer = (props: AbstractProps) => {
                 <div className = 'poll-question'>
                     <span>{ poll.question }</span>
                 </div>
+                <div className = 'poll-creator'>
+                    { t('polls.by', { name: creatorName }) }
+                </div>
             </div>
             <ol className = 'poll-answer-list'>
                 {

react/features/polls/components/web/PollResults.js

@@ -16,6 +16,7 @@ const PollResults = (props: AbstractProps) => {
     const {
         answers,
         changeVote,
+        creatorName,
         haveVoted,
         showDetails,
         question,
@@ -29,6 +30,9 @@ const PollResults = (props: AbstractProps) => {
                 <div className = 'poll-question'>
                     <strong>{ question }</strong>
                 </div>
+                <div className = 'poll-creator'>
+                    { t('polls.by', { name: creatorName }) }
+                </div>
             </div>
             <ol className = 'poll-result-list'>
                 {answers.map(({ name, percentage, voters, voterCount }, index) =>