1
0

RemoteProfile.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <div>
  3. <div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
  4. <div class="container">
  5. <p class="text-center font-weight-bold">You are blocking this account</p>
  6. <p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
  7. </div>
  8. </div>
  9. <div v-if="loading" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
  10. <img src="/img/pixelfed-icon-grey.svg" class="">
  11. </div>
  12. <div v-if="!loading && !warning" class="container">
  13. <div class="row">
  14. <div class="col-12 col-md-4 pt-5">
  15. <div class="card shadow-none border">
  16. <div class="card-header p-0 m-0">
  17. <img v-if="profile.header_bg" :src="profile.header_bg" style="width: 100%; height: 140px; object-fit: cover;">
  18. <div v-else class="bg-primary" style="width: 100%;height: 140px;"></div>
  19. </div>
  20. <div class="card-body pb-0">
  21. <div class="mt-n5 mb-3">
  22. <img class="rounded-circle p-1 border mt-n4 bg-white shadow" :src="profile.avatar" width="90px" height="90px;">
  23. <span class="float-right mt-n1">
  24. <span>
  25. <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>
  26. <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>
  27. </span>
  28. <span class="mx-2">
  29. <a :href="'/account/direct/t/' + profile.id" class="btn btn-outline-light btn-sm mt-n1" style="padding-top:2px;padding-bottom:1px;">
  30. <i class="far fa-comment-dots cursor-pointer" style="font-size:13px;"></i>
  31. </a>
  32. </span>
  33. <span>
  34. <button class="btn btn-outline-light btn-sm mt-n1" @click="showCtxMenu()" style="padding-top:2px;padding-bottom:1px;">
  35. <i class="fas fa-cog cursor-pointer" style="font-size:13px;"></i>
  36. </button>
  37. </span>
  38. </span>
  39. </div>
  40. <p class="pl-2 h4 font-weight-bold mb-1">{{profile.display_name}}</p>
  41. <p class="pl-2 font-weight-bold mb-2"><a class="text-muted" :href="profile.url" @click.prevent="urlRedirectHandler(profile.url)">{{profile.acct}}</a></p>
  42. <p class="pl-2 text-muted small d-flex justify-content-between">
  43. <span>
  44. <span class="font-weight-bold text-dark">{{profile.statuses_count}}</span>
  45. <span>Posts</span>
  46. </span>
  47. <span>
  48. <span class="font-weight-bold text-dark">{{profile.following_count}}</span>
  49. <span>Following</span>
  50. </span>
  51. <span>
  52. <span class="font-weight-bold text-dark">{{profile.followers_count}}</span>
  53. <span>Followers</span>
  54. </span>
  55. </p>
  56. <p class="pl-2 text-muted small pt-2" v-html="profile.note"></p>
  57. </div>
  58. </div>
  59. <p class="small text-lighter p-2">Last updated: <time :datetime="profile.last_fetched_at">{{timeAgo(profile.last_fetched_at, 'ago')}}</time></p>
  60. </div>
  61. <div class="col-12 col-md-8 pt-5">
  62. <div class="row">
  63. <div class="col-12 mb-2" v-for="(status, index) in feed" :key="'remprop' + index">
  64. <div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border cursor-pointer">
  65. <div class="card-header d-inline-flex align-items-center bg-white">
  66. <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'">
  67. <div class="pl-2">
  68. <span class="username font-weight-bold text-dark">{{profile.username}}
  69. </span>
  70. </div>
  71. <div class="text-right" style="flex-grow:1;">
  72. <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
  73. <span class="fas fa-ellipsis-h text-lighter"></span>
  74. </button>
  75. </div>
  76. </div>
  77. <div class="card-body p-0">
  78. <div v-if="status.sensitive == true">
  79. <details class="details-animated" @click="status.sensitive = false;">
  80. <summary>
  81. <p class="mb-0 lead font-weight-bold">{{status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
  82. <p class="font-weight-light">(click to show)</p>
  83. </summary>
  84. <a :href="remotePostUrl(status)">
  85. <img v-once :src="status.thumb" class="w-100 h-100">
  86. </a>
  87. </details>
  88. </div>
  89. <div v-else>
  90. <a :href="remotePostUrl(status)">
  91. <img v-once :src="status.thumb" class="w-100 h-100">
  92. </a>
  93. <button v-if="status.cw == true && status.sensitive == false" class="btn btn-block btn-primary font-weight-bold rounded-0" @click="status.sensitive = true;">Hide Media</button>
  94. </div>
  95. </div>
  96. <div class="card-body">
  97. <div class="caption">
  98. <p class="mb-2 read-more" style="overflow: hidden;">
  99. <span class="username font-weight-bold">
  100. <bdi><span class="text-dark">{{profile.username}}</span></bdi>
  101. </span>
  102. <span class="status-content" v-html="status.caption.html"></span>
  103. </p>
  104. </div>
  105. <div class="timestamp mt-2">
  106. <p class="small text-uppercase mb-0">
  107. <a :href="remotePostUrl(status)" class="text-muted">
  108. <timeago :datetime="status.timestamp" :auto-update="90" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.timestamp)" v-b-tooltip.hover.bottom></timeago>
  109. </a>
  110. </p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <div v-if="feed.length == 0" class="col-12 mb-2">
  116. <div class="d-flex justify-content-center align-items-center bg-white border rounded" style="height:60vh;">
  117. <div class="text-center">
  118. <p class="lead">We haven't seen any posts from this account.</p>
  119. </div>
  120. </div>
  121. </div>
  122. <div v-else class="col-12 mt-4">
  123. <p class="text-center mb-0 px-0"><button class="btn btn-outline-primary btn-block font-weight-bold">Load More</button></p>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <b-modal ref="visitorContextMenu"
  129. id="visitor-context-menu"
  130. hide-footer
  131. hide-header
  132. centered
  133. size="sm"
  134. body-class="list-group-flush p-0">
  135. <div class="list-group" v-if="relationship">
  136. <div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
  137. Copy Link
  138. </div>
  139. <div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
  140. Mute
  141. </div>
  142. <div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
  143. Unmute
  144. </div>
  145. <div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
  146. Report User
  147. </div>
  148. <div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
  149. Block
  150. </div>
  151. <div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
  152. Unblock
  153. </div>
  154. <div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
  155. Close
  156. </div>
  157. </div>
  158. </b-modal>
  159. <b-modal ref="ctxModal"
  160. id="ctx-modal"
  161. hide-header
  162. hide-footer
  163. centered
  164. rounded
  165. size="sm"
  166. body-class="list-group-flush p-0 rounded">
  167. <div class="list-group text-center">
  168. <div v-if="ctxMenuStatus && profile.id != profile.id" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuReportPost()">Report inappropriate</div>
  169. <div v-if="ctxMenuStatus && profile.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
  170. <div v-if="ctxMenuStatus && profile.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div>
  171. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">Go to post</div>
  172. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
  173. <div v-if="profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
  174. <div v-if="ctxMenuStatus && (profile.is_admin || profile.id == profile.id)" class="list-group-item rounded cursor-pointer" @click="deletePost(ctxMenuStatus)">Delete</div>
  175. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
  176. </div>
  177. </b-modal>
  178. </div>
  179. </div>
  180. </template>
  181. <script type="text/javascript">
  182. export default {
  183. props: [
  184. 'profile-id',
  185. ],
  186. data() {
  187. return {
  188. id: [],
  189. user: false,
  190. profile: {},
  191. feed: [],
  192. min_id: null,
  193. max_id: null,
  194. loading: true,
  195. owner: false,
  196. layoutType: true,
  197. relationship: null,
  198. warning: false,
  199. ctxMenuStatus: false,
  200. ctxMenuRelationship: false,
  201. fetchingRemotePosts: false,
  202. showMutualFollowers: false
  203. }
  204. },
  205. beforeMount() {
  206. this.fetchRelationships();
  207. this.fetchProfile();
  208. },
  209. methods: {
  210. fetchProfile() {
  211. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  212. this.user = res.data
  213. window._sharedData.curUser = res.data;
  214. window.App.util.navatar();
  215. });
  216. axios.get('/api/pixelfed/v1/accounts/' + this.profileId)
  217. .then(res => {
  218. this.profile = res.data;
  219. this.fetchPosts();
  220. });
  221. },
  222. fetchPosts() {
  223. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  224. axios.get(apiUrl, {
  225. params: {
  226. only_media: true,
  227. min_id: 1,
  228. }
  229. })
  230. .then(res => {
  231. let data = res.data
  232. .filter(status => status.media_attachments.length > 0)
  233. .map(status => {
  234. return {
  235. id: status.id,
  236. caption: {
  237. text: status.content_text,
  238. html: status.content
  239. },
  240. count: {
  241. likes: status.favourites_count,
  242. shares: status.reblogs_count,
  243. comments: status.reply_count
  244. },
  245. thumb: status.media_attachments[0].url,
  246. media: status.media_attachments,
  247. timestamp: status.created_at,
  248. type: status.pf_type,
  249. url: status.url,
  250. sensitive: status.sensitive,
  251. cw: status.sensitive,
  252. spoiler_text: status.spoiler_text
  253. }
  254. });
  255. let ids = data.map(status => status.id);
  256. this.ids = ids;
  257. this.min_id = Math.max(...ids);
  258. this.max_id = Math.min(...ids);
  259. this.feed = data;
  260. this.loading = false;
  261. //this.loadSponsor();
  262. }).catch(err => {
  263. swal('Oops, something went wrong',
  264. 'Please release the page.',
  265. 'error');
  266. });
  267. },
  268. fetchRelationships() {
  269. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  270. return;
  271. }
  272. axios.get('/api/pixelfed/v1/accounts/relationships', {
  273. params: {
  274. 'id[]': this.profileId
  275. }
  276. }).then(res => {
  277. if(res.data.length) {
  278. this.relationship = res.data[0];
  279. if(res.data[0].blocking == true) {
  280. this.loading = false;
  281. this.warning = true;
  282. }
  283. }
  284. });
  285. },
  286. postPreviewUrl(post) {
  287. return 'background: url("'+post.thumb+'");background-size:cover';
  288. },
  289. timestampFormat(timestamp) {
  290. let ts = new Date(timestamp);
  291. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  292. },
  293. remoteProfileUrl(profile) {
  294. return '/i/web/profile/_/' + profile.id;
  295. },
  296. remotePostUrl(status) {
  297. return '/i/web/post/_/' + this.profile.id + '/' + status.id;
  298. },
  299. followProfile() {
  300. axios.post('/i/follow', {
  301. item: this.profileId
  302. }).then(res => {
  303. swal('Followed', 'You are now following ' + this.profile.username +'!', 'success');
  304. this.relationship.following = true;
  305. }).catch(err => {
  306. swal('Oops!', 'Something went wrong, please try again later.', 'error');
  307. });
  308. },
  309. unfollowProfile() {
  310. axios.post('/i/follow', {
  311. item: this.profileId
  312. }).then(res => {
  313. swal('Unfollowed', 'You are no longer following ' + this.profile.username +'.', 'warning');
  314. this.relationship.following = false;
  315. }).catch(err => {
  316. swal('Oops!', 'Something went wrong, please try again later.', 'error');
  317. });
  318. },
  319. showCtxMenu() {
  320. this.$refs.visitorContextMenu.show();
  321. },
  322. copyProfileLink() {
  323. navigator.clipboard.writeText(window.location.href);
  324. this.$refs.visitorContextMenu.hide();
  325. },
  326. muteProfile() {
  327. let id = this.profileId;
  328. axios.post('/i/mute', {
  329. type: 'user',
  330. item: id
  331. }).then(res => {
  332. this.fetchRelationships();
  333. this.$refs.visitorContextMenu.hide();
  334. swal('Success', 'You have successfully muted ' + this.profile.acct, 'success');
  335. }).catch(err => {
  336. swal('Error', 'Something went wrong. Please try again later.', 'error');
  337. });
  338. this.$refs.visitorContextMenu.hide();
  339. },
  340. unmuteProfile() {
  341. let id = this.profileId;
  342. axios.post('/i/unmute', {
  343. type: 'user',
  344. item: id
  345. }).then(res => {
  346. this.fetchRelationships();
  347. this.$refs.visitorContextMenu.hide();
  348. swal('Success', 'You have successfully unmuted ' + this.profile.acct, 'success');
  349. }).catch(err => {
  350. swal('Error', 'Something went wrong. Please try again later.', 'error');
  351. });
  352. this.$refs.visitorContextMenu.hide();
  353. },
  354. blockProfile() {
  355. let id = this.profileId;
  356. axios.post('/i/block', {
  357. type: 'user',
  358. item: id
  359. }).then(res => {
  360. this.warning = true;
  361. this.fetchRelationships();
  362. this.$refs.visitorContextMenu.hide();
  363. swal('Success', 'You have successfully blocked ' + this.profile.acct, 'success');
  364. }).catch(err => {
  365. swal('Error', 'Something went wrong. Please try again later.', 'error');
  366. });
  367. this.$refs.visitorContextMenu.hide();
  368. },
  369. unblockProfile() {
  370. let id = this.profileId;
  371. axios.post('/i/unblock', {
  372. type: 'user',
  373. item: id
  374. }).then(res => {
  375. this.warning = false;
  376. this.fetchRelationships();
  377. this.$refs.visitorContextMenu.hide();
  378. swal('Success', 'You have successfully unblocked ' + this.profile.acct, 'success');
  379. }).catch(err => {
  380. swal('Error', 'Something went wrong. Please try again later.', 'error');
  381. });
  382. this.$refs.visitorContextMenu.hide();
  383. },
  384. reportProfile() {
  385. window.location.href = '/l/i/report?type=profile&id=' + this.profileId;
  386. this.$refs.visitorContextMenu.hide();
  387. },
  388. ctxMenu(status) {
  389. this.ctxMenuStatus = status;
  390. let self = this;
  391. axios.get('/api/pixelfed/v1/accounts/relationships', {
  392. params: {
  393. 'id[]': self.profileId
  394. }
  395. }).then(res => {
  396. self.ctxMenuRelationship = res.data[0];
  397. self.$refs.ctxModal.show();
  398. });
  399. },
  400. closeCtxMenu() {
  401. this.ctxMenuStatus = false;
  402. this.ctxMenuRelationship = false;
  403. this.$refs.ctxModal.hide();
  404. },
  405. ctxMenuCopyLink() {
  406. let status = this.ctxMenuStatus;
  407. navigator.clipboard.writeText(status.url);
  408. this.closeCtxMenu();
  409. return;
  410. },
  411. ctxMenuGoToPost() {
  412. let status = this.ctxMenuStatus;
  413. window.location.href = this.statusUrl(status);
  414. this.closeCtxMenu();
  415. return;
  416. },
  417. statusUrl(status) {
  418. return '/i/web/post/_/' + this.profile.id + '/' + status.id;
  419. },
  420. deletePost(status) {
  421. if(this.user.is_admin == false) {
  422. return;
  423. }
  424. if(window.confirm('Are you sure you want to delete this post?') == false) {
  425. return;
  426. }
  427. axios.post('/i/delete', {
  428. type: 'status',
  429. item: status.id
  430. }).then(res => {
  431. this.feed = this.feed.filter(s => {
  432. return s.id != status.id;
  433. });
  434. this.$refs.ctxModal.hide();
  435. }).catch(err => {
  436. swal('Error', 'Something went wrong. Please try again later.', 'error');
  437. });
  438. },
  439. manuallyFetchRemotePosts($event) {
  440. this.fetchingRemotePosts = true;
  441. event.target.blur();
  442. swal(
  443. 'Fetching Remote Posts',
  444. 'Check back in a few minutes!',
  445. 'info'
  446. );
  447. },
  448. timeAgo(ts, suffix = false) {
  449. if(ts == null) {
  450. return 'never';
  451. }
  452. suffix = suffix ? ' ' + suffix : '';
  453. return App.util.format.timeAgo(ts) + suffix;
  454. },
  455. urlRedirectHandler(url) {
  456. let p = new URL(url);
  457. let path = '';
  458. if(p.hostname == window.location.hostname) {
  459. path = url;
  460. } else {
  461. path = '/i/redirect?url=';
  462. path += encodeURI(url);
  463. }
  464. window.location.href = path;
  465. }
  466. }
  467. }
  468. </script>
  469. <style type="text/css" scoped>
  470. @media (min-width: 1200px) {
  471. .container {
  472. max-width: 1050px;
  473. }
  474. }
  475. </style>