Merge branch '435-mastoapi-composing-new-post' into 'develop'

Transition to MastoAPI: composing new status and media upload

Closes #435

See merge request pleroma/pleroma-fe!686
This commit is contained in:
HJ 2019-03-25 16:42:20 +00:00
commit 153ad57007
5 changed files with 22 additions and 39 deletions

View File

@ -20,7 +20,7 @@ const mediaUpload = {
return return
} }
const formData = new FormData() const formData = new FormData()
formData.append('media', file) formData.append('file', file)
self.$emit('uploading') self.$emit('uploading')
self.uploading = true self.uploading = true

View File

@ -84,10 +84,10 @@
<div class="media-upload-wrapper" v-for="file in newStatus.files"> <div class="media-upload-wrapper" v-for="file in newStatus.files">
<i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i> <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
<div class="media-upload-container attachment"> <div class="media-upload-container attachment">
<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
<video v-if="type(file) === 'video'" :src="file.image" controls></video> <video v-if="type(file) === 'video'" :src="file.url" controls></video>
<audio v-if="type(file) === 'audio'" :src="file.image" controls></audio> <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
<a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a> <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -9,10 +9,8 @@ const FAVORITE_URL = '/api/favorites/create'
const UNFAVORITE_URL = '/api/favorites/destroy' const UNFAVORITE_URL = '/api/favorites/destroy'
const RETWEET_URL = '/api/statuses/retweet' const RETWEET_URL = '/api/statuses/retweet'
const UNRETWEET_URL = '/api/statuses/unretweet' const UNRETWEET_URL = '/api/statuses/unretweet'
const STATUS_UPDATE_URL = '/api/statuses/update.json'
const STATUS_DELETE_URL = '/api/statuses/destroy' const STATUS_DELETE_URL = '/api/statuses/destroy'
const STATUS_URL = '/api/statuses/show' const STATUS_URL = '/api/statuses/show'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
const CONVERSATION_URL = '/api/statusnet/conversation' const CONVERSATION_URL = '/api/statusnet/conversation'
const MENTIONS_URL = '/api/statuses/mentions.json' const MENTIONS_URL = '/api/statuses/mentions.json'
const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json' const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json'
@ -46,9 +44,11 @@ const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block`
const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock` const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute` const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute` const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
import { each, map } from 'lodash' import { each, map } from 'lodash'
import { parseStatus, parseUser, parseNotification } from '../entity_normalizer/entity_normalizer.service.js' import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
import 'whatwg-fetch' import 'whatwg-fetch'
import { StatusCodeError } from '../errors/errors' import { StatusCodeError } from '../errors/errors'
@ -439,23 +439,23 @@ const unretweet = ({ id, credentials }) => {
}) })
} }
const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks}) => { const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType}) => {
const idsText = mediaIds.join(',')
const form = new FormData() const form = new FormData()
form.append('status', status) form.append('status', status)
form.append('source', 'Pleroma FE') form.append('source', 'Pleroma FE')
if (noAttachmentLinks) form.append('no_attachment_links', noAttachmentLinks)
if (spoilerText) form.append('spoiler_text', spoilerText) if (spoilerText) form.append('spoiler_text', spoilerText)
if (visibility) form.append('visibility', visibility) if (visibility) form.append('visibility', visibility)
if (sensitive) form.append('sensitive', sensitive) if (sensitive) form.append('sensitive', sensitive)
if (contentType) form.append('content_type', contentType) if (contentType) form.append('content_type', contentType)
form.append('media_ids', idsText) mediaIds.forEach(val => {
form.append('media_ids[]', val)
})
if (inReplyToStatusId) { if (inReplyToStatusId) {
form.append('in_reply_to_status_id', inReplyToStatusId) form.append('in_reply_to_id', inReplyToStatusId)
} }
return fetch(STATUS_UPDATE_URL, { return fetch(MASTODON_POST_STATUS_URL, {
body: form, body: form,
method: 'POST', method: 'POST',
headers: authHeaders(credentials) headers: authHeaders(credentials)
@ -480,13 +480,13 @@ const deleteStatus = ({ id, credentials }) => {
} }
const uploadMedia = ({formData, credentials}) => { const uploadMedia = ({formData, credentials}) => {
return fetch(MEDIA_UPLOAD_URL, { return fetch(MASTODON_MEDIA_UPLOAD_URL, {
body: formData, body: formData,
method: 'POST', method: 'POST',
headers: authHeaders(credentials) headers: authHeaders(credentials)
}) })
.then((response) => response.text()) .then((data) => data.json())
.then((text) => (new DOMParser()).parseFromString(text, 'application/xml')) .then((data) => parseAttachment(data))
} }
const followImport = ({params, credentials}) => { const followImport = ({params, credentials}) => {

View File

@ -128,14 +128,15 @@ export const parseUser = (data) => {
return output return output
} }
const parseAttachment = (data) => { export const parseAttachment = (data) => {
const output = {} const output = {}
const masto = !data.hasOwnProperty('oembed') const masto = !data.hasOwnProperty('oembed')
if (masto) { if (masto) {
// Not exactly same... // Not exactly same...
output.mimetype = data.type output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
output.meta = data.meta // not present in BE yet output.meta = data.meta // not present in BE yet
output.id = data.id
} else { } else {
output.mimetype = data.mimetype output.mimetype = data.mimetype
// output.meta = ??? missing // output.meta = ??? missing

View File

@ -4,7 +4,7 @@ import apiService from '../api/api.service.js'
const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => { const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
const mediaIds = map(media, 'id') const mediaIds = map(media, 'id')
return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks: store.state.instance.noAttachmentLinks}) return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType})
.then((data) => { .then((data) => {
if (!data.error) { if (!data.error) {
store.dispatch('addNewStatuses', { store.dispatch('addNewStatuses', {
@ -26,25 +26,7 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, media =
const uploadMedia = ({ store, formData }) => { const uploadMedia = ({ store, formData }) => {
const credentials = store.state.users.currentUser.credentials const credentials = store.state.users.currentUser.credentials
return apiService.uploadMedia({ credentials, formData }).then((xml) => { return apiService.uploadMedia({ credentials, formData })
// Firefox and Chrome treat method differently...
let link = xml.getElementsByTagName('link')
if (link.length === 0) {
link = xml.getElementsByTagName('atom:link')
}
link = link[0]
const mediaData = {
id: xml.getElementsByTagName('media_id')[0].textContent,
url: xml.getElementsByTagName('media_url')[0].textContent,
image: link.getAttribute('href'),
mimetype: link.getAttribute('type')
}
return mediaData
})
} }
const statusPosterService = { const statusPosterService = {