diff --git a/css/_polls.scss b/css/_polls.scss index 607bfc737..8e9c7c2c4 100644 --- a/css/_polls.scss +++ b/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 { diff --git a/lang/main.json b/lang/main.json index 83168203c..56443f5f5 100644 --- a/lang/main.json +++ b/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}}", diff --git a/react/features/base/util/hooks.js b/react/features/base/util/hooks.js new file mode 100644 index 000000000..c5a1dd77e --- /dev/null +++ b/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)); +} diff --git a/react/features/polls/components/AbstractPollAnswer.js b/react/features/polls/components/AbstractPollAnswer.js index e0f5e7cbc..1c5d257c1 100644 --- a/react/features/polls/components/AbstractPollAnswer.js +++ b/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) => (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) => (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) => (pro return (, changeVote: Function, + creatorName: string, showDetails: boolean, question: string, t: Function, @@ -51,6 +54,7 @@ const AbstractPollResults = (Component: AbstractComponent) => (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) => (pr { const { + creatorName, checkBoxStates, poll, setCheckbox, @@ -25,6 +26,9 @@ const PollAnswer = (props: AbstractProps) => {
{ poll.question }
+
+ { t('polls.by', { name: creatorName }) } +
    { diff --git a/react/features/polls/components/web/PollResults.js b/react/features/polls/components/web/PollResults.js index 336891206..0e7f31bb3 100644 --- a/react/features/polls/components/web/PollResults.js +++ b/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) => {
    { question }
    +
    + { t('polls.by', { name: creatorName }) } +
      {answers.map(({ name, percentage, voters, voterCount }, index) =>