Timeline.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603
  1. <template>
  2. <div>
  3. <div v-if="currentLayout === 'feed'" class="container">
  4. <div class="row">
  5. <div v-if="morePostsAvailable == true" class="col-12 mt-5 pt-3 mb-3 fixed-top">
  6. <p class="text-center">
  7. <button class="btn btn-dark px-4 rounded-pill font-weight-bold shadow" @click="syncNewPosts">Load New Posts</button>
  8. </p>
  9. </div>
  10. <div class="col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1">
  11. <div style="margin-top:-2px;">
  12. <story-component v-if="config.features.stories"></story-component>
  13. </div>
  14. <div>
  15. <div v-if="loading" class="text-center" style="padding-top:10px;">
  16. <div class="spinner-border" role="status">
  17. <span class="sr-only">Loading...</span>
  18. </div>
  19. </div>
  20. <div :data-status-id="status.id" v-for="(status, index) in feed" :key="`feed-${index}-${status.id}`">
  21. <div v-if="index == 0 && showTips && !loading" class="my-4 card-tips">
  22. <announcements-card v-on:show-tips="showTips = $event"></announcements-card>
  23. </div>
  24. <div v-if="index == 2 && showSuggestions == true && suggestions.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  25. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  26. <h6 class="text-muted font-weight-bold mb-0">Suggestions For You</h6>
  27. <span class="cursor-pointer text-muted" v-on:click="hideSuggestions"><i class="fas fa-times"></i></span>
  28. </div>
  29. <div class="card-body row mx-0">
  30. <div class="col-12 col-md-4 mb-3" v-for="(rec, index) in suggestions">
  31. <div class="card">
  32. <div class="card-body text-center pt-3">
  33. <p class="mb-0">
  34. <a :href="'/'+rec.username">
  35. <img :src="rec.avatar" class="img-fluid rounded-circle cursor-pointer" width="45px" height="45px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
  36. </a>
  37. </p>
  38. <div class="py-3">
  39. <p class="font-weight-bold text-dark cursor-pointer mb-0">
  40. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  41. {{rec.username}}
  42. </a>
  43. </p>
  44. <p class="small text-muted mb-0">{{rec.message}}</p>
  45. </div>
  46. <p class="mb-0">
  47. <a class="btn btn-primary btn-block font-weight-bold py-0" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  48. </p>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div v-if="index == 4 && showHashtagPosts && hashtagPosts.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  55. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  56. <span></span>
  57. <h6 class="text-muted font-weight-bold mb-0"><a :href="'/discover/tags/'+hashtagPostsName+'?src=tr'">#{{hashtagPostsName}}</a></h6>
  58. <span class="cursor-pointer text-muted" v-on:click="showHashtagPosts = false"><i class="fas fa-times"></i></span>
  59. </div>
  60. <div class="card-body row mx-0">
  61. <div v-for="(tag, index) in hashtagPosts" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
  62. <a class="card info-overlay card-md-border-0" :href="tag.status.url">
  63. <div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
  64. <div v-if="tag.status.sensitive" class="square-content">
  65. <div class="info-overlay-text-label">
  66. <h5 class="text-white m-auto font-weight-bold">
  67. <span>
  68. <span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
  69. </span>
  70. </h5>
  71. </div>
  72. <blur-hash-canvas
  73. width="32"
  74. height="32"
  75. :hash="tag.status.media_attachments[0].blurhash"
  76. />
  77. </div>
  78. <div v-else class="square-content">
  79. <blur-hash-image
  80. width="32"
  81. height="32"
  82. :hash="tag.status.media_attachments[0].blurhash"
  83. :src="tag.status.media_attachments[0].preview_url"
  84. />
  85. </div>
  86. <div class="info-overlay-text">
  87. <h5 class="text-white m-auto font-weight-bold">
  88. <span class="pr-4">
  89. <span class="far fa-heart fa-lg pr-1"></span> {{formatCount(tag.status.favourites_count)}}
  90. </span>
  91. <span>
  92. <span class="far fa-comment fa-lg pr-1"></span> {{formatCount(tag.status.reply_count)}}
  93. </span>
  94. </h5>
  95. </div>
  96. </div>
  97. </a>
  98. </div>
  99. </div>
  100. </div>
  101. <status-card
  102. :status="status"
  103. v-on:status-delete="deleteStatus"
  104. v-on:comment-focus="commentFocus"
  105. />
  106. </div>
  107. <div v-if="!loading && feed.length">
  108. <div class="card rounded-0 border-top-0 status-card card-md-rounded-0 shadow-none border">
  109. <div class="card-body py-5 my-5">
  110. <infinite-loading @infinite="infiniteTimeline" :distance="800">
  111. <div slot="no-more">
  112. <div v-if="recentFeed">
  113. <p class="text-center"><i class="far fa-check-circle fa-8x text-lighter"></i></p>
  114. <p class="text-center h3 font-weight-light">You're All Caught Up!</p>
  115. <p class="text-center text-muted font-weight-light">You've seen all the new posts from the accounts you follow.</p>
  116. <p class="text-center mb-0">
  117. <a class="btn btn-link font-weight-bold px-4" href="/?a=vop">View Older Posts</a>
  118. </p>
  119. <p class="text-center mb-0">
  120. <a class="btn btn-link font-weight-bold px-4" href="/" @click.prevent="alwaysViewOlderPosts()">Always show older posts on this device</a>
  121. </p>
  122. </div>
  123. <div v-else>
  124. <p class="text-center h3 font-weight-light">You've reached the end of this feed</p>
  125. <p class="text-center mb-0">
  126. <a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
  127. </p>
  128. </div>
  129. </div>
  130. <div slot="no-results">
  131. <div v-if="recentFeed">
  132. <p class="text-center"><i class="far fa-check-circle fa-8x text-lighter"></i></p>
  133. <p class="text-center h3 font-weight-light">You're All Caught Up!</p>
  134. <p class="text-center text-muted font-weight-light">You've seen all the new posts from the accounts you follow.</p>
  135. <p class="text-center mb-0">
  136. <a class="btn btn-link font-weight-bold px-4" href="/?a=vop">View Older Posts</a>
  137. </p>
  138. <p class="text-center mb-0">
  139. <a class="btn btn-link font-weight-bold px-4" href="/" @click.prevent="alwaysViewOlderPosts()">Always show older posts on this device</a>
  140. </p>
  141. </div>
  142. <div v-else>
  143. <p class="text-center h3 font-weight-light">You've reached the end of this feed</p>
  144. <p class="text-center mb-0">
  145. <a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
  146. </p>
  147. </div>
  148. </div>
  149. </infinite-loading>
  150. </div>
  151. </div>
  152. </div>
  153. <div v-if="!loading && scope == 'home' && feed.length == 0">
  154. <div class="card rounded-0 mt-4 status-card card-md-rounded-0 shadow-none border">
  155. <div v-if="profile.following_count != '0'" class="card-body py-5 my-5">
  156. <p class="text-center"><i class="far fa-check-circle fa-8x text-lighter"></i></p>
  157. <p class="text-center h3 font-weight-light">You're All Caught Up!</p>
  158. <p class="text-center text-muted font-weight-light">You've seen all the new posts from the accounts you follow.</p>
  159. <p class="text-center mb-0">
  160. <a class="btn btn-link font-weight-bold px-4" href="/?a=vop">View Older Posts</a>
  161. </p>
  162. <p class="text-center mb-0">
  163. <a class="btn btn-link font-weight-bold px-4" href="/" @click.prevent="alwaysViewOlderPosts()">Always show older posts on this device</a>
  164. </p>
  165. </div>
  166. <div v-else class="card-body py-5 my-5">
  167. <p class="text-center"><i class="far fa-smile fa-8x text-lighter"></i></p>
  168. <p class="text-center h3 font-weight-light">Hello {{profile.username}}</p>
  169. <p class="text-center text-muted font-weight-light">Accounts you follow will appear in this feed.</p>
  170. <p class="text-center mb-0">
  171. <a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
  172. </p>
  173. </div>
  174. </div>
  175. </div>
  176. <div v-if="!loading && scope == 'home' && recentFeed && discover_feed.length" class="pt-3">
  177. <p class="h5 font-weight-bold py-3 d-flex justify-content-between align-items-center">
  178. <span>Suggested Posts</span>
  179. <a href="/?a=vop" class="small font-weight-bold">Older Posts</a>
  180. </p>
  181. </div>
  182. <div
  183. v-if="!loading && scope == 'home' && recentFeed && discover_feed.length"
  184. :data-status-id="status.id"
  185. v-for="(status, index) in discover_feed"
  186. :key="`discover_feed-${index}-${status.id}`">
  187. <div v-if="index == 2 && showSuggestions == true && suggestions.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  188. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  189. <h6 class="text-muted font-weight-bold mb-0">Suggestions For You</h6>
  190. <span class="cursor-pointer text-muted" v-on:click="hideSuggestions"><i class="fas fa-times"></i></span>
  191. </div>
  192. <div class="card-body row mx-0">
  193. <div class="col-12 col-md-4 mb-3" v-for="(rec, index) in suggestions">
  194. <div class="card">
  195. <div class="card-body text-center pt-3">
  196. <p class="mb-0">
  197. <a :href="'/'+rec.username">
  198. <img :src="rec.avatar" class="img-fluid rounded-circle cursor-pointer" width="45px" height="45px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
  199. </a>
  200. </p>
  201. <div class="py-3">
  202. <p class="font-weight-bold text-dark cursor-pointer mb-0">
  203. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  204. {{rec.username}}
  205. </a>
  206. </p>
  207. <p class="small text-muted mb-0">{{rec.message}}</p>
  208. </div>
  209. <p class="mb-0">
  210. <a class="btn btn-primary btn-block font-weight-bold py-0" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  211. </p>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. <div v-if="index == 4 && showHashtagPosts && hashtagPosts.length" class="card status-card rounded-0 shadow-none border-top-0 border">
  218. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  219. <span></span>
  220. <h6 class="text-muted font-weight-bold mb-0"><a :href="'/discover/tags/'+hashtagPostsName+'?src=tr'">#{{hashtagPostsName}}</a></h6>
  221. <span class="cursor-pointer text-muted" v-on:click="showHashtagPosts = false"><i class="fas fa-times"></i></span>
  222. </div>
  223. <div class="card-body row mx-0">
  224. <div v-for="(tag, index) in hashtagPosts" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
  225. <a class="card info-overlay card-md-border-0" :href="tag.status.url">
  226. <div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
  227. <div v-if="tag.status.sensitive" class="square-content">
  228. <div class="info-overlay-text-label">
  229. <h5 class="text-white m-auto font-weight-bold">
  230. <span>
  231. <span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
  232. </span>
  233. </h5>
  234. </div>
  235. <blur-hash-canvas
  236. width="32"
  237. height="32"
  238. :hash="tag.status.media_attachments[0].blurhash"
  239. />
  240. </div>
  241. <div v-else class="square-content">
  242. <blur-hash-image
  243. width="32"
  244. height="32"
  245. :hash="tag.status.media_attachments[0].blurhash"
  246. :src="tag.status.media_attachments[0].preview_url"
  247. />
  248. </div>
  249. <div class="info-overlay-text">
  250. <h5 class="text-white m-auto font-weight-bold">
  251. <span class="pr-4">
  252. <span class="far fa-heart fa-lg pr-1"></span> {{formatCount(tag.status.favourites_count)}}
  253. </span>
  254. <span>
  255. <span class="far fa-comment fa-lg pr-1"></span> {{formatCount(tag.status.reply_count)}}
  256. </span>
  257. </h5>
  258. </div>
  259. </div>
  260. </a>
  261. </div>
  262. </div>
  263. </div>
  264. <status-card :status="status" :recommended="true" />
  265. </div>
  266. </div>
  267. </div>
  268. <div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
  269. <div>
  270. <!-- <div class="mb-4">
  271. <a class="btn btn-block btn-primary btn-sm font-weight-bold mb-3 border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
  272. <i class="far fa-plus-square pr-3 fa-lg pt-1"></i> New Post
  273. </a>
  274. </div> -->
  275. <div class="mb-4">
  276. <div v-show="!loading" class="">
  277. <div class="pb-2">
  278. <div class="media d-flex align-items-center">
  279. <a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3">
  280. <!-- <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> -->
  281. <div v-if="userStory" class="has-story cursor-pointer shadow-sm" @click="storyRedirect()">
  282. <img class="rounded-circle box-shadow" :src="profile.avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
  283. </div>
  284. <div v-else>
  285. <img class="rounded-circle box-shadow" :src="profile.avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
  286. </div>
  287. </a>
  288. <div class="media-body d-flex justify-content-between word-break" >
  289. <div>
  290. <p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">{{profile.username || 'loading...'}}</a></p>
  291. <p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
  292. </div>
  293. <div class="ml-2">
  294. <a class="text-muted" href="/settings/home">
  295. <i class="fas fa-cog fa-lg"></i>
  296. <span class="sr-only">User Settings</span>
  297. </a>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. <!-- <div class="card-footer bg-transparent border-top mt-2 py-1">
  303. <div class="d-flex justify-content-between text-center">
  304. <span class="cursor-pointer" @click="redirect(profile.url)">
  305. <p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p>
  306. <p class="mb-0 small text-muted">Posts</p>
  307. </span>
  308. <span class="cursor-pointer" @click="redirect(profile.url+'?md=followers')">
  309. <p class="mb-0 font-weight-bold">{{formatCount(profile.followers_count)}}</p>
  310. <p class="mb-0 small text-muted">Followers</p>
  311. </span>
  312. <span class="cursor-pointer" @click="redirect(profile.url+'?md=following')">
  313. <p class="mb-0 font-weight-bold">{{formatCount(profile.following_count)}}</p>
  314. <p class="mb-0 small text-muted">Following</p>
  315. </span>
  316. </div>
  317. </div> -->
  318. </div>
  319. <div class="card-footer bg-transparent border-0 pt-0 pb-1">
  320. <div class="d-flex justify-content-between text-center">
  321. <span class="cursor-pointer" @click="redirect(profile.url)">
  322. <p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p>
  323. <p class="mb-0 small text-muted">Posts</p>
  324. </span>
  325. <span class="cursor-pointer" @click="redirect(profile.url+'?md=followers')">
  326. <p class="mb-0 font-weight-bold">{{formatCount(profile.followers_count)}}</p>
  327. <p class="mb-0 small text-muted">Followers</p>
  328. </span>
  329. <span class="cursor-pointer" @click="redirect(profile.url+'?md=following')">
  330. <p class="mb-0 font-weight-bold">{{formatCount(profile.following_count)}}</p>
  331. <p class="mb-0 small text-muted">Following</p>
  332. </span>
  333. </div>
  334. </div>
  335. </div>
  336. <div v-show="modes.notify == true && !loading" class="mb-4">
  337. <notification-card></notification-card>
  338. </div>
  339. <div v-show="showSuggestions == true && suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
  340. <div class="card shadow-none border">
  341. <div class="card-header bg-white d-flex align-items-center justify-content-between">
  342. <a class="small text-muted cursor-pointer" href="#" @click.prevent="refreshSuggestions" ref="suggestionRefresh"><i class="fas fa-sync-alt"></i></a>
  343. <div class="small text-dark text-uppercase font-weight-bold">Suggestions</div>
  344. <div class="small text-muted cursor-pointer" v-on:click="hideSuggestions"><i class="fas fa-times"></i></div>
  345. </div>
  346. <div class="card-body pt-0">
  347. <div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
  348. <a :href="'/'+rec.username">
  349. <img :src="rec.avatar" width="32px" height="32px" class="rounded-circle mr-3" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
  350. </a>
  351. <div class="media-body">
  352. <p class="mb-0 font-weight-bold small">
  353. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  354. {{rec.username}}
  355. </a>
  356. </p>
  357. <p class="mb-0 small text-muted">{{rec.message}}</p>
  358. </div>
  359. <a class="font-weight-bold small" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. <footer>
  365. <div class="container px-0 pb-5">
  366. <p class="mb-2 small text-justify">
  367. <a href="/site/about" class="text-lighter pr-2">About</a>
  368. <a href="/site/help" class="text-lighter pr-2">Help</a>
  369. <a href="/site/language" class="text-lighter pr-2">Language</a>
  370. <a href="/discover/places" class="text-lighter pr-2">Places</a>
  371. <a href="/site/privacy" class="text-lighter pr-2">Privacy</a>
  372. <a href="/site/terms" class="text-lighter pr-2">Terms</a>
  373. </p>
  374. <p class="mb-0 text-uppercase text-muted small">
  375. <a href="http://pixelfed.org" class="text-lighter" rel="noopener" title="" data-toggle="tooltip">Powered by Pixelfed</a>
  376. </p>
  377. </div>
  378. </footer>
  379. </div>
  380. </div>
  381. </div>
  382. </div>
  383. <!-- <div v-if="currentLayout === 'comments'" class="container p-0 overflow-hidden">
  384. <div class="row">
  385. <div class="col-12 col-md-6 offset-md-3">
  386. <div class="card shadow-none border" style="height:100vh;">
  387. <div class="card-header d-flex justify-content-between align-items-center">
  388. <div
  389. @click="commentNavigateBack(status.id)"
  390. class="cursor-pointer"
  391. >
  392. <i class="fas fa-chevron-left fa-lg px-2"></i>
  393. </div>
  394. <div>
  395. <p class="font-weight-bold mb-0 h5">Comments</p>
  396. </div>
  397. <div>
  398. <i class="fas fa-cog fa-lg text-white"></i>
  399. </div>
  400. </div>
  401. <div class="card-body" style="overflow-y: auto !important">
  402. <div class="media">
  403. <img :src="status.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
  404. <div class="media-body">
  405. <p class="d-flex justify-content-between align-items-top mb-0" style="overflow-y: hidden;">
  406. <span class="mr-2" style="font-size: 13px;">
  407. <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>
  408. <span class="text-break comment-body" style="word-break: break-all;" v-html="status.content"></span>
  409. </span>
  410. </p>
  411. </div>
  412. </div>
  413. <hr>
  414. <div class="postCommentsLoader text-center py-2">
  415. <div class="spinner-border" role="status">
  416. <span class="sr-only">Loading...</span>
  417. </div>
  418. </div>
  419. <div class="postCommentsContainer d-none">
  420. <p v-if="replies.length" class="mb-1 text-center load-more-link my-4">
  421. <a
  422. href="#"
  423. class="text-dark"
  424. title="Load more comments"
  425. @click.prevent="loadMoreComments"
  426. >
  427. <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>
  428. </a>
  429. </p>
  430. <div v-for="(reply, index) in replies" class="pb-3 media" :key="'tl' + reply.id + '_' + index">
  431. <img :src="reply.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
  432. <div class="media-body">
  433. <div v-if="reply.sensitive == true">
  434. <span class="py-3">
  435. <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>
  436. <span class="text-break" style="font-size: 13px;">
  437. <span class="font-italic text-muted">This comment may contain sensitive material</span>
  438. <span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
  439. </span>
  440. </span>
  441. </div>
  442. <div v-else>
  443. <p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
  444. <span class="mr-3" style="font-size: 13px;">
  445. <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>
  446. <span class="text-break comment-body" style="word-break: break-all;" v-html="reply.content"></span>
  447. </span>
  448. <span class="text-right" style="min-width: 30px;">
  449. <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>
  450. <span class="pl-2 text-lighter cursor-pointer" @click="ctxMenu(reply)">
  451. <span class="fas fa-ellipsis-v text-lighter"></span>
  452. </span>
  453. </span>
  454. </p>
  455. <p class="mb-0">
  456. <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>
  457. <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>
  458. <span class="small text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index, true)">Reply</span>
  459. </p>
  460. <div v-if="reply.reply_count > 0" class="cursor-pointer pb-2" v-on:click="toggleReplies(reply)">
  461. <span class="show-reply-bar"></span>
  462. <span class="comment-reaction small font-weight-bold">{{reply.thread ? 'Hide' : 'View'}} Replies ({{reply.reply_count}})</span>
  463. </div>
  464. <div v-if="reply.thread == true" class="comment-thread">
  465. <div v-for="(s, sindex) in reply.replies" class="py-1 media" :key="'cr' + s.id + '_' + index">
  466. <img :src="s.account.avatar" class="rounded-circle border mr-3" width="25px" height="25px">
  467. <div class="media-body">
  468. <p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
  469. <span class="mr-2" style="font-size: 13px;">
  470. <a class="text-dark font-weight-bold mr-1" :href="s.account.url" :title="s.account.username">{{s.account.username}}</a>
  471. <span class="text-break comment-body" style="word-break: break-all;" v-html="s.content"></span>
  472. </span>
  473. <span>
  474. <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>
  475. </span>
  476. </p>
  477. <p class="mb-0">
  478. <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>
  479. <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>
  480. </p>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487. <div v-if="!replies.length">
  488. <p class="text-center text-muted font-weight-bold small">No comments yet</p>
  489. </div>
  490. </div>
  491. </div>
  492. <div class="card-footer mb-3">
  493. <div class="align-middle d-flex">
  494. <img
  495. :src="profile.avatar"
  496. width="36"
  497. height="36"
  498. class="rounded-circle border mr-3">
  499. <textarea
  500. class="form-control rounded-pill"
  501. name="comment"
  502. placeholder="Add a comment…"
  503. autocomplete="off"
  504. autocorrect="off"
  505. rows="1"
  506. maxlength="0"
  507. style="resize: none;overflow-y: hidden"
  508. @click="replyFocus(status)">
  509. </textarea>
  510. </div>
  511. </div>
  512. </div>
  513. </div>
  514. </div>
  515. </div> -->
  516. <comment-card
  517. v-if="replyStatus && replyStatus.hasOwnProperty('id')"
  518. :status="replyStatus"
  519. :profile="profile"
  520. v-on:current-layout="setCurrentLayout"
  521. />
  522. <div class="modal-stack">
  523. <b-modal ref="replyModal"
  524. id="ctx-reply-modal"
  525. hide-footer
  526. centered
  527. rounded
  528. :title-html="replyStatus.account ? 'Reply to <span class=text-dark>' + replyStatus.account.username + '</span>' : ''"
  529. title-tag="p"
  530. title-class="font-weight-bold text-muted"
  531. size="md"
  532. body-class="p-2 rounded">
  533. <div>
  534. <vue-tribute :options="tributeSettings">
  535. <textarea
  536. class="form-control replyModalTextarea"
  537. rows="4"
  538. v-model="replyText">
  539. </textarea>
  540. </vue-tribute>
  541. <div class="border-top border-bottom my-2">
  542. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  543. <li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
  544. </ul>
  545. </div>
  546. <div class="d-flex justify-content-between align-items-center">
  547. <div>
  548. <span class="pl-2 small text-muted font-weight-bold text-monospace">
  549. <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}}
  550. </span>
  551. </div>
  552. <div class="d-flex align-items-center">
  553. <div class="custom-control custom-switch mr-3">
  554. <input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw">
  555. <label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
  556. </div>
  557. <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">
  558. {{replySending == true ? 'POSTING' : 'POST'}}
  559. </button>
  560. </div>
  561. </div>
  562. </div>
  563. </b-modal>
  564. <b-modal ref="ctxStatusModal"
  565. id="ctx-status-modal"
  566. hide-header
  567. hide-footer
  568. centered
  569. rounded
  570. size="xl"
  571. body-class="list-group-flush p-0 m-0 rounded">
  572. <!-- <post-component
  573. v-if="ctxMenuStatus"
  574. :status-template="ctxMenuStatus.pf_type"
  575. :status-id="ctxMenuStatus.id"
  576. :status-username="ctxMenuStatus.account.username"
  577. :status-url="ctxMenuStatus.url"
  578. :status-profile-url="ctxMenuStatus.account.url"
  579. :status-avatar="ctxMenuStatus.account.avatar"
  580. :status-profile-id="ctxMenuStatus.account.id"
  581. profile-layout="metro">
  582. </post-component> -->
  583. </b-modal>
  584. </div>
  585. </div>
  586. </template>
  587. <script type="text/javascript">
  588. import VueTribute from 'vue-tribute'
  589. import StatusCard from './partials/StatusCard.vue';
  590. import CommentCard from './partials/CommentCard.vue';
  591. export default {
  592. props: ['scope', 'layout'],
  593. components: {
  594. VueTribute,
  595. StatusCard,
  596. CommentCard
  597. },
  598. data() {
  599. return {
  600. ids: [],
  601. config: window.App.config,
  602. page: 2,
  603. feed: [],
  604. profile: {},
  605. min_id: 0,
  606. max_id: 0,
  607. suggestions: {},
  608. loading: true,
  609. replies: [],
  610. replyId: null,
  611. modes: {
  612. 'mod': false,
  613. 'dark': false,
  614. 'notify': true,
  615. 'distractionFree': false
  616. },
  617. followers: [],
  618. followerCursor: 1,
  619. followerMore: true,
  620. following: [],
  621. followingCursor: 1,
  622. followingMore: true,
  623. lightboxMedia: false,
  624. showSuggestions: true,
  625. showReadMore: true,
  626. replyStatus: {},
  627. replyText: '',
  628. replyNsfw: false,
  629. emoji: window.App.util.emoji,
  630. showHashtagPosts: false,
  631. hashtagPosts: [],
  632. hashtagPostsName: '',
  633. copiedEmbed: false,
  634. showTips: true,
  635. userStory: false,
  636. replySending: false,
  637. morePostsAvailable: false,
  638. mpCount: 0,
  639. mpData: false,
  640. mpInterval: 15000,
  641. mpEnabled: false,
  642. mpPoller: null,
  643. confirmModalTitle: 'Are you sure?',
  644. confirmModalIdentifer: null,
  645. confirmModalType: false,
  646. currentLayout: 'feed',
  647. pagination: {},
  648. tributeSettings: {
  649. collection: [
  650. {
  651. trigger: '@',
  652. menuShowMinLength: 2,
  653. values: (function (text, cb) {
  654. let url = '/api/compose/v0/search/mention';
  655. axios.get(url, { params: { q: text }})
  656. .then(res => {
  657. cb(res.data);
  658. })
  659. .catch(err => {
  660. console.log(err);
  661. })
  662. })
  663. },
  664. {
  665. trigger: '#',
  666. menuShowMinLength: 2,
  667. values: (function (text, cb) {
  668. let url = '/api/compose/v0/search/hashtag';
  669. axios.get(url, { params: { q: text }})
  670. .then(res => {
  671. cb(res.data);
  672. })
  673. .catch(err => {
  674. console.log(err);
  675. })
  676. })
  677. }
  678. ]
  679. },
  680. discover_min_id: 0,
  681. discover_max_id: 0,
  682. discover_feed: [],
  683. recentFeed: this.scope === 'home' ? true : false,
  684. recentFeedMin: null,
  685. recentFeedMax: null
  686. }
  687. },
  688. beforeMount() {
  689. let avop = window.localStorage.getItem('pf.feed:avop') === 'always';
  690. let u = new URLSearchParams(window.location.search);
  691. if(u.has('a')) {
  692. switch(u.get('a')) {
  693. case 'recent_feed':
  694. if(this.scope === 'home') {
  695. this.recentFeed = true;
  696. }
  697. break;
  698. case 'vop':
  699. this.recentFeed = false;
  700. break;
  701. }
  702. }
  703. this.recentFeed = avop ? false : this.recentFeed;
  704. this.fetchProfile();
  705. this.fetchTimelineApi();
  706. },
  707. mounted() {
  708. // todo: release after dark mode updates
  709. /* if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || $('link[data-stylesheet="dark"]').length != 0) {
  710. this.modes.dark = true;
  711. let el = document.querySelector('link[data-stylesheet="light"]');
  712. el.setAttribute('href', '/css/appdark.css?id=' + Date.now());
  713. el.setAttribute('data-stylesheet', 'dark');
  714. }*/
  715. if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
  716. this.showSuggestions = false;
  717. } else {
  718. this.showSuggestions = true;
  719. }
  720. if(localStorage.getItem('pf_metro_ui.exp.rm') == 'false') {
  721. this.showReadMore = false;
  722. } else {
  723. this.showReadMore = true;
  724. }
  725. if(localStorage.getItem('metro-tips') == 'false') {
  726. this.showTips = false;
  727. }
  728. this.$nextTick(function () {
  729. $('[data-toggle="tooltip"]').tooltip();
  730. let u = new URLSearchParams(window.location.search);
  731. if(u.has('a')) {
  732. switch(u.get('a')) {
  733. case 'co':
  734. $('#composeModal').modal('show');
  735. break;
  736. }
  737. }
  738. });
  739. },
  740. updated() {
  741. if(this.showReadMore == true) {
  742. pixelfed.readmore();
  743. }
  744. },
  745. methods: {
  746. fetchProfile() {
  747. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  748. this.profile = res.data;
  749. if(this.profile.is_admin == true) {
  750. this.modes.mod = true;
  751. }
  752. window._sharedData.curUser = res.data;
  753. window.App.util.navatar();
  754. this.hasStory();
  755. // this.expRec();
  756. }).catch(err => {
  757. swal(
  758. 'Oops, something went wrong',
  759. 'Please reload the page.',
  760. 'error'
  761. );
  762. });
  763. },
  764. fetchTimelineApi() {
  765. let apiUrl = false;
  766. switch(this.scope) {
  767. case 'home':
  768. apiUrl = '/api/pixelfed/v1/timelines/home';
  769. break;
  770. case 'local':
  771. apiUrl = '/api/pixelfed/v1/timelines/public';
  772. break;
  773. case 'network':
  774. apiUrl = '/api/pixelfed/v1/timelines/network';
  775. break;
  776. }
  777. axios.get(apiUrl, {
  778. params: {
  779. max_id: this.max_id,
  780. limit: 3,
  781. recent_feed: this.recentFeed
  782. }
  783. }).then(res => {
  784. let data = res.data;
  785. this.feed.push(...data);
  786. let ids = data.map(status => status.id);
  787. this.ids = ids;
  788. this.min_id = Math.max(...ids).toString();
  789. this.max_id = Math.min(...ids).toString();
  790. this.loading = false;
  791. $('.timeline .pagination').removeClass('d-none');
  792. if(this.hashtagPosts.length == 0) {
  793. this.fetchHashtagPosts();
  794. }
  795. // this.fetchStories();
  796. this.rtw();
  797. setTimeout(function() {
  798. document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) {
  799. i.href = App.util.format.rewriteLinks(i);
  800. });
  801. }, 500);
  802. axios.get('/api/pixelfed/v2/discover/posts/trending', {
  803. params: {
  804. range: 'daily'
  805. }
  806. }).then(res => {
  807. let data = res.data.filter(post => this.ids.indexOf(post.id) === -1);
  808. this.discover_feed = data;
  809. });
  810. }).catch(err => {
  811. swal(
  812. 'Oops, something went wrong',
  813. 'Please reload the page.',
  814. 'error'
  815. );
  816. });
  817. },
  818. infiniteTimeline($state) {
  819. if(this.loading) {
  820. $state.complete();
  821. return;
  822. }
  823. if(this.page > 40) {
  824. this.loading = false;
  825. $state.complete();
  826. }
  827. let apiUrl = false;
  828. switch(this.scope) {
  829. case 'home':
  830. apiUrl = '/api/pixelfed/v1/timelines/home';
  831. break;
  832. case 'local':
  833. apiUrl = '/api/pixelfed/v1/timelines/public';
  834. break;
  835. case 'network':
  836. apiUrl = '/api/pixelfed/v1/timelines/network';
  837. break;
  838. }
  839. axios.get(apiUrl, {
  840. params: {
  841. max_id: this.max_id,
  842. limit: 6,
  843. recent_feed: this.recentFeed
  844. },
  845. }).then(res => {
  846. if (res.data.length && this.loading == false) {
  847. let data = res.data;
  848. let self = this;
  849. let vids = [];
  850. if(self.recentFeed && self.ids.indexOf(data[0].id) != -1) {
  851. this.loading = false;
  852. $state.complete();
  853. return;
  854. }
  855. data.forEach((d, index) => {
  856. if(self.ids.indexOf(d.id) == -1) {
  857. self.feed.push(d);
  858. self.ids.push(d.id);
  859. vids.push({
  860. sid: d.id,
  861. pid: d.account.id
  862. });
  863. }
  864. });
  865. this.min_id = Math.max(...this.ids).toString();
  866. this.max_id = Math.min(...this.ids).toString();
  867. this.page += 1;
  868. $state.loaded();
  869. this.loading = false;
  870. axios.post('/api/status/view', {
  871. '_v': vids,
  872. });
  873. } else {
  874. $state.complete();
  875. }
  876. }).catch(err => {
  877. this.loading = false;
  878. $state.complete();
  879. });
  880. },
  881. reportUrl(status) {
  882. let type = status.in_reply_to ? 'comment' : 'post';
  883. let id = status.id;
  884. return '/i/report?type=' + type + '&id=' + id;
  885. },
  886. commentFocus(status, $event) {
  887. if(status.comments_disabled) {
  888. return;
  889. }
  890. // if(this.status && this.status.id == status.id) {
  891. // this.$refs.replyModal.show();
  892. // return;
  893. // }
  894. this.status = status;
  895. this.replies = {};
  896. this.replyStatus = {};
  897. this.replyText = '';
  898. this.replyId = status.id;
  899. this.replyStatus = status;
  900. // this.$refs.replyModal.show();
  901. this.fetchStatusComments(status, '');
  902. $('nav').hide();
  903. $('footer').hide();
  904. $('.mobile-footer-spacer').attr('style', 'display:none !important');
  905. $('.mobile-footer').attr('style', 'display:none !important');
  906. this.currentLayout = 'comments';
  907. window.history.pushState({}, '', this.statusUrl(status));
  908. return;
  909. },
  910. commentNavigateBack(id) {
  911. $('nav').show();
  912. $('footer').show();
  913. $('.mobile-footer-spacer').attr('style', 'display:block');
  914. $('.mobile-footer').attr('style', 'display:block');
  915. this.currentLayout = 'feed';
  916. let path = this.scope == 'home' ? '/' : '/timeline/public';
  917. window.history.pushState({}, '', path);
  918. },
  919. likeStatus(status, event) {
  920. if($('body').hasClass('loggedIn') == false) {
  921. return;
  922. }
  923. let count = status.favourites_count;
  924. status.favourited = !status.favourited;
  925. axios.post('/i/like', {
  926. item: status.id
  927. }).then(res => {
  928. status.favourites_count = res.data.count;
  929. }).catch(err => {
  930. status.favourited = !status.favourited;
  931. status.favourites_count = count;
  932. swal('Error', 'Something went wrong, please try again later.', 'error');
  933. });
  934. window.navigator.vibrate(200);
  935. if(status.favourited) {
  936. setTimeout(function() {
  937. event.target.classList.add('animate__animated', 'animate__bounce');
  938. },100);
  939. }
  940. },
  941. shareStatus(status, $event) {
  942. if($('body').hasClass('loggedIn') == false) {
  943. return;
  944. }
  945. this.closeModals();
  946. axios.post('/i/share', {
  947. item: status.id
  948. }).then(res => {
  949. status.reblogs_count = res.data.count;
  950. status.reblogged = !status.reblogged;
  951. if(status.reblogged) {
  952. swal('Success', 'You shared this post', 'success');
  953. } else {
  954. swal('Success', 'You unshared this post', 'success');
  955. }
  956. }).catch(err => {
  957. swal('Error', 'Something went wrong, please try again later.', 'error');
  958. });
  959. },
  960. timestampFormat(timestamp) {
  961. let ts = new Date(timestamp);
  962. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  963. },
  964. redirect(url) {
  965. window.location.href = url;
  966. return;
  967. },
  968. statusOwner(status) {
  969. let sid = status.account.id;
  970. let uid = this.profile.id;
  971. if(sid == uid) {
  972. return true;
  973. } else {
  974. return false;
  975. }
  976. },
  977. fetchStatusComments(status, card) {
  978. // axios.get('/api/v2/status/'+status.id+'/replies',
  979. // {
  980. // params: {
  981. // limit: 6
  982. // }
  983. // })
  984. // .then(res => {
  985. // let data = res.data.filter(res => {
  986. // return res.sensitive == false;
  987. // });
  988. // this.replies = _.reverse(data);
  989. // setTimeout(function() {
  990. // document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) {
  991. // i.href = App.util.format.rewriteLinks(i);
  992. // });
  993. // }, 500);
  994. // }).catch(err => {
  995. // })
  996. let url = '/api/v2/comments/'+status.account.id+'/status/'+status.id;
  997. axios.get(url)
  998. .then(response => {
  999. let self = this;
  1000. // this.results = this.layout == 'metro' ?
  1001. // _.reverse(response.data.data) :
  1002. // response.data.data;
  1003. this.replies = _.reverse(response.data.data);
  1004. this.pagination = response.data.meta.pagination;
  1005. if(this.replies.length > 0) {
  1006. $('.load-more-link').removeClass('d-none');
  1007. }
  1008. $('.postCommentsLoader').addClass('d-none');
  1009. $('.postCommentsContainer').removeClass('d-none');
  1010. // setTimeout(function() {
  1011. // document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
  1012. // i.href = App.util.format.rewriteLinks(i);
  1013. // });
  1014. // }, 500);
  1015. }).catch(error => {
  1016. if(!error.response) {
  1017. $('.postCommentsLoader .lds-ring')
  1018. .attr('style','width:100%')
  1019. .addClass('pt-4 font-weight-bold text-muted')
  1020. .text('An error occurred, cannot fetch comments. Please try again later.');
  1021. } else {
  1022. switch(error.response.status) {
  1023. case 401:
  1024. $('.postCommentsLoader .lds-ring')
  1025. .attr('style','width:100%')
  1026. .addClass('pt-4 font-weight-bold text-muted')
  1027. .text('Please login to view.');
  1028. break;
  1029. default:
  1030. $('.postCommentsLoader .lds-ring')
  1031. .attr('style','width:100%')
  1032. .addClass('pt-4 font-weight-bold text-muted')
  1033. .text('An error occurred, cannot fetch comments. Please try again later.');
  1034. break;
  1035. }
  1036. }
  1037. });
  1038. },
  1039. followingModal() {
  1040. if(this.following.length > 0) {
  1041. this.$refs.followingModal.show();
  1042. return;
  1043. }
  1044. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  1045. params: {
  1046. page: this.followingCursor
  1047. }
  1048. })
  1049. .then(res => {
  1050. this.following = res.data;
  1051. this.followingCursor++;
  1052. });
  1053. if(res.data.length < 10) {
  1054. this.followingMore = false;
  1055. }
  1056. this.$refs.followingModal.show();
  1057. },
  1058. followersModal() {
  1059. if(this.followers.length > 0) {
  1060. this.$refs.followerModal.show();
  1061. return;
  1062. }
  1063. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  1064. params: {
  1065. page: this.followerCursor
  1066. }
  1067. })
  1068. .then(res => {
  1069. this.followers = res.data;
  1070. this.followerCursor++;
  1071. })
  1072. if(res.data.length < 10) {
  1073. this.followerMore = false;
  1074. }
  1075. this.$refs.followerModal.show();
  1076. },
  1077. followingLoadMore() {
  1078. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  1079. params: {
  1080. page: this.followingCursor
  1081. }
  1082. })
  1083. .then(res => {
  1084. if(res.data.length > 0) {
  1085. this.following.push(...res.data);
  1086. this.followingCursor++;
  1087. }
  1088. if(res.data.length < 10) {
  1089. this.followingMore = false;
  1090. }
  1091. });
  1092. },
  1093. followersLoadMore() {
  1094. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  1095. params: {
  1096. page: this.followerCursor
  1097. }
  1098. })
  1099. .then(res => {
  1100. if(res.data.length > 0) {
  1101. this.followers.push(...res.data);
  1102. this.followerCursor++;
  1103. }
  1104. if(res.data.length < 10) {
  1105. this.followerMore = false;
  1106. }
  1107. });
  1108. },
  1109. lightbox(status) {
  1110. window.location.href = status.media_attachments[0].url;
  1111. return;
  1112. this.lightboxMedia = status.media_attachments[0];
  1113. this.$refs.lightboxModal.show();
  1114. },
  1115. expLc(status) {
  1116. if(this.config.ab.lc == false) {
  1117. return true;
  1118. }
  1119. if(this.statusOwner(status) == true) {
  1120. return true;
  1121. }
  1122. return false;
  1123. },
  1124. expRec() {
  1125. //return;
  1126. if(this.config.ab.rec == false) {
  1127. return;
  1128. }
  1129. axios.get('/api/local/exp/rec')
  1130. .then(res => {
  1131. this.suggestions = res.data;
  1132. })
  1133. },
  1134. expRecFollow(id, index) {
  1135. return;
  1136. if(this.config.ab.rec == false) {
  1137. return;
  1138. }
  1139. axios.post('/i/follow', {
  1140. item: id
  1141. }).then(res => {
  1142. this.suggestions.splice(index, 1);
  1143. }).catch(err => {
  1144. if(err.response.data.message) {
  1145. swal('Error', err.response.data.message, 'error');
  1146. }
  1147. });
  1148. },
  1149. followAction(status) {
  1150. let id = status.account.id;
  1151. axios.post('/i/follow', {
  1152. item: id
  1153. }).then(res => {
  1154. this.feed.forEach(s => {
  1155. if(s.account.id == id) {
  1156. s.account.relationship.following = !s.account.relationship.following;
  1157. }
  1158. });
  1159. let username = status.account.acct;
  1160. if(status.account.relationship.following) {
  1161. swal('Follow successful!', 'You are now following ' + username, 'success');
  1162. } else {
  1163. swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
  1164. }
  1165. }).catch(err => {
  1166. if(err.response.data.message) {
  1167. swal('Error', err.response.data.message, 'error');
  1168. }
  1169. });
  1170. },
  1171. owner(status) {
  1172. return this.profile.id === status.account.id;
  1173. },
  1174. admin() {
  1175. return this.profile.is_admin == true;
  1176. },
  1177. ownerOrAdmin(status) {
  1178. return this.owner(status) || this.admin();
  1179. },
  1180. hideSuggestions() {
  1181. localStorage.setItem('pf_metro_ui.exp.rec', false);
  1182. this.showSuggestions = false;
  1183. },
  1184. emojiReaction(status) {
  1185. let em = event.target.innerText;
  1186. if(this.replyText.length == 0) {
  1187. this.replyText = em + ' ';
  1188. $('textarea[name="comment"]').focus();
  1189. } else {
  1190. this.replyText += em + ' ';
  1191. $('textarea[name="comment"]').focus();
  1192. }
  1193. },
  1194. refreshSuggestions() {
  1195. return;
  1196. let el = event.target.parentNode;
  1197. if(el.classList.contains('disabled') == true) {
  1198. return;
  1199. }
  1200. axios.get('/api/local/exp/rec', {
  1201. params: {
  1202. refresh: true
  1203. }
  1204. })
  1205. .then(res => {
  1206. this.suggestions = res.data;
  1207. if (el.classList) {
  1208. el.classList.add('disabled');
  1209. el.classList.add('text-light');
  1210. }
  1211. else {
  1212. el.className += ' ' + 'disabled text-light';
  1213. }
  1214. setTimeout(function() {
  1215. el.setAttribute('href', '#');
  1216. if (el.classList) {
  1217. el.classList.remove('disabled');
  1218. el.classList.remove('text-light');
  1219. }
  1220. else {
  1221. el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), 'disabled text-light');
  1222. }
  1223. }, 10000);
  1224. });
  1225. },
  1226. fetchHashtagPosts() {
  1227. axios.get('/api/local/discover/tag/list')
  1228. .then(res => {
  1229. let tags = res.data;
  1230. if(tags.length == 0) {
  1231. return;
  1232. }
  1233. let hashtag = tags[Math.floor(Math.random(), tags.length)];
  1234. this.hashtagPostsName = hashtag;
  1235. axios.get('/api/v2/discover/tag', {
  1236. params: {
  1237. hashtag: hashtag
  1238. }
  1239. }).then(res => {
  1240. if(res.data.tags.length > 3) {
  1241. this.showHashtagPosts = true;
  1242. this.hashtagPosts = res.data.tags.splice(0,3);
  1243. }
  1244. })
  1245. })
  1246. },
  1247. ctxCopyEmbed() {
  1248. navigator.clipboard.writeText(this.ctxEmbedPayload);
  1249. this.ctxEmbedShowCaption = true;
  1250. this.ctxEmbedShowLikes = false;
  1251. this.ctxEmbedCompactMode = false;
  1252. this.$refs.ctxEmbedModal.hide();
  1253. },
  1254. formatCount(count) {
  1255. return App.util.format.count(count);
  1256. },
  1257. statusUrl(status) {
  1258. if(status.local == true) {
  1259. return status.url;
  1260. }
  1261. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  1262. },
  1263. profileUrl(status) {
  1264. if(status.local == true) {
  1265. return status.account.url;
  1266. }
  1267. return '/i/web/profile/_/' + status.account.id;
  1268. },
  1269. statusCardUsernameFormat(status) {
  1270. if(status.account.local == true) {
  1271. return status.account.username;
  1272. }
  1273. let fmt = window.App.config.username.remote.format;
  1274. let txt = window.App.config.username.remote.custom;
  1275. let usr = status.account.username;
  1276. let dom = document.createElement('a');
  1277. dom.href = status.account.url;
  1278. dom = dom.hostname;
  1279. switch(fmt) {
  1280. case '@':
  1281. return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
  1282. break;
  1283. case 'from':
  1284. return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
  1285. break;
  1286. case 'custom':
  1287. return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
  1288. break;
  1289. default:
  1290. return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
  1291. break;
  1292. }
  1293. },
  1294. previewUrl(status) {
  1295. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  1296. },
  1297. previewBackground(status) {
  1298. let preview = this.previewUrl(status);
  1299. return 'background-image: url(' + preview + ');';
  1300. },
  1301. trimCaption(caption, len = 60) {
  1302. return _.truncate(caption, {
  1303. length: len
  1304. });
  1305. },
  1306. hasStory() {
  1307. axios.get('/api/stories/v0/exists/'+this.profile.id)
  1308. .then(res => {
  1309. this.userStory = res.data;
  1310. })
  1311. },
  1312. // real time watcher
  1313. rtw() {
  1314. this.mpPoller = setInterval(() => {
  1315. let apiUrl = false;
  1316. this.mpCount++;
  1317. if(this.mpCount > 10) {
  1318. this.mpInterval = 30000;
  1319. }
  1320. if(this.mpCount > 50) {
  1321. this.mpInterval = (5 * 60 * 1000);
  1322. }
  1323. switch(this.scope) {
  1324. case 'home':
  1325. apiUrl = '/api/pixelfed/v1/timelines/home';
  1326. break;
  1327. case 'local':
  1328. apiUrl = '/api/pixelfed/v1/timelines/public';
  1329. break;
  1330. case 'network':
  1331. apiUrl = '/api/pixelfed/v1/timelines/network';
  1332. break;
  1333. }
  1334. axios.get(apiUrl, {
  1335. params: {
  1336. max_id: 0,
  1337. limit: 20,
  1338. recent_feed: this.recentFeed
  1339. }
  1340. }).then(res => {
  1341. let self = this;
  1342. let tids = this.feed.map(status => status.id);
  1343. let data = res.data.filter(d => {
  1344. return d.id > self.min_id && tids.indexOf(d.id) == -1;
  1345. });
  1346. let ids = data.map(status => status.id);
  1347. let max = Math.max(...ids).toString();
  1348. let newer = max > this.min_id;
  1349. if(newer) {
  1350. this.morePostsAvailable = true;
  1351. this.mpData = data;
  1352. }
  1353. });
  1354. }, this.mpInterval);
  1355. },
  1356. syncNewPosts() {
  1357. let self = this;
  1358. let data = this.mpData;
  1359. let ids = data.map(s => s.id);
  1360. this.min_id = Math.max(...ids).toString();
  1361. this.max_id = Math.min(...ids).toString();
  1362. this.feed.unshift(...data);
  1363. this.morePostsAvailable = false;
  1364. this.mpData = null;
  1365. },
  1366. toggleReplies(reply) {
  1367. if(reply.thread) {
  1368. reply.thread = false;
  1369. } else {
  1370. if(reply.replies.length > 0) {
  1371. reply.thread = true;
  1372. return;
  1373. }
  1374. let url = '/api/v2/comments/'+reply.account.id+'/status/'+reply.id;
  1375. axios.get(url)
  1376. .then(response => {
  1377. reply.replies = _.reverse(response.data.data);
  1378. reply.thread = true;
  1379. });
  1380. }
  1381. },
  1382. replyFocus(e, index, prependUsername = false) {
  1383. if($('body').hasClass('loggedIn') == false) {
  1384. this.redirect('/login?next=' + encodeURIComponent(window.location.pathname));
  1385. return;
  1386. }
  1387. if(this.status.comments_disabled) {
  1388. return;
  1389. }
  1390. this.replyToIndex = index;
  1391. this.replyingToId = e.id;
  1392. this.replyingToUsername = e.account.username;
  1393. this.reply_to_profile_id = e.account.id;
  1394. let username = e.account.local ? '@' + e.account.username + ' '
  1395. : '@' + e.account.acct + ' ';
  1396. if(prependUsername == true) {
  1397. this.replyText = username;
  1398. }
  1399. this.$refs.replyModal.show();
  1400. setTimeout(function() {
  1401. $('.replyModalTextarea').focus();
  1402. }, 500);
  1403. },
  1404. alwaysViewOlderPosts() {
  1405. // Set Feed:Always View Older Posts
  1406. window.localStorage.setItem('pf.feed:avop', 'always');
  1407. window.location.href = '/';
  1408. },
  1409. setCurrentLayout(layout) {
  1410. this.currentLayout = layout;
  1411. },
  1412. deleteStatus(status) {
  1413. this.feed = this.feed.filter(s => {
  1414. return s.id != status;
  1415. });
  1416. }
  1417. },
  1418. beforeDestroy () {
  1419. clearInterval(this.mpInterval);
  1420. }
  1421. }
  1422. </script>
  1423. <style type="text/css" scoped>
  1424. .postPresenterContainer {
  1425. display: flex;
  1426. align-items: center;
  1427. background: #fff;
  1428. }
  1429. .word-break {
  1430. word-break: break-all;
  1431. }
  1432. .small .custom-control-label {
  1433. padding-top: 3px;
  1434. }
  1435. /*.reply-btn {
  1436. position: absolute;
  1437. bottom: 30px;
  1438. right: 20px;
  1439. width: 60px;
  1440. text-align: center;
  1441. font-size: 13px;
  1442. border-radius: 0 3px 3px 0;
  1443. }*/
  1444. .reply-btn[disabled] {
  1445. opacity: .3;
  1446. color: #3897f0;
  1447. }
  1448. .replyModalTextarea {
  1449. border: none;
  1450. font-size: 18px;
  1451. resize: none;
  1452. white-space: pre-wrap;
  1453. outline: none;
  1454. }
  1455. .has-story {
  1456. width: 64px;
  1457. height: 64px;
  1458. border-radius: 50%;
  1459. padding: 2px;
  1460. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  1461. }
  1462. .has-story img {
  1463. width: 60px;
  1464. height: 60px;
  1465. border-radius: 50%;
  1466. padding: 3px;
  1467. background: #fff;
  1468. }
  1469. .has-story.has-story-sm {
  1470. width: 32px;
  1471. height: 32px;
  1472. border-radius: 50%;
  1473. padding: 2px;
  1474. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  1475. }
  1476. .has-story.has-story-sm img {
  1477. width: 28px;
  1478. height: 28px;
  1479. border-radius: 50%;
  1480. padding: 3px;
  1481. background: #fff;
  1482. }
  1483. #ctx-reply-modal .form-control:focus {
  1484. border: none;
  1485. outline: 0;
  1486. box-shadow: none;
  1487. }
  1488. </style>