forked from mirror/pixelfed
daniel
GitHub
commit
d9578fa56d
|
|
@ -24,6 +24,12 @@
|
|||
- Updated NotificationCard, fix missing status bug. ([a3a86d46](https://github.com/pixelfed/pixelfed/commit/a3a86d46))
|
||||
- Updated Activity component, fix comment bug. ([9a2db8eb](https://github.com/pixelfed/pixelfed/commit/9a2db8eb))
|
||||
- Updated Inbox, fix tombstone bug. ([929ff5eb](https://github.com/pixelfed/pixelfed/commit/929ff5eb))
|
||||
- Updated LikeService, skip self likes. ([3741c76d](https://github.com/pixelfed/pixelfed/commit/3741c76d))
|
||||
- Updated StatusController, improve share api perf (11s to 72ms). ([d48ebb82](https://github.com/pixelfed/pixelfed/commit/d48ebb82))
|
||||
- Updated ApiController, fix nulls in hashtag endpoint. ([f1208de0](https://github.com/pixelfed/pixelfed/commit/f1208de0))
|
||||
- Updated SharePipeline, add Undo->Announce support. ([c8e40e0f](https://github.com/pixelfed/pixelfed/commit/c8e40e0f))
|
||||
- Updated NetworkTimeline, fix remote comment urls. ([308acc91](https://github.com/pixelfed/pixelfed/commit/308acc91))
|
||||
- Updated Timeline component, abstracted reusable partials. ([858f3f9e](https://github.com/pixelfed/pixelfed/commit/858f3f9e))
|
||||
- ([](https://github.com/pixelfed/pixelfed/commit/))
|
||||
|
||||
## [v0.11.0 (2021-06-01)](https://github.com/pixelfed/pixelfed/compare/v0.10.10...v0.11.0)
|
||||
|
|
|
|||
|
|
@ -1938,8 +1938,6 @@ class ApiV1Controller extends Controller
|
|||
]);
|
||||
|
||||
if($share->wasRecentlyCreated == true) {
|
||||
$status->reblogs_count = $status->shares()->count();
|
||||
$status->save();
|
||||
SharePipeline::dispatch($share);
|
||||
}
|
||||
|
||||
|
|
@ -1971,13 +1969,17 @@ class ApiV1Controller extends Controller
|
|||
}
|
||||
}
|
||||
|
||||
Status::whereProfileId($user->profile_id)
|
||||
$reblog = Status::whereProfileId($user->profile_id)
|
||||
->whereReblogOfId($status->id)
|
||||
->delete();
|
||||
$status->reblogs_count = $status->shares()->count();
|
||||
$status->save();
|
||||
->first();
|
||||
|
||||
StatusService::del($status->id);
|
||||
if(!$reblog) {
|
||||
$resource = new Fractal\Resource\Item($status, new StatusTransformer());
|
||||
$res = $this->fractal->createData($resource)->toArray();
|
||||
return response()->json($res);
|
||||
}
|
||||
|
||||
UndoSharePipeline::dispatch($reblog);
|
||||
$resource = new Fractal\Resource\Item($status, new StatusTransformer());
|
||||
$res = $this->fractal->createData($resource)->toArray();
|
||||
return response()->json($res);
|
||||
|
|
@ -2029,6 +2031,7 @@ class ApiV1Controller extends Controller
|
|||
->map(function ($i) {
|
||||
return StatusService::get($i);
|
||||
})
|
||||
->filter()
|
||||
->all();
|
||||
|
||||
return response()->json($res, 200, [], JSON_PRETTY_PRINT);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ use App\Jobs\ImageOptimizePipeline\ImageOptimize;
|
|||
use App\Jobs\StatusPipeline\NewStatusPipeline;
|
||||
use App\Jobs\StatusPipeline\StatusDelete;
|
||||
use App\Jobs\SharePipeline\SharePipeline;
|
||||
use App\Jobs\SharePipeline\UndoSharePipeline;
|
||||
use App\AccountInterstitial;
|
||||
use App\Media;
|
||||
use App\Profile;
|
||||
|
|
@ -237,21 +238,20 @@ class StatusController extends Controller
|
|||
|
||||
$user = Auth::user();
|
||||
$profile = $user->profile;
|
||||
$status = Status::withCount('shares')
|
||||
->whereIn('scope', ['public', 'unlisted'])
|
||||
$status = Status::whereIn('scope', ['public', 'unlisted'])
|
||||
->findOrFail($request->input('item'));
|
||||
|
||||
$count = $status->shares()->count();
|
||||
$count = $status->reblogs_count;
|
||||
|
||||
$exists = Status::whereProfileId(Auth::user()->profile->id)
|
||||
->whereReblogOfId($status->id)
|
||||
->count();
|
||||
if ($exists !== 0) {
|
||||
->exists();
|
||||
if ($exists == true) {
|
||||
$shares = Status::whereProfileId(Auth::user()->profile->id)
|
||||
->whereReblogOfId($status->id)
|
||||
->get();
|
||||
foreach ($shares as $share) {
|
||||
$share->delete();
|
||||
UndoSharePipeline::dispatch($share);
|
||||
$count--;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -264,11 +264,6 @@ class StatusController extends Controller
|
|||
SharePipeline::dispatch($share);
|
||||
}
|
||||
|
||||
if($count >= 0) {
|
||||
$status->reblogs_count = $count;
|
||||
$status->save();
|
||||
}
|
||||
|
||||
Cache::forget('status:'.$status->id.':sharedby:userid:'.$user->id);
|
||||
StatusService::del($status->id);
|
||||
|
||||
|
|
|
|||
|
|
@ -47,8 +47,9 @@ class SharePipeline implements ShouldQueue
|
|||
public function handle()
|
||||
{
|
||||
$status = $this->status;
|
||||
$parent = $this->status->parent();
|
||||
$actor = $status->profile;
|
||||
$target = $status->parent()->profile;
|
||||
$target = $parent->profile;
|
||||
|
||||
if ($status->uri !== null) {
|
||||
// Ignore notifications to remote statuses
|
||||
|
|
@ -60,19 +61,22 @@ class SharePipeline implements ShouldQueue
|
|||
->whereAction('share')
|
||||
->whereItemId($status->reblog_of_id)
|
||||
->whereItemType('App\Status')
|
||||
->count();
|
||||
->exists();
|
||||
|
||||
if ($target->id === $status->profile_id) {
|
||||
if($target->id === $status->profile_id) {
|
||||
$this->remoteAnnounceDeliver();
|
||||
return true;
|
||||
}
|
||||
|
||||
if( $exists !== 0) {
|
||||
if($exists === true) {
|
||||
return true;
|
||||
}
|
||||
|
||||
$this->remoteAnnounceDeliver();
|
||||
|
||||
$parent->reblogs_count = $parent->shares()->count();
|
||||
$parent->save();
|
||||
|
||||
try {
|
||||
$notification = new Notification;
|
||||
$notification->profile_id = $target->id;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
<?php
|
||||
|
||||
namespace App\Jobs\SharePipeline;
|
||||
|
||||
use Cache, Log;
|
||||
use Illuminate\Support\Facades\Redis;
|
||||
use App\{Status, Notification};
|
||||
use Illuminate\Bus\Queueable;
|
||||
use Illuminate\Contracts\Queue\ShouldQueue;
|
||||
use Illuminate\Foundation\Bus\Dispatchable;
|
||||
use Illuminate\Queue\InteractsWithQueue;
|
||||
use Illuminate\Queue\SerializesModels;
|
||||
use League\Fractal;
|
||||
use League\Fractal\Serializer\ArraySerializer;
|
||||
use App\Transformer\ActivityPub\Verb\UndoAnnounce;
|
||||
use GuzzleHttp\{Pool, Client, Promise};
|
||||
use App\Util\ActivityPub\HttpSignature;
|
||||
use App\Services\StatusService;
|
||||
|
||||
class UndoSharePipeline implements ShouldQueue
|
||||
{
|
||||
use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
|
||||
protected $status;
|
||||
public $deleteWhenMissingModels = true;
|
||||
|
||||
public function __construct(Status $status)
|
||||
{
|
||||
$this->status = $status;
|
||||
}
|
||||
|
||||
public function handle()
|
||||
{
|
||||
$status = $this->status;
|
||||
$actor = $status->profile;
|
||||
$parent = $status->parent();
|
||||
$target = $status->parent()->profile;
|
||||
|
||||
if ($status->uri !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if($target->domain === null) {
|
||||
Notification::whereProfileId($target->id)
|
||||
->whereActorId($status->profile_id)
|
||||
->whereAction('share')
|
||||
->whereItemId($status->reblog_of_id)
|
||||
->whereItemType('App\Status')
|
||||
->delete();
|
||||
}
|
||||
|
||||
$this->remoteAnnounceDeliver();
|
||||
|
||||
if($parent->reblogs_count > 0) {
|
||||
$parent->reblogs_count = $parent->reblogs_count - 1;
|
||||
$parent->save();
|
||||
StatusService::del($parent->id);
|
||||
}
|
||||
|
||||
$status->delete();
|
||||
|
||||
return 1;
|
||||
}
|
||||
|
||||
public function remoteAnnounceDeliver()
|
||||
{
|
||||
if(config_cache('federation.activitypub.enabled') == false) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
$status = $this->status;
|
||||
$profile = $status->profile;
|
||||
|
||||
$fractal = new Fractal\Manager();
|
||||
$fractal->setSerializer(new ArraySerializer());
|
||||
$resource = new Fractal\Resource\Item($status, new UndoAnnounce());
|
||||
$activity = $fractal->createData($resource)->toArray();
|
||||
|
||||
$audience = $status->profile->getAudienceInbox();
|
||||
|
||||
if(empty($audience) || $status->scope != 'public') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
$payload = json_encode($activity);
|
||||
|
||||
$client = new Client([
|
||||
'timeout' => config('federation.activitypub.delivery.timeout')
|
||||
]);
|
||||
|
||||
$requests = function($audience) use ($client, $activity, $profile, $payload) {
|
||||
foreach($audience as $url) {
|
||||
$headers = HttpSignature::sign($profile, $url, $activity);
|
||||
yield function() use ($client, $url, $headers, $payload) {
|
||||
return $client->postAsync($url, [
|
||||
'curl' => [
|
||||
CURLOPT_HTTPHEADER => $headers,
|
||||
CURLOPT_POSTFIELDS => $payload,
|
||||
CURLOPT_HEADER => true
|
||||
]
|
||||
]);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
$pool = new Pool($client, $requests($audience), [
|
||||
'concurrency' => config('federation.activitypub.delivery.concurrency'),
|
||||
'fulfilled' => function ($response, $index) {
|
||||
},
|
||||
'rejected' => function ($reason, $index) {
|
||||
}
|
||||
]);
|
||||
|
||||
$promise = $pool->promise();
|
||||
|
||||
$promise->wait();
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,11 +5,11 @@
|
|||
"/js/activity.js": "/js/activity.js?id=4a842807331f87a15e7f",
|
||||
"/js/admin.js": "/js/admin.js?id=8d48022b71fa67e40d80",
|
||||
"/js/app.js": "/js/app.js?id=21e5dee579887e5192ab",
|
||||
"/css/app.css": "/css/app.css?id=b8654ac6bc3bc7bdc2b0",
|
||||
"/css/appdark.css": "/css/appdark.css?id=896508476c4e64509930",
|
||||
"/css/admin.css": "/css/admin.css?id=409b537774a11ce7fab1",
|
||||
"/css/landing.css": "/css/landing.css?id=037442572722dee7e8f5",
|
||||
"/css/quill.css": "/css/quill.css?id=711b2150d518816d6112",
|
||||
"/css/app.css": "/css/app.css?id=971a30d5afae596e727b",
|
||||
"/css/appdark.css": "/css/appdark.css?id=ac5773cf0b2a5f4c4c66",
|
||||
"/css/admin.css": "/css/admin.css?id=ef822512ab2cfacef881",
|
||||
"/css/landing.css": "/css/landing.css?id=a1d4925de5ed2e6a8caf",
|
||||
"/css/quill.css": "/css/quill.css?id=ece45380f676947dd7f8",
|
||||
"/js/collectioncompose.js": "/js/collectioncompose.js?id=6678ddbea8c68875f830",
|
||||
"/js/collections.js": "/js/collections.js?id=bdd652ffb9754adf81aa",
|
||||
"/js/components.js": "/js/components.js?id=7bd6746b7213ee1cfa07",
|
||||
|
|
@ -21,15 +21,15 @@
|
|||
"/js/hashtag.js": "/js/hashtag.js?id=8137c9aeac44cd972dbc",
|
||||
"/js/loops.js": "/js/loops.js?id=ae34b77c4cfe1824f5a0",
|
||||
"/js/mode-dot.js": "/js/mode-dot.js?id=dd9c87024fbaa8e75ac4",
|
||||
"/js/network-timeline.js": "/js/network-timeline.js?id=df34e2f507a52792ad03",
|
||||
"/js/network-timeline.js": "/js/network-timeline.js?id=b54c63e1f92840790974",
|
||||
"/js/profile.js": "/js/profile.js?id=e0365f377fb6c574fda4",
|
||||
"/js/profile-directory.js": "/js/profile-directory.js?id=e63d5f2c6f2d5710a8bd",
|
||||
"/js/quill.js": "/js/quill.js?id=4769f11fc9a6c32dde50",
|
||||
"/js/rempos.js": "/js/rempos.js?id=f528b9382369fdc5b3c3",
|
||||
"/js/rempro.js": "/js/rempro.js?id=25dc0589246b60f678ce",
|
||||
"/js/search.js": "/js/search.js?id=33a848ea20efb0c4f71f",
|
||||
"/js/status.js": "/js/status.js?id=ce91385c7214bfa91c29",
|
||||
"/js/status.js": "/js/status.js?id=aba698844a6047af53cf",
|
||||
"/js/story-compose.js": "/js/story-compose.js?id=e93760b2356732faecf8",
|
||||
"/js/theme-monokai.js": "/js/theme-monokai.js?id=85f0af57479412548223",
|
||||
"/js/timeline.js": "/js/timeline.js?id=eb4a49daa9c2b010b854"
|
||||
"/js/timeline.js": "/js/timeline.js?id=1b004d944cfd1ff1ba69"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1100,7 +1100,7 @@
|
|||
$('.mobile-footer-spacer').attr('style', 'display:none !important');
|
||||
$('.mobile-footer').attr('style', 'display:none !important');
|
||||
this.currentLayout = 'comments';
|
||||
window.history.pushState({}, '', status.url);
|
||||
window.history.pushState({}, '', this.statusUrl(status));
|
||||
return;
|
||||
},
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,412 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container p-0 overflow-hidden">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 offset-md-3">
|
||||
<div class="card shadow-none border" style="height:100vh;">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<div
|
||||
@click="commentNavigateBack(status.id)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<i class="fas fa-chevron-left fa-lg px-2"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-weight-bold mb-0 h5">Comments</p>
|
||||
</div>
|
||||
<div>
|
||||
<i class="fas fa-cog fa-lg text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="overflow-y: auto !important">
|
||||
<div class="media">
|
||||
<img :src="status.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
|
||||
<div class="media-body">
|
||||
<p class="d-flex justify-content-between align-items-top mb-0" style="overflow-y: hidden;">
|
||||
<span class="mr-2" style="font-size: 13px;">
|
||||
<a class="text-dark font-weight-bold mr-1 text-break" :href="status.account.url" v-bind:title="status.account.username">{{trimCaption(status.account.username,15)}}</a>
|
||||
<span class="text-break comment-body" style="word-break: break-all;" v-html="status.content"></span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="postCommentsLoader text-center py-2">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="postCommentsContainer d-none">
|
||||
<p v-if="replies.length" class="mb-1 text-center load-more-link my-4">
|
||||
<a
|
||||
href="#"
|
||||
class="text-dark"
|
||||
title="Load more comments"
|
||||
@click.prevent="loadMoreComments"
|
||||
>
|
||||
<svg class="bi bi-plus-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="font-size:2em;"> <path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H4a.5.5 0 010-1h3.5V4a.5.5 0 01.5-.5z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M7.5 8a.5.5 0 01.5-.5h4a.5.5 0 010 1H8.5V12a.5.5 0 01-1 0V8z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/></svg>
|
||||
</a>
|
||||
</p>
|
||||
<div v-if="replies.length" v-for="(reply, index) in replies" class="pb-3 media" :key="'tl' + reply.id + '_' + index">
|
||||
<img :src="reply.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
|
||||
<div class="media-body">
|
||||
<div v-if="reply.sensitive == true">
|
||||
<span class="py-3">
|
||||
<a class="text-dark font-weight-bold mr-3" style="font-size: 13px;" :href="reply.account.url" v-bind:title="reply.account.username">{{trimCaption(reply.account.username,15)}}</a>
|
||||
<span class="text-break" style="font-size: 13px;">
|
||||
<span class="font-italic text-muted">This comment may contain sensitive material</span>
|
||||
<span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
|
||||
<span class="mr-3" style="font-size: 13px;">
|
||||
<a class="text-dark font-weight-bold mr-1 text-break" :href="reply.account.url" v-bind:title="reply.account.username">{{trimCaption(reply.account.username,15)}}</a>
|
||||
<span class="text-break comment-body" style="word-break: break-all;" v-html="reply.content"></span>
|
||||
</span>
|
||||
<span class="text-right" style="min-width: 30px;">
|
||||
<span v-on:click="likeReply(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
|
||||
<span class="pl-2 text-lighter cursor-pointer" @click="ctxMenu(reply)">
|
||||
<span class="fas fa-ellipsis-v text-lighter"></span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(reply.created_at)" :href="reply.url"></a>
|
||||
<span v-if="reply.favourites_count" class="text-muted comment-reaction font-weight-bold mr-3 small">{{reply.favourites_count == 1 ? '1 like' : reply.favourites_count + ' likes'}}</span>
|
||||
<span class="small text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index, true)">Reply</span>
|
||||
</p>
|
||||
<div v-if="reply.reply_count > 0" class="cursor-pointer pb-2" v-on:click="toggleReplies(reply)">
|
||||
<span class="show-reply-bar"></span>
|
||||
<span class="comment-reaction small font-weight-bold">{{reply.thread ? 'Hide' : 'View'}} Replies ({{reply.reply_count}})</span>
|
||||
</div>
|
||||
<div v-if="reply.thread == true" class="comment-thread">
|
||||
<div v-for="(s, sindex) in reply.replies" class="py-1 media" :key="'cr' + s.id + '_' + index">
|
||||
<img :src="s.account.avatar" class="rounded-circle border mr-3" width="25px" height="25px">
|
||||
<div class="media-body">
|
||||
<p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
|
||||
<span class="mr-2" style="font-size: 13px;">
|
||||
<a class="text-dark font-weight-bold mr-1" :href="s.account.url" :title="s.account.username">{{s.account.username}}</a>
|
||||
<span class="text-break comment-body" style="word-break: break-all;" v-html="s.content"></span>
|
||||
</span>
|
||||
<span>
|
||||
<span v-on:click="likeReply(s, $event)"><i v-bind:class="[s.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(s.created_at)" :href="s.url"></a>
|
||||
<span v-if="s.favourites_count" class="text-muted comment-reaction font-weight-bold mr-3">{{s.favourites_count == 1 ? '1 like' : s.favourites_count + ' likes'}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!replies.length">
|
||||
<p class="text-center text-muted font-weight-bold small">No comments yet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer mb-3">
|
||||
<div class="align-middle d-flex">
|
||||
<img
|
||||
:src="profile.avatar"
|
||||
width="36"
|
||||
height="36"
|
||||
class="rounded-circle border mr-3">
|
||||
<textarea
|
||||
class="form-control rounded-pill"
|
||||
name="comment"
|
||||
placeholder="Add a comment…"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
rows="1"
|
||||
maxlength="0"
|
||||
style="resize: none;overflow-y: hidden"
|
||||
@click="replyFocus(status)">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<context-menu
|
||||
ref="cMenu"
|
||||
:status="ctxMenuStatus"
|
||||
:profile="profile"
|
||||
/>
|
||||
|
||||
<b-modal ref="replyModal"
|
||||
id="ctx-reply-modal"
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
:title-html="status.account ? 'Reply to <span class=text-dark>' + status.account.username + '</span>' : ''"
|
||||
title-tag="p"
|
||||
title-class="font-weight-bold text-muted"
|
||||
size="md"
|
||||
body-class="p-2 rounded">
|
||||
<div>
|
||||
<vue-tribute :options="tributeSettings">
|
||||
<textarea
|
||||
class="form-control replyModalTextarea"
|
||||
rows="4"
|
||||
v-model="replyText">
|
||||
</textarea>
|
||||
</vue-tribute>
|
||||
|
||||
<div class="border-top border-bottom my-2">
|
||||
<ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
|
||||
<li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="pl-2 small text-muted font-weight-bold text-monospace">
|
||||
<span :class="[replyText.length > config.uploader.max_caption_length ? 'text-danger':'text-dark']">{{replyText.length > config.uploader.max_caption_length ? config.uploader.max_caption_length - replyText.length : replyText.length}}</span>/{{config.uploader.max_caption_length}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="custom-control custom-switch mr-3">
|
||||
<input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw">
|
||||
<label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-sm py-2 px-4 lead text-uppercase font-weight-bold" v-on:click.prevent="commentSubmit(status, $event)" :disabled="replyText.length == 0">
|
||||
{{replySending == true ? 'POSTING' : 'POST'}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import ContextMenu from './ContextMenu.vue';
|
||||
|
||||
export default {
|
||||
props: ['status', 'profile'],
|
||||
|
||||
components: {
|
||||
"context-menu": ContextMenu
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
ids: [],
|
||||
config: window.App.config,
|
||||
tributeSettings: {
|
||||
collection: [
|
||||
{
|
||||
trigger: '@',
|
||||
menuShowMinLength: 2,
|
||||
values: (function (text, cb) {
|
||||
let url = '/api/compose/v0/search/mention';
|
||||
axios.get(url, { params: { q: text }})
|
||||
.then(res => {
|
||||
cb(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
{
|
||||
trigger: '#',
|
||||
menuShowMinLength: 2,
|
||||
values: (function (text, cb) {
|
||||
let url = '/api/compose/v0/search/hashtag';
|
||||
axios.get(url, { params: { q: text }})
|
||||
.then(res => {
|
||||
cb(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
]
|
||||
},
|
||||
replies: [],
|
||||
replyId: null,
|
||||
replyText: '',
|
||||
replyNsfw: false,
|
||||
replySending: false,
|
||||
pagination: {},
|
||||
ctxMenuStatus: false,
|
||||
emoji: window.App.util.emoji
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.fetchComments();
|
||||
},
|
||||
|
||||
methods: {
|
||||
commentNavigateBack(id) {
|
||||
$('nav').show();
|
||||
$('footer').show();
|
||||
$('.mobile-footer-spacer').attr('style', 'display:block');
|
||||
$('.mobile-footer').attr('style', 'display:block');
|
||||
this.$emit('current-layout', 'feed');
|
||||
|
||||
let path = '/';
|
||||
window.history.pushState({}, '', path);
|
||||
},
|
||||
|
||||
trimCaption(caption, len = 60) {
|
||||
return _.truncate(caption, {
|
||||
length: len
|
||||
});
|
||||
},
|
||||
|
||||
replyFocus(e, index, prependUsername = false) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
this.redirect('/login?next=' + encodeURIComponent(window.location.pathname));
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.status.comments_disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.replyToIndex = index;
|
||||
this.replyingToId = e.id;
|
||||
this.replyingToUsername = e.account.username;
|
||||
this.reply_to_profile_id = e.account.id;
|
||||
let username = e.account.local ? '@' + e.account.username + ' '
|
||||
: '@' + e.account.acct + ' ';
|
||||
if(prependUsername == true) {
|
||||
this.replyText = username;
|
||||
}
|
||||
this.$refs.replyModal.show();
|
||||
setTimeout(function() {
|
||||
$('.replyModalTextarea').focus();
|
||||
}, 500);
|
||||
},
|
||||
|
||||
commentSubmit(status, $event) {
|
||||
this.replySending = true;
|
||||
let id = status.id;
|
||||
let comment = this.replyText;
|
||||
let limit = this.config.uploader.max_caption_length;
|
||||
if(comment.length > limit) {
|
||||
this.replySending = false;
|
||||
swal('Comment Too Long', 'Please make sure your comment is '+limit+' characters or less.', 'error');
|
||||
return;
|
||||
}
|
||||
axios.post('/i/comment', {
|
||||
item: id,
|
||||
comment: comment,
|
||||
sensitive: this.replyNsfw
|
||||
}).then(res => {
|
||||
this.replyText = '';
|
||||
this.replies.push(res.data.entity);
|
||||
this.$refs.replyModal.hide();
|
||||
});
|
||||
this.replySending = false;
|
||||
},
|
||||
|
||||
timeAgo(ts) {
|
||||
return App.util.format.timeAgo(ts);
|
||||
},
|
||||
|
||||
fetchComments() {
|
||||
console.log('Fetching comments...');
|
||||
let url = '/api/v2/comments/'+this.status.account.id+'/status/'+this.status.id;
|
||||
axios.get(url)
|
||||
.then(res => {
|
||||
this.replies = res.data.data;
|
||||
this.pagination = res.data.meta.pagination;
|
||||
}).catch(error => {
|
||||
if(!error.response) {
|
||||
$('.postCommentsLoader .lds-ring')
|
||||
.attr('style','width:100%')
|
||||
.addClass('pt-4 font-weight-bold text-muted')
|
||||
.text('An error occurred, cannot fetch comments. Please try again later.');
|
||||
} else {
|
||||
switch(error.response.status) {
|
||||
case 401:
|
||||
$('.postCommentsLoader .lds-ring')
|
||||
.attr('style','width:100%')
|
||||
.addClass('pt-4 font-weight-bold text-muted')
|
||||
.text('Please login to view.');
|
||||
break;
|
||||
|
||||
default:
|
||||
$('.postCommentsLoader .lds-ring')
|
||||
.attr('style','width:100%')
|
||||
.addClass('pt-4 font-weight-bold text-muted')
|
||||
.text('An error occurred, cannot fetch comments. Please try again later.');
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
loadMoreComments() {
|
||||
if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
|
||||
$('.load-more-link').addClass('d-none');
|
||||
return;
|
||||
}
|
||||
$('.load-more-link').addClass('d-none');
|
||||
$('.postCommentsLoader').removeClass('d-none');
|
||||
let next = this.pagination.links.next;
|
||||
axios.get(next)
|
||||
.then(response => {
|
||||
let self = this;
|
||||
let res = response.data.data;
|
||||
$('.postCommentsLoader').addClass('d-none');
|
||||
for(let i=0; i < res.length; i++) {
|
||||
this.replies.unshift(res[i]);
|
||||
}
|
||||
this.pagination = response.data.meta.pagination;
|
||||
$('.load-more-link').removeClass('d-none');
|
||||
});
|
||||
},
|
||||
|
||||
likeReply(status, $event) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
swal('Login', 'Please login to perform this action.', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
axios.post('/i/like', {
|
||||
item: status.id
|
||||
}).then(res => {
|
||||
status.favourites_count = res.data.count;
|
||||
if(status.favourited == true) {
|
||||
status.favourited = false;
|
||||
} else {
|
||||
status.favourited = true;
|
||||
}
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong, please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
ctxMenu(status) {
|
||||
this.ctxMenuStatus = status;
|
||||
this.$refs.cMenu.open();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
.emoji-reactions .nav-item {
|
||||
font-size: 1.2rem;
|
||||
padding: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.emoji-reactions::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,588 @@
|
|||
<template>
|
||||
<div class="modal-stack">
|
||||
<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="status && status.account.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
|
||||
<div v-if="status && status.account.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div> -->
|
||||
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">View Post</div>
|
||||
<!-- <div v-if="status && status.local == true && !status.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
|
||||
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div> -->
|
||||
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div>
|
||||
<div v-if="status && profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
|
||||
<div v-if="status && status.account.id != profile.id" class="list-group-item rounded cursor-pointer text-danger" @click="ctxMenuReportPost()">Report</div>
|
||||
<div v-if="status && (profile.is_admin || profile.id == status.account.id)" class="list-group-item rounded cursor-pointer text-danger" @click="deletePost(status)">Delete</div>
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxModModal"
|
||||
id="ctx-mod-modal"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded">
|
||||
<div class="list-group text-center">
|
||||
<p class="py-2 px-3 mb-0">
|
||||
<div class="text-center font-weight-bold text-danger">Moderation Tools</div>
|
||||
<div class="small text-center text-muted">Select one of the following options</div>
|
||||
</p>
|
||||
<div class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'unlist')">Unlist from Timelines</div>
|
||||
<div v-if="status.sensitive" class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'remcw')">Remove Content Warning</div>
|
||||
<div v-else class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'addcw')">Add Content Warning</div>
|
||||
<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxModOtherMenuShow()">Other</div> -->
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxModOtherModal"
|
||||
id="ctx-mod-other-modal"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded">
|
||||
<div class="list-group text-center">
|
||||
<p class="py-2 px-3 mb-0">
|
||||
<div class="text-center font-weight-bold text-danger">Moderation Tools</div>
|
||||
<div class="small text-center text-muted">Select one of the following options</div>
|
||||
</p>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Unlist Posts</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Moderation Log</div>
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModOtherMenuClose()">Cancel</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxShareModal"
|
||||
id="ctx-share-modal"
|
||||
title="Share"
|
||||
hide-footer
|
||||
hide-header
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded text-center">
|
||||
<div class="list-group-item rounded cursor-pointer" @click="shareStatus(status, $event)">{{status.reblogged ? 'Unshare' : 'Share'}} to Followers</div>
|
||||
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
|
||||
<div v-if="status && status.local == true && !status.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
|
||||
<!-- <div class="list-group-item rounded cursor-pointer border-top-0">Email</div>
|
||||
<div class="list-group-item rounded cursor-pointer">Facebook</div>
|
||||
<div class="list-group-item rounded cursor-pointer">Mastodon</div>
|
||||
<div class="list-group-item rounded cursor-pointer">Pinterest</div>
|
||||
<div class="list-group-item rounded cursor-pointer">Pixelfed</div>
|
||||
<div class="list-group-item rounded cursor-pointer">Twitter</div>
|
||||
<div class="list-group-item rounded cursor-pointer">VK</div> -->
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxEmbedModal"
|
||||
id="ctx-embed-modal"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="md"
|
||||
body-class="p-2 rounded">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control disabled text-monospace" rows="8" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
|
||||
</div>
|
||||
<div class="form-group pl-2 d-flex justify-content-center">
|
||||
<div class="form-check mr-3">
|
||||
<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowCaption" :disabled="ctxEmbedCompactMode == true">
|
||||
<label class="form-check-label font-weight-light">
|
||||
Show Caption
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mr-3">
|
||||
<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowLikes" :disabled="ctxEmbedCompactMode == true">
|
||||
<label class="form-check-label font-weight-light">
|
||||
Show Likes
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" v-model="ctxEmbedCompactMode">
|
||||
<label class="form-check-label font-weight-light">
|
||||
Compact Mode
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
|
||||
<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxReport"
|
||||
id="ctx-report"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded">
|
||||
<p class="py-2 px-3 mb-0">
|
||||
<div class="text-center font-weight-bold text-danger">Report</div>
|
||||
<div class="small text-center text-muted">Select one of the following options</div>
|
||||
</p>
|
||||
<div class="list-group text-center">
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('spam')">Spam</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('sensitive')">Sensitive Content</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('abusive')">Abusive or Harmful</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="openCtxReportOtherMenu()">Other</div>
|
||||
<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportMenuGoBack()">Go Back</div> -->
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportMenuGoBack()">Cancel</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxReportOther"
|
||||
id="ctx-report-other"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded">
|
||||
<p class="py-2 px-3 mb-0">
|
||||
<div class="text-center font-weight-bold text-danger">Report</div>
|
||||
<div class="small text-center text-muted">Select one of the following options</div>
|
||||
</p>
|
||||
<div class="list-group text-center">
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('underage')">Underage Account</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('copyright')">Copyright Infringement</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('impersonation')">Impersonation</div>
|
||||
<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('scam')">Scam or Fraud</div>
|
||||
<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('terrorism')">Terrorism Related</div> -->
|
||||
<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('other')">Other or Not listed</div> -->
|
||||
<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportOtherMenuGoBack()">Go Back</div> -->
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportOtherMenuGoBack()">Cancel</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="ctxConfirm"
|
||||
id="ctx-confirm"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded">
|
||||
<div class="d-flex align-items-center justify-content-center py-3">
|
||||
<div>{{ this.confirmModalTitle }}</div>
|
||||
</div>
|
||||
<div class="d-flex border-top btn-group btn-group-block rounded-0" role="group">
|
||||
<button type="button" class="btn btn-outline-lighter border-left-0 border-top-0 border-bottom-0 border-right py-2" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalCancel()">Cancel</button>
|
||||
<button type="button" class="btn btn-outline-lighter border-0" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalConfirm()">Confirm</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: [
|
||||
'status',
|
||||
'profile'
|
||||
],
|
||||
|
||||
data() {
|
||||
return {
|
||||
ctxMenuStatus: false,
|
||||
ctxMenuRelationship: false,
|
||||
ctxEmbedPayload: false,
|
||||
copiedEmbed: false,
|
||||
replySending: false,
|
||||
ctxEmbedShowCaption: true,
|
||||
ctxEmbedShowLikes: false,
|
||||
ctxEmbedCompactMode: false,
|
||||
confirmModalTitle: 'Are you sure?',
|
||||
confirmModalIdentifer: null,
|
||||
confirmModalType: false,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
ctxEmbedShowCaption: function (n,o) {
|
||||
if(n == true) {
|
||||
this.ctxEmbedCompactMode = false;
|
||||
}
|
||||
let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
|
||||
this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
|
||||
},
|
||||
ctxEmbedShowLikes: function (n,o) {
|
||||
if(n == true) {
|
||||
this.ctxEmbedCompactMode = false;
|
||||
}
|
||||
let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
|
||||
this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
|
||||
},
|
||||
ctxEmbedCompactMode: function (n,o) {
|
||||
if(n == true) {
|
||||
this.ctxEmbedShowCaption = false;
|
||||
this.ctxEmbedShowLikes = false;
|
||||
}
|
||||
let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
|
||||
this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open() {
|
||||
this.ctxMenu();
|
||||
},
|
||||
|
||||
ctxMenu() {
|
||||
this.ctxMenuStatus = this.status;
|
||||
this.ctxEmbedPayload = window.App.util.embed.post(this.status.url);
|
||||
if(this.status.account.id == this.profile.id) {
|
||||
this.ctxMenuRelationship = false;
|
||||
this.$refs.ctxModal.show();
|
||||
} else {
|
||||
axios.get('/api/pixelfed/v1/accounts/relationships', {
|
||||
params: {
|
||||
'id[]': this.status.account.id
|
||||
}
|
||||
}).then(res => {
|
||||
this.ctxMenuRelationship = res.data[0];
|
||||
this.$refs.ctxModal.show();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
closeCtxMenu() {
|
||||
this.copiedEmbed = false;
|
||||
this.ctxMenuStatus = false;
|
||||
this.ctxMenuRelationship = false;
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxReport.hide();
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.closeModals();
|
||||
},
|
||||
|
||||
ctxMenuCopyLink() {
|
||||
let status = this.ctxMenuStatus;
|
||||
navigator.clipboard.writeText(status.url);
|
||||
this.closeModals();
|
||||
return;
|
||||
},
|
||||
|
||||
ctxMenuGoToPost() {
|
||||
let status = this.ctxMenuStatus;
|
||||
window.location.href = this.statusUrl(status);
|
||||
this.closeCtxMenu();
|
||||
return;
|
||||
},
|
||||
|
||||
ctxMenuFollow() {
|
||||
let id = this.ctxMenuStatus.account.id;
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
let username = this.ctxMenuStatus.account.acct;
|
||||
this.closeCtxMenu();
|
||||
setTimeout(function() {
|
||||
swal('Follow successful!', 'You are now following ' + username, 'success');
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
ctxMenuUnfollow() {
|
||||
let id = this.ctxMenuStatus.account.id;
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
let username = this.ctxMenuStatus.account.acct;
|
||||
if(this.scope == 'home') {
|
||||
this.feed = this.feed.filter(s => {
|
||||
return s.account.id != this.ctxMenuStatus.account.id;
|
||||
});
|
||||
}
|
||||
this.closeCtxMenu();
|
||||
setTimeout(function() {
|
||||
swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
ctxMenuReportPost() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxReport.show();
|
||||
return;
|
||||
},
|
||||
|
||||
ctxMenuEmbed() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxEmbedModal.show();
|
||||
},
|
||||
|
||||
ctxMenuShare() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxShareModal.show();
|
||||
},
|
||||
|
||||
closeCtxShareMenu() {
|
||||
this.$refs.ctxShareModal.hide();
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
ctxCopyEmbed() {
|
||||
navigator.clipboard.writeText(this.ctxEmbedPayload);
|
||||
this.ctxEmbedShowCaption = true;
|
||||
this.ctxEmbedShowLikes = false;
|
||||
this.ctxEmbedCompactMode = false;
|
||||
this.$refs.ctxEmbedModal.hide();
|
||||
},
|
||||
|
||||
ctxModMenuShow() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxModModal.show();
|
||||
},
|
||||
|
||||
ctxModOtherMenuShow() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxModModal.hide();
|
||||
this.$refs.ctxModOtherModal.show();
|
||||
},
|
||||
|
||||
ctxModMenu() {
|
||||
this.$refs.ctxModal.hide();
|
||||
},
|
||||
|
||||
ctxModMenuClose() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
ctxModOtherMenuClose() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxModModal.show();
|
||||
},
|
||||
|
||||
formatCount(count) {
|
||||
return App.util.format.count(count);
|
||||
},
|
||||
|
||||
openCtxReportOtherMenu() {
|
||||
let s = this.ctxMenuStatus;
|
||||
this.closeCtxMenu();
|
||||
this.ctxMenuStatus = s;
|
||||
this.$refs.ctxReportOther.show();
|
||||
},
|
||||
|
||||
ctxReportMenuGoBack() {
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.$refs.ctxReport.hide();
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
ctxReportOtherMenuGoBack() {
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxReport.show();
|
||||
},
|
||||
|
||||
sendReport(type) {
|
||||
let id = this.ctxMenuStatus.id;
|
||||
|
||||
swal({
|
||||
'title': 'Confirm Report',
|
||||
'text': 'Are you sure you want to report this post?',
|
||||
'icon': 'warning',
|
||||
'buttons': true,
|
||||
'dangerMode': true
|
||||
}).then((res) => {
|
||||
if(res) {
|
||||
axios.post('/i/report/', {
|
||||
'report': type,
|
||||
'type': 'post',
|
||||
'id': id,
|
||||
}).then(res => {
|
||||
this.closeCtxMenu();
|
||||
swal('Report Sent!', 'We have successfully received your report.', 'success');
|
||||
}).catch(err => {
|
||||
swal('Oops!', 'There was an issue reporting this post.', 'error');
|
||||
})
|
||||
} else {
|
||||
this.closeCtxMenu();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeModals() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxModModal.hide();
|
||||
this.$refs.ctxModOtherModal.hide();
|
||||
this.$refs.ctxShareModal.hide();
|
||||
this.$refs.ctxEmbedModal.hide();
|
||||
this.$refs.ctxReport.hide();
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.$refs.ctxConfirm.hide();
|
||||
},
|
||||
|
||||
openCtxStatusModal() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxStatusModal.show();
|
||||
},
|
||||
|
||||
openConfirmModal() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxConfirm.show();
|
||||
},
|
||||
|
||||
closeConfirmModal() {
|
||||
this.closeModals();
|
||||
this.confirmModalTitle = 'Are you sure?';
|
||||
this.confirmModalType = false;
|
||||
this.confirmModalIdentifer = null;
|
||||
},
|
||||
|
||||
confirmModalConfirm() {
|
||||
switch(this.confirmModalType) {
|
||||
case 'post.delete':
|
||||
axios.post('/i/delete', {
|
||||
type: 'status',
|
||||
item: this.confirmModalIdentifer
|
||||
}).then(res => {
|
||||
this.feed = this.feed.filter(s => {
|
||||
return s.id != this.confirmModalIdentifer;
|
||||
});
|
||||
this.closeConfirmModal();
|
||||
}).catch(err => {
|
||||
this.closeConfirmModal();
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
this.closeConfirmModal();
|
||||
},
|
||||
|
||||
confirmModalCancel() {
|
||||
this.closeConfirmModal();
|
||||
},
|
||||
|
||||
moderatePost(status, action, $event) {
|
||||
let username = status.account.username;
|
||||
let msg = '';
|
||||
let self = this;
|
||||
switch(action) {
|
||||
case 'addcw':
|
||||
msg = 'Are you sure you want to add a content warning to this post?';
|
||||
swal({
|
||||
title: 'Confirm',
|
||||
text: msg,
|
||||
icon: 'warning',
|
||||
buttons: true,
|
||||
dangerMode: true
|
||||
}).then(res => {
|
||||
if(res) {
|
||||
axios.post('/api/v2/moderator/action', {
|
||||
action: action,
|
||||
item_id: status.id,
|
||||
item_type: 'status'
|
||||
}).then(res => {
|
||||
swal('Success', 'Successfully added content warning', 'success');
|
||||
status.sensitive = true;
|
||||
self.ctxModMenuClose();
|
||||
}).catch(err => {
|
||||
swal(
|
||||
'Error',
|
||||
'Something went wrong, please try again later.',
|
||||
'error'
|
||||
);
|
||||
self.ctxModMenuClose();
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'remcw':
|
||||
msg = 'Are you sure you want to remove the content warning on this post?';
|
||||
swal({
|
||||
title: 'Confirm',
|
||||
text: msg,
|
||||
icon: 'warning',
|
||||
buttons: true,
|
||||
dangerMode: true
|
||||
}).then(res => {
|
||||
if(res) {
|
||||
axios.post('/api/v2/moderator/action', {
|
||||
action: action,
|
||||
item_id: status.id,
|
||||
item_type: 'status'
|
||||
}).then(res => {
|
||||
swal('Success', 'Successfully added content warning', 'success');
|
||||
status.sensitive = false;
|
||||
self.ctxModMenuClose();
|
||||
}).catch(err => {
|
||||
swal(
|
||||
'Error',
|
||||
'Something went wrong, please try again later.',
|
||||
'error'
|
||||
);
|
||||
self.ctxModMenuClose();
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'unlist':
|
||||
msg = 'Are you sure you want to unlist this post?';
|
||||
swal({
|
||||
title: 'Confirm',
|
||||
text: msg,
|
||||
icon: 'warning',
|
||||
buttons: true,
|
||||
dangerMode: true
|
||||
}).then(res => {
|
||||
if(res) {
|
||||
axios.post('/api/v2/moderator/action', {
|
||||
action: action,
|
||||
item_id: status.id,
|
||||
item_type: 'status'
|
||||
}).then(res => {
|
||||
this.feed = this.feed.filter(f => {
|
||||
return f.id != status.id;
|
||||
});
|
||||
swal('Success', 'Successfully unlisted post', 'success');
|
||||
self.ctxModMenuClose();
|
||||
}).catch(err => {
|
||||
self.ctxModMenuClose();
|
||||
swal(
|
||||
'Error',
|
||||
'Something went wrong, please try again later.',
|
||||
'error'
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
shareStatus(status, $event) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.closeModals();
|
||||
|
||||
axios.post('/i/share', {
|
||||
item: status.id
|
||||
}).then(res => {
|
||||
status.reblogs_count = res.data.count;
|
||||
status.reblogged = !status.reblogged;
|
||||
if(status.reblogged) {
|
||||
swal('Success', 'You shared this post', 'success');
|
||||
} else {
|
||||
swal('Success', 'You unshared this post', 'success');
|
||||
}
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong, please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,762 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card rounded-0 border-top-0 status-card card-md-rounded-0 shadow-none border">
|
||||
<div v-if="status" class="card-header d-inline-flex align-items-center bg-white">
|
||||
<div>
|
||||
<img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
|
||||
</div>
|
||||
<div class="pl-2">
|
||||
<a class="username font-weight-bold text-dark text-decoration-none text-break" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
|
||||
Loading...
|
||||
</a>
|
||||
<span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;">
|
||||
<i class="fas fa-certificate text-danger fa-stack-1x"></i>
|
||||
<i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:7px;"></i>
|
||||
</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<a v-if="status.place" class="small text-decoration-none text-muted" :href="'/discover/places/'+status.place.id+'/'+status.place.slug" title="Location" data-toggle="tooltip"><i class="fas fa-map-marked-alt"></i> {{status.place.name}}, {{status.place.country}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right" style="flex-grow:1;">
|
||||
<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
|
||||
<span class="fas fa-ellipsis-h text-lighter"></span>
|
||||
<span class="sr-only">Post Menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="postPresenterContainer" style="background: #000;">
|
||||
|
||||
<div v-if="config.ab.top && status.pf_type === 'text'" class="w-100">
|
||||
<div class="w-100 card-img-top border-bottom rounded-0" style="background-image: url(/storage/textimg/bg_1.jpg);background-size: cover;width: 100%;height: 540px;">
|
||||
<div class="w-100 h-100 d-flex justify-content-center align-items-center">
|
||||
<p class="text-center text-break h3 px-5 font-weight-bold" v-html="status.content"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'photo'" class="w-100">
|
||||
<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
||||
<video-presenter :status="status"></video-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
|
||||
<photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'video:album'" class="w-100">
|
||||
<video-album-presenter :status="status"></video-album-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
|
||||
<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-100">
|
||||
<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="config.features.label.covid.enabled && status.label && status.label.covid == true" class="card-body border-top border-bottom py-2 cursor-pointer pr-2" @click="labelRedirect()">
|
||||
<p class="font-weight-bold d-flex justify-content-between align-items-center mb-0">
|
||||
<span>
|
||||
<i class="fas fa-info-circle mr-2"></i>
|
||||
For information about COVID-19, {{config.features.label.covid.org}}
|
||||
</span>
|
||||
<span>
|
||||
<i class="fas fa-chevron-right text-lighter"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="reactions my-1 pb-2">
|
||||
<h3 v-if="status.favourited" class="fas fa-heart text-danger pr-3 m-0 cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
|
||||
<h3 v-else class="far fa-heart pr-3 m-0 like-btn text-dark cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
|
||||
<h3 v-if="!status.comments_disabled" class="far fa-comment text-dark pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
|
||||
<span v-if="status.taggedPeople.length" class="float-right">
|
||||
<span class="font-weight-light small" style="color:#718096">
|
||||
<i class="far fa-user" data-toggle="tooltip" title="Tagged People"></i>
|
||||
<span v-for="(tag, index) in status.taggedPeople" class="mr-n2">
|
||||
<a :href="'/'+tag.username">
|
||||
<img :src="tag.avatar" width="20px" height="20px" class="border rounded-circle" data-toggle="tooltip" :title="'@'+tag.username" alt="Avatar">
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="status.liked_by.username && status.liked_by.username !== profile.username" class="likes mb-1">
|
||||
<span class="like-count">Liked by
|
||||
<a class="font-weight-bold text-dark" :href="status.liked_by.url">{{status.liked_by.username}}</a>
|
||||
<span v-if="status.liked_by.others == true">
|
||||
and <span class="font-weight-bold" v-if="status.liked_by.total_count_pretty">{{status.liked_by.total_count_pretty}}</span> <span class="font-weight-bold">others</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="status.pf_type != 'text'" class="caption">
|
||||
<p v-if="!status.sensitive" class="mb-2 read-more" style="overflow: hidden;">
|
||||
<span class="username font-weight-bold">
|
||||
<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
|
||||
</span>
|
||||
<span class="status-content" v-html="status.content"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="timestamp mt-2">
|
||||
<p class="small text-uppercase mb-0">
|
||||
<a :href="statusUrl(status)" class="text-muted">
|
||||
<timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
|
||||
</a>
|
||||
<div v-if="recommended">
|
||||
<span class="px-1">·</span>
|
||||
<span class="text-muted">Based on popular and trending content</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<context-menu
|
||||
ref="contextMenu"
|
||||
:status="status"
|
||||
:profile="profile"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import ContextMenu from './ContextMenu.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
status: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
recommended: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
"context-menu": ContextMenu
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
config: window.App.config,
|
||||
profile: {},
|
||||
loading: true,
|
||||
replies: [],
|
||||
replyId: null,
|
||||
lightboxMedia: false,
|
||||
showSuggestions: true,
|
||||
showReadMore: true,
|
||||
replyStatus: {},
|
||||
replyText: '',
|
||||
replyNsfw: false,
|
||||
emoji: window.App.util.emoji,
|
||||
ctxMenuStatus: false,
|
||||
ctxMenuRelationship: false,
|
||||
ctxEmbedPayload: false,
|
||||
copiedEmbed: false,
|
||||
replySending: false,
|
||||
ctxEmbedShowCaption: true,
|
||||
ctxEmbedShowLikes: false,
|
||||
ctxEmbedCompactMode: false,
|
||||
confirmModalTitle: 'Are you sure?',
|
||||
confirmModalIdentifer: null,
|
||||
confirmModalType: false,
|
||||
tributeSettings: {
|
||||
collection: [
|
||||
{
|
||||
trigger: '@',
|
||||
menuShowMinLength: 2,
|
||||
values: (function (text, cb) {
|
||||
let url = '/api/compose/v0/search/mention';
|
||||
axios.get(url, { params: { q: text }})
|
||||
.then(res => {
|
||||
cb(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
{
|
||||
trigger: '#',
|
||||
menuShowMinLength: 2,
|
||||
values: (function (text, cb) {
|
||||
let url = '/api/compose/v0/search/hashtag';
|
||||
axios.get(url, { params: { q: text }})
|
||||
.then(res => {
|
||||
cb(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.profile = window._sharedData.curUser;
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatCount(count) {
|
||||
return App.util.format.count(count);
|
||||
},
|
||||
|
||||
statusUrl(status) {
|
||||
if(status.local == true) {
|
||||
return status.url;
|
||||
}
|
||||
|
||||
return '/i/web/post/_/' + status.account.id + '/' + status.id;
|
||||
},
|
||||
|
||||
profileUrl(status) {
|
||||
if(status.local == true) {
|
||||
return status.account.url;
|
||||
}
|
||||
|
||||
return '/i/web/profile/_/' + status.account.id;
|
||||
},
|
||||
|
||||
timestampFormat(timestamp) {
|
||||
let ts = new Date(timestamp);
|
||||
return ts.toDateString() + ' ' + ts.toLocaleTimeString();
|
||||
},
|
||||
|
||||
statusCardUsernameFormat(status) {
|
||||
if(status.account.local == true) {
|
||||
return status.account.username;
|
||||
}
|
||||
|
||||
let fmt = window.App.config.username.remote.format;
|
||||
let txt = window.App.config.username.remote.custom;
|
||||
let usr = status.account.username;
|
||||
let dom = document.createElement('a');
|
||||
dom.href = status.account.url;
|
||||
dom = dom.hostname;
|
||||
|
||||
switch(fmt) {
|
||||
case '@':
|
||||
return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
|
||||
break;
|
||||
|
||||
case 'from':
|
||||
return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
|
||||
break;
|
||||
|
||||
case 'custom':
|
||||
return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
|
||||
break;
|
||||
|
||||
default:
|
||||
return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
lightbox(status) {
|
||||
window.location.href = status.media_attachments[0].url;
|
||||
},
|
||||
|
||||
labelRedirect(type) {
|
||||
let url = '/i/redirect?url=' + encodeURI(this.config.features.label.covid.url);
|
||||
window.location.href = url;
|
||||
},
|
||||
|
||||
likeStatus(status, event) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
let count = status.favourites_count;
|
||||
status.favourited = !status.favourited;
|
||||
axios.post('/i/like', {
|
||||
item: status.id
|
||||
}).then(res => {
|
||||
status.favourites_count = res.data.count;
|
||||
}).catch(err => {
|
||||
status.favourited = !status.favourited;
|
||||
status.favourites_count = count;
|
||||
swal('Error', 'Something went wrong, please try again later.', 'error');
|
||||
});
|
||||
window.navigator.vibrate(200);
|
||||
if(status.favourited) {
|
||||
setTimeout(function() {
|
||||
event.target.classList.add('animate__animated', 'animate__bounce');
|
||||
},100);
|
||||
}
|
||||
},
|
||||
|
||||
// ctxMenu() {
|
||||
// this.$emit('ctx-menu', this.status);
|
||||
// },
|
||||
|
||||
commentFocus(status, $event) {
|
||||
this.$emit('comment-focus', status);
|
||||
},
|
||||
|
||||
muteProfile(status) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
axios.post('/i/mute', {
|
||||
type: 'user',
|
||||
item: status.account.id
|
||||
}).then(res => {
|
||||
this.feed = this.feed.filter(s => s.account.id !== status.account.id);
|
||||
swal('Success', 'You have successfully muted ' + status.account.acct, 'success');
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
blockProfile(status) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
axios.post('/i/block', {
|
||||
type: 'user',
|
||||
item: status.account.id
|
||||
}).then(res => {
|
||||
this.feed = this.feed.filter(s => s.account.id !== status.account.id);
|
||||
swal('Success', 'You have successfully blocked ' + status.account.acct, 'success');
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
deletePost(status) {
|
||||
if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(window.confirm('Are you sure you want to delete this post?') == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
axios.post('/i/delete', {
|
||||
type: 'status',
|
||||
item: status.id
|
||||
}).then(res => {
|
||||
this.$emit('status-delete', status.id);
|
||||
this.closeModals();
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
commentSubmit(status, $event) {
|
||||
this.replySending = true;
|
||||
let id = status.id;
|
||||
let comment = this.replyText;
|
||||
let limit = this.config.uploader.max_caption_length;
|
||||
if(comment.length > limit) {
|
||||
this.replySending = false;
|
||||
swal('Comment Too Long', 'Please make sure your comment is '+limit+' characters or less.', 'error');
|
||||
return;
|
||||
}
|
||||
axios.post('/i/comment', {
|
||||
item: id,
|
||||
comment: comment,
|
||||
sensitive: this.replyNsfw
|
||||
}).then(res => {
|
||||
this.replyText = '';
|
||||
this.replies.push(res.data.entity);
|
||||
this.$refs.replyModal.hide();
|
||||
});
|
||||
this.replySending = false;
|
||||
},
|
||||
|
||||
moderatePost(status, action, $event) {
|
||||
let username = status.account.username;
|
||||
let msg = '';
|
||||
let self = this;
|
||||
switch(action) {
|
||||
case 'addcw':
|
||||
msg = 'Are you sure you want to add a content warning to this post?';
|
||||
swal({
|
||||
title: 'Confirm',
|
||||
text: msg,
|
||||
icon: 'warning',
|
||||
buttons: true,
|
||||
dangerMode: true
|
||||
}).then(res => {
|
||||
if(res) {
|
||||
axios.post('/api/v2/moderator/action', {
|
||||
action: action,
|
||||
item_id: status.id,
|
||||
item_type: 'status'
|
||||
}).then(res => {
|
||||
swal('Success', 'Successfully added content warning', 'success');
|
||||
status.sensitive = true;
|
||||
self.ctxModMenuClose();
|
||||
}).catch(err => {
|
||||
swal(
|
||||
'Error',
|
||||
'Something went wrong, please try again later.',
|
||||
'error'
|
||||
);
|
||||
self.ctxModMenuClose();
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'remcw':
|
||||
msg = 'Are you sure you want to remove the content warning on this post?';
|
||||
swal({
|
||||
title: 'Confirm',
|
||||
text: msg,
|
||||
icon: 'warning',
|
||||
buttons: true,
|
||||
dangerMode: true
|
||||
}).then(res => {
|
||||
if(res) {
|
||||
axios.post('/api/v2/moderator/action', {
|
||||
action: action,
|
||||
item_id: status.id,
|
||||
item_type: 'status'
|
||||
}).then(res => {
|
||||
swal('Success', 'Successfully added content warning', 'success');
|
||||
status.sensitive = false;
|
||||
self.ctxModMenuClose();
|
||||
}).catch(err => {
|
||||
swal(
|
||||
'Error',
|
||||
'Something went wrong, please try again later.',
|
||||
'error'
|
||||
);
|
||||
self.ctxModMenuClose();
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'unlist':
|
||||
msg = 'Are you sure you want to unlist this post?';
|
||||
swal({
|
||||
title: 'Confirm',
|
||||
text: msg,
|
||||
icon: 'warning',
|
||||
buttons: true,
|
||||
dangerMode: true
|
||||
}).then(res => {
|
||||
if(res) {
|
||||
axios.post('/api/v2/moderator/action', {
|
||||
action: action,
|
||||
item_id: status.id,
|
||||
item_type: 'status'
|
||||
}).then(res => {
|
||||
this.feed = this.feed.filter(f => {
|
||||
return f.id != status.id;
|
||||
});
|
||||
swal('Success', 'Successfully unlisted post', 'success');
|
||||
self.ctxModMenuClose();
|
||||
}).catch(err => {
|
||||
self.ctxModMenuClose();
|
||||
swal(
|
||||
'Error',
|
||||
'Something went wrong, please try again later.',
|
||||
'error'
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
followAction(status) {
|
||||
let id = status.account.id;
|
||||
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
this.feed.forEach(s => {
|
||||
if(s.account.id == id) {
|
||||
s.account.relationship.following = !s.account.relationship.following;
|
||||
}
|
||||
});
|
||||
|
||||
let username = status.account.acct;
|
||||
|
||||
if(status.account.relationship.following) {
|
||||
swal('Follow successful!', 'You are now following ' + username, 'success');
|
||||
} else {
|
||||
swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
if(err.response.data.message) {
|
||||
swal('Error', err.response.data.message, 'error');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
owner(status) {
|
||||
return this.profile.id === status.account.id;
|
||||
},
|
||||
|
||||
admin() {
|
||||
return this.profile.is_admin == true;
|
||||
},
|
||||
|
||||
ownerOrAdmin(status) {
|
||||
return this.owner(status) || this.admin();
|
||||
},
|
||||
|
||||
ctxMenu() {
|
||||
this.$refs.contextMenu.open();
|
||||
// let status = this.status;
|
||||
// this.ctxMenuStatus = status;
|
||||
// this.ctxEmbedPayload = window.App.util.embed.post(status.url);
|
||||
// if(status.account.id == this.profile.id) {
|
||||
// this.ctxMenuRelationship = false;
|
||||
// this.$refs.ctxModal.show();
|
||||
// } else {
|
||||
// axios.get('/api/pixelfed/v1/accounts/relationships', {
|
||||
// params: {
|
||||
// 'id[]': status.account.id
|
||||
// }
|
||||
// }).then(res => {
|
||||
// this.ctxMenuRelationship = res.data[0];
|
||||
// this.$refs.ctxModal.show();
|
||||
// });
|
||||
// }
|
||||
},
|
||||
|
||||
closeCtxMenu(truncate) {
|
||||
this.copiedEmbed = false;
|
||||
this.ctxMenuStatus = false;
|
||||
this.ctxMenuRelationship = false;
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxReport.hide();
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.closeModals();
|
||||
},
|
||||
|
||||
ctxMenuCopyLink() {
|
||||
let status = this.ctxMenuStatus;
|
||||
navigator.clipboard.writeText(status.url);
|
||||
this.closeModals();
|
||||
return;
|
||||
},
|
||||
|
||||
ctxMenuGoToPost() {
|
||||
let status = this.ctxMenuStatus;
|
||||
window.location.href = this.statusUrl(status);
|
||||
this.closeCtxMenu();
|
||||
return;
|
||||
},
|
||||
|
||||
ctxMenuFollow() {
|
||||
let id = this.ctxMenuStatus.account.id;
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
let username = this.ctxMenuStatus.account.acct;
|
||||
this.closeCtxMenu();
|
||||
setTimeout(function() {
|
||||
swal('Follow successful!', 'You are now following ' + username, 'success');
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
ctxMenuUnfollow() {
|
||||
let id = this.ctxMenuStatus.account.id;
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
let username = this.ctxMenuStatus.account.acct;
|
||||
if(this.scope == 'home') {
|
||||
this.feed = this.feed.filter(s => {
|
||||
return s.account.id != this.ctxMenuStatus.account.id;
|
||||
});
|
||||
}
|
||||
this.closeCtxMenu();
|
||||
setTimeout(function() {
|
||||
swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
ctxMenuReportPost() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxReport.show();
|
||||
return;
|
||||
},
|
||||
|
||||
ctxMenuEmbed() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxEmbedModal.show();
|
||||
},
|
||||
|
||||
ctxMenuShare() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxShareModal.show();
|
||||
},
|
||||
|
||||
closeCtxShareMenu() {
|
||||
this.$refs.ctxShareModal.hide();
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
ctxCopyEmbed() {
|
||||
navigator.clipboard.writeText(this.ctxEmbedPayload);
|
||||
this.ctxEmbedShowCaption = true;
|
||||
this.ctxEmbedShowLikes = false;
|
||||
this.ctxEmbedCompactMode = false;
|
||||
this.$refs.ctxEmbedModal.hide();
|
||||
},
|
||||
|
||||
ctxModMenuShow() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxModModal.show();
|
||||
},
|
||||
|
||||
ctxModOtherMenuShow() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxModModal.hide();
|
||||
this.$refs.ctxModOtherModal.show();
|
||||
},
|
||||
|
||||
ctxModMenu() {
|
||||
this.$refs.ctxModal.hide();
|
||||
},
|
||||
|
||||
ctxModMenuClose() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
ctxModOtherMenuClose() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxModModal.show();
|
||||
},
|
||||
|
||||
formatCount(count) {
|
||||
return App.util.format.count(count);
|
||||
},
|
||||
|
||||
openCtxReportOtherMenu() {
|
||||
let s = this.ctxMenuStatus;
|
||||
this.closeCtxMenu();
|
||||
this.ctxMenuStatus = s;
|
||||
this.$refs.ctxReportOther.show();
|
||||
},
|
||||
|
||||
ctxReportMenuGoBack() {
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.$refs.ctxReport.hide();
|
||||
this.$refs.ctxModal.show();
|
||||
},
|
||||
|
||||
ctxReportOtherMenuGoBack() {
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxReport.show();
|
||||
},
|
||||
|
||||
sendReport(type) {
|
||||
let id = this.ctxMenuStatus.id;
|
||||
|
||||
swal({
|
||||
'title': 'Confirm Report',
|
||||
'text': 'Are you sure you want to report this post?',
|
||||
'icon': 'warning',
|
||||
'buttons': true,
|
||||
'dangerMode': true
|
||||
}).then((res) => {
|
||||
if(res) {
|
||||
axios.post('/i/report/', {
|
||||
'report': type,
|
||||
'type': 'post',
|
||||
'id': id,
|
||||
}).then(res => {
|
||||
this.closeCtxMenu();
|
||||
swal('Report Sent!', 'We have successfully received your report.', 'success');
|
||||
}).catch(err => {
|
||||
swal('Oops!', 'There was an issue reporting this post.', 'error');
|
||||
})
|
||||
} else {
|
||||
this.closeCtxMenu();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeModals() {
|
||||
this.$refs.ctxModal.hide();
|
||||
this.$refs.ctxModModal.hide();
|
||||
this.$refs.ctxModOtherModal.hide();
|
||||
this.$refs.ctxShareModal.hide();
|
||||
this.$refs.ctxEmbedModal.hide();
|
||||
this.$refs.ctxReport.hide();
|
||||
this.$refs.ctxReportOther.hide();
|
||||
this.$refs.ctxConfirm.hide();
|
||||
this.$refs.lightboxModal.hide();
|
||||
this.$refs.replyModal.hide();
|
||||
this.$refs.ctxStatusModal.hide();
|
||||
},
|
||||
|
||||
openCtxStatusModal() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxStatusModal.show();
|
||||
},
|
||||
|
||||
openConfirmModal() {
|
||||
this.closeModals();
|
||||
this.$refs.ctxConfirm.show();
|
||||
},
|
||||
|
||||
closeConfirmModal() {
|
||||
this.closeModals();
|
||||
this.confirmModalTitle = 'Are you sure?';
|
||||
this.confirmModalType = false;
|
||||
this.confirmModalIdentifer = null;
|
||||
},
|
||||
|
||||
confirmModalConfirm() {
|
||||
switch(this.confirmModalType) {
|
||||
case 'post.delete':
|
||||
axios.post('/i/delete', {
|
||||
type: 'status',
|
||||
item: this.confirmModalIdentifer
|
||||
}).then(res => {
|
||||
this.feed = this.feed.filter(s => {
|
||||
return s.id != this.confirmModalIdentifer;
|
||||
});
|
||||
this.closeConfirmModal();
|
||||
}).catch(err => {
|
||||
this.closeConfirmModal();
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
this.closeConfirmModal();
|
||||
},
|
||||
|
||||
confirmModalCancel() {
|
||||
this.closeConfirmModal();
|
||||
},
|
||||
|
||||
timeAgo(ts) {
|
||||
return App.util.format.timeAgo(ts);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue