mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 12:31:27 +00:00
266 lines
7.8 KiB
Vue
266 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>
|