Merge pull request #5320 from pixelfed/staging

Staging

public/js/vendor.js.LICENSE.txt

@@ -31,13 +31,13 @@
  */
 
 /*!
- * Cropper.js v1.6.1
+ * Cropper.js v1.6.2
  * https://fengyuanchen.github.io/cropperjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:44:19.860Z
+ * Date: 2024-04-21T07:43:05.335Z
  */
 
 /*!
@@ -63,13 +63,6 @@
  * @license  MIT
  */
 
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
 /*!
  * Vue.js v2.7.16
  * (c) 2014-2023 Evan You
@@ -159,16 +152,6 @@ and limitations under the License.
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
-/*! queue-microtask. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/*! run-parallel. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/*! simple-peer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/*! simple-websocket. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
 /**
   * vue-class-component v7.2.3
   * (c) 2015-present Evan You
@@ -184,23 +167,6 @@ and limitations under the License.
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
-/**
- * @license Apache-2.0
- * Copyright 2018 Novage LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 /**
  * filesize
  *

resources/assets/components/Direct.vue

@@ -112,13 +112,16 @@
 	import Sidebar from './partials/sidebar.vue';
 	import Placeholder from './partials/placeholders/DirectMessagePlaceholder.vue';
 	import Intersect from 'vue-intersect'
+	import Autocomplete from '@trevoreyre/autocomplete-vue'
+	import '@trevoreyre/autocomplete-vue/dist/style.css';
 
 	export default {
 		components: {
 			"drawer": Drawer,
 			"sidebar": Sidebar,
 			"intersect": Intersect,
-            "dm-placeholder": Placeholder
+			"dm-placeholder": Placeholder,
+			"autocomplete": Autocomplete
 		},
 
 		data() {

resources/assets/components/DirectMessage.vue

@@ -456,7 +456,9 @@
 					// 	objDiv.scrollTop = objDiv.scrollHeight;
 					// }, 300);
 				}).catch(err => {
-					if(err.response.status == 403) {
+					if(err.response.status == 400) {
+						swal('Error', err.response.data.error, 'error');
+					} else if(err.response.status == 403) {
 						self.blocked = true;
 						swal('Profile Unavailable', 'You cannot message this profile at this time.', 'error');
 					}

resources/assets/components/Discover.vue

@@ -1,196 +1,14 @@
 <template>
 	<div class="web-wrapper">
-		<div v-if="isLoaded" class="container-fluid mt-3">
+		<div class="container-fluid mt-3">
 			<div class="row">
 				<div class="col-md-4 col-lg-3">
 					<sidebar :user="profile" />
 				</div>
 
-				<div v-if="tab == 'index'" class="col-md-8 col-lg-9 mt-n4">
+				<div class="col-md-8 col-lg-9 mt-n4">
-					<div v-if="profile.is_admin" class="d-md-flex my-md-3">
-						<grid-card
-							:dark="true"
-							:title="'Hello ' + profile.username"
-							subtitle="Welcome to the new Discover experience! Only admins can see this"
-							button-text="Manage Discover Settings"
-							button-link="/i/web/discover/settings"
-							icon-class="fal fa-cog"
-							:small="true" />
-					</div>
-					<!-- <section class="mb-1 mb-md-3 mb-lg-4">
-						<news-slider />
-					</section> -->
-
-					<!-- <discover-spotlight /> -->
-
-					<!-- <div class="d-md-flex my-md-3">
-						<grid-card
-							:dark="true"
-							title="The Not So Trending"
-							subtitle="Explore the posts that deserve more attention"
-							button-text="Explore posts"
-							icon-class="fal fa-analytics"
-							button-link="/i/web/discover/future-trending"
-							:button-event="true"
-							v-on:btn-click="toggleTab('trending')"
-							:small="true" />
-
-						<grid-card
-							title="Behind The Posts"
-							subtitle="Discover the people"
-							button-text="Discover People"
-							button-link="/i/web/discover/people"
-							icon-class="fal fa-user-friends"
-							:small="true" />
-					</div> -->
-
-					<daily-trending v-on:btn-click="toggleTab('trending')"/>
-
-					<!-- <div class="d-md-flex my-md-3">
-						<grid-card
-							title="Explore Loops"
-							subtitle="Loops are short, looping videos"
-							button-text="Explore Loops"
-							icon-class="fal fa-camcorder"
-							button-link="/i/web/discover/loops"
-							:small="false" />
-
-						<grid-card
-							:dark="true"
-							title="Popular Places"
-							subtitle="Explore posts by popular locations"
-							button-text="Explore Popular Places"
-							icon-class="fal fa-map"
-							:button-event="true"
-							v-on:btn-click="toggleTab('popular-places')"
-							button-link="/i/web/discover/popular-places"
-							:small="false" />
-					</div> -->
-
-					<div class="d-md-flex my-md-3">
-						<grid-card
-							v-if="config.hashtags.enabled"
-							:dark="true"
-							title="My Hashtags"
-							subtitle="Explore posts tagged with hashtags you follow"
-							button-text="Explore Posts"
-							button-link="/i/web/discover/my-hashtags"
-							icon-class="fal fa-hashtag"
-							:small="false" />
-
-						<grid-card
-							v-if="config.memories.enabled"
-							title="My Memories"
-							subtitle="A distant look back"
-							button-text="View Memories"
-							button-link="/i/web/discover/my-memories"
-							icon-class="fal fa-history"
-							:small="false" />
-					</div>
-
-					<div class="d-md-flex my-md-3">
-						<grid-card
-							v-if="config.insights.enabled"
-							title="Account Insights"
-							subtitle="Get a rich overview of your account activity and interactions"
-							button-text="View Account Insights"
-							icon-class="fal fa-user-circle"
-							button-link="/i/web/discover/account-insights"
-							:small="false" />
-
-						<grid-card
-							v-if="config.friends.enabled"
-							:dark="true"
-							title="Find Friends"
-							subtitle="Find accounts to follow based on common interests"
-							button-text="Find Friends & Followers"
-							button-link="/i/web/discover/find-friends"
-							icon-class="fal fa-user-plus"
-							:small="false" />
-					</div>
-
-					<div class="d-md-flex my-md-3">
-						<grid-card
-							v-if="config.server.enabled && config.server.domains && config.server.domains.length"
-							:dark="true"
-							title="Server Timelines"
-							subtitle="Browse timelines of a specific remote instance"
-							button-text="Browse Server Feeds"
-							icon-class="fal fa-list"
-							button-link="/i/web/discover/server-timelines"
-							:small="false" />
-
-						<!-- <grid-card
-							title="Curate the Spotlight"
-							subtitle="Apply to curate the spotlight for one week"
-							button-text="Apply to Curate Spotlight"
-							button-link="/i/web/discover/spotlight/curate/apply"
-							icon-class="fal fa-thumbs-up"
-							:small="false" /> -->
-					</div>
-				</div>
-
-				<div v-else-if="tab == 'trending'" class="col-md-8 col-lg-9 mt-n4">
 					<discover :profile="profile" />
 				</div>
-
-				<div v-else-if="tab == 'popular-places'" class="col-md-8 col-lg-9 mt-n4">
-					<section class="mt-3 mb-5 section-explore">
-						<div class="profile-timeline">
-							<div class="row p-0 mt-5">
-								<div class="col-12 mb-4 d-flex justify-content-between align-items-center">
-									<p class="d-block d-md-none h1 font-weight-bold mb-0 font-default">Popular Places</p>
-									<p class="d-none d-md-block display-4 font-weight-bold mb-0 font-default">Popular Places</p>
-								</div>
-							</div>
-						</div>
-
-						<div class="row mt-5">
-							<div class="col-12 col-md-12 mb-3">
-								<div class="card-img big">
-									<img src="/img/places/nyc.jpg">
-									<div class="title font-default">New York City</div>
-								</div>
-							</div>
-
-							<div class="col-12 col-md-6 mb-3">
-								<div class="card-img">
-									<img src="/img/places/edmonton.jpg">
-									<div class="title font-default">Edmonton</div>
-								</div>
-							</div>
-
-							<div class="col-12 col-md-6 mb-3">
-								<div class="card-img">
-									<img src="/img/places/paris.jpg">
-									<div class="title font-default">Paris</div>
-								</div>
-							</div>
-
-							<div class="col-12 col-md-4 mb-3">
-								<div class="card-img">
-									<img src="/img/places/london.jpg">
-									<div class="title font-default">London</div>
-								</div>
-							</div>
-
-							<div class="col-12 col-md-4 mb-3">
-								<div class="card-img">
-									<img src="/img/places/vancouver.jpg">
-									<div class="title font-default">Vancouver</div>
-								</div>
-							</div>
-
-							<div class="col-12 col-md-4 mb-3">
-								<div class="card-img">
-									<img src="/img/places/toronto.jpg">
-									<div class="title font-default">Toronto</div>
-								</div>
-							</div>
-						</div>
-					</section>
-				</div>
-
 			</div>
 
 			<drawer />
@@ -201,205 +19,23 @@
 <script type="text/javascript">
 	import Drawer from './partials/drawer.vue';
 	import Sidebar from './partials/sidebar.vue';
-	import Rightbar from './partials/rightbar.vue';
 	import Discover from './sections/DiscoverFeed.vue';
-	import DiscoverNewsSlider from './partials/discover/news-slider.vue';
-	import DiscoverSpotlight from './partials/discover/discover-spotlight.vue';
-	import DailyTrending from './partials/discover/daily-trending.vue';
-	import DiscoverGridCard from './partials/discover/grid-card.vue';
 
 	export default {
 		 components: {
 		 	"drawer": Drawer,
             "sidebar": Sidebar,
-            "rightbar": Rightbar,
             "discover": Discover,
-            "news-slider": DiscoverNewsSlider,
-            "discover-spotlight": DiscoverSpotlight,
-            "daily-trending": DailyTrending,
-            "grid-card": DiscoverGridCard
         },
 
         data() {
         	return {
-        		isLoaded: false,
         		profile: undefined,
-        		config: {},
-        		tab: 'index',
-        		popularAccounts: [],
-        		followingIndex: undefined
         	}
         },
 
-        updated() {
-			// let u = new URLSearchParams(window.location.search);
-			// if(u.has('ft') && u.get('ft') == '1') {
-			// 	this.tab = 'index';
-			// }
-        },
-
         mounted() {
 			this.profile = window._sharedData.user;
-			this.fetchConfig();
-        },
-
-        methods: {
-			fetchConfig() {
-				axios.get('/api/pixelfed/v2/discover/meta')
-				.then(res => {
-					this.config = res.data;
-					this.isLoaded = true;
-					window._sharedData.discoverMeta = res.data;
-					// this.fetchPopularAccounts();
-				})
-			},
-
-        	fetchPopularAccounts() {
-        		// axios.get('/api/pixelfed/discover/accounts/popular')
-        		// .then(res => {
-        		// 	this.popularAccounts = res.data;
-        		// })
-        	},
-
-        	followProfile(index) {
-        		event.currentTarget.blur();
-        		this.followingIndex = index;
-        		let id = this.popularAccounts[index].id;
-
-        		axios.post('/api/v1/accounts/' + id + '/follow')
-				.then(res => {
-        			this.followingIndex = undefined;
-        			this.popularAccounts.splice(index, 1);
-				}).catch(err => {
-        			this.followingIndex = undefined;
-					swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
-				});
-        	},
-
-        	goToProfile(account) {
-				this.$router.push({
-					path: `/i/web/profile/${account.id}`,
-					params: {
-						id: account.id,
-						cachedProfile: account,
-						cachedUser: this.profile
-					}
-				})
-			},
-
-			toggleTab(index) {
-				this.tab = index;
-				setTimeout(() => {
-					window.scrollTo({top: 0, behavior: 'smooth'});
-				}, 300);
-			},
-
-			openManageModal() {
-				event.currentTarget.blur();
-				swal('Settings', 'Discover settings here', 'info');
-			}
         }
 	}
 </script>
-
-<style lang="scss" scoped>
-	.card-img {
-		position: relative;
-
-		img {
-			object-fit: cover;
-			width: 100%;
-			height: 200px;
-			border-radius: 10px;
-
-		}
-
-		&:before,
-		&:after {
-			content: "";
-			background: rgba(0,0,0,0.2);
-			z-index: 2;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			left: 0;
-			top: 0;
-			border-radius: 10px;
-		}
-
-		.title {
-			position: absolute;
-			bottom: 5px;
-			left: 10px;
-			font-size: 40px;
-			color: #fff;
-			z-index: 3;
-			font-weight: 700;
-		}
-
-		&.big {
-			img {
-				height: 300px;
-			}
-		}
-	}
-	.font-default {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-		letter-spacing: -0.7px;
-	}
-
-	.bg-stellar {
-		background: #7474BF;
-		background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
-		background: linear-gradient(to right, #348AC7, #7474BF);
-	}
-
-	.bg-berry {
-		background: #5433FF;
-		background: -webkit-linear-gradient(to right, #acb6e5, #86fde8);
-		background: linear-gradient(to right, #acb6e5, #86fde8);
-	}
-
-	.bg-midnight {
-		background: #232526;
-		background: -webkit-linear-gradient(to right, #414345, #232526);
-		background: linear-gradient(to right, #414345, #232526);
-	}
-
-	.media-body {
-		margin-right: 0.5rem;
-	}
-
-	.avatar {
-		border-radius: 15px;
-	}
-
-	.username {
-		font-size: 14px;
-		line-height: 14px;
-		margin-bottom: 2px;
-		word-break: break-word !important;
-		word-wrap: break-word !important;
-	}
-
-	.display-name {
-		margin-bottom: 0;
-		font-size: 12px;
-		word-break: break-word !important;
-		word-wrap: break-word !important;
-	}
-
-	.follower-count {
-		margin-bottom: 0;
-		font-size: 10px;
-		word-break: break-word !important;
-		word-wrap: break-word !important;
-	}
-
-	.follow {
-		background-color: var(--primary);
-		border-radius: 18px;
-		font-weight: 600;
-		padding: 5px 15px;
-	}
-</style>

resources/assets/components/groups/CreateGroup.vue

@@ -209,8 +209,8 @@
 				permissionChecked: false,
                 membershipCategories: [
                     { key: 'Public', value: 'public' },
-                    { key: 'Private', value: 'private' },
+                    // { key: 'Private', value: 'private' },
-                    { key: 'Local', value: 'local' },
+                    // { key: 'Local', value: 'local' },
                 ],
 			}
 		},

resources/assets/components/groups/partials/CommentDrawer.vue

@@ -343,7 +343,8 @@
 				childReplyContent: null,
 				postingChildComment: false,
 				loadingChildComments: false,
-				replyChildMinId: undefined
+				replyChildMinId: undefined,
+                replyCursorId: null
 			}
 		},
 
@@ -584,6 +585,7 @@
 				}
 
 				this.replyChildId = status.id;
+                this.replyCursorId = status.id
 				this.replyChildIndex = index;
 
 				if(!status.hasOwnProperty('replies_loaded') || !status.replies_loaded) {
@@ -591,7 +593,9 @@
 						this.fetchChildReplies(status, index);
 					});
 				} else {
-
+                    this.$nextTick(() => {
+                        this.fetchChildReplies(status, index);
+                    });
 				}
 			},
 
@@ -600,7 +604,7 @@
 					params: {
 						gid: this.groupId,
 						sid: status.id,
-						cid: 1,
+						cid: this.replyCursorId,
 						limit: 3
 					}
 				}).then(res => {

resources/assets/components/groups/partials/GroupStatus.vue

@@ -17,6 +17,7 @@
                         :profile="profile"
                         :showGroupHeader="showGroupHeader"
                         :showGroupChevron="showGroupChevron"
+                        v-on:delete="statusDeleted"
                     />
 
 					<div>

resources/assets/components/groups/partials/SelfFeed.vue

@@ -1,32 +1,28 @@
 <template>
 	<div class="col-12 col-md-9" style="overflow:hidden">
-		<div class="row h-100 bg-light justify-content-center">
+		<div class="row bg-light justify-content-center">
-			<div class="col-12 col-md-10 col-lg-7">
+			<div class="col-12 flex-shrink-1">
-				<div v-if="!initalLoad">
+                <div class="my-4 px-3">
-					<p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+                    <p class="h1 font-weight-bold mb-1">Groups Feed</p>
+                    <p class="lead text-muted mb-0">Recent posts from your groups</p>
                 </div>
-				<div v-else class="px-5">
+            </div>
-					<div v-if="emptyFeed">
+        </div>
-						<div class="jumbotron mt-5">
+        <div class="row h-100 bg-light justify-content-center">
-							<h1 class="display-4">Hello 👋</h1>
+            <div class="col-12 col-md-10 col-lg-6">
-							<h3 class="font-weight-light">Welcome to Pixelfed Groups!</h3>
+                <div v-if="emptyFeed" class="mt-5">
+                    <h1 class="font-weight-bold">Welcome to Pixelfed Groups!</h1>
                     <p class="lead">Groups are a way to participate in like minded communities and topics.</p>
                     <hr class="my-4">
-							<p>Anyone can create and manage their own group as long as it abides by our <a href="#">community guidelines</a>.</p>
+                    <p>Anyone can create and manage their own group as long as it abides by our <a href="/site/kb/community-guidelines" target="_blank">community guidelines</a>.</p>
                     <p class="text-center mb-0">
                         <router-link to="/groups/discover" class="btn btn-primary btn-lg rounded-pill">
                             Discover Groups
                         </router-link>
                     </p>
                 </div>
-					</div>
 
                 <div v-else>
-						<div class="my-4">
-		                    <p class="h1 font-weight-bold mb-1">Groups Feed</p>
-		                    <p class="lead text-muted mb-0">Recent posts from your groups</p>
-		                </div>
-
                     <div class="my-3">
                         <group-status
                             v-for="(status, index) in feed"
@@ -50,15 +46,6 @@
                 </div>
             </div>
 		</div>
-			<!-- <div class="col-12 col-md-4">
-				<div class="mt-5 media align-items-center">
-					<div class="mr-3">
-						<i class="fas fa-info-circle fa-2x text-lighter"></i>
-					</div>
-					<p class="media-body text-muted mb-0 font-weight-light">Groups are in beta, some <a href="#" class="font-weight-bold">limitations</a> apply.</p>
-				</div>
-			</div> -->
-		</div>
 	</div>
 </template>
 

resources/assets/components/groups/partials/Status/GroupHeader.vue

@@ -110,12 +110,12 @@
                         <span class="fas fa-ellipsis-h text-lighter"></span>
                       </button>
                       <div class="dropdown-menu  dropdown-menu-right">
-                        <a class="dropdown-item" href="#">View Post</a>
+                        <a class="dropdown-item" :href="statusUrl()">View Post</a>
-                        <a class="dropdown-item" href="#">View Profile</a>
+                        <a class="dropdown-item" :href="profileUrl()">View Profile</a>
-                        <a class="dropdown-item" href="#">Copy Link</a>
+                        <!-- <a class="dropdown-item" href="#">Copy Link</a> -->
                         <a class="dropdown-item" href="#" @click.prevent="sendReport()">Report</a>
                         <div class="dropdown-divider"></div>
-                        <a class="dropdown-item text-danger" href="#">Delete</a>
+                        <a class="dropdown-item text-danger" href="#" @click.prevent="onDelete()">Delete</a>
                       </div>
                     </div>
                     <!-- <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
@@ -171,12 +171,12 @@
                 return App.util.format.count(count);
             },
 
-            statusUrl(status) {
+            statusUrl() {
-                return '/groups/' + status.gid + '/p/' + status.id;
+                return '/groups/' + this.status.gid + '/p/' + this.status.id;
             },
 
-            profileUrl(status) {
+            profileUrl() {
-                return '/groups/' + status.gid + '/user/' + status.account.id;
+                return '/groups/' + this.status.gid + '/user/' + this.status.account.id;
             },
 
             timestampFormat(timestamp) {
@@ -268,6 +268,28 @@
                   swal("Cancelled", "Your report was not submitted.", "error");
                 }
               });
+            },
+            onDelete() {
+              swal({
+                title: "Delete Post Confirmation",
+                text: 'Are you sure you want to delete this post?',
+                icon: "warning",
+                dangerMode: true,
+                buttons: true
+              }).then((confirm) => {
+                if(confirm) {
+                    axios.post('/api/v0/groups/status/delete', {
+                        id: this.status.id,
+                        gid: this.status.gid,
+                    })
+                    .then(res => {
+                        this.$emit('delete', this.status)
+                    })
+                    .catch(err => {
+                        console.log(err)
+                    })
+                }
+              });
             }
         }
     }

resources/assets/components/partials/profile/ProfileFeed.vue

@@ -275,6 +275,7 @@
 						v-on:likes-modal="openLikesModal(index)"
 						v-on:shares-modal="openSharesModal(index)"
 						v-on:comment-likes-modal="openCommentLikesModal"
+						v-on:bookmark="handleBookmark(index)"
 						v-on:handle-report="handleReport" />
 				</div>
 
@@ -845,6 +846,32 @@
 				})
 			},
 
+			handleBookmark(index) {
+				let p = this.feed[index];
+
+				if(p.reblog) {
+					p = p.reblog;
+				}
+
+				axios.post('/i/bookmark', {
+					item: p.id
+				})
+				.then(res => {
+					if(this.feed[index].reblog) {
+						this.feed[index].reblog.bookmarked = !p.bookmarked;
+					} else {
+						this.feed[index].bookmarked = !p.bookmarked;
+					}
+				})
+				.catch(err => {
+					this.$bvToast.toast('Cannot bookmark post at this time.', {
+						title: 'Bookmark Error',
+						variant: 'danger',
+						autoHideDelay: 5000
+					});
+				});
+			},
+
 			formatCount(val) {
 				return App.util.format.count(val);
 			},

resources/assets/components/presenter/VideoPlayer.vue

@@ -45,8 +45,6 @@
     import Hls from 'hls.js';
     import "plyr/dist/plyr.css";
     import Plyr from 'plyr';
-    import { p2pml } from '@peertube/p2p-media-loader-core'
-    import { Engine, initHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'
 
     export default {
         props: ['status', 'fixedHeight'],
@@ -72,8 +70,8 @@
         methods: {
             handleShouldPlay(){
                 this.shouldPlay = true;
-                this.isHlsSupported = this.hlsConfig.enabled && Hls.isSupported();
+                this.isHlsSupported = false;
-                this.isP2PSupported = this.hlsConfig.enabled && this.hlsConfig.p2p && Engine.isSupported();
+                this.isP2PSupported = false;
                 this.$nextTick(() => {
                     this.init();
                 })

resources/assets/components/sections/DiscoverFeed.vue

@@ -1,12 +1,10 @@
 <template>
     <div class="discover-feed-component">
         <section class="mt-3 mb-5 section-explore">
-            <b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>
-
             <div class="profile-timeline">
                 <div class="row p-0 mt-5">
-                    <div class="col-12 mb-4 d-flex justify-content-between align-items-center">
+                    <div class="col-12 mb-4 d-flex justify-content-between align-items-center flex-column flex-lg-row">
-                        <p class="d-block d-md-none h1 font-weight-bold mb-0 font-default">Trending</p>
+                        <p class="d-block d-md-none h1 font-weight-bold mb-3 font-default">Trending</p>
                         <p class="d-none d-md-block display-4 font-weight-bold mb-0 font-default">Trending</p>
 
                         <div>

resources/assets/js/components/PostComponent.vue

@@ -302,53 +302,6 @@
 								v-on:likeStatus="likeStatus" />
 
 						<comment-feed :status="status" class="mt-3" />
-						<!-- <div v-if="user.hasOwnProperty('id')" class="card card-body shadow-none border border-top-0 bg-light">
-								<div class="media">
-									<img src="/storage/avatars/default.png" class="rounded-circle mr-2" width="40" height="40">
-									<div class="media-body">
-											<div class="form-group mb-0" style="position:relative;">
-												  <input class="form-control rounded-pill" placeholder="Add a comment..." style="padding-right: 90px;">
-												  <div class="btn btn-primary btn-sm rounded-pill font-weight-bold px-3" style="position:absolute;top: 5px;right:6px;">Post</div>
-											</div>
-									</div>
-								</div>
-						</div>
-
-						<div v-if="user.hasOwnProperty('id')" v-for="(reply, index) in results" :key="'replies:'+index" class="card card-body shadow-none border border-top-0">
-							<div class="media">
-								<img :src="reply.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
-									<div class="media-body">
-										<div v-if="reply.sensitive == true">
-											<span class="py-3">
-												<a class="text-dark font-weight-bold mr-3"  style="font-size: 13px;" :href="profileUrl(reply)" v-bind:title="reply.account.username">{{trimCaption(reply.account.username,15)}}</a>
-												<span class="text-break" style="font-size: 13px;">
-													<span class="font-italic text-muted">This comment may contain sensitive material</span>
-													<span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
-												</span>
-											</span>
-										</div>
-										<div v-else>
-											<p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
-												<span class="mr-3" style="font-size: 13px;">
-													<a class="text-dark font-weight-bold mr-1 text-break" :href="profileUrl(reply)" v-bind:title="reply.account.username">{{trimCaption(reply.account.username,15)}}</a>
-													<span class="text-break comment-body" style="word-break: break-all;" v-html="reply.content"></span>
-												</span>
-												<span class="text-right" style="min-width: 30px;">
-													<span v-on:click="likeReply(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
-													<span class="pl-2 text-lighter cursor-pointer" @click="ctxMenu(reply)">
-														<span class="fas fa-ellipsis-v text-lighter"></span>
-													</span>
-												</span>
-											</p>
-											<p class="mb-0">
-												<a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(reply.created_at)" :href="getStatusUrl(reply)"></a>
-												<span v-if="reply.favourites_count" class="text-muted comment-reaction font-weight-bold mr-3 small">{{reply.favourites_count == 1 ? '1 like' : reply.favourites_count + ' likes'}}</span>
-												<span class="small text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index, true)">Reply</span>
-											</p>
-										</div>
-									</div>
-							</div>
-						</div> -->
 					</div>
 				</div>
 			</div>
@@ -1424,7 +1377,15 @@ export default {
 			},
 
 			previewUrl(status) {
-				return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
+                if(status.sensitive) {
+                    return '/storage/no-preview.png';
+                }
+
+                if(status.media_attachments[0]?.optimized_url) {
+                    return status.media_attachments[0]?.optimized_url;
+                }
+
+				return status.media_attachments[0].preview_url;
 			},
 
 			previewBackground(status) {

resources/assets/sass/spa.scss

@@ -140,6 +140,10 @@ body {
     z-index: 2;
 }
 
+.fw-bold {
+    font-weight: bold;
+}
+
 .navbar-light .navbar-brand {
     color: var(--dark);