Update ComposeModal

resources/assets/js/components/ComposeModal.vue

@@ -89,6 +89,7 @@
 							<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>
+							<a v-if="!pageLoading && page == 'video-2'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose()">Post</a>
 						</span>
 					</div>
 				</div>
@@ -107,8 +108,10 @@
 							</div>
 						</div>
 					</div>
+
 					<div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;">
 					</div>
+
 					<div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;">
 						<div class="mt-2">
 							<div class="media px-3">
@@ -606,6 +609,69 @@
 						</p>
 					</div>
 
+					<div v-if="page == 'video-2'" class="w-100 h-100">
+						<div v-if="video.title.length" class="border-bottom">
+							<div class="media p-3">
+								<img :src="media[0].url" width="100px" height="70px" :class="[media[0].filter_class?'mr-2 ' + media[0].filter_class:'mr-2']">
+								<div class="media-body">
+									<p class="font-weight-bold mb-1">{{video.title ? video.title.slice(0,70) : 'Untitled'}}</p>
+									<p class="mb-0 text-muted small">{{video.description ? video.description.slice(0,90) : 'No description'}}</p>
+								</div>
+							</div>
+						</div>
+
+
+						<div class="border-bottom d-flex justify-content-between px-4 mb-0 py-2 ">
+							<div>
+								<div class="text-dark ">Contains NSFW Media</div>
+							</div>
+							<div>
+								<div class="custom-control custom-switch" style="z-index: 9999;">
+									<input type="checkbox" class="custom-control-input" id="asnsfw" v-model="nsfw">
+									<label class="custom-control-label" for="asnsfw"></label>
+								</div>
+							</div>
+						</div>
+						<div class="border-bottom">
+							<p class="px-4 mb-0 py-2 cursor-pointer" @click="showLicenseCard()">Add license</p>
+						</div>
+						<div class="border-bottom">
+							<p class="px-4 mb-0 py-2">
+								<span>Audience</span>
+								<span class="float-right">
+									<a href="#" @click.prevent="showVisibilityCard()" class="btn btn-outline-secondary btn-sm small mr-3 mt-n1 disabled" style="font-size:10px;padding:3px;text-transform: uppercase" disabled>{{visibilityTag}}</a>
+									<a href="#" @click.prevent="showVisibilityCard()" class="text-decoration-none"><i class="fas fa-chevron-right fa-lg text-lighter"></i></a>
+								</span>
+							</p>
+						</div>
+
+						<div class="p-3">
+							<!-- <div class="card card-body shadow-none border d-flex justify-content-center align-items-center mb-3 p-5">
+								<div class="d-flex align-items-center">
+									<p class="mb-0 text-center">
+										<div class="spinner-border text-primary" role="status">
+											<span class="sr-only">Loading...</span>
+										</div>
+									</p>
+									<p class="ml-3 mb-0 text-center font-weight-bold">
+										Processing video
+									</p>
+								</div>
+							</div> -->
+							<div class="form-group">
+								<p class="small font-weight-bold text-muted mb-0">Title</p>
+								<input class="form-control" v-model="video.title" placeholder="Add a good title">
+								<p class="help-text mb-0 small text-muted">{{video.title.length}}/70</p>
+							</div>
+
+							<div class="form-group mb-0">
+								<p class="small font-weight-bold text-muted mb-0">Description</p>
+								<textarea class="form-control" v-model="video.description" placeholder="Add an optional description" maxlength="5000" rows="5"></textarea>
+								<p class="help-text mb-0 small text-muted">{{video.description.length}}/5000</p>
+							</div>
+						</div>
+					</div>
+
 				</div>
 
 				<!-- card-footers -->
@@ -700,12 +766,16 @@ export default {
 			carouselCursor: 0,
 			uploading: false,
 			uploadProgress: 100,
-			composeType: false,
+			mode: 'photo',
+			modes: [
+				'photo',
+				'video',
+				'plain'
+			],
 			page: 1,
 			composeState: 'publish',
 			visibility: 'public',
 			visibilityTag: 'Public',
-			nsfw: false,
 			place: false,
 			commentsDisabled: false,
 			optimizeMedia: true,
@@ -810,15 +880,16 @@ export default {
 					name: "Attribution-NonCommercial-NoDerivs"
 				}
 			],
-			licenseIndex: 0
+			licenseIndex: 0,
+			video: {
+				title: '',
+				description: ''
+			}
 		}
 	},
 
 	beforeMount() {
 		this.fetchProfile();
-		if(this.config.uploader.media_types.includes('video/mp4') == false) {
-			this.composeType = 'post'
-		}
 		this.filters = window.App.util.filters;
 	},
 
@@ -860,6 +931,7 @@ export default {
 			this.pageTitle = 'New Text Post';
 			this.page = 'addText';
 			this.textMode = true;
+			this.mode = 'text';
 		},
 
 		mediaWatcher() {
@@ -910,7 +982,14 @@ export default {
 					self.media.push(e.data);
 					self.uploading = false;
 					setTimeout(function() {
-						self.page = 2;
+						// if(type === 'video/mp4') {
+						// 	self.pageTitle = 'Edit Video Details';
+						// 	self.mode = 'video';
+						// 	self.page = 'video-2';
+						// } else {
+						// 	self.page = 2;
+						// }
+						self.page = 3;
 					}, 300);
 				}).catch(function(e) {
 					switch(e.response.status) {
@@ -1001,7 +1080,8 @@ export default {
 						place: this.place,
 						tagged: this.taggedUsernames,
 						optimize_media: this.optimizeMedia,
-						license: this.availableLicenses[this.licenseIndex].id
+						license: this.availableLicenses[this.licenseIndex].id,
+						video: this.video
 					};
 					axios.post('/api/compose/v0/publish', data)
 					.then(res => {
@@ -1068,13 +1148,14 @@ export default {
 		},
 
 		closeModal() {
-			this.composeType = '';
 			$('#composeModal').modal('hide');
 		},
 
 		goBack() {
 			this.pageTitle = '';
 
+			switch(this.mode) {
+				case 'photo':
 					switch(this.page) {
 						case 'addText':
 							this.page = 1;
@@ -1097,12 +1178,69 @@ export default {
 							this.page = 3;
 						break;
 
+						case 'video-2':
+							this.page = 1;
+						break;
+
 						default:
 							this.namedPages.indexOf(this.page) != -1 ?
-					this.page = (this.textMode ? 'addText' : 3) : 
+							this.page = 3 : this.page--;
-					(this.textMode ? 'addText' : this.page--);
 						break;
 					}
+				break;
+
+				case 'video':
+					switch(this.page) {
+						case 'licensePicker':
+							this.page = 'video-2';
+						break;
+
+						case 'video-2':
+							this.page = 'video-2';
+						break;
+
+						default:
+							this.page = 'video-2';
+						break;
+					}
+				break;
+
+				default:
+					switch(this.page) {
+						case 'addText':
+							this.page = 1;
+						break;
+
+						case 'textOptions':
+							this.page = 'addText';
+						break;
+
+						case 'cropPhoto':
+						case 'editMedia':
+							this.page = 2;
+						break;
+
+						case 'tagPeopleHelp':
+							this.showTagCard();
+						break;
+
+						case 'licensePicker':
+							this.page = 3;
+						break;
+
+						case 'video-2':
+							this.page = 1;
+						break;
+
+						default:
+							this.namedPages.indexOf(this.page) != -1 ?
+							this.page = (this.mode == 'text' ? 'addText' : 3) :
+							(this.mode == 'text' ? 'addText' : this.page--);
+						break;
+					}
+				break;
+			}
+
 		},
 
 		nextPage() {
@@ -1199,8 +1337,22 @@ export default {
 
 		onSubmitLocation(result) {
 			this.place = result;
-			this.pageTitle = this.textMode ? 'New Text Post' : '';
+			switch(this.mode) {
-			this.page = (this.textMode ? 'addText' : 3);
+				case 'photo':
+					this.pageTitle = '';
+					this.page = 3;
+				break;
+
+				case 'video':
+					this.pageTitle = 'Edit Video Details';
+					this.page = 'video-2';
+				break;
+
+				case 'text':
+					this.pageTitle = 'New Text Post';
+					this.page = 'addText';
+				break;
+			}
 			return;
 		},
 
@@ -1227,8 +1379,23 @@ export default {
 			}
 			this.visibility = state;
 			this.visibilityTag = tags[state];
+
+			switch(this.mode) {
+				case 'photo':
 					this.pageTitle = '';
-			this.page = this.textMode ? 'addText' : 3;
+					this.page = 3;
+				break;
+
+				case 'video':
+					this.pageTitle = 'Edit Video Details';
+					this.page = 'video-2';
+				break;
+
+				case 'text':
+					this.pageTitle = 'New Text Post';
+					this.page = 'addText';
+				break;
+			}
 		},
 
 		showMediaDescriptionsCard() {
@@ -1350,8 +1517,23 @@ export default {
 
 		toggleLicense(index) {
 			this.licenseIndex = index;
+
+			switch(this.mode) {
+				case 'photo':
 					this.pageTitle = '';
 					this.page = 3;
+				break;
+
+				case 'video':
+					this.pageTitle = 'Edit Video Details';
+					this.page = 'video-2';
+				break;
+
+				case 'text':
+					this.pageTitle = 'New Text Post';
+					this.page = 'addText';
+				break;
+			}
 		},
 	}
 }