separate uploaded media by instance/realm

routes/_actions/instances.js

@@ -34,6 +34,7 @@ export async function logOutOfInstance (instanceName) {
   let instanceThemes = store.get('instanceThemes')
   let loggedInInstancesInOrder = store.get('loggedInInstancesInOrder')
   let composeText = store.get('composeText')
+  let uploadedMedia = store.get('uploadedMedia')
   let currentInstance = store.get('currentInstance')
   loggedInInstancesInOrder.splice(loggedInInstancesInOrder.indexOf(instanceName), 1)
   let newInstance = instanceName === currentInstance
@@ -42,6 +43,7 @@ export async function logOutOfInstance (instanceName) {
   delete loggedInInstances[instanceName]
   delete instanceThemes[instanceName]
   delete composeText[instanceName]
+  delete uploadedMedia[instanceName]
   store.set({
     loggedInInstances: loggedInInstances,
     instanceThemes: instanceThemes,
@@ -50,7 +52,8 @@ export async function logOutOfInstance (instanceName) {
     searchResults: null,
     queryInSearch: '',
     rawComposeText: '',
-    composeText: composeText
+    composeText: composeText,
+    uploadedMedia: uploadedMedia
   })
   store.save()
   toast.say(`Logged out of ${instanceName}`)

routes/_actions/media.js

@@ -2,14 +2,16 @@ import { store } from '../_store/store'
 import { uploadMedia } from '../_api/media'
 import { toast } from '../_utils/toast'
 
-export async function doMediaUpload (file) {
+export async function doMediaUpload (realm, file) {
   let instanceName = store.get('currentInstance')
   let accessToken = store.get('accessToken')
   store.set({uploadingMedia: true})
   try {
     let response = await uploadMedia(instanceName, accessToken, file)
-    let uploadedMedia = store.get('uploadedMedia') || []
-    uploadedMedia.push({
+    let uploadedMedia = store.get('uploadedMedia')
+    uploadedMedia[instanceName] = uploadedMedia[instanceName] || {}
+    uploadedMedia[instanceName][realm] = uploadedMedia[instanceName][realm] || []
+    uploadedMedia[instanceName][realm].push({
       data: response,
       file: file
     })
@@ -22,8 +24,11 @@ export async function doMediaUpload (file) {
   }
 }
 
-export function deleteMedia (i) {
+export function deleteMedia (realm, i) {
   let uploadedMedia = store.get('uploadedMedia')
-  uploadedMedia.splice(i, 1)
+  let instanceName = store.get('currentInstance')
+  let uploadedMediaArray = uploadedMedia[instanceName][realm]
+
+  uploadedMediaArray.splice(i, 1)
   store.set({uploadedMedia})
 }

routes/_components/compose/ComposeAuthor.html

@@ -49,6 +49,9 @@
   export default {
     components: {
       Avatar
+    },
+    computed: {
+      verifyCredentials: ($currentVerifyCredentials) => $currentVerifyCredentials
     }
   }
 </script>

routes/_components/compose/ComposeBox.html

@@ -1,10 +1,10 @@
 <div class="compose-box {{overLimit ? 'over-char-limit' : ''}}">
-  <ComposeAuthor :verifyCredentials />
-  <ComposeInput />
+  <ComposeAuthor />
+  <ComposeInput :realm />
   <ComposeLengthGauge />
-  <ComposeToolbar />
+  <ComposeToolbar :realm />
   <ComposeLengthIndicator />
-  <ComposeMedia />
+  <ComposeMedia :realm />
   <ComposeButton />
 </div>
 <style>

routes/_components/compose/ComposeInput.html

@@ -32,30 +32,46 @@
 
   export default {
     oncreate() {
-      this.store.set({rawComposeText: store.get('currentComposeText')})
-
-      requestAnimationFrame(() => {
-        mark('autosize()')
-        autosize(this.refs.textarea)
-        stop('autosize()')
+      this.setupSyncFromStore()
+      this.setupSyncToStore()
+      this.setupAutosize()
+    },
+    ondestroy() {
+      this.teardownAutosize()
+    },
+    methods: {
+      setupSyncFromStore() {
+        let currentComposeText = store.get('currentComposeText')
+        let realm = this.get('realm')
+        this.store.set({
+          rawComposeText: currentComposeText[realm] || ''
         })
-
+      },
+      setupSyncToStore() {
         const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
 
         this.observe('rawComposeText', rawComposeText => {
           let composeText = this.store.get('composeText')
           let currentInstance = this.store.get('currentInstance')
-        composeText[currentInstance] = rawComposeText || ''
+          let realm = this.get('realm')
+          composeText[currentInstance] = composeText[currentInstance] || {}
+          composeText[currentInstance][realm] = rawComposeText || ''
           this.store.set({composeText: composeText})
           saveText()
         }, {init: false})
       },
-    ondestroy() {
+      setupAutosize() {
+        requestAnimationFrame(() => {
+          mark('autosize()')
+          autosize(this.refs.textarea)
+          stop('autosize()')
+        })
+      },
+      teardownAutosize() {
         mark('autosize.destroy()')
         autosize.destroy(this.refs.textarea)
         stop('autosize.destroy()')
       },
-    methods: {
       onBlur() {
         this.store.set({composeSelectionStart: this.refs.textarea.selectionStart})
       }

routes/_components/compose/ComposeMedia.html

@@ -1,6 +1,6 @@
-{{#if $uploadedMedia && $uploadedMedia.length}}
-  <div class="compose-media-container" style="grid-template-columns: repeat({{$uploadedMedia.length}}, 1fr);">
-    {{#each $uploadedMedia as media, i}}
+{{#if uploadedMedia.length}}
+  <div class="compose-media-container" style="grid-template-columns: repeat({{uploadedMedia.length}}, 1fr);">
+    {{#each uploadedMedia as media, i}}
       <div class="compose-media">
         <img src="{{media.data.preview_url}}" alt="{{media.file.name}}"/>
         <div class="compose-media-delete">
@@ -96,8 +96,11 @@
     store: () => store,
     methods: {
       onDeleteMedia(i) {
-        deleteMedia(i)
+        deleteMedia(this.get('realm'), i)
       }
+    },
+    computed: {
+      uploadedMedia: ($currentUploadedMedia, realm) => $currentUploadedMedia[realm] || []
     }
   }
 </script>

routes/_components/compose/ComposeToolbar.html

@@ -8,7 +8,7 @@
               label="Add media"
               href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
               on:click="onMediaClick()"
-              disabled="{{$uploadingMedia || ($uploadedMedia && $uploadedMedia.length === 4)}}"
+              disabled="{{$uploadingMedia || (uploadedMedia.length === 4)}}"
   />
   <IconButton label="Adjust privacy" href="#fa-globe" />
   <IconButton label="Add content warning" href="#fa-exclamation-triangle" />
@@ -60,9 +60,12 @@
       },
       onFileChange(e) {
         let file = e.target.files[0]
-        doMediaUpload(file)
+        let realm = this.get('realm')
+        doMediaUpload(realm, file)
       }
+    },
+    computed: {
+      uploadedMedia: ($currentUploadedMedia, realm) => $currentUploadedMedia[realm] || []
     }
-
   }
 </script>

routes/_store/instanceComputations.js

@@ -104,7 +104,12 @@ export function instanceComputations (store) {
 
   store.compute('currentComposeText',
     ['composeText', 'currentInstance'],
-    (composeText, currentInstance) => (composeText[currentInstance] || '')
+    (composeText, currentInstance) => (composeText[currentInstance] || {})
+  )
+
+  store.compute('currentUploadedMedia',
+    ['uploadedMedia', 'currentInstance'],
+    (uploadedMedia, currentInstance) => (uploadedMedia[currentInstance] || {})
   )
 
   store.compute('currentCustomEmoji',

routes/_store/store.js

@@ -41,7 +41,8 @@ export const store = new PinaforeStore({
   statusModifications: {},
   composeText: {},
   rawComposeText: '',
-  customEmoji: {}
+  customEmoji: {},
+  uploadedMedia: {}
 })
 
 mixins(PinaforeStore)

routes/index.html

@@ -5,7 +5,7 @@
 <Layout page='home'>
   {{#if $isUserLoggedIn}}
     {{#if $currentVerifyCredentials}}
-      <ComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
+      <ComposeBox realm="home" />
     {{/if}}
     <LazyTimeline timeline='home' />
   {{else}}

tests/spec/12-compose.js

@@ -2,7 +2,7 @@ import { Selector as $ } from 'testcafe'
 import {
   composeButton, composeInput, composeLengthIndicator, emojiButton, getComposeSelectionStart, getUrl,
   homeNavButton,
-  notificationsNavButton, uploadMedia
+  notificationsNavButton
 } from '../utils'
 import { foobarRole } from '../roles'
 import times from 'lodash/times'