mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 04:21:27 +00:00
882 lines
25 KiB
Vue
882 lines
25 KiB
Vue
<template>
|
|
<div class="dm-page-component">
|
|
<div v-if="isLoaded" class="container-fluid mt-lg-3 pb-lg-5">
|
|
<div class="row dm-page-component-row">
|
|
<div class="col-md-3 d-md-block">
|
|
<sidebar :user="profile" />
|
|
</div>
|
|
|
|
<div class="col-md-6 p-0">
|
|
<div v-if="loaded && page == 'read'" class="messages-page">
|
|
<div class="card shadow-none">
|
|
<div class="h4 card-header font-weight-bold text-dark d-flex justify-content-between align-items-center" style="letter-spacing: -0.3px;">
|
|
<button class="btn btn-light rounded-pill text-dark" @click="goBack()">
|
|
<i class="far fa-chevron-left fa-lg"></i>
|
|
</button>
|
|
|
|
<div>Direct Message</div>
|
|
|
|
<button class="btn btn-light rounded-pill text-dark" @click="showOptions()">
|
|
<i class="far fa-cog fa-lg"></i>
|
|
</button>
|
|
</div>
|
|
<ul class="list-group list-group-flush" style="position:relative;">
|
|
<li class="list-group-item border-bottom sticky-top">
|
|
<p class="text-center small text-muted mb-0">
|
|
Conversation with <span class="font-weight-bold">{{thread.username}}</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
|
|
<transition name="fade">
|
|
<ul v-if="showDMPrivacyWarning && showPrivacyWarning" class="list-group list-group-flush dm-privacy-warning" style="position:absolute;top:105px;width:100%;">
|
|
<li class="list-group-item border-bottom sticky-top bg-warning">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-none d-lg-block">
|
|
<i class="fas fa-exclamation-triangle text-danger fa-lg mr-3"></i>
|
|
</div>
|
|
<div>
|
|
<p class="small warning-text mb-0 font-weight-bold"><span class="d-inline d-lg-none">DMs</span><span class="d-none d-lg-inline">Direct messages on Pixelfed</span> are not end-to-end encrypted.
|
|
</p>
|
|
<p class="small warning-text mb-0 font-weight-bold">
|
|
Use caution when sharing sensitive data.
|
|
</p>
|
|
</div>
|
|
<button class="btn btn-link text-decoration-none" @click="togglePrivacyWarning">
|
|
<i class="far fa-times-circle fa-lg"></i>
|
|
<span class="d-none d-lg-block">Close</span>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</transition>
|
|
|
|
<ul class="list-group list-group-flush dm-wrapper" style="overflow-y: scroll;position:relative;flex-direction: column-reverse;">
|
|
<li v-for="(convo, index) in thread.messages" class="list-group-item border-0 chat-msg mb-n2">
|
|
<message
|
|
:convo="convo"
|
|
:thread="thread"
|
|
:hideAvatars="hideAvatars"
|
|
:hideTimestamps="hideTimestamps"
|
|
:largerText="largerText"
|
|
v-on:confirm-delete="deleteMessage(index)" />
|
|
</li>
|
|
|
|
<li v-if="showLoadMore && thread.messages && thread.messages.length > 5" class="list-group-item border-0">
|
|
<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>
|
|
</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 class="dm-reply-form">
|
|
<div class="dm-reply-form-input-group">
|
|
<input
|
|
class="form-control form-control-lg"
|
|
placeholder="Type a message..."
|
|
:disabled="uploading"
|
|
v-model="replyText">
|
|
|
|
<button
|
|
class="upload-media-btn btn btn-link"
|
|
:disabled="uploading"
|
|
@click="uploadMedia">
|
|
<i class="far fa-image fa-2x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
class="dm-reply-form-submit-btn btn btn-primary"
|
|
:disabled="!replyText || !replyText.length || showReplyTooLong"
|
|
@click="sendMessage">
|
|
<i class="far fa-paper-plane fa-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="uploading" class="card-footer dm-status-bar">
|
|
<p>Uploading ({{uploadProgress}}%) ...</p>
|
|
</div>
|
|
|
|
<div v-if="showReplyLong" class="card-footer dm-status-bar">
|
|
<p class="text-warning">{{ replyText.length }}/500</p>
|
|
</div>
|
|
|
|
<div v-if="showReplyTooLong" class="card-footer dm-status-bar">
|
|
<p class="text-danger">{{ replyText.length }}/500 - Your message exceeds the limit of 500 characters</p>
|
|
</div>
|
|
|
|
<div class="d-none 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}}/500</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loaded && page == 'options'" class="messages-page">
|
|
<div class="card shadow-none">
|
|
<div class="h4 card-header font-weight-bold text-dark d-flex justify-content-between align-items-center" style="letter-spacing: -0.3px;">
|
|
<button class="btn btn-light rounded-pill text-dark" @click.prevent="goBack('read')">
|
|
<i class="far fa-chevron-left fa-lg"></i>
|
|
</button>
|
|
|
|
<div>Direct Message Settings</div>
|
|
|
|
<div class="btn btn-light rounded-pill text-dark">
|
|
<i class="far fa-smile fa-lg"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="list-group list-group-flush" 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>
|
|
<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="customSwitch5" v-model="showDMPrivacyWarning">
|
|
<label class="custom-control-label" for="customSwitch5"></label>
|
|
</div>
|
|
<div class="d-inline-block ml-3 font-weight-bold">
|
|
Show Privacy Warning
|
|
<p class="small mb-0">Show privacy warning indicating that direct messages are not end-to-end encrypted and that caution is advised when sending sensitive/confidential information.</p>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="conversationProfile" class="col-md-3 d-none d-md-block">
|
|
<div class="card shadow-sm mb-3" style="border-radius: 15px;">
|
|
<div class="small card-header font-weight-bold text-uppercase text-lighter" style="letter-spacing: -0.3px;">
|
|
Conversation
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<div class="media user-card user-select-none">
|
|
<div>
|
|
<img :src="conversationProfile.avatar" class="avatar shadow cursor-pointer" draggable="false" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
|
|
</div>
|
|
<div class="media-body">
|
|
<p
|
|
class="display-name"
|
|
v-html="conversationProfile.display_name"
|
|
@click="gotoProfile(conversationProfile)"
|
|
>
|
|
</p>
|
|
|
|
<p
|
|
class="username primary"
|
|
@click="gotoProfile(conversationProfile)">
|
|
@{{ conversationProfile.acct }}
|
|
</p>
|
|
<p class="stats">
|
|
<span class="stats-following">
|
|
<span class="following-count">{{ formatCount(conversationProfile.following_count) }}</span> Following
|
|
</span>
|
|
<span class="stats-followers">
|
|
<span class="followers-count">{{ formatCount(conversationProfile.followers_count) }}</span> Followers
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="card shadow-sm mb-3" style="border-radius: 15px;">
|
|
<div class="small card-header font-weight-bold text-uppercase text-lighter" style="border-top-left-radius: 15px;letter-spacing: -0.3px;">
|
|
History
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="list-group shadow-sm">
|
|
<div class="list-group-item border-0 border-bottom" style="border-width: 1px;">
|
|
<p class="mb-0"><i class="far fa-user-plus mr-2"></i> You both follow each other</p>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<p class="mb-0"><i class="far fa-users mr-2"></i> You both follow <a class="font-weight-bold">@pixelfed</a>,<a class="font-weight-bold">@pixeldev</a> and <a class="font-weight-bold">@pixel</a></p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else class="d-flex justify-content-center align-items-center" style="height:calc(100vh - 58px);">
|
|
<b-spinner />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
import Drawer from './partials/drawer.vue';
|
|
import Sidebar from './partials/sidebar.vue';
|
|
import Placeholder from './partials/placeholders/DirectMessagePlaceholder.vue';
|
|
import Intersect from 'vue-intersect'
|
|
import ProfileCard from './partials/profile/ProfileHoverCard.vue';
|
|
import Message from './partials/direct/Message.vue';
|
|
|
|
export default {
|
|
props: ['accountId'],
|
|
|
|
components: {
|
|
"drawer": Drawer,
|
|
"sidebar": Sidebar,
|
|
"intersect": Intersect,
|
|
"dm-placeholder": Placeholder,
|
|
"profile-card": ProfileCard,
|
|
"message": Message
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isLoaded: false,
|
|
profile: undefined,
|
|
conversationProfile: undefined,
|
|
isIntersecting: false,
|
|
|
|
config: window.App.config,
|
|
hideAvatars: true,
|
|
hideTimestamps: false,
|
|
largerText: false,
|
|
autoRefresh: false,
|
|
mutedNotifications: false,
|
|
blocked: false,
|
|
loaded: false,
|
|
page: 'read',
|
|
pages: ['browse', 'add', 'read'],
|
|
threads: [],
|
|
thread: false,
|
|
threadIndex: false,
|
|
|
|
replyText: '',
|
|
composeUsername: '',
|
|
uploading: false,
|
|
uploadProgress: null,
|
|
|
|
min_id: null,
|
|
max_id: null,
|
|
loadingMessages: false,
|
|
showLoadMore: true,
|
|
|
|
showReplyLong: false,
|
|
showReplyTooLong: false,
|
|
|
|
showPrivacyWarning: true,
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.profile = window._sharedData.user;
|
|
this.isLoaded = true;
|
|
let self = this;
|
|
axios.get('/api/v1/accounts/' + this.accountId)
|
|
.then(res => {
|
|
this.conversationProfile = res.data;
|
|
});
|
|
|
|
axios.get('/api/direct/thread', {
|
|
params: {
|
|
pid: self.accountId
|
|
}
|
|
})
|
|
.then(res => {
|
|
self.loaded = true;
|
|
let d = res.data;
|
|
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);
|
|
});
|
|
|
|
let options = localStorage.getItem('px_dm_options');
|
|
if(options) {
|
|
options = JSON.parse(options);
|
|
this.hideAvatars = options.hideAvatars;
|
|
this.hideTimestamps = options.hideTimestamps;
|
|
this.largerText = options.largerText;
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
showDMPrivacyWarning: {
|
|
get() {
|
|
return this.$store.state.showDMPrivacyWarning;
|
|
},
|
|
|
|
set(val) {
|
|
window.localStorage.removeItem('pf_m2s.dmwarncounter');
|
|
this.$store.commit('setShowDMPrivacyWarning', val);
|
|
}
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
mutedNotifications: function(v) {
|
|
if(v) {
|
|
axios.post('/api/direct/mute', {
|
|
id: this.accountId
|
|
}).then(res => {
|
|
|
|
});
|
|
} else {
|
|
axios.post('/api/direct/unmute', {
|
|
id: this.accountId
|
|
}).then(res => {
|
|
|
|
});
|
|
}
|
|
this.mutedNotifications = v;
|
|
},
|
|
|
|
hideAvatars: function(v) {
|
|
this.hideAvatars = v;
|
|
this.updateOptions();
|
|
},
|
|
|
|
hideTimestamps: function(v) {
|
|
this.hideTimestamps = v;
|
|
this.updateOptions();
|
|
},
|
|
|
|
largerText: function(v) {
|
|
this.largerText = v;
|
|
this.updateOptions();
|
|
},
|
|
|
|
replyText: function(v) {
|
|
let limit = 500;
|
|
|
|
if(v.length < limit) {
|
|
this.showReplyLong = false;
|
|
this.showReplyTooLong = false;
|
|
}
|
|
|
|
if(v.length > limit) {
|
|
this.showReplyLong = false;
|
|
this.showReplyTooLong = true;
|
|
return;
|
|
}
|
|
|
|
if(v.length > (limit - 50)) {
|
|
this.showReplyTooLong = false;
|
|
this.showReplyLong = true;
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
sendMessage() {
|
|
let self = this;
|
|
let rt = this.replyText;
|
|
axios.post('/api/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.unshift(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 = '';
|
|
},
|
|
|
|
truncate(t) {
|
|
return _.truncate(t);
|
|
},
|
|
|
|
deleteMessage(index) {
|
|
let c = window.confirm('Are you sure you want to delete this message?');
|
|
if(c) {
|
|
axios.delete('/api/direct/message', {
|
|
params: {
|
|
id: this.thread.messages[index].reportId
|
|
}
|
|
}).then(res => {
|
|
this.thread.messages.splice(index ,1);
|
|
});
|
|
}
|
|
},
|
|
|
|
reportMessage() {
|
|
this.closeCtxMenu();
|
|
let url = '/i/report?type=post&id=' + this.ctxContext.reportId;
|
|
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;
|
|
if(self.uploading) {
|
|
return;
|
|
}
|
|
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: e.data.id,
|
|
type: e.data.type,
|
|
reportId: e.data.reportId,
|
|
isAuthor: true,
|
|
text: null,
|
|
media: e.data.url,
|
|
timeAgo: '1s',
|
|
seen: null
|
|
};
|
|
self.threads[self.threadIndex].messages.unshift(msg);
|
|
// setTimeout(function() {
|
|
// var objDiv = document.querySelector('.dm-wrapper');
|
|
// objDiv.scrollTop = objDiv.scrollHeight;
|
|
// }, 300);
|
|
|
|
}).catch(function(e) {
|
|
if(e.hasOwnProperty('response') && e.response.hasOwnProperty('status') ) {
|
|
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/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.push(...m);
|
|
setTimeout(function() {
|
|
self.loadingMessages = false;
|
|
}, 500);
|
|
}).catch(err => {
|
|
this.loadingMessages = false;
|
|
})
|
|
},
|
|
|
|
messagePoll() {
|
|
let self = this;
|
|
setInterval(function() {
|
|
axios.get('/api/direct/thread', {
|
|
params: {
|
|
pid: self.accountId,
|
|
min_id: self.thread.messages[self.thread.messages.length - 1].id
|
|
}
|
|
}).then(res => {
|
|
});
|
|
}, 5000);
|
|
},
|
|
|
|
showOptions() {
|
|
this.page = 'options';
|
|
},
|
|
|
|
updateOptions() {
|
|
let options = {
|
|
v: 1,
|
|
hideAvatars: this.hideAvatars,
|
|
hideTimestamps: this.hideTimestamps,
|
|
largerText: this.largerText
|
|
}
|
|
window.localStorage.setItem('px_dm_options', JSON.stringify(options));
|
|
},
|
|
|
|
formatCount(val) {
|
|
return window.App.util.format.count(val);
|
|
},
|
|
|
|
goBack(page = false) {
|
|
if(page) {
|
|
this.page = page;
|
|
} else {
|
|
this.$router.push('/i/web/direct');
|
|
}
|
|
},
|
|
|
|
gotoProfile(profile) {
|
|
this.$router.push(`/i/web/profile/${profile.id}`);
|
|
},
|
|
|
|
togglePrivacyWarning() {
|
|
console.log('clicked toggle privacy warning');
|
|
let ls = window.localStorage;
|
|
let key = 'pf_m2s.dmwarncounter';
|
|
this.showPrivacyWarning = false;
|
|
if(ls.getItem(key)) {
|
|
let count = ls.getItem(key);
|
|
count++;
|
|
ls.setItem(key, count);
|
|
if(count > 5) {
|
|
this.showDMPrivacyWarning = false;
|
|
}
|
|
} else {
|
|
ls.setItem(key, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dm-page-component {
|
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
|
|
.user-card {
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 15px;
|
|
margin-right: 0.8rem;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.avatar-update-btn {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: rgba(255,255,255,0.9);
|
|
border: 1px solid #dee2e6 !important;
|
|
padding: 0;
|
|
border-radius: 50rem;
|
|
|
|
&-icon {
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
line-height: 1;
|
|
|
|
&:before {
|
|
content: "\F013";
|
|
}
|
|
}
|
|
}
|
|
|
|
.username {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.display-name {
|
|
color: var(--body-color);
|
|
line-height: 0.8;
|
|
font-size: 14px;
|
|
font-weight: 800 !important;
|
|
user-select: all;
|
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stats {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 12px;
|
|
user-select: none;
|
|
|
|
.stats-following {
|
|
margin-right: 0.8rem;
|
|
}
|
|
|
|
.following-count,
|
|
.followers-count {
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dm-reply-form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--card-bg);
|
|
padding: 1rem;
|
|
|
|
.btn:focus,
|
|
.btn.focus,
|
|
input:focus,
|
|
input.focus {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
:disabled {
|
|
opacity: 20% !important;
|
|
}
|
|
|
|
&-input-group {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
position: relative;
|
|
|
|
|
|
input {
|
|
position: absolute;
|
|
padding-right: 60px;
|
|
background-color: var(--comment-bg);
|
|
border-radius: 25px;
|
|
border-color: var(--comment-bg) !important;
|
|
font-size: 15px;
|
|
color: var(--dark);
|
|
|
|
}
|
|
|
|
.upload-media-btn {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-lighter);
|
|
}
|
|
}
|
|
|
|
&-submit-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 24px;
|
|
}
|
|
}
|
|
|
|
.dm-status-bar {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-lighter);
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.dm-privacy-warning {
|
|
p,
|
|
.btn {
|
|
color: #000;
|
|
}
|
|
|
|
.warning-text {
|
|
text-align: left;
|
|
|
|
@media (min-width: 992px) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-row {
|
|
.dm-wrapper {
|
|
padding-top: 100px;
|
|
height: calc(100vh - 240px);
|
|
|
|
@media (min-width: 500px) {
|
|
min-height: 40vh;
|
|
}
|
|
|
|
@media (min-width: 700px) {
|
|
height: 60vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|