From 2119965659dc7f89dd2231dee666802f6db2d2c4 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Thu, 29 Apr 2021 23:27:25 -0600 Subject: [PATCH] Update ComposeModal --- .../assets/js/components/ComposeModal.vue | 306 ++++++++++++++---- 1 file changed, 244 insertions(+), 62 deletions(-) diff --git a/resources/assets/js/components/ComposeModal.vue b/resources/assets/js/components/ComposeModal.vue index e118f189c..0aa4f8b63 100644 --- a/resources/assets/js/components/ComposeModal.vue +++ b/resources/assets/js/components/ComposeModal.vue @@ -89,6 +89,7 @@ Next Post Post + Post @@ -97,18 +98,20 @@
{{item.name}}
+
+
@@ -148,10 +151,10 @@
-
+

- New Post + New Post

Share up to {{config.uploader.album_limit}} photos or videos

@@ -164,7 +167,7 @@
-
+

New Text Post @@ -183,10 +186,10 @@

-
+

- New Story + New Story BETA @@ -202,10 +205,10 @@

-
+

- New Collection + New Collection BETA @@ -216,7 +219,7 @@

- +

Help

@@ -268,7 +271,7 @@
- +
@@ -372,7 +375,7 @@
-

Add Location

-
Public
Unlisted
-
Followers Only
@@ -589,7 +592,7 @@ {{media[carouselCursor].license ? media[carouselCursor].license.length : 0}}/140

--> + +
+
+
+
+

Add license

+
+
+

+ Audience + + {{visibilityTag}} + + +

+
+ +
+ +
+

Title

+ +

{{video.title.length}}/70

+
+ +
+

Description

+ +

{{video.description.length}}/5000

+
+
+
+
@@ -679,7 +745,7 @@ import VueTribute from 'vue-tribute' export default { - components: { + components: { VueCropper, Autocomplete, VueTribute @@ -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) { @@ -951,7 +1030,7 @@ export default { return; } let id = this.media[this.carouselCursor].id; - + axios.delete('/api/compose/v0/media/delete', { params: { id: id @@ -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,41 +1148,99 @@ export default { }, closeModal() { - this.composeType = ''; $('#composeModal').modal('hide'); }, goBack() { this.pageTitle = ''; - - switch(this.page) { - case 'addText': - this.page = 1; + + switch(this.mode) { + case 'photo': + 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 = 3 : this.page--; + break; + } break; - case 'textOptions': - this.page = 'addText'; - break; + case 'video': + switch(this.page) { + case 'licensePicker': + this.page = 'video-2'; + break; - case 'cropPhoto': - case 'editMedia': - this.page = 2; - break; + case 'video-2': + this.page = 'video-2'; + break; - case 'tagPeopleHelp': - this.showTagCard(); - break; - - case 'licensePicker': - this.page = 3; + default: + this.page = 'video-2'; + break; + } break; default: - this.namedPages.indexOf(this.page) != -1 ? - this.page = (this.textMode ? 'addText' : 3) : - (this.textMode ? 'addText' : this.page--); + 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() { @@ -1115,7 +1253,7 @@ export default { case 'cropPhoto': this.pageLoading = true; let self = this; - this.$refs.cropper.getCroppedCanvas({ + this.$refs.cropper.getCroppedCanvas({ maxWidth: 4096, maxHeight: 4096, fillColor: '#fff', @@ -1199,8 +1337,22 @@ export default { onSubmitLocation(result) { this.place = result; - this.pageTitle = this.textMode ? 'New Text Post' : ''; - this.page = (this.textMode ? 'addText' : 3); + 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; + } return; }, @@ -1227,8 +1379,23 @@ export default { } this.visibility = state; this.visibilityTag = tags[state]; - this.pageTitle = ''; - this.page = this.textMode ? 'addText' : 3; + + 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; + } }, showMediaDescriptionsCard() { @@ -1350,9 +1517,24 @@ export default { toggleLicense(index) { this.licenseIndex = index; - this.pageTitle = ''; - this.page = 3; + + 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; + } }, } } - \ No newline at end of file +