From 8c82c0f56e551bde05782732e1289564adb4c405 Mon Sep 17 00:00:00 2001 From: Jade Guiton Date: Sat, 14 Aug 2021 15:29:42 +0200 Subject: [PATCH] feat(polls) Ability to create polls inside Jitsi (#9166) * feat(polls) Added boilerplate code for polls feature * feat(polls) Implemented simple poll creation and answer modals in web app feat(polls) Added button to create a poll in toolbar feat(polls) Added Modal to answer an incoming poll feat(polls) Implemented basic client-side sending and reception of polls feat(polls): linked Poll creation to poll answering fix(polls) Linted code feat(polls.create) Added fields for question and answers (#3) * feat(polls.create) Added fields for question and answers + keyboard navigation * feat(polls.create) Minor changes, added some comments feat(PollAnswer Component): Component to display modal to answer poll #1 (#2) * fix(polls) removing necessity of current_poll_id variable * fix(polls) linting, polls are now updated when an answer is sent * feat(polls answer) added translation * fix(polls answer) remove extra comments, fixed typo * improvement (polls answer) use useSelector instead of mapStateToProps. cleaner code * fix (polls create) renamed sender to senderId * fix (polls answer) turned arrow function into useCallBack feat(PollResults Component): Component to display poll results (#1) * feat(PollResults Component): fist version of the component * feat(detailed votes): Display the detailed results of a poll * feat(Poll results): Use display name instead of ids in detailed results mode * fix(Poll): change title to question * fix(Poll type): import Poll type from types.js * fix(Poll): change title to question * fix(Poll): get participants out of the map * fix(Poll): replace filter with find feat(polls.create) Added "+" and "x" buttons in poll creation form + improved keyboard navigation a bit feat (polls) Answer modal now display results in real time after validation or skip feat(polls.create) Minor improvements to poll creation form feat(poll result) Added default message when trying to display no answer fix (polls) result windows is now small by default fix (polls) sanitizes imports to allow startup on react native * feat(polls.native) Implemented native toolbar button & poll create modal feat( poll native) added poll creation button in native toolbar improvement(polls) only one file used for PollCreateButton feat (polls native) added an example dialog feat (polls native) added possibility to create and delete options in poll creation improvement (polls) better styling for PollCreateDialog * feat(polls) Added ability to drag&drop answers in web poll creation form * feat(polls) Added native poll answer modal + chat integration, refactored components Merge branch 'polls-native' of https://github.com/jade-guiton/jitsi-meet into polls-native improvement (poll) Better styling for poll answer, now uses icons feat(poll.PollResults): Add native version of PollResults feat(poll.PollResults): Post results in chat in Native fix(poll.PollResults): Fix linter error in ChatMessage feat(polls.native) Improved styling for native poll answer dialog (required some internal changes) * fix(polls) Heavily refactored and added bars to poll results, other minor changes fix(poll.create): Move title to Dialog title feat(poll.create) Minor changes to poll creation / answer dialogs fix(poll.create) Refactored and improved translations feat(poll) Improved CSS for modals in web version fix(poll.pollcreate): Fix button size in native fix(polls) Refactored poll results component and other minor changes fix (polls) remove double import refactor(poll) Heavily refactored poll results (native + web) feat(polls.results) Added percentage bars and vote counts in web poll results, minor changes to mobile poll results * fix(polls) Fixes and linting fix(polls) Reformatted and fixed some linter and Flow errors fix(polls.results) Fixed voter list border appearing with 0 voters * feat(polls): Add modal with detailed votes that can be open from the result summary in the chat * fix(polls) Fixes, refactorings, and minor design changes feat(polls.results): Refactored poll chat message and improved design in web app feat(polls.results) Same as last commit, but for mobile version refactor(polls.results) Refactored PollResultsMessage and removed unnecessary prop in PollResults fix(polls.results) Fixed all remaining linter and Flow errors improvement(polls) removed console logs, added comments fix (polls) linting fix(polls.results) Fixed bug with poll chat message displaying the wrong name feat(polls.results) Minor improvement on poll results display (web) fix(poll.results): Use getParticipantDisplayName to get participant name and avoid empty string as name * Feat(poll.results): Remember voters names to display after they left the conference (#10) * feat(poll.results): Add the sender name in Poll object to remember names if participants leave the conference. Names are also updated if changed * refactor(poll.results): Refactor the memorization of the names of voters to use the same logic as in the chat * refactor(poll.results): use Map instead of Array.From( * refactor(poll.answer): change the way names are stored in poll answers to persist if participant left the call * Update react/features/polls/components/AbstractPollAnswerDialog.js * Update react/features/polls/components/AbstractPollCreateDialog.js * refactor(poll.answer): use voterName instead of senderName to avoid confusion with senderId the id of the sender of the poll * improvement(polls) Simplified poll answer voter name logic Co-authored-by: Fabien Zucchet Co-authored-by: Jade Guiton * fix(poll.native): Fix UI overflow when asking long questions & long options in the mobile app (#11) Co-authored-by: Fabien Zucchet * fix(polls) Fixed close button behavior in answer and results dialog (#12) * fix(polls) Fixed close button behavior in answer and results dialog * fix(polls) Fixed linter error * fix(polls) Added a poll queue to avoid overwriting open modals (#13) * fix(polls) Added a poll queue to avoid overwriting open modals * fix(polls) Updated documentation for action RECEIVE_POLL * Refactor(poll.chatresults): Add message in chat with hidden results until the participant has answered (#14) * refactor(poll.chat): Display poll results in chat when the poll is created instead of when the participant has ansered * refactor(poll.chat): Hide results until the participant has answered, skipped or canceled a responde to the poll * Use getParticipantDisplayName instead of only getStore() * Hide results also in native * fix(polls) Fixed previous merge Co-authored-by: Fabien Zucchet Co-authored-by: Jade Guiton * minor improvements (polls) refactor (polls) uniformized string for command names refactor (polls) changed pollId type to number everywhere * feat(polls) Added persistence to polls using sendMessage instead of sendCommandOnce (#16) * feat(polls) Using sendMessage instead of sendCommandOnce, switched poll IDs to string, and ability to receive old polls from backend * improvement(polls) Linted everything, fixed Flow errors, and added Prosody plugin for polls * improvement(polls) Historic polls are now displayed in chronological order * (polls) Minor improvements (#17) * renaming (polls) Renaming senderId -> voterID for voters * improvement (polls) sender's name is now provided with poll * comments (polls) updated comments for senderName types * fix(polls) Finished merging with json-messages feature * fix(polls) Fixed incorrect json-message sent with 0 polls Co-authored-by: Jade Guiton * Move polls to tab (#23) * Draft(polls): Move polls to polls-pane ; first version for web * Draft(polls): Move polls to polls-pane ; clean styled.js and remove Participant objects * fix missing newline at the end of file * Change behaviour to allow answer poll later * Fix(polls): change pollId type from number to string for consistency * feat(polls-pane): Ability to answer to a poll in polls-pane * feat(polls-pane): Ability to create to a poll in polls-pane * feat (polls.pane) display a notification when a new poll arrives * refactor(polls-pane): Update CSS to have a design closer to the mockups * fix(poll.vote count): Fix votes counting when computing percentage * fix(poll.vote count): Fix votes counting when computing percentage * refresh fork with jitsi/jitsi-meet * design (polls) Better look for poll creation * refactor(polls pane): Move polls-pane as a chat tab * Remove the first version of the polls-pane and the button to open it * Fix notifications and typo * Translate new polls tab in chat * Change polls_pane to polls-pane * Remove unless functions * Remove usage of styled.js * Improve responsiveness * Separate web and native logic * Remove Create a Poll button in web toolbox * improvement (polls) added auto scrolling to bottom when a new poll arrives * Add tabs to swicth between polls and chat in native * Add AbstractPollsPane * Add AbstractPollCreate * Add AbstractPollAnswer * Add PollAnswer, PollItem and PollList for native * Add PollCreate for native * Remove dialogs in web and native * Remove dialog queue * Remove useless files * Move _polls.scss outside dialog folder * Add possibility to skip answer * Add (useless for now) see details link * Add possibility to show detailed results for a poll * Resize progress bar to make details display * refactor, design (polls) better style to native design chat * fix (polls) Removed unecessary files * translate (polls) added french translation to empty polls * design fix (polls.native) 'show details' now correctly switch between progress bar and voters mode * Change See detailed results for Show details and add cursor: pointer * Fix progress bars not aligned with text * fix (polls.native) added autoselection of newly created option * Remove poll answer * improvement(polls.create) Improved web poll creation form marginally * improvement(polls.change) Simplified answer removal by reusing poll-answer command * fix linter * Fix(translation): update translation Co-authored-by: Fabien Zucchet Co-authored-by: spineki Co-authored-by: Fabien Zucchet * Merge pull request #22 from jade-guiton/polls-with-notification feat (polls) chat notification badge now display the sum of unread messages and unread polls fix(translation): Fix missing translation Fix flow error * Cleaned up, fixed, and uniformized translations * Small improvements to PollAnswer and PollResult + Much refactoring Specifically: - "Change vote" button now says "Vote" if voting was skipped - Clicking on "Change vote" resets the voting form to the last submitted answers instead of a blank slate - The "answered" field of Polls was replaced by "showResults" and "lastVote" - The "setAnsweredStatus" action was replaced by "registerVote" and "retractVote" - Some newly unreachable/useless code was removed - "showDetails" state is now handled by AbstractPollResults instead of PollItem * fix(polls tab): change tab underline color to #525252 * fix(poll create): Enforce at least two options to create a poll * fix(poll create): change 'remove option' color to #E04757 * fix(poll create): Update Poll create CSS to adapt to design * fix(poll answer): Adapt CSS to make poll answer closer to mockup * fix(poll result): Udpdate poll result CSS to match mockups * fix(poll result): Udpdate poll result CSS to match mockups * fix(poll create): Display 'remove option' only when there is at least 3 options * fix(polls button): Add hover, active, focus and disabled state to polls buttons * Last improvements for web * Native design fixes * Fix rebase issue in land/main.json * Fix french translation after rebase * Fixmobile behaviour * Fixed keyboard navigation in web poll creation form * Fixed Flow error related to "no polls" icon in PollsList * fix(polls): Enabled polls Prosody module in Debian config files * doc(polls) Added comments to the Prosody module code * fix(polls): Switched from using an internal LJM event to ones from the public API * Capitalize I of setIsPollsTabFocused * extract the 2 button modes into a const * remove extra new lines * Rename CLOSE_POLL_TAB for POLL_TAB_CLOSED for clarity * Rename answers2 for answersParsed for clarity * use switch instead of if/else chain * improve syntax for localId fetching * Refactor: Use BUTTON_MODE.CONTAINED variable instead of 'contained' * Disable send poll button if not enough data is provided in the form (#30) * Feat: Add notification badge on chat and poll tabs (#31) * Feat: Add notification badge on chat and poll tabs * Add badge equivalent for native * Update displayNameForm text to mention polls (#34) * Disable polls UI with a config in config.js (#33) * Change remove option text color from red to grey (#32) Co-authored-by: spineki Co-authored-by: Fabien Zucchet Co-authored-by: Fabien Zucchet <80532941+fabienzucchet@users.noreply.github.com> Co-authored-by: Fabien Zucchet --- config.js | 3 + css/_chat.scss | 38 ++ css/_polls.scss | 448 ++++++++++++++++++ css/main.scss | 1 + .../prosody.cfg.lua-jvb.example | 1 + lang/main-fr.json | 42 +- lang/main.json | 42 +- react/features/app/middlewares.any.js | 2 + react/features/app/reducers.any.js | 1 + react/features/base/config/configWhitelist.js | 1 + .../dialog/components/native/BaseDialog.js | 21 +- .../dialog/components/native/ConfirmDialog.js | 10 +- .../base/dialog/components/native/styles.js | 12 +- .../dialog/components/web/StatelessDialog.js | 11 +- react/features/chat/actionTypes.js | 10 + react/features/chat/actions.any.js | 16 +- .../features/chat/components/AbstractChat.js | 72 ++- react/features/chat/components/native/Chat.js | 56 ++- .../features/chat/components/native/styles.js | 19 + react/features/chat/components/web/Chat.js | 59 +++ .../chat/components/web/ChatCounter.js | 5 +- react/features/chat/constants.js | 8 + react/features/chat/functions.js | 12 + react/features/chat/middleware.js | 17 +- react/features/chat/reducer.js | 14 +- react/features/polls/actionTypes.js | 55 +++ react/features/polls/actions.js | 99 ++++ .../polls/components/AbstractPollAnswer.js | 101 ++++ .../polls/components/AbstractPollCreate.js | 135 ++++++ .../polls/components/AbstractPollResults.js | 124 +++++ .../polls/components/AbstractPollsPane.js | 44 ++ react/features/polls/components/_.native.js | 3 + react/features/polls/components/_.web.js | 3 + react/features/polls/components/index.js | 3 + .../polls/components/native/PollAnswer.js | 69 +++ .../polls/components/native/PollCreate.js | 185 ++++++++ .../polls/components/native/PollItem.js | 40 ++ .../polls/components/native/PollResults.js | 120 +++++ .../polls/components/native/PollsList.js | 53 +++ .../polls/components/native/PollsPane.js | 45 ++ .../features/polls/components/native/index.js | 7 + .../polls/components/native/styles.js | 195 ++++++++ .../polls/components/web/PollAnswer.js | 69 +++ .../polls/components/web/PollCreate.js | 248 ++++++++++ .../features/polls/components/web/PollItem.js | 36 ++ .../polls/components/web/PollResults.js | 80 ++++ .../polls/components/web/PollsList.js | 48 ++ .../polls/components/web/PollsPane.js | 39 ++ react/features/polls/components/web/index.js | 6 + react/features/polls/constants.js | 5 + react/features/polls/functions.js | 23 + react/features/polls/middleware.js | 32 ++ react/features/polls/reducer.js | 128 +++++ react/features/polls/subscriber.js | 125 +++++ react/features/polls/types.js | 61 +++ resources/prosody-plugins/mod_polls.lua | 126 +++++ 56 files changed, 3192 insertions(+), 36 deletions(-) create mode 100644 css/_polls.scss create mode 100644 react/features/polls/actionTypes.js create mode 100644 react/features/polls/actions.js create mode 100644 react/features/polls/components/AbstractPollAnswer.js create mode 100644 react/features/polls/components/AbstractPollCreate.js create mode 100644 react/features/polls/components/AbstractPollResults.js create mode 100644 react/features/polls/components/AbstractPollsPane.js create mode 100644 react/features/polls/components/_.native.js create mode 100644 react/features/polls/components/_.web.js create mode 100644 react/features/polls/components/index.js create mode 100644 react/features/polls/components/native/PollAnswer.js create mode 100644 react/features/polls/components/native/PollCreate.js create mode 100644 react/features/polls/components/native/PollItem.js create mode 100644 react/features/polls/components/native/PollResults.js create mode 100644 react/features/polls/components/native/PollsList.js create mode 100644 react/features/polls/components/native/PollsPane.js create mode 100644 react/features/polls/components/native/index.js create mode 100644 react/features/polls/components/native/styles.js create mode 100644 react/features/polls/components/web/PollAnswer.js create mode 100644 react/features/polls/components/web/PollCreate.js create mode 100644 react/features/polls/components/web/PollItem.js create mode 100644 react/features/polls/components/web/PollResults.js create mode 100644 react/features/polls/components/web/PollsList.js create mode 100644 react/features/polls/components/web/PollsPane.js create mode 100644 react/features/polls/components/web/index.js create mode 100644 react/features/polls/constants.js create mode 100644 react/features/polls/functions.js create mode 100644 react/features/polls/middleware.js create mode 100644 react/features/polls/reducer.js create mode 100644 react/features/polls/subscriber.js create mode 100644 react/features/polls/types.js create mode 100644 resources/prosody-plugins/mod_polls.lua diff --git a/config.js b/config.js index d8209441d..a5305792e 100644 --- a/config.js +++ b/config.js @@ -73,6 +73,9 @@ var config = { // Enables reactions feature. // enableReactions: false, + // Disables polls feature. + // disablePolls: false, + // Disables ICE/UDP by filtering out local and remote UDP candidates in // signalling. // webrtcIceUdpDisable: false, diff --git a/css/_chat.scss b/css/_chat.scss index b884bd9ff..b3a2cdf4b 100644 --- a/css/_chat.scss +++ b/css/_chat.scss @@ -574,3 +574,41 @@ background: #36383C; border-radius: 3px; } + +.chat-tabs-container { + width: 100%; + border-bottom: thin solid #292929; + display: flex; + justify-content: space-around; +} + +.chat-tab { + font-size: 1.2em; + padding-bottom: 0.5em; + width: 50%; + text-align: center; + color: #8B8B8B; + cursor: pointer; +} + +.chat-tab-focus { + border-bottom-style: solid; + color: #FFF; +} + +.chat-tab-title { + margin-right: 8px; +} + +.chat-tab-badge { + background-color: #165ecc; + border-radius: 50%; + box-sizing: border-box; + font-weight: 700; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + vertical-align: middle; + padding: 0 4px; + color: #FFF; +} diff --git a/css/_polls.scss b/css/_polls.scss new file mode 100644 index 000000000..61c188670 --- /dev/null +++ b/css/_polls.scss @@ -0,0 +1,448 @@ +.poll-dialog { + font-size: 1rem; + + h1, span, li, strong { + color: #bce; + } + ol { + margin: 0; + } +} + +.poll-question-field { + padding: 8px 16px; + padding-bottom: 24px; + border-bottom: 1px solid #525252; +} + +.poll-header { + padding: 8px 16px; +} + +.poll-answer-container{ + padding: 8px; + background: #3D3D3D; + border-radius: 3px; + margin-bottom: 8px; +} + +.poll-answer-field-list, .poll-answer-list, .poll-result-list { + list-style-type: none; + padding: 0 16px; + margin: 0; +} + +ol.poll-result-list { + margin-bottom: 1.5em; +} + +.poll-result-list > li { + margin-bottom: 8px; +} + +.poll-answer-field { + flex-direction: column; + align-items: stretch; + margin-bottom: 16; + +} + +.poll-answer-field:last-child { + margin-bottom: 0; +} + +.poll-create-option-row { + display: 'flex'; + margin-bottom: 4; +} + +// Needeed to override atlaskit default blue color +.poll-create-container .jsYMHu { + background: #292929; + border-color: #808090; + color: white // #808090 +} + +.poll-add-button { + display: flex; + justify-content: center; + padding: 8px 16px; +} + +.poll-remove-option-button { + background: 0 0; + border: none; + color: #8B8B8B; + padding-left: 0; +} + +.poll-create-add-option { + border: none; + background-color: #292929; + padding: 3px; + width: 100%; +} + +.poll-icon-button, .poll-drag-handle { + .jitsi-icon svg { + fill: #bce; + } +} + +.poll-drag-handle { + background-color: transparent; + border: none; + cursor: grab; + padding-left: 8; + display: flex; +} + +.poll-dragged { + opacity: 0.5; + * { + cursor: grabbing !important; + } +} + +.poll-question { + font-size: 1.2em; + font-weight: 600; + margin-bottom: 0.5em; +} + +.poll-answer-voters { + font-size: 1em; + font-weight: lighter; + list-style-type: none; + border: #616161 solid 1px; + border-radius: 3px; + padding: 2px 6px; + margin: 4px 0px 12px; + background-color: #616161; +} + +.poll-answer-header { + display: flex; + justify-content: space-between; +} + +.poll-answer-vote-name { + flex-shrink: 1; + overflow-wrap: anywhere +} + +.poll-answer-vote-count-container{ + display: flex; +} + +.poll-answer-vote-count { + margin-left: 10px; + white-space: nowrap; + flex: 1; + text-align: right; +} + +.poll-answer-short-results{ + display: flex; + min-width: 10em; + justify-content: space-between; + align-items: center; +} + +.poll-bar-container, .poll-bar { + border-radius: 3px; + height: 6px; +} + +.poll-bar-container { + background-color: #616161; + max-width: 160px; + margin-top: 3px; + flex: 1; +} + +.poll-bar { + background-color: #246FE5; +} + +.poll-message-footer { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + margin-top: 5px; +} + +.poll-notice { + font-weight: 100; + margin-right: 10px; +} + +.poll-show-details { + background-color: transparent; + border: none; + + &:hover { + text-decoration: underline; + } +} + +.poll-result-links { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +a.poll-detail-link, a.poll-change-vote-link { + color: #246FE5; + cursor: pointer; + text-decoration: none; +} + +.polls-pane-content { + display: flex; + flex-direction: column; + font-weight: 600; + height: 85%; + align-items: stretch; +} + +.pane-content{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.empty-pane-icon { + width: 50%; + padding: 24px; +} + +.empty-pane-icon svg { + fill: #3D3D3D; + width: 100%; + height: auto; +} + +.empty-pane-message { + text-align: center; +} + +.poll-results { + color: white; +} + +.poll-answer { + h1, strong ,span { + color: white; + } +} + +.poll-results, .poll-answer { + margin-bottom: 16px; + background: #292929; + border-radius: 8px; + padding: 12px 8px; + border-width: thin; + border-style: solid; + border-color: #616161; +} + +.poll-create-label { + color: white; + margin-bottom: 4; + display: flex; +} + +.expandable-input{ + resize: none; + width: 100%; + height: 40px; + box-sizing: border-box; + overflow: hidden; + border: 1px solid #666666; + background-color: #141414; + color: #FFF; + border-radius: 6px; + padding: 10px 16px; +} + +.poll-container { + box-sizing: border-box; + flex: 1; + overflow-y: auto; + position: relative; + padding: 16px; + + & > * + *:not(.ignore-child) { + margin-top: 16px; + } + + &::-webkit-scrollbar { + display: none; + } +} + +.poll-create-header { + font-size: 20px; + margin: 20px 16px; + font-weight: 600; +} + +.poll-create-container { + padding: 8px 0; +} + +.poll-footer { + display: flex; + justify-content: flex-end; + padding: 8px 16px; + height: 40px; + align-items: stretch; + + & > *:not(:last-child) { + margin-right: 16px; + } +} + +.poll-primary-button { + align-items: center; + background-color: #0056E0; + border: 0; + border-radius: 6px; + display: flex; + font-weight: unset; + justify-content: center; + font-size: 15px; + flex: 1; + + &:hover { + background-color: #246FE5; + } + + &:active { + background-color: #0045B3; + } + + &:focus { + background-color: #0045B3; + border: 3px solid #99BBF3; + } + + &:disabled { + background-color: #00225A; + color: #858585; + } + + & > *:not(:last-child) { + margin-right: 8px; + } +} + +.poll-secondary-button { + align-items: center; + background-color: #3D3D3D; + border: 0; + border-radius: 6px; + display: flex; + font-weight: unset; + justify-content: center; + font-size: 15px; + height: 40px; + width: 100%; + + &:hover { + background-color: #525252; + } + + &:active { + background-color: #292929; + } + + &:focus { + background-color: #292929; + border: 3px solid #858585; + } + + &:disabled { + background-color: #141414; + color: #858585; + } + + & > *:not(:last-child) { + margin-right: 8px; + } +} + +.poll-small-primary-button { + align-items: center; + background-color: #0056E0; + border: 0; + border-radius: 6px; + display: flex; + font-weight: unset; + justify-content: center; + font-size: 15px; + height: 40px; + width: 50%; + + &:hover { + background-color: #246FE5; + } + + &:active { + background-color: #0045B3; + } + + &:focus { + background-color: #0045B3; + border: 3px solid #99BBF3; + } + + &:disabled { + background-color: #00225A; + color: #858585; + } + + & > *:not(:last-child) { + margin-right: 8px; + } +} + +.poll-small-secondary-button { + align-items: center; + background-color: #3D3D3D; + border: 0; + border-radius: 6px; + display: flex; + font-weight: unset; + justify-content: center; + font-size: 15px; + height: 40px; + width: 50%; + + &:hover { + background-color: #525252; + } + + &:active { + background-color: #292929; + } + + &:focus { + background-color: #292929; + border: 3px solid #858585; + } + + &:disabled { + background-color: #141414; + color: #858585; + } + + & > *:not(:last-child) { + margin-right: 8px; + } +} diff --git a/css/main.scss b/css/main.scss index 1711755ce..810209183 100644 --- a/css/main.scss +++ b/css/main.scss @@ -108,5 +108,6 @@ $flagsImagePath: "../images/"; @import 'participants-pane'; @import 'reactions-menu'; @import 'plan-limit'; +@import 'polls'; /* Modules END */ diff --git a/doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example b/doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example index 3a41d9861..5b27a383f 100644 --- a/doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example +++ b/doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example @@ -65,6 +65,7 @@ Component "conference.jitmeet.example.com" "muc" modules_enabled = { "muc_meeting_id"; "muc_domain_mapper"; + "polls"; --"token_verification"; } admins = { "focusUser@auth.jitmeet.example.com" } diff --git a/lang/main-fr.json b/lang/main-fr.json index 4a2fc682e..ab516c6a5 100644 --- a/lang/main-fr.json +++ b/lang/main-fr.json @@ -58,7 +58,7 @@ "today": "Aujourd'hui" }, "chat": { - "enter": "Entrez dans le salon de chat", + "enter": "Entrez dans le salon", "error": "Erreur : votre message n'a pas été envoyé. Raison : {{error}}", "fieldPlaceHolder": "Tapez votre message ici", "messagebox": "Saisissez un message", @@ -66,15 +66,19 @@ "noMessagesMessage": "Il n'y a pas encore de messages dans cette réunion. Démarrez une conversation ici !", "nickname": { "popover": "Choisissez un pseudonyme", - "title": "Entrez un pseudonyme pour utiliser le chat" + "title": "Entrez un pseudonyme pour utiliser le chat et les sondages" }, "privateNotice": "Message privé à {{recipient}}", - "title": "Chat", - "you": "vous", "message": "Message", "messageAccessibleTitle": "{{user}} dit: ", "messageAccessibleTitleMe": "Je dis: ", - "smileysPanel": "Panneaux des Émojis" + "smileysPanel": "Panneaux des Émojis", + "tabs": { + "chat": "Chat", + "polls": "Sondages" + }, + "title": "Chat et Sondages", + "you": "vous" }, "chromeExtensionBanner": { "installExtensionText": "Installer l'extension pour l'intégration de Google Calendar et Office 365", @@ -568,6 +572,34 @@ }, "passwordSetRemotely": "défini par un autre participant", "passwordDigitsOnly": "Jusqu'à {{number}} chiffres", + "polls": { + "create": { + "addOption": "Ajouter une option", + "answerPlaceholder": "Option {{index}}", + "create": "Créer un sondage", + "cancel": "Annuler", + "pollOption" : "Option {{index}}", + "pollQuestion" : "Question du sondage", + "questionPlaceholder": "Poser une question", + "removeOption": "Supprimer l'option", + "send": "Envoyer" + }, + "answer": { + "skip": "Passer", + "submit": "Envoyer" + }, + "results": { + "vote": "Voter", + "changeVote": "Changer le vote", + "empty": "Il n'y a pas encore de sondages dans cette réunion. Démarrez un sondage ici !", + "hideDetailedResults": "Cacher les détails", + "showDetailedResults": "Montrer les détails" + }, + "notification": { + "title": "Un nouveau sondage a été ajouté à la réunion", + "description": "Ouvrez l'onget des sondages pour voter" + } + }, "poweredby": "produit par", "prejoin": { "audioAndVideoError": "Erreur audio et video:", diff --git a/lang/main.json b/lang/main.json index 8a33d642c..17ed477db 100644 --- a/lang/main.json +++ b/lang/main.json @@ -58,7 +58,7 @@ "today": "Today" }, "chat": { - "enter": "Enter chat room", + "enter": "Enter room", "error": "Error: your message was not sent. Reason: {{error}}", "fieldPlaceHolder": "Type your message here", "messagebox": "Type a message", @@ -66,15 +66,19 @@ "noMessagesMessage": "There are no messages in the meeting yet. Start a conversation here!", "nickname": { "popover": "Choose a nickname", - "title": "Enter a nickname to use chat" + "title": "Enter a nickname to use chat and polls" }, "privateNotice": "Private message to {{recipient}}", - "title": "Chat", - "you": "you", "message": "Message", "messageAccessibleTitle": "{{user}} says:", "messageAccessibleTitleMe": "me says:", - "smileysPanel": "Emoji panel" + "smileysPanel": "Emoji panel", + "tabs": { + "chat": "Chat", + "polls": "Polls" + }, + "title": "Chat and Polls", + "you": "you" }, "chromeExtensionBanner": { "installExtensionText": "Install the extension for Google Calendar and Office 365 integration", @@ -614,6 +618,34 @@ }, "passwordSetRemotely": "Set by another participant", "passwordDigitsOnly": "Up to {{number}} digits", + "polls": { + "create": { + "addOption": "Add option", + "answerPlaceholder": "Option {{index}}", + "create": "Create a poll", + "cancel": "Cancel", + "pollOption" : "Poll option {{index}}", + "pollQuestion" : "Poll Question", + "questionPlaceholder": "Ask a question", + "removeOption": "Remove option", + "send": "Send" + }, + "answer": { + "skip": "Skip", + "submit": "Submit" + }, + "results": { + "vote": "Vote", + "changeVote": "Change vote", + "empty": "There are no polls in the meeting yet. Start a poll here!", + "hideDetailedResults": "Hide details", + "showDetailedResults": "Show details" + }, + "notification": { + "title": "A new poll was added to this meeting", + "description": "Open polls tab to vote" + } + }, "poweredby": "powered by", "prejoin": { "audioAndVideoError": "Audio and video error:", diff --git a/react/features/app/middlewares.any.js b/react/features/app/middlewares.any.js index dd75af665..037f95113 100644 --- a/react/features/app/middlewares.any.js +++ b/react/features/app/middlewares.any.js @@ -34,6 +34,8 @@ import '../large-video/middleware'; import '../lobby/middleware'; import '../notifications/middleware'; import '../overlay/middleware'; +import '../polls/middleware'; +import '../polls/subscriber'; import '../reactions/middleware'; import '../recent-list/middleware'; import '../recording/middleware'; diff --git a/react/features/app/reducers.any.js b/react/features/app/reducers.any.js index 4ced12b07..1a46118f3 100644 --- a/react/features/app/reducers.any.js +++ b/react/features/app/reducers.any.js @@ -41,6 +41,7 @@ import '../lobby/reducer'; import '../notifications/reducer'; import '../overlay/reducer'; import '../participants-pane/reducer'; +import '../polls/reducer'; import '../reactions/reducer'; import '../recent-list/reducer'; import '../recording/reducer'; diff --git a/react/features/base/config/configWhitelist.js b/react/features/base/config/configWhitelist.js index 9e91c9bb8..6f943a61e 100644 --- a/react/features/base/config/configWhitelist.js +++ b/react/features/base/config/configWhitelist.js @@ -91,6 +91,7 @@ export default [ 'disableJoinLeaveSounds', 'disableLocalVideoFlip', 'disableNS', + 'disablePolls', 'disableProfile', 'disableRemoteControl', 'disableRemoteMute', diff --git a/react/features/base/dialog/components/native/BaseDialog.js b/react/features/base/dialog/components/native/BaseDialog.js index 552fae6a0..4e782f642 100644 --- a/react/features/base/dialog/components/native/BaseDialog.js +++ b/react/features/base/dialog/components/native/BaseDialog.js @@ -50,7 +50,7 @@ class BaseDialog extends AbstractDialog { * @returns {ReactElement} */ render() { - const { _dialogStyles, style } = this.props; + const { _dialogStyles, style, t, titleKey } = this.props; return ( @@ -65,13 +65,18 @@ class BaseDialog extends AbstractDialog { _dialogStyles.dialog, style ] }> - - - + + + { titleKey ? t(titleKey) : ' ' } + + + + + { this._renderContent() } diff --git a/react/features/base/dialog/components/native/ConfirmDialog.js b/react/features/base/dialog/components/native/ConfirmDialog.js index e4a5d839b..f827f27c4 100644 --- a/react/features/base/dialog/components/native/ConfirmDialog.js +++ b/react/features/base/dialog/components/native/ConfirmDialog.js @@ -28,6 +28,12 @@ type Props = BaseProps & { */ contentKey: string | { key: string, params: Object}, + /** + * The handler for the event when clicking the 'confirmNo' button. + * Defaults to onCancel if absent. + */ + onDecline?: Function, + t: Function } @@ -55,11 +61,11 @@ class ConfirmDialog extends BaseSubmitDialog { * @inheritdoc */ _renderAdditionalButtons() { - const { _dialogStyles, cancelKey, t } = this.props; + const { _dialogStyles, cancelKey, onDecline, t } = this.props; return ( { } const { - t /* The following fixes a flow error: */ = _.identity + t /* The following fixes a flow error: */ = _.identity, + onDecline } = this.props; return ( @@ -276,7 +283,7 @@ class StatelessDialog extends Component { appearance = 'subtle' id = { CANCEL_BUTTON_ID } key = 'cancel' - onClick = { this._onCancel } + onClick = { onDecline || this._onCancel } type = 'button'> { t(this.props.cancelKey || 'dialog.Cancel') } diff --git a/react/features/chat/actionTypes.js b/react/features/chat/actionTypes.js index 6831f9e9d..1c15cb479 100644 --- a/react/features/chat/actionTypes.js +++ b/react/features/chat/actionTypes.js @@ -64,3 +64,13 @@ export const SEND_MESSAGE = 'SEND_MESSAGE'; * } */ export const SET_PRIVATE_MESSAGE_RECIPIENT = 'SET_PRIVATE_MESSAGE_RECIPIENT'; + +/** + * The type of action which signals the update a _isPollsTabFocused. + * + * { + * isPollsTabFocused: boolean, + * type: SET_PRIVATE_MESSAGE_RECIPIENT + * } + */ +export const SET_IS_POLL_TAB_FOCUSED = 'SET_IS_POLL_TAB_FOCUSED'; diff --git a/react/features/chat/actions.any.js b/react/features/chat/actions.any.js index 3fa3f78f3..17f6cbfa2 100644 --- a/react/features/chat/actions.any.js +++ b/react/features/chat/actions.any.js @@ -5,7 +5,8 @@ import { CLEAR_MESSAGES, CLOSE_CHAT, SEND_MESSAGE, - SET_PRIVATE_MESSAGE_RECIPIENT + SET_PRIVATE_MESSAGE_RECIPIENT, + SET_IS_POLL_TAB_FOCUSED } from './actionTypes'; /** @@ -97,3 +98,16 @@ export function setPrivateMessageRecipient(participant: Object) { type: SET_PRIVATE_MESSAGE_RECIPIENT }; } + +/** + * Set the value of _isPollsTabFocused. + * + * @param {boolean} isPollsTabFocused - The new value for _isPollsTabFocused. + * @returns {Function} + */ +export function setIsPollsTabFocused(isPollsTabFocused: boolean) { + return { + isPollsTabFocused, + type: SET_IS_POLL_TAB_FOCUSED + }; +} diff --git a/react/features/chat/components/AbstractChat.js b/react/features/chat/components/AbstractChat.js index 7bbb1cc82..b24bd1450 100644 --- a/react/features/chat/components/AbstractChat.js +++ b/react/features/chat/components/AbstractChat.js @@ -4,7 +4,7 @@ import { Component } from 'react'; import type { Dispatch } from 'redux'; import { getLocalParticipant } from '../../base/participants'; -import { sendMessage } from '../actions'; +import { sendMessage, setIsPollsTabFocused } from '../actions'; import { SMALL_WIDTH_THRESHOLD } from '../constants'; /** @@ -22,11 +22,31 @@ export type Props = { */ _isOpen: boolean, + /** + * True if the polls feature is enabled. + */ + _isPollsEnabled: boolean, + + /** + * Whether the poll tab is focused or not. + */ + _isPollsTabFocused: boolean, + /** * All the chat messages in the conference. */ _messages: Array, + /** + * Number of unread chat messages. + */ + _nbUnreadMessages: number, + + /** + * Number of unread poll messages. + */ + _nbUnreadPolls: number, + /** * Function to send a text message. * @@ -34,6 +54,20 @@ export type Props = { */ _onSendMessage: Function, + /** + * Function to display the chat tab. + * + * @protected + */ + _onToggleChatTab: Function, + + /** + * Function to display the polls tab. + * + * @protected + */ + _onTogglePollsTab: Function, + /** * Function to toggle the chat window. */ @@ -52,7 +86,7 @@ export type Props = { /** * Function to be used to translate i18n labels. */ - t: Function + t: Function, }; /** @@ -71,6 +105,8 @@ export default class AbstractChat extends Component

{ // Bind event handlers so they are only bound once per instance. this._onSendMessage = this._onSendMessage.bind(this); + this._onToggleChatTab = this._onToggleChatTab.bind(this); + this._onTogglePollsTab = this._onTogglePollsTab.bind(this); } _onSendMessage: (string) => void; @@ -86,6 +122,30 @@ export default class AbstractChat extends Component

{ _onSendMessage(text: string) { this.props.dispatch(sendMessage(text)); } + + _onToggleChatTab: () => void; + + /** + * Display the Chat tab. + * + * @private + * @returns {void} + */ + _onToggleChatTab() { + this.props.dispatch(setIsPollsTabFocused(false)); + } + + _onTogglePollsTab: () => void; + + /** + * Display the Polls tab. + * + * @private + * @returns {void} + */ + _onTogglePollsTab() { + this.props.dispatch(setIsPollsTabFocused(true)); + } } /** @@ -101,13 +161,19 @@ export default class AbstractChat extends Component

{ * }} */ export function _mapStateToProps(state: Object) { - const { isOpen, messages } = state['features/chat']; + const { isOpen, isPollsTabFocused, messages, nbUnreadMessages } = state['features/chat']; + const { nbUnreadPolls } = state['features/polls']; const _localParticipant = getLocalParticipant(state); + const { disablePolls } = state['features/base/config']; return { _isModal: window.innerWidth <= SMALL_WIDTH_THRESHOLD, _isOpen: isOpen, + _isPollsEnabled: !disablePolls, + _isPollsTabFocused: isPollsTabFocused, _messages: messages, + _nbUnreadMessages: nbUnreadMessages, + _nbUnreadPolls: nbUnreadPolls, _showNamePrompt: !_localParticipant?.name }; } diff --git a/react/features/chat/components/native/Chat.js b/react/features/chat/components/native/Chat.js index b1159a5c9..da0e3a2a1 100644 --- a/react/features/chat/components/native/Chat.js +++ b/react/features/chat/components/native/Chat.js @@ -1,12 +1,15 @@ // @flow import React from 'react'; +import { View } from 'react-native'; +import { Button } from 'react-native-paper'; import { translate } from '../../../base/i18n'; import { JitsiModal } from '../../../base/modal'; import { connect } from '../../../base/redux'; +import { PollsPane } from '../../../polls/components'; import { closeChat } from '../../actions.any'; -import { CHAT_VIEW_MODAL_ID } from '../../constants'; +import { BUTTON_MODES, CHAT_VIEW_MODAL_ID } from '../../constants'; import AbstractChat, { _mapStateToProps, type Props @@ -15,6 +18,7 @@ import AbstractChat, { import ChatInputBar from './ChatInputBar'; import MessageContainer from './MessageContainer'; import MessageRecipient from './MessageRecipient'; +import styles from './styles'; /** * Implements a React native component that renders the chat window (modal) of @@ -45,10 +49,49 @@ class Chat extends AbstractChat { }} modalId = { CHAT_VIEW_MODAL_ID } onClose = { this._onClose }> - - - - + {this.props._isPollsEnabled && + + + } + {this.props._isPollsTabFocused + ? + : ( + <> + + + + + )} ); } @@ -57,6 +100,9 @@ class Chat extends AbstractChat { _onClose: () => boolean + _onTogglePollsTab: () => void; + _onToggleChatTab: () => void; + /** * Closes the modal. * diff --git a/react/features/chat/components/native/styles.js b/react/features/chat/components/native/styles.js index c4ffac68e..0e8131a1d 100644 --- a/react/features/chat/components/native/styles.js +++ b/react/features/chat/components/native/styles.js @@ -124,6 +124,25 @@ export default { timeText: { color: 'rgb(164, 184, 209)', fontSize: 13 + }, + + tabContainer: { + flexDirection: 'row', + justifyContent: 'center' + }, + + tabLeftButton: { + flex: 1, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomLeftRadius: 0 + }, + + tabRightButton: { + flex: 1, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomRightRadius: 0 } }; diff --git a/react/features/chat/components/web/Chat.js b/react/features/chat/components/web/Chat.js index f50a4230c..c9c91f63f 100644 --- a/react/features/chat/components/web/Chat.js +++ b/react/features/chat/components/web/Chat.js @@ -4,6 +4,7 @@ import React from 'react'; import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux'; +import { PollsPane } from '../../../polls/components'; import { toggleChat } from '../../actions.web'; import AbstractChat, { _mapStateToProps, @@ -128,8 +129,20 @@ class Chat extends AbstractChat { * @returns {ReactElement} */ _renderChat() { + + if (this.props._isPollsTabFocused) { + return ( + <> + { this.props._isPollsEnabled && this._renderTabs()} + + + + ); + } + return ( <> + {this.props._isPollsEnabled && this._renderTabs()} { ); } + /** + * Returns a React Element showing the Chat and Polls tab. + * + * @private + * @returns {ReactElement} + */ + _renderTabs() { + + return ( +

+
+ + {this.props.t('chat.tabs.chat')} + + {this.props._isPollsTabFocused + && this.props._nbUnreadMessages > 0 && ( + + {this.props._nbUnreadMessages} + + )} +
+
+ + {this.props.t('chat.tabs.polls')} + + {!this.props._isPollsTabFocused + && this.props._nbUnreadPolls > 0 && ( + + {this.props._nbUnreadPolls} + + )} +
+
+ ); + } + /** * Instantiates a React Element to display at the top of {@code Chat} to * close {@code Chat}. @@ -233,6 +290,8 @@ class Chat extends AbstractChat { _onToggleChat() { this.props.dispatch(toggleChat()); } + _onTogglePollsTab: () => void; + _onToggleChatTab: () => void; } diff --git a/react/features/chat/components/web/ChatCounter.js b/react/features/chat/components/web/ChatCounter.js index 0708e362e..f482b2651 100644 --- a/react/features/chat/components/web/ChatCounter.js +++ b/react/features/chat/components/web/ChatCounter.js @@ -3,6 +3,7 @@ import React, { Component } from 'react'; import { connect } from '../../../base/redux'; +import { getUnreadPollCount } from '../../../polls/functions'; import { getUnreadCount } from '../../functions'; /** @@ -64,8 +65,10 @@ function _mapStateToProps(state) { const { isOpen } = state['features/chat']; return { - _count: getUnreadCount(state), + + _count: getUnreadCount(state) + getUnreadPollCount(state), _isOpen: isOpen + }; } diff --git a/react/features/chat/constants.js b/react/features/chat/constants.js index 3cbbba58e..a4dd8f546 100644 --- a/react/features/chat/constants.js +++ b/react/features/chat/constants.js @@ -31,3 +31,11 @@ export const MESSAGE_TYPE_LOCAL = 'local'; export const MESSAGE_TYPE_REMOTE = 'remote'; export const SMALL_WIDTH_THRESHOLD = 580; + +/** + * The modes of the buttons of the chat and polls tabs. + */ +export const BUTTON_MODES = { + CONTAINED: 'contained', + TEXT: 'text' +}; diff --git a/react/features/chat/functions.js b/react/features/chat/functions.js index e45588301..724c2faa6 100644 --- a/react/features/chat/functions.js +++ b/react/features/chat/functions.js @@ -78,3 +78,15 @@ export function getUnreadCount(state: Object) { return messagesCount - (lastReadIndex + 1); } + +/** + * Selector for calculating the number of unread chat messages. + * + * @param {Object} state - The redux state. + * @returns {number} The number of unread messages. + */ +export function getUnreadMessagesCount(state: Object) { + const { nbUnreadMessages } = state['features/chat']; + + return nbUnreadMessages; +} diff --git a/react/features/chat/middleware.js b/react/features/chat/middleware.js index e803f1203..b90aa04e2 100644 --- a/react/features/chat/middleware.js +++ b/react/features/chat/middleware.js @@ -22,6 +22,7 @@ import { import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux'; import { playSound, registerSound, unregisterSound } from '../base/sounds'; import { openDisplayNamePrompt } from '../display-name'; +import { resetNbUnreadPollsMessages } from '../polls/actions'; import { ADD_REACTION_MESSAGE } from '../reactions/actionTypes'; import { pushReactions } from '../reactions/actions.any'; import { getReactionMessageFromBuffer } from '../reactions/functions.any'; @@ -33,7 +34,7 @@ import { setToolboxVisible } from '../toolbox/actions.web'; -import { ADD_MESSAGE, SEND_MESSAGE, OPEN_CHAT, CLOSE_CHAT } from './actionTypes'; +import { ADD_MESSAGE, SEND_MESSAGE, OPEN_CHAT, CLOSE_CHAT, SET_IS_POLL_TAB_FOCUSED } from './actionTypes'; import { addMessage, clearMessages } from './actions'; import { closeChat } from './actions.any'; import { ChatPrivacyDialog } from './components'; @@ -112,15 +113,27 @@ MiddlewareRegistry.register(store => next => action => { } break; - case CLOSE_CHAT: + case CLOSE_CHAT: { + const isPollTabOpen = getState()['features/chat'].isPollsTabFocused; + unreadCount = 0; if (typeof APP !== 'undefined') { APP.API.notifyChatUpdated(unreadCount, false); } + if (isPollTabOpen) { + dispatch(resetNbUnreadPollsMessages()); + } + dispatch(setActiveModalId()); break; + } + + case SET_IS_POLL_TAB_FOCUSED: { + dispatch(resetNbUnreadPollsMessages()); + break; + } case SEND_MESSAGE: { const state = store.getState(); diff --git a/react/features/chat/reducer.js b/react/features/chat/reducer.js index a0905ec7f..3390b5955 100644 --- a/react/features/chat/reducer.js +++ b/react/features/chat/reducer.js @@ -7,13 +7,17 @@ import { CLEAR_MESSAGES, CLOSE_CHAT, OPEN_CHAT, - SET_PRIVATE_MESSAGE_RECIPIENT + SET_PRIVATE_MESSAGE_RECIPIENT, + SET_IS_POLL_TAB_FOCUSED } from './actionTypes'; const DEFAULT_STATE = { isOpen: false, + isPollsTabFocused: false, lastReadMessage: undefined, + lastReadPoll: undefined, messages: [], + nbUnreadMessages: 0, privateMessageRecipient: undefined }; @@ -46,6 +50,7 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => { ...state, lastReadMessage: action.hasRead ? newMessage : state.lastReadMessage, + nbUnreadMessages: state.isPollsTabFocused ? state.nbUnreadMessages + 1 : state.nbUnreadMessages, messages }; } @@ -78,6 +83,13 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => { navigator.product === 'ReactNative' ? 0 : state.messages.length - 1], privateMessageRecipient: action.participant }; + + case SET_IS_POLL_TAB_FOCUSED: { + return { + ...state, + isPollsTabFocused: action.isPollsTabFocused, + nbUnreadMessages: 0 + }; } } return state; diff --git a/react/features/polls/actionTypes.js b/react/features/polls/actionTypes.js new file mode 100644 index 000000000..3b7ff84cb --- /dev/null +++ b/react/features/polls/actionTypes.js @@ -0,0 +1,55 @@ +// @flow + +/** + * The type of the action which signals that a new Poll was received. + * + * { + * type: RECEIVE_POLL, + * poll: Poll, + * pollId: string, + * notify: boolean + * } + * + */ +export const RECEIVE_POLL = 'RECEIVE_POLL'; + +/** + * The type of the action which signals that a new Answer was received. + * + * { + * type: RECEIVE_ANSWER, + * answer: Answer, + * pollId: string, + * } + */ +export const RECEIVE_ANSWER = 'RECEIVE_ANSWER'; + +/** + * The type of the action which registers a vote. + * + * { + * type: REGISTER_VOTE, + * answers: Array | null, + * pollId: string + * } + */ +export const REGISTER_VOTE = 'REGISTER_VOTE'; + +/** + * The type of the action which retracts a vote. + * + * { + * type: RETRACT_VOTE, + * pollId: string, + * } + */ +export const RETRACT_VOTE = 'RETRACT_VOTE'; + +/** + * The type of the action triggered when the poll tab in chat pane is closed + * + * { + * type: RESET_NB_UNREAD_POLLS, + * } + */ +export const RESET_NB_UNREAD_POLLS = 'RESET_NB_UNREAD_POLLS'; diff --git a/react/features/polls/actions.js b/react/features/polls/actions.js new file mode 100644 index 000000000..df3b8590b --- /dev/null +++ b/react/features/polls/actions.js @@ -0,0 +1,99 @@ +// @flow + +import { + RESET_NB_UNREAD_POLLS, + RECEIVE_ANSWER, + RECEIVE_POLL, + REGISTER_VOTE, + RETRACT_VOTE +} from './actionTypes'; +import type { Answer, Poll } from './types'; + +/** + * Action to signal that a new poll was received. + * + * @param {string} pollId - The id of the incoming poll. + * @param {Poll} poll - The incoming Poll object. + * @param {boolean} notify - Whether to send or not a notification. + * @returns {{ + * type: RECEIVE_POLL, + * poll: Poll, + * pollId: string, + * notify: boolean + * }} + */ +export const receivePoll = (pollId: string, poll: Poll, notify: boolean) => { + return { + type: RECEIVE_POLL, + poll, + pollId, + notify + }; +}; + +/** + * Action to signal that a new answer was received. + * + * @param {string} pollId - The id of the incoming poll. + * @param {Answer} answer - The incoming Answer object. + * @returns {{ + * type: RECEIVE_ANSWER, + * answer: Answer, + * pollId: string + * }} + */ +export const receiveAnswer = (pollId: string, answer: Answer) => { + return { + type: RECEIVE_ANSWER, + answer, + pollId + }; +}; + +/** + * Action to register a vote on a poll. + * + * @param {string} pollId - The id of the poll. + * @param {?Array} answers - The new answers. + * @returns {{ + * type: REGISTER_VOTE, + * answers: ?Array, + * pollId: string + * }} + */ +export const registerVote = (pollId: string, answers: Array | null) => { + return { + type: REGISTER_VOTE, + answers, + pollId + }; +}; + +/** + * Action to retract a vote on a poll. + * + * @param {string} pollId - The id of the poll. + * @returns {{ + * type: RETRACT_VOTE, + * pollId: string + * }} + */ +export const retractVote = (pollId: string) => { + return { + type: RETRACT_VOTE, + pollId + }; +}; + +/** + * Action to signal the closing of the polls tab. + * + * @returns {{ + * type: POLL_TAB_CLOSED + * }} + */ +export function resetNbUnreadPollsMessages() { + return { + type: RESET_NB_UNREAD_POLLS + }; +} diff --git a/react/features/polls/components/AbstractPollAnswer.js b/react/features/polls/components/AbstractPollAnswer.js new file mode 100644 index 000000000..4cd61fc5a --- /dev/null +++ b/react/features/polls/components/AbstractPollAnswer.js @@ -0,0 +1,101 @@ +// @flow + +import React, { useCallback, useState } from 'react'; +import type { AbstractComponent } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { getLocalParticipant, getParticipantById } from '../../base/participants'; +import { registerVote } from '../actions'; +import { COMMAND_ANSWER_POLL } from '../constants'; +import type { Poll } from '../types'; + +/** + * The type of the React {@code Component} props of inheriting component. + */ +type InputProps = { + pollId: string, +}; + +/* + * Props that will be passed by the AbstractPollAnswer to its + * concrete implementations (web/native). + **/ +export type AbstractProps = { + checkBoxStates: Function, + poll: Poll, + setCheckbox: Function, + skipAnswer: Function, + submitAnswer: Function, + t: Function, +}; + +/** + * Higher Order Component taking in a concrete PollAnswer component and + * augmenting it with state/behavior common to both web and native implementations. + * + * @param {React.AbstractComponent} Component - The concrete component. + * @returns {React.AbstractComponent} + */ +const AbstractPollAnswer = (Component: AbstractComponent) => (props: InputProps) => { + + const { pollId } = props; + + const conference: Object = useSelector(state => state['features/base/conference'].conference); + + const poll: Poll = useSelector(state => state['features/polls'].polls[pollId]); + + const { id: localId } = useSelector(getLocalParticipant); + + const [ checkBoxStates, setCheckBoxState ] = useState(() => { + if (poll.lastVote !== null) { + return [ ...poll.lastVote ]; + } + + return new Array(poll.answers.length).fill(false); + }); + + const setCheckbox = useCallback((index, state) => { + const newCheckBoxStates = [ ...checkBoxStates ]; + + newCheckBoxStates[index] = state; + setCheckBoxState(newCheckBoxStates); + }, [ checkBoxStates ]); + + const dispatch = useDispatch(); + + const localParticipant = useSelector(state => getParticipantById(state, localId)); + const localName: string = localParticipant.name ? localParticipant.name : 'Fellow Jitster'; + + const submitAnswer = useCallback(() => { + conference.sendMessage({ + type: COMMAND_ANSWER_POLL, + pollId, + voterId: localId, + voterName: localName, + answers: checkBoxStates + }); + + dispatch(registerVote(pollId, checkBoxStates)); + + return false; + }, [ pollId, localId, localName, checkBoxStates, conference ]); + + const skipAnswer = useCallback(() => { + dispatch(registerVote(pollId, null)); + + }, [ pollId ]); + + const { t } = useTranslation(); + + return (); + +}; + +export default AbstractPollAnswer; diff --git a/react/features/polls/components/AbstractPollCreate.js b/react/features/polls/components/AbstractPollCreate.js new file mode 100644 index 000000000..0f2f1d17f --- /dev/null +++ b/react/features/polls/components/AbstractPollCreate.js @@ -0,0 +1,135 @@ +// @flow + +import React, { useCallback, useState } from 'react'; +import type { AbstractComponent } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; + +import { getParticipantDisplayName } from '../../base/participants'; +import { COMMAND_NEW_POLL } from '../constants'; + +/** + * The type of the React {@code Component} props of inheriting component. + */ +type InputProps = { + setCreateMode: boolean => void, +}; + +/* + * Props that will be passed by the AbstractPollCreate to its + * concrete implementations (web/native). + **/ +export type AbstractProps = InputProps & { + answers: Array, + question: string, + setQuestion: string => void, + setAnswer: (number, string) => void, + addAnswer: ?number => void, + moveAnswer: (number, number) => void, + removeAnswer: number => void, + onSubmit: Function, + isSubmitDisabled: boolean, + t: Function, +}; + +/** + * Higher Order Component taking in a concrete PollCreate component and + * augmenting it with state/behavior common to both web and native implementations. + * + * @param {React.AbstractComponent} Component - The concrete component. + * @returns {React.AbstractComponent} + */ +const AbstractPollCreate = (Component: AbstractComponent) => (props: InputProps) => { + + const { setCreateMode } = props; + + const [ question, setQuestion ] = useState(''); + + const [ answers, setAnswers ] = useState([ '', '' ]); + + const setAnswer = useCallback((i, answer) => { + const newAnswers = [ ...answers ]; + + newAnswers[i] = answer; + setAnswers(newAnswers); + }); + + const addAnswer = useCallback((i: ?number) => { + + const newAnswers = [ ...answers ]; + + newAnswers.splice(typeof i === 'number' ? i : answers.length, 0, ''); + setAnswers(newAnswers); + }); + + const moveAnswer = useCallback((i, j) => { + const newAnswers = [ ...answers ]; + + const answer = answers[i]; + + newAnswers.splice(i, 1); + newAnswers.splice(j, 0, answer); + setAnswers(newAnswers); + }); + + const removeAnswer = useCallback(i => { + if (answers.length <= 2) { + return; + } + const newAnswers = [ ...answers ]; + + newAnswers.splice(i, 1); + setAnswers(newAnswers); + }); + + const conference = useSelector(state => state['features/base/conference'].conference); + const myId = conference.myUserId(); + const myName = useSelector(state => getParticipantDisplayName(state, myId)); + + const onSubmit = useCallback(ev => { + if (ev) { + ev.preventDefault(); + } + + const filteredAnswers = answers.filter(answer => answer.trim().length > 0); + + if (filteredAnswers.length < 2) { + return; + } + + conference.sendMessage({ + type: COMMAND_NEW_POLL, + pollId: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36), + senderId: myId, + senderName: myName, + question, + answers: filteredAnswers + }); + + setCreateMode(false); + + }, [ conference, question, answers ]); + + // Check if the poll create form can be submitted i.e. if the send button should be disabled. + const isSubmitDisabled + = question.trim().length <= 0 // If no question is provided + || answers.filter(answer => answer.trim().length > 0).length < 2; // If not enough options are provided + + const { t } = useTranslation(); + + return (); + +}; + +export default AbstractPollCreate; diff --git a/react/features/polls/components/AbstractPollResults.js b/react/features/polls/components/AbstractPollResults.js new file mode 100644 index 000000000..c49b4e680 --- /dev/null +++ b/react/features/polls/components/AbstractPollResults.js @@ -0,0 +1,124 @@ +// @flow + +import React, { useCallback, useMemo, useState } from 'react'; +import type { AbstractComponent } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { getLocalParticipant, getParticipantById } from '../../base/participants/functions'; +import { retractVote } from '../actions'; +import { COMMAND_ANSWER_POLL } from '../constants'; + +/** + * The type of the React {@code Component} props of inheriting component. + */ +type InputProps = { + + /** + * ID of the poll to display + */ + pollId: string, +}; + +export type AnswerInfo = { + name: string, + percentage: number, + voters?: Array<{ id: number, name: string }>, + voterCount: number +}; + +/** + * The type of the React {@code Component} props of {@link AbstractPollResults}. + */ +export type AbstractProps = { + answers: Array, + changeVote: Function, + showDetails: boolean, + question: string, + t: Function, + toggleIsDetailed: Function, + haveVoted: boolean, +}; + +/** + * Higher Order Component taking in a concrete PollResult component and + * augmenting it with state/behavior common to both web and native implementations. + * + * @param {React.AbstractComponent} Component - The concrete component. + * @returns {React.AbstractComponent} + */ +const AbstractPollResults = (Component: AbstractComponent) => (props: InputProps) => { + const { pollId } = props; + + const pollDetails = useSelector(state => state['features/polls'].polls[pollId]); + + const [ showDetails, setShowDetails ] = useState(false); + const toggleIsDetailed = useCallback(() => { + setShowDetails(!showDetails); + }); + + const answers: Array = useMemo(() => { + const voterSet = new Set(); + + // Getting every voters ID that participates to the poll + for (const answer of pollDetails.answers) { + for (const [ voterId ] of answer.voters) { + voterSet.add(voterId); + } + } + + const totalVoters = voterSet.size; + + return pollDetails.answers.map(answer => { + const percentage = totalVoters === 0 ? 0 : Math.round(answer.voters.size / totalVoters * 100); + + let voters = null; + + if (showDetails) { + voters = [ ...answer.voters ].map(([ id, name ]) => { + return { + id, + name + }; + }); + } + + return { + name: answer.name, + percentage, + voters, + voterCount: answer.voters.size + }; + }); + }, [ pollDetails.answers, showDetails ]); + + const dispatch = useDispatch(); + + const conference: Object = useSelector(state => state['features/base/conference'].conference); + const localId = useSelector(state => getLocalParticipant(state).id); + const localParticipant = useSelector(state => getParticipantById(state, localId)); + const localName: string = localParticipant ? localParticipant.name : 'Fellow Jitster'; + const changeVote = useCallback(() => { + conference.sendMessage({ + type: COMMAND_ANSWER_POLL, + pollId, + voterId: localId, + voterName: localName, + answers: new Array(pollDetails.answers.length).fill(false) + }); + dispatch(retractVote(pollId)); + }, [ pollId, localId, localName, pollDetails ]); + + const { t } = useTranslation(); + + return (); +}; + +export default AbstractPollResults; diff --git a/react/features/polls/components/AbstractPollsPane.js b/react/features/polls/components/AbstractPollsPane.js new file mode 100644 index 000000000..818fe7a99 --- /dev/null +++ b/react/features/polls/components/AbstractPollsPane.js @@ -0,0 +1,44 @@ +// @flow + +import React, { useState } from 'react'; +import type { AbstractComponent } from 'react'; +import { useTranslation } from 'react-i18next'; + +/* + * Props that will be passed by the AbstractPollsPane to its + * concrete implementations (web/native). + **/ +export type AbstractProps = { + createMode: boolean, + onCreate: void => void, + setCreateMode: boolean => void, + t: Function, +}; + +/** + * Higher Order Component taking in a concrete PollsPane component and + * augmenting it with state/behavior common to both web and native implementations. + * + * @param {React.AbstractComponent} Component - The concrete component. + * @returns {React.AbstractComponent} + */ +const AbstractPollsPane = (Component: AbstractComponent) => () => { + + const [ createMode, setCreateMode ] = useState(false); + + const onCreate = () => { + setCreateMode(true); + }; + + const { t } = useTranslation(); + + return (); + +}; + +export default AbstractPollsPane; diff --git a/react/features/polls/components/_.native.js b/react/features/polls/components/_.native.js new file mode 100644 index 000000000..a32ec6061 --- /dev/null +++ b/react/features/polls/components/_.native.js @@ -0,0 +1,3 @@ +// @flow + +export * from './native'; diff --git a/react/features/polls/components/_.web.js b/react/features/polls/components/_.web.js new file mode 100644 index 000000000..40d5f4652 --- /dev/null +++ b/react/features/polls/components/_.web.js @@ -0,0 +1,3 @@ +// @flow + +export * from './web'; diff --git a/react/features/polls/components/index.js b/react/features/polls/components/index.js new file mode 100644 index 000000000..bf0c7deb0 --- /dev/null +++ b/react/features/polls/components/index.js @@ -0,0 +1,3 @@ +// @flow + +export * from './_'; diff --git a/react/features/polls/components/native/PollAnswer.js b/react/features/polls/components/native/PollAnswer.js new file mode 100644 index 000000000..ba5067649 --- /dev/null +++ b/react/features/polls/components/native/PollAnswer.js @@ -0,0 +1,69 @@ +// @flow + +import React from 'react'; +import { Switch, Text, View } from 'react-native'; +import { Button } from 'react-native-paper'; + +import { BUTTON_MODES } from '../../../chat/constants'; +import AbstractPollAnswer from '../AbstractPollAnswer'; +import type { AbstractProps } from '../AbstractPollAnswer'; + +import { chatStyles, dialogStyles } from './styles'; + + +const PollAnswer = (props: AbstractProps) => { + + const { + checkBoxStates, + poll, + setCheckbox, + skipAnswer, + submitAnswer, + t + } = props; + + return ( + + + { poll.question } + + + {poll.answers.map((answer, index) => ( + + setCheckbox(index, state) } + value = { checkBoxStates[index] } /> + {answer.name} + + ))} + + + + + + + + ); +}; + +/* + * We apply AbstractPollAnswer to fill in the AbstractProps common + * to both the web and native implementations. + */ +// eslint-disable-next-line new-cap +export default AbstractPollAnswer(PollAnswer); diff --git a/react/features/polls/components/native/PollCreate.js b/react/features/polls/components/native/PollCreate.js new file mode 100644 index 000000000..8620eccb5 --- /dev/null +++ b/react/features/polls/components/native/PollCreate.js @@ -0,0 +1,185 @@ +// @flow + +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { View, TextInput, FlatList, TouchableOpacity } from 'react-native'; +import { Button } from 'react-native-paper'; + +import { Icon, IconClose } from '../../../base/icons'; +import { BUTTON_MODES } from '../../../chat/constants'; +import AbstractPollCreate from '../AbstractPollCreate'; +import type { AbstractProps } from '../AbstractPollCreate'; + +import { chatStyles, dialogStyles } from './styles'; + +const PollCreate = (props: AbstractProps) => { + + + const { + addAnswer, + answers, + isSubmitDisabled, + onSubmit, + question, + removeAnswer, + setAnswer, + setCreateMode, + setQuestion, + t + } = props; + + const answerListRef = useRef(null); + + /* + * This ref stores the Array of answer input fields, allowing us to focus on them. + * This array is maintained by registerfieldRef and the useEffect below. + */ + const answerInputs = useRef([]); + const registerFieldRef = useCallback((i, input) => { + if (input === null) { + return; + } + answerInputs.current[i] = input; + }, + [ answerInputs ] + ); + + useEffect(() => { + answerInputs.current = answerInputs.current.slice(0, answers.length); + }, [ answers ]); + + /* + * This state allows us to requestFocus asynchronously, without having to worry + * about whether a newly created input field has been rendered yet or not. + */ + const [ lastFocus, requestFocus ] = useState(null); + + useEffect(() => { + if (lastFocus === null) { + return; + } + const input = answerInputs.current[lastFocus]; + + if (input === undefined) { + return; + } + input.focus(); + + }, [ answerInputs, lastFocus ]); + + + const onQuestionKeyDown = useCallback(() => { + answerInputs.current[0].focus(); + }); + + // Called on keypress in answer fields + const onAnswerKeyDown = useCallback((index: number, ev) => { + const { key } = ev.nativeEvent; + const currentText = answers[index]; + + if (key === 'Backspace' && currentText === '' && answers.length > 1) { + removeAnswer(index); + requestFocus(index > 0 ? index - 1 : 0); + } + }, [ answers, addAnswer, removeAnswer, requestFocus ]); + + /* eslint-disable react/no-multi-comp */ + const createIconButton = (icon, onPress, style) => ( + + + + ); + + + /* eslint-disable react/jsx-no-bind */ + const renderListItem = ({ index }: { index: number }) => + + // padding to take into account the two default options + ( + + setAnswer(index, text) } + onKeyPress = { ev => onAnswerKeyDown(index, ev) } + placeholder = { t('polls.create.answerPlaceholder', { index: index + 1 }) } + ref = { input => registerFieldRef(index, input) } + style = { dialogStyles.field } + value = { answers[index] } /> + + {answers.length > 2 + && createIconButton(IconClose, () => removeAnswer(index)) + } + + ); + + return ( + + + + index.toString() } + ref = { answerListRef } + renderItem = { renderListItem } /> + + + + + + + + + + + + ); + +}; + +/* + * We apply AbstractPollCreate to fill in the AbstractProps common + * to both the web and native implementations. + */ +// eslint-disable-next-line new-cap +export default AbstractPollCreate(PollCreate); diff --git a/react/features/polls/components/native/PollItem.js b/react/features/polls/components/native/PollItem.js new file mode 100644 index 000000000..2b9722a40 --- /dev/null +++ b/react/features/polls/components/native/PollItem.js @@ -0,0 +1,40 @@ +// @flow + +import React from 'react'; +import { View } from 'react-native'; +import { useSelector } from 'react-redux'; + +import { shouldShowResults } from '../../functions'; + +import { chatStyles } from './styles'; + +import { PollAnswer, PollResults } from '.'; + +type Props = { + + /** + * Id of the poll + */ + pollId: string, + +} + +const PollItem = ({ pollId }: Props) => { + const showResults = useSelector(state => shouldShowResults(state, pollId)); + + return ( + + { showResults + ? + : + } + + + ); +}; + +export default PollItem; diff --git a/react/features/polls/components/native/PollResults.js b/react/features/polls/components/native/PollResults.js new file mode 100644 index 000000000..2f79cef17 --- /dev/null +++ b/react/features/polls/components/native/PollResults.js @@ -0,0 +1,120 @@ +// @flow + +import React, { useCallback } from 'react'; +import { View, Text, FlatList, TouchableOpacity } from 'react-native'; + +import AbstractPollResults from '../AbstractPollResults'; +import type { AbstractProps, AnswerInfo } from '../AbstractPollResults'; + +import { chatStyles, dialogStyles, resultsStyles } from './styles'; + + +/** + * Component that renders the poll results. + * + * @param {Props} props - The passed props. + * @returns {React.Node} + */ +const PollResults = (props: AbstractProps) => { + const { + answers, + changeVote, + haveVoted, + showDetails, + question, + t, + toggleIsDetailed + } = props; + + /* eslint-disable react/no-multi-comp */ + /** + * Render a header summing up answer information. + * + * @param {string} answer - The name of the answer. + * @param {number} percentage - The percentage of voters. + * @param {number} nbVotes - The number of collected votes. + * @returns {React.Node} + */ + const renderHeader = (answer: string, percentage: number, nbVotes: number) => ( + + { answer } + ({nbVotes}) {percentage}% + + {/* { answer } - { percentage }% + + { t('polls.answer.vote', { count: nbVotes }) } + */} + + ); + + /** + * Render voters of and answer + * @param {AnswerInfo} answer - the answer info + * @returns {React.Node} + */ + const renderRow = useCallback((answer: AnswerInfo) => { + const { name, percentage, voters, voterCount } = answer; + + if (showDetails) { + return ( + + { renderHeader(name, percentage, voterCount) } + { voters && voterCount > 0 + && + {voters.map(({ id, name: voterName }) => + { voterName } + )} + } + + ); + } + + + // else, we display a simple list + // We add a progress bar by creating an empty view of width equal to percentage. + return ( + + { renderHeader(answer.name, percentage, voterCount) } + + + + + ); + + }, [ showDetails ]); + + /* eslint-disable react/jsx-no-bind */ + return ( + + + { question } + + index.toString() } + renderItem = { answer => renderRow(answer.item) } /> + + + + {showDetails ? t('polls.results.hideDetailedResults') : t('polls.results.showDetailedResults')} + + + + + {haveVoted ? t('polls.results.changeVote') : t('polls.results.vote')} + + + + + + ); +}; + +/* + * We apply AbstractPollResults to fill in the AbstractProps common + * to both the web and native implementations. + */ +// eslint-disable-next-line new-cap +export default AbstractPollResults(PollResults); diff --git a/react/features/polls/components/native/PollsList.js b/react/features/polls/components/native/PollsList.js new file mode 100644 index 000000000..1221346c0 --- /dev/null +++ b/react/features/polls/components/native/PollsList.js @@ -0,0 +1,53 @@ +// @flow + +import React, { useCallback, useEffect, useRef } from '@atlaskit/checkbox'; +import { useTranslation } from 'react-i18next'; +import { FlatList } from 'react-native'; +import { Text } from 'react-native-paper'; +import { useSelector } from 'react-redux'; + +import { chatStyles } from './styles'; + +import { PollItem } from '.'; + + +const PollsList = () => { + + const polls = useSelector(state => state['features/polls'].polls); + const { t } = useTranslation(); + const listPolls = Object.keys(polls); + + const renderItem = useCallback(({ item }) => ( + ) + , []); + + const flatlistRef = useRef(); + + const scrollToBottom = () => { + flatlistRef.current.scrollToEnd({ animating: true }); + }; + + useEffect(() => { + scrollToBottom(); + }, [ polls ]); + + return ( + <> + {listPolls.length === 0 + && + {t('polls.results.empty')} + } + index.toString() } + ref = { flatlistRef } + renderItem = { renderItem } /> + + ); +}; + +export default PollsList; diff --git a/react/features/polls/components/native/PollsPane.js b/react/features/polls/components/native/PollsPane.js new file mode 100644 index 000000000..0d48d7b45 --- /dev/null +++ b/react/features/polls/components/native/PollsPane.js @@ -0,0 +1,45 @@ +/* eslint-disable react-native/no-color-literals */ +// @flow + +import React from 'react'; +import { View } from 'react-native'; +import { Button } from 'react-native-paper'; + +import { BUTTON_MODES } from '../../../chat/constants'; +import AbstractPollsPane from '../AbstractPollsPane'; +import type { AbstractProps } from '../AbstractPollsPane'; + +import PollCreate from './PollCreate'; +import PollsList from './PollsList'; +import { chatStyles } from './styles'; + +const PollsPane = (props: AbstractProps) => { + + const { createMode, onCreate, setCreateMode, t } = props; + + return ( + + { createMode + ? + : + {/* */} + + + } + + ); +}; + + +/* + * We apply AbstractPollsPane to fill in the AbstractProps common + * to both the web and native implementations. + */ +// eslint-disable-next-line new-cap +export default AbstractPollsPane(PollsPane); diff --git a/react/features/polls/components/native/index.js b/react/features/polls/components/native/index.js new file mode 100644 index 000000000..81b387400 --- /dev/null +++ b/react/features/polls/components/native/index.js @@ -0,0 +1,7 @@ +// @flow + +export { default as PollResults } from './PollResults'; +export { default as PollsPane } from './PollsPane'; +export { default as PollItem } from './PollItem'; +export { default as PollAnswer } from './PollAnswer'; +export { default as PollCreate } from './PollCreate'; diff --git a/react/features/polls/components/native/styles.js b/react/features/polls/components/native/styles.js new file mode 100644 index 000000000..733bb6ad9 --- /dev/null +++ b/react/features/polls/components/native/styles.js @@ -0,0 +1,195 @@ +// @flow + +import { schemeColor } from '../../../base/color-scheme'; +import { ColorPalette, createStyleSheet } from '../../../base/styles'; + +export const answerStyles = createStyleSheet({ + question: { + fontSize: 24, + fontWeight: 'bold', + marginBottom: 6 + }, + answer: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 3 + }, + option: { + flexShrink: 1 + } +}); + +export const dialogStyles = createStyleSheet({ + question: { + fontSize: 16, + fontWeight: 'bold', + marginVertical: 4 + }, + + optionContainer: { + flexDirection: 'row' + }, + + field: { + borderBottomWidth: 1, + borderColor: ColorPalette.blue, + fontSize: 14, + flexGrow: 1, + paddingBottom: 0, + flexShrink: 1 + }, + + buttonContainer: { + justifyContent: 'flex-end', + alignItems: 'center' + }, + + icon: { + color: ColorPalette.white, + backgroundColor: ColorPalette.blue, + borderRadius: 5, + margin: 0 + }, + + plusButton: { + marginTop: 8 + } +}); + +export const resultsStyles = createStyleSheet({ + title: { + fontSize: 24, + fontWeight: 'bold' + }, + + barContainer: { + backgroundColor: '#ccc', + borderRadius: 3, + width: '100%', + height: 6, + marginTop: 2 + }, + + bar: { + backgroundColor: ColorPalette.blue, + borderRadius: 3, + height: 6 + }, + + voters: { + borderRadius: 3, + borderWidth: 1, + borderColor: 'gray', + padding: 2, + marginHorizontal: 8, + marginVertical: 4 + }, + + answerContainer: { + marginVertical: 2, + maxWidth: '100%' + }, + + answerHeader: { + flexDirection: 'row', + justifyContent: 'space-between' + }, + + answer: { + flexShrink: 1 + }, + + answerVoteCount: { + paddingLeft: 10 + }, + + chatQuestion: { + fontWeight: 'bold' + } +}); + +export const chatStyles = createStyleSheet({ + messageFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + fontSize: 11, + marginTop: 6 + }, + + showDetails: { + fontWeight: 'bold' + }, + + noPollText: { + flex: 1, + color: schemeColor('displayName'), + textAlign: 'center', + paddingTop: '10%' + }, + + pollItemContainer: { + borderRadius: 4, + borderColor: '#2183ad', + borderWidth: 2, + padding: 16, + marginBottom: 8 + }, + + pollCreateContainer: { + flex: 1, + justifyContent: 'space-between' + }, + + pollCreateSubContainer: { + flex: 1 + }, + + pollCreateButton: { + flex: 1, + marginHorizontal: 8 + }, + + buttonRow: { + flexDirection: 'row' + }, + + answerContent: { + paddingBottom: 8 + }, + + switchRow: { + alignItems: 'center', + flexDirection: 'row', + padding: 6 + }, + + pollCreateAddButton: { + margin: 8 + }, + + toggleText: { + color: ColorPalette.blue, + paddingTop: 16 + }, + + createPollButton: { + padding: 8, + margin: 4 + }, + + PollPane: { + flex: 1, + padding: 8 + }, + + PollPaneContent: { + justifyContent: 'space-between', + flex: 1 + }, + + bottomLinks: { + flexDirection: 'row', + justifyContent: 'space-between' + } +}); diff --git a/react/features/polls/components/web/PollAnswer.js b/react/features/polls/components/web/PollAnswer.js new file mode 100644 index 000000000..01ebbf332 --- /dev/null +++ b/react/features/polls/components/web/PollAnswer.js @@ -0,0 +1,69 @@ +// @flow + +import { Checkbox } from '@atlaskit/checkbox'; +import React from 'react'; + +import AbstractPollAnswer from '../AbstractPollAnswer'; +import type { AbstractProps } from '../AbstractPollAnswer'; + + +const PollAnswer = (props: AbstractProps) => { + + const { + checkBoxStates, + poll, + setCheckbox, + skipAnswer, + submitAnswer, + t + } = props; + + return ( +
+
+
+ { poll.question } +
+
+
    + { + poll.answers.map((answer, index) => ( +
  1. + { answer.name } } + // eslint-disable-next-line react/jsx-no-bind + onChange = { ev => setCheckbox(index, ev.target.checked) } + size = 'large' /> +
    2. + )) + } +
+
+ + +
+ +
+ ); +}; + +/* + * We apply AbstractPollAnswer to fill in the AbstractProps common + * to both the web and native implementations. + */ +// eslint-disable-next-line new-cap +export default AbstractPollAnswer(PollAnswer); diff --git a/react/features/polls/components/web/PollCreate.js b/react/features/polls/components/web/PollCreate.js new file mode 100644 index 000000000..fb81eef04 --- /dev/null +++ b/react/features/polls/components/web/PollCreate.js @@ -0,0 +1,248 @@ +// @flow + +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +import { Icon, IconMenu } from '../../../base/icons'; +import { Tooltip } from '../../../base/tooltip'; +import AbstractPollCreate from '../AbstractPollCreate'; +import type { AbstractProps } from '../AbstractPollCreate'; + + +const PollCreate = (props: AbstractProps) => { + + + const { + addAnswer, + answers, + isSubmitDisabled, + moveAnswer, + onSubmit, + question, + removeAnswer, + setAnswer, + setCreateMode, + setQuestion, + t + } = props; + + /* + * This ref stores the Array of answer input fields, allowing us to focus on them. + * This array is maintained by registerfieldRef and the useEffect below. + */ + const answerInputs = useRef([]); + const registerFieldRef = useCallback((i, r) => { + if (r === null) { + return; + } + answerInputs.current[i] = r; + }, [ answerInputs ]); + + useEffect(() => { + answerInputs.current = answerInputs.current.slice(0, answers.length); + }, [ answers ]); + + /* + * This state allows us to requestFocus asynchronously, without having to worry + * about whether a newly created input field has been rendered yet or not. + */ + const [ lastFocus, requestFocus ] = useState(null); + + useEffect(() => { + if (lastFocus === null) { + return; + } + const input = answerInputs.current[lastFocus]; + + if (input === undefined) { + return; + } + input.focus(); + }, [ lastFocus ]); + + const checkModifiers = useCallback(ev => { + // Because this isn't done automatically on MacOS + if (ev.key === 'Enter' && ev.metaKey) { + ev.preventDefault(); + onSubmit(); + + return; + } + if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) { + return; + } + }); + + const onQuestionKeyDown = useCallback(ev => { + if (checkModifiers(ev)) { + return; + } + + if (ev.key === 'Enter') { + requestFocus(0); + ev.preventDefault(); + } + }); + + // Called on keypress in answer fields + const onAnswerKeyDown = useCallback((i, ev) => { + if (checkModifiers(ev)) { + return; + } + + if (ev.key === 'Enter') { + addAnswer(i + 1); + requestFocus(i + 1); + ev.preventDefault(); + } else if (ev.key === 'Backspace' && ev.target.value === '' && answers.length > 1) { + removeAnswer(i); + requestFocus(i > 0 ? i - 1 : 0); + ev.preventDefault(); + } else if (ev.key === 'ArrowDown') { + if (i === answers.length - 1) { + addAnswer(); + } + requestFocus(i + 1); + ev.preventDefault(); + } else if (ev.key === 'ArrowUp') { + if (i === 0) { + addAnswer(0); + requestFocus(0); + } else { + requestFocus(i - 1); + } + ev.preventDefault(); + } + }, [ answers, addAnswer, removeAnswer, requestFocus ]); + + const [ grabbing, setGrabbing ] = useState(null); + + const onGrab = useCallback((i, ev) => { + if (ev.button !== 0) { + return; + } + setGrabbing(i); + window.addEventListener('mouseup', () => { + setGrabbing(_grabbing => { + requestFocus(_grabbing); + + return null; + }); + }, { once: true }); + }); + const onMouseOver = useCallback(i => { + if (grabbing !== null && grabbing !== i) { + moveAnswer(grabbing, i); + setGrabbing(i); + } + }); + + const autogrow = ev => { + const el = ev.target; + + el.style.height = '1px'; + el.style.height = `${el.scrollHeight + 2}px`; + }; + + /* eslint-disable react/jsx-no-bind */ + return (
+
+
+ { t('polls.create.create') } +
+
+ + { t('polls.create.pollQuestion') } + +