separate uploaded media by instance/realm

This commit is contained in:
Nolan Lawson 2018-03-03 10:11:32 -08:00
parent 5b94dd7829
commit e79003d8d7
11 changed files with 80 additions and 41 deletions

View file

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

View file

@ -2,14 +2,16 @@ import { store } from '../_store/store'
import { uploadMedia } from '../_api/media' import { uploadMedia } from '../_api/media'
import { toast } from '../_utils/toast' import { toast } from '../_utils/toast'
export async function doMediaUpload (file) { export async function doMediaUpload (realm, file) {
let instanceName = store.get('currentInstance') let instanceName = store.get('currentInstance')
let accessToken = store.get('accessToken') let accessToken = store.get('accessToken')
store.set({uploadingMedia: true}) store.set({uploadingMedia: true})
try { try {
let response = await uploadMedia(instanceName, accessToken, file) let response = await uploadMedia(instanceName, accessToken, file)
let uploadedMedia = store.get('uploadedMedia') || [] let uploadedMedia = store.get('uploadedMedia')
uploadedMedia.push({ uploadedMedia[instanceName] = uploadedMedia[instanceName] || {}
uploadedMedia[instanceName][realm] = uploadedMedia[instanceName][realm] || []
uploadedMedia[instanceName][realm].push({
data: response, data: response,
file: file 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') 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}) store.set({uploadedMedia})
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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