mirror of https://github.com/pixelfed/pixelfed
Add Direct Messages
Daniel Supernault
4 years ago
parent
4d04e4fd25
commit
d63569c120
@ -0,0 +1,41 @@
|
||||
<?php
|
||||
|
||||
namespace App\Util\ActivityPub\Validator;
|
||||
|
||||
use Validator;
|
||||
use Illuminate\Validation\Rule;
|
||||
|
||||
class Add {
|
||||
|
||||
public static function validate($payload)
|
||||
{
|
||||
$valid = Validator::make($payload, [
|
||||
'@context' => 'required',
|
||||
'id' => 'required|string',
|
||||
'type' => [
|
||||
'required',
|
||||
Rule::in(['Add'])
|
||||
],
|
||||
'actor' => 'required|url',
|
||||
'object' => 'required',
|
||||
'object.id' => 'required|url',
|
||||
'object.type' => [
|
||||
'required',
|
||||
Rule::in(['Story'])
|
||||
],
|
||||
'object.attributedTo' => 'required|url|same:actor',
|
||||
'object.attachment' => 'required',
|
||||
'object.attachment.type' => [
|
||||
'required',
|
||||
Rule::in(['Image'])
|
||||
],
|
||||
'object.attachment.url' => 'required|url',
|
||||
'object.attachment.mediaType' => [
|
||||
'required',
|
||||
Rule::in(['image/jpeg', 'image/png'])
|
||||
]
|
||||
])->passes();
|
||||
|
||||
return $valid;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loaded && page == 'browse'" class="container messages-page p-0 p-md-2 mt-n4" style="min-height: 50vh;">
|
||||
<div class="col-12 col-md-8 offset-md-2 p-0 px-md-2">
|
||||
<div class="card shadow-none border mt-4">
|
||||
<div class="card-header bg-white py-4">
|
||||
<span class="h4 font-weight-bold mb-0">Direct Messages</span>
|
||||
<span class="float-right">
|
||||
<a class="btn btn-outline-primary font-weight-bold py-0" href="#" @click.prevent="goto('add')">New Message</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-header bg-white">
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<a :class="[tab == 'inbox' ? 'nav-link px-4 font-weight-bold rounded-pill active' : 'nav-link px-4 font-weight-bold rounded-pill']" @click.prevent="switchTab('inbox')" href="#">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a :class="[tab == 'sent' ? 'nav-link px-4 font-weight-bold rounded-pill active' : 'nav-link px-4 font-weight-bold rounded-pill']" @click.prevent="switchTab('sent')" href="#">Sent</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a :class="[tab == 'filtered' ? 'nav-link px-4 font-weight-bold rounded-pill active' : 'nav-link px-4 font-weight-bold rounded-pill']" @click.prevent="switchTab('filtered')" href="#">Filtered</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul v-if="tab == 'inbox'" class="list-group list-group-flush">
|
||||
<div v-if="!messages.inbox.length" class="list-group-item d-flex justify-content-center align-items-center" style="min-height: 40vh;">
|
||||
<p class="lead mb-0">No messages found :(</p>
|
||||
</div>
|
||||
<div v-else v-for="(thread, index) in messages.inbox">
|
||||
<a class="list-group-item text-dark text-decoration-none border-left-0 border-right-0 border-top-0" :href="'/account/direct/t/'+thread.id">
|
||||
<div class="media d-flex align-items-center">
|
||||
<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="32px">
|
||||
<div class="media-body">
|
||||
<p class="mb-0">
|
||||
<span class="font-weight-bold text-truncate" :title="[thread.isLocal ? '@' + thread.username : thread.username]" data-toggle="tooltip" data-placement="bottom">
|
||||
{{thread.name}}
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-muted mb-0" style="font-size:13px;font-weight: 500;">
|
||||
<span>
|
||||
<i class="far fa-comment text-primary"></i>
|
||||
</span>
|
||||
<span class="pl-1 pr-3">
|
||||
Received
|
||||
</span>
|
||||
<span>
|
||||
{{thread.timeAgo}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<span class="float-right">
|
||||
<i class="fas fa-chevron-right fa-lg text-lighter"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ul>
|
||||
<ul v-if="tab == 'sent'" class="list-group list-group-flush">
|
||||
<div v-if="!messages.sent.length" class="list-group-item d-flex justify-content-center align-items-center" style="min-height: 40vh;">
|
||||
<p class="lead mb-0">No messages found :(</p>
|
||||
</div>
|
||||
<div v-else v-for="(thread, index) in messages.sent">
|
||||
<a class="list-group-item text-dark text-decoration-none border-left-0 border-right-0 border-top-0" href="#" @click.prevent="loadMessage(thread.id)">
|
||||
<div class="media d-flex align-items-center">
|
||||
<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="32px">
|
||||
<div class="media-body">
|
||||
<p class="mb-0">
|
||||
<span class="font-weight-bold text-truncate" :title="[thread.isLocal ? '@' + thread.username : thread.username]" data-toggle="tooltip" data-placement="bottom">
|
||||
{{thread.name}}
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-muted mb-0" style="font-size:13px;font-weight: 500;">
|
||||
<span>
|
||||
<i class="far fa-paper-plane text-primary"></i>
|
||||
</span>
|
||||
<span class="pl-1 pr-3">
|
||||
Delivered
|
||||
</span>
|
||||
<span>
|
||||
{{thread.timeAgo}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<span class="float-right">
|
||||
<i class="fas fa-chevron-right fa-lg text-lighter"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ul>
|
||||
<ul v-if="tab == 'filtered'" class="list-group list-group-flush">
|
||||
<div v-if="!messages.filtered.length" class="list-group-item d-flex justify-content-center align-items-center" style="min-height: 40vh;">
|
||||
<p class="lead mb-0">No messages found :(</p>
|
||||
</div>
|
||||
<div v-else v-for="(thread, index) in messages.filtered">
|
||||
<a class="list-group-item text-dark text-decoration-none border-left-0 border-right-0 border-top-0" href="#" @click.prevent="loadMessage(thread.id)">
|
||||
<div class="media d-flex align-items-center">
|
||||
<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="32px">
|
||||
<div class="media-body">
|
||||
<p class="mb-0">
|
||||
<span class="font-weight-bold text-truncate" :title="[thread.isLocal ? '@' + thread.username : thread.username]" data-toggle="tooltip" data-placement="bottom">
|
||||
{{thread.name}}
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-muted mb-0" style="font-size:13px;font-weight: 500;">
|
||||
<span>
|
||||
<i class="fas fa-shield-alt" style="color:#fd9426"></i>
|
||||
</span>
|
||||
<span class="pl-1 pr-3">
|
||||
Filtered
|
||||
</span>
|
||||
<span>
|
||||
{{thread.timeAgo}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<span class="float-right">
|
||||
<i class="fas fa-chevron-right fa-lg text-lighter"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="tab == 'inbox'" class="mt-3 text-center">
|
||||
<button class="btn btn-outline-primary rounded-pill btn-sm" :disabled="inboxPage == 1" @click="messagePagination('inbox', 'prev')">Prev</button>
|
||||
<button class="btn btn-outline-primary rounded-pill btn-sm" :disabled="messages.inbox.length != 8" @click="messagePagination('inbox', 'next')">Next</button>
|
||||
</div>
|
||||
<div v-if="tab == 'sent'" class="mt-3 text-center">
|
||||
<button class="btn btn-outline-primary rounded-pill btn-sm" :disabled="sentPage == 1" @click="messagePagination('sent', 'prev')">Prev</button>
|
||||
<button class="btn btn-outline-primary rounded-pill btn-sm" :disabled="messages.sent.length != 8" @click="messagePagination('sent', 'next')">Next</button>
|
||||
</div>
|
||||
<div v-if="tab == 'filtered'" class="mt-3 text-center">
|
||||
<button class="btn btn-outline-primary rounded-pill btn-sm" :disabled="filteredPage == 1" @click="messagePagination('filtered', 'prev')">Prev</button>
|
||||
<button class="btn btn-outline-primary rounded-pill btn-sm" :disabled="messages.filtered.length != 8" @click="messagePagination('filtered', 'next')">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loaded && page == 'add'" class="container messages-page p-0 p-md-2 mt-n4" style="min-height: 60vh;">
|
||||
<div class="col-12 col-md-8 offset-md-2 p-0 px-md-2">
|
||||
<div class="card shadow-none border mt-4">
|
||||
<div class="card-header bg-white py-4 d-flex justify-content-between">
|
||||
<span class="cursor-pointer px-3" @click="goto('browse')"><i class="fas fa-chevron-left"></i></span>
|
||||
<span class="h4 font-weight-bold mb-0">New Direct Message</span>
|
||||
<span><i class="fas fa-chevron-right text-white"></i></span>
|
||||
</div>
|
||||
<div class="card-body d-flex align-items-center justify-content-center" style="height: 60vh;">
|
||||
<div class="">
|
||||
<p class="form-group">
|
||||
<label>To:</label>
|
||||
<!-- <div class="input-group pt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<input v-model="composeUsername" type="text" class="form-control" placeholder="dansup">
|
||||
</div> -->
|
||||
<autocomplete
|
||||
v-show="true"
|
||||
:search="composeSearch"
|
||||
placeholder="@dansup"
|
||||
aria-label="Search usernames"
|
||||
:get-result-value="getTagResultValue"
|
||||
@submit="onTagSubmitLocation"
|
||||
ref="autocomplete"
|
||||
>
|
||||
</autocomplete>
|
||||
<span class="help-text small text-muted">Select a username to send a message to.</span>
|
||||
</p>
|
||||
<hr>
|
||||
<!-- <p>
|
||||
<button type="button" class="btn btn-primary font-weight-bold btn-block" @click="composeUsernameSelect()" :disabled="!composeUsername.length">Next</button>
|
||||
</p> -->
|
||||
<ul class="text-muted">
|
||||
<li>You cannot message remote accounts yet.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style type="text/css" scoped>
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: window.App.config,
|
||||
loaded: false,
|
||||
profile: {},
|
||||
page: 'browse',
|
||||
pages: ['browse', 'add', 'read'],
|
||||
tab: 'inbox',
|
||||
tabs: ['inbox', 'sent', 'filtered'],
|
||||
inboxPage: 1,
|
||||
sentPage: 1,
|
||||
filteredPage: 1,
|
||||
threads: [],
|
||||
thread: false,
|
||||
threadIndex: false,
|
||||
|
||||
replyText: '',
|
||||
composeUsername: '',
|
||||
|
||||
ctxContext: null,
|
||||
ctxIndex: null,
|
||||
|
||||
uploading: false,
|
||||
uploadProgress: null,
|
||||
|
||||
messages: {
|
||||
inbox: [],
|
||||
sent: [],
|
||||
filtered: []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchProfile();
|
||||
let self = this;
|
||||
axios.get('/api/pixelfed/v1/direct/browse', {
|
||||
params: {
|
||||
a: 'inbox'
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
this.threads = res.data
|
||||
this.messages.inbox = res.data;
|
||||
});
|
||||
},
|
||||
|
||||
updated() {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchProfile() {
|
||||
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
|
||||
this.profile = res.data;
|
||||
window._sharedData.curUser = res.data;
|
||||
});
|
||||
},
|
||||
goto(l = 'browse') {
|
||||
this.page = l;
|
||||
let url = '/account/direct';
|
||||
switch(l) {
|
||||
case 'read':
|
||||
url = '/account/direct/t/' + this.thread.id;
|
||||
break;
|
||||
case 'add':
|
||||
url += '#/new';
|
||||
break;
|
||||
}
|
||||
window.history.pushState({},'',url);
|
||||
},
|
||||
|
||||
loadMessage(id) {
|
||||
let url = '/account/direct/t/' + id;
|
||||
window.location.href = url;
|
||||
return;
|
||||
},
|
||||
|
||||
composeUsernameSelect() {
|
||||
if(this.profile.username == this.composeUsername) {
|
||||
swal('Ooops!', 'You cannot send a direct message to yourself.', 'error');
|
||||
this.composeUsername = '';
|
||||
return;
|
||||
}
|
||||
axios.post('/api/direct/lookup', {
|
||||
username: this.composeUsername
|
||||
}).then(res => {
|
||||
let url = '/account/direct/t/' + res.data.id;
|
||||
window.location.href = url;
|
||||
}).catch(err => {
|
||||
let msg = 'The username you entered is incorrect. Please try again';
|
||||
swal('Ooops!', msg, 'error');
|
||||
this.composeUsername = '';
|
||||
});
|
||||
},
|
||||
|
||||
truncate(t) {
|
||||
return _.truncate(t);
|
||||
},
|
||||
|
||||
switchTab(tab) {
|
||||
let self = this;
|
||||
switch(tab) {
|
||||
case 'inbox':
|
||||
if(this.messages.inbox.length == 0) {
|
||||
// fetch
|
||||
}
|
||||
break;
|
||||
case 'sent':
|
||||
if(this.messages.sent.length == 0) {
|
||||
axios.get('/api/pixelfed/v1/direct/browse', {
|
||||
params: {
|
||||
a: 'sent'
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
self.threads = res.data
|
||||
self.messages.sent = res.data;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'filtered':
|
||||
if(this.messages.filtered.length == 0) {
|
||||
axios.get('/api/pixelfed/v1/direct/browse', {
|
||||
params: {
|
||||
a: 'filtered'
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
self.threads = res.data
|
||||
self.messages.filtered = res.data;
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.tab = tab;
|
||||
},
|
||||
|
||||
composeSearch(input) {
|
||||
if (input.length < 1) { return []; };
|
||||
let self = this;
|
||||
let results = [];
|
||||
return axios.get('/api/local/compose/tag/search', {
|
||||
params: {
|
||||
q: input
|
||||
}
|
||||
}).then(res => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
getTagResultValue(result) {
|
||||
return '@' + result.name;
|
||||
},
|
||||
|
||||
onTagSubmitLocation(result) {
|
||||
//this.$refs.autocomplete.value = '';
|
||||
window.location.href = '/account/direct/t/' + result.id;
|
||||
return;
|
||||
},
|
||||
|
||||
messagePagination(tab, dir) {
|
||||
if(tab == 'inbox') {
|
||||
this.inboxPage = dir == 'prev' ? this.inboxPage - 1 : this.inboxPage + 1;
|
||||
axios.get('/api/pixelfed/v1/direct/browse', {
|
||||
params: {
|
||||
a: 'inbox',
|
||||
page: this.inboxPage
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
this.threads = res.data
|
||||
this.messages.inbox = res.data;
|
||||
});
|
||||
}
|
||||
if(tab == 'sent') {
|
||||
this.sentPage = dir == 'prev' ? this.sentPage - 1 : this.sentPage + 1;
|
||||
axios.get('/api/pixelfed/v1/direct/browse', {
|
||||
params: {
|
||||
a: 'sent',
|
||||
page: this.sentPage
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
this.threads = res.data
|
||||
this.messages.sent = res.data;
|
||||
});
|
||||
}
|
||||
if(tab == 'filtered') {
|
||||
this.filteredPage = dir == 'prev' ? this.filteredPage - 1 : this.filteredPage + 1;
|
||||
axios.get('/api/pixelfed/v1/direct/browse', {
|
||||
params: {
|
||||
a: 'filtered',
|
||||
page: this.filteredPage
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
this.threads = res.data
|
||||
this.messages.filtered = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,648 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loaded && page == 'read'" class="container messages-page p-0 p-md-2 mt-n4" style="min-height: 60vh;">
|
||||
<div class="col-12 col-md-8 offset-md-2 p-0 px-md-2">
|
||||
<div class="card shadow-none border mt-4">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
||||
<span>
|
||||
<a href="/account/direct" class="text-muted">
|
||||
<i class="fas fa-chevron-left fa-lg"></i>
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
<div class="media">
|
||||
<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="40px">
|
||||
<div class="media-body">
|
||||
<p class="mb-0">
|
||||
<span class="font-weight-bold">{{thread.name}}</span>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<a v-if="!thread.isLocal" :href="'/'+thread.username" class="text-decoration-none text-muted">{{thread.username}}</a>
|
||||
<a v-else :href="'/'+thread.username" class="text-decoration-none text-muted">@{{thread.username}}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span><a href="#" class="text-muted" @click.prevent="showOptions()"><i class="fas fa-cog fa-lg"></i></a></span>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush dm-wrapper" style="height:60vh;overflow-y: scroll;">
|
||||
<li class="list-group-item border-0">
|
||||
<p class="text-center small text-muted">
|
||||
Conversation with <span class="font-weight-bold">{{thread.username}}</span>
|
||||
</p>
|
||||
<hr>
|
||||
</li>
|
||||
<li v-if="showLoadMore && thread.messages && thread.messages.length > 5" class="list-group-item border-0 mt-n4">
|
||||
<p class="text-center small text-muted">
|
||||
<button v-if="!loadingMessages" class="btn btn-primary font-weight-bold rounded-pill btn-sm px-3" @click="loadOlderMessages()">Load Older Messages</button>
|
||||
<button v-else class="btn btn-primary font-weight-bold rounded-pill btn-sm px-3" disabled>Loading...</button>
|
||||
</p>
|
||||
</li>
|
||||
<li v-for="(convo, index) in thread.messages" class="list-group-item border-0 chat-msg cursor-pointer" @click="openCtxMenu(convo, index)">
|
||||
<div v-if="!convo.isAuthor" class="media d-inline-flex mb-0">
|
||||
<img v-if="!hideAvatars" class="mr-3 mt-2 rounded-circle img-thumbnail" :src="thread.avatar" alt="avatar" width="32px">
|
||||
<div class="media-body">
|
||||
<p v-if="convo.type == 'photo'" class="pill-to p-0 shadow">
|
||||
<img :src="convo.media" width="140px" style="border-radius:20px;">
|
||||
</p>
|
||||
<div v-else-if="convo.type == 'link'" class="media d-inline-flex mb-0 cursor-pointer">
|
||||
<div class="media-body">
|
||||
<div class="card mb-2 rounded border shadow" style="width:240px;" :title="convo.text">
|
||||
<div class="card-body p-0">
|
||||
<div class="media d-flex align-items-center">
|
||||
<div v-if="convo.meta.local" class="bg-primary mr-3 border-right p-3">
|
||||
<i class="fas fa-link text-white fa-2x"></i>
|
||||
</div>
|
||||
<div v-else class="bg-light mr-3 border-right p-3">
|
||||
<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>
|
||||
</div>
|
||||
<p v-else-if="convo.type == 'video'" class="pill-to p-0 shadow">
|
||||
<!-- <video :src="convo.media" width="140px" style="border-radius:20px;"></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 :class="[largerText ? 'pill-to shadow larger-text text-break':'pill-to shadow text-break']">
|
||||
{{convo.text}}
|
||||
</p>
|
||||
<p v-if="!hideTimestamps" class="small text-muted font-weight-bold ml-2 d-flex align-items-center justify-content-start" data-timestamp="timestamp"> <span v-if="convo.hidden" class="mr-2 small" title="Filtered Message" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-lock"></i></span> {{convo.timeAgo}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="media d-inline-flex float-right mb-0">
|
||||
<div class="media-body">
|
||||
<p v-if="convo.type == 'photo'" class="pill-from p-0 shadow">
|
||||
<img :src="convo.media" width="140px" style="border-radius:20px;">
|
||||
</p>
|
||||
<div v-else-if="convo.type == 'link'" class="media d-inline-flex float-right mb-0 cursor-pointer">
|
||||
<div class="media-body">
|
||||
<div class="card mb-2 rounded border shadow" style="width:240px;" :title="convo.text">
|
||||
<div class="card-body p-0">
|
||||
<div class="media d-flex align-items-center">
|
||||
<div v-if="convo.meta.local" class="bg-primary mr-3 border-right p-3">
|
||||
<i class="fas fa-link text-white fa-2x"></i>
|
||||
</div>
|
||||
<div v-else class="bg-light mr-3 border-right p-3">
|
||||
<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>
|
||||
</div>
|
||||
<p v-else-if="convo.type == 'video'" class="pill-from p-0 shadow">
|
||||
<!-- <video :src="convo.media" width="140px" style="border-radius:20px;"></video> -->
|
||||
<span class="rounded-pill bg-primary d-flex align-items-center justify-content-center" style="width:200px;height: 110px">
|
||||
<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">
|
||||
Play
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
</p>
|
||||
<p v-else-if="convo.type == 'emoji'" class="p-0 emoji-msg">
|
||||
{{convo.text}}
|
||||
</p>
|
||||
<p v-else :class="[largerText ? 'pill-from shadow larger-text text-break':'pill-from shadow text-break']">
|
||||
{{convo.text}}
|
||||
</p>
|
||||
<p v-if="!hideTimestamps" class="small text-muted font-weight-bold text-right mr-2"> <span v-if="convo.hidden" class="mr-2 small" title="Filtered Message" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-lock"></i></span> {{convo.timeAgo}}
|
||||
</p>
|
||||
</div>
|
||||
<img v-if="!hideAvatars" class="ml-3 mt-2 rounded-circle img-thumbnail" :src="profile.avatar" alt="avatar" width="32px">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="card-footer bg-white p-0">
|
||||
<form class="border-0 rounded-0 align-middle" method="post" action="#">
|
||||
<textarea class="form-control border-0 rounded-0 no-focus" name="comment" placeholder="Reply ..." autocomplete="off" autocorrect="off" style="height:86px;line-height: 18px;max-height:80px;resize: none; padding-right:115.22px;" v-model="replyText" :disabled="blocked"></textarea>
|
||||
<input type="button" value="Send" :class="[replyText.length ? 'd-inline-block btn btn-sm btn-primary rounded-pill font-weight-bold reply-btn text-decoration-none text-uppercase' : 'd-inline-block btn btn-sm btn-primary rounded-pill font-weight-bold reply-btn text-decoration-none text-uppercase disabled']" :disabled="replyText.length == 0" @click.prevent="sendMessage"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer p-0">
|
||||
<p class="d-flex justify-content-between align-items-center mb-0 px-3 py-1 small">
|
||||
<!-- <span class="font-weight-bold" style="color: #D69E2E">
|
||||
<i class="fas fa-circle mr-1"></i>
|
||||
Typing ...
|
||||
</span> -->
|
||||
<span>
|
||||
<!-- <span class="btn btn-primary btn-sm font-weight-bold py-0 px-3 rounded-pill" @click="uploadMedia">
|
||||
<i class="fas fa-share mr-1"></i>
|
||||
Share
|
||||
</span> -->
|
||||
<span class="btn btn-primary btn-sm font-weight-bold py-0 px-3 rounded-pill" @click="uploadMedia">
|
||||
<i class="fas fa-upload mr-1"></i>
|
||||
Add Photo/Video
|
||||
</span>
|
||||
</span>
|
||||
<input type="file" id="uploadMedia" class="d-none" name="uploadMedia" accept="image/jpeg,image/png,image/gif,video/mp4" >
|
||||
<span class="text-muted font-weight-bold">{{replyText.length}}/600</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loaded && page == 'options'" class="container messages-page p-0 p-md-2 mt-n4" style="min-height: 60vh;">
|
||||
<div class="col-12 col-md-8 offset-md-2 p-0 px-md-2">
|
||||
<div class="card shadow-none border mt-4">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
||||
<span>
|
||||
<a href="#" class="text-muted" @click.prevent="page='read'">
|
||||
<i class="fas fa-chevron-left fa-lg"></i>
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
<p class="mb-0 lead font-weight-bold py-2">Message Settings</p>
|
||||
</span>
|
||||
<span class="text-lighter" data-toggle="tooltip" data-placement="bottom" title="Have a nice day!"><i class="far fa-smile fa-lg"></i></span>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush dm-wrapper" style="height: 698px;">
|
||||
<div class="list-group-item media border-bottom">
|
||||
<div class="d-inline-block custom-control custom-switch ml-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch0" v-model="hideAvatars">
|
||||
<label class="custom-control-label" for="customSwitch0"></label>
|
||||
</div>
|
||||
<div class="d-inline-block ml-3 font-weight-bold">
|
||||
Hide Avatars
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item media border-bottom">
|
||||
<div class="d-inline-block custom-control custom-switch ml-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="hideTimestamps">
|
||||
<label class="custom-control-label" for="customSwitch1"></label>
|
||||
</div>
|
||||
<div class="d-inline-block ml-3 font-weight-bold">
|
||||
Hide Timestamps
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item media border-bottom">
|
||||
<div class="d-inline-block custom-control custom-switch ml-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch2" v-model="largerText">
|
||||
<label class="custom-control-label" for="customSwitch2"></label>
|
||||
</div>
|
||||
<div class="d-inline-block ml-3 font-weight-bold">
|
||||
Larger Text
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="list-group-item media border-bottom">
|
||||
<div class="d-inline-block custom-control custom-switch ml-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch3" v-model="autoRefresh">
|
||||
<label class="custom-control-label" for="customSwitch3"></label>
|
||||
</div>
|
||||
<div class="d-inline-block ml-3 font-weight-bold">
|
||||
Auto Refresh
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="list-group-item media border-bottom d-flex align-items-center">
|
||||
<div class="d-inline-block custom-control custom-switch ml-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch4" v-model="mutedNotifications">
|
||||
<label class="custom-control-label" for="customSwitch4"></label>
|
||||
</div>
|
||||
<div class="d-inline-block ml-3 font-weight-bold">
|
||||
Mute Notifications
|
||||
<p class="small mb-0">You will not receive any direct message notifications from <strong>{{thread.username}}</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-modal ref="ctxModal"
|
||||
id="ctx-modal"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded">
|
||||
<div class="list-group text-center">
|
||||
<div v-if="ctxContext && ctxContext.type == 'photo'" class="list-group-item rounded cursor-pointer font-weight-bold text-dark" @click="viewOriginal()">View Original</div>
|
||||
<div v-if="ctxContext && ctxContext.type == 'video'" class="list-group-item rounded cursor-pointer font-weight-bold text-dark" @click="viewOriginal()">Play</div>
|
||||
<div v-if="ctxContext && ctxContext.type == 'link'" class="list-group-item rounded cursor-pointer" @click="clickLink()">
|
||||
<p class="mb-0" style="font-size:12px;">
|
||||
Navigate to
|
||||
</p>
|
||||
<p class="mb-0 font-weight-bold text-dark">
|
||||
{{this.ctxContext.meta.domain}}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="ctxContext && (ctxContext.type == 'text' || ctxContext.type == 'emoji' || ctxContext.type == 'link')" class="list-group-item rounded cursor-pointer text-dark" @click="copyText()">Copy</div>
|
||||
<div v-if="ctxContext && !ctxContext.isAuthor" class="list-group-item rounded cursor-pointer text-muted" @click="reportMessage()">Report</div>
|
||||
<div v-if="ctxContext && ctxContext.isAuthor" class="list-group-item rounded cursor-pointer text-muted" @click="deleteMessage()">Delete</div>
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style type="text/css" scoped>
|
||||
.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:#EDF2F7;
|
||||
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: #53d769;*/
|
||||
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-msg:hover {
|
||||
background: #f7fbfd;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['accountId'],
|
||||
data() {
|
||||
return {
|
||||
config: window.App.config,
|
||||
hideAvatars: true,
|
||||
hideTimestamps: false,
|
||||
largerText: false,
|
||||
autoRefresh: false,
|
||||
mutedNotifications: false,
|
||||
blocked: false,
|
||||
loaded: false,
|
||||
profile: {},
|
||||
page: 'read',
|
||||
pages: ['browse', 'add', 'read'],
|
||||
threads: [],
|
||||
thread: false,
|
||||
threadIndex: false,
|
||||
|
||||
replyText: '',
|
||||
composeUsername: '',
|
||||
|
||||
ctxContext: null,
|
||||
ctxIndex: null,
|
||||
|
||||
uploading: false,
|
||||
uploadProgress: null,
|
||||
|
||||
min_id: null,
|
||||
max_id: null,
|
||||
loadingMessages: false,
|
||||
showLoadMore: true,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchProfile();
|
||||
let self = this;
|
||||
axios.get('/api/pixelfed/v1/direct/thread', {
|
||||
params: {
|
||||
pid: self.accountId
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
self.loaded = true;
|
||||
let d = res.data;
|
||||
d.messages.reverse();
|
||||
this.thread = d;
|
||||
this.threads = [d];
|
||||
this.threadIndex = 0;
|
||||
let mids = d.messages.map(m => m.id);
|
||||
this.max_id = Math.max(...mids);
|
||||
this.min_id = Math.min(...mids);
|
||||
this.mutedNotifications = d.muted;
|
||||
this.markAsRead();
|
||||
//this.messagePoll();
|
||||
setTimeout(function() {
|
||||
let objDiv = document.querySelector('.dm-wrapper');
|
||||
objDiv.scrollTop = objDiv.scrollHeight;
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
|
||||
watch: {
|
||||
mutedNotifications: function(v) {
|
||||
if(v) {
|
||||
axios.post('/api/pixelfed/v1/direct/mute', {
|
||||
id: this.accountId
|
||||
}).then(res => {
|
||||
|
||||
});
|
||||
} else {
|
||||
axios.post('/api/pixelfed/v1/direct/unmute', {
|
||||
id: this.accountId
|
||||
}).then(res => {
|
||||
|
||||
});
|
||||
}
|
||||
this.mutedNotifications = v;
|
||||
},
|
||||
},
|
||||
|
||||
updated() {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchProfile() {
|
||||
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
|
||||
this.profile = res.data;
|
||||
window._sharedData.curUser = res.data;
|
||||
});
|
||||
},
|
||||
|
||||
sendMessage() {
|
||||
let self = this;
|
||||
let rt = this.replyText;
|
||||
axios.post('/api/pixelfed/v1/direct/create', {
|
||||
'to_id': this.threads[this.threadIndex].id,
|
||||
'message': rt,
|
||||
'type': self.isEmoji(rt) && rt.length < 10 ? 'emoji' : 'text'
|
||||
}).then(res => {
|
||||
let msg = res.data;
|
||||
self.threads[self.threadIndex].messages.push(msg);
|
||||
let mids = self.threads[self.threadIndex].messages.map(m => m.id);
|
||||
this.max_id = Math.max(...mids)
|
||||
this.min_id = Math.min(...mids)
|
||||
setTimeout(function() {
|
||||
var objDiv = document.querySelector('.dm-wrapper');
|
||||
objDiv.scrollTop = objDiv.scrollHeight;
|
||||
}, 300);
|
||||
}).catch(err => {
|
||||
if(err.response.status == 403) {
|
||||
self.blocked = true;
|
||||
swal('Profile Unavailable', 'You cannot message this profile at this time.', 'error');
|
||||
}
|
||||
})
|
||||
this.replyText = '';
|
||||
},
|
||||
|
||||
openCtxMenu(r, i) {
|
||||
this.ctxIndex = i;
|
||||
this.ctxContext = r;
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
closeCtxMenu() {
|
||||
this.$refs.ctxModal.hide();
|
||||
},
|
||||
|
||||
truncate(t) {
|
||||
return _.truncate(t);
|
||||
},
|
||||
|
||||
deleteMessage() {
|
||||
let self = this;
|
||||
let c = window.confirm('Are you sure you want to delete this message?');
|
||||
if(c) {
|
||||
axios.delete('/api/direct/message', {
|
||||
params: {
|
||||
id: self.ctxContext.id
|
||||
}
|
||||
}).then(res => {
|
||||
self.threads[self.threadIndex].messages.splice(self.ctxIndex,1);
|
||||
self.closeCtxMenu();
|
||||
});
|
||||
} else {
|
||||
self.closeCtxMenu();
|
||||
}
|
||||
},
|
||||
|
||||
reportMessage() {
|
||||
this.closeCtxMenu();
|
||||
let url = '/i/report?type=post&id=' + this.ctxContext.id;
|
||||
window.location.href = url;
|
||||
return;
|
||||
},
|
||||
|
||||
uploadMedia(event) {
|
||||
let self = this;
|
||||
$(document).on('change', '#uploadMedia', function(e) {
|
||||
self.handleUpload();
|
||||
});
|
||||
let el = $(event.target);
|
||||
el.attr('disabled', '');
|
||||
$('#uploadMedia').click();
|
||||
el.blur();
|
||||
el.removeAttr('disabled');
|
||||
},
|
||||
|
||||
handleUpload() {
|
||||
let self = this;
|
||||
self.uploading = true;
|
||||
let io = document.querySelector('#uploadMedia');
|
||||
if(!io.files.length) {
|
||||
this.uploading = false;
|
||||
}
|
||||
Array.prototype.forEach.call(io.files, function(io, i) {
|
||||
let type = io.type;
|
||||
let acceptedMimes = self.config.uploader.media_types.split(',');
|
||||
let validated = $.inArray(type, acceptedMimes);
|
||||
if(validated == -1) {
|
||||
swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.config.uploader.media_types+' only.', 'error');
|
||||
self.uploading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
let form = new FormData();
|
||||
form.append('file', io);
|
||||
form.append('to_id', self.threads[self.threadIndex].id);
|
||||
|
||||
let xhrConfig = {
|
||||
onUploadProgress: function(e) {
|
||||
let progress = Math.round( (e.loaded * 100) / e.total );
|
||||
self.uploadProgress = progress;
|
||||
}
|
||||
};
|
||||
|
||||
axios.post('/api/direct/media', form, xhrConfig)
|
||||
.then(function(e) {
|
||||
self.uploadProgress = 100;
|
||||
self.uploading = false;
|
||||
let msg = {
|
||||
id: Date.now(),
|
||||
type: e.data.type,
|
||||
isAuthor: true,
|
||||
text: null,
|
||||
media: e.data.url,
|
||||
timeAgo: '1s',
|
||||
seen: null
|
||||
};
|
||||
self.threads[self.threadIndex].messages.push(msg);
|
||||
setTimeout(function() {
|
||||
var objDiv = document.querySelector('.dm-wrapper');
|
||||
objDiv.scrollTop = objDiv.scrollHeight;
|
||||
}, 300);
|
||||
|
||||
}).catch(function(e) {
|
||||
switch(e.response.status) {
|
||||
case 451:
|
||||
self.uploading = false;
|
||||
io.value = null;
|
||||
swal('Banned Content', 'This content has been banned and cannot be uploaded.', 'error');
|
||||
break;
|
||||
|
||||
default:
|
||||
self.uploading = false;
|
||||
io.value = null;
|
||||
swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
|
||||
break;
|
||||
}
|
||||
});
|
||||
io.value = null;
|
||||
self.uploadProgress = 0;
|
||||
});
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
markAsRead() {
|
||||
return;
|
||||
axios.post('/api/direct/read', {
|
||||
pid: this.accountId,
|
||||
sid: this.max_id
|
||||
}).then(res => {
|
||||
}).catch(err => {
|
||||
});
|
||||
},
|
||||
|
||||
loadOlderMessages() {
|
||||
let self = this;
|
||||
this.loadingMessages = true;
|
||||
|
||||
axios.get('/api/pixelfed/v1/direct/thread', {
|
||||
params: {
|
||||
pid: this.accountId,
|
||||
max_id: this.min_id,
|
||||
}
|
||||
}).then(res => {
|
||||
let d = res.data;
|
||||
if(!d.messages.length) {
|
||||
this.showLoadMore = false;
|
||||
this.loadingMessages = false;
|
||||
return;
|
||||
}
|
||||
let cids = this.thread.messages.map(m => m.id);
|
||||
let m = d.messages.filter(m => {
|
||||
return cids.indexOf(m.id) == -1;
|
||||
}).reverse();
|
||||
let mids = m.map(m => m.id);
|
||||
let min_id = Math.min(...mids);
|
||||
if(min_id == this.min_id) {
|
||||
this.showLoadMore = false;
|
||||
this.loadingMessages = false;
|
||||
return;
|
||||
}
|
||||
this.min_id = min_id;
|
||||
this.thread.messages.unshift(...m);
|
||||
setTimeout(function() {
|
||||
self.loadingMessages = false;
|
||||
}, 500);
|
||||
}).catch(err => {
|
||||
this.loadingMessages = false;
|
||||
})
|
||||
},
|
||||
|
||||
messagePoll() {
|
||||
let self = this;
|
||||
setInterval(function() {
|
||||
axios.get('/api/pixelfed/v1/direct/thread', {
|
||||
params: {
|
||||
pid: self.accountId,
|
||||
min_id: self.thread.messages[self.thread.messages.length - 1].id
|
||||
}
|
||||
}).then(res => {
|
||||
});
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
showOptions() {
|
||||
this.page = 'options';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,4 +1,9 @@
|
||||
Vue.component(
|
||||
'direct-component',
|
||||
require('./components/Direct.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'direct-message',
|
||||
require('./components/DirectMessage.vue').default
|
||||
);
|
||||
@ -0,0 +1,12 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div>
|
||||
<direct-message account-id="{{$id}}"></direct-message>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript" src="{{ mix('js/direct.js') }}"></script>
|
||||
<script type="text/javascript">App.boot();</script>
|
||||
@endpush
|
||||
Loading…
Reference in New Issue