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

<template>
	<div class="comment-drawer-component">
		<input type="file" ref="fileInput" class="d-none" accept="image/jpeg,image/png" @change="handleImageUpload">
		<div v-if="hide"></div>
		<div v-else-if="!isLoaded" class="border-top d-flex justify-content-center py-3">
			<div class="text-center">
				<div
					class="spinner-border text-lighter"
					role="status">
					<span class="sr-only">Loading...</span>
				</div>
				<p class="text-muted">Loading Comments ...</p>
			</div>
		</div>
		<div v-else class="border-top">
			<!-- <div v-if="profile && canReply" class="my-3">
				<div class="d-flex align-items-top reply-form">
					<img class="rounded-circle mr-2 border" :src="avatar" width="38" height="38">
					<div v-if="isUploading" class="w-100">
						<p class="font-weight-light mb-1">Uploading image ...</p>
						<div class="progress rounded-pill" style="height:4px">
							<div class="progress-bar" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
						</div>
					</div>
					<div v-else class="reply-form-input">
						<input
							class="form-control bg-light border-lighter rounded-pill"
							placeholder="Write a comment...."
							v-model="replyContent"
							v-on:keyup.enter="storeComment">

						<div class="reply-form-input-actions">
							<button
								class="btn btn-link text-muted px-1 mr-2"
								@click="uploadImage">
								<i class="far fa-image fa-lg"></i>
							</button>
							<button class="btn btn-link text-muted px-1 small font-weight-bold border py-0 rounded-pill text-decoration-none">
								GIF
							</button>
						</div>
					</div>
				</div>
			</div> -->
			<div class="my-3">
				<div
					v-for="(status, index) in feed"
					:key="'cdf' + index + status.id"
					class="media media-status align-items-top">

					<a
						v-if="replyChildId == status.id"
						href="#comment-1"
						class="comment-border-link"
						@click.prevent="replyToChild(status)">
						<span class="sr-only">Jump to comment-{{ index }}</span>
					</a>

					<a :href="status.account.url">
						<img class="rounded-circle media-avatar border" :src="status.account.avatar" width="32" height="32" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" />
					</a>

					<div class="media-body">
						<div v-if="!status.media_attachments.length" class="media-body-comment">
							<p class="media-body-comment-username">
								<a :href="status.account.url">
									{{status.account.acct}}
								</a>
							</p>
							<read-more :status="status" />
						</div>
						<div v-else>
							<p class="media-body-comment-username">
								<a :href="status.account.url">
									{{status.account.acct}}
								</a>
							</p>
							<div class="bh-comment" @click="lightbox(status)">
								<blur-hash-image
									:width="blurhashWidth(status)"
									:height="blurhashHeight(status)"
									:punch="1"
									class="img-fluid rounded-lg border shadow"
									:hash="status.media_attachments[0].blurhash"
									:src="getMediaSource(status)" />
							</div>
						</div>
						<p class="media-body-reactions">
							<a
								v-if="profile"
								href="#"
								class="font-weight-bold"
								:class="[ status.favourited ? 'text-primary' : 'text-muted' ]"
								@click.prevent="likeComment(status, index, $event)">
									{{ status.favourited ? 'Liked' : 'Like' }}
								</a>
							<span class="mx-1">·</span>
							<a href="#" class="text-muted font-weight-bold" @click.prevent="replyToChild(status, index)">Reply</a>
							<span v-if="profile" class="mx-1">·</span>
							<a
								class="font-weight-bold text-muted"
								:href="status.url"
								v-once>
								{{ shortTimestamp(status.created_at) }}
							</a>
							<span v-if="profile && status.account.id === profile.id">
								<span class="mx-1">·</span>
								<a
									class="font-weight-bold text-lighter"
									href="#"
									@click.prevent="deleteComment(index)">
										Delete
									</a>
							</span>
						</p>

						<!-- <div v-if="replyChildId == status.id && status.reply_count" class="media media-status align-items-top mt-3">
							<div class="comment-border-arrow"></div>
							<a href="https://pixelfed.test/groups/328821658771132416/user/321493203255693312"><img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="32" height="32" class="rounded-circle media-avatar border"></a>
							<div class="media-body"><div class="media-body-comment"><p class="media-body-comment-username"><a href="https://pixelfed.test/groups/328821658771132416/user/321493203255693312">
								dansup
							</a></p> <div class="read-more-component" style="word-break: break-all;"><div>test</div></div></div> <p class="media-body-reactions"><a href="#" class="font-weight-bold text-muted">
								Like
							</a> <span class="mx-1">·</span> <a href="https://pixelfed.test/groups/328821658771132416/p/358529382599041029" class="font-weight-bold text-muted">
							1h
						</a> <span><span class="mx-1">·</span> <a href="#" class="font-weight-bold text-lighter">
									Delete
								</a></span></p>
							</div>
						</div> -->

						<div v-if="replyChildIndex == index && status.hasOwnProperty('children') && status.children.hasOwnProperty('feed') && status.children.feed.length">
							<comment-post
								v-for="(s, index) in status.children.feed"
								:status="s"
								:profile="profile"
								:commentBorderArrow="true"
								:key="'scp_'+index+'_'+s.id"
								/>
						</div>

						<a
							v-if="replyChildIndex == index &&
								status.hasOwnProperty('children') &&
								status.children.hasOwnProperty('can_load_more') &&
								status.children.can_load_more == true"
							class="text-muted font-weight-bold mt-1 mb-0"
							style="font-size: 13px;"
							href="#"
							:disabled="loadingChildComments"
							@click.prevent="loadMoreChildComments(status, index)">
							<div class="comment-border-arrow"></div>
							<i class="far fa-long-arrow-right mr-1"></i>
							{{ loadingChildComments ? 'Loading' : 'Load' }} more comments
						</a>

						<a
							v-else-if="replyChildIndex !== index &&
								status.hasOwnProperty('children') &&
								status.children.hasOwnProperty('can_load_more') &&
								status.children.can_load_more == true &&
								status.reply_count > 0 &&
								!loadingChildComments"
							class="text-muted font-weight-bold mt-1 mb-0"
							style="font-size: 13px;"
							href="#"
							:disabled="loadingChildComments"
							@click.prevent="replyToChild(status, index)">
							<i class="far fa-long-arrow-right mr-1"></i>
							{{ loadingChildComments ? 'Loading' : 'Load' }} more comments
						</a>

						<div v-if="replyChildId == status.id" class="mt-3 mb-3 d-flex align-items-top reply-form child-reply-form">
							<div class="comment-border-arrow"></div>
							<img class="rounded-circle mr-2 border" :src="avatar" width="38" height="38" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
							<div v-if="isUploading" class="w-100">
								<p class="font-weight-light mb-1">Uploading image ...</p>
								<div class="progress rounded-pill" style="height:10px">
									<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
								</div>
							</div>
							<div v-else class="reply-form-input">
								<input
									class="form-control bg-light border-lighter rounded-pill"
									placeholder="Write a comment...."
									v-model="childReplyContent"
									:disabled="postingChildComment"
									v-on:keyup.enter="storeChildComment(index)">

								<!-- <div class="reply-form-input-actions">
									<button
										class="btn btn-link text-muted px-1 mr-2"
										@click="uploadImage">
										<i class="far fa-image fa-lg"></i>
									</button>
									<button class="btn btn-link text-muted px-1 small font-weight-bold border py-0 rounded-pill text-decoration-none">
										GIF
									</button>
								</div> -->
							</div>
						</div>
					</div>

				</div>
				<!-- <a v-if="permalinkMode && canLoadMore" class="text-muted mb-n1" style="font-size: 13px;font-weight: 600;" href="#">Load more comments ...</a> -->
			</div>
			<button
				v-if="canLoadMore"
				class="btn btn-link btn-sm text-muted mb-2"
				@click="loadMoreComments"
				:disabled="isLoadingMore">

				<span v-if="!isLoadingMore">
					Load more comments ...
				</span>
				<div
					v-else
					class="spinner-border spinner-border-sm text-muted"
					role="status">
					<span class="sr-only">Loading...</span>
				</div>
			</button>

			<div v-if="profile && canReply" class="mt-3 mb-n3">
				<div class="d-flex align-items-top reply-form cdrawer-reply-form">
					<img class="rounded-circle mr-2 border" :src="avatar" width="38" height="38" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
					<div v-if="isUploading" class="w-100">
						<p class="font-weight-light small text-muted mb-1">Uploading image ...</p>
						<div class="progress rounded-pill" style="height:10px">
							<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
						</div>
					</div>
					<div v-else class="w-100">
                        <div class="reply-form-input">
                            <textarea
                                class="form-control bg-light border-lighter"
                                placeholder="Write a comment...."
                                :rows="replyContent && replyContent.length > 40 ? 4 : 1"
                                v-model="replyContent"></textarea>

    						<div class="reply-form-input-actions">
    							<button
    								class="btn btn-link text-muted px-1 mr-2"
    								@click="uploadImage">
    								<i class="far fa-image fa-lg"></i>
    							</button>
    							<!-- <button class="btn btn-link text-muted px-1 small font-weight-bold border py-0 rounded-pill text-decoration-none">
    								GIF
    							</button> -->
    						</div>
                        </div>
                        <div class="d-flex justify-content-between reply-form-menu">
                            <div class="char-counter">
                                <span>{{ replyContent?.length ?? 0 }}</span>
                                <span>/</span>
                                <span>500</span>
                            </div>

                        </div>
					</div>
                    <button
                        class="btn btn-link btn-sm font-weight-bold align-self-center ml-3 mb-3"
                        @click="storeComment">Post</button>
				</div>
			</div>
		</div>

		<b-modal ref="lightboxModal"
			id="lightbox"
			:hide-header="true"
			:hide-footer="true"
			centered
			size="lg"
			body-class="p-0"
			content-class="bg-transparent border-0"
			>
			<div v-if="lightboxStatus" @click="hideLightbox">
				<img :src="lightboxStatus.url" style="width: 100%;max-height: 90vh;object-fit: contain;">
			</div>
		</b-modal>
	</div>
</template>

<script type="text/javascript">
	import ReadMore from './ReadMore.vue';
	import CommentPost from './CommentPost.vue';

	export default {
		props: {
			groupId: {
				type: String
			},

			profile: {
				type: Object
			},

			status: {
				type: Object
			},

			show: {
				type: Boolean,
				default: false
			},

			permalinkMode: {
				type: Boolean,
				default: false
			},

			permalinkStatus: {
				type: Object
			},

			canReply: {
				type: Boolean,
				default: true
			}
		},

		components: {
			"read-more": ReadMore,
			"comment-post": CommentPost
		},

		data() {
			return {
				isLoaded: false,
				hide: false,
				feed: [],
				canLoadMore: false,
				isLoadingMore: false,
				replyContent: null,
				maxReplyId: null,
				readMoreCursor: 200,
				avatar: '/storage/avatars/default.png',
				isUploading: false,
				uploadProgress: 0,
				lightboxStatus: null,
				replyChildId: undefined,
				replyChildIndex: undefined,
				childReplyContent: null,
				postingChildComment: false,
				loadingChildComments: false,
				replyChildMinId: undefined
			}
		},

		mounted() {
			if(this.permalinkMode && this.permalinkStatus) {
				let status = this.permalinkStatus;
				if(status.reply_count) {
					status.children = {
						feed: [],
						can_load_more: true
					}
				}
				this.feed.push(status);
				this.isLoaded = true;
				this.canLoadMore = false;
			} else {
				this.fetchComments();
			}

			if(this.profile && this.profile.hasOwnProperty('avatar')) {
				this.avatar = this.profile.avatar;
			}
		},

		methods: {
			fetchComments() {
				axios.get('/api/v0/groups/comments', {
					params: {
						gid: this.groupId,
						sid: this.status.id,
						limit: 3
					}
				}).then(res => {
					let data = res.data.map(function(c) {
						if(c.reply_count && c.reply_count > 0) {
							c.children = {
								feed: [],
								can_load_more: true
							}
						}
						return c;
					})
					this.feed = data;
					this.isLoaded = true;
					this.maxReplyId = res.data[(res.data.length - 1)].id;
					if(this.feed.length == 3) {
						this.canLoadMore = true;
					} else {
					}
				}).catch(err => {
					this.isLoaded = true;
				})
			},

			loadMoreComments() {
				this.isLoadingMore = true;

				axios.get('/api/v0/groups/comments', {
					params: {
						gid: this.groupId,
						sid: this.status.id,
						limit: 3,
						max_id: this.maxReplyId
					}
				}).then(res => {
					if(res.data[res.data.length - 1].id == this.maxReplyId) {
						this.isLoadingMore = false;
						this.canLoadMore = false;
						return;
					}
					this.feed.push(...res.data);
                    setTimeout(() => {
					   this.isLoadingMore = false;
                    }, 500);
					this.maxReplyId = res.data[res.data.length - 1].id;
					if(res.data.length > 0) {
						this.canLoadMore = true;
					} else {
						this.canLoadMore = false;
					}
				}).catch(err => {
					this.isLoadingMore = false;
					this.canLoadMore = false;
				})
			},

			storeComment($event) {
                $event.currentTarget?.blur();
				axios.post('/api/v0/groups/comment', {
					gid: this.groupId,
					sid: this.status.id,
					content: this.replyContent
				})
				.then(res => {
					this.replyContent = null;
					this.feed.unshift(res.data);
				}).catch(err => {
					if(err.response.status == 422) {
						this.isUploading = false;
						this.uploadProgress = 0;
						swal('Oops!', err.response.data.error, 'error');
					} else {
						this.isUploading = false;
						this.uploadProgress = 0;
						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
					}
				})
			},

			shortTimestamp(ts) {
				return window.App.util.format.timeAgo(ts);
			},

			readMore() {
				this.readMoreCursor = this.readMoreCursor + 200;
			},

			likeComment(status, index, $event) {
				$event.target.blur();
				let l = status.favourited ? false : true;
				this.feed[index].favourited = l;
				status.favourited = l;
				axios.post(`/api/v0/groups/comment/${l ? 'like' : 'unlike'}`, {
					sid: status.id,
					gid: this.groupId
				});
			},

			deleteComment(index) {
				if(window.confirm('Are you sure you want to delete this post?') == false) {
					return;
				}

				axios.post('/api/v0/groups/comment/delete', {
					gid: this.groupId,
					id: this.feed[index].id
				}).then(res => {
					this.feed.splice(index, 1);
				}).catch(err => {
					console.log(err.response);
					swal('Error', 'Something went wrong. Please try again later.', 'error');
				});
			},

			uploadImage() {
				this.$refs.fileInput.click();
			},

			handleImageUpload() {
				if(!this.$refs.fileInput.files.length) {
					return;
				}
				this.isUploading = true;
				let self = this;
				let data = new FormData();
				data.append('gid', this.groupId);
				data.append('sid', this.status.id);
				data.append('photo', this.$refs.fileInput.files[0]);

				axios.post('/api/v0/groups/comment/photo', data, {
					onUploadProgress: function(progressEvent) {
						self.uploadProgress = Math.floor(progressEvent.loaded / progressEvent.total * 100);
					}
				})
				.then(res => {
					this.isUploading = false;
					this.uploadProgress = 0;
					this.feed.unshift(res.data);
				}).catch(err => {
					if(err.response.status == 422) {
						this.isUploading = false;
						this.uploadProgress = 0;
						swal('Oops!', err.response.data.error, 'error');
					} else {
						this.isUploading = false;
						this.uploadProgress = 0;
						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
					}
				});
			},

			lightbox(status) {
				this.lightboxStatus = status.media_attachments[0];
				this.$refs.lightboxModal.show();
			},

			hideLightbox() {
				this.lightboxStatus = null;
				this.$refs.lightboxModal.hide();
			},

			blurhashWidth(status) {
				if(!status.media_attachments[0].meta) {
					return 25;
				}
				let aspect = status.media_attachments[0].meta.original.aspect;
				if(aspect == 1) {
					return 25;
				} else if(aspect > 1) {
					return 30;
				} else {
					return 20;
				}
			},

			blurhashHeight(status) {
				if(!status.media_attachments[0].meta) {
					return 25;
				}
				let aspect = status.media_attachments[0].meta.original.aspect;
				if(aspect == 1) {
					return 25;
				} else if(aspect > 1) {
					return 20;
				} else {
					return 30;
				}
			},

			getMediaSource(status) {
				let media = status.media_attachments[0];

				if(media.preview_url.endsWith('storage/no-preview.png')) {
					return media.url;
				}

				return media.preview_url;
			},

			replyToChild(status, index) {

				if(this.replyChildId == status.id) {
					this.replyChildId = null;
					this.replyChildIndex = null;
					return;
				} else {
					this.childReplyContent = null;
				}

				this.replyChildId = status.id;
				this.replyChildIndex = index;

				if(!status.hasOwnProperty('replies_loaded') || !status.replies_loaded) {
					this.$nextTick(() => {
						this.fetchChildReplies(status, index);
					});
				} else {

				}
			},

			fetchChildReplies(status, index) {
				axios.get('/api/v0/groups/comments', {
					params: {
						gid: this.groupId,
						sid: status.id,
						cid: 1,
						limit: 3
					}
				}).then(res => {
					if(this.feed[index].hasOwnProperty('children')) {
						this.feed[index].children.feed.push(res.data);
						this.feed[index].children.can_load_more = res.data.length == 3;
					} else {
						this.feed[index].children = {
							feed: res.data,
							can_load_more: res.data.length == 3
						}
					}
					this.replyChildMinId = res.data[res.data.length - 1].id;
					this.$nextTick(() => {
						this.feed[index].replies_loaded = true;
					});
				}).catch(err => {
					this.feed[index].children.can_load_more = false;
				})
			},

			storeChildComment(index) {
				this.postingChildComment = true;

				axios.post('/api/v0/groups/comment', {
					gid: this.groupId,
					sid: this.status.id,
					cid: this.replyChildId,
					content: this.childReplyContent
				})
				.then(res => {
					this.childReplyContent = null;
					this.postingChildComment = false;
					this.feed[index].children.feed.push(res.data);
					// this.feed.unshift(res.data);
				}).catch(err => {
					if(err.response.status == 422) {
						// this.isUploading = false;
						// this.uploadProgress = 0;
						swal('Oops!', err.response.data.error, 'error');
					} else {
						// this.isUploading = false;
						// this.uploadProgress = 0;
						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
					}
				});
			},

			loadMoreChildComments(status, index) {
				this.loadingChildComments = true;

				axios.get('/api/v0/groups/comments', {
					params: {
						gid: this.groupId,
						sid: status.id,
						max_id: this.replyChildMinId,
						cid: 1,
						limit: 3
					}
				}).then(res => {
					if(this.feed[index].hasOwnProperty('children')) {
						this.feed[index].children.feed.push(...res.data);
						this.feed[index].children.can_load_more = res.data.length == 3;
					} else {
						this.feed[index].children = {
							feed: res.data,
							can_load_more: res.data.length == 3
						}
					}
					this.replyChildMinId = res.data[res.data.length - 1].id;
					this.feed[index].replies_loaded = true;
					this.loadingChildComments = false;
				}).catch(err => {
				})
			}
		}
	}
</script>

<style lang="scss">
	.comment-drawer-component {
		.media {
			position: relative;

			.comment-border-link {
				display: block;
				position: absolute;
				top: 40px;
				left: 11px;
				width: 10px;
				height: calc(100% - 100px);
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				background-color: #E5E7EB;
				background-clip: padding-box;

				&:hover {
					background-color: #BFDBFE;
				}
			}

			.child-reply-form {
				position: relative;
			}

			.comment-border-arrow {
				display: block;
				position: absolute;
				top: -6px;
				left: -33px;
				width: 10px;
				height: 29px;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				background-color: #E5E7EB;
				background-clip: padding-box;
				border-bottom: 2px solid transparent;

				&:after {
					content: '';
					display: block;
					position: absolute;
					top: 25px;
					left: 2px;
					width: 15px;
					height: 2px;
					background-color: #E5E7EB;
				}
			}

			&-status {
				margin-bottom: 1.3rem;
			}

			&-avatar {
				margin-right: 12px;
			}

			&-body {
				&-comment {
					width: fit-content;
					padding: 0.4rem 0.7rem;
					background-color: var(--comment-bg);
					border-radius: 0.9rem;

					&-username {
						margin-bottom: 0.25rem !important;
						font-size: 14px;
						font-weight: 700 !important;
						color: #000;

						a {
							color: #000;
							text-decoration: none;
						}
					}

					&-content {
						margin-bottom: 0;
						font-size: 16px;
					}
				}

				&-reactions {
					margin-top: 0.25rem !important;
					margin-bottom: 0 !important;
					color: #B8C2CC !important;
					font-size: 12px;
				}
			}
		}

		.load-more-comments {
			font-weight: 500;
		}

		.reply-form {
			margin-bottom: 2rem;

			&-input {
				flex: 1;
				position: relative;

                textarea {
                    border-radius: 10px;
                }

                .form-control {
                    resize: none;
                    padding-right: 100px;
                }

				&-actions {
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
				}
			}

            .btn {
                text-decoration: none;
            }

            &-menu {
                margin-top: 5px;

                .char-counter {
                    color: var(--muted);
                    font-size: 10px;
                }
            }

		}

		.bh-comment {
			width: 100%;
			height: auto;
			max-width: 160px !important;
			max-height: 260px !important;

			span {
				width: 100%;
				height: auto;
				max-width: 160px !important;
				max-height: 260px !important;
			}

			img {
				width: 100%;
				height: auto;
				max-width: 160px !important;
				max-height: 260px !important;
				object-fit: cover;
			}
		}
	}
</style>