Poll WIP (#231):

* frontend WIP
* backend fix

conversejs/custom/plugins/poll/components/poll-view.js

@@ -10,21 +10,49 @@ import '../styles/poll.scss'
 export default class MUCPollView extends CustomElement {
   static get properties () {
     return {
-      model: { type: Object, attribute: true }
+      model: { type: Object, attribute: true },
+      collapsed: { type: Boolean, attribute: false },
+      buttonDisabled: { type: Boolean, attribute: false }
     }
   }
 
   async initialize () {
+    this.collapsed = false
+    this.buttonDisabled = false
     if (!this.model) {
       return
     }
-    this.listenTo(this.model, 'change:current_poll', () => this.requestUpdate())
+    this.listenTo(this.model, 'change:current_poll', () => {
+      this.buttonDisabled = false
+      this.requestUpdate()
+    })
   }
 
   render () {
     const currentPoll = this.model?.get('current_poll')
     return tplPoll(this, currentPoll)
   }
+
+  toggle () {
+    this.collapsed = !this.collapsed
+  }
+
+  voteFor (choice) {
+    if (this.buttonDisabled) { return }
+
+    const currentPoll = this.model?.get('current_poll')
+    if (!currentPoll) { return }
+    if (currentPoll.over) { return }
+
+    console.info('User has voted for choice: ', choice)
+    // We disable vote buttons until next refresh:
+    this.buttonDisabled = true
+    this.requestUpdate()
+
+    this.model.sendMessage({
+      body: '!' + choice.choice
+    })
+  }
 }
 
 api.elements.define('livechat-converse-muc-poll', MUCPollView)

conversejs/custom/plugins/poll/index.js

@@ -45,6 +45,7 @@ converse.plugins.add('livechat-converse-poll', {
         votes: parseInt(poll.getAttribute('votes') ?? 0),
         over: poll.hasAttribute('over'),
         endDate: endDate,
+        time: attrs.time, // this is to be sure that we update the custom element (needed to re-enable buttons)
         choices: choices.map(c => {
           return {
             label: c.textContent,
@@ -81,9 +82,10 @@ converse.plugins.add('livechat-converse-poll', {
         }
 
         console.info('Got a poll message, setting it as the current_poll')
-        this.set('current_poll', attrs.current_poll)
         // this will be displayed by the livechat-converse-muc-poll custom element,
         // which is inserted in the DOM by the muc.js template overload.
+        this.set('current_poll', attrs.current_poll)
+
         if (attrs.current_poll.over) {
           console.info('The poll is over, displaying the message in the chat')
           return this.__super__.onMessage(attrs)

conversejs/custom/plugins/poll/styles/poll.scss

@@ -13,12 +13,25 @@
       border: 1px solid var(--peertube-menu-background);
       margin: 5px;
       padding: 5px;
+      max-height: 150px;
+      overflow-y: scroll;
+
+      .livechat-poll-toggle {
+        background: unset;
+        border: 0;
+        padding-left: 0.25em;
+        padding-right: 0.25em;
+      }
 
       p.livechat-poll-question {
         text-align: center;
         font-weight: bold;
       }
 
+      p.livechat-poll-instructions {
+        text-align: right;
+      }
+
       p.livechat-poll-end {
         text-align: right;
       }
@@ -74,3 +87,28 @@
     }
   }
 }
+
+body[livechat-viewer-mode="on"] {
+  livechat-converse-muc-poll {
+    /* Dont display the poll before user choose a nickname */
+    display: none !important;
+  }
+}
+
+.livechat-readonly {
+  .conversejs {
+    livechat-converse-muc-poll {
+      /* stylelint-disable-next-line no-descending-specificity */
+      & > div {
+        // In readonly mode, dont impose max-height
+        max-height: initial !important;
+        overflow-y: visible !important;
+
+        &.livechat-poll-over {
+          // stop showing poll when over in readonly mode
+          display: none !important;
+        }
+      }
+    }
+  }
+}

conversejs/custom/plugins/poll/templates/poll.js

@@ -6,6 +6,18 @@ import { html } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { __ } from 'i18n'
 
+function _tplPollInstructions (el, currentPoll) {
+  if (currentPoll.over) {
+    return html``
+  }
+
+  // eslint-disable-next-line no-undef
+  const i18nPollInstructions = __(LOC_poll_vote_instructions)
+  return html`<p class="livechat-poll-instructions">
+      ${i18nPollInstructions}
+    </p>`
+}
+
 function _tplPollEnd (el, currentPoll) {
   if (!currentPoll.endDate) {
     return html``
@@ -36,13 +48,9 @@ function _tplChoice (el, currentPoll, choice) {
               <button type="button" class="btn btn-primary btn-sm"
                 @click=${ev => {
                   ev.preventDefault()
-                  if (currentPoll.over) { return }
-
-                  console.info('User has voted for choice: ', choice)
-                  el.model.sendMessage({
-                    body: '!' + choice.choice
-                  })
+                  el.voteFor(choice)
                 }}
+                ?disabled=${el.buttonDisabled}
               >
                 ${i18nChoiceN}
               </button>`
@@ -72,11 +80,36 @@ export function tplPoll (el, currentPoll) {
     return html``
   }
 
-  return html`<div>
-    <p class="livechat-poll-question">${currentPoll.question}</p>
-    <table><tbody>
-      ${repeat(currentPoll.choices ?? [], (c) => c.choice, (c) => _tplChoice(el, currentPoll, c))}
-    </tbody></table>
-    ${_tplPollEnd(el, currentPoll)}
+  return html`<div class="${currentPoll.over ? 'livechat-poll-over' : ''}">
+    <p class="livechat-poll-question">
+      ${el.collapsed
+        ? html`
+          <button @click=${el.toggle} class="livechat-poll-toggle">
+            <converse-icon
+              color="var(--muc-toolbar-btn-color)"
+              class="fa fa-angle-right"
+              size="1em"></converse-icon>
+          </button>`
+        : html`
+          <button @click=${el.toggle} class="livechat-poll-toggle">
+            <converse-icon
+              color="var(--muc-toolbar-btn-color)"
+              class="fa fa-angle-down"
+              size="1em"></converse-icon>
+          </button>`
+      }
+      ${currentPoll.question}
+    </p>
+    ${
+      el.collapsed
+        ? ''
+        : html`
+          <table><tbody>
+            ${repeat(currentPoll.choices ?? [], (c) => c.choice, (c) => _tplChoice(el, currentPoll, c))}
+          </tbody></table>
+          ${_tplPollInstructions(el, currentPoll)}
+          ${_tplPollEnd(el, currentPoll)}
+        `
+    }
   </div>`
 }