7 files changed, 76 insertions, 26 deletions

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 47ca03de..9f751863 100644
--- a/src/components/attachment/attachment.js
+++ b/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
\ No newline at end of file
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index d5578c04..1e49cbeb 100644
--- a/src/components/attachment/attachment.vue
+++ b/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>
 
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index f2f0b83f..3302db37 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -15,4 +15,8 @@
      font-size: 26px;
      flex: 1;
  }
+
+ .icon-upload {
+     cursor: pointer;
+ }
 </style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index f764a01b..b17fdaa1 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/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)
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 476ee51e..b18e5d80 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/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>
diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
new file mode 100644
index 00000000..f9d3b466
--- /dev/null
+++ b/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
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 1cc97c7a..5b50231a 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/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')
     }
   })
 }