Merge pull request #2622 from pixelfed/staging

Staging

CHANGELOG.md

@@ -31,6 +31,11 @@
 - Updated ComposeController, use MediaStorageService for media deletes. ([ab5469ff](https://github.com/pixelfed/pixelfed/commit/ab5469ff))
 - Updated StatusDeletePipeline, use MediaStorageService for media deletes. ([9fd90e17](https://github.com/pixelfed/pixelfed/commit/9fd90e17))
 - Updated Discover, allow public discover access. ([1404ac6e](https://github.com/pixelfed/pixelfed/commit/1404ac6e))
+- Updated pixelfed config, add media_fast_process setting. ([6bee5072](https://github.com/pixelfed/pixelfed/commit/6bee5072))
+- Updated ComposeController, add mediaProcessingCheck method. ([33b625f5](https://github.com/pixelfed/pixelfed/commit/33b625f5))
+- Updated ComposeModal, add processing step disabled by default. ([e6e76e80](https://github.com/pixelfed/pixelfed/commit/e6e76e80))
+- Updated DiscoverComponent, allow unathenicated if enabled. ([a1059a6e](https://github.com/pixelfed/pixelfed/commit/a1059a6e))
+- Updated components, improve content warnings. ([a9e98965](https://github.com/pixelfed/pixelfed/commit/a9e98965))
 -  ([](https://github.com/pixelfed/pixelfed/commit/))
 
 ## [v0.10.10 (2021-01-28)](https://github.com/pixelfed/pixelfed/compare/v0.10.9...v0.10.10)

app/Http/Controllers/ComposeController.php

@@ -513,4 +513,39 @@ class ComposeController extends Controller
 
 		return $status->url();
 	}
+
+	public function mediaProcessingCheck(Request $request)
+	{
+		$this->validate($request, [
+			'id' => 'required|integer|min:1'
+		]);
+
+		$media = Media::whereUserId($request->user()->id)
+			->whereNull('status_id')
+			->findOrFail($request->input('id'));
+
+		if(config('pixelfed.media_fast_process')) {
+			return [
+				'finished' => true
+			];
+		}
+
+		$finished = false;
+
+		switch ($media->mime) {
+			case 'image/jpeg':
+			case 'image/png':
+			case 'video/mp4':
+				$finished = config('pixelfed.cloud_storage') ? (bool) $media->cdn_url : (bool) $media->processed_at;
+				break;
+			
+			default:
+				# code...
+				break;
+		}
+
+		return [
+			'finished' => $finished
+		];
+	}
 }

config/pixelfed.php

@@ -263,5 +263,19 @@ return [
 
     'bouncer' => [
         'enabled' => env('PF_BOUNCER_ENABLED', false),
-    ]
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Media Fast Process
+    |--------------------------------------------------------------------------
+    |
+    | Don't require photos & video to finish optimization & 
+    | upload to S3 if enabled before posting. If disabled
+    | users will have to wait until processed before posting,
+    | sacrificing the user experience to ensure media is federated
+    | using S3 urls (if enabled). Default: off
+    |
+    */ 
+    'media_fast_process' => env('PF_MEDIA_FAST_PROCESS', true),
 ];

resources/assets/js/components/ComposeModal.vue

@@ -59,11 +59,13 @@
 							</b-tooltip>
 						</span>
 						<span v-else-if="page == 3">
-							<a class="text-lighter text-decoration-none mr-3 d-flex align-items-center" href="#" @click.prevent="goBack()">
-								<i class="fas fa-long-arrow-alt-left fa-lg mr-2"></i>
-								<span class="btn btn-outline-secondary btn-sm px-2 py-0 disabled" disabled="">{{media.length}}</span>
-							</a>
-							<span class="font-weight-bold mb-0">{{pageTitle}}</span>
+							<span v-if="media[0].mime != 'video/mp4'">
+								<a class="text-lighter text-decoration-none mr-3 d-flex align-items-center" href="#" @click.prevent="goBack()">
+									<i class="fas fa-long-arrow-alt-left fa-lg mr-2"></i>
+									<span class="btn btn-outline-secondary btn-sm px-2 py-0 disabled" disabled="">{{media.length}}</span>
+								</a>
+								<span class="font-weight-bold mb-0">{{pageTitle}}</span>
+							</span>
 						</span>
 						<span v-else>
 							<a class="text-lighter text-decoration-none mr-3" href="#" @click.prevent="goBack()"><i class="fas fa-long-arrow-alt-left fa-lg"></i></a>
@@ -561,6 +563,34 @@
 						</p>
 					</div>
 
+					<div v-if="page == 'processingVideo'" class="w-100 h-100 px-3 d-flex justify-content-center align-items-center" style="height: 50vh !important;">
+						<div v-if="isProcessingMedia" class="text-center">
+							<div class="spinner-border text-primary" role="status">
+								<span class="sr-only">Loading...</span>
+							</div>
+							<p class="text-center font-weight-bold mb-1 mt-2">
+								Processing Media
+							</p>
+							<p class="text-center text-muted small mb-0">
+								This may take a few seconds.
+							</p>
+						</div>
+					</div>
+
+					<div v-if="page == 'processingPhoto'" class="w-100 h-100 px-3 d-flex justify-content-center align-items-center" style="height: 50vh !important;">
+						<div v-if="isProcessingMedia" class="text-center">
+							<div class="spinner-border text-primary" role="status">
+								<span class="sr-only">Loading...</span>
+							</div>
+							<p class="text-center font-weight-bold mb-1 mt-2">
+								Processing Media
+							</p>
+							<p class="text-center text-muted small mb-0">
+								This may take a few seconds.
+							</p>
+						</div>
+					</div>
+
 				</div>
 
 				<!-- card-footers -->
@@ -685,12 +715,17 @@ export default {
 				'editMedia',
 				'cameraRoll',
 				'tagPeopleHelp',
-				'textOptions'
+				'textOptions',
+				'processingVideo',
+				'processingPhoto'
 			],
 			cameraRollMedia: [],
 			taggedUsernames: [],
 			taggedPeopleSearch: null,
-			textMode: false
+			textMode: false,
+			isProcessingMedia: false,
+			processPhotoInterval: undefined,
+			processVideoInterval: undefined
 		}
 	},
 
@@ -790,9 +825,14 @@ export default {
 					self.ids.push(e.data.id);
 					self.media.push(e.data);
 					self.uploading = false;
-					setTimeout(function() {
-						self.page = 2;
-					}, 300);
+
+					if(e.data.mime == 'video/mp4') {
+						self.processVideo(e.data);
+						return;
+					} else {
+						self.processPhoto(e.data);
+						return;
+					}
 				}).catch(function(e) {
 					switch(e.response.status) {
 						case 451:
@@ -1165,7 +1205,6 @@ export default {
 					ctx.clearRect(0, 0, image.width, image.height);
 				}
 			}
-
 		},
 
 		tagSearch(input) {
@@ -1208,7 +1247,58 @@ export default {
 		showTextOptions() {
 			this.page = 'textOptions';
 			this.pageTitle = 'Text Post Options';
+		},
+
+		processPhoto(media) {
+			this.page = 'processingPhoto';
+			this.pageTitle = '';
+			this.processPhotoCheck(media);
+		},
+
+		processPhotoCheck(media) {
+			this.isProcessingMedia = true;
+			this.processMediaCheck(media);
+			this.processPhotoInterval = setInterval(() => {
+				this.processMediaCheck(media);
+			}, 2500);
+		},
+
+		processVideo(media) {
+			this.page = 'processingVideo';
+			this.pageTitle = '';
+			this.processVideoCheck(media);
+		},
+
+		processVideoCheck(media) {
+			this.isProcessingMedia = true;
+			this.processMediaCheck(media, 'video');
+			this.processVideoInterval = setInterval(() => {
+				this.processMediaCheck(media, 'video');
+			}, 2500);
+		},
+
+		processMediaCheck(media, type = 'photo') {
+			return axios.get('/api/compose/v0/media/processing', {
+				params: {
+					id: media.id
+				}
+			}).then(res => {
+				let data = res.data;
+				if(data.finished === true) {
+					this.isProcessingMedia = false;
+					this.page = 3;
+					if(type == 'photo') {
+						clearInterval(this.processPhotoInterval);
+					} else if (type == 'video') {
+						clearInterval(this.processVideoInterval);
+					} else {
+					}
+					return;
+				}
+			});
 		}
+
+
 	}
 }
 </script>

resources/assets/js/components/DiscoverComponent.vue

@@ -4,7 +4,7 @@
 			<img src="/img/pixelfed-icon-grey.svg">
 		</div>
 		<div v-else>
-			<div class="d-block d-md-none border-top-0 pt-3">
+			<div v-if="authenticated" class="d-block d-md-none border-top-0 pt-3">
 				<input class="form-control rounded-pill shadow-sm" placeholder="Search" v-model="searchTerm" v-on:keyup.enter="searchSubmit">
 			</div>
 
@@ -79,7 +79,7 @@
 				</div>
 			</section>
 
-			<section class="pt-5 mb-5 section-explore">
+			<section v-if="authenticated" class="pt-5 mb-5 section-explore">
 				<div class="profile-timeline pt-3">
 					<div class="row p-0 mt-5">
 						<div class="col-12 mb-3 d-flex justify-content-between align-items-center">
@@ -151,6 +151,7 @@
 	export default {
 		data() {
 			return {
+				authenticated: false,
 				loaded: false,
 				config: window.App.config,
 				posts: {},
@@ -163,14 +164,21 @@
 				recommendedLoading: true
 			}
 		},
+
+		beforeMount() {
+			this.authenticated = $('body').hasClass('loggedIn');
+		},
+
 		mounted() {
 			this.loaded = true;
 			this.loadTrending();
-			this.fetchData();
-			axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
-				window._sharedData.curUser = res.data;
-				window.App.util.navatar();
-			});
+			if($('body').hasClass('loggedIn') == true) {
+				this.fetchData();
+				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
+				});
+			}
 		},
 
 		methods: {
@@ -180,7 +188,7 @@
 				}
 				axios.get('/api/pixelfed/v2/discover/posts')
 				.then((res) => {
-					this.posts = res.data.posts;
+					this.posts = res.data.posts.filter(r => r != null);
 					this.recommendedLoading = false;
 				});
 			},
@@ -206,13 +214,16 @@
 					}
 				})
 				.then(res => {
+					let data = res.data.filter(r => {
+						return r !== null;
+					});
 					if(this.trendingRange == 'daily') {
-						this.trendingDaily = res.data.filter(t => t.sensitive == false);
+						this.trendingDaily = data.filter(t => t.sensitive == false);
 					}
 					if(this.trendingRange == 'monthly') {
-						this.trendingMonthly = res.data.filter(t => t.sensitive == false);
+						this.trendingMonthly = data.filter(t => t.sensitive == false);
 					}
-					this.trending = res.data;
+					this.trending = data;
 					this.trendingLoading = false;
 				});
 			},

resources/assets/js/components/PostComponent.vue

@@ -53,7 +53,7 @@
                   </div>
                 </div>
                 <div v-else-if="status.pf_type === 'photo'" class="w-100">
-                  <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
+                  <photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
                 </div>
 
                 <div v-else-if="status.pf_type === 'video'" class="w-100">
@@ -113,12 +113,12 @@
               <div class="card-body status-comments pt-0">
                 <div v-if="status.pf_type != 'text'" class="status-comment">
                   <div v-if="status.content.length" class="pt-3">
-                    <div v-if="showCaption != true">
+                    <div v-if="status.sensitive">
                       <span class="py-3">
                         <a class="text-dark font-weight-bold mr-1" :href="status.account.url" v-bind:title="status.account.username">{{truncate(status.account.username,15)}}</a>
                         <span class="text-break">
                           <span class="font-italic text-muted">This comment may contain sensitive material</span>
-                          <span class="text-primary cursor-pointer pl-1" @click="showCaption = true">Show</span>
+                          <span class="text-primary cursor-pointer pl-1" @click="status.sensitive = false">Show</span>
                         </span>
                       </span>
                     </div>

resources/assets/js/components/Timeline.vue

@@ -167,7 +167,7 @@
 							</div>
 
 							<div v-else-if="status.pf_type === 'photo'" class="w-100">
-								<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
+								<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
 							</div>
 
 							<div v-else-if="status.pf_type === 'video'" class="w-100">
@@ -227,7 +227,7 @@
 								<span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
 							</div>
 							<div v-if="status.pf_type != 'text'" class="caption">
-								<p class="mb-2 read-more" style="overflow: hidden;">
+								<p v-if="!status.sensitive" class="mb-2 read-more" style="overflow: hidden;">
 									<span class="username font-weight-bold">
 										<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
 									</span>

resources/assets/js/components/presenter/PhotoPresenter.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="status.sensitive == true">
+	<div v-if="status.sensitive == true" class="content-label-wrapper">
 		<div class="text-light content-label">
 			<p class="text-center">
 				<i class="far fa-eye-slash fa-2x"></i>
@@ -8,17 +8,16 @@
 				Sensitive Content
 			</p>
 			<p class="text-center py-2">
-				This photo contains sensitive content which <br/>
-				some people may find offsensive or disturbing.
+				{{ status.spoiler_text ? status.spoiler_text : 'This post may contain sensitive content.'}}
 			</p>
 			<p class="mb-0">
-				<button @click="status.sensitive = false" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Photo</button>
+				<button @click="toggleContentWarning()" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Post</button>
 			</p>
 		</div>
 		<blur-hash-image
 			width="32"
 			height="32"
-			punch="1"
+			:punch="1"
 			:hash="status.media_attachments[0].blurhash"
 			:alt="altText(status)"/>
 	</div>
@@ -37,10 +36,18 @@
   .content-label {
   	margin: 0;
   	position: absolute;
-  	top:45%;
+  	top:50%;
   	left:50%;
-  	z-index: 999;
+  	z-index: 2;
   	transform: translate(-50%, -50%);
+  	display: flex;
+  	flex-direction: column;
+  	align-items: center;
+  	justify-content: center;
+  	width: 100%;
+  	height: 100%;
+  	z-index: 2;
+  	background: rgba(0, 0, 0, 0.2)
   }
 </style>
 
@@ -56,6 +63,10 @@
 				}
 
 				return 'Photo was not tagged with any alt text.';
+			},
+
+			toggleContentWarning(status) {
+				this.$emit('togglecw');
 			}
 		}
 	}