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

src/components/media_upload/media_upload.js

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

src/components/post_status_form/post_status_form.vue

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

src/services/api/api.service.js

@@ -9,10 +9,8 @@ const FAVORITE_URL = '/api/favorites/create'
 const UNFAVORITE_URL = '/api/favorites/destroy'
 const RETWEET_URL = '/api/statuses/retweet'
 const UNRETWEET_URL = '/api/statuses/unretweet'
-const STATUS_UPDATE_URL = '/api/statuses/update.json'
 const STATUS_DELETE_URL = '/api/statuses/destroy'
 const STATUS_URL = '/api/statuses/show'
-const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
 const CONVERSATION_URL = '/api/statusnet/conversation'
 const MENTIONS_URL = '/api/statuses/mentions.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_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
 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 { 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 { StatusCodeError } from '../errors/errors'
 
@@ -439,23 +439,23 @@ const unretweet = ({ id, credentials }) => {
   })
 }
 
-const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks}) => {
-  const idsText = mediaIds.join(',')
+const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType}) => {
   const form = new FormData()
 
   form.append('status', status)
   form.append('source', 'Pleroma FE')
-  if (noAttachmentLinks) form.append('no_attachment_links', noAttachmentLinks)
   if (spoilerText) form.append('spoiler_text', spoilerText)
   if (visibility) form.append('visibility', visibility)
   if (sensitive) form.append('sensitive', sensitive)
   if (contentType) form.append('content_type', contentType)
-  form.append('media_ids', idsText)
+  mediaIds.forEach(val => {
+    form.append('media_ids[]', val)
+  })
   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,
     method: 'POST',
     headers: authHeaders(credentials)
@@ -480,13 +480,13 @@ const deleteStatus = ({ id, credentials }) => {
 }
 
 const uploadMedia = ({formData, credentials}) => {
-  return fetch(MEDIA_UPLOAD_URL, {
+  return fetch(MASTODON_MEDIA_UPLOAD_URL, {
     body: formData,
     method: 'POST',
     headers: authHeaders(credentials)
   })
-    .then((response) => response.text())
-    .then((text) => (new DOMParser()).parseFromString(text, 'application/xml'))
+    .then((data) => data.json())
+    .then((data) => parseAttachment(data))
 }
 
 const followImport = ({params, credentials}) => {

src/services/entity_normalizer/entity_normalizer.service.js

@@ -128,14 +128,15 @@ export const parseUser = (data) => {
   return output
 }
 
-const parseAttachment = (data) => {
+export const parseAttachment = (data) => {
   const output = {}
   const masto = !data.hasOwnProperty('oembed')
 
   if (masto) {
     // 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.id = data.id
   } else {
     output.mimetype = data.mimetype
     // output.meta = ??? missing

src/services/status_poster/status_poster.service.js

@@ -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 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) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {
@@ -26,25 +26,7 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, media =
 const uploadMedia = ({ store, formData }) => {
   const credentials = store.state.users.currentUser.credentials
 
-  return apiService.uploadMedia({ credentials, formData }).then((xml) => {
-    // 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
-  })
+  return apiService.uploadMedia({ credentials, formData })
 }
 
 const statusPosterService = {