pixelfed/resources/assets/components/partials/post/EditHistoryModal.vue
2023-06-11 15:16:20 -06:00

267 lines
7.8 KiB
Vue

<template>
<div>
<b-modal
v-model="isOpen"
centered
size="md"
:scrollable="true"
hide-footer
header-class="py-2"
body-class="p-0"
title-class="w-100 text-center pl-4 font-weight-bold"
title-tag="p">
<template #modal-header="{ close }">
<template v-if="historyIndex === undefined">
<div class="d-flex flex-grow-1 justify-content-between align-items-center">
<span style="width:40px;"></span>
<h5 class="font-weight-bold mb-0">Post History</h5>
<b-button size="sm" variant="link" @click="close()">
<i class="far fa-times text-dark fa-lg"></i>
</b-button>
</div>
</template>
<template v-else>
<div class="d-flex flex-grow-1 justify-content-between align-items-center pt-1">
<b-button size="sm" variant="link" @click.prevent="historyIndex = undefined">
<i class="fas fa-chevron-left text-primary fa-lg"></i>
</b-button>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center" style="gap: 5px;">
<div class="d-flex align-items-center" style="gap: 5px;">
<img
:src="allHistory[0].account.avatar"
width="16"
height="16"
class="rounded-circle"
onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;">
<span class="font-weight-bold">{{ allHistory[0].account.username }}</span>
</div>
<div>{{ historyIndex == (allHistory.length - 1) ? 'created' : 'edited' }} {{ formatTime(allHistory[historyIndex].created_at) }}</div>
</div>
</div>
<b-button size="sm" variant="link" @click="close()">
<i class="fas fa-times text-dark fa-lg"></i>
</b-button>
</div>
</template>
</template>
<div v-if="isLoading" class="d-flex align-items-center justify-content-center" style="min-height: 500px;">
<b-spinner />
</div>
<template v-else>
<div v-if="historyIndex === undefined" class="list-group border-top-0">
<div
v-for="(history, idx) in allHistory"
class="list-group-item d-flex align-items-center justify-content-between" style="gap: 5px;">
<div class="d-flex align-items-center" style="gap: 5px;">
<div class="d-flex align-items-center" style="gap: 5px;">
<img
:src="history.account.avatar"
width="24"
height="24"
class="rounded-circle"
onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;">
<span class="font-weight-bold">{{ history.account.username }}</span>
</div>
<div>{{ idx == (allHistory.length - 1) ? 'created' : 'edited' }} {{ formatTime(history.created_at) }}</div>
</div>
<a class="stretched-link text-decoration-none" href="#" @click.prevent="historyIndex = idx">
<div class="d-flex align-items-center" style="gap:5px;">
<i class="far fa-chevron-right text-primary fa-lg"></i>
</div>
</a>
</div>
</div>
<div v-else class="d-flex align-items-center flex-column border-top-0 justify-content-center">
<!-- <img :src="allHistory[historyIndex].media_attachments[0].url" style="max-height: 400px;object-fit: contain;"> -->
<template v-if="postType() === 'text'">
</template>
<template v-else-if="postType() === 'image'">
<div style="width: 100%">
<blur-hash-image
:width="32"
:height="32"
:punch="1"
class="img-contain border-bottom"
:hash="allHistory[historyIndex].media_attachments[0].blurhash"
:src="allHistory[historyIndex].media_attachments[0].url"
/>
</div>
</template>
<template v-else-if="postType() === 'album'">
<div style="width: 100%">
<b-carousel
controls
indicators
background="#000000"
style="text-shadow: 1px 1px 2px #333;"
>
<b-carousel-slide
v-for="(media, idx) in allHistory[historyIndex].media_attachments"
:key="'pfph:'+media.id+':'+idx"
:img-src="media.url"
></b-carousel-slide>
</b-carousel>
</div>
</template>
<template v-else-if="postType() === 'video'">
<div style="width: 100%">
<div class="embed-responsive embed-responsive-16by9 border-bottom">
<video class="video" controls playsinline preload="metadata" loop>
<source :src="allHistory[historyIndex].media_attachments[0].url" :type="allHistory[historyIndex].media_attachments[0].mime">
</video>
</div>
</div>
</template>
<div class="w-100 my-4 px-4 text-break justify-content-start">
<p class="mb-0" v-html="allHistory[historyIndex].content"></p>
<!-- <p class="mb-0" v-html="getDiff(historyIndex)"></p> -->
</div>
</div>
</template>
</b-modal>
</div>
</template>
<script type="text/javascript">
export default {
props: {
status: {
type: Object
}
},
data() {
return {
isOpen: false,
isLoading: true,
allHistory: [],
historyIndex: undefined,
user: window._sharedData.user
}
},
methods: {
open() {
this.isOpen = true;
this.isLoading = true;
this.historyIndex = undefined;
this.allHistory = [];
setTimeout(() => {
this.fetchHistory();
}, 300);
},
fetchHistory() {
axios.get(`/api/v1/statuses/${this.status.id}/history`)
.then(res => {
this.allHistory = res.data;
})
.finally(() => {
this.isLoading = false;
})
},
getDiff(idx) {
if(idx == this.allHistory.length - 1) {
return this.allHistory[this.allHistory.length - 1].content;
}
// let r = Diff.diffChars(this.allHistory[idx - 1].content.replace(/(<([^>]+)>)/gi, ""), this.allHistory[idx].content.replace(/(<([^>]+)>)/gi, ""));
let fragment = document.createElement('div');
r.forEach((part) => {
// green for additions, red for deletions
// grey for common parts
const color = part.added ? 'green' :
part.removed ? 'red' : 'grey';
let span = document.createElement('span');
span.style.color = color;
console.log(part.value, part.value.length)
if(part.added) {
let trimmed = part.value.trim();
if(!trimmed.length) {
span.appendChild(document.createTextNode('·'));
} else {
span.appendChild(document.createTextNode(part.value));
}
} else {
span.appendChild(document.createTextNode(part.value));
}
fragment.appendChild(span);
});
return fragment.innerHTML;
},
formatTime(ts) {
let date = Date.parse(ts);
let seconds = Math.floor((new Date() - date) / 1000);
let interval = Math.floor(seconds / 63072000);
if (interval < 0) {
return "0s";
}
if (interval >= 1) {
return interval + (interval == 1 ? ' year' : ' years') + " ago";
}
interval = Math.floor(seconds / 604800);
if (interval >= 1) {
return interval + (interval == 1 ? ' week' : ' weeks') + " ago";
}
interval = Math.floor(seconds / 86400);
if (interval >= 1) {
return interval + (interval == 1 ? ' day' : ' days') + " ago";
}
interval = Math.floor(seconds / 3600);
if (interval >= 1) {
return interval + (interval == 1 ? ' hour' : ' hours') + " ago";
}
interval = Math.floor(seconds / 60);
if (interval >= 1) {
return interval + (interval == 1 ? ' minute' : ' minutes') + " ago";
}
return Math.floor(seconds) + " seconds ago";
},
postType() {
if(this.historyIndex === undefined) {
return;
}
let post = this.allHistory[this.historyIndex];
if(!post) {
return 'text';
}
let media = post.media_attachments;
if(!media || !media.length) {
return 'text';
}
if(media.length == 1) {
return media[0].type;
}
return 'album';
}
}
}
</script>
<style lang="scss">
.img-contain {
img {
object-fit: contain;
}
}
</style>