tweet.nim 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. # SPDX-License-Identifier: AGPL-3.0-only
  2. import strutils, sequtils, strformat, options, algorithm
  3. import karax/[karaxdsl, vdom, vstyles]
  4. from jester import Request
  5. import renderutils
  6. import ".."/[types, utils, formatters]
  7. import general
  8. const doctype = "<!DOCTYPE html>\n"
  9. proc renderMiniAvatar(user: User; prefs: Prefs): VNode =
  10. let url = getPicUrl(user.getUserPic("_mini"))
  11. buildHtml():
  12. img(class=(prefs.getAvatarClass & " mini"), src=url)
  13. proc renderHeader(tweet: Tweet; retweet: string; pinned: bool; prefs: Prefs): VNode =
  14. buildHtml(tdiv):
  15. if pinned:
  16. tdiv(class="pinned"):
  17. span: icon "pin", "Pinned Tweet"
  18. elif retweet.len > 0:
  19. tdiv(class="retweet-header"):
  20. span: icon "retweet", retweet & " retweeted"
  21. tdiv(class="tweet-header"):
  22. a(class="tweet-avatar", href=("/" & tweet.user.username)):
  23. var size = "_bigger"
  24. if not prefs.autoplayGifs and tweet.user.userPic.endsWith("gif"):
  25. size = "_400x400"
  26. genImg(tweet.user.getUserPic(size), class=prefs.getAvatarClass)
  27. tdiv(class="tweet-name-row"):
  28. tdiv(class="fullname-and-username"):
  29. linkUser(tweet.user, class="fullname")
  30. linkUser(tweet.user, class="username")
  31. span(class="tweet-date"):
  32. a(href=getLink(tweet), title=tweet.getTime):
  33. text tweet.getShortTime
  34. proc renderAlbum(tweet: Tweet): VNode =
  35. let
  36. groups = if tweet.photos.len < 3: @[tweet.photos]
  37. else: tweet.photos.distribute(2)
  38. buildHtml(tdiv(class="attachments")):
  39. for i, photos in groups:
  40. let margin = if i > 0: ".25em" else: ""
  41. tdiv(class="gallery-row", style={marginTop: margin}):
  42. for photo in photos:
  43. tdiv(class="attachment image"):
  44. let
  45. named = "name=" in photo
  46. small = if named: photo else: photo & smallWebp
  47. a(href=getOrigPicUrl(photo), class="still-image", target="_blank"):
  48. genImg(small)
  49. proc isPlaybackEnabled(prefs: Prefs; playbackType: VideoType): bool =
  50. case playbackType
  51. of mp4: prefs.mp4Playback
  52. of m3u8, vmap: prefs.hlsPlayback
  53. proc hasMp4Url(video: Video): bool =
  54. video.variants.anyIt(it.contentType == mp4)
  55. proc renderVideoDisabled(playbackType: VideoType; path: string): VNode =
  56. buildHtml(tdiv(class="video-overlay")):
  57. case playbackType
  58. of mp4:
  59. p: text "mp4 playback disabled in preferences"
  60. of m3u8, vmap:
  61. buttonReferer "/enablehls", "Enable hls playback", path
  62. proc renderVideoUnavailable(video: Video): VNode =
  63. buildHtml(tdiv(class="video-overlay")):
  64. case video.reason
  65. of "dmcaed":
  66. p: text "This media has been disabled in response to a report by the copyright owner"
  67. else:
  68. p: text "This media is unavailable"
  69. proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
  70. let
  71. container = if video.description.len == 0 and video.title.len == 0: ""
  72. else: " card-container"
  73. playbackType = if not prefs.proxyVideos and video.hasMp4Url: mp4
  74. else: video.playbackType
  75. buildHtml(tdiv(class="attachments card")):
  76. tdiv(class="gallery-video" & container):
  77. tdiv(class="attachment video-container"):
  78. let thumb = getSmallPic(video.thumb)
  79. if not video.available:
  80. img(src=thumb)
  81. renderVideoUnavailable(video)
  82. elif not prefs.isPlaybackEnabled(playbackType):
  83. img(src=thumb)
  84. renderVideoDisabled(playbackType, path)
  85. else:
  86. let
  87. vars = video.variants.filterIt(it.contentType == playbackType)
  88. vidUrl = vars.sortedByIt(it.resolution)[^1].url
  89. source = if prefs.proxyVideos: getVidUrl(vidUrl)
  90. else: vidUrl
  91. case playbackType
  92. of mp4:
  93. video(poster=thumb, controls="", muted=prefs.muteVideos):
  94. source(src=source, `type`="video/mp4")
  95. of m3u8, vmap:
  96. video(poster=thumb, data-url=source, data-autoload="false", muted=prefs.muteVideos)
  97. verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
  98. tdiv(class="overlay-circle"): span(class="overlay-triangle")
  99. verbatim "</div>"
  100. if container.len > 0:
  101. tdiv(class="card-content"):
  102. h2(class="card-title"): text video.title
  103. if video.description.len > 0:
  104. p(class="card-description"): text video.description
  105. proc renderGif(gif: Gif; prefs: Prefs): VNode =
  106. buildHtml(tdiv(class="attachments media-gif")):
  107. tdiv(class="gallery-gif", style={maxHeight: "unset"}):
  108. tdiv(class="attachment"):
  109. video(class="gif", poster=getSmallPic(gif.thumb), autoplay=prefs.autoplayGifs,
  110. controls="", muted="", loop=""):
  111. source(src=getPicUrl(gif.url), `type`="video/mp4")
  112. proc renderPoll(poll: Poll): VNode =
  113. buildHtml(tdiv(class="poll")):
  114. for i in 0 ..< poll.options.len:
  115. let
  116. leader = if poll.leader == i: " leader" else: ""
  117. val = poll.values[i]
  118. perc = if val > 0: val / poll.votes * 100 else: 0
  119. percStr = (&"{perc:>3.0f}").strip(chars={'.'}) & '%'
  120. tdiv(class=("poll-meter" & leader)):
  121. span(class="poll-choice-bar", style={width: percStr})
  122. span(class="poll-choice-value"): text percStr
  123. span(class="poll-choice-option"): text poll.options[i]
  124. span(class="poll-info"):
  125. text &"{insertSep($poll.votes, ',')} votes • {poll.status}"
  126. proc renderCardImage(card: Card): VNode =
  127. buildHtml(tdiv(class="card-image-container")):
  128. tdiv(class="card-image"):
  129. img(src=getPicUrl(card.image), alt="")
  130. if card.kind == player:
  131. tdiv(class="card-overlay"):
  132. tdiv(class="overlay-circle"):
  133. span(class="overlay-triangle")
  134. proc renderCardContent(card: Card): VNode =
  135. buildHtml(tdiv(class="card-content")):
  136. h2(class="card-title"): text card.title
  137. if card.text.len > 0:
  138. p(class="card-description"): text card.text
  139. if card.dest.len > 0:
  140. span(class="card-destination"): text card.dest
  141. proc renderCard(card: Card; prefs: Prefs; path: string): VNode =
  142. const smallCards = {app, player, summary, storeLink}
  143. let large = if card.kind notin smallCards: " large" else: ""
  144. let url = replaceUrls(card.url, prefs)
  145. buildHtml(tdiv(class=("card" & large))):
  146. if card.video.isSome:
  147. tdiv(class="card-container"):
  148. renderVideo(get(card.video), prefs, path)
  149. a(class="card-content-container", href=url):
  150. renderCardContent(card)
  151. else:
  152. a(class="card-container", href=url):
  153. if card.image.len > 0:
  154. renderCardImage(card)
  155. tdiv(class="card-content-container"):
  156. renderCardContent(card)
  157. func formatStat(stat: int): string =
  158. if stat > 0: insertSep($stat, ',')
  159. else: ""
  160. proc renderStats(stats: TweetStats; views: string): VNode =
  161. buildHtml(tdiv(class="tweet-stats")):
  162. span(class="tweet-stat"): icon "comment", formatStat(stats.replies)
  163. span(class="tweet-stat"): icon "retweet", formatStat(stats.retweets)
  164. span(class="tweet-stat"): icon "quote", formatStat(stats.quotes)
  165. span(class="tweet-stat"): icon "heart", formatStat(stats.likes)
  166. if views.len > 0:
  167. span(class="tweet-stat"): icon "play", insertSep(views, ',')
  168. proc renderReply(tweet: Tweet): VNode =
  169. buildHtml(tdiv(class="replying-to")):
  170. text "Replying to "
  171. for i, u in tweet.reply:
  172. if i > 0: text " "
  173. a(href=("/" & u)): text "@" & u
  174. proc renderAttribution(user: User; prefs: Prefs): VNode =
  175. buildHtml(a(class="attribution", href=("/" & user.username))):
  176. renderMiniAvatar(user, prefs)
  177. strong: text user.fullname
  178. verifiedIcon(user)
  179. proc renderMediaTags(tags: seq[User]): VNode =
  180. buildHtml(tdiv(class="media-tag-block")):
  181. icon "user"
  182. for i, p in tags:
  183. a(class="media-tag", href=("/" & p.username), title=p.username):
  184. text p.fullname
  185. if i < tags.high:
  186. text ", "
  187. proc renderQuoteMedia(quote: Tweet; prefs: Prefs; path: string): VNode =
  188. buildHtml(tdiv(class="quote-media-container")):
  189. if quote.photos.len > 0:
  190. renderAlbum(quote)
  191. elif quote.video.isSome:
  192. renderVideo(quote.video.get(), prefs, path)
  193. elif quote.gif.isSome:
  194. renderGif(quote.gif.get(), prefs)
  195. proc renderQuote(quote: Tweet; prefs: Prefs; path: string): VNode =
  196. if not quote.available:
  197. return buildHtml(tdiv(class="quote unavailable")):
  198. tdiv(class="unavailable-quote"):
  199. if quote.tombstone.len > 0:
  200. text quote.tombstone
  201. elif quote.text.len > 0:
  202. text quote.text
  203. else:
  204. text "This tweet is unavailable"
  205. buildHtml(tdiv(class="quote quote-big")):
  206. a(class="quote-link", href=getLink(quote))
  207. tdiv(class="tweet-name-row"):
  208. tdiv(class="fullname-and-username"):
  209. renderMiniAvatar(quote.user, prefs)
  210. linkUser(quote.user, class="fullname")
  211. linkUser(quote.user, class="username")
  212. span(class="tweet-date"):
  213. a(href=getLink(quote), title=quote.getTime):
  214. text quote.getShortTime
  215. if quote.reply.len > 0:
  216. renderReply(quote)
  217. if quote.text.len > 0:
  218. tdiv(class="quote-text", dir="auto"):
  219. verbatim replaceUrls(quote.text, prefs)
  220. if quote.hasThread:
  221. a(class="show-thread", href=getLink(quote)):
  222. text "Show this thread"
  223. if quote.photos.len > 0 or quote.video.isSome or quote.gif.isSome:
  224. renderQuoteMedia(quote, prefs, path)
  225. proc renderLocation*(tweet: Tweet): string =
  226. let (place, url) = tweet.getLocation()
  227. if place.len == 0: return
  228. let node = buildHtml(span(class="tweet-geo")):
  229. text " – at "
  230. if url.len > 1:
  231. a(href=url): text place
  232. else:
  233. text place
  234. return $node
  235. proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class=""; index=0;
  236. last=false; showThread=false; mainTweet=false; afterTweet=false): VNode =
  237. var divClass = class
  238. if index == -1 or last:
  239. divClass = "thread-last " & class
  240. if not tweet.available:
  241. return buildHtml(tdiv(class=divClass & "unavailable timeline-item")):
  242. tdiv(class="unavailable-box"):
  243. if tweet.tombstone.len > 0:
  244. text tweet.tombstone
  245. elif tweet.text.len > 0:
  246. text tweet.text
  247. else:
  248. text "This tweet is unavailable"
  249. if tweet.quote.isSome:
  250. renderQuote(tweet.quote.get(), prefs, path)
  251. let
  252. fullTweet = tweet
  253. pinned = tweet.pinned
  254. var retweet: string
  255. var tweet = fullTweet
  256. if tweet.retweet.isSome:
  257. tweet = tweet.retweet.get
  258. retweet = fullTweet.user.fullname
  259. buildHtml(tdiv(class=("timeline-item " & divClass))):
  260. if not mainTweet:
  261. a(class="tweet-link", href=getLink(tweet))
  262. tdiv(class="tweet-body"):
  263. var views = ""
  264. renderHeader(tweet, retweet, pinned, prefs)
  265. if not afterTweet and index == 0 and tweet.reply.len > 0 and
  266. (tweet.reply.len > 1 or tweet.reply[0] != tweet.user.username):
  267. renderReply(tweet)
  268. var tweetClass = "tweet-content media-body"
  269. if prefs.bidiSupport:
  270. tweetClass &= " tweet-bidi"
  271. tdiv(class=tweetClass, dir="auto"):
  272. verbatim replaceUrls(tweet.text, prefs) & renderLocation(tweet)
  273. if tweet.attribution.isSome:
  274. renderAttribution(tweet.attribution.get(), prefs)
  275. if tweet.card.isSome and tweet.card.get().kind != hidden:
  276. renderCard(tweet.card.get(), prefs, path)
  277. if tweet.photos.len > 0:
  278. renderAlbum(tweet)
  279. elif tweet.video.isSome:
  280. renderVideo(tweet.video.get(), prefs, path)
  281. views = tweet.video.get().views
  282. elif tweet.gif.isSome:
  283. renderGif(tweet.gif.get(), prefs)
  284. views = "GIF"
  285. if tweet.poll.isSome:
  286. renderPoll(tweet.poll.get())
  287. if tweet.quote.isSome:
  288. renderQuote(tweet.quote.get(), prefs, path)
  289. if mainTweet:
  290. p(class="tweet-published"): text &"{getTime(tweet)}"
  291. if tweet.mediaTags.len > 0:
  292. renderMediaTags(tweet.mediaTags)
  293. if not prefs.hideTweetStats:
  294. renderStats(tweet.stats, views)
  295. if showThread:
  296. a(class="show-thread", href=("/i/status/" & $tweet.threadId)):
  297. text "Show this thread"
  298. proc renderTweetEmbed*(tweet: Tweet; path: string; prefs: Prefs; cfg: Config; req: Request): string =
  299. let node = buildHtml(html(lang="en")):
  300. renderHead(prefs, cfg, req)
  301. body:
  302. tdiv(class="tweet-embed"):
  303. renderTweet(tweet, prefs, path, mainTweet=true)
  304. result = doctype & $node