Add button to enable hls playback when disabled

public/css/style.css

@@ -53,6 +53,24 @@ a:hover {
     text-decoration: underline;
 }
 
+button {
+    background-color: #121212;
+    color: #f8f8f2;
+    border: 1px solid #ff6c6091;
+    padding: 3px 6px;
+    font-size: 14px;
+    cursor: pointer;
+    float: right;
+}
+
+button:hover {
+    border-color: #ff6c60;
+}
+
+button:active {
+    border-color: #ff9f97;
+}
+
 .status-el {
     overflow-wrap: break-word;
     border-left-width: 0;
@@ -297,13 +315,12 @@ video, .video-container img {
     top: 0;
     left: 0;
     z-index: 1;
-    background-color: #0000008d;
+    background-color: #0000009d;
 }
 
 .video-overlay p {
     position: relative;
     z-index: 0;
-    color: #dcdcdc;
     text-align: center;
     top: calc(50% - 20px);
     font-size: 20px;
@@ -320,6 +337,14 @@ video, .video-container img {
     height: 40px;
 }
 
+.video-overlay form {
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
 .still-image {
     max-height: 379.5px;
     max-width: 533px;
@@ -375,6 +400,7 @@ video, .video-container img {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-bottom: -3px;
 }
 
 .tweet-stat {
@@ -1136,6 +1162,10 @@ video, .video-container img {
     border-color: #ff6c60;
 }
 
+.preferences button {
+    margin-top: 6px;
+}
+
 fieldset {
     margin: .35em 0 .75em;
     border: 0;
@@ -1156,25 +1186,6 @@ legend {
     margin-bottom: 6px;
 }
 
-.pref-submit, .pref-reset button {
-    background-color: #121212;
-    color: #f8f8f2;
-    border: 1px solid #ff6c6091;
-    padding: 3px 6px;
-    margin-top: 6px;
-    font-size: 14px;
-    cursor: pointer;
-    float: right;
-}
-
-.pref-submit:hover, .pref-reset button:hover {
-    border-color: #ff6c60;
-}
-
-.pref-submit:active, .pref-reset button:active {
-    border-color: #ff9f97;
-}
-
 .pref-reset {
     float: left;
 }

src/nitter.nim

@@ -86,6 +86,15 @@ routes:
       resp Http404, showError("Please enter a username.", cfg.title)
     redirect("/" & @"query")
 
+  get "/settings":
+    let refUri = request.headers.getOrDefault("Referer").parseUri()
+    var path =
+      if refUri.path.len > 0 and "/settings" notin refUri.path: refUri.path
+      else: "/"
+    if refUri.query.len > 0: path &= &"?{refUri.query}"
+    let prefs = cookiePrefs()
+    resp renderMain(renderPreferences(prefs, path), prefs, cfg.title, "Preferences")
+
   post "/saveprefs":
     var prefs = cookiePrefs()
     genUpdatePrefs()
@@ -98,14 +107,12 @@ routes:
     setCookie("preferences", $prefs.id, daysForward(360), httpOnly=true, secure=cfg.useHttps)
     redirect("/settings")
 
-  get "/settings":
-    let refUri = request.headers.getOrDefault("Referer").parseUri()
-    var path =
-      if refUri.path.len > 0 and "/settings" notin refUri.path: refUri.path
-      else: "/"
-    if refUri.query.len > 0: path &= &"?{refUri.query}"
-    let prefs = cookiePrefs()
-    resp renderMain(renderPreferences(prefs, path), prefs, cfg.title, "Preferences")
+  post "/enablehls":
+    var prefs = cookiePrefs()
+    prefs.hlsPlayback = true
+    cache(prefs)
+    setCookie("preferences", $prefs.id, daysForward(360), httpOnly=true, secure=cfg.useHttps)
+    redirect(request.headers.getOrDefault("referer"))
 
   get "/@name/?":
     cond '.' notin @"name"

src/views/general.nim

@@ -57,7 +57,7 @@ proc renderMain*(body: VNode; prefs: Prefs; title="Nitter"; titleText=""; desc="
 proc renderSearch*(): VNode =
   buildHtml(tdiv(class="panel")):
     tdiv(class="search-panel"):
-      form(`method`="post", action="search"):
+      form(`method`="post", action="/search"):
         input(`type`="text", name="query", autofocus="", placeholder="Enter usernames...")
         button(`type`="submit"): icon "search"
 

src/views/preferences.nim

@@ -54,7 +54,7 @@ macro renderPrefs*(): untyped =
 proc renderPreferences*(prefs: Prefs; path: string): VNode =
   buildHtml(tdiv(class="preferences-container")):
     fieldset(class="preferences"):
-      form(`method`="post", action="saveprefs"):
+      form(`method`="post", action="/saveprefs"):
         verbatim "<input name=\"referer\" style=\"display: none\" value=\"$1\"/>" % path
 
         renderPrefs()
@@ -62,6 +62,6 @@ proc renderPreferences*(prefs: Prefs; path: string): VNode =
         button(`type`="submit", class="pref-submit"):
           text "Save preferences"
 
-      form(`method`="post", action="resetprefs", class="pref-reset"):
+      form(`method`="post", action="/resetprefs", class="pref-reset"):
         button(`type`="submit"):
           text "Reset preferences"

src/views/tweet.nim

@@ -58,7 +58,9 @@ proc renderVideoDisabled(video: Video): VNode =
       of mp4:
         p: text "mp4 playback disabled in preferences"
       of m3u8, vmap:
-        p: text "hls playback disabled in preferences"
+        form(`method`="post", action=("/enablehls")):
+          button(`type`="submit"):
+            text "Enable hls playback"
 
 proc renderVideoUnavailable(video: Video): VNode =
   buildHtml(tdiv):