diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/attachment/attachment.js | 23 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 5 | ||||
| -rw-r--r-- | src/components/media_upload/media_upload.vue | 4 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 19 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 24 | ||||
| -rw-r--r-- | src/services/file_type/file_type.service.js | 27 | ||||
| -rw-r--r-- | src/services/status_poster/status_poster.service.js | 3 |
7 files changed, 78 insertions, 27 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..9995813e 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' @@ -22,12 +23,14 @@ const PostStatusForm = { props: [ 'replyTo', 'repliedUser', - 'attentions' + 'attentions', + 'submitDisabled' ], components: { MediaUpload }, data () { + this.submitDisabled = false let statusText = '' if (this.replyTo) { @@ -58,6 +61,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') } }) } |