Update components

resources/assets/js/components/CollectionComponent.vue

@@ -67,8 +67,37 @@
 				</select>
 			</div>
 			<div class="d-flex justify-content-between align-items-center pt-3">
-				<a class="text-primary font-weight-bold text-decoration-none" href="#" @click.prevent="showEditPhotosModal">Edit Photos</a>
-				<button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="updateCollection">Save</button>
+				<a
+					class="text-primary font-weight-bold text-decoration-none"
+					href="#"
+					@click.prevent="showEditPhotosModal">
+					Edit Photos
+				</a>
+
+				<div v-if="collection.published_at">
+					<button
+						type="button"
+						class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right"
+						@click.prevent="updateCollection">
+						Save
+					</button>
+				</div>
+
+				<div v-else class="float-right">
+					<button
+						type="button"
+						class="btn btn-outline-primary btn-sm py-1 font-weight-bold px-3"
+						@click.prevent="publishCollection">
+						Publish
+					</button>
+
+					<button
+						type="button"
+						class="btn btn-primary btn-sm py-1 font-weight-bold px-3"
+						@click.prevent="updateCollection">
+						Save
+					</button>
+				</div>
 			</div>
 		</form>
 	</b-modal>
@@ -161,6 +190,7 @@ export default {
 
 	data() {
 		return {
+			collection: {},
 			config: window.App.config,
 			loaded: false,
 			posts: [],
@@ -179,14 +209,21 @@ export default {
 	},
 
 	beforeMount() {
-		this.fetchCurrentUser();
-		this.fetchItems();
+		this.fetchCollection();
 	},
 
 	mounted() {
 	},
 
 	methods: {
+		fetchCollection() {
+			axios.get('/api/local/collection/' + this.collectionId)
+			.then(res => {
+				this.collection = res.data;
+				this.fetchCurrentUser();
+			})
+		},
+
 		fetchCurrentUser() {
 			if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
@@ -194,9 +231,13 @@ export default {
 					this.owner = this.currentUser.id == this.profileId;
 					window._sharedData.curUser = res.data;
 					window.App.util.navatar();
+					this.fetchItems();
 				});
+			} else {
+				this.fetchItems();
 			}
 		},
+
 		fetchItems() {
 			axios.get('/api/local/collection/items/' + this.collectionId)
 			.then(res => {
@@ -296,6 +337,26 @@ export default {
 			}
 		},
 
+		publishCollection() {
+			if(this.owner == false) {
+				return;
+			}
+
+			let confirmed = window.confirm('Are you sure you want to publish this collection?');
+			if(confirmed) {
+				axios.post('/api/local/collection/' + this.collectionId + '/publish', {
+					title: this.title,
+					description: this.description,
+					visibility: this.visibility
+				})
+				.then(res => {
+					window.location.href = '/';
+				});
+			} else {
+				return;
+			}
+		},
+
 		updateCollection() {
 			this.$refs.editModal.hide();
 			axios.post('/api/local/collection/' + this.collectionId, {
@@ -367,4 +428,4 @@ export default {
 		}		
 	}
 }
-</script>
+</script>

resources/assets/js/components/ComposeClassic.vue

@@ -61,7 +61,7 @@
 							</b-carousel-slide>
 						</b-carousel>
 					</div>
-					<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-dark align-items-center">
+					<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="bg-dark align-items-center">
 						<ul class="nav media-drawer-filters text-center">
 							<li class="nav-item">
 								<div class="p-1 pt-3">
@@ -78,7 +78,7 @@
 						</ul>
 					</div>
 				</div>
-				<div v-if="ids.length > 0 && ['Image', 'Video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
+				<div v-if="ids.length > 0 && ['image', 'video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
 					<div v-if="media[carouselCursor].type == 'Image'" class="col-12">
 						<div class="form-group">
 							<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
@@ -516,4 +516,4 @@ export default {
 		}
 	}
 }
-</script>
+</script>

resources/assets/js/components/ComposeModal.vue

@@ -358,7 +358,7 @@
 								<img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
 							</div>
 							<hr>
-							<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
+							<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
 								<ul class="nav media-drawer-filters text-center">
 									<li class="nav-item">
 										<div class="p-1 pt-3">
@@ -395,7 +395,7 @@
 								<li class="nav-item mx-md-4">&nbsp;</li>
 							</ul>
 							<hr>
-							<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
+							<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
 								<ul class="nav media-drawer-filters text-center">
 									<li class="nav-item">
 										<div class="p-1 pt-3">

resources/assets/js/components/PostComponent.vue

@@ -283,178 +283,6 @@
 			</div>
 		</div>
 
-		<div v-if="layout == 'moment'" class="momentui">
-			<div class="bg-dark mt-md-n4">
-				<div class="container" style="max-width: 700px;">
-							<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center bg-dark">
-								<div v-if="status.pf_type === 'photo'" class="w-100">
-									<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">
-									<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" 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" 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" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
-								</div>
-
-								<div v-else class="w-100">
-									<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
-								</div>
-							</div>
-				</div>
-			</div>
-			<div class="bg-white">
-				<div class="container">
-					<div class="row pb-5">
-						<div class="col-12 col-md-8 py-4">
-							<div class="reactions d-flex align-items-center">
-								<div class="text-center mr-5">
-									<div v-bind:class="[reactions.liked ? 'fas fa-heart text-danger m-0 cursor-pointer' : 'far fa-heart m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus" style="font-size:1.575rem">
-									</div>
-									<div class="like-count font-weight-bold mt-2 rounded border" style="cursor:pointer;" v-on:click="likesModal">
-
-										{{ownerOrAdmin == true ? (status.liked_by.total_count + 1) : 0}}
-									</div>
-								</div>
-								<div class="text-center">
-									<div v-if="status.visibility == 'public'" v-bind:class="[reactions.shared ? 'h3 far fa-share-square m-0 text-primary cursor-pointer' : 'h3 far fa-share-square m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus">
-									</div>
-									<div class="share-count font-weight-bold mt-2 rounded border" v-if="status.visibility == 'public'" style="cursor:pointer;" v-on:click="sharesModal">{{status.reblogs_count || 0}}</div>
-								</div>
-							</div>
-							<div v-if="status.length && status.content_text.includes('#') || status.content_text.includes('https://') || status.content_text.includes('@') || status.content_text.length > 45" class="media align-items-center mt-3">
-								<div class="media-body">
-									<p class="lead mr-2" v-html="status.content">
-									</p>
-									<p class="lead mb-0">
-										by <a :href="statusProfileUrl">{{statusUsername}}</a>
-										<span v-if="relationship && profile && user && !relationship.following && profile.id != user.id">
-											<span class="px-1 text-lighter">•</span>
-											<a class="font-weight-bold small" href="#">Follow</a>
-										</span>
-									</p>
-								</div>
-								<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
-							</div>
-							<div v-else class="media align-items-center mt-3">
-								<div class="media-body">
-									<h2 class="font-weight-bold mr-2">
-										{{status.content_text.length ? status.content_text : 'Untitled Post'}}
-									</h2>
-									<p class="lead mb-0">
-										by <a :href="statusProfileUrl">{{statusUsername}}</a>
-										<!-- <span class="px-1 text-lighter">•</span>
-										<a class="font-weight-bold small" href="#">Follow</a> -->
-									</p>
-								</div>
-								<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
-							</div>
-							<hr>
-							<div>
-								<p class="lead">
-									<span v-if="status.place" class="text-truncate">
-										<i class="fas fa-map-marker-alt text-lighter mr-3"></i> {{status.place.name}}, {{status.place.country}}
-									</span>
-									<span v-once class="float-right">
-										<i class="far fa-clock text-lighter mr-3"></i> {{timeAgo(status.created_at)}} ago
-									</span>
-								</p>
-								<!-- <div class="">
-									<p class="lead">
-										<span class="mr-3"><i class="fas fa-camera text-lighter"></i></span>
-										<span>Nikon D850</span>
-									</p>
-									<p class="lead">
-										<span class="mr-3"><i class="fas fa-ruler-horizontal text-lighter"></i></span>
-										<span>200-500mm</span>
-									</p>
-									<p class="lead">
-										<span class="mr-3"><i class="fas fa-stream text-lighter"></i></span>
-										<span>500mm <span class="px-1"></span> ƒ/7.1 <span class="px-1"></span> 1/1600s <span class="px-1"></span> ISO 800</span>
-									</p>
-								</div> -->
-								<div v-if="status.tags" class="pt-4">
-									<p class="lead">
-										<a v-for="(tag, index) in status.tags" class="btn btn-outline-dark mr-1 mb-1" :href="tag.url + '?src=mp'">{{tag.name}}</a>
-									</p>
-								</div>
-							</div>
-						</div>
-						<div class="col-12 col-md-4 pt-4 pl-md-3">
-							<p class="lead font-weight-bold">Comments</p>
-							<div v-if="user != false" class="moment-comments">
-								<div class="form-group">
-									<textarea class="form-control" rows="3" placeholder="Add a comment ..." v-model="replyText"></textarea>
-									<p class="d-flex justify-content-between align-items-center mt-3">
-										<span class="small text-lighter font-weight-bold">
-											{{replyText.length}}/{{config.uploader.max_caption_length}}
-										</span>
-										<span v-if="replyText.length > 2">
-											<div class="custom-control custom-switch">
-												<input type="checkbox" class="custom-control-input" @click="!!replySensitive" v-model="replySensitive" id="sensitiveReply">
-												<label class="custom-control-label small font-weight-bold text-muted" style="padding-top: 3px" for="sensitiveReply">Add Content Warning</label>
-											</div>
-										</span>
-										<button class="btn btn-sm font-weight-bold btn-outline-primary py-1"
-										v-if="replyText.length > 2" @click="postReply">Post</button>
-									</p>
-								</div>
-							</div>
-							<div class="comment mt-4" style="max-height: 500px; overflow-y: auto;">
-								<div v-for="(reply, index) in results" :key="'tl' + reply.id + '_' + index" class="media mb-3 mt-2">
-									<a :href="reply.account.url" :title="reply.account.username"><img :src="reply.account.avatar" class="rounded-circle border mr-3" alt="avatar" width="32px" height="32px"></a>
-									<div class="media-body">
-										<div class="d-flex justify-content-between">
-											<span>
-												<a class="font-weight-bold text-dark" :href="reply.account.url">{{reply.account.username}}</a>
-											</span>
-											<span class="text-lighter">
-												<span v-if="reply.favourited" class="cursor-pointer mr-2" @click="likeReply(reply)">
-													<i class="fas fa-heart text-danger"></i>
-												</span>
-												<span v-else class="cursor-pointer mr-2" @click="likeReply(reply)">
-													<i class="far fa-heart"></i>
-												</span>
-												<span class="">
-													<post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block px-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
-												</span>
-											</span>
-										</div>
-										<div v-if="reply.sensitive == true">
-											<span class="py-3">
-												<span class="text-break">
-													<span class="font-italic text-muted">This comment may contain sensitive material</span>
-													<span class="badge badge-primary cursor-pointer ml-2 py-1" @click="reply.sensitive = false;">Show</span>
-												</span>
-											</span>
-										</div>
-										<div v-else class="read-more" style="overflow-y: hidden;">
-											<p v-html="reply.content" class="mb-0">loading ...</p>
-										</div>
-										<p>
-											<span class="small">
-												<a class="text-lighter text-decoration-none" :href="reply.url">{{timeAgo(reply.created_at)}}</a>
-											</span>
-										</p>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
 		<div v-if="layout == 'poll'" class="container px-0">
 			<div class="row justify-content-center">
 				<div class="col-12 col-md-6">
@@ -833,19 +661,6 @@
 	}
 
 </style>
-<style type="text/css" scoped>
-	.momentui .bg-dark {
-		background: #000 !important;
-	}
-	.momentui .carousel.slide,
-	.momentui .carousel-item {
-		background: #000 !important;
-	}
-	.reply-btn[disabled] {
-		opacity: .3;
-		color: #3897f0;
-	}
-</style>
 
 <script>
 import VueTribute from 'vue-tribute';
@@ -1042,11 +857,6 @@ export default {
 								}
 								this.loaded = true;
 
-								if(this.profileRecent !== false) {
-									setTimeout(function() {
-										self.fetchProfilePosts();
-									}, 3000);
-								}
 								setTimeout(function() {
 									self.fetchState();
 									document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {

resources/assets/js/components/Profile.vue

@@ -1,12 +1,5 @@
 <template>
 <div class="w-100 h-100">
-	<div v-if="owner && layout == 'moment'">
-		<div class="bg-primary shadow">
-			<p class="text-center text-white mb-0 py-3 font-weight-bold border-bottom border-info">
-				<i class="fas fa-exclamation-triangle fa-lg mr-2"></i> The Moment UI layout has been deprecated and will be removed in a future release.
-			</p>
-		</div>
-	</div>
 	<div v-if="isMobile" class="bg-white p-3 border-bottom">
 		<div class="d-flex justify-content-between align-items-center">
 			<div @click="goBack" class="cursor-pointer">
@@ -328,97 +321,6 @@
 				</div>
 			</div>
 		</div>
-
-		<div v-if="layout == 'moment'" class="mt-3">
-			<div :class="momentBackground()" style="width:100%;min-height:274px;">
-			</div>
-			<div class="bg-white border-bottom">
-				<div class="container">
-					<div class="row">
-						<div class="col-12 row mx-0">
-							<div class="col-4 text-left mt-2">
-								<span v-if="relationship && relationship.followed_by">
-									<span class="bg-light border border-secondary font-weight-bold small py-1 px-2 text-muted rounded">FOLLOWS YOU</span>
-								</span>
-								<span v-if="profile.is_admin">
-									<span class="bg-light border border-danger font-weight-bold small py-1 px-2 text-danger rounded">ADMIN</span>
-								</span>
-							</div>
-							<div class="col-4 text-center">
-								<div class="d-block d-md-none">
-									<img class="rounded-circle box-shadow" :src="profile.avatar" width="110px" height="110px" style="margin-top:-60px; border: 5px solid #fff">
-								</div>
-								<div class="d-none d-md-block">
-									<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
-								</div>
-							</div>
-							<div class="col-4 text-right mt-2">
-								<span class="d-none d-md-inline-block pl-4">
-									<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
-								</span>
-								<span class="pl-md-4 pl-sm-2" v-if="owner">
-									<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
-								</span>
-								<span class="pl-md-4 pl-sm-2" v-if="profile.id != user.id && user.hasOwnProperty('id')">
-									<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
-								</span>
-								<span v-if="profile.id != user.id && user.hasOwnProperty('id')">
-									<span class="pl-md-4 pl-sm-2" v-if="relationship.following == true">
-										<button type="button"  class="btn btn-outline-secondary font-weight-bold btn-sm" @click.prevent="followProfile()">Unfollow</button>
-									</span>
-									<span class="pl-md-4 pl-sm-2" v-else>
-										<button type="button" class="btn btn-primary font-weight-bold btn-sm" @click.prevent="followProfile()">Follow</button>
-									</span>
-								</span>
-							</div>
-						</div>
-
-						<div class="col-12 text-center">
-							<div class="profile-details my-3">
-								<p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
-								<div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
-								<div class="pb-3 text-muted text-center">
-									<a class="text-lighter" :href="profile.url">
-										<span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
-										Posts
-									</a>
-									<a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
-										<span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
-										Followers
-									</a>
-									<a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
-										<span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
-										Following
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="container-fluid">
-				<div class="profile-timeline mt-md-4">
-					<div class="" v-if="mode == 'grid'">
-						<masonry
-						  :cols="{default: 3, 700: 2, 400: 1}"
-						  :gutter="{default: '5px'}"
-						>
-							<div class="p-1" v-for="(s, index) in timeline">
-								<a :class="[s.sensitive ? 'card info-overlay card-md-border-0' : s.media_attachments[0].filter_class + ' card info-overlay card-md-border-0']" :href="statusUrl(s)">
-									<img :src="previewUrl(s)" class="img-fluid w-100">
-								</a>
-							</div>
-						</masonry>
-					</div>
-					<div v-if="timeline.length">
-						<infinite-loading @infinite="infiniteTimeline">
-							<div slot="no-more"></div>
-							<div slot="no-results"></div>
-						</infinite-loading>
-					</div>
-				</div>
-			</div>
-		</div>
 	</div>
 
 	<b-modal
@@ -750,15 +652,7 @@
 		beforeMount() {
 			this.fetchProfile();
 			let u = new URLSearchParams(window.location.search);
-			let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
-
-			if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
-				this.layout = 'moment';
-			}
-
-			if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
-				this.layout = 'metro';
-			}
+			this.layout = 'metro';
 
 			if(this.layout == 'metro' && u.has('t')) {
 				if(this.modes.indexOf(u.get('t')) != -1) {

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

@@ -14,11 +14,11 @@
 			>
 				<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
 
-					<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
+					<video v-if="media.type == 'video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
 						<source :src="media.url" :type="media.mime">
 					</video>
 
-					<div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
+					<div v-else-if="media.type == 'image'" slot="img" :title="media.description">
 						<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 					</div>
 
@@ -53,11 +53,11 @@
 		<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="(media, index) in status.media_attachments" :key="'px-carousel-'+media.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" style="background: #000; display: flex;align-items: center;">
 
-				<video v-if="media.type == 'Video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
+				<video v-if="media.type == 'video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
 					<source :src="media.url" :type="media.mime">
 				</video>
 
-				<div v-else-if="media.type == 'Image'" :title="media.description">
+				<div v-else-if="media.type == 'image'" :title="media.description">
 					<img :class="media.filter_class + ' img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy"  onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 				</div>