Timeline.vue 56 KB

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