Timeline.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998
  1. <template>
  2. <div class="container" style="">
  3. <div class="row">
  4. <div class="col-md-8 col-lg-8 pt-sm-2 px-0 my-sm-3 timeline order-2 order-md-1">
  5. <div style="padding-top:10px;">
  6. <div v-if="loading" class="text-center">
  7. <div class="spinner-border" role="status">
  8. <span class="sr-only">Loading...</span>
  9. </div>
  10. </div>
  11. <div class="card mb-sm-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
  12. <div class="card-header d-inline-flex align-items-center bg-white">
  13. <img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
  14. <a class="username font-weight-bold pl-2 text-dark" v-bind:href="status.account.url">
  15. {{status.account.username}}
  16. </a>
  17. <div class="text-right" style="flex-grow:1;">
  18. <button class="btn btn-link text-dark no-caret dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
  19. <span class="fas fa-ellipsis-v fa-lg text-muted"></span>
  20. </button>
  21. <div class="dropdown-menu dropdown-menu-right">
  22. <a class="dropdown-item font-weight-bold" :href="status.url">Go to post</a>
  23. <!-- <a class="dropdown-item font-weight-bold" href="#">Share</a>
  24. <a class="dropdown-item font-weight-bold" href="#">Embed</a> -->
  25. <span v-if="statusOwner(status) == false">
  26. <a class="dropdown-item font-weight-bold" :href="reportUrl(status)">Report</a>
  27. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile(status)">Mute Profile</a>
  28. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile(status)">Block Profile</a>
  29. </span>
  30. <span v-if="statusOwner(status) == true">
  31. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  32. </span>
  33. <span v-if="profile.is_admin == true && modes.mod == true">
  34. <div class="dropdown-divider"></div>
  35. <a v-if="!statusOwner(status)" class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  36. <div class="dropdown-divider"></div>
  37. <h6 class="dropdown-header">Mod Tools</h6>
  38. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'autocw')">
  39. <p class="mb-0" data-toggle="tooltip" data-placement="bottom" title="Adds a CW to every post made by this account.">Enforce CW</p>
  40. </a>
  41. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'noautolink')">
  42. <p class="mb-0" title="Do not transform mentions, hashtags or urls into HTML.">No Autolinking</p>
  43. </a>
  44. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'unlisted')">
  45. <p class="mb-0" title="Removes account from public/network timelines.">Unlisted Posts</p>
  46. </a>
  47. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'disable')">
  48. <p class="mb-0" title="Temporarily disable account until next time user log in.">Disable Account</p>
  49. </a>
  50. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'suspend')">
  51. <p class="mb-0" title="This prevents any new interactions, without deleting existing data.">Suspend Account</p>
  52. </a>
  53. </span>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="postPresenterContainer">
  58. <div v-if="status.pf_type === 'photo'" class="w-100">
  59. <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
  60. </div>
  61. <div v-else-if="status.pf_type === 'video'" class="w-100">
  62. <video-presenter :status="status"></video-presenter>
  63. </div>
  64. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  65. <photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
  66. </div>
  67. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  68. <video-album-presenter :status="status"></video-album-presenter>
  69. </div>
  70. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  71. <mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
  72. </div>
  73. <div v-else class="w-100">
  74. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  75. </div>
  76. </div>
  77. <div class="card-body">
  78. <div class="reactions my-1">
  79. <h3 v-bind:class="[status.favourited ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
  80. <h3 v-if="!status.comments_disabled" class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
  81. <h3 v-bind:class="[status.reblogged ? 'far fa-share-square pr-3 m-0 text-primary cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
  82. </div>
  83. <div class="likes font-weight-bold" v-if="expLc(status) == true">
  84. <span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
  85. </div>
  86. <div class="caption">
  87. <p class="mb-2 read-more" style="overflow: hidden;">
  88. <span class="username font-weight-bold">
  89. <bdi><a class="text-dark" :href="status.account.url">{{status.account.username}}</a></bdi>
  90. </span>
  91. <span v-html="status.content"></span>
  92. </p>
  93. </div>
  94. <div class="comments" v-if="status.id == replyId && !status.comments_disabled">
  95. <p class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;" v-for="(reply, index) in replies">
  96. <span>
  97. <a class="text-dark font-weight-bold mr-1" :href="reply.account.url">{{reply.account.username}}</a>
  98. <span v-html="reply.content"></span>
  99. </span>
  100. <span class="mb-0" style="min-width:38px">
  101. <span v-on:click="likeStatus(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
  102. <post-menu :status="reply" :profile="profile" size="sm" :modal="'true'" :feed="feed" class="d-inline-flex pl-2"></post-menu>
  103. </span>
  104. </p>
  105. </div>
  106. <div class="timestamp mt-2">
  107. <p class="small text-uppercase mb-0">
  108. <a :href="status.url" class="text-muted">
  109. <timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
  110. </a>
  111. </p>
  112. </div>
  113. </div>
  114. <div class="card-footer bg-white" v-if="status.id == replyId">
  115. <form class="" v-on:submit.prevent="commentSubmit(status, $event)">
  116. <input type="hidden" name="item" value="">
  117. <input class="form-control status-reply-input" name="comment" placeholder="Add a comment…" autocomplete="off">
  118. </form>
  119. </div>
  120. </div>
  121. <div v-if="modes.infinite == true && !loading && feed.length > 0">
  122. <div class="card">
  123. <div class="card-body">
  124. <infinite-loading @infinite="infiniteTimeline" distance="800">
  125. <div slot="no-more" class="font-weight-bold">No more posts to load</div>
  126. <div slot="no-results" class="font-weight-bold">No posts found</div>
  127. </infinite-loading>
  128. </div>
  129. </div>
  130. </div>
  131. <div v-if="modes.infinite == false && !loading && feed.length > 0" class="pagination">
  132. <p class="btn btn-outline-secondary font-weight-bold btn-block" v-on:click="loadMore">Load more posts</p>
  133. </div>
  134. <div v-if="!loading && scope == 'home' && feed.length == 0">
  135. <div class="card">
  136. <div class="card-body text-center">
  137. <p class="h2 font-weight-lighter p-5">Hello, {{profile.acct}}</p>
  138. <p class="text-lighter"><i class="fas fa-camera-retro fa-5x"></i></p>
  139. <p class="h3 font-weight-lighter p-5">Start following people to build your timeline.</p>
  140. <p><a href="/discover" class="btn btn-primary font-weight-bold py-0">Discover new people and posts</a></p>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2 d-none d-md-block">
  147. <div class="position-sticky" style="top:68px;">
  148. <div class="mb-4">
  149. <div class="">
  150. <div class="">
  151. <div class="media d-flex align-items-center">
  152. <a :href="profile.url">
  153. <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px">
  154. </a>
  155. <div class="media-body d-flex justify-content-between word-break" >
  156. <div>
  157. <p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">{{profile.username || 'loading...'}}</a></p>
  158. <p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
  159. </div>
  160. <div class="ml-2">
  161. <a :class="[optionMenuState == true ? 'text-primary' :'text-muted']" v-on:click="toggleOptionsMenu()"><i class="fas fa-cog"></i></a>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <!-- <div class="card-footer bg-white py-1 d-none">
  167. <div class="d-flex justify-content-between text-center">
  168. <span class="pl-3 cursor-pointer" v-on:click="redirect(profile.url)">
  169. <p class="mb-0 font-weight-bold">{{profile.statuses_count}}</p>
  170. <p class="mb-0 small text-muted">Posts</p>
  171. </span>
  172. <span class="cursor-pointer" v-on:click="followersModal()">
  173. <p class="mb-0 font-weight-bold">{{profile.followers_count}}</p>
  174. <p class="mb-0 small text-muted">Followers</p>
  175. </span>
  176. <span class="pr-3 cursor-pointer" v-on:click="followingModal()">
  177. <p class="mb-0 font-weight-bold">{{profile.following_count}}</p>
  178. <p class="mb-0 small text-muted">Following</p>
  179. </span>
  180. </div>
  181. </div> -->
  182. </div>
  183. </div>
  184. <div v-if="optionMenuState == true" class="mb-4">
  185. <div class="card options-card">
  186. <div class="card-body small">
  187. <div v-if="profile.is_admin" class="custom-control custom-switch mb-3">
  188. <input type="checkbox" class="custom-control-input" id="mode-mod" v-on:click="modeModToggle()" v-model="modes.mod">
  189. <label class="custom-control-label font-weight-bold" for="mode-mod">Moderator Mode</label>
  190. </div>
  191. <!-- <div class="custom-control custom-switch mb-3">
  192. <input type="checkbox" class="custom-control-input" id="mode-notify" v-on:click="modeNotifyToggle()" v-model="!modes.notify">
  193. <label class="custom-control-label font-weight-bold" for="mode-notify">Disable Notifications</label>
  194. </div> -->
  195. <div class="custom-control custom-switch">
  196. <input type="checkbox" class="custom-control-input" id="mode-infinite" v-on:click="modeInfiniteToggle()" v-model="modes.infinite">
  197. <label class="custom-control-label font-weight-bold" for="mode-infinite">Enable Infinite Scroll</label>
  198. </div>
  199. <hr>
  200. <p class="font-weight-bold">BETA FEATURES</p>
  201. <div class="alert alert-primary font-weight-bold text-center">Experimental features have been moved to the <a href="/settings/labs">Labs</a> settings page.</div>
  202. </div>
  203. </div>
  204. </div>
  205. <div v-show="modes.notify == true" class="mb-4">
  206. <notification-card></notification-card>
  207. </div>
  208. <div v-show="suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
  209. <div class="card">
  210. <div class="card-header bg-white text-muted d-flex justify-content-between align-items-center">
  211. <div>Suggestions For You</div>
  212. <div class="small text-dark"></div>
  213. </div>
  214. <div class="card-body pt-0">
  215. <div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
  216. <a :href="'/'+rec.username">
  217. <img :src="rec.avatar" width="32px" height="32px" class="rounded-circle mr-3">
  218. </a>
  219. <div class="media-body">
  220. <p class="mb-0 font-weight-bold small">
  221. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  222. {{rec.username}}
  223. </a>
  224. </p>
  225. <p class="mb-0 small text-muted">{{rec.message}}</p>
  226. </div>
  227. <a class="font-weight-bold small" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. <footer>
  233. <div class="container pb-5">
  234. <p class="mb-0 text-uppercase font-weight-bold text-muted small">
  235. <a href="/site/about" class="text-dark pr-2">About Us</a>
  236. <a href="/site/help" class="text-dark pr-2">Help</a>
  237. <a href="/site/open-source" class="text-dark pr-2">Open Source</a>
  238. <a href="/site/language" class="text-dark pr-2">Language</a>
  239. <a href="/site/terms" class="text-dark pr-2">Terms</a>
  240. <a href="/site/privacy" class="text-dark pr-2">Privacy</a>
  241. <a href="/site/platform" class="text-dark pr-2">API</a>
  242. </p>
  243. <p class="mb-0 text-uppercase font-weight-bold text-muted small">
  244. <a href="http://pixelfed.org" class="text-muted" rel="noopener" title="" data-toggle="tooltip">Powered by PixelFed</a>
  245. </p>
  246. </div>
  247. </footer>
  248. </div>
  249. </div>
  250. </div>
  251. <!-- <b-modal ref="followingModal"
  252. id="following-modal"
  253. hide-footer
  254. centered
  255. title="Following"
  256. body-class="list-group-flush p-0">
  257. <div class="list-group">
  258. <div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
  259. <div class="media">
  260. <a :href="user.url">
  261. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
  262. </a>
  263. <div class="media-body">
  264. <p class="mb-0" style="font-size: 14px">
  265. <a :href="user.url" class="font-weight-bold text-dark">
  266. {{user.username}}
  267. </a>
  268. </p>
  269. <p class="text-muted mb-0" style="font-size: 14px">
  270. {{user.display_name}}
  271. </p>
  272. </div>
  273. <a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
  274. </div>
  275. </div>
  276. <div v-if="following.length == 0" class="list-group-item border-0">
  277. <div class="list-group-item border-0">
  278. <p class="p-3 text-center mb-0 lead">You are not following anyone.</p>
  279. </div>
  280. </div>
  281. <div v-if="following.length != 0 && followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
  282. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  283. </div>
  284. </div>
  285. </b-modal>
  286. <b-modal ref="followerModal"
  287. id="follower-modal"
  288. hide-footer
  289. centered
  290. title="Followers"
  291. body-class="list-group-flush p-0">
  292. <div class="list-group">
  293. <div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
  294. <div class="media">
  295. <a :href="user.url">
  296. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
  297. </a>
  298. <div class="media-body">
  299. <p class="mb-0" style="font-size: 14px">
  300. <a :href="user.url" class="font-weight-bold text-dark">
  301. {{user.username}}
  302. </a>
  303. </p>
  304. <p class="text-muted mb-0" style="font-size: 14px">
  305. {{user.display_name}}
  306. </p>
  307. </div>
  308. </div>
  309. </div>
  310. <div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
  311. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  312. </div>
  313. </div>
  314. </b-modal> -->
  315. <b-modal
  316. id="lightbox"
  317. ref="lightboxModal"
  318. hide-header
  319. hide-footer
  320. centered
  321. size="lg"
  322. body-class="p-0"
  323. >
  324. <div v-if="lightboxMedia" :class="lightboxMedia.filter_class">
  325. <img :src="lightboxMedia.url" class="img-fluid" style="min-height: 100%; min-width: 100%">
  326. </div>
  327. </b-modal>
  328. </div>
  329. </template>
  330. <style type="text/css" scoped>
  331. .postPresenterContainer {
  332. display: flex;
  333. align-items: center;
  334. background: #fff;
  335. }
  336. .word-break {
  337. word-break: break-all;
  338. }
  339. .small .custom-control-label {
  340. padding-top: 3px;
  341. }
  342. </style>
  343. <script type="text/javascript">
  344. export default {
  345. props: ['scope'],
  346. data() {
  347. return {
  348. config: {},
  349. page: 2,
  350. feed: [],
  351. profile: {},
  352. min_id: 0,
  353. max_id: 0,
  354. stories: {},
  355. suggestions: {},
  356. loading: true,
  357. replies: [],
  358. replyId: null,
  359. optionMenuState: false,
  360. modes: {
  361. 'mod': false,
  362. 'dark': false,
  363. 'notify': true,
  364. 'infinite': true
  365. },
  366. followers: [],
  367. followerCursor: 1,
  368. followerMore: true,
  369. following: [],
  370. followingCursor: 1,
  371. followingMore: true,
  372. lightboxMedia: false
  373. }
  374. },
  375. beforeMount() {
  376. axios.get('/api/v2/config')
  377. .then(res => {
  378. this.config = res.data;
  379. this.fetchTimelineApi();
  380. if(window.outerWidth > 767) {
  381. this.fetchProfile();
  382. }
  383. });
  384. },
  385. mounted() {
  386. if($('link[data-stylesheet="dark"]').length != 0) {
  387. this.modes.dark = true;
  388. }
  389. this.$nextTick(function () {
  390. $('[data-toggle="tooltip"]').tooltip()
  391. });
  392. },
  393. updated() {
  394. pixelfed.readmore();
  395. },
  396. methods: {
  397. fetchProfile() {
  398. axios.get('/api/v1/accounts/verify_credentials').then(res => {
  399. this.profile = res.data;
  400. $('.profile-card .loader').addClass('d-none');
  401. $('.profile-card .contents').removeClass('d-none');
  402. $('.profile-card .card-footer').removeClass('d-none');
  403. }).catch(err => {
  404. swal(
  405. 'Oops, something went wrong',
  406. 'Please reload the page.',
  407. 'error'
  408. );
  409. });
  410. },
  411. fetchTimelineApi() {
  412. let apiUrl = false;
  413. switch(this.scope) {
  414. case 'home':
  415. apiUrl = '/api/v1/timelines/home';
  416. break;
  417. case 'local':
  418. apiUrl = '/api/v1/timelines/public';
  419. break;
  420. case 'network':
  421. apiUrl = '/api/v1/timelines/network';
  422. break;
  423. }
  424. axios.get(apiUrl, {
  425. params: {
  426. max_id: this.max_id,
  427. limit: 6
  428. }
  429. }).then(res => {
  430. let data = res.data;
  431. this.feed.push(...data);
  432. let ids = data.map(status => status.id);
  433. this.min_id = Math.max(...ids);
  434. this.max_id = Math.min(...ids);
  435. $('.timeline .pagination').removeClass('d-none');
  436. this.loading = false;
  437. if(window.outerWidth > 767) {
  438. this.expRec();
  439. }
  440. }).catch(err => {
  441. });
  442. },
  443. infiniteTimeline($state) {
  444. if(this.loading) {
  445. return;
  446. }
  447. let apiUrl = false;
  448. switch(this.scope) {
  449. case 'home':
  450. apiUrl = '/api/v1/timelines/home';
  451. break;
  452. case 'local':
  453. apiUrl = '/api/v1/timelines/public';
  454. break;
  455. case 'network':
  456. apiUrl = '/api/v1/timelines/network';
  457. break;
  458. }
  459. axios.get(apiUrl, {
  460. params: {
  461. max_id: this.max_id,
  462. limit: 6
  463. },
  464. }).then(res => {
  465. if (res.data.length && this.loading == false) {
  466. let data = res.data;
  467. this.feed.push(...data);
  468. let ids = data.map(status => status.id);
  469. this.min_id = Math.max(...ids);
  470. this.max_id = Math.min(...ids);
  471. this.page += 1;
  472. $state.loaded();
  473. this.loading = false;
  474. } else {
  475. $state.complete();
  476. }
  477. });
  478. },
  479. loadMore(event) {
  480. let homeTimeline = '/api/v1/timelines/home';
  481. let localTimeline = '/api/v1/timelines/public';
  482. let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
  483. event.target.innerText = 'Loading...';
  484. axios.get(apiUrl, {
  485. params: {
  486. page: this.page,
  487. },
  488. }).then(res => {
  489. if (res.data.length && this.loading == false) {
  490. let data = res.data;
  491. let ids = data.map(status => status.id);
  492. this.min_id = Math.min(...ids);
  493. if(this.page == 1) {
  494. this.max_id = Math.max(...ids);
  495. }
  496. this.feed.push(...data);
  497. this.page += 1;
  498. this.loading = false;
  499. event.target.innerText = 'Load more posts';
  500. } else {
  501. }
  502. });
  503. },
  504. reportUrl(status) {
  505. let type = status.in_reply_to ? 'comment' : 'post';
  506. let id = status.id;
  507. return '/i/report?type=' + type + '&id=' + id;
  508. },
  509. commentFocus(status, $event) {
  510. if(this.replyId == status.id || status.comments_disabled) {
  511. return;
  512. }
  513. this.replies = {};
  514. this.replyId = status.id;
  515. this.fetchStatusComments(status, '');
  516. },
  517. likeStatus(status, $event) {
  518. if($('body').hasClass('loggedIn') == false) {
  519. return;
  520. }
  521. axios.post('/i/like', {
  522. item: status.id
  523. }).then(res => {
  524. status.favourites_count = res.data.count;
  525. status.favourited = !status.favourited;
  526. }).catch(err => {
  527. swal('Error', 'Something went wrong, please try again later.', 'error');
  528. });
  529. },
  530. shareStatus(status, $event) {
  531. if($('body').hasClass('loggedIn') == false) {
  532. return;
  533. }
  534. axios.post('/i/share', {
  535. item: status.id
  536. }).then(res => {
  537. status.reblogs_count = res.data.count;
  538. status.reblogged = !status.reblogged;
  539. }).catch(err => {
  540. swal('Error', 'Something went wrong, please try again later.', 'error');
  541. });
  542. },
  543. timestampFormat(timestamp) {
  544. let ts = new Date(timestamp);
  545. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  546. },
  547. editUrl(status) {
  548. return status.url + '/edit';
  549. },
  550. redirect(url) {
  551. window.location.href = url;
  552. return;
  553. },
  554. replyUrl(status) {
  555. let username = this.profile.username;
  556. let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
  557. return '/p/' + username + '/' + id;
  558. },
  559. mentionUrl(status) {
  560. let username = status.account.username;
  561. let id = status.id;
  562. return '/p/' + username + '/' + id;
  563. },
  564. statusOwner(status) {
  565. let sid = status.account.id;
  566. let uid = this.profile.id;
  567. if(sid == uid) {
  568. return true;
  569. } else {
  570. return false;
  571. }
  572. },
  573. fetchStatusComments(status, card) {
  574. axios.get('/api/v2/status/'+status.id+'/replies')
  575. .then(res => {
  576. let data = res.data;
  577. this.replies = _.reverse(data);
  578. }).catch(err => {
  579. })
  580. },
  581. muteProfile(status) {
  582. if($('body').hasClass('loggedIn') == false) {
  583. return;
  584. }
  585. axios.post('/i/mute', {
  586. type: 'user',
  587. item: status.account.id
  588. }).then(res => {
  589. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  590. swal('Success', 'You have successfully muted ' + status.account.acct, 'success');
  591. }).catch(err => {
  592. swal('Error', 'Something went wrong. Please try again later.', 'error');
  593. });
  594. },
  595. blockProfile(status) {
  596. if($('body').hasClass('loggedIn') == false) {
  597. return;
  598. }
  599. axios.post('/i/block', {
  600. type: 'user',
  601. item: status.account.id
  602. }).then(res => {
  603. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  604. swal('Success', 'You have successfully blocked ' + status.account.acct, 'success');
  605. }).catch(err => {
  606. swal('Error', 'Something went wrong. Please try again later.', 'error');
  607. });
  608. },
  609. deletePost(status, index) {
  610. if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
  611. return;
  612. }
  613. if(window.confirm('Are you sure you want to delete this post?') == false) {
  614. return;
  615. }
  616. axios.post('/i/delete', {
  617. type: 'status',
  618. item: status.id
  619. }).then(res => {
  620. this.feed.splice(index,1);
  621. swal('Success', 'You have successfully deleted this post', 'success');
  622. }).catch(err => {
  623. swal('Error', 'Something went wrong. Please try again later.', 'error');
  624. });
  625. },
  626. commentSubmit(status, $event) {
  627. let id = status.id;
  628. let form = $event.target;
  629. let input = $(form).find('input[name="comment"]');
  630. let comment = input.val();
  631. let comments = form.parentElement.parentElement.getElementsByClassName('comments')[0];
  632. axios.post('/i/comment', {
  633. item: id,
  634. comment: comment
  635. }).then(res => {
  636. form.reset();
  637. form.blur();
  638. this.replies.push(res.data.entity);
  639. });
  640. },
  641. moderatePost(status, action, $event) {
  642. let username = status.account.username;
  643. console.log('action: ' + action + ' status id' + status.id);
  644. switch(action) {
  645. case 'autocw':
  646. let msg = 'Are you sure you want to enforce CW for ' + username + ' ?';
  647. swal({
  648. title: 'Confirm',
  649. text: msg,
  650. icon: 'warning',
  651. buttons: true,
  652. dangerMode: true
  653. }).then(res => {
  654. if(res) {
  655. axios.post('/api/v2/moderator/action', {
  656. action: action,
  657. item_id: status.id,
  658. item_type: 'status'
  659. }).then(res => {
  660. swal('Success', 'Successfully enforced CW for ' + username, 'success');
  661. }).catch(err => {
  662. swal(
  663. 'Error',
  664. 'Something went wrong, please try again later.',
  665. 'error'
  666. );
  667. });
  668. }
  669. });
  670. break;
  671. case 'noautolink':
  672. msg = 'Are you sure you want to disable auto linking for ' + username + ' ?';
  673. swal({
  674. title: 'Confirm',
  675. text: msg,
  676. icon: 'warning',
  677. buttons: true,
  678. dangerMode: true
  679. }).then(res => {
  680. if(res) {
  681. axios.post('/api/v2/moderator/action', {
  682. action: action,
  683. item_id: status.id,
  684. item_type: 'status'
  685. }).then(res => {
  686. swal('Success', 'Successfully disabled autolinking for ' + username, 'success');
  687. }).catch(err => {
  688. swal(
  689. 'Error',
  690. 'Something went wrong, please try again later.',
  691. 'error'
  692. );
  693. });
  694. }
  695. });
  696. break;
  697. case 'unlisted':
  698. msg = 'Are you sure you want to unlist from timelines for ' + username + ' ?';
  699. swal({
  700. title: 'Confirm',
  701. text: msg,
  702. icon: 'warning',
  703. buttons: true,
  704. dangerMode: true
  705. }).then(res => {
  706. if(res) {
  707. axios.post('/api/v2/moderator/action', {
  708. action: action,
  709. item_id: status.id,
  710. item_type: 'status'
  711. }).then(res => {
  712. swal('Success', 'Successfully unlisted for ' + username, 'success');
  713. }).catch(err => {
  714. swal(
  715. 'Error',
  716. 'Something went wrong, please try again later.',
  717. 'error'
  718. );
  719. });
  720. }
  721. });
  722. break;
  723. case 'disable':
  724. msg = 'Are you sure you want to disable ' + username + '’s account ?';
  725. swal({
  726. title: 'Confirm',
  727. text: msg,
  728. icon: 'warning',
  729. buttons: true,
  730. dangerMode: true
  731. }).then(res => {
  732. if(res) {
  733. axios.post('/api/v2/moderator/action', {
  734. action: action,
  735. item_id: status.id,
  736. item_type: 'status'
  737. }).then(res => {
  738. swal('Success', 'Successfully disabled ' + username + '’s account', 'success');
  739. }).catch(err => {
  740. swal(
  741. 'Error',
  742. 'Something went wrong, please try again later.',
  743. 'error'
  744. );
  745. });
  746. }
  747. });
  748. break;
  749. case 'suspend':
  750. msg = 'Are you sure you want to suspend ' + username + '’s account ?';
  751. swal({
  752. title: 'Confirm',
  753. text: msg,
  754. icon: 'warning',
  755. buttons: true,
  756. dangerMode: true
  757. }).then(res => {
  758. if(res) {
  759. axios.post('/api/v2/moderator/action', {
  760. action: action,
  761. item_id: status.id,
  762. item_type: 'status'
  763. }).then(res => {
  764. swal('Success', 'Successfully suspend ' + username + '’s account', 'success');
  765. }).catch(err => {
  766. swal(
  767. 'Error',
  768. 'Something went wrong, please try again later.',
  769. 'error'
  770. );
  771. });
  772. }
  773. });
  774. break;
  775. }
  776. },
  777. toggleOptionsMenu() {
  778. this.optionMenuState = !this.optionMenuState;
  779. },
  780. modeModToggle() {
  781. this.modes.mod = !this.modes.mod;
  782. window.ls.set('pixelfed-classicui-settings', this.modes);
  783. },
  784. modeNotifyToggle() {
  785. this.modes.notify = !this.modes.notify;
  786. window.ls.set('pixelfed-classicui-settings', this.modes);
  787. },
  788. modeDarkToggle() {
  789. // todo: more graceful stylesheet change
  790. if(this.modes.dark == true) {
  791. axios.post('/i/metro/dark-mode', {
  792. mode: 'light'
  793. }).then(res => {
  794. $('link[data-stylesheet=dark]')
  795. .attr('data-stylesheet', 'light')
  796. .attr('href', '/css/app.css?v=' + Date.now());
  797. this.modes.dark = false;
  798. });
  799. } else {
  800. axios.post('/i/metro/dark-mode', {
  801. mode: 'dark'
  802. }).then(res => {
  803. $('link[data-stylesheet=light]')
  804. .attr('data-stylesheet', 'dark')
  805. .attr('href', '/css/appdark.css?v=' + Date.now());
  806. this.modes.dark = true;
  807. });
  808. }
  809. window.ls.set('pixelfed-classicui-settings', this.modes);
  810. },
  811. modeInfiniteToggle() {
  812. this.modes.infinite = !this.modes.infinite
  813. window.ls.set('pixelfed-classicui-settings', this.modes);
  814. },
  815. followingModal() {
  816. if(this.following.length > 0) {
  817. this.$refs.followingModal.show();
  818. return;
  819. }
  820. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  821. params: {
  822. page: this.followingCursor
  823. }
  824. })
  825. .then(res => {
  826. this.following = res.data;
  827. this.followingCursor++;
  828. });
  829. if(res.data.length < 10) {
  830. this.followingMore = false;
  831. }
  832. this.$refs.followingModal.show();
  833. },
  834. followersModal() {
  835. if(this.followers.length > 0) {
  836. this.$refs.followerModal.show();
  837. return;
  838. }
  839. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  840. params: {
  841. page: this.followerCursor
  842. }
  843. })
  844. .then(res => {
  845. this.followers = res.data;
  846. this.followerCursor++;
  847. })
  848. if(res.data.length < 10) {
  849. this.followerMore = false;
  850. }
  851. this.$refs.followerModal.show();
  852. },
  853. followingLoadMore() {
  854. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  855. params: {
  856. page: this.followingCursor
  857. }
  858. })
  859. .then(res => {
  860. if(res.data.length > 0) {
  861. this.following.push(...res.data);
  862. this.followingCursor++;
  863. }
  864. if(res.data.length < 10) {
  865. this.followingMore = false;
  866. }
  867. });
  868. },
  869. followersLoadMore() {
  870. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  871. params: {
  872. page: this.followerCursor
  873. }
  874. })
  875. .then(res => {
  876. if(res.data.length > 0) {
  877. this.followers.push(...res.data);
  878. this.followerCursor++;
  879. }
  880. if(res.data.length < 10) {
  881. this.followerMore = false;
  882. }
  883. });
  884. },
  885. lightbox(src) {
  886. this.lightboxMedia = src;
  887. this.$refs.lightboxModal.show();
  888. },
  889. expLc(status) {
  890. if(this.config.ab.lc == false) {
  891. return true;
  892. }
  893. if(this.statusOwner(status) == true) {
  894. return true;
  895. }
  896. return false;
  897. },
  898. expRec() {
  899. if(this.config.ab.rec == false) {
  900. return;
  901. }
  902. axios.get('/api/local/exp/rec')
  903. .then(res => {
  904. this.suggestions = res.data;
  905. })
  906. },
  907. expRecFollow(id, index) {
  908. if(this.config.ab.rec == false) {
  909. return;
  910. }
  911. axios.post('/i/follow', {
  912. item: id
  913. }).then(res => {
  914. this.suggestions.splice(index, 1);
  915. })
  916. },
  917. followModalAction(id, index, type = 'following') {
  918. axios.post('/i/follow', {
  919. item: id
  920. }).then(res => {
  921. if(type == 'following') {
  922. this.following.splice(index, 1);
  923. }
  924. })
  925. }
  926. }
  927. }
  928. </script>