Support video embeds

Fixes #66
This commit is contained in:
Zed 2019-12-06 15:15:56 +01:00
parent f9c4acabf8
commit ebd7afe464
10 changed files with 98 additions and 37 deletions

View file

@ -94,6 +94,7 @@ proc getVideoFetch(tweet: Tweet; agent, token: string; retry=true): Future[Optio
tokenUses.inc tokenUses.inc
proc getVideo*(tweet: Tweet; agent, token: string; force=false) {.async.} = proc getVideo*(tweet: Tweet; agent, token: string; force=false) {.async.} =
let token = if token.len == 0: guestToken else: token
var video = getCachedVideo(tweet.id) var video = getCachedVideo(tweet.id)
if video.isNone: if video.isNone:
video = await getVideoFetch(tweet, agent, token) video = await getVideoFetch(tweet, agent, token)

View file

@ -49,8 +49,8 @@ proc getUserpic*(userpic: string; style=""): string =
proc getUserpic*(profile: Profile; style=""): string = proc getUserpic*(profile: Profile; style=""): string =
getUserPic(profile.userpic, style) getUserPic(profile.userpic, style)
proc getVideoEmbed*(id: int): string = proc getVideoEmbed*(cfg: Config; id: int): string =
&"https://twitter.com/i/videos/{id}?embed_source=facebook" &"https://{cfg.hostname}/i/videos/{id}"
proc pageTitle*(profile: Profile): string = proc pageTitle*(profile: Profile): string =
&"{profile.fullname} (@{profile.username})" &"{profile.fullname} (@{profile.username})"

View file

@ -6,7 +6,7 @@ import jester
import types, config, prefs, formatters import types, config, prefs, formatters
import views/[general, about] import views/[general, about]
import routes/[ import routes/[
preferences, timeline, status, media, search, rss, list, unsupported] preferences, timeline, status, media, search, rss, list, unsupported, embed]
const configPath {.strdefine.} = "./nitter.conf" const configPath {.strdefine.} = "./nitter.conf"
let cfg = getConfig(configPath) let cfg = getConfig(configPath)
@ -20,6 +20,7 @@ createListRouter(cfg)
createStatusRouter(cfg) createStatusRouter(cfg)
createSearchRouter(cfg) createSearchRouter(cfg)
createMediaRouter(cfg) createMediaRouter(cfg)
createEmbedRouter(cfg)
createRssRouter(cfg) createRssRouter(cfg)
settings: settings:
@ -56,3 +57,4 @@ routes:
extend list, "" extend list, ""
extend status, "" extend status, ""
extend media, "" extend media, ""
extend embed, ""

16
src/routes/embed.nim Normal file
View file

@ -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)

View file

@ -31,7 +31,7 @@ proc createStatusRouter*(cfg: Config) =
if conversation.tweet.video.isSome(): if conversation.tweet.video.isSome():
let thumb = get(conversation.tweet.video).thumb 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], resp renderMain(html, request, cfg, title, desc, images = @[thumb],
`type`="video", video=vidUrl) `type`="video", video=vidUrl)
elif conversation.tweet.gif.isSome(): elif conversation.tweet.gif.isSome():

View file

@ -3,6 +3,7 @@
@import 'thread'; @import 'thread';
@import 'media'; @import 'media';
@import 'video'; @import 'video';
@import 'embed';
@import 'card'; @import 'card';
@import 'poll'; @import 'poll';
@import 'quote'; @import 'quote';

17
src/sass/tweet/embed.scss Normal file
View file

@ -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;
}
}

19
src/views/embed.nim Normal file
View file

@ -0,0 +1,19 @@
import options
import karax/[karaxdsl, vdom]
import ".."/[types, formatters]
import general, tweet
const doctype = "<!DOCTYPE html>\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

View file

@ -28,26 +28,17 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
icon "info-circled", title="About", href="/about" icon "info-circled", title="About", href="/about"
iconReferer "cog", "/settings", path, title="Preferences" iconReferer "cog", "/settings", path, title="Preferences"
proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc=""; proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; `type`="article";
rss=""; `type`="article"; video=""; images: seq[string] = @[]): string = video=""; images: seq[string] = @[]): VNode =
let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg) buildHtml(head):
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/style.css")
link(rel="stylesheet", `type`="text/css", href="/css/fontello.css") link(rel="stylesheet", `type`="text/css", href="/css/fontello.css")
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="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="32x32", href="/favicon-32x32.png")
link(rel="icon", type="image/png", sizes="16x16", href="/favicon-16x16.png") link(rel="icon", type="image/png", sizes="16x16", href="/favicon-16x16.png")
link(rel="manifest", href="/site.webmanifest") link(rel="manifest", href="/site.webmanifest")
link(rel="mask-icon", href="/safari-pinned-tab.svg", color="#ff6c60") 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: if prefs.hlsPlayback:
script(src="/js/hls.light.min.js") script(src="/js/hls.light.min.js")
script(src="/js/hlsPlayback.js") script(src="/js/hlsPlayback.js")
@ -70,6 +61,20 @@ proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
if video.len > 0: if video.len > 0:
meta(property="og:video:url", content=video) meta(property="og:video:url", content=video)
meta(property="og:video:secure_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")):
renderHead(prefs, cfg, titleText, desc, `type`, video, images):
if theme.len > 0:
link(rel="stylesheet", `type`="text/css", href=(&"/css/themes/{theme}.css"))
if rss.len > 0:
link(rel="alternate", `type`="application/rss+xml", href=rss, title="RSS feed")
body: body:
renderNavbar(cfg.title, rss, req) renderNavbar(cfg.title, rss, req)

View file

@ -75,7 +75,7 @@ proc renderVideoUnavailable(video: Video): VNode =
else: else:
p: text "This media is unavailable" 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 = let container =
if video.description.len > 0 or video.title.len > 0: " card-container" if video.description.len > 0 or video.title.len > 0: " card-container"
else: "" else: ""