Support media tags

public/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('/fonts/fontello.eot?6327398');
-  src: url('/fonts/fontello.eot?6327398#iefix') format('embedded-opentype'),
-       url('/fonts/fontello.woff2?6327398') format('woff2'),
-       url('/fonts/fontello.woff?6327398') format('woff'),
-       url('/fonts/fontello.ttf?6327398') format('truetype'),
-       url('/fonts/fontello.svg?6327398#fontello') format('svg');
+  src: url('/fonts/fontello.eot?63207931');
+  src: url('/fonts/fontello.eot?63207931#iefix') format('embedded-opentype'),
+       url('/fonts/fontello.woff2?63207931') format('woff2'),
+       url('/fonts/fontello.woff?63207931') format('woff'),
+       url('/fonts/fontello.ttf?63207931') format('truetype'),
+       url('/fonts/fontello.svg?63207931#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -49,6 +49,7 @@
 .icon-retweet:before { content: '\e80d'; } /* '' */
 .icon-search:before { content: '\e80e'; } /* '' */
 .icon-pin:before { content: '\e80f'; } /* '' */
+.icon-user:before { content: '\e810'; } /* '' */
 .icon-heart:before { content: '\e811'; } /* '' */
 .icon-cog:before { content: '\e812'; } /* '' */
 .icon-rss-feed:before { content: '\e813'; } /* '' */

public/fonts/fontello.svg

@@ -38,19 +38,15 @@
 
 <glyph glyph-name="pin" unicode="&#xe80f;" d="M268 368v250q0 8-5 13t-13 5-13-5-5-13v-250q0-8 5-13t13-5 13 5 5 13z m375-197q0-14-11-25t-25-10h-239l-29-270q-1-7-6-11t-11-5h-1q-15 0-17 15l-43 271h-225q-15 0-25 10t-11 25q0 69 44 124t99 55v286q-29 0-50 21t-22 50 22 50 50 22h357q29 0 50-22t21-50-21-50-50-21v-286q55 0 99-55t44-124z" horiz-adv-x="642.9" />
 
-<glyph glyph-name="search-circled" unicode="&#xe810;" d="M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m223-193l90-90 109 109q53-27 113-27 100 0 171 71t71 171-71 171-172 71-171-71-70-171q0-70 37-129l-2 0z m177 234q0 57 39 96t95 39 95-39 39-96-39-96-95-39-95 39-39 96z" horiz-adv-x="1000" />
+<glyph glyph-name="user" unicode="&#xe810;" d="M714 69q0-60-35-104t-84-44h-476q-49 0-84 44t-35 104q0 48 5 90t17 85 33 73 52 50 76 19q73-72 174-72t175 72q42 0 75-19t52-50 33-73 18-85 4-90z m-143 495q0-88-62-151t-152-63-151 63-63 151 63 152 151 63 152-63 62-152z" horiz-adv-x="714.3" />
 
 <glyph glyph-name="heart" unicode="&#xe811;" d="M500-79q-14 0-25 10l-348 336q-5 5-15 15t-31 37-38 54-30 67-13 77q0 123 71 192t196 70q34 0 70-12t67-33 54-38 42-38q20 20 42 38t54 38 67 33 70 12q125 0 196-70t71-192q0-123-128-251l-347-335q-10-10-25-10z" horiz-adv-x="1000" />
 
 <glyph glyph-name="cog" unicode="&#xe812;" d="M0 272l0 156 150 16q14 45 38 88l-96 117 109 109 117-95q41 23 88 37l16 150 156 0 16-150q45-14 88-37l117 95 109-109-96-117q24-43 38-88l150-16 0-156-150-16q-14-47-38-88l96-117-109-109-117 96q-43-24-88-38l-16-150-156 0-16 150q-47 14-88 38l-117-96-109 109 96 117q-24 41-38 88z m355 78q0-60 42-102t103-42 103 42 42 102-42 103-103 42-103-42-42-103z" horiz-adv-x="1000" />
 
-<glyph glyph-name="rss" unicode="&#xe813;" d="M184 93c0-51-43-91-93-91s-91 40-91 91c0 50 41 91 91 91s93-41 93-91z m261-85l-125 0c0 174-140 323-315 323l0 118c231 0 440-163 440-441z m259 0l-136 0c0 300-262 561-563 561l0 129c370 0 699-281 699-690z" horiz-adv-x="704" />
+<glyph glyph-name="rss-feed" unicode="&#xe813;" d="M184 93c0-51-43-91-93-91s-91 40-91 91c0 50 41 91 91 91s93-41 93-91z m261-85l-125 0c0 174-140 323-315 323l0 118c231 0 440-163 440-441z m259 0l-136 0c0 300-262 561-563 561l0 129c370 0 699-281 699-690z" horiz-adv-x="704" />
 
-<glyph glyph-name="twitter-circled" unicode="&#xf057;" d="M0 350q0 95 37 182t100 149 150 100 182 37 182-37 149-100 100-149 37-182-37-182-100-150-149-100-182-37-182 37-150 100-100 150-37 182z m190-199q0-5 4-8 7-5 27-16 73-37 153-37 100 0 181 51 39 25 70 60t48 73 26 76 9 73v11q35 26 54 58 2 3 2 6 0 4-3 7t-7 3l-7-3q-19-7-22-8 8 10 16 25t8 21q0 3-3 6t-7 3q-2 0-5-1-36-19-64-26-36 36-87 36-51 0-87-37t-36-87q0-6 1-15-105 10-181 79-14 13-34 35-4 4-9 4-5 0-7-5-18-24-18-62 0-44 29-78-1 0-10 4-6 3-10 3-5 0-8-3t-4-8q0-32 17-60t43-45h-2q-1 0-2 0-1 1-4 1-4 0-7-3t-3-6q0-1 1-4 10-31 34-53t55-29q-52-33-115-33-1 0-14 1-3 0-7 1t-6 0q-3 0-6-3t-3-7z" horiz-adv-x="937.5" />
-
-<glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="twitter-squared" unicode="&#xf304;" d="M714 510q-31-14-67-19 38 22 52 65-37-21-75-28-34 36-85 36-49 0-83-34t-35-83q0-16 3-27-72 4-135 37t-107 86q-16-28-16-59 0-64 51-98-27 1-56 15v-1q0-42 28-75t68-40q-16-5-28-5-7 0-22 3 12-36 42-59t67-23q-64-50-145-50-15 0-28 2 82-53 180-53 62 0 117 20t94 53 67 76 42 91 13 94q0 10 0 15 35 25 58 61z m143 108v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
+<glyph glyph-name="bird" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
 </font>
 </defs>
 </svg>

src/parser.nim

@@ -107,6 +107,7 @@ proc parseTweet*(node: XmlNode): Tweet =
     profile:   parseTweetProfile(tweet),
     stats:     parseTweetStats(tweet),
     reply:     parseTweetReply(tweet),
+    mediaTags: getMediaTags(tweet),
     hasThread: tweet.select(".content > .self-thread-context") != nil,
     pinned:    "pinned" in tweet.attr("class"),
     available: true

src/parserutils.nim

@@ -1,4 +1,4 @@
-import xmltree, strtabs, strformat, strutils, times, uri, options
+import xmltree, strtabs, strformat, strutils, times, uri, options, json
 import regex
 
 import types, formatters
@@ -276,3 +276,12 @@ proc getMoreReplies*(node: XmlNode): int64 =
     result = parseBiggestInt(text.split(" ")[0])
   except:
     result = -1
+
+proc getMediaTags*(node: XmlNode): seq[Profile] =
+  let usernames = node.attr("data-tagged")
+  if usernames.len == 0: return
+  let users = parseJson(node.attr("data-reply-to-users-json"))
+  for user in users:
+    let un = user["screen_name"].getStr
+    if un notin usernames: continue
+    result.add Profile(username: un, fullname: user["name"].getStr)

src/sass/tweet/_base.scss

@@ -110,6 +110,24 @@
     }
 }
 
+.media-tag-block {
+    padding-top: 5px;
+    pointer-events: all;
+    color: var(--fg_faded);
+
+    .icon-container {
+        padding-right: 2px;
+    }
+
+    .media-tag, .icon-container {
+        color: var(--fg_faded);
+    }
+}
+
+.timeline-container .media-tag-block {
+    font-size: 13px;
+}
+
 .replying-to {
     color: var(--fg_faded);
     margin: -2px 0 4px;

src/types.nim

@@ -150,6 +150,7 @@ type
     stats*: TweetStats
     retweet*: Option[Retweet]
     attribution*: Option[Profile]
+    mediaTags*: seq[Profile]
     quote*: Option[Quote]
     card*: Option[Card]
     gif*: Option[Gif]

src/views/tweet.nim

@@ -195,6 +195,15 @@ proc renderAttribution(profile: Profile): VNode =
     img(class="avatar", width="20", height="20", src=avatarUrl)
     strong: text profile.fullname
 
+proc renderMediaTags(tags: seq[Profile]): VNode =
+  buildHtml(tdiv(class="media-tag-block")):
+    icon "user"
+    for i, p in tags:
+      a(class="media-tag", href=("/" & p.username), title=p.username):
+        text p.fullname
+      if i < tags.high:
+        text ", "
+
 proc renderQuoteMedia(quote: Quote): VNode =
   buildHtml(tdiv(class="quote-media-container")):
     if quote.thumb.len > 0:
@@ -286,6 +295,9 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class="";
       if mainTweet:
         p(class="tweet-published"): text getTweetTime(tweet)
 
+      if tweet.mediaTags.len > 0:
+        renderMediaTags(tweet.mediaTags)
+
       if not prefs.hideTweetStats:
         renderStats(tweet.stats, views)