<template> <div class="timeline-status-component"> <div class="card bg-bluegray-800 landing-post-card" style="border-radius: 15px;"> <div class="card-header border-0 bg-bluegray-700" style="border-top-left-radius: 15px;border-top-right-radius: 15px;"> <div class="media align-items-center"> <a :href="post.account.url" class="mr-2" target="_blank"> <img :src="post.account.avatar" style="border-radius:30px;" width="30" height="30" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;"> </a> <div class="media-body d-flex justify-content-between align-items-center"> <p class="font-weight-bold username mb-0"> <a :href="post.account.url" class="text-white" target="_blank">@{{ post.account.username }}</a> </p> <p class="font-weight-bold mb-0"> <a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500" target="_blank">Posted {{ timeago(post.created_at) }} ago</a> <a v-else :href="post.url" class="text-bluegray-400" target="_blank">View Post</a> </p> </div> </div> </div> <div class="card-body m-0 p-0"> <post-content :status="post" /> </div> </div> </div> </template> <script type="text/javascript"> import PostContent from './../../partials/post/PostContent'; export default { props: [ 'post', 'range' ], components: { 'post-content': PostContent, }, methods: { timestampToAgo(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 + "y"; } interval = Math.floor(seconds / 604800); if (interval >= 1) { return interval + "w"; } interval = Math.floor(seconds / 86400); if (interval >= 1) { return interval + "d"; } interval = Math.floor(seconds / 3600); if (interval >= 1) { return interval + "h"; } interval = Math.floor(seconds / 60); if (interval >= 1) { return interval + "m"; } return Math.floor(seconds) + "s"; }, timeago(ts) { let short = this.timestampToAgo(ts); return short; if( short.endsWith('s') || short.endsWith('m') || short.endsWith('h') ) { return short; } const intl = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }); return intl.format(new Date(ts)); }, } } </script>