Merge pull request #2856 from pixelfed/staging

Staging

CHANGELOG.md

@@ -60,6 +60,10 @@
 - Updated components, add fallback default avatar. ([726553f5](https://github.com/pixelfed/pixelfed/commit/726553f5))
 - Updated job queue, separate deletes into their own queue. ([7f421392](https://github.com/pixelfed/pixelfed/commit/7f421392))
 - Updated DiscoverController, use UserFilterService on trendingApi. ([135474ae](https://github.com/pixelfed/pixelfed/commit/135474ae))
+- Updated PublicApiController, use UserFilterService in public timeline endpoint. ([ca6e491c](https://github.com/pixelfed/pixelfed/commit/ca6e491c))
+- Updated ContextMenu, add View Profile link. ([8544bcbd](https://github.com/pixelfed/pixelfed/commit/8544bcbd))
+- Updated presenters, improve content warnings. ([86422c81](https://github.com/pixelfed/pixelfed/commit/86422c81))
+- Updated Timeline.vue, increase pagination limit from 3 to 12 and add empty feed placeholder. ([916e8f71](https://github.com/pixelfed/pixelfed/commit/916e8f71))
 -  ([](https://github.com/pixelfed/pixelfed/commit/))
 
 ## [v0.11.0 (2021-06-01)](https://github.com/pixelfed/pixelfed/compare/v0.10.10...v0.11.0)

app/Http/Controllers/PublicApiController.php

@@ -291,10 +291,7 @@ class PublicApiController extends Controller
         $limit = $request->input('limit') ?? 3;
         $user = $request->user();
 
-        $filtered = UserFilter::whereUserId($user->profile_id)
-                  ->whereFilterableType('App\Profile')
-                  ->whereIn('filter_type', ['mute', 'block'])
-                  ->pluck('filterable_id')->toArray();
+        $filtered = $user ? UserFilterService::filters($user->profile_id) : [];
 
         if($min || $max) {
             $dir = $min ? '>' : '<';
@@ -305,7 +302,8 @@ class PublicApiController extends Controller
                         'type',
                         'scope',
                         'local'
-                      )->where('id', $dir, $id)
+                      )
+            		  ->where('id', $dir, $id)
                       ->whereIn('type', ['text', 'photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
                       ->whereNotIn('profile_id', $filtered)
                       ->whereLocal(true)
@@ -339,7 +337,8 @@ class PublicApiController extends Controller
                         'likes_count',
                         'reblogs_count',
                         'updated_at'
-                      )->whereIn('type', ['text', 'photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
+                      )
+            		  ->whereIn('type', ['text', 'photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
                       ->whereNotIn('profile_id', $filtered)
                       ->with('profile', 'hashtags', 'mentions')
                       ->whereLocal(true)
@@ -378,14 +377,14 @@ class PublicApiController extends Controller
         $user = $request->user();
 
         $key = 'user:last_active_at:id:'.$user->id;
-        $ttl = now()->addMinutes(5);
+        $ttl = now()->addMinutes(20);
         Cache::remember($key, $ttl, function() use($user) {
             $user->last_active_at = now();
             $user->save();
             return;
         });
 
-        $pid = Auth::user()->profile_id;
+        $pid = $user->profile_id;
 
         $following = Cache::remember('profile:following:'.$pid, now()->addMinutes(1440), function() use($pid) {
             $following = Follower::whereProfileId($pid)->pluck('following_id');
@@ -401,7 +400,7 @@ class PublicApiController extends Controller
 			});
         }
 
-        $filtered = Auth::check() ? UserFilterService::filters(Auth::user()->profile_id) : [];
+        $filtered = $user ? UserFilterService::filters($user->profile_id) : [];
 
         if($min || $max) {
             $dir = $min ? '>' : '<';
@@ -425,7 +424,8 @@ class PublicApiController extends Controller
                         'reblogs_count',
                         'created_at',
                         'updated_at'
-                      )->whereIn('type', ['text','photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
+                      )
+            		  ->whereIn('type', ['text','photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
                       ->with('profile', 'hashtags', 'mentions')
                       ->where('id', $dir, $id)
                       ->whereIn('profile_id', $following)
@@ -454,7 +454,8 @@ class PublicApiController extends Controller
                         'reblogs_count',
                         'created_at',
                         'updated_at'
-                      )->whereIn('type', ['text','photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
+                      )
+            		  ->whereIn('type', ['text','photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
                       ->with('profile', 'hashtags', 'mentions')
                       ->whereIn('profile_id', $following)
                       ->whereNotIn('profile_id', $filtered)
@@ -495,6 +496,8 @@ class PublicApiController extends Controller
             return;
         });
 
+        $filtered = $user ? UserFilterService::filters($user->profile_id) : [];
+
         if($min || $max) {
             $dir = $min ? '>' : '<';
             $id = $min ?? $max;
@@ -504,7 +507,9 @@ class PublicApiController extends Controller
                         'type',
                         'scope',
                         'created_at',
-                      )->where('id', $dir, $id)
+                      )
+            		  ->where('id', $dir, $id)
+                      ->whereNotIn('profile_id', $filtered)
                       ->whereIn('type', ['photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
                       ->whereNotNull('uri')
                       ->whereScope('public')
@@ -525,7 +530,9 @@ class PublicApiController extends Controller
 	                        'type',
 	                        'scope',
 	                        'created_at',
-	                      )->whereIn('type', ['photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
+	                      )
+                      	  ->whereNotIn('profile_id', $filtered)
+	            		  ->whereIn('type', ['photo', 'photo:album', 'video', 'video:album', 'photo:video:album'])
 	                      ->whereNotNull('uri')
 	                      ->whereScope('public')
                       	  ->where('id', '>', $amin)

resources/assets/js/components/PostComponent.vue

@@ -57,19 +57,19 @@
 								</div>
 
 								<div v-else-if="status.pf_type === 'video'" class="w-100">
-									<video-presenter :status="status"></video-presenter>
+									<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-									<photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
+									<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-									<video-album-presenter :status="status"></video-album-presenter>
+									<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-									<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
+									<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
 								</div>
 
 								<div v-else class="w-100">
@@ -292,19 +292,19 @@
 								</div>
 
 								<div v-else-if="status.pf_type === 'video'" class="w-100">
-									<video-presenter :status="status"></video-presenter>
+									<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-									<photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
+									<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-									<video-album-presenter :status="status"></video-album-presenter>
+									<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-									<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
+									<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
 								</div>
 
 								<div v-else class="w-100">

resources/assets/js/components/RemotePost.vue

@@ -50,19 +50,19 @@
 								</div>
 
 								<div v-else-if="status.pf_type === 'video'" class="w-100">
-									<video-presenter :status="status"></video-presenter>
+									<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-									<photo-album-presenter :status="status"></photo-album-presenter>
+									<photo-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-									<video-album-presenter :status="status"></video-album-presenter>
+									<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-									<mixed-album-presenter :status="status"></mixed-album-presenter>
+									<mixed-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
 								</div>
 
 								<div v-else class="w-100">

resources/assets/js/components/RemoteProfile.vue

@@ -60,60 +60,10 @@
 			</div>
 			<div class="col-12 col-md-8 pt-5">
 				<div class="row">
-					<div class="col-12 mb-2" v-for="(status, index) in feed" :key="'remprop' + index">
-						<div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border cursor-pointer">
-								<div class="card-header d-inline-flex align-items-center bg-white">
-									<img v-bind:src="profile.avatar" width="38px" height="38px" style="border-radius: 38px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
-									<div class="pl-2">
-										<span class="username font-weight-bold text-dark">{{profile.username}}
-										</span>
-									</div>
-									<div class="text-right" style="flex-grow:1;">
-										<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
-											<span class="fas fa-ellipsis-h text-lighter"></span>
-										</button>
-									</div>
-								</div>
-
-								<div class="card-body p-0">
-									<div v-if="status.sensitive == true">
-										<details class="details-animated" @click="status.sensitive = false;">
-											<summary>
-												<p class="mb-0 lead font-weight-bold">{{status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
-												<p class="font-weight-light">(click to show)</p>
-											</summary>
-											<a :href="remotePostUrl(status)">
-												<img v-once :src="status.thumb" class="w-100 h-100">
-											</a>
-										</details>
-									</div>
-									<div v-else>
-										<a :href="remotePostUrl(status)">
-											<img v-once :src="status.thumb" class="w-100 h-100">
-										</a>
-										<button v-if="status.cw == true && status.sensitive == false" class="btn btn-block btn-primary font-weight-bold rounded-0" @click="status.sensitive = true;">Hide Media</button>
-									</div>
-									
-								</div>
-
-								<div class="card-body">
-									<div class="caption">
-										<p class="mb-2 read-more" style="overflow: hidden;">
-											<span class="username font-weight-bold">
-												<bdi><span class="text-dark">{{profile.username}}</span></bdi>
-											</span>
-											<span class="status-content" v-html="status.caption.html"></span>
-										</p>
-									</div>
-									<div class="timestamp mt-2">
-										<p class="small text-uppercase mb-0">
-											<a :href="remotePostUrl(status)" class="text-muted">
-												<timeago :datetime="status.timestamp" :auto-update="90" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.timestamp)" v-b-tooltip.hover.bottom></timeago>
-											</a>
-										</p>
-									</div>
-								</div>
-						</div>
+					<div class="col-12" v-for="(status, index) in feed" :key="'remprop' + index">
+						<status-card
+							:class="{'border-top': index === 0}"
+							:status="status" />
 					</div>
 
 					<div v-if="feed.length == 0" class="col-12 mb-2">
@@ -195,10 +145,17 @@
 </template>
 
 <script type="text/javascript">
+	import StatusCard from './partials/StatusCard.vue';
+
 	export default {
 		props: [
 			'profile-id',
 		],
+
+		components: {
+			StatusCard
+		},
+
 		data() {
 			return {
 				id: [],
@@ -234,7 +191,6 @@
 		},
 
 		methods: {
-
 			fetchProfile() {
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 					this.user = res.data
@@ -258,29 +214,7 @@
 				})
 				.then(res => {
 					let data = res.data
-						.filter(status => status.media_attachments.length > 0)
-						.map(status => {
-							return {
-								id: status.id,
-								caption: {
-									text: status.content_text,
-									html: status.content
-								},
-								count: {
-									likes: status.favourites_count,
-									shares: status.reblogs_count,
-									comments: status.reply_count
-								},
-								thumb: status.media_attachments[0].url,
-								media: status.media_attachments,
-								timestamp: status.created_at,
-								type: status.pf_type,
-								url: status.url,
-								sensitive: status.sensitive,
-								cw: status.sensitive,
-								spoiler_text: status.spoiler_text
-							}
-						});
+						.filter(status => status.media_attachments.length > 0);
 					let ids = data.map(status => status.id);
 					this.ids = ids;
 					this.min_id = Math.max(...ids);

resources/assets/js/components/Timeline.vue

@@ -280,17 +280,24 @@
 								:status="status"
 								:recommended="true" />
 						</div>
+
+						<div v-if="!loading && emptyFeed">
+							<div class="card rounded-0 mt-3 status-card rounded-0 shadow-none border">
+								<div class="card-body py-5 my-5">
+									<p class="text-center"><i class="fas fa-battery-empty fa-8x text-lighter"></i></p>
+									<p class="text-center h3 font-weight-light">empty_timeline.jpg</p>
+									<p class="text-center text-muted font-weight-light">We cannot find any posts for this timeline.</p>
+									<p class="text-center mb-0">
+										<a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
+									</p>
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
 				<div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
 					<div>
 
-						<!-- <div class="mb-4">
-							<a class="btn btn-block btn-primary btn-sm font-weight-bold mb-3 border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
-								<i class="far fa-plus-square pr-3 fa-lg pt-1"></i> New Post
-							</a>
-						</div> -->
-
 						<div class="mb-4">
 							<div v-show="!loading" class="">
 								<div class="pb-2">
@@ -580,7 +587,8 @@
 				recentFeed: this.scope === 'home' ? true : false,
 				recentFeedMin: null,
 				recentFeedMax: null,
-				reactionBar: true
+				reactionBar: true,
+				emptyFeed: false
 			}
 		},
 
@@ -687,11 +695,18 @@
 				axios.get(apiUrl, {
 					params: {
 						max_id: this.max_id,
-						limit: 3,
+						limit: 12,
 						recent_feed: this.recentFeed
 					}
 				}).then(res => {
 					let data = res.data;
+
+					if(!data.length) {
+						this.loading = false;
+						this.emptyFeed = true;
+						return;
+					}
+
 					this.feed.push(...data);
 					let ids = data.map(status => status.id);
 					this.ids = ids;

resources/assets/js/components/partials/ContextMenu.vue

@@ -12,6 +12,7 @@
 				<!-- <div v-if="status && status.account.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
 				<div v-if="status && status.account.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div> -->
 				<div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">View Post</div>
+				<div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToProfile()">View Profile</div>
 				<!-- <div v-if="status && status.local == true && !status.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
 				<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div> -->
 				<div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div>
@@ -279,6 +280,13 @@
 				return;
 			},
 
+			ctxMenuGoToProfile() {
+				let status = this.ctxMenuStatus;
+				window.location.href = this.profileUrl(status);
+				this.closeCtxMenu();
+				return;
+			},
+
 			ctxMenuFollow() {
 				let id = this.ctxMenuStatus.account.id;
 				axios.post('/i/follow', {
@@ -633,6 +641,14 @@
 				return '/i/web/post/_/' + status.account.id + '/' + status.id;
 			},
 
+			profileUrl(status) {
+				if(status.local == true) {
+					return status.account.url;
+				}
+
+				return '/i/web/profile/_/' + status.account.id;
+			},
+
 			deletePost(status) {
 				if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) {
 					return;

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

@@ -1,35 +1,50 @@
 <template>
-	<div v-if="status.sensitive == true">
-		<details class="details-animated">
-			<summary @click="loadSensitive">
-				<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
-				<p class="font-weight-light">(click to show)</p>
-			</summary>
-			<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb">
-				<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" :title="img.description">
-					<img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
-					<p
-						v-if="status.media_attachments[0].license"
-						style="
-						margin-bottom: 0;
-						padding: 0 5px;
-						color: #fff;
-						font-size: 10px;
-						text-align: right;
-						position: absolute;
-						bottom: 0;
-						right: 0;
-						border-top-left-radius: 5px;
-						background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-					"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
-				</slide>
-			</carousel>
-		</details>
+	<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>
+			</p>
+			<p class="h4 font-weight-bold text-center">
+				Sensitive Content
+			</p>
+			<p class="text-center py-2">
+				{{ status.spoiler_text ? status.spoiler_text : 'This album may contain sensitive content.'}}
+			</p>
+			<p class="mb-0">
+				<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"
+			:hash="status.media_attachments[0].blurhash"
+			:alt="altText(status)"/>
 	</div>
 	<div v-else class="w-100 h-100 p-0">
 		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
 			<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
+
 				<img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
+
+				<p v-if="!status.sensitive && sensitive"
+					@click="status.sensitive = true"
+					style="
+					margin-top: 0;
+					padding: 10px;
+					color: #fff;
+					font-size: 10px;
+					text-align: right;
+					position: absolute;
+					top: 0;
+					right: 0;
+					border-top-left-radius: 5px;
+					cursor: pointer;
+					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+				">
+					<i class="fas fa-eye-slash fa-lg"></i>
+				</p>
+
 				<p
 					v-if="status.media_attachments[0].license"
 					style="
@@ -43,7 +58,9 @@
 					right: 0;
 					border-top-left-radius: 5px;
 					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-				"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
+				">
+					<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
+				</p>
 			</slide>
 		</carousel>
 	</div>
@@ -54,6 +71,24 @@
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
+  .content-label-wrapper {
+  	position: relative;
+  }
+  .content-label {
+  	margin: 0;
+  	position: absolute;
+  	top:50%;
+  	left:50%;
+  	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>
 
 <script type="text/javascript">
@@ -62,6 +97,7 @@
 
 		data() {
 			return {
+				sensitive: this.status.sensitive,
 				cursor: 0
 			}
 		},
@@ -75,9 +111,8 @@
 		},
 
 		methods: {
-			loadSensitive() {
-				this.$refs.carousel.onResize();
-				this.$refs.carousel.goToPage(0);
+			toggleContentWarning(status) {
+				this.$emit('togglecw');
 			},
 
 			altText(img) {

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

@@ -31,6 +31,24 @@
 				:height="height()"
 				onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 
+				<p v-if="!status.sensitive && sensitive"
+					@click="status.sensitive = true"
+					style="
+					margin-top: 0;
+					padding: 10px;
+					color: #fff;
+					font-size: 10px;
+					text-align: right;
+					position: absolute;
+					top: 0;
+					right: 0;
+					border-top-left-radius: 5px;
+					cursor: pointer;
+					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+				">
+					<i class="fas fa-eye-slash fa-lg"></i>
+				</p>
+
 				<p
 					v-if="status.media_attachments[0].license"
 					style="
@@ -78,6 +96,12 @@
 	export default {
 		props: ['status'],
 
+		data() {
+			return {
+				sensitive: this.status.sensitive
+			}
+		},
+
 		methods: {
 			altText(status) {
 				let desc = status.media_attachments[0].description;

resources/assets/js/rempro.js

@@ -1,4 +1,29 @@
+Vue.component(
+    'photo-presenter',
+    require('./components/presenter/PhotoPresenter.vue').default
+);
+
+Vue.component(
+    'video-presenter',
+    require('./components/presenter/VideoPresenter.vue').default
+);
+
+Vue.component(
+    'photo-album-presenter',
+    require('./components/presenter/PhotoAlbumPresenter.vue').default
+);
+
+Vue.component(
+    'video-album-presenter',
+    require('./components/presenter/VideoAlbumPresenter.vue').default
+);
+
+Vue.component(
+    'mixed-album-presenter',
+    require('./components/presenter/MixedAlbumPresenter.vue').default
+);
+
 Vue.component(
 	'remote-profile',
 	require('./components/RemoteProfile.vue').default
-);
+);