make min/max expiry dynamic

src/boot/after_store.js

@@ -194,13 +194,12 @@ const getNodeInfo = async ({ store }) => {
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
-      store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
-
       const features = metadata.features
       store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
       store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
+      store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
 
       store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
       store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })

src/components/media_upload/media_upload.vue

@@ -13,7 +13,8 @@
 <style>
  .media-upload {
      font-size: 26px;
-     flex: 1;
+     min-width: 50px;
+     flex: 0;
  }
 
  .icon-upload {

src/components/poll/poll_form.js

@@ -1,12 +1,13 @@
+import * as DateUtils from 'src/services/date_utils/date_utils.js'
+
 export default {
   name: 'PollForm',
   props: ['visible'],
   data: () => ({
     pollType: 'single',
     options: ['', ''],
-    expiryAmount: 2,
-    expiryUnit: 'hours',
-    expiryUnits: ['minutes', 'hours', 'days']
+    expiryAmount: 10,
+    expiryUnit: 'minutes'
   }),
   computed: {
     pollLimits () {
@@ -17,17 +18,40 @@ export default {
     },
     maxLength () {
       return this.pollLimits.max_option_chars
+    },
+    expiryUnits () {
+      const allUnits = ['minutes', 'hours', 'days']
+      const expiry = this.convertExpiryFromUnit
+      return allUnits.filter(
+        unit => this.pollLimits.max_expiration >= expiry(unit, 1)
+      )
+    },
+    minExpirationInCurrentUnit () {
+      return Math.ceil(
+        this.convertExpiryToUnit(
+          this.expiryUnit,
+          this.pollLimits.min_expiration
+        )
+      )
+    },
+    maxExpirationInCurrentUnit () {
+      return Math.floor(
+        this.convertExpiryToUnit(
+          this.expiryUnit,
+          this.pollLimits.max_expiration
+        )
+      )
     }
   },
   methods: {
     clear () {
       this.pollType = 'single'
       this.options = ['', '']
-      this.expiryAmount = 1
+      this.expiryAmount = 10
       this.expiryUnit = 'minutes'
     },
     nextOption (index) {
-      const element = this.$el.querySelector(`#poll-${index+1}`)
+      const element = this.$el.querySelector(`#poll-${index + 1}`)
       if (element) {
         element.focus()
       } else {
@@ -52,17 +76,34 @@ export default {
         this.options.splice(index, 1)
       }
     },
+    convertExpiryToUnit (unit, amount) {
+      // Note: we want seconds and not milliseconds
+      switch (unit) {
+        case 'minutes': return (1000 * amount) / DateUtils.MINUTE
+        case 'hours': return (1000 * amount) / DateUtils.HOUR
+        case 'days': return (1000 * amount) / DateUtils.DAY
+      }
+    },
+    convertExpiryFromUnit (unit, amount) {
+      // Note: we want seconds and not milliseconds
+      switch (unit) {
+        case 'minutes': return 0.001 * amount * DateUtils.MINUTE
+        case 'hours': return 0.001 * amount * DateUtils.HOUR
+        case 'days': return 0.001 * amount * DateUtils.DAY
+      }
+    },
     expiryAmountChange () {
-      this.expiryAmount = Math.max(1, this.expiryAmount)
-      this.expiryAmount = Math.min(120, this.expiryAmount)
+      this.expiryAmount =
+        Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
+      this.expiryAmount =
+        Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
       this.updatePollToParent()
     },
     updatePollToParent () {
-      const unitMultiplier = this.expiryUnit === 'minutes' ? 60
-        : this.expiryUnit === 'hours' ? 60 * 60
-          : 60 * 60 * 24
-
-      const expiresIn = this.expiryAmount * unitMultiplier
+      const expiresIn = this.convertExpiryFromUnit(
+        this.expiryUnit,
+        this.expiryAmount
+      )
 
       this.$emit('update-poll', {
         options: this.options,

src/components/poll/poll_form.vue

@@ -39,13 +39,16 @@
         <input 
           type="number"
           class="expiry-amount hide-number-spinner"
-          min="1"
-          max="120"
+          :min="minExpirationInCurrentUnit"
+          :max="maxExpirationInCurrentUnit"
           v-model="expiryAmount"
           @change="expiryAmountChange"
         >
         <label class="expiry-unit select">
-          <select v-model="expiryUnit" @change="updatePollToParent">
+          <select 
+            v-model="expiryUnit"
+            @change="expiryAmountChange"
+          >
             <option v-for="unit in expiryUnits" :value="unit">
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
@@ -83,12 +86,14 @@
   .input-container {
     width: 100%;
     input {
+      // Hack: dodge the floating X icon
+      padding-right: 2.5em;
       width: 100%;
     }
   }
 
   .icon-container {
-    // Move the icon over the input box
+    // Hack: Move the icon over the input box
     width: 2em;
     margin-left: -2em;
     z-index: 1;

src/components/post_status_form/post_status_form.js

@@ -7,13 +7,13 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
 
-const buildMentionsString = ({user, attentions}, currentUser) => {
+const buildMentionsString = ({ user, attentions }, currentUser) => {
   let allAttentions = [...attentions]
 
   allAttentions.unshift(user)
 
   allAttentions = uniqBy(allAttentions, 'id')
-  allAttentions = reject(allAttentions, {id: currentUser.id})
+  allAttentions = reject(allAttentions, { id: currentUser.id })
 
   let mentions = map(allAttentions, (attention) => {
     return `@${attention.screen_name}`
@@ -98,7 +98,7 @@ const PostStatusForm = {
           return false
         }
         // eslint-disable-next-line camelcase
-        return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
+        return map(take(matchedUsers, 5), ({ screen_name, name, profile_image_url_original }, index) => ({
           // eslint-disable-next-line camelcase
           screen_name: `@${screen_name}`,
           name: name,
@@ -111,7 +111,7 @@ const PostStatusForm = {
         if (matchedEmoji.length <= 0) {
           return false
         }
-        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
+        return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
           screen_name: `:${shortcode}:`,
           name: '',
           utf: utf || '',
@@ -188,7 +188,8 @@ const PostStatusForm = {
       return this.$store.state.instance.safeDM
     },
     pollsAvailable () {
-      return this.$store.state.instance.pollsAvailable
+      return this.$store.state.instance.pollsAvailable &&
+        this.$store.state.instance.pollLimits.max_options >= 2
     },
     hideScopeNotice () {
       return this.$store.state.config.hideScopeNotice
@@ -243,7 +244,7 @@ const PostStatusForm = {
     onKeydown (e) {
       e.stopPropagation()
     },
-    setCaret ({target: {selectionStart}}) {
+    setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
     },
     postStatus (newStatus) {
@@ -330,7 +331,7 @@ const PostStatusForm = {
     },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
-        e.preventDefault()  // allow dropping text like before
+        e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
     },