diff --git a/src/api/media.nim b/src/api/media.nim index 143ab59..988a91c 100644 --- a/src/api/media.nim +++ b/src/api/media.nim @@ -94,6 +94,7 @@ proc getVideoFetch(tweet: Tweet; agent, token: string; retry=true): Future[Optio tokenUses.inc proc getVideo*(tweet: Tweet; agent, token: string; force=false) {.async.} = + let token = if token.len == 0: guestToken else: token var video = getCachedVideo(tweet.id) if video.isNone: video = await getVideoFetch(tweet, agent, token) diff --git a/src/formatters.nim b/src/formatters.nim index eaf9460..8f4540d 100644 --- a/src/formatters.nim +++ b/src/formatters.nim @@ -49,8 +49,8 @@ proc getUserpic*(userpic: string; style=""): string = proc getUserpic*(profile: Profile; style=""): string = getUserPic(profile.userpic, style) -proc getVideoEmbed*(id: int): string = - &"https://twitter.com/i/videos/{id}?embed_source=facebook" +proc getVideoEmbed*(cfg: Config; id: int): string = + &"https://{cfg.hostname}/i/videos/{id}" proc pageTitle*(profile: Profile): string = &"{profile.fullname} (@{profile.username})" diff --git a/src/nitter.nim b/src/nitter.nim index 02f636e..3fe63cd 100644 --- a/src/nitter.nim +++ b/src/nitter.nim @@ -6,7 +6,7 @@ import jester import types, config, prefs, formatters import views/[general, about] import routes/[ - preferences, timeline, status, media, search, rss, list, unsupported] + preferences, timeline, status, media, search, rss, list, unsupported, embed] const configPath {.strdefine.} = "./nitter.conf" let cfg = getConfig(configPath) @@ -20,6 +20,7 @@ createListRouter(cfg) createStatusRouter(cfg) createSearchRouter(cfg) createMediaRouter(cfg) +createEmbedRouter(cfg) createRssRouter(cfg) settings: @@ -56,3 +57,4 @@ routes: extend list, "" extend status, "" extend media, "" + extend embed, "" diff --git a/src/routes/embed.nim b/src/routes/embed.nim new file mode 100644 index 0000000..6f5a9fd --- /dev/null +++ b/src/routes/embed.nim @@ -0,0 +1,16 @@ +import asyncdispatch, strutils, sequtils, uri, options + +import jester + +import router_utils +import ".."/[api, types, agents] +import ../views/[embed] + +export embed + +proc createEmbedRouter*(cfg: Config) = + router embed: + get "/i/videos/tweet/@id": + let tweet = Tweet(id: @"id".parseInt, video: some Video()) + await getVideo(tweet, getAgent(), "") + resp renderVideoEmbed(cfg, tweet) diff --git a/src/routes/status.nim b/src/routes/status.nim index a02492a..708c2f4 100644 --- a/src/routes/status.nim +++ b/src/routes/status.nim @@ -31,7 +31,7 @@ proc createStatusRouter*(cfg: Config) = if conversation.tweet.video.isSome(): let thumb = get(conversation.tweet.video).thumb - let vidUrl = getVideoEmbed(conversation.tweet.id) + let vidUrl = getVideoEmbed(cfg, conversation.tweet.id) resp renderMain(html, request, cfg, title, desc, images = @[thumb], `type`="video", video=vidUrl) elif conversation.tweet.gif.isSome(): diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss index 0b058f6..905a0c3 100644 --- a/src/sass/tweet/_base.scss +++ b/src/sass/tweet/_base.scss @@ -3,6 +3,7 @@ @import 'thread'; @import 'media'; @import 'video'; +@import 'embed'; @import 'card'; @import 'poll'; @import 'quote'; diff --git a/src/sass/tweet/embed.scss b/src/sass/tweet/embed.scss new file mode 100644 index 0000000..227fc5e --- /dev/null +++ b/src/sass/tweet/embed.scss @@ -0,0 +1,17 @@ +@import '_variables'; +@import '_mixins'; + +.embed-video { + .gallery-video { + width: 100%; + height: 100%; + position: absolute; + background-color: black; + top: 0%; + left: 0%; + } + + .video-container { + max-height: unset; + } +} diff --git a/src/views/embed.nim b/src/views/embed.nim new file mode 100644 index 0000000..717ba7b --- /dev/null +++ b/src/views/embed.nim @@ -0,0 +1,19 @@ +import options +import karax/[karaxdsl, vdom] + +import ".."/[types, formatters] +import general, tweet + +const doctype = "\n" + +proc renderVideoEmbed*(cfg: Config; tweet: Tweet): string = + let thumb = get(tweet.video).thumb + let vidUrl = getVideoEmbed(cfg, tweet.id) + let prefs = Prefs(hlsPlayback: true) + let node = buildHtml(html(lang="en")): + renderHead(prefs, cfg, `type`="video", images = @[thumb], video=vidUrl) + + tdiv(class="embed-video"): + renderVideo(get(tweet.video), prefs, "") + + result = doctype & $node diff --git a/src/views/general.nim b/src/views/general.nim index b01144a..1826cb4 100644 --- a/src/views/general.nim +++ b/src/views/general.nim @@ -28,49 +28,54 @@ proc renderNavbar*(title, rss: string; req: Request): VNode = icon "info-circled", title="About", href="/about" iconReferer "cog", "/settings", path, title="Preferences" +proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; `type`="article"; + video=""; images: seq[string] = @[]): VNode = + buildHtml(head): + link(rel="stylesheet", `type`="text/css", href="/css/style.css") + link(rel="stylesheet", `type`="text/css", href="/css/fontello.css") + link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon.png") + link(rel="icon", type="image/png", sizes="32x32", href="/favicon-32x32.png") + link(rel="icon", type="image/png", sizes="16x16", href="/favicon-16x16.png") + link(rel="manifest", href="/site.webmanifest") + link(rel="mask-icon", href="/safari-pinned-tab.svg", color="#ff6c60") + + if prefs.hlsPlayback: + script(src="/js/hls.light.min.js") + script(src="/js/hlsPlayback.js") + + title: + if titleText.len > 0: + text titleText & " | " & cfg.title + else: + text cfg.title + + meta(name="viewport", content="width=device-width, initial-scale=1.0") + meta(property="og:type", content=`type`) + meta(property="og:title", content=titleText) + meta(property="og:description", content=stripHtml(desc)) + meta(property="og:site_name", content="Nitter") + + for url in images: + meta(property="og:image", content=getPicUrl(url)) + + if video.len > 0: + meta(property="og:video:url", content=video) + meta(property="og:video:secure_url", content=video) + meta(property="og:video:type", content="text/html") + proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc=""; rss=""; `type`="article"; video=""; images: seq[string] = @[]): string = let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg) let theme = toLowerAscii(prefs.theme).replace(" ", "_") + let node = buildHtml(html(lang="en")): - head: - link(rel="stylesheet", `type`="text/css", href="/css/style.css") - link(rel="stylesheet", `type`="text/css", href="/css/fontello.css") + renderHead(prefs, cfg, titleText, desc, `type`, video, images): if theme.len > 0: link(rel="stylesheet", `type`="text/css", href=(&"/css/themes/{theme}.css")) - link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon.png") - link(rel="icon", type="image/png", sizes="32x32", href="/favicon-32x32.png") - link(rel="icon", type="image/png", sizes="16x16", href="/favicon-16x16.png") - link(rel="manifest", href="/site.webmanifest") - link(rel="mask-icon", href="/safari-pinned-tab.svg", color="#ff6c60") - if rss.len > 0: link(rel="alternate", `type`="application/rss+xml", href=rss, title="RSS feed") - if prefs.hlsPlayback: - script(src="/js/hls.light.min.js") - script(src="/js/hlsPlayback.js") - - title: - if titleText.len > 0: - text titleText & " | " & cfg.title - else: - text cfg.title - - meta(name="viewport", content="width=device-width, initial-scale=1.0") - meta(property="og:type", content=`type`) - meta(property="og:title", content=titleText) - meta(property="og:description", content=stripHtml(desc)) - meta(property="og:site_name", content="Nitter") - - for url in images: - meta(property="og:image", content=getPicUrl(url)) - - if video.len > 0: - meta(property="og:video:url", content=video) - meta(property="og:video:secure_url", content=video) - body: renderNavbar(cfg.title, rss, req) diff --git a/src/views/tweet.nim b/src/views/tweet.nim index 8b3daa7..fc15d60 100644 --- a/src/views/tweet.nim +++ b/src/views/tweet.nim @@ -75,7 +75,7 @@ proc renderVideoUnavailable(video: Video): VNode = else: p: text "This media is unavailable" -proc renderVideo(video: Video; prefs: Prefs; path: string): VNode = +proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode = let container = if video.description.len > 0 or video.title.len > 0: " card-container" else: ""