resources/assets/components/partials/direct/Message.vue
<template>
<div class="dm-chat-message chat-msg">
<div
class="media d-inline-flex mb-0"
:class="{ isAuthor: convo.isAuthor }"
>
<img v-if="!convo.isAuthor && !hideAvatars" class="mr-3 shadow msg-avatar" :src="thread.avatar" alt="avatar" width="50" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
<div class="media-body">
<p v-if="convo.type == 'photo'" class="pill-to p-0 shadow">
<img
:src="convo.media"
class="media-embed"
style="cursor: pointer;"
onerror="this.onerror=null;this.src='/storage/no-preview.png';"
@click.prevent="expandMedia">
</p>
<div v-else-if="convo.type == 'link'" class="d-inline-flex mb-0 cursor-pointer">
<div class="card shadow border" style="width:240px;border-radius: 18px;">
<div class="card-body p-0" :title="convo.text">
<div class="media align-items-center">
<div v-if="convo.meta.local" class="bg-primary mr-3 p-3" style="border-radius: 18px;">
<i class="fas fa-link text-white fa-2x"></i>
</div>
<div v-else class="bg-light mr-3 p-3" style="border-radius: 18px;">
<i class="fas fa-link text-lighter fa-2x"></i>
</div>
<div class="media-body text-muted small text-truncate pr-2 font-weight-bold">
{{convo.meta.local ? convo.text.substr(8) : convo.meta.domain}}
</div>
</div>
</div>
</div>
</div>
<p v-else-if="convo.type == 'video'" class="pill-to p-0 shadow mb-0" style="line-height: 0;">
<video :src="convo.media" class="media-embed" style="border-radius:20px;" controls>
</video>
<!-- <span class="d-block bg-primary d-flex align-items-center justify-content-center" style="width:200px;height: 110px;border-radius: 20px;">
<div class="text-center">
<p class="mb-1">
<i class="fas fa-play fa-2x text-white"></i>
</p>
<p class="mb-0 small font-weight-bold text-white">
Play
</p>
</div>
</span> -->
</p>
<p v-else-if="convo.type == 'emoji'" class="p-0 emoji-msg">
{{convo.text}}
</p>
<p v-else-if="convo.type == 'story:react'" class="pill-to p-0 shadow" style="width: 140px;margin-bottom: 10px;position:relative;">
<img :src="convo.meta.story_media_url" width="140" style="border-radius:20px;" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
<span class="badge badge-light rounded-pill border" style="font-size: 20px;position: absolute;bottom:-10px;left:-10px;">
{{convo.meta.reaction}}
</span>
</p>
<span v-else-if="convo.type == 'story:comment'" class="p-0" style="display: flex;justify-content: flex-start;margin-bottom: 10px;position:relative;">
<span class="">
<img class="d-block pill-to p-0 mr-0 pr-0 mb-n1" :src="convo.meta.story_media_url" width="140" style="border-radius:20px;" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
<span class="pill-to shadow text-break" style="width:fit-content;">{{convo.meta.caption}}</span>
</span>
</span>
<p v-else :class="[largerText ? 'pill-to shadow larger-text text-break':'pill-to shadow text-break']">
{{convo.text}}
</p>
<p v-if="convo.type == 'story:react'" class="small text-muted mb-0 ml-0">
<span class="font-weight-bold">{{ convo.meta.story_actor_username }}</span> reacted your story
</p>
<p v-if="convo.type == 'story:comment'" class="small text-muted mb-0 ml-0">
<span class="font-weight-bold">{{ convo.meta.story_actor_username }}</span> replied to your story
</p>
<p
class="msg-timestamp small text-muted font-weight-bold d-flex align-items-center justify-content-start"
data-timestamp="timestamp">
<span
v-if="convo.hidden"
class="small pr-2"
title="Filtered Message"
data-toggle="tooltip"
data-placement="bottom">
<i class="fas fa-lock"></i>
</span>
<span v-if="!hideTimestamps">
{{convo.timeAgo}}
</span>
<button
v-if="convo.isAuthor"
class="btn btn-link btn-sm text-lighter pl-2 font-weight-bold"
@click="confirmDelete">
<i class="far fa-trash-alt"></i>
</button>
</p>
</div>
<img v-if="convo.isAuthor && !hideAvatars" class="ml-3 shadow msg-avatar" :src="profile.avatar" alt="avatar" width="50" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
</div>
</div>
</template>
<script type="text/javascript">
import BigPicture from 'bigpicture';
export default {
props: {
thread: {
type: Object
},
convo: {
type: Object
},
hideAvatars: {
type: Boolean,
default: false
},
hideTimestamps: {
type: Boolean,
default: false
},
largerText: {
type: Boolean,
default: false
}
},
data() {
return {
profile: window._sharedData.user
}
},
methods: {
truncate(t) {
return _.truncate(t);
},
viewOriginal() {
let url = this.ctxContext.media;
window.location.href = url;
return;
},
isEmoji(text) {
const onlyEmojis = text.replace(new RegExp('[\u0000-\u1eeff]', 'g'), '')
const visibleChars = text.replace(new RegExp('[\n\r\s]+|( )+', 'g'), '')
return onlyEmojis.length === visibleChars.length
},
copyText() {
window.App.util.clipboard(this.ctxContext.text);
this.closeCtxMenu();
return;
},
clickLink() {
let url = this.ctxContext.text;
if(this.ctxContext.meta.local != true) {
url = '/i/redirect?url=' + encodeURI(this.ctxContext.text);
}
window.location.href = url;
},
formatCount(val) {
return window.App.util.format.count(val);
},
confirmDelete() {
this.$emit('confirm-delete');
},
expandMedia(e) {
BigPicture({
el: e.target
})
}
}
}
</script>
<style lang="scss" scoped>
.chat-msg {
padding-top: 0;
padding-bottom: 0;
}
.reply-btn {
position: absolute;
bottom: 54px;
right: 20px;
width: 90px;
text-align: center;
border-radius: 0 3px 3px 0;
}
.media-body .bg-primary {
background: linear-gradient(135deg, #2EA2F4 0%, #0B93F6 100%) !important;
}
.pill-to {
background: var(--bg-light);
font-weight: 500;
border-radius: 20px !important;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-right: 3rem;
margin-bottom: 0.25rem;
}
.pill-from {
color: white !important;
text-align: right !important;
background: linear-gradient(135deg, #2EA2F4 0%, #0B93F6 100%) !important;
font-weight: 500;
border-radius: 20px !important;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-left: 3rem;
margin-bottom: 0.25rem;
}
.chat-smsg:hover {
background: var(--light-hover-bg);
}
.no-focus {
border: none !important;
}
.no-focus:focus {
outline: none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.emoji-msg {
font-size: 4rem !important;
line-height: 30px !important;
margin-top: 10px !important;
}
.larger-text {
font-size: 22px;
}
.dm-chat-message {
.isAuthor {
float: right;
margin-right: 0.5rem !important;
.pill-to {
color: white !important;
text-align: right !important;
background: linear-gradient(135deg, #2EA2F4 0%, #0B93F6 100%) !important;
font-weight: 500;
border-radius: 20px !important;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-left: 3rem;
margin-right: 0;
margin-bottom: 0.25rem;
}
.msg-timestamp {
display: block !important;
text-align: right;
margin-bottom: 0;
}
}
.msg-avatar {
width: 50px;
height: 50px;
border-radius: 14px;
}
.media-embed {
width: 140px;
border-radius: 20px;
@media (min-width: 450px) {
width: 200px;
}
}
}
</style>