Update ComposeModal, use new routes

resources/assets/js/components/ComposeModal.vue

@@ -86,10 +86,46 @@
 						<span v-else>
 							<a v-if="!pageLoading && (page > 1 && page <= 2) || (page == 1 && ids.length != 0) || page == 'cropPhoto'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="nextPage">Next</a>
 							<a v-if="!pageLoading && page == 3" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose()">Post</a>
+							<a v-if="!pageLoading && page == 'addText'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="composeTextPost()">Post</a>
 						</span>
 					</div>
 				</div>
 				<div class="card-body p-0 border-top">
+					<div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;">
+						test
+					</div>
+					<div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;">
+						<div class="mt-2">
+							<div class="media px-3">
+								<div class="media-body">
+									<div class="form-group">
+										<label class="font-weight-bold text-muted small d-none">Body</label>
+										<textarea class="form-control border-0 rounded-0 no-focus" rows="7" placeholder="What's happening?" style="font-size:18px;resize:none" v-model="composeText" v-on:keyup="composeTextLength = composeText.length"></textarea>
+										<div class="border-bottom"></div>
+										<p class="help-text small text-right text-muted mb-0 font-weight-bold">{{composeTextLength}}/{{config.uploader.max_caption_length}}</p>
+										<p class="mb-0 mt-2">
+											<a class="btn btn-primary rounded-pill mr-2" href="#" style="height: 37px;" @click.prevent="showTextOptions()">
+												<i class="fas fa-palette px-3 text-white"></i>
+											</a>
+											<!-- <a class="btn btn-outline-lighter rounded-pill ml-3" href="#" @click.prevent="showLocationCard()">
+												<i class="fas fa-map-marker-alt px-3"></i>
+											</a>
+											<a class="btn btn-outline-lighter rounded-pill mx-3" href="#" @click.prevent="showTagCard()">
+												<i class="fas fa-user-plus px-3"></i>
+											</a> -->
+											<a class="btn rounded-pill mx-3 d-inline-flex align-items-center" href="#" :class="[nsfw ? 'btn-danger' : 'btn-outline-lighter']" style="height: 37px;" @click.prevent="nsfw = !nsfw" title="Mark as sensitive/not safe for work">
+												<i class="far fa-flag px-3"></i> <span class="text-muted small font-weight-bold"></span>
+											</a>
+											<a class="btn btn-outline-lighter rounded-pill d-inline-flex align-items-center" href="#" style="height: 37px;" @click.prevent="showVisibilityCard()">
+												<i class="fas fa-eye mr-2"></i> <span class="text-muted small font-weight-bold">{{visibilityTag}}</span>
+											</a>
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
 					<div v-if="page == 1" class="w-100 h-100 d-flex justify-content-center align-items-center" style="min-height: 400px;">
 						<div class="text-center">
 							<div v-if="media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
@@ -107,6 +143,26 @@
 									</div>
 								</div>
 							</div>
+
+							<div v-if="config.ab.top == true && media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
+								<div @click.prevent="addText" class="card-body">
+									<div class="media">
+										<div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
+											<i class="far fa-edit text-primary fa-lg"></i>
+										</div>	
+										<div class="media-body text-left">
+											<p class="mb-0">
+												<span class="h5 mt-0 font-weight-bold text-primary">New Text Post</span>
+												<sup class="float-right mt-2">
+													<span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span>
+												</sup>
+											</p>
+											<p class="mb-0 text-muted">Share a text only post</p>
+										</div>
+									</div>
+								</div>
+							</div>
+
 							<a v-if="config.features.stories == true" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark" href="/i/stories/new">
 								<div class="card-body">
 									<div class="media">
@@ -349,6 +405,19 @@
 
 					<div v-if="page == 'advancedSettings'" class="w-100 h-100">
 						<div class="list-group list-group-flush">
+							<!-- <div class="d-none list-group-item d-flex justify-content-between">
+								<div>
+									<div class="text-dark ">Optimize Media</div>
+									<p v-if="mediaCropped" class="text-muted small mb-0">Media was cropped or filtered, it must be optimized.</p>
+									<p v-else class="text-muted small mb-0">Compress media for smaller file size.</p>
+								</div>
+								<div>
+									<div class="custom-control custom-switch" style="z-index: 9999;">
+										<input type="checkbox" class="custom-control-input" id="asoptimizemedia" v-model="optimizeMedia" :disabled="mediaCropped">
+										<label class="custom-control-label" for="asoptimizemedia"></label>
+									</div>
+								</div>
+							</div> -->
 							<div class="list-group-item d-flex justify-content-between">
 								<div>
 									<div class="text-dark ">Turn off commenting</div>
@@ -591,6 +660,8 @@ export default {
 			nsfw: false,
 			place: false,
 			commentsDisabled: false,
+			optimizeMedia: true,
+			mediaCropped: false,
 			pageTitle: '',
 
 			cropper: {
@@ -613,11 +684,13 @@ export default {
 				'addToStory',
 				'editMedia',
 				'cameraRoll',
-				'tagPeopleHelp'
+				'tagPeopleHelp',
+				'textOptions'
 			],
 			cameraRollMedia: [],
 			taggedUsernames: [],
-			taggedPeopleSearch: null
+			taggedPeopleSearch: null,
+			textMode: false
 		}
 	},
 
@@ -664,6 +737,12 @@ export default {
 			el.removeAttr('disabled');
 		},
 
+		addText(event) {
+			this.pageTitle = 'New Text Post';
+			this.page = 'addText';
+			this.textMode = true;
+		},
+
 		mediaWatcher() {
 			let self = this;
 			$(document).on('change', '#pf-dz', function(e) {
@@ -705,7 +784,7 @@ export default {
 					}
 				};
 
-				axios.post('/api/pixelfed/v1/media', form, xhrConfig)
+				axios.post('/api/compose/v0/media/upload', form, xhrConfig)
 				.then(function(e) {
 					self.uploadProgress = 100;
 					self.ids.push(e.data.id);
@@ -747,7 +826,7 @@ export default {
 			}
 			let id = this.media[this.carouselCursor].id;
 			
-			axios.delete('/api/pixelfed/v1/media', {
+			axios.delete('/api/compose/v0/media/delete', {
 				params: {
 					id: id
 				}
@@ -794,9 +873,51 @@ export default {
 						cw: this.nsfw,
 						comments_disabled: this.commentsDisabled,
 						place: this.place,
-						tagged: this.taggedUsernames
+						tagged: this.taggedUsernames,
+						optimize_media: this.optimizeMedia
 					};
-					axios.post('/api/local/status/compose', data)
+					axios.post('/api/compose/v0/publish', data)
+					.then(res => {
+						let data = res.data;
+						window.location.href = data;
+					}).catch(err => {
+						let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
+						swal('Oops, something went wrong!', msg, 'error');
+					});
+					return;
+				break;
+
+				case 'delete' :
+					this.ids = [];
+					this.media = [];
+					this.carouselCursor = 0;
+					this.composeText = '';
+					this.composeTextLength = 0;
+					$('#composeModal').modal('hide');
+					return;
+				break;
+			}
+		},
+
+		composeTextPost() {
+			let state = this.composeState;
+
+			if(this.composeText.length > this.config.uploader.max_caption_length) {
+				swal('Error', 'Caption is too long', 'error');
+				return;
+			}
+
+			switch(state) {
+				case 'publish' :
+					let data = {
+						caption: this.composeText,
+						visibility: this.visibility,
+						cw: this.nsfw,
+						comments_disabled: this.commentsDisabled,
+						place: this.place,
+						tagged: this.taggedUsernames,
+					};
+					axios.post('/api/compose/v0/publish/text', data)
 					.then(res => {
 						let data = res.data;
 						window.location.href = data;
@@ -828,6 +949,14 @@ export default {
 			this.pageTitle = '';
 			
 			switch(this.page) {
+				case 'addText':
+					this.page = 1;
+				break;
+
+				case 'textOptions':
+					this.page = 'addText';
+				break;
+
 				case 'cropPhoto':
 				case 'editMedia':
 					this.page = 2;
@@ -838,7 +967,9 @@ export default {
 				break;
 
 				default:
-					this.namedPages.indexOf(this.page) != -1 ? this.page = 3 : this.page--;
+					this.namedPages.indexOf(this.page) != -1 ? 
+					this.page = (this.textMode ? 'addText' : 3) : 
+					(this.textMode ? 'addText' : this.page--);
 				break;
 			}
 		},
@@ -860,10 +991,11 @@ export default {
 							imageSmoothingEnabled: false,
 							imageSmoothingQuality: 'high',
 						}).toBlob(function(blob) {
+						self.mediaCropped = true;
 						let data = new FormData();
 						data.append('file', blob);
-						let url = '/api/local/compose/media/update/' + self.ids[self.carouselCursor];
-
+						data.append('id', self.ids[self.carouselCursor]);
+						let url = '/api/compose/v0/media/update';
 						axios.post(url, data).then(res => {
 							self.media[self.carouselCursor].url = res.data.url;
 							self.pageLoading = false;
@@ -921,7 +1053,7 @@ export default {
 		locationSearch(input) {
 			if (input.length < 1) { return []; };
 			let results = [];
-			return axios.get('/api/local/compose/location/search', {
+			return axios.get('/api/compose/v0/search/location', {
 				params: {
 					q: input
 				}
@@ -936,8 +1068,8 @@ export default {
 
 		onSubmitLocation(result) {
 			this.place = result;
-			this.pageTitle = '';
-			this.page = 3;
+			this.pageTitle = this.textMode ? 'New Text Post' : '';
+			this.page = (this.textMode ? 'addText' : 3);
 			return;
 		},
 
@@ -965,7 +1097,7 @@ export default {
 			this.visibility = state;
 			this.visibilityTag = tags[state];
 			this.pageTitle = '';
-			this.page = 3;
+			this.page = this.textMode ? 'addText' : 3;
 		},
 
 		showMediaDescriptionsCard() {
@@ -1024,7 +1156,8 @@ export default {
 						canvas.toBlob(function(blob) {
 							data = new FormData();
 							data.append('file', blob);
-							axios.post('/api/local/compose/media/update/'+media.id, data).then(res => {
+							data.append('id', media.id);
+							axios.post('/api/compose/v0/media/update', data).then(res => {
 							}).catch(err => {
 							});
 						});
@@ -1039,7 +1172,7 @@ export default {
 			if (input.length < 1) { return []; };
 			let self = this;
 			let results = [];
-			return axios.get('/api/local/compose/tag/search', {
+			return axios.get('/api/compose/v0/search/tag', {
 				params: {
 					q: input
 				}
@@ -1070,6 +1203,11 @@ export default {
 
 		untagUsername(index) {
 			this.taggedUsernames.splice(index, 1);
+		},
+
+		showTextOptions() {
+			this.page = 'textOptions';
+			this.pageTitle = 'Text Post Options';
 		}
 	}
 }