resources/assets/js/components/CollectionComponent.vue
<template>
<div class="w-100 h-100">
<div v-if="!loaded" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
<img src="/img/pixelfed-icon-grey.svg" class="">
</div>
<div class="row mt-3" v-if="loaded">
<div class="col-12 p-0 mb-3">
<div v-if="owner && !collection.published_at">
<div class="alert alert-danger d-flex justify-content-center">
<div class="media align-items-center">
<i class="far fa-exclamation-triangle fa-3x mr-3"></i>
<div class="media-body">
<p class="font-weight-bold mb-0">
This collection is unpublished.
</p>
<p class="small mb-0">
This collection is not visible to anyone else until you publish it. <br />
To publish, click on the <strong>Edit</strong> button and then click on the <strong>Publish</strong> button.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 p-0 mb-3">
<div class="d-flex align-items-center justify-content-center overflow-hidden">
<div class="dims"></div>
<div style="z-index:500;position: absolute;" class="text-white mx-5">
<p class="text-center pt-3 text-break" style="font-size: 3rem;line-height: 3rem;">{{title || 'Untitled Collection'}}</p>
<div class="text-center mb-3 text-break read-more" style="overflow-y: hidden">{{description}}</div>
<p class="text-center">
<span v-if="owner && collection.visibility != 'public'">
<span
v-if="collection.visibility == 'draft'"
class="btn btn-outline-light btn-sm text-capitalize py-0"
style="font-size: 10px"
>
<i class="far fa-lock"></i> Draft
</span>
<span
v-else-if="collection.visibility == 'private'"
class="btn btn-outline-light btn-sm text-capitalize py-0"
style="font-size: 10px"
>
Followers Only
</span>
<span>·</span>
</span>
<span>{{collection.post_count}} photos</span>
<span>·</span>
<span>by <a :href="'/' + profileUsername" class="font-weight-bold text-white">{{profileUsername}}</a></span>
</p>
<p v-if="owner == true" class="pt-3 text-center">
<span>
<button class="btn btn-outline-light btn-sm" @click.prevent="addToCollection" onclick="this.blur();">
<span v-if="loadingPostList == false">Add Photo</span>
<span v-else class="px-4">
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
</span>
</button>
<button class="btn btn-outline-light btn-sm" @click.prevent="editCollection" onclick="this.blur();">Edit</button>
<button class="btn btn-outline-light btn-sm" @click.prevent="deleteCollection">Delete</button>
</span>
</p>
</div>
<img
v-if="posts && posts.length"
:src="previewUrl(posts[0])"
alt=""
style="width:100%; height: 400px; object-fit: cover;"
>
<div v-else class="bg-info" style="width:100%; height: 400px;"></div>
</div>
</div>
<div class="col-12 p-0">
<!-- <masonry
:cols="{default: 2, 700: 2, 400: 1}"
:gutter="{default: '5px'}"
> -->
<div v-if="posts && posts.length > 0" class="row px-3 px-md-0">
<div v-for="(s, index) in posts" class="col-6 col-md-4 feed">
<!-- <a class="card info-overlay card-md-border-0 mb-4 square" :href="s.url">
<img :src="previewUrl(s)" class="square-content w-100" style="object-fit: cover;">
</a> -->
<a v-if="s.hasOwnProperty('pf_type') && s.pf_type == 'video'" class="card info-overlay card-md-border-0" :href="statusUrl(s)">
<div class="square">
<div class="square-content">
<div class="info-overlay-text-label rounded">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-video fa-2x p-2 d-flex-inline"></span>
</span>
</h5>
</div>
<blur-hash-canvas
width="32"
height="32"
class="rounded"
:hash="s.media_attachments[0].blurhash">
</blur-hash-canvas>
</div>
</div>
</a>
<a v-else-if="s.sensitive" class="card info-overlay card-md-border-0" :href="statusUrl(s)">
<div class="square">
<div class="square-content">
<div class="info-overlay-text-label rounded">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
</span>
</h5>
</div>
<blur-hash-canvas
width="32"
height="32"
class="rounded"
:hash="s.media_attachments[0].blurhash">
</blur-hash-canvas>
</div>
</div>
</a>
<a v-else class="card info-overlay card-md-border-0" :href="statusUrl(s)">
<div class="square">
<div class="square-content">
<!-- <img :src="previewUrl(s)" class="img-fluid w-100 rounded-lg" onerror="this.onerror=null;this.src='/storage/no-preview.png?v=0'">
<span class="badge badge-light" style="position: absolute;bottom:2px;right:2px;opacity: 0.4;">
{{ timeago(s.created_at) }}
</span> -->
<blur-hash-image
width="32"
height="32"
class="rounded"
:hash="s.media_attachments[0].blurhash"
:src="previewUrl(s)" />
</div>
</div>
</a>
</div>
<div v-if="canLoadMore" class="col-12">
<intersect @enter="enterIntersect">
<div class="card card-body shadow-none border">
<div class="d-flex justify-content-center align-items-center flex-column">
<b-spinner variant="muted" />
<p class="text-lighter small mt-2 mb-0">Loading more...</p>
</div>
</div>
</intersect>
</div>
</div>
<!-- </masonry> -->
</div>
</div>
<b-modal ref="editModal" id="edit-modal" hide-footer centered title="Edit Collection" body-class="">
<form>
<div class="form-group">
<label for="title" class="font-weight-bold text-muted">Title</label>
<input type="text" class="form-control" id="title" placeholder="Untitled Collection" v-model="title" maxlength="50">
<div class="text-right small text-muted">
<span>{{title ? title.length : 0}}/50</span>
</div>
</div>
<div class="form-group">
<label for="description" class="font-weight-bold text-muted">Description</label>
<textarea class="form-control" id="description" placeholder="Add a description here ..." v-model="description" rows="3" maxlength="500"></textarea>
<div class="text-right small text-muted">
<span>{{description ? description.length : 0}}/500</span>
</div>
</div>
<div class="form-group">
<label for="visibility" class="font-weight-bold text-muted">Visibility</label>
<select class="custom-select" v-model="visibility">
<option value="public">Public</option>
<option value="private">Followers Only</option>
<option value="draft">Draft</option>
</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>
<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
v-if="posts.length > 0"
type="button"
class="btn btn-outline-primary btn-sm py-1 font-weight-bold px-3"
@click.prevent="publishCollection">
Publish
</button>
<button
v-else
type="button"
class="btn btn-outline-primary btn-sm py-1 font-weight-bold px-3 disabled" disabled>
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>
<b-modal ref="addPhotoModal" id="add-photo-modal" hide-footer centered title="Add Photo" body-class="m-3">
<div class="form-group">
<label for="title" class="font-weight-bold text-muted">Add Recent Post</label>
<div class="row m-1" v-if="postsList.length > 0" style="max-height: 360px; overflow-y: auto;">
<div v-for="(p, index) in postsList" :key="'postList-'+index" class="col-4 p-1 cursor-pointer" @click="addRecentId(p)">
<div class="square border">
<div class="square-content" v-bind:style="'background-image: url(' + getPreviewUrl(p) + ');'"></div>
</div>
</div>
<div class="col-12">
<hr>
</div>
</div>
</div>
<form>
<div class="form-group">
<label for="title" class="font-weight-bold text-muted">Add Post by URL</label>
<input type="text" class="form-control" placeholder="https://pixelfed.dev/p/admin/1" v-model="photoId">
<p class="help-text small text-muted">Only local, public posts can be added</p>
</div>
<button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="pushId">
<span v-if="addingPostToCollection" class="px-4">
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
</span>
<span v-else>
Add Photo
</span>
</button>
</form>
</b-modal>
<b-modal ref="editPhotosModal" id="edit-photos-modal" hide-footer centered title="Edit Collection Photos" body-class="m-3">
<div class="form-group">
<p class="font-weight-bold text-dark text-center">Select a Photo to Delete</p>
<div class="row m-1 scrollbar-hidden" v-if="posts.length > 0" style="max-height: 350px;overflow-y: auto;">
<div v-for="(p, index) in posts" :key="'plm-'+index" class="col-4 p-1 cursor-pointer">
<div :class="[markedForDeletion.indexOf(p.id) == -1 ? 'square' : 'square delete-border']" @click="markPhotoForDeletion(p.id)">
<div class="square-content border" v-bind:style="'background-image: url(' + p.media_attachments[0].url + ');'"></div>
</div>
</div>
</div>
<div v-show="markedForDeletion.length > 0">
<button type="button" @click.prevent="confirmDeletion" class="btn btn-primary font-weight-bold py-0 btn-block mb-0 mt-4">Delete {{markedForDeletion.length}} {{markedForDeletion.length == 1 ? 'photo':'photos'}}</button>
</div>
</div>
</b-modal>
</div>
</template>
<style lang="scss" scoped>
.dims {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.68);
z-index: 300;
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.delete-border {
border: 4px solid #ff0000;
}
.delete-border .square-content {
background-color: red;
background-blend-mode: screen;
}
.info-overlay-text-field {
font-size: 13.5px;
margin-bottom: 2px;
@media (min-width: 768px) {
font-size: 20px;
margin-bottom: 15px;
}
}
.feed {
.card.info-overlay {
margin-bottom: 2rem;
}
}
</style>
<script type="text/javascript">
import VueMasonry from 'vue-masonry-css';
import Intersect from 'vue-intersect';
export default {
props: [
'collection-id',
'collection-title',
'collection-description',
'collection-visibility',
'profile-id',
'profile-username'
],
components: {
"intersect": Intersect,
},
data() {
return {
collection: {},
config: window.App.config,
loaded: false,
posts: [],
ids: [],
user: false,
owner: false,
title: this.collectionTitle,
description: this.collectionDescription,
visibility: this.collectionVisibility,
photoId: '',
postsList: [],
loadingPostList: false,
addingPostToCollection: false,
markedForDeletion: [],
canLoadMore: false,
isIntersecting: false,
page: 1
}
},
beforeMount() {
this.fetchCollection();
},
updated() {
this.initReadMore();
},
methods: {
enterIntersect() {
if(this.isIntersecting) {
return;
}
this.isIntersecting = true;
this.page++;
this.fetchItems();
},
statusUrl(s) {
return '/i/web/post/' + s.id;
},
fetchCollection() {
axios.get('/api/local/collection/' + this.collectionId)
.then(res => {
this.collection = res.data;
if(this.collection.post_count > 9) {
this.canLoadMore = true;
}
this.fetchCurrentUser();
})
},
fetchCurrentUser() {
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
this.user = res.data;
this.owner = this.user.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,
{
params: {
page: this.page
}
}
)
.then(res => {
if(res.data.length == 0) {
console.log('no items found');
this.loaded = true;
this.isIntersecting = false;
this.canLoadMore = false;
return;
}
let data = res.data.filter(p => {
return this.ids.indexOf(p.id) == -1;
});
this.posts.push(...data);
this.ids = this.posts.map(p => {
return p.id;
});
this.loaded = true;
this.isIntersecting = false;
if(data.length == 0) {
this.canLoadMore = false;
}
});
},
previewUrl(status) {
return status && status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].url;
},
previewBackground(status) {
let preview = this.previewUrl(status);
return 'background-image: url(' + preview + ');';
},
addToCollection() {
let self = this;
this.loadingPostList = true;
if(this.postsList.length == 0) {
axios.get('/api/v1/accounts/'+this.profileId+'/statuses', {
params: {
min_id: 1,
limit: 40
}
})
.then(res => {
self.postsList = res.data.filter(l => {
return (l.visibility == 'public' || l.visibility == 'unlisted') && l.sensitive == false && self.ids.indexOf(l.id) == -1;
});
self.loadingPostList = false;
self.$refs.addPhotoModal.show();
}).catch(err => {
self.loadingPostList = false;
swal('An Error Occured', 'We cannot process your request at this time, please try again later.', 'error');
})
} else {
this.$refs.addPhotoModal.show();
this.loadingPostList = false;
}
},
pushId() {
let max = this.config.uploader.max_collection_length;
let addingPostToCollection = true;
let self = this;
if(this.posts.length >= max) {
swal('Error', 'You can only add ' + max + ' posts per collection', 'error');
return;
}
let url = this.photoId;
let origin = window.location.origin;
let split = url.split('/');
if(url.slice(0, origin.length) !== origin) {
swal('Invalid URL', 'You can only add posts from this instance', 'error');
this.photoId = '';
}
if(!url.includes('/i/web/post/') && !url.includes('/p/')) {
swal('Invalid URL', 'Invalid URL', 'error');
this.photoId = '';
return;
}
let fragment = split[split.length - 1].split('?')[0];
axios.post('/api/local/collection/item', {
collection_id: this.collectionId,
post_id: fragment
}).then(res => {
self.ids.push(...fragment);
self.posts.push(res.data);
self.collection.post_count++;
self.id = '';
}).catch(err => {
swal('Invalid URL', 'The post you entered was invalid', 'error');
this.photoId = '';
});
self.$refs.addPhotoModal.hide();
// window.location.reload();
},
editCollection() {
this.$refs.editModal.show();
},
deleteCollection() {
if(this.owner == false) {
return;
}
let confirmed = window.confirm('Are you sure you want to delete this collection?');
if(confirmed) {
axios.delete('/api/local/collection/' + this.collectionId)
.then(res => {
window.location.href = '/';
});
} else {
return;
}
},
publishCollection() {
if (this.posts.length === 0) {
swal('Error', 'You cannot publish an empty collection');
return;
}
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 => {
console.log(res.data);
// window.location.href = res.data.url;
}).catch(err => {
swal('Something went wrong', 'There was a problem with your request, please try again later.', 'error')
});
} else {
return;
}
},
updateCollection() {
this.closeModals();
axios.post('/api/local/collection/' + this.collectionId, {
title: this.title,
description: this.description,
visibility: this.visibility
}).then(res => {
this.collection = res.data;
});
},
showEditPhotosModal() {
this.$refs.editModal.hide();
this.$refs.editPhotosModal.show();
},
markPhotoForDeletion(id) {
this.markedForDeletion.indexOf(id) == -1 ?
this.markedForDeletion.push(id) :
this.markedForDeletion = this.markedForDeletion.filter(d => {
return d != id;
});
},
confirmDeletion() {
let self = this;
let confirmed = window.confirm('Are you sure you want to delete this?');
if(confirmed) {
this.markedForDeletion.forEach(mfd => {
axios.delete('/api/local/collection/item', {
params: {
collection_id: self.collectionId,
post_id: mfd
}
})
.then(res => {
self.removeItem(mfd);
this.collection.post_count = this.collection.post_count - 1;
this.closeModals();
})
.catch(err => {
swal(
'Oops!',
'An error occured with your request, please try again later.',
'error'
);
})
});
this.markedForDeletion = [];
}
},
removeItem(id) {
this.posts = this.posts.filter(post => {
return post.id != id;
});
this.ids = this.ids.filter(post_id => {
return post_id != id;
});
},
addRecentId(post) {
let self = this;
axios.post('/api/local/collection/item', {
collection_id: self.collectionId,
post_id: post.id
}).then(res => {
// window.location.reload();
this.closeModals();
this.posts.push(res.data);
this.ids.push(post.id);
this.collection.post_count++;
}).catch(err => {
swal('Oops!', 'An error occured, please try selecting another post.', 'error');
this.photoId = '';
});
},
timeago(ts) {
return App.util.format.timeAgo(ts);
},
closeModals() {
this.$refs.editModal.hide();
this.$refs.addPhotoModal.hide();
this.$refs.editPhotosModal.hide();
},
getPreviewUrl(post) {
if(!post.media_attachments || !post.media_attachments.length) {
return '/storage/no-preview.png';
}
let media = post.media_attachments[0];
if(media.preview_url.endsWith('storage/no-preview.png')) {
return media.type === 'image' ?
media.url :
'/storage/no-preview.png';
}
return media.preview_url;
},
initReadMore() {
$('.read-more').each(function(k,v) {
let el = $(this);
let attr = el.attr('data-readmore');
if(typeof attr !== typeof undefined && attr !== false) {
return;
}
el.readmore({
collapsedHeight: 38,
heightMargin: 38,
moreLink: '<a href="#" class="d-block text-center small font-weight-bold mt-n3 mb-2" style="color: rgba(255, 255, 255, 0.5)">Show more</a>',
lessLink: '<a href="#" class="d-block text-center small font-weight-bold mt-n3 mb-2" style="color: rgba(255, 255, 255, 0.5)">Show less</a>',
});
});
}
}
}
</script>