Merge branch 'feature/attachment-form-improvements' into 'develop'

Fix bugs related to uploading attachments

See merge request !5

src/components/attachment/attachment.js

@@ -1,4 +1,5 @@
 import nsfwImage from '../../assets/nsfw.jpg'
+import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const Attachment = {
   props: [
@@ -9,25 +10,7 @@ const Attachment = {
   data: () => ({ nsfwImage }),
   computed: {
     type () {
-      let type = 'unknown'
-
-      if (this.attachment.mimetype.match(/text\/html/)) {
-        type = 'html'
-      }
-
-      if (this.attachment.mimetype.match(/image/)) {
-        type = 'image'
-      }
-
-      if (this.attachment.mimetype.match(/video\/(webm|mp4)/)) {
-        type = 'video'
-      };
-
-      if (this.attachment.mimetype.match(/ogg|audio/)) {
-        type = 'audio'
-      }
-
-      return type
+      return fileTypeService.fileType(this.attachment.mimetype)
     }
   },
   methods: {
@@ -37,4 +20,4 @@ const Attachment = {
   }
 }
 
-export default Attachment
+export default Attachment

src/components/attachment/attachment.vue

@@ -4,7 +4,10 @@
       <img :key="nsfwImage" :src="nsfwImage"></img>
     </a>
 
-    <a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
+    <a class="image-attachment" v-if="type === 'image' && !nsfw"
+      :href="attachment.url" target="_blank">
+      <img :src="attachment.url"></img>
+    </a>
 
     <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
 

src/components/media_upload/media_upload.vue

@@ -15,4 +15,8 @@
      font-size: 26px;
      flex: 1;
  }
+
+ .icon-upload {
+     cursor: pointer;
+ }
 </style>

src/components/post_status_form/post_status_form.js

@@ -1,5 +1,6 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
+import fileTypeService from '../../services/file_type/file_type.service.js'
 
 import { reject, map, uniqBy } from 'lodash'
 
@@ -36,6 +37,7 @@ const PostStatusForm = {
     }
 
     return {
+      submitDisabled: false,
       newStatus: {
         status: statusText,
         files: []
@@ -58,6 +60,20 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
+      this.enableSubmit()
+    },
+    removeMediaFile (fileInfo) {
+      let index = this.newStatus.files.indexOf(fileInfo)
+      this.newStatus.files.splice(index, 1)
+    },
+    disableSubmit () {
+      this.submitDisabled = true
+    },
+    enableSubmit () {
+      this.submitDisabled = false
+    },
+    type (fileInfo) {
+      return fileTypeService.fileType(fileInfo.mimetype)
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="post-status-form">
-    <form v-on:submit.prevent="postStatus(newStatus)">
+    <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
         <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
-          <img class="thumbnail media-upload" :src="file.image"></img>
+          <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
+          <video v-if="type(file) === 'video'" :src="file.image" controls></video>
+          <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
+          <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload v-on:uploaded="addMediaFile"></media-upload>
-        <button type="submit" class="btn btn-default" >Submit</button>
+        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit"></media-upload>
+        <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
       </div>
     </form>
   </div>
@@ -45,6 +49,18 @@
          flex-direction: column;
          padding: 0.5em;
      }
+
+     .btn {
+         cursor: pointer;
+     }
+
+     .btn[disabled] {
+         cursor: not-allowed;
+     }
+
+     .icon-cancel {
+         cursor: pointer;
+     }
  }
 
 </style>

src/services/file_type/file_type.service.js

@@ -0,0 +1,27 @@
+const fileType = (typeString) => {
+  let type = 'unknown'
+
+  if (typeString.match(/text\/html/)) {
+    type = 'html'
+  }
+
+  if (typeString.match(/image/)) {
+    type = 'image'
+  }
+
+  if (typeString.match(/video\/(webm|mp4)/)) {
+    type = 'video'
+  }
+
+  if (typeString.match(/audio|ogg/)) {
+    type = 'audio'
+  }
+
+  return type
+}
+
+const fileTypeService = {
+  fileType
+}
+
+export default fileTypeService

src/services/status_poster/status_poster.service.js

@@ -19,7 +19,8 @@ const uploadMedia = ({ store, formData }) => {
     return {
       id: xml.getElementsByTagName('media_id')[0].textContent,
       url: xml.getElementsByTagName('media_url')[0].textContent,
-      image: xml.getElementsByTagName('atom:link')[0].getAttribute('href')
+      image: xml.getElementsByTagName('atom:link')[0].getAttribute('href'),
+      mimetype: xml.getElementsByTagName('atom:link')[0].getAttribute('type')
     }
   })
 }

static/font/config.json

@@ -7,11 +7,29 @@
   "ascent": 850,
   "glyphs": [
     {
-      "uid": "09feb4465d9bd1364f4e301c9ddbaa92",
-      "css": "retweet",
+      "uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
+      "css": "spin4",
+      "code": 59444,
+      "src": "fontelico"
+    },
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
       "code": 59392,
       "src": "fontawesome"
     },
+    {
+      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
+      "css": "upload",
+      "code": 59393,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "2a6740fc2f9d0edea54205963f662594",
+      "css": "spin3",
+      "code": 59442,
+      "src": "fontelico"
+    },
     {
       "uid": "c6be5a58ee4e63a5ec399c2b0d15cf2c",
       "css": "reply",
@@ -21,32 +39,20 @@
     {
       "uid": "474656633f79ea2f1dad59ff63f6bf07",
       "css": "star",
-      "code": 59393,
+      "code": 59394,
       "src": "fontawesome"
     },
     {
       "uid": "d17030afaecc1e1c22349b99f3c4992a",
       "css": "star-empty",
-      "code": 59394,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
-      "css": "upload",
       "code": 59395,
       "src": "fontawesome"
     },
     {
-      "uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
-      "css": "spin4",
-      "code": 59444,
-      "src": "fontelico"
-    },
-    {
-      "uid": "2a6740fc2f9d0edea54205963f662594",
-      "css": "spin3",
-      "code": 59442,
-      "src": "fontelico"
+      "uid": "09feb4465d9bd1364f4e301c9ddbaa92",
+      "css": "retweet",
+      "code": 59396,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -1,8 +1,9 @@
 
-.icon-retweet:before { content: '\e800'; } /* '' */
-.icon-star:before { content: '\e801'; } /* '' */
-.icon-star-empty:before { content: '\e802'; } /* '' */
-.icon-upload:before { content: '\e803'; } /* '' */
+.icon-cancel:before { content: '\e800'; } /* '' */
+.icon-upload:before { content: '\e801'; } /* '' */
+.icon-star:before { content: '\e802'; } /* '' */
+.icon-star-empty:before { content: '\e803'; } /* '' */
+.icon-retweet:before { content: '\e804'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -1,8 +1,9 @@
 
-.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -10,10 +10,11 @@
   /* font-size: 120%; */
 }
  
-.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?84025004');
-  src: url('../font/fontello.eot?84025004#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?84025004') format('woff2'),
-       url('../font/fontello.woff?84025004') format('woff'),
-       url('../font/fontello.ttf?84025004') format('truetype'),
-       url('../font/fontello.svg?84025004#fontello') format('svg');
+  src: url('../font/fontello.eot?49728550');
+  src: url('../font/fontello.eot?49728550#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?49728550') format('woff2'),
+       url('../font/fontello.woff?49728550') format('woff'),
+       url('../font/fontello.ttf?49728550') format('truetype'),
+       url('../font/fontello.svg?49728550#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?84025004#fontello') format('svg');
+    src: url('../font/fontello.svg?49728550#fontello') format('svg');
   }
 }
 */
@@ -55,10 +55,11 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
  
-.icon-retweet:before { content: '\e800'; } /* '' */
-.icon-star:before { content: '\e801'; } /* '' */
-.icon-star-empty:before { content: '\e802'; } /* '' */
-.icon-upload:before { content: '\e803'; } /* '' */
+.icon-cancel:before { content: '\e800'; } /* '' */
+.icon-upload:before { content: '\e801'; } /* '' */
+.icon-star:before { content: '\e802'; } /* '' */
+.icon-star-empty:before { content: '\e803'; } /* '' */
+.icon-retweet:before { content: '\e804'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?69028437');
-      src: url('./font/fontello.eot?69028437#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?69028437') format('woff'),
-           url('./font/fontello.ttf?69028437') format('truetype'),
-           url('./font/fontello.svg?69028437#fontello') format('svg');
+      src: url('./font/fontello.eot?17074388');
+      src: url('./font/fontello.eot?17074388#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?17074388') format('woff'),
+           url('./font/fontello.ttf?17074388') format('truetype'),
+           url('./font/fontello.svg?17074388#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -301,12 +301,13 @@ body {
     </div>
     <div id="icons" class="container">
       <div class="row">
-        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe800;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe800</span></div>
-        <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-star">&#xe801;</i> <span class="i-name">icon-star</span><span class="i-code">0xe801</span></div>
-        <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe802;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe802</span></div>
-        <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-upload">&#xe803;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe803</span></div>
+        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe800;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div>
+        <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-upload">&#xe801;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe801</span></div>
+        <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
+        <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
         <div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
         <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
         <div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>

static/font/font/fontello.svg

@@ -6,13 +6,15 @@
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="retweet" unicode="&#xe800;" d="M714 11q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
+<glyph glyph-name="cancel" unicode="&#xe800;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
 
-<glyph glyph-name="star" unicode="&#xe801;" d="M929 489q0-12-15-27l-202-197 48-279q0-4 0-12 0-11-6-19t-17-9q-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
+<glyph glyph-name="upload" unicode="&#xe801;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
 
-<glyph glyph-name="star-empty" unicode="&#xe802;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
+<glyph glyph-name="star" unicode="&#xe802;" d="M929 489q0-12-15-27l-202-197 48-279q0-4 0-12 0-11-6-19t-17-9q-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
 
-<glyph glyph-name="upload" unicode="&#xe803;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
+<glyph glyph-name="star-empty" unicode="&#xe803;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="retweet" unicode="&#xe804;" d="M714 11q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
 
 <glyph glyph-name="spin3" unicode="&#xe832;" d="M494 850c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />