Timeline.vue 77 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231
  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="d-none col-12 pl-3 pl-md-0 pt-3 pl-0">
  11. <div class="d-none d-md-flex justify-content-between align-items-center">
  12. <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>
  13. <p class="mb-0">
  14. <span class="btn-group">
  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('feed')"><i class="fas fa-list"></i></a>
  16. <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>
  17. </span>
  18. </p>
  19. <p class="mb-0 d-none d-md-block">
  20. <a class="btn btn-block btn-primary btn-sm font-weight-bold" href="/i/compose" data-toggle="modal" data-target="#composeModal">
  21. New Post
  22. </a>
  23. </p>
  24. </div>
  25. <hr>
  26. </div>
  27. <div class="col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1">
  28. <div style="margin-top:-2px;">
  29. <story-component v-if="config.features.stories"></story-component>
  30. </div>
  31. <div>
  32. <div v-if="loading" class="text-center" style="padding-top:10px;">
  33. <div class="spinner-border" role="status">
  34. <span class="sr-only">Loading...</span>
  35. </div>
  36. </div>
  37. <div :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
  38. <div v-if="index == 0 && showTips && !loading" class="my-4 card-tips">
  39. <announcements-card v-on:show-tips="showTips = $event"></announcements-card>
  40. </div>
  41. <div v-if="index == 2 && showSuggestions == true && suggestions.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  42. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  43. <h6 class="text-muted font-weight-bold mb-0">Suggestions For You</h6>
  44. <span class="cursor-pointer text-muted" v-on:click="hideSuggestions"><i class="fas fa-times"></i></span>
  45. </div>
  46. <div class="card-body row mx-0">
  47. <div class="col-12 col-md-4 mb-3" v-for="(rec, index) in suggestions">
  48. <div class="card">
  49. <div class="card-body text-center pt-3">
  50. <p class="mb-0">
  51. <a :href="'/'+rec.username">
  52. <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">
  53. </a>
  54. </p>
  55. <div class="py-3">
  56. <p class="font-weight-bold text-dark cursor-pointer mb-0">
  57. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  58. {{rec.username}}
  59. </a>
  60. </p>
  61. <p class="small text-muted mb-0">{{rec.message}}</p>
  62. </div>
  63. <p class="mb-0">
  64. <a class="btn btn-primary btn-block font-weight-bold py-0" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  65. </p>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <div v-if="index == 4 && showHashtagPosts && hashtagPosts.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  72. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  73. <span></span>
  74. <h6 class="text-muted font-weight-bold mb-0"><a :href="'/discover/tags/'+hashtagPostsName+'?src=tr'">#{{hashtagPostsName}}</a></h6>
  75. <span class="cursor-pointer text-muted" v-on:click="showHashtagPosts = false"><i class="fas fa-times"></i></span>
  76. </div>
  77. <div class="card-body row mx-0">
  78. <div v-for="(tag, index) in hashtagPosts" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
  79. <a class="card info-overlay card-md-border-0" :href="tag.status.url">
  80. <div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
  81. <div v-if="tag.status.sensitive" class="square-content">
  82. <div class="info-overlay-text-label">
  83. <h5 class="text-white m-auto font-weight-bold">
  84. <span>
  85. <span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
  86. </span>
  87. </h5>
  88. </div>
  89. <blur-hash-canvas
  90. width="32"
  91. height="32"
  92. :hash="tag.status.media_attachments[0].blurhash"
  93. />
  94. </div>
  95. <div v-else class="square-content">
  96. <blur-hash-image
  97. width="32"
  98. height="32"
  99. :hash="tag.status.media_attachments[0].blurhash"
  100. :src="tag.status.media_attachments[0].preview_url"
  101. />
  102. </div>
  103. <div class="info-overlay-text">
  104. <h5 class="text-white m-auto font-weight-bold">
  105. <span class="pr-4">
  106. <span class="far fa-heart fa-lg pr-1"></span> {{formatCount(tag.status.favourites_count)}}
  107. </span>
  108. <span>
  109. <span class="far fa-comment fa-lg pr-1"></span> {{formatCount(tag.status.reply_count)}}
  110. </span>
  111. </h5>
  112. </div>
  113. </div>
  114. </a>
  115. </div>
  116. </div>
  117. </div>
  118. <div :class="index == 0 ? 'card mb-sm-4 status-card card-md-rounded-0 shadow-none border mt-md-4' : 'card mb-sm-4 status-card card-md-rounded-0 shadow-none border'">
  119. <div v-if="status" class="card-header d-inline-flex align-items-center bg-white">
  120. <!-- <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'"> -->
  121. <!-- <div v-if="hasStory" class="has-story has-story-sm cursor-pointer shadow-sm" @click="profileUrl(status)">
  122. <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'">
  123. </div>
  124. <div v-else> -->
  125. <div>
  126. <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">
  127. </div>
  128. <div class="pl-2">
  129. <!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> -->
  130. <a class="username font-weight-bold text-dark text-decoration-none text-break" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
  131. Loading...
  132. </a>
  133. <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;">
  134. <i class="fas fa-certificate text-danger fa-stack-1x"></i>
  135. <i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:7px;"></i>
  136. </span>
  137. <!-- <span v-if="scope != 'home' && status.account.id != profile.id && status.account.relationship">
  138. <span class="px-1">•</span>
  139. <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>
  140. </span> -->
  141. <!-- <span v-if="status.account.id != profile.id">
  142. <span class="px-1">•</span>
  143. <span class="font-weight-bold cursor-pointer text-primary">Follow</span>
  144. </span> -->
  145. <div class="d-flex align-items-center">
  146. <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>
  147. </div>
  148. </div>
  149. <div class="text-right" style="flex-grow:1;">
  150. <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
  151. <span class="fas fa-ellipsis-h text-lighter"></span>
  152. <span class="sr-only">Post Menu</span>
  153. </button>
  154. </div>
  155. </div>
  156. <div class="postPresenterContainer" style="background: #000;">
  157. <div v-if="config.ab.top && status.pf_type === 'text'" class="w-100">
  158. <div class="w-100 card-img-top border-bottom rounded-0" style="background-image: url(/storage/textimg/bg_1.jpg);background-size: cover;width: 100%;height: 540px;">
  159. <div class="w-100 h-100 d-flex justify-content-center align-items-center">
  160. <p class="text-center text-break h3 px-5 font-weight-bold" v-html="status.content"></p>
  161. </div>
  162. </div>
  163. </div>
  164. <div v-else-if="status.pf_type === 'photo'" class="w-100">
  165. <photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
  166. </div>
  167. <div v-else-if="status.pf_type === 'video'" class="w-100">
  168. <video-presenter :status="status"></video-presenter>
  169. </div>
  170. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  171. <photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
  172. </div>
  173. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  174. <video-album-presenter :status="status"></video-album-presenter>
  175. </div>
  176. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  177. <mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
  178. </div>
  179. <div v-else class="w-100">
  180. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  181. </div>
  182. </div>
  183. <div v-if="config.features.label.covid.enabled && status.label && status.label.covid == true" class="card-body border-top border-bottom py-2 cursor-pointer pr-2" @click="labelRedirect()">
  184. <p class="font-weight-bold d-flex justify-content-between align-items-center mb-0">
  185. <span>
  186. <i class="fas fa-info-circle mr-2"></i>
  187. For information about COVID-19, {{config.features.label.covid.org}}
  188. </span>
  189. <span>
  190. <i class="fas fa-chevron-right text-lighter"></i>
  191. </span>
  192. </p>
  193. </div>
  194. <div class="card-body">
  195. <div class="reactions my-1 pb-2">
  196. <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>
  197. <h3 v-else class="far fa-heart pr-3 m-0 like-btn text-dark cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
  198. <h3 v-if="!status.comments_disabled" class="far fa-comment text-dark pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
  199. <!-- <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-dark share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3> -->
  200. <!-- <h3 class="fas fa-expand pr-3 m-0 cursor-pointer text-dark" v-on:click="lightbox(status)"></h3> -->
  201. <span v-if="status.taggedPeople.length" class="float-right">
  202. <span class="font-weight-light small" style="color:#718096">
  203. <i class="far fa-user" data-toggle="tooltip" title="Tagged People"></i>
  204. <span v-for="(tag, index) in status.taggedPeople" class="mr-n2">
  205. <a :href="'/'+tag.username">
  206. <img :src="tag.avatar" width="20px" height="20px" class="border rounded-circle" data-toggle="tooltip" :title="'@'+tag.username" alt="Avatar">
  207. </a>
  208. </span>
  209. </span>
  210. </span>
  211. </div>
  212. <div v-if="status.liked_by.username && status.liked_by.username !== profile.username" class="likes mb-1">
  213. <span class="like-count">Liked by
  214. <a class="font-weight-bold text-dark" :href="'/'+status.liked_by.username">{{status.liked_by.username}}</a>
  215. <span v-if="status.liked_by.others == true">
  216. and <span class="font-weight-bold">others</span>
  217. </span>
  218. </span>
  219. </div>
  220. <div v-if="status.pf_type != 'text'" class="caption">
  221. <p v-if="!status.sensitive" class="mb-2 read-more" style="overflow: hidden;">
  222. <span class="username font-weight-bold">
  223. <bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
  224. </span>
  225. <span class="status-content" v-html="status.content"></span>
  226. </p>
  227. </div>
  228. <!-- <div class="comments" v-if="status.id == replyId && !status.comments_disabled">
  229. <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">
  230. <span>
  231. <a class="text-dark font-weight-bold mr-1" :href="profileUrl(reply)">{{reply.account.username}}</a>
  232. <span v-html="reply.content" style="word-break: break-all;" class="comment-body"></span>
  233. </span>
  234. <span class="mb-0" style="min-width:38px">
  235. <span v-on:click="likeStatus(reply, $event);">
  236. <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>
  237. </span>
  238. <!-- <post-menu :status="reply" :profile="profile" size="sm" :modal="'true'" :feed="feed" class="d-inline-flex pl-2"></post-menu> - ->
  239. <span class="text-lighter pl-2 cursor-pointer" @click="ctxMenu(reply)">
  240. <span class="fas fa-ellipsis-v text-lighter"></span>
  241. </span>
  242. </span>
  243. </p>
  244. </div> -->
  245. <div class="timestamp mt-2">
  246. <p class="small text-uppercase mb-0">
  247. <a :href="statusUrl(status)" class="text-muted">
  248. <timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
  249. </a>
  250. </p>
  251. </div>
  252. </div>
  253. <!--<div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white px-2 py-0">
  254. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  255. <li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
  256. </ul>
  257. </div>-->
  258. <!--<div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white sticky-md-bottom p-0">
  259. <form class="border-0 rounded-0 align-middle" method="post" action="/i/comment" :data-id="status.id" data-truncate="false">
  260. <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>
  261. <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" />
  262. </form>
  263. </div>-->
  264. </div>
  265. </div>
  266. <div v-if="!loading && feed.length">
  267. <div class="card shadow-none">
  268. <div class="card-body">
  269. <infinite-loading @infinite="infiniteTimeline" :distance="800">
  270. <div slot="no-more" class="font-weight-bold">No more posts to load</div>
  271. <div slot="no-results" class="font-weight-bold">No more posts to load</div>
  272. </infinite-loading>
  273. </div>
  274. </div>
  275. </div>
  276. <div v-if="!loading && scope == 'home' && feed.length == 0">
  277. <div class="card shadow-none border">
  278. <div class="card-body text-center">
  279. <p class="h2 font-weight-lighter p-5">Hello, {{profile.acct}}</p>
  280. <p class="text-lighter"><i class="fas fa-camera-retro fa-5x"></i></p>
  281. <p class="h3 font-weight-lighter p-5">Start following people to build your timeline.</p>
  282. <p><a href="/discover" class="btn btn-primary font-weight-bold py-0">Discover new people and posts</a></p>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. <div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
  289. <div>
  290. <!-- <div class="mb-4">
  291. <a class="btn btn-block btn-primary btn-sm font-weight-bold mb-3 border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
  292. <i class="far fa-plus-square pr-3 fa-lg pt-1"></i> New Post
  293. </a>
  294. </div> -->
  295. <div class="mb-4">
  296. <div v-show="!loading" class="">
  297. <div class="pb-2">
  298. <div class="media d-flex align-items-center">
  299. <a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3">
  300. <!-- <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'"> -->
  301. <div v-if="userStory" class="has-story cursor-pointer shadow-sm" @click="storyRedirect()">
  302. <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">
  303. </div>
  304. <div v-else>
  305. <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">
  306. </div>
  307. </a>
  308. <div class="media-body d-flex justify-content-between word-break" >
  309. <div>
  310. <p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">{{profile.username || 'loading...'}}</a></p>
  311. <p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
  312. </div>
  313. <div class="ml-2">
  314. <a class="text-muted" href="/settings/home">
  315. <i class="fas fa-cog fa-lg"></i>
  316. <span class="sr-only">User Settings</span>
  317. </a>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. <!-- <div class="card-footer bg-transparent border-top mt-2 py-1">
  323. <div class="d-flex justify-content-between text-center">
  324. <span class="cursor-pointer" @click="redirect(profile.url)">
  325. <p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p>
  326. <p class="mb-0 small text-muted">Posts</p>
  327. </span>
  328. <span class="cursor-pointer" @click="redirect(profile.url+'?md=followers')">
  329. <p class="mb-0 font-weight-bold">{{formatCount(profile.followers_count)}}</p>
  330. <p class="mb-0 small text-muted">Followers</p>
  331. </span>
  332. <span class="cursor-pointer" @click="redirect(profile.url+'?md=following')">
  333. <p class="mb-0 font-weight-bold">{{formatCount(profile.following_count)}}</p>
  334. <p class="mb-0 small text-muted">Following</p>
  335. </span>
  336. </div>
  337. </div> -->
  338. </div>
  339. </div>
  340. <div v-show="modes.notify == true && !loading" class="mb-4">
  341. <notification-card></notification-card>
  342. </div>
  343. <div v-show="showSuggestions == true && suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
  344. <div class="card shadow-none border">
  345. <div class="card-header bg-white d-flex align-items-center justify-content-between">
  346. <a class="small text-muted cursor-pointer" href="#" @click.prevent="refreshSuggestions" ref="suggestionRefresh"><i class="fas fa-sync-alt"></i></a>
  347. <div class="small text-dark text-uppercase font-weight-bold">Suggestions</div>
  348. <div class="small text-muted cursor-pointer" v-on:click="hideSuggestions"><i class="fas fa-times"></i></div>
  349. </div>
  350. <div class="card-body pt-0">
  351. <div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
  352. <a :href="'/'+rec.username">
  353. <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">
  354. </a>
  355. <div class="media-body">
  356. <p class="mb-0 font-weight-bold small">
  357. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  358. {{rec.username}}
  359. </a>
  360. </p>
  361. <p class="mb-0 small text-muted">{{rec.message}}</p>
  362. </div>
  363. <a class="font-weight-bold small" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  364. </div>
  365. </div>
  366. </div>
  367. </div>
  368. <footer>
  369. <div class="container pb-5">
  370. <p class="mb-0 text-uppercase font-weight-bold text-muted small">
  371. <a href="/site/about" class="text-dark pr-2">About</a>
  372. <a href="/site/help" class="text-dark pr-2">Help</a>
  373. <a href="/site/language" class="text-dark pr-2">Language</a>
  374. <a href="/discover/profiles" class="text-dark pr-2">Profiles</a>
  375. <a href="/discover/places" class="text-dark pr-2">Places</a>
  376. <a href="/site/privacy" class="text-dark pr-2">Privacy</a>
  377. <a href="/site/terms" class="text-dark pr-2">Terms</a>
  378. </p>
  379. <p class="mb-0 text-uppercase font-weight-bold text-muted small">
  380. <a href="http://pixelfed.org" class="text-muted" rel="noopener" title="" data-toggle="tooltip">Powered by Pixelfed</a>
  381. </p>
  382. </div>
  383. </footer>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. <div v-if="currentLayout === 'comments'" class="container p-0 overflow-hidden">
  389. <div class="row">
  390. <div class="col-12 col-md-6 offset-md-3">
  391. <div class="card shadow-none border" style="height:100vh;">
  392. <div class="card-header d-flex justify-content-between align-items-center">
  393. <div
  394. @click="commentNavigateBack(status.id)"
  395. class="cursor-pointer"
  396. >
  397. <i class="fas fa-chevron-left fa-lg px-2"></i>
  398. </div>
  399. <div>
  400. <p class="font-weight-bold mb-0 h5">Comments</p>
  401. </div>
  402. <div>
  403. <i class="fas fa-cog fa-lg text-white"></i>
  404. </div>
  405. </div>
  406. <div class="card-body" style="overflow-y: auto !important">
  407. <div class="media">
  408. <img :src="status.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
  409. <div class="media-body">
  410. <p class="d-flex justify-content-between align-items-top mb-0" style="overflow-y: hidden;">
  411. <span class="mr-2" style="font-size: 13px;">
  412. <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>
  413. <span class="text-break comment-body" style="word-break: break-all;" v-html="status.content"></span>
  414. </span>
  415. </p>
  416. </div>
  417. </div>
  418. <hr>
  419. <div class="postCommentsLoader text-center py-2">
  420. <div class="spinner-border" role="status">
  421. <span class="sr-only">Loading...</span>
  422. </div>
  423. </div>
  424. <div class="postCommentsContainer d-none">
  425. <p v-if="replies.length" class="mb-1 text-center load-more-link my-4">
  426. <a
  427. href="#"
  428. class="text-dark"
  429. title="Load more comments"
  430. @click.prevent="loadMoreComments"
  431. >
  432. <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>
  433. </a>
  434. </p>
  435. <div v-for="(reply, index) in replies" class="pb-3 media" :key="'tl' + reply.id + '_' + index">
  436. <img :src="reply.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
  437. <div class="media-body">
  438. <div v-if="reply.sensitive == true">
  439. <span class="py-3">
  440. <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>
  441. <span class="text-break" style="font-size: 13px;">
  442. <span class="font-italic text-muted">This comment may contain sensitive material</span>
  443. <span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
  444. </span>
  445. </span>
  446. </div>
  447. <div v-else>
  448. <p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
  449. <span class="mr-3" style="font-size: 13px;">
  450. <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>
  451. <span class="text-break comment-body" style="word-break: break-all;" v-html="reply.content"></span>
  452. </span>
  453. <span class="text-right" style="min-width: 30px;">
  454. <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>
  455. <span class="pl-2 text-lighter cursor-pointer" @click="ctxMenu(reply)">
  456. <span class="fas fa-ellipsis-v text-lighter"></span>
  457. </span>
  458. <!-- <post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block px-2" v-on:deletePost=""></post-menu> -->
  459. </span>
  460. </p>
  461. <p class="mb-0">
  462. <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>
  463. <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>
  464. <span class="small text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index, true)">Reply</span>
  465. </p>
  466. <div v-if="reply.reply_count > 0" class="cursor-pointer pb-2" v-on:click="toggleReplies(reply)">
  467. <span class="show-reply-bar"></span>
  468. <span class="comment-reaction small font-weight-bold">{{reply.thread ? 'Hide' : 'View'}} Replies ({{reply.reply_count}})</span>
  469. </div>
  470. <div v-if="reply.thread == true" class="comment-thread">
  471. <div v-for="(s, sindex) in reply.replies" class="py-1 media" :key="'cr' + s.id + '_' + index">
  472. <img :src="s.account.avatar" class="rounded-circle border mr-3" width="25px" height="25px">
  473. <div class="media-body">
  474. <p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
  475. <span class="mr-2" style="font-size: 13px;">
  476. <a class="text-dark font-weight-bold mr-1" :href="s.account.url" :title="s.account.username">{{s.account.username}}</a>
  477. <span class="text-break comment-body" style="word-break: break-all;" v-html="s.content"></span>
  478. </span>
  479. <span>
  480. <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>
  481. <!-- <post-menu :status="s" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2" v-on:deletePost="deleteCommentReply(s.id, sindex, index) "></post-menu> -->
  482. </span>
  483. </p>
  484. <p class="mb-0">
  485. <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>
  486. <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>
  487. </p>
  488. </div>
  489. </div>
  490. </div>
  491. </div>
  492. </div>
  493. </div>
  494. <div v-if="!replies.length">
  495. <p class="text-center text-muted font-weight-bold small">No comments yet</p>
  496. </div>
  497. </div>
  498. </div>
  499. <div class="card-footer mb-3">
  500. <div class="align-middle d-flex">
  501. <img
  502. :src="profile.avatar"
  503. width="36"
  504. height="36"
  505. class="rounded-circle border mr-3">
  506. <textarea
  507. class="form-control rounded-pill"
  508. name="comment"
  509. placeholder="Add a comment…"
  510. autocomplete="off"
  511. autocorrect="off"
  512. rows="1"
  513. maxlength="0"
  514. style="resize: none;overflow-y: hidden"
  515. @click="replyFocus(status)">
  516. </textarea>
  517. </div>
  518. </div>
  519. </div>
  520. </div>
  521. </div>
  522. </div>
  523. <div class="modal-stack">
  524. <b-modal ref="ctxModal"
  525. id="ctx-modal"
  526. hide-header
  527. hide-footer
  528. centered
  529. rounded
  530. size="sm"
  531. body-class="list-group-flush p-0 rounded">
  532. <div class="list-group text-center">
  533. <!-- <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>
  534. <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> -->
  535. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">View Post</div>
  536. <!-- <div v-if="ctxMenuStatus && ctxMenuStatus.local == true && !ctxMenuStatus.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
  537. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div> -->
  538. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div>
  539. <div v-if="ctxMenuStatus && profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
  540. <div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id" class="list-group-item rounded cursor-pointer text-danger" @click="ctxMenuReportPost()">Report</div>
  541. <div v-if="ctxMenuStatus && (profile.is_admin || profile.id == ctxMenuStatus.account.id)" class="list-group-item rounded cursor-pointer text-danger" @click="deletePost(ctxMenuStatus)">Delete</div>
  542. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
  543. </div>
  544. </b-modal>
  545. <b-modal ref="ctxModModal"
  546. id="ctx-mod-modal"
  547. hide-header
  548. hide-footer
  549. centered
  550. rounded
  551. size="sm"
  552. body-class="list-group-flush p-0 rounded">
  553. <div class="list-group text-center">
  554. <p class="py-2 px-3 mb-0">
  555. <div class="text-center font-weight-bold text-danger">Moderation Tools</div>
  556. <div class="small text-center text-muted">Select one of the following options</div>
  557. </p>
  558. <div class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'unlist')">Unlist from Timelines</div>
  559. <div v-if="ctxMenuStatus.sensitive" class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'remcw')">Remove Content Warning</div>
  560. <div v-else class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'addcw')">Add Content Warning</div>
  561. <!-- <div class="list-group-item rounded cursor-pointer" @click="ctxModOtherMenuShow()">Other</div> -->
  562. <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
  563. </div>
  564. </b-modal>
  565. <b-modal ref="ctxModOtherModal"
  566. id="ctx-mod-other-modal"
  567. hide-header
  568. hide-footer
  569. centered
  570. rounded
  571. size="sm"
  572. body-class="list-group-flush p-0 rounded">
  573. <div class="list-group text-center">
  574. <p class="py-2 px-3 mb-0">
  575. <div class="text-center font-weight-bold text-danger">Moderation Tools</div>
  576. <div class="small text-center text-muted">Select one of the following options</div>
  577. </p>
  578. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Unlist Posts</div>
  579. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Moderation Log</div>
  580. <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModOtherMenuClose()">Cancel</div>
  581. </div>
  582. </b-modal>
  583. <b-modal ref="ctxShareModal"
  584. id="ctx-share-modal"
  585. title="Share"
  586. hide-footer
  587. hide-header
  588. centered
  589. rounded
  590. size="sm"
  591. body-class="list-group-flush p-0 rounded text-center">
  592. <div class="list-group-item rounded cursor-pointer" @click="shareStatus(ctxMenuStatus, $event)">{{ctxMenuStatus.reblogged ? 'Unshare' : 'Share'}} to Followers</div>
  593. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
  594. <div v-if="ctxMenuStatus && ctxMenuStatus.local == true && !ctxMenuStatus.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
  595. <!-- <div class="list-group-item rounded cursor-pointer border-top-0">Email</div>
  596. <div class="list-group-item rounded cursor-pointer">Facebook</div>
  597. <div class="list-group-item rounded cursor-pointer">Mastodon</div>
  598. <div class="list-group-item rounded cursor-pointer">Pinterest</div>
  599. <div class="list-group-item rounded cursor-pointer">Pixelfed</div>
  600. <div class="list-group-item rounded cursor-pointer">Twitter</div>
  601. <div class="list-group-item rounded cursor-pointer">VK</div> -->
  602. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
  603. </b-modal>
  604. <b-modal ref="ctxEmbedModal"
  605. id="ctx-embed-modal"
  606. hide-header
  607. hide-footer
  608. centered
  609. rounded
  610. size="md"
  611. body-class="p-2 rounded">
  612. <div>
  613. <div class="form-group">
  614. <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>
  615. </div>
  616. <div class="form-group pl-2 d-flex justify-content-center">
  617. <div class="form-check mr-3">
  618. <input class="form-check-input" type="checkbox" v-model="ctxEmbedShowCaption" :disabled="ctxEmbedCompactMode == true">
  619. <label class="form-check-label font-weight-light">
  620. Show Caption
  621. </label>
  622. </div>
  623. <div class="form-check mr-3">
  624. <input class="form-check-input" type="checkbox" v-model="ctxEmbedShowLikes" :disabled="ctxEmbedCompactMode == true">
  625. <label class="form-check-label font-weight-light">
  626. Show Likes
  627. </label>
  628. </div>
  629. <div class="form-check">
  630. <input class="form-check-input" type="checkbox" v-model="ctxEmbedCompactMode">
  631. <label class="form-check-label font-weight-light">
  632. Compact Mode
  633. </label>
  634. </div>
  635. </div>
  636. <hr>
  637. <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>
  638. <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>
  639. </div>
  640. </b-modal>
  641. <b-modal ref="ctxReport"
  642. id="ctx-report"
  643. hide-header
  644. hide-footer
  645. centered
  646. rounded
  647. size="sm"
  648. body-class="list-group-flush p-0 rounded">
  649. <p class="py-2 px-3 mb-0">
  650. <div class="text-center font-weight-bold text-danger">Report</div>
  651. <div class="small text-center text-muted">Select one of the following options</div>
  652. </p>
  653. <div class="list-group text-center">
  654. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('spam')">Spam</div>
  655. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('sensitive')">Sensitive Content</div>
  656. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('abusive')">Abusive or Harmful</div>
  657. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="openCtxReportOtherMenu()">Other</div>
  658. <!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportMenuGoBack()">Go Back</div> -->
  659. <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportMenuGoBack()">Cancel</div>
  660. </div>
  661. </b-modal>
  662. <b-modal ref="ctxReportOther"
  663. id="ctx-report-other"
  664. hide-header
  665. hide-footer
  666. centered
  667. rounded
  668. size="sm"
  669. body-class="list-group-flush p-0 rounded">
  670. <p class="py-2 px-3 mb-0">
  671. <div class="text-center font-weight-bold text-danger">Report</div>
  672. <div class="small text-center text-muted">Select one of the following options</div>
  673. </p>
  674. <div class="list-group text-center">
  675. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('underage')">Underage Account</div>
  676. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('copyright')">Copyright Infringement</div>
  677. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('impersonation')">Impersonation</div>
  678. <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('scam')">Scam or Fraud</div>
  679. <!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('terrorism')">Terrorism Related</div> -->
  680. <!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('other')">Other or Not listed</div> -->
  681. <!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportOtherMenuGoBack()">Go Back</div> -->
  682. <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportOtherMenuGoBack()">Cancel</div>
  683. </div>
  684. </b-modal>
  685. <b-modal ref="ctxConfirm"
  686. id="ctx-confirm"
  687. hide-header
  688. hide-footer
  689. centered
  690. rounded
  691. size="sm"
  692. body-class="list-group-flush p-0 rounded">
  693. <div class="d-flex align-items-center justify-content-center py-3">
  694. <div>{{ this.confirmModalTitle }}</div>
  695. </div>
  696. <div class="d-flex border-top btn-group btn-group-block rounded-0" role="group">
  697. <button type="button" class="btn btn-outline-lighter border-left-0 border-top-0 border-bottom-0 border-right py-2" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalCancel()">Cancel</button>
  698. <button type="button" class="btn btn-outline-lighter border-0" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalConfirm()">Confirm</button>
  699. </div>
  700. </b-modal>
  701. <b-modal ref="lightboxModal"
  702. id="lightbox"
  703. hide-header
  704. hide-footer
  705. centered
  706. size="lg"
  707. body-class="p-0"
  708. >
  709. <div v-if="lightboxMedia" :class="lightboxMedia.filter_class" class="w-100 h-100">
  710. <img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%" alt="lightbox media">
  711. </div>
  712. </b-modal>
  713. <b-modal ref="replyModal"
  714. id="ctx-reply-modal"
  715. hide-footer
  716. centered
  717. rounded
  718. :title-html="replyStatus.account ? 'Reply to <span class=text-dark>' + replyStatus.account.username + '</span>' : ''"
  719. title-tag="p"
  720. title-class="font-weight-bold text-muted"
  721. size="md"
  722. body-class="p-2 rounded">
  723. <div>
  724. <vue-tribute :options="tributeSettings">
  725. <textarea
  726. class="form-control replyModalTextarea"
  727. rows="4"
  728. v-model="replyText">
  729. </textarea>
  730. </vue-tribute>
  731. <div class="border-top border-bottom my-2">
  732. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  733. <li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
  734. </ul>
  735. </div>
  736. <div class="d-flex justify-content-between align-items-center">
  737. <div>
  738. <span class="pl-2 small text-muted font-weight-bold text-monospace">
  739. <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}}
  740. </span>
  741. </div>
  742. <div class="d-flex align-items-center">
  743. <div class="custom-control custom-switch mr-3">
  744. <input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw">
  745. <label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
  746. </div>
  747. <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">
  748. {{replySending == true ? 'POSTING' : 'POST'}}
  749. </button>
  750. </div>
  751. </div>
  752. </div>
  753. </b-modal>
  754. <b-modal ref="ctxStatusModal"
  755. id="ctx-status-modal"
  756. hide-header
  757. hide-footer
  758. centered
  759. rounded
  760. size="xl"
  761. body-class="list-group-flush p-0 m-0 rounded">
  762. <!-- <post-component
  763. v-if="ctxMenuStatus"
  764. :status-template="ctxMenuStatus.pf_type"
  765. :status-id="ctxMenuStatus.id"
  766. :status-username="ctxMenuStatus.account.username"
  767. :status-url="ctxMenuStatus.url"
  768. :status-profile-url="ctxMenuStatus.account.url"
  769. :status-avatar="ctxMenuStatus.account.avatar"
  770. :status-profile-id="ctxMenuStatus.account.id"
  771. profile-layout="metro">
  772. </post-component> -->
  773. </b-modal>
  774. </div>
  775. </div>
  776. </template>
  777. <script type="text/javascript">
  778. import VueTribute from 'vue-tribute'
  779. export default {
  780. props: ['scope', 'layout'],
  781. components: {
  782. VueTribute
  783. },
  784. data() {
  785. return {
  786. ids: [],
  787. config: window.App.config,
  788. page: 2,
  789. feed: [],
  790. profile: {},
  791. min_id: 0,
  792. max_id: 0,
  793. suggestions: {},
  794. loading: true,
  795. replies: [],
  796. replyId: null,
  797. modes: {
  798. 'mod': false,
  799. 'dark': false,
  800. 'notify': true,
  801. 'distractionFree': false
  802. },
  803. followers: [],
  804. followerCursor: 1,
  805. followerMore: true,
  806. following: [],
  807. followingCursor: 1,
  808. followingMore: true,
  809. lightboxMedia: false,
  810. showSuggestions: true,
  811. showReadMore: true,
  812. replyStatus: {},
  813. replyText: '',
  814. replyNsfw: false,
  815. emoji: window.App.util.emoji,
  816. showHashtagPosts: false,
  817. hashtagPosts: [],
  818. hashtagPostsName: '',
  819. ctxMenuStatus: false,
  820. ctxMenuRelationship: false,
  821. ctxEmbedPayload: false,
  822. copiedEmbed: false,
  823. showTips: true,
  824. userStory: false,
  825. replySending: false,
  826. ctxEmbedShowCaption: true,
  827. ctxEmbedShowLikes: false,
  828. ctxEmbedCompactMode: false,
  829. morePostsAvailable: false,
  830. mpCount: 0,
  831. mpData: false,
  832. mpInterval: 15000,
  833. mpEnabled: false,
  834. mpPoller: null,
  835. confirmModalTitle: 'Are you sure?',
  836. confirmModalIdentifer: null,
  837. confirmModalType: false,
  838. currentLayout: 'feed',
  839. pagination: {},
  840. tributeSettings: {
  841. collection: [
  842. {
  843. trigger: '@',
  844. menuShowMinLength: 2,
  845. values: (function (text, cb) {
  846. let url = '/api/compose/v0/search/mention';
  847. axios.get(url, { params: { q: text }})
  848. .then(res => {
  849. cb(res.data);
  850. })
  851. .catch(err => {
  852. console.log(err);
  853. })
  854. })
  855. },
  856. {
  857. trigger: '#',
  858. menuShowMinLength: 2,
  859. values: (function (text, cb) {
  860. let url = '/api/compose/v0/search/hashtag';
  861. axios.get(url, { params: { q: text }})
  862. .then(res => {
  863. cb(res.data);
  864. })
  865. .catch(err => {
  866. console.log(err);
  867. })
  868. })
  869. }
  870. ]
  871. }
  872. }
  873. },
  874. watch: {
  875. ctxEmbedShowCaption: function (n,o) {
  876. if(n == true) {
  877. this.ctxEmbedCompactMode = false;
  878. }
  879. let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
  880. this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
  881. },
  882. ctxEmbedShowLikes: function (n,o) {
  883. if(n == true) {
  884. this.ctxEmbedCompactMode = false;
  885. }
  886. let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
  887. this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
  888. },
  889. ctxEmbedCompactMode: function (n,o) {
  890. if(n == true) {
  891. this.ctxEmbedShowCaption = false;
  892. this.ctxEmbedShowLikes = false;
  893. }
  894. let mode = this.ctxEmbedCompactMode ? 'compact' : 'full';
  895. this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode);
  896. }
  897. },
  898. beforeMount() {
  899. this.fetchProfile();
  900. this.fetchTimelineApi();
  901. },
  902. mounted() {
  903. // todo: release after dark mode updates
  904. /* if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || $('link[data-stylesheet="dark"]').length != 0) {
  905. this.modes.dark = true;
  906. let el = document.querySelector('link[data-stylesheet="light"]');
  907. el.setAttribute('href', '/css/appdark.css?id=' + Date.now());
  908. el.setAttribute('data-stylesheet', 'dark');
  909. }*/
  910. if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
  911. this.showSuggestions = false;
  912. } else {
  913. this.showSuggestions = true;
  914. }
  915. if(localStorage.getItem('pf_metro_ui.exp.rm') == 'false') {
  916. this.showReadMore = false;
  917. } else {
  918. this.showReadMore = true;
  919. }
  920. if(localStorage.getItem('metro-tips') == 'false') {
  921. this.showTips = false;
  922. }
  923. this.$nextTick(function () {
  924. $('[data-toggle="tooltip"]').tooltip();
  925. let u = new URLSearchParams(window.location.search);
  926. if(u.has('a') && u.get('a') == 'co') {
  927. $('#composeModal').modal('show');
  928. }
  929. });
  930. },
  931. updated() {
  932. if(this.showReadMore == true) {
  933. pixelfed.readmore();
  934. }
  935. },
  936. methods: {
  937. fetchProfile() {
  938. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  939. this.profile = res.data;
  940. if(this.profile.is_admin == true) {
  941. this.modes.mod = true;
  942. }
  943. window._sharedData.curUser = res.data;
  944. window.App.util.navatar();
  945. this.hasStory();
  946. // this.expRec();
  947. }).catch(err => {
  948. swal(
  949. 'Oops, something went wrong',
  950. 'Please reload the page.',
  951. 'error'
  952. );
  953. });
  954. },
  955. fetchTimelineApi() {
  956. let apiUrl = false;
  957. switch(this.scope) {
  958. case 'home':
  959. apiUrl = '/api/pixelfed/v1/timelines/home';
  960. break;
  961. case 'local':
  962. apiUrl = '/api/pixelfed/v1/timelines/public';
  963. break;
  964. case 'network':
  965. apiUrl = '/api/pixelfed/v1/timelines/network';
  966. break;
  967. }
  968. axios.get(apiUrl, {
  969. params: {
  970. max_id: this.max_id,
  971. limit: 3
  972. }
  973. }).then(res => {
  974. let data = res.data;
  975. this.feed.push(...data);
  976. let ids = data.map(status => status.id);
  977. this.ids = ids;
  978. this.min_id = Math.max(...ids).toString();
  979. this.max_id = Math.min(...ids).toString();
  980. this.loading = false;
  981. $('.timeline .pagination').removeClass('d-none');
  982. // if(this.feed.length == 4) {
  983. // this.fetchTimelineApi();
  984. // }
  985. if(this.hashtagPosts.length == 0) {
  986. this.fetchHashtagPosts();
  987. }
  988. // this.fetchStories();
  989. this.rtw();
  990. setTimeout(function() {
  991. document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) {
  992. i.href = App.util.format.rewriteLinks(i);
  993. });
  994. }, 500);
  995. }).catch(err => {
  996. swal(
  997. 'Oops, something went wrong',
  998. 'Please reload the page.',
  999. 'error'
  1000. );
  1001. });
  1002. },
  1003. infiniteTimeline($state) {
  1004. if(this.loading) {
  1005. $state.complete();
  1006. return;
  1007. }
  1008. if(this.page > 40) {
  1009. this.loading = false;
  1010. $state.complete();
  1011. }
  1012. let apiUrl = false;
  1013. switch(this.scope) {
  1014. case 'home':
  1015. apiUrl = '/api/pixelfed/v1/timelines/home';
  1016. break;
  1017. case 'local':
  1018. apiUrl = '/api/pixelfed/v1/timelines/public';
  1019. break;
  1020. case 'network':
  1021. apiUrl = '/api/pixelfed/v1/timelines/network';
  1022. break;
  1023. }
  1024. axios.get(apiUrl, {
  1025. params: {
  1026. max_id: this.max_id,
  1027. limit: 6
  1028. },
  1029. }).then(res => {
  1030. if (res.data.length && this.loading == false) {
  1031. let data = res.data;
  1032. let self = this;
  1033. data.forEach((d, index) => {
  1034. if(self.ids.indexOf(d.id) == -1) {
  1035. self.feed.push(d);
  1036. self.ids.push(d.id);
  1037. axios.post('/api/status/view', {
  1038. 'status_id': d.id,
  1039. 'profile_id': d.account.id
  1040. });
  1041. }
  1042. });
  1043. this.min_id = Math.max(...this.ids).toString();
  1044. this.max_id = Math.min(...this.ids).toString();
  1045. this.page += 1;
  1046. $state.loaded();
  1047. this.loading = false;
  1048. } else {
  1049. $state.complete();
  1050. }
  1051. }).catch(err => {
  1052. this.loading = false;
  1053. $state.complete();
  1054. });
  1055. },
  1056. reportUrl(status) {
  1057. let type = status.in_reply_to ? 'comment' : 'post';
  1058. let id = status.id;
  1059. return '/i/report?type=' + type + '&id=' + id;
  1060. },
  1061. commentFocus(status, $event) {
  1062. if(status.comments_disabled) {
  1063. return;
  1064. }
  1065. // if(this.status && this.status.id == status.id) {
  1066. // this.$refs.replyModal.show();
  1067. // return;
  1068. // }
  1069. this.status = status;
  1070. this.replies = {};
  1071. this.replyStatus = {};
  1072. this.replyText = '';
  1073. this.replyId = status.id;
  1074. this.replyStatus = status;
  1075. // this.$refs.replyModal.show();
  1076. this.fetchStatusComments(status, '');
  1077. $('nav').hide();
  1078. $('footer').hide();
  1079. $('.mobile-footer-spacer').attr('style', 'display:none !important');
  1080. $('.mobile-footer').attr('style', 'display:none !important');
  1081. this.currentLayout = 'comments';
  1082. window.history.pushState({}, '', status.url);
  1083. return;
  1084. },
  1085. commentNavigateBack(id) {
  1086. $('nav').show();
  1087. $('footer').show();
  1088. $('.mobile-footer-spacer').attr('style', 'display:block');
  1089. $('.mobile-footer').attr('style', 'display:block');
  1090. this.currentLayout = 'feed';
  1091. setTimeout(function() {
  1092. $([document.documentElement, document.body]).animate({
  1093. scrollTop: $(`div[data-status-id="${id}"]`).offset().top
  1094. }, 1000);
  1095. }, 500);
  1096. let path = this.scope == 'home' ? '/' : '/timeline/public';
  1097. window.history.pushState({}, '', path);
  1098. },
  1099. likeStatus(status, event) {
  1100. if($('body').hasClass('loggedIn') == false) {
  1101. return;
  1102. }
  1103. let count = status.favourites_count;
  1104. status.favourited = !status.favourited;
  1105. axios.post('/i/like', {
  1106. item: status.id
  1107. }).then(res => {
  1108. status.favourites_count = res.data.count;
  1109. }).catch(err => {
  1110. status.favourited = !status.favourited;
  1111. status.favourites_count = count;
  1112. swal('Error', 'Something went wrong, please try again later.', 'error');
  1113. });
  1114. window.navigator.vibrate(200);
  1115. if(status.favourited) {
  1116. setTimeout(function() {
  1117. event.target.classList.add('animate__animated', 'animate__bounce');
  1118. },100);
  1119. }
  1120. },
  1121. shareStatus(status, $event) {
  1122. if($('body').hasClass('loggedIn') == false) {
  1123. return;
  1124. }
  1125. this.closeModals();
  1126. axios.post('/i/share', {
  1127. item: status.id
  1128. }).then(res => {
  1129. status.reblogs_count = res.data.count;
  1130. status.reblogged = !status.reblogged;
  1131. if(status.reblogged) {
  1132. swal('Success', 'You shared this post', 'success');
  1133. } else {
  1134. swal('Success', 'You unshared this post', 'success');
  1135. }
  1136. }).catch(err => {
  1137. swal('Error', 'Something went wrong, please try again later.', 'error');
  1138. });
  1139. },
  1140. timestampFormat(timestamp) {
  1141. let ts = new Date(timestamp);
  1142. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  1143. },
  1144. redirect(url) {
  1145. window.location.href = url;
  1146. return;
  1147. },
  1148. statusOwner(status) {
  1149. let sid = status.account.id;
  1150. let uid = this.profile.id;
  1151. if(sid == uid) {
  1152. return true;
  1153. } else {
  1154. return false;
  1155. }
  1156. },
  1157. fetchStatusComments(status, card) {
  1158. // axios.get('/api/v2/status/'+status.id+'/replies',
  1159. // {
  1160. // params: {
  1161. // limit: 6
  1162. // }
  1163. // })
  1164. // .then(res => {
  1165. // let data = res.data.filter(res => {
  1166. // return res.sensitive == false;
  1167. // });
  1168. // this.replies = _.reverse(data);
  1169. // setTimeout(function() {
  1170. // document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) {
  1171. // i.href = App.util.format.rewriteLinks(i);
  1172. // });
  1173. // }, 500);
  1174. // }).catch(err => {
  1175. // })
  1176. let url = '/api/v2/comments/'+status.account.id+'/status/'+status.id;
  1177. axios.get(url)
  1178. .then(response => {
  1179. let self = this;
  1180. // this.results = this.layout == 'metro' ?
  1181. // _.reverse(response.data.data) :
  1182. // response.data.data;
  1183. this.replies = _.reverse(response.data.data);
  1184. this.pagination = response.data.meta.pagination;
  1185. if(this.replies.length > 0) {
  1186. $('.load-more-link').removeClass('d-none');
  1187. }
  1188. $('.postCommentsLoader').addClass('d-none');
  1189. $('.postCommentsContainer').removeClass('d-none');
  1190. // setTimeout(function() {
  1191. // document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
  1192. // i.href = App.util.format.rewriteLinks(i);
  1193. // });
  1194. // }, 500);
  1195. }).catch(error => {
  1196. if(!error.response) {
  1197. $('.postCommentsLoader .lds-ring')
  1198. .attr('style','width:100%')
  1199. .addClass('pt-4 font-weight-bold text-muted')
  1200. .text('An error occurred, cannot fetch comments. Please try again later.');
  1201. } else {
  1202. switch(error.response.status) {
  1203. case 401:
  1204. $('.postCommentsLoader .lds-ring')
  1205. .attr('style','width:100%')
  1206. .addClass('pt-4 font-weight-bold text-muted')
  1207. .text('Please login to view.');
  1208. break;
  1209. default:
  1210. $('.postCommentsLoader .lds-ring')
  1211. .attr('style','width:100%')
  1212. .addClass('pt-4 font-weight-bold text-muted')
  1213. .text('An error occurred, cannot fetch comments. Please try again later.');
  1214. break;
  1215. }
  1216. }
  1217. });
  1218. },
  1219. muteProfile(status) {
  1220. if($('body').hasClass('loggedIn') == false) {
  1221. return;
  1222. }
  1223. axios.post('/i/mute', {
  1224. type: 'user',
  1225. item: status.account.id
  1226. }).then(res => {
  1227. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  1228. swal('Success', 'You have successfully muted ' + status.account.acct, 'success');
  1229. }).catch(err => {
  1230. swal('Error', 'Something went wrong. Please try again later.', 'error');
  1231. });
  1232. },
  1233. blockProfile(status) {
  1234. if($('body').hasClass('loggedIn') == false) {
  1235. return;
  1236. }
  1237. axios.post('/i/block', {
  1238. type: 'user',
  1239. item: status.account.id
  1240. }).then(res => {
  1241. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  1242. swal('Success', 'You have successfully blocked ' + status.account.acct, 'success');
  1243. }).catch(err => {
  1244. swal('Error', 'Something went wrong. Please try again later.', 'error');
  1245. });
  1246. },
  1247. deletePost(status) {
  1248. if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) {
  1249. return;
  1250. }
  1251. if(window.confirm('Are you sure you want to delete this post?') == false) {
  1252. return;
  1253. }
  1254. axios.post('/i/delete', {
  1255. type: 'status',
  1256. item: status.id
  1257. }).then(res => {
  1258. this.feed = this.feed.filter(s => {
  1259. return s.id != status.id;
  1260. });
  1261. this.closeModals();
  1262. }).catch(err => {
  1263. swal('Error', 'Something went wrong. Please try again later.', 'error');
  1264. });
  1265. },
  1266. commentSubmit(status, $event) {
  1267. this.replySending = true;
  1268. let id = status.id;
  1269. let comment = this.replyText;
  1270. let limit = this.config.uploader.max_caption_length;
  1271. if(comment.length > limit) {
  1272. this.replySending = false;
  1273. swal('Comment Too Long', 'Please make sure your comment is '+limit+' characters or less.', 'error');
  1274. return;
  1275. }
  1276. axios.post('/i/comment', {
  1277. item: id,
  1278. comment: comment,
  1279. sensitive: this.replyNsfw
  1280. }).then(res => {
  1281. this.replyText = '';
  1282. this.replies.push(res.data.entity);
  1283. this.$refs.replyModal.hide();
  1284. });
  1285. this.replySending = false;
  1286. },
  1287. moderatePost(status, action, $event) {
  1288. let username = status.account.username;
  1289. let msg = '';
  1290. let self = this;
  1291. switch(action) {
  1292. case 'addcw':
  1293. msg = 'Are you sure you want to add a content warning to this post?';
  1294. swal({
  1295. title: 'Confirm',
  1296. text: msg,
  1297. icon: 'warning',
  1298. buttons: true,
  1299. dangerMode: true
  1300. }).then(res => {
  1301. if(res) {
  1302. axios.post('/api/v2/moderator/action', {
  1303. action: action,
  1304. item_id: status.id,
  1305. item_type: 'status'
  1306. }).then(res => {
  1307. swal('Success', 'Successfully added content warning', 'success');
  1308. status.sensitive = true;
  1309. self.ctxModMenuClose();
  1310. }).catch(err => {
  1311. swal(
  1312. 'Error',
  1313. 'Something went wrong, please try again later.',
  1314. 'error'
  1315. );
  1316. self.ctxModMenuClose();
  1317. });
  1318. }
  1319. });
  1320. break;
  1321. case 'remcw':
  1322. msg = 'Are you sure you want to remove the content warning on this post?';
  1323. swal({
  1324. title: 'Confirm',
  1325. text: msg,
  1326. icon: 'warning',
  1327. buttons: true,
  1328. dangerMode: true
  1329. }).then(res => {
  1330. if(res) {
  1331. axios.post('/api/v2/moderator/action', {
  1332. action: action,
  1333. item_id: status.id,
  1334. item_type: 'status'
  1335. }).then(res => {
  1336. swal('Success', 'Successfully added content warning', 'success');
  1337. status.sensitive = false;
  1338. self.ctxModMenuClose();
  1339. }).catch(err => {
  1340. swal(
  1341. 'Error',
  1342. 'Something went wrong, please try again later.',
  1343. 'error'
  1344. );
  1345. self.ctxModMenuClose();
  1346. });
  1347. }
  1348. });
  1349. break;
  1350. case 'unlist':
  1351. msg = 'Are you sure you want to unlist this post?';
  1352. swal({
  1353. title: 'Confirm',
  1354. text: msg,
  1355. icon: 'warning',
  1356. buttons: true,
  1357. dangerMode: true
  1358. }).then(res => {
  1359. if(res) {
  1360. axios.post('/api/v2/moderator/action', {
  1361. action: action,
  1362. item_id: status.id,
  1363. item_type: 'status'
  1364. }).then(res => {
  1365. this.feed = this.feed.filter(f => {
  1366. return f.id != status.id;
  1367. });
  1368. swal('Success', 'Successfully unlisted post', 'success');
  1369. self.ctxModMenuClose();
  1370. }).catch(err => {
  1371. self.ctxModMenuClose();
  1372. swal(
  1373. 'Error',
  1374. 'Something went wrong, please try again later.',
  1375. 'error'
  1376. );
  1377. });
  1378. }
  1379. });
  1380. break;
  1381. }
  1382. },
  1383. followingModal() {
  1384. if(this.following.length > 0) {
  1385. this.$refs.followingModal.show();
  1386. return;
  1387. }
  1388. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  1389. params: {
  1390. page: this.followingCursor
  1391. }
  1392. })
  1393. .then(res => {
  1394. this.following = res.data;
  1395. this.followingCursor++;
  1396. });
  1397. if(res.data.length < 10) {
  1398. this.followingMore = false;
  1399. }
  1400. this.$refs.followingModal.show();
  1401. },
  1402. followersModal() {
  1403. if(this.followers.length > 0) {
  1404. this.$refs.followerModal.show();
  1405. return;
  1406. }
  1407. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  1408. params: {
  1409. page: this.followerCursor
  1410. }
  1411. })
  1412. .then(res => {
  1413. this.followers = res.data;
  1414. this.followerCursor++;
  1415. })
  1416. if(res.data.length < 10) {
  1417. this.followerMore = false;
  1418. }
  1419. this.$refs.followerModal.show();
  1420. },
  1421. followingLoadMore() {
  1422. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  1423. params: {
  1424. page: this.followingCursor
  1425. }
  1426. })
  1427. .then(res => {
  1428. if(res.data.length > 0) {
  1429. this.following.push(...res.data);
  1430. this.followingCursor++;
  1431. }
  1432. if(res.data.length < 10) {
  1433. this.followingMore = false;
  1434. }
  1435. });
  1436. },
  1437. followersLoadMore() {
  1438. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  1439. params: {
  1440. page: this.followerCursor
  1441. }
  1442. })
  1443. .then(res => {
  1444. if(res.data.length > 0) {
  1445. this.followers.push(...res.data);
  1446. this.followerCursor++;
  1447. }
  1448. if(res.data.length < 10) {
  1449. this.followerMore = false;
  1450. }
  1451. });
  1452. },
  1453. lightbox(status) {
  1454. window.location.href = status.media_attachments[0].url;
  1455. return;
  1456. this.lightboxMedia = status.media_attachments[0];
  1457. this.$refs.lightboxModal.show();
  1458. },
  1459. expLc(status) {
  1460. if(this.config.ab.lc == false) {
  1461. return true;
  1462. }
  1463. if(this.statusOwner(status) == true) {
  1464. return true;
  1465. }
  1466. return false;
  1467. },
  1468. expRec() {
  1469. //return;
  1470. if(this.config.ab.rec == false) {
  1471. return;
  1472. }
  1473. axios.get('/api/local/exp/rec')
  1474. .then(res => {
  1475. this.suggestions = res.data;
  1476. })
  1477. },
  1478. expRecFollow(id, index) {
  1479. return;
  1480. if(this.config.ab.rec == false) {
  1481. return;
  1482. }
  1483. axios.post('/i/follow', {
  1484. item: id
  1485. }).then(res => {
  1486. this.suggestions.splice(index, 1);
  1487. }).catch(err => {
  1488. if(err.response.data.message) {
  1489. swal('Error', err.response.data.message, 'error');
  1490. }
  1491. });
  1492. },
  1493. followAction(status) {
  1494. let id = status.account.id;
  1495. axios.post('/i/follow', {
  1496. item: id
  1497. }).then(res => {
  1498. this.feed.forEach(s => {
  1499. if(s.account.id == id) {
  1500. s.account.relationship.following = !s.account.relationship.following;
  1501. }
  1502. });
  1503. let username = status.account.acct;
  1504. if(status.account.relationship.following) {
  1505. swal('Follow successful!', 'You are now following ' + username, 'success');
  1506. } else {
  1507. swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
  1508. }
  1509. }).catch(err => {
  1510. if(err.response.data.message) {
  1511. swal('Error', err.response.data.message, 'error');
  1512. }
  1513. });
  1514. },
  1515. owner(status) {
  1516. return this.profile.id === status.account.id;
  1517. },
  1518. admin() {
  1519. return this.profile.is_admin == true;
  1520. },
  1521. ownerOrAdmin(status) {
  1522. return this.owner(status) || this.admin();
  1523. },
  1524. hideSuggestions() {
  1525. localStorage.setItem('pf_metro_ui.exp.rec', false);
  1526. this.showSuggestions = false;
  1527. },
  1528. emojiReaction(status) {
  1529. let em = event.target.innerText;
  1530. if(this.replyText.length == 0) {
  1531. this.replyText = em + ' ';
  1532. $('textarea[name="comment"]').focus();
  1533. } else {
  1534. this.replyText += em + ' ';
  1535. $('textarea[name="comment"]').focus();
  1536. }
  1537. },
  1538. refreshSuggestions() {
  1539. return;
  1540. let el = event.target.parentNode;
  1541. if(el.classList.contains('disabled') == true) {
  1542. return;
  1543. }
  1544. axios.get('/api/local/exp/rec', {
  1545. params: {
  1546. refresh: true
  1547. }
  1548. })
  1549. .then(res => {
  1550. this.suggestions = res.data;
  1551. if (el.classList) {
  1552. el.classList.add('disabled');
  1553. el.classList.add('text-light');
  1554. }
  1555. else {
  1556. el.className += ' ' + 'disabled text-light';
  1557. }
  1558. setTimeout(function() {
  1559. el.setAttribute('href', '#');
  1560. if (el.classList) {
  1561. el.classList.remove('disabled');
  1562. el.classList.remove('text-light');
  1563. }
  1564. else {
  1565. el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), 'disabled text-light');
  1566. }
  1567. }, 10000);
  1568. });
  1569. },
  1570. fetchHashtagPosts() {
  1571. axios.get('/api/local/discover/tag/list')
  1572. .then(res => {
  1573. let tags = res.data;
  1574. if(tags.length == 0) {
  1575. return;
  1576. }
  1577. let hashtag = tags[Math.floor(Math.random(), tags.length)];
  1578. this.hashtagPostsName = hashtag;
  1579. axios.get('/api/v2/discover/tag', {
  1580. params: {
  1581. hashtag: hashtag
  1582. }
  1583. }).then(res => {
  1584. if(res.data.tags.length > 3) {
  1585. this.showHashtagPosts = true;
  1586. this.hashtagPosts = res.data.tags.splice(0,3);
  1587. }
  1588. })
  1589. })
  1590. },
  1591. ctxMenu(status) {
  1592. this.ctxMenuStatus = status;
  1593. this.ctxEmbedPayload = window.App.util.embed.post(status.url);
  1594. if(status.account.id == this.profile.id) {
  1595. this.ctxMenuRelationship = false;
  1596. this.$refs.ctxModal.show();
  1597. } else {
  1598. axios.get('/api/pixelfed/v1/accounts/relationships', {
  1599. params: {
  1600. 'id[]': status.account.id
  1601. }
  1602. }).then(res => {
  1603. this.ctxMenuRelationship = res.data[0];
  1604. this.$refs.ctxModal.show();
  1605. });
  1606. }
  1607. },
  1608. closeCtxMenu(truncate) {
  1609. this.copiedEmbed = false;
  1610. this.ctxMenuStatus = false;
  1611. this.ctxMenuRelationship = false;
  1612. this.$refs.ctxModal.hide();
  1613. this.$refs.ctxReport.hide();
  1614. this.$refs.ctxReportOther.hide();
  1615. this.closeModals();
  1616. },
  1617. ctxMenuCopyLink() {
  1618. let status = this.ctxMenuStatus;
  1619. navigator.clipboard.writeText(status.url);
  1620. this.closeModals();
  1621. return;
  1622. },
  1623. ctxMenuGoToPost() {
  1624. let status = this.ctxMenuStatus;
  1625. window.location.href = this.statusUrl(status);
  1626. this.closeCtxMenu();
  1627. return;
  1628. },
  1629. ctxMenuFollow() {
  1630. let id = this.ctxMenuStatus.account.id;
  1631. axios.post('/i/follow', {
  1632. item: id
  1633. }).then(res => {
  1634. let username = this.ctxMenuStatus.account.acct;
  1635. this.closeCtxMenu();
  1636. setTimeout(function() {
  1637. swal('Follow successful!', 'You are now following ' + username, 'success');
  1638. }, 500);
  1639. });
  1640. },
  1641. ctxMenuUnfollow() {
  1642. let id = this.ctxMenuStatus.account.id;
  1643. axios.post('/i/follow', {
  1644. item: id
  1645. }).then(res => {
  1646. let username = this.ctxMenuStatus.account.acct;
  1647. if(this.scope == 'home') {
  1648. this.feed = this.feed.filter(s => {
  1649. return s.account.id != this.ctxMenuStatus.account.id;
  1650. });
  1651. }
  1652. this.closeCtxMenu();
  1653. setTimeout(function() {
  1654. swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
  1655. }, 500);
  1656. });
  1657. },
  1658. ctxMenuReportPost() {
  1659. this.$refs.ctxModal.hide();
  1660. this.$refs.ctxReport.show();
  1661. return;
  1662. // window.location.href = '/i/report?type=post&id=' + this.ctxMenuStatus.id;
  1663. },
  1664. ctxMenuEmbed() {
  1665. this.closeModals();
  1666. this.$refs.ctxEmbedModal.show();
  1667. },
  1668. ctxMenuShare() {
  1669. this.$refs.ctxModal.hide();
  1670. this.$refs.ctxShareModal.show();
  1671. },
  1672. closeCtxShareMenu() {
  1673. this.$refs.ctxShareModal.hide();
  1674. this.$refs.ctxModal.show();
  1675. },
  1676. ctxCopyEmbed() {
  1677. navigator.clipboard.writeText(this.ctxEmbedPayload);
  1678. this.ctxEmbedShowCaption = true;
  1679. this.ctxEmbedShowLikes = false;
  1680. this.ctxEmbedCompactMode = false;
  1681. this.$refs.ctxEmbedModal.hide();
  1682. },
  1683. ctxModMenuShow() {
  1684. this.$refs.ctxModal.hide();
  1685. this.$refs.ctxModModal.show();
  1686. },
  1687. ctxModOtherMenuShow() {
  1688. this.$refs.ctxModal.hide();
  1689. this.$refs.ctxModModal.hide();
  1690. this.$refs.ctxModOtherModal.show();
  1691. },
  1692. ctxModMenu() {
  1693. this.$refs.ctxModal.hide();
  1694. },
  1695. ctxModMenuClose() {
  1696. this.closeModals();
  1697. this.$refs.ctxModal.show();
  1698. },
  1699. ctxModOtherMenuClose() {
  1700. this.closeModals();
  1701. this.$refs.ctxModModal.show();
  1702. },
  1703. formatCount(count) {
  1704. return App.util.format.count(count);
  1705. },
  1706. statusUrl(status) {
  1707. if(status.local == true) {
  1708. return status.url;
  1709. }
  1710. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  1711. },
  1712. profileUrl(status) {
  1713. if(status.local == true) {
  1714. return status.account.url;
  1715. }
  1716. return '/i/web/profile/_/' + status.account.id;
  1717. },
  1718. statusCardUsernameFormat(status) {
  1719. if(status.account.local == true) {
  1720. return status.account.username;
  1721. }
  1722. let fmt = window.App.config.username.remote.format;
  1723. let txt = window.App.config.username.remote.custom;
  1724. let usr = status.account.username;
  1725. let dom = document.createElement('a');
  1726. dom.href = status.account.url;
  1727. dom = dom.hostname;
  1728. switch(fmt) {
  1729. case '@':
  1730. return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
  1731. break;
  1732. case 'from':
  1733. return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
  1734. break;
  1735. case 'custom':
  1736. return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
  1737. break;
  1738. default:
  1739. return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
  1740. break;
  1741. }
  1742. },
  1743. previewUrl(status) {
  1744. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  1745. },
  1746. previewBackground(status) {
  1747. let preview = this.previewUrl(status);
  1748. return 'background-image: url(' + preview + ');';
  1749. },
  1750. trimCaption(caption, len = 60) {
  1751. return _.truncate(caption, {
  1752. length: len
  1753. });
  1754. },
  1755. hasStory() {
  1756. axios.get('/api/stories/v0/exists/'+this.profile.id)
  1757. .then(res => {
  1758. this.userStory = res.data;
  1759. })
  1760. },
  1761. // real time watcher
  1762. rtw() {
  1763. this.mpPoller = setInterval(() => {
  1764. let apiUrl = false;
  1765. this.mpCount++;
  1766. if(this.mpCount > 10) {
  1767. this.mpInterval = 30000;
  1768. }
  1769. if(this.mpCount > 50) {
  1770. this.mpInterval = (5 * 60 * 1000);
  1771. }
  1772. switch(this.scope) {
  1773. case 'home':
  1774. apiUrl = '/api/pixelfed/v1/timelines/home';
  1775. break;
  1776. case 'local':
  1777. apiUrl = '/api/pixelfed/v1/timelines/public';
  1778. break;
  1779. case 'network':
  1780. apiUrl = '/api/pixelfed/v1/timelines/network';
  1781. break;
  1782. }
  1783. axios.get(apiUrl, {
  1784. params: {
  1785. max_id: 0,
  1786. limit: 20
  1787. }
  1788. }).then(res => {
  1789. let self = this;
  1790. let tids = this.feed.map(status => status.id);
  1791. let data = res.data.filter(d => {
  1792. return d.id > self.min_id && tids.indexOf(d.id) == -1;
  1793. });
  1794. let ids = data.map(status => status.id);
  1795. let max = Math.max(...ids).toString();
  1796. let newer = max > this.min_id;
  1797. if(newer) {
  1798. this.morePostsAvailable = true;
  1799. this.mpData = data;
  1800. }
  1801. });
  1802. }, this.mpInterval);
  1803. },
  1804. syncNewPosts() {
  1805. let self = this;
  1806. let data = this.mpData;
  1807. let ids = data.map(s => s.id);
  1808. this.min_id = Math.max(...ids).toString();
  1809. this.max_id = Math.min(...ids).toString();
  1810. this.feed.unshift(...data);
  1811. this.morePostsAvailable = false;
  1812. this.mpData = null;
  1813. },
  1814. switchFeedLayout(toggle) {
  1815. this.loading = true;
  1816. this.layout = toggle;
  1817. let self = this;
  1818. setTimeout(function() {
  1819. self.loading = false;
  1820. }, 500);
  1821. },
  1822. labelRedirect(type) {
  1823. let url = '/i/redirect?url=' + encodeURI(this.config.features.label.covid.url);
  1824. window.location.href = url;
  1825. },
  1826. openCtxReportOtherMenu() {
  1827. let s = this.ctxMenuStatus;
  1828. this.closeCtxMenu();
  1829. this.ctxMenuStatus = s;
  1830. this.$refs.ctxReportOther.show();
  1831. },
  1832. ctxReportMenuGoBack() {
  1833. this.$refs.ctxReportOther.hide();
  1834. this.$refs.ctxReport.hide();
  1835. this.$refs.ctxModal.show();
  1836. },
  1837. ctxReportOtherMenuGoBack() {
  1838. this.$refs.ctxReportOther.hide();
  1839. this.$refs.ctxModal.hide();
  1840. this.$refs.ctxReport.show();
  1841. },
  1842. sendReport(type) {
  1843. let id = this.ctxMenuStatus.id;
  1844. swal({
  1845. 'title': 'Confirm Report',
  1846. 'text': 'Are you sure you want to report this post?',
  1847. 'icon': 'warning',
  1848. 'buttons': true,
  1849. 'dangerMode': true
  1850. }).then((res) => {
  1851. if(res) {
  1852. axios.post('/i/report/', {
  1853. 'report': type,
  1854. 'type': 'post',
  1855. 'id': id,
  1856. }).then(res => {
  1857. this.closeCtxMenu();
  1858. swal('Report Sent!', 'We have successfully received your report.', 'success');
  1859. }).catch(err => {
  1860. swal('Oops!', 'There was an issue reporting this post.', 'error');
  1861. })
  1862. } else {
  1863. this.closeCtxMenu();
  1864. }
  1865. });
  1866. },
  1867. closeModals() {
  1868. this.$refs.ctxModal.hide();
  1869. this.$refs.ctxModModal.hide();
  1870. this.$refs.ctxModOtherModal.hide();
  1871. this.$refs.ctxShareModal.hide();
  1872. this.$refs.ctxEmbedModal.hide();
  1873. this.$refs.ctxReport.hide();
  1874. this.$refs.ctxReportOther.hide();
  1875. this.$refs.ctxConfirm.hide();
  1876. this.$refs.lightboxModal.hide();
  1877. this.$refs.replyModal.hide();
  1878. this.$refs.ctxStatusModal.hide();
  1879. },
  1880. openCtxStatusModal() {
  1881. this.closeModals();
  1882. this.$refs.ctxStatusModal.show();
  1883. },
  1884. openConfirmModal() {
  1885. this.closeModals();
  1886. this.$refs.ctxConfirm.show();
  1887. },
  1888. closeConfirmModal() {
  1889. this.closeModals();
  1890. this.confirmModalTitle = 'Are you sure?';
  1891. this.confirmModalType = false;
  1892. this.confirmModalIdentifer = null;
  1893. },
  1894. confirmModalConfirm() {
  1895. switch(this.confirmModalType) {
  1896. case 'post.delete':
  1897. axios.post('/i/delete', {
  1898. type: 'status',
  1899. item: this.confirmModalIdentifer
  1900. }).then(res => {
  1901. this.feed = this.feed.filter(s => {
  1902. return s.id != this.confirmModalIdentifer;
  1903. });
  1904. this.closeConfirmModal();
  1905. }).catch(err => {
  1906. this.closeConfirmModal();
  1907. swal('Error', 'Something went wrong. Please try again later.', 'error');
  1908. });
  1909. break;
  1910. }
  1911. this.closeConfirmModal();
  1912. },
  1913. confirmModalCancel() {
  1914. this.closeConfirmModal();
  1915. },
  1916. timeAgo(ts) {
  1917. return App.util.format.timeAgo(ts);
  1918. },
  1919. toggleReplies(reply) {
  1920. if(reply.thread) {
  1921. reply.thread = false;
  1922. } else {
  1923. if(reply.replies.length > 0) {
  1924. reply.thread = true;
  1925. return;
  1926. }
  1927. let url = '/api/v2/comments/'+reply.account.id+'/status/'+reply.id;
  1928. axios.get(url)
  1929. .then(response => {
  1930. reply.replies = _.reverse(response.data.data);
  1931. reply.thread = true;
  1932. });
  1933. }
  1934. },
  1935. likeReply(status, $event) {
  1936. if($('body').hasClass('loggedIn') == false) {
  1937. swal('Login', 'Please login to perform this action.', 'info');
  1938. return;
  1939. }
  1940. axios.post('/i/like', {
  1941. item: status.id
  1942. }).then(res => {
  1943. status.favourites_count = res.data.count;
  1944. if(status.favourited == true) {
  1945. status.favourited = false;
  1946. } else {
  1947. status.favourited = true;
  1948. }
  1949. }).catch(err => {
  1950. swal('Error', 'Something went wrong, please try again later.', 'error');
  1951. });
  1952. },
  1953. replyFocus(e, index, prependUsername = false) {
  1954. if($('body').hasClass('loggedIn') == false) {
  1955. this.redirect('/login?next=' + encodeURIComponent(window.location.pathname));
  1956. return;
  1957. }
  1958. if(this.status.comments_disabled) {
  1959. return;
  1960. }
  1961. this.replyToIndex = index;
  1962. this.replyingToId = e.id;
  1963. this.replyingToUsername = e.account.username;
  1964. this.reply_to_profile_id = e.account.id;
  1965. let username = e.account.local ? '@' + e.account.username + ' '
  1966. : '@' + e.account.acct + ' ';
  1967. if(prependUsername == true) {
  1968. this.replyText = username;
  1969. }
  1970. this.$refs.replyModal.show();
  1971. setTimeout(function() {
  1972. $('.replyModalTextarea').focus();
  1973. }, 500);
  1974. },
  1975. loadMoreComments() {
  1976. if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
  1977. $('.load-more-link').addClass('d-none');
  1978. return;
  1979. }
  1980. $('.load-more-link').addClass('d-none');
  1981. $('.postCommentsLoader').removeClass('d-none');
  1982. let next = this.pagination.links.next;
  1983. axios.get(next)
  1984. .then(response => {
  1985. let self = this;
  1986. let res = response.data.data;
  1987. $('.postCommentsLoader').addClass('d-none');
  1988. for(let i=0; i < res.length; i++) {
  1989. this.replies.unshift(res[i]);
  1990. }
  1991. this.pagination = response.data.meta.pagination;
  1992. $('.load-more-link').removeClass('d-none');
  1993. });
  1994. }
  1995. },
  1996. beforeDestroy () {
  1997. clearInterval(this.mpInterval);
  1998. }
  1999. }
  2000. </script>
  2001. <style type="text/css" scoped>
  2002. .postPresenterContainer {
  2003. display: flex;
  2004. align-items: center;
  2005. background: #fff;
  2006. }
  2007. .word-break {
  2008. word-break: break-all;
  2009. }
  2010. .small .custom-control-label {
  2011. padding-top: 3px;
  2012. }
  2013. /*.reply-btn {
  2014. position: absolute;
  2015. bottom: 30px;
  2016. right: 20px;
  2017. width: 60px;
  2018. text-align: center;
  2019. font-size: 13px;
  2020. border-radius: 0 3px 3px 0;
  2021. }*/
  2022. .emoji-reactions .nav-item {
  2023. font-size: 1.2rem;
  2024. padding: 9px;
  2025. cursor: pointer;
  2026. }
  2027. .emoji-reactions::-webkit-scrollbar {
  2028. width: 0px;
  2029. height: 0px;
  2030. background: transparent;
  2031. }
  2032. .reply-btn[disabled] {
  2033. opacity: .3;
  2034. color: #3897f0;
  2035. }
  2036. .replyModalTextarea {
  2037. border: none;
  2038. font-size: 18px;
  2039. resize: none;
  2040. white-space: pre-wrap;
  2041. outline: none;
  2042. }
  2043. .has-story {
  2044. width: 64px;
  2045. height: 64px;
  2046. border-radius: 50%;
  2047. padding: 2px;
  2048. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  2049. }
  2050. .has-story img {
  2051. width: 60px;
  2052. height: 60px;
  2053. border-radius: 50%;
  2054. padding: 3px;
  2055. background: #fff;
  2056. }
  2057. .has-story.has-story-sm {
  2058. width: 32px;
  2059. height: 32px;
  2060. border-radius: 50%;
  2061. padding: 2px;
  2062. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  2063. }
  2064. .has-story.has-story-sm img {
  2065. width: 28px;
  2066. height: 28px;
  2067. border-radius: 50%;
  2068. padding: 3px;
  2069. background: #fff;
  2070. }
  2071. #ctx-reply-modal .form-control:focus {
  2072. border: none;
  2073. outline: 0;
  2074. box-shadow: none;
  2075. }
  2076. </style>