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 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}`)

View File

@ -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})
}

View File

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

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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',

View File

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

View File

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

View File

@ -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'