Timeline.vue 66 KB

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