mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-09 16:24:51 +00:00
Add remote posts and profiles
This commit is contained in:
Daniel Supernault
parent
9d7a04e89b
commit
95bce31e62
9 changed files with 1479 additions and 22 deletions
|
|
@ -343,27 +343,6 @@ class InternalApiController extends Controller
|
|||
return response()->json($res);
|
||||
}
|
||||
|
||||
public function remoteProfile(Request $request, $id)
|
||||
{
|
||||
$profile = Profile::whereNull('status')
|
||||
->whereNotNull('domain')
|
||||
->findOrFail($id);
|
||||
|
||||
$settings = [
|
||||
'crawlable' => false,
|
||||
'following' => [
|
||||
'count' => true,
|
||||
'list' => false
|
||||
],
|
||||
'followers' => [
|
||||
'count' => true,
|
||||
'list' => false
|
||||
]
|
||||
];
|
||||
|
||||
return view('profile.show', compact('profile', 'settings'));
|
||||
}
|
||||
|
||||
public function accountStatuses(Request $request, $id)
|
||||
{
|
||||
$this->validate($request, [
|
||||
|
|
@ -440,6 +419,15 @@ class InternalApiController extends Controller
|
|||
return response()->json($res);
|
||||
}
|
||||
|
||||
public function remoteProfile(Request $request, $id)
|
||||
{
|
||||
$profile = Profile::whereNull('status')
|
||||
->findOrFail($id);
|
||||
$user = Auth::user();
|
||||
|
||||
return view('profile.remote', compact('profile', 'user'));
|
||||
}
|
||||
|
||||
public function remoteStatus(Request $request, $profileId, $statusId)
|
||||
{
|
||||
$user = Profile::whereNull('status')
|
||||
|
|
@ -450,7 +438,7 @@ class InternalApiController extends Controller
|
|||
->whereNull('reblog_of_id')
|
||||
->whereVisibility('public')
|
||||
->findOrFail($statusId);
|
||||
$template = $status->in_reply_to_id ? 'status.reply' : 'status.show';
|
||||
$template = $status->in_reply_to_id ? 'status.reply' : 'status.remote';
|
||||
return view($template, compact('user', 'status'));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1018
resources/assets/js/components/RemotePost.vue
Normal file
1018
resources/assets/js/components/RemotePost.vue
Normal file
File diff suppressed because it is too large
Load diff
375
resources/assets/js/components/RemoteProfile.vue
Normal file
375
resources/assets/js/components/RemoteProfile.vue
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
|
||||
<div class="container">
|
||||
<p class="text-center font-weight-bold">You are blocking this account</p>
|
||||
<p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
|
||||
<img src="/img/pixelfed-icon-grey.svg" class="">
|
||||
</div>
|
||||
<div v-if="!loading && !warning" class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 pt-5" style="margin-top:40px;">
|
||||
<div class="card shadow-none border">
|
||||
<div class="card-header p-0 m-0">
|
||||
<img v-if="profile.header_bg" :src="profile.header_bg" style="width: 100%; height: 140px; object-fit: cover;">
|
||||
<div v-else class="bg-primary" style="width: 100%;height: 140px;"></div>
|
||||
</div>
|
||||
<div class="card-body pb-0">
|
||||
<div class="mt-n5 mb-3">
|
||||
<img class="rounded-circle p-1 border mt-n4 bg-white shadow" :src="profile.avatar" width="90px" height="90px;">
|
||||
<span class="float-right mt-n1">
|
||||
<span>
|
||||
<button v-if="relationship && relationship.following == false" class="btn btn-outline-light py-0 px-3 mt-n1" style="font-size:13px; font-weight: 500;" @click="followProfile();">Follow</button>
|
||||
<button v-if="relationship && relationship.following == true" class="btn btn-outline-light py-0 px-3 mt-n1" style="font-size:13px; font-weight: 500;" @click="unfollowProfile();">Unfollow</button>
|
||||
</span>
|
||||
<span class="ml-3">
|
||||
<button class="btn btn-outline-light btn-sm mt-n1" @click="showCtxMenu()" style="padding-top:2px;padding-bottom:1px;">
|
||||
<i class="fas fa-cog cursor-pointer" style="font-size:13px;"></i>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="pl-2 h4 font-weight-bold mb-1">{{profile.display_name}}</p>
|
||||
<p class="pl-2 font-weight-bold mb-1 text-muted">{{profile.acct}}</p>
|
||||
<p class="pl-2 text-muted small" v-html="profile.note"></p>
|
||||
<p class="pl-2 text-muted small d-flex justify-content-between">
|
||||
<span>
|
||||
<span class="font-weight-bold text-dark">{{profile.statuses_count}}</span>
|
||||
<span>Posts</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="font-weight-bold text-dark">{{profile.following_count}}</span>
|
||||
<span>Following</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="font-weight-bold text-dark">{{profile.followers_count}}</span>
|
||||
<span>Followers</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 pt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-2">
|
||||
<div class="custom-control custom-switch">
|
||||
<label :class="layoutType ? ' pr-5 font-weight-bold text-lighter' : 'pr-5 font-weight-bold text-dark'" @click="layoutType = !layoutType">Grid</label>
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="layoutType">
|
||||
<label :class="!layoutType ? 'pl-2 custom-control-label font-weight-bold text-lighter' : 'pl-2 custom-control-label font-weight-bold text-dark'" for="customSwitch1">Feed</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="layoutType == false" class="col-12 col-md-4 mb-3 d-flex justify-content-center align-items-center" v-for="(post, index) in feed" :key="'remprop' + index">
|
||||
<a :href="remotePostUrl(post)">
|
||||
<img :src="post.thumb" class="img-fluid rounded border">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="layoutType == true" class="col-12 mb-2" v-for="(status, index) in feed" :key="'remprop' + index">
|
||||
<div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border cursor-pointer">
|
||||
<div class="card-header d-inline-flex align-items-center bg-white">
|
||||
<img v-bind:src="profile.avatar" width="38px" height="38px" style="border-radius: 38px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
|
||||
<div class="pl-2">
|
||||
<span class="username font-weight-bold text-dark">{{profile.username}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body p-0">
|
||||
<a :href="status.url">
|
||||
<img v-once :src="status.thumb" class="w-100 h-100">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="caption">
|
||||
<p class="mb-2 read-more" style="overflow: hidden;">
|
||||
<span class="username font-weight-bold">
|
||||
<bdi><span class="text-dark">{{profile.username}}</span></bdi>
|
||||
</span>
|
||||
<span class="status-content" v-html="status.caption.html"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="timestamp mt-2">
|
||||
<p class="small text-uppercase mb-0">
|
||||
<a :href="remotePostUrl(status)" class="text-muted">
|
||||
<timeago :datetime="status.timestamp" :auto-update="90" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.timestamp)" v-b-tooltip.hover.bottom></timeago>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 mt-4">
|
||||
<p class="text-center mb-0 px-0"><button class="btn btn-outline-primary btn-block font-weight-bold">Load More</button></p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-modal ref="visitorContextMenu"
|
||||
id="visitor-context-menu"
|
||||
hide-footer
|
||||
hide-header
|
||||
centered
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0">
|
||||
<div class="list-group" v-if="relationship">
|
||||
<div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
|
||||
Copy Link
|
||||
</div>
|
||||
<div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
|
||||
Mute
|
||||
</div>
|
||||
<div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
|
||||
Unmute
|
||||
</div>
|
||||
<div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
|
||||
Report User
|
||||
</div>
|
||||
<div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
|
||||
Block
|
||||
</div>
|
||||
<div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
|
||||
Unblock
|
||||
</div>
|
||||
|
||||
<div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
||||
Close
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: [
|
||||
'profile-id',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
id: [],
|
||||
user: false,
|
||||
profile: {},
|
||||
feed: [],
|
||||
min_id: null,
|
||||
max_id: null,
|
||||
loading: true,
|
||||
owner: false,
|
||||
layoutType: false,
|
||||
relationship: null,
|
||||
warning: false,
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.fetchRelationships();
|
||||
this.fetchProfile();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
fetchProfile() {
|
||||
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
|
||||
this.user = res.data
|
||||
});
|
||||
axios.get('/api/pixelfed/v1/accounts/' + this.profileId)
|
||||
.then(res => {
|
||||
this.profile = res.data;
|
||||
this.fetchPosts();
|
||||
});
|
||||
},
|
||||
|
||||
fetchPosts() {
|
||||
let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
|
||||
axios.get(apiUrl, {
|
||||
params: {
|
||||
only_media: true,
|
||||
min_id: 1,
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
let data = res.data
|
||||
.filter(status => status.media_attachments.length > 0)
|
||||
.map(status => {
|
||||
return {
|
||||
id: status.id,
|
||||
caption: {
|
||||
text: status.content_text,
|
||||
html: status.content
|
||||
},
|
||||
count: {
|
||||
likes: status.favourites_count,
|
||||
shares: status.reblogs_count,
|
||||
comments: status.reply_count
|
||||
},
|
||||
thumb: status.media_attachments[0].preview_url,
|
||||
media: status.media_attachments,
|
||||
timestamp: status.created_at,
|
||||
type: status.pf_type,
|
||||
url: status.url
|
||||
}
|
||||
});
|
||||
let ids = data.map(status => status.id);
|
||||
this.ids = ids;
|
||||
this.min_id = Math.max(...ids);
|
||||
this.max_id = Math.min(...ids);
|
||||
this.feed = data;
|
||||
this.loading = false;
|
||||
//this.loadSponsor();
|
||||
}).catch(err => {
|
||||
swal('Oops, something went wrong',
|
||||
'Please release the page.',
|
||||
'error');
|
||||
});
|
||||
},
|
||||
|
||||
fetchRelationships() {
|
||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
axios.get('/api/pixelfed/v1/accounts/relationships', {
|
||||
params: {
|
||||
'id[]': this.profileId
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.data.length) {
|
||||
this.relationship = res.data[0];
|
||||
if(res.data[0].blocking == true) {
|
||||
this.loading = false;
|
||||
this.warning = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
postPreviewUrl(post) {
|
||||
return 'background: url("'+post.thumb+'");background-size:cover';
|
||||
},
|
||||
|
||||
timestampFormat(timestamp) {
|
||||
let ts = new Date(timestamp);
|
||||
return ts.toDateString() + ' ' + ts.toLocaleTimeString();
|
||||
},
|
||||
|
||||
remoteProfileUrl(profile) {
|
||||
return '/i/web/profile/_/' + profile.id;
|
||||
},
|
||||
|
||||
remotePostUrl(status) {
|
||||
return '/i/web/post/_/' + this.profile.id + '/' + status.id;
|
||||
},
|
||||
|
||||
followProfile() {
|
||||
axios.post('/i/follow', {
|
||||
item: this.profileId
|
||||
}).then(res => {
|
||||
swal('Followed', 'You are now following ' + this.profile.username +'!', 'success');
|
||||
this.relationship.following = true;
|
||||
}).catch(err => {
|
||||
swal('Oops!', 'Something went wrong, please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
unfollowProfile() {
|
||||
axios.post('/i/follow', {
|
||||
item: this.profileId
|
||||
}).then(res => {
|
||||
swal('Unfollowed', 'You are no longer following ' + this.profile.username +'.', 'warning');
|
||||
this.relationship.following = false;
|
||||
}).catch(err => {
|
||||
swal('Oops!', 'Something went wrong, please try again later.', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
showCtxMenu() {
|
||||
this.$refs.visitorContextMenu.show();
|
||||
},
|
||||
|
||||
copyProfileLink() {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
},
|
||||
|
||||
muteProfile() {
|
||||
let id = this.profileId;
|
||||
axios.post('/i/mute', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
this.fetchRelationships();
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
swal('Success', 'You have successfully muted ' + this.profile.acct, 'success');
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
},
|
||||
|
||||
unmuteProfile() {
|
||||
let id = this.profileId;
|
||||
axios.post('/i/unmute', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
this.fetchRelationships();
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
swal('Success', 'You have successfully unmuted ' + this.profile.acct, 'success');
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
},
|
||||
|
||||
blockProfile() {
|
||||
let id = this.profileId;
|
||||
axios.post('/i/block', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
this.warning = true;
|
||||
this.fetchRelationships();
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
swal('Success', 'You have successfully blocked ' + this.profile.acct, 'success');
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
},
|
||||
|
||||
unblockProfile() {
|
||||
let id = this.profileId;
|
||||
axios.post('/i/unblock', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
this.warning = false;
|
||||
this.fetchRelationships();
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
swal('Success', 'You have successfully unblocked ' + this.profile.acct, 'success');
|
||||
}).catch(err => {
|
||||
swal('Error', 'Something went wrong. Please try again later.', 'error');
|
||||
});
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
},
|
||||
|
||||
reportProfile() {
|
||||
window.location.href = '/l/i/report?type=profile&id=' + this.profileId;
|
||||
this.$refs.visitorContextMenu.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/css" scoped>
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1050px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
resources/assets/js/rempos.js
vendored
Normal file
34
resources/assets/js/rempos.js
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
Vue.component(
|
||||
'photo-presenter',
|
||||
require('./components/presenter/PhotoPresenter.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'video-presenter',
|
||||
require('./components/presenter/VideoPresenter.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'photo-album-presenter',
|
||||
require('./components/presenter/PhotoAlbumPresenter.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'video-album-presenter',
|
||||
require('./components/presenter/VideoAlbumPresenter.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'mixed-album-presenter',
|
||||
require('./components/presenter/MixedAlbumPresenter.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'post-menu',
|
||||
require('./components/PostMenu.vue').default
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'remote-post',
|
||||
require('./components/RemotePost.vue').default
|
||||
);
|
||||
4
resources/assets/js/rempro.js
vendored
Normal file
4
resources/assets/js/rempro.js
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
Vue.component(
|
||||
'remote-profile',
|
||||
require('./components/RemoteProfile.vue').default
|
||||
);
|
||||
16
resources/views/profile/remote.blade.php
Normal file
16
resources/views/profile/remote.blade.php
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<remote-profile profile-id="{{$profile->id}}"></remote-profile>
|
||||
@endsection
|
||||
|
||||
@push('meta')
|
||||
<meta name="robots" content="noindex, noimageindex, nofollow, nosnippet, noarchive">
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript" src="{{mix('js/rempro.js')}}"></script>
|
||||
<script type="text/javascript">
|
||||
App.boot();
|
||||
</script>
|
||||
@endpush
|
||||
17
resources/views/status/remote.blade.php
Normal file
17
resources/views/status/remote.blade.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="mt-md-4"></div>
|
||||
<remote-post status-template="{{$status->viewType()}}" status-id="{{$status->id}}" status-username="{{$status->profile->username}}" status-url="{{$status->url()}}" status-profile-url="{{$status->profile->url()}}" status-avatar="{{$status->profile->avatarUrl()}}" status-profile-id="{{$status->profile_id}}" profile-layout="metro"></remote-post>
|
||||
|
||||
|
||||
@endsection
|
||||
|
||||
@push('meta')
|
||||
<meta name="robots" content="noindex, noimageindex, nofollow, nosnippet, noarchive">
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript" src="{{ mix('js/rempos.js') }}"></script>
|
||||
<script type="text/javascript">App.boot()</script>
|
||||
@endpush
|
||||
|
|
@ -263,6 +263,8 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
|
|||
Route::post('stories/viewed', 'StoryController@apiV1Viewed');
|
||||
Route::get('stories/new', 'StoryController@compose');
|
||||
Route::get('my/story', 'StoryController@iRedirect');
|
||||
Route::get('web/profile/_/{id}', 'InternalApiController@remoteProfile');
|
||||
Route::get('web/post/_/{profileId}/{statusid}', 'InternalApiController@remoteStatus');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'account'], function () {
|
||||
|
|
|
|||
3
webpack.mix.js
vendored
3
webpack.mix.js
vendored
|
|
@ -38,6 +38,9 @@ mix.js('resources/assets/js/app.js', 'public/js')
|
|||
// .js('resources/assets/js/direct.js', 'public/js')
|
||||
// .js('resources/assets/js/admin.js', 'public/js')
|
||||
// .js('resources/assets/js/micro.js', 'public/js')
|
||||
.js('resources/assets/js/rempro.js', 'public/js')
|
||||
.js('resources/assets/js/rempos.js', 'public/js')
|
||||
//.js('resources/assets/js/timeline_next.js', 'public/js')
|
||||
|
||||
.extract([
|
||||
'lodash',
|
||||
|
|
|
|||
Loading…
Reference in a new issue