From bc352cdb652604415b4bed553c6f50a0226b4e93 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Mon, 3 Jan 2022 03:27:04 +0100
Subject: [PATCH] Simplify video rendering

---
 src/sass/tweet/video.scss | 11 +++++++----
 src/views/tweet.nim       | 31 +++++++++++++++----------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/sass/tweet/video.scss b/src/sass/tweet/video.scss
index 3439fe8..2dd257a 100644
--- a/src/sass/tweet/video.scss
+++ b/src/sass/tweet/video.scss
@@ -2,8 +2,8 @@
 @import '_mixins';
 
 video {
-    height: 100%;
-    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
 }
 
 .gallery-video {
@@ -18,10 +18,13 @@ video {
 .video-container {
     max-height: 530px;
     margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     img {
-        height: 100%;
-        width: 100%;
+        max-height: 100%;
+        max-width: 100%;
     }
 }
 
diff --git a/src/views/tweet.nim b/src/views/tweet.nim
index bd33290..a41383c 100644
--- a/src/views/tweet.nim
+++ b/src/views/tweet.nim
@@ -66,36 +66,35 @@ proc isPlaybackEnabled(prefs: Prefs; video: Video): bool =
   of m3u8, vmap: prefs.hlsPlayback
 
 proc renderVideoDisabled(video: Video; path: string): VNode =
-  buildHtml(tdiv):
-    img(src=getSmallPic(video.thumb))
-    tdiv(class="video-overlay"):
-      case video.playbackType
-      of mp4:
-        p: text "mp4 playback disabled in preferences"
-      of m3u8, vmap:
-        buttonReferer "/enablehls", "Enable hls playback", path
+  buildHtml(tdiv(class="video-overlay")):
+    case video.playbackType
+    of mp4:
+      p: text "mp4 playback disabled in preferences"
+    of m3u8, vmap:
+      buttonReferer "/enablehls", "Enable hls playback", path
 
 proc renderVideoUnavailable(video: Video): VNode =
-  buildHtml(tdiv):
-    img(src=getSmallPic(video.thumb))
-    tdiv(class="video-overlay"):
-      case video.reason
-      of "dmcaed":
-        p: text "This media has been disabled in response to a report by the copyright owner"
-      else:
-        p: text "This media is unavailable"
+  buildHtml(tdiv(class="video-overlay")):
+    case video.reason
+    of "dmcaed":
+      p: text "This media has been disabled in response to a report by the copyright owner"
+    else:
+      p: text "This media is unavailable"
 
 proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
   let container =
     if video.description.len > 0 or video.title.len > 0: " card-container"
     else: ""
+
   buildHtml(tdiv(class="attachments card")):
     tdiv(class="gallery-video" & container):
       tdiv(class="attachment video-container"):
         let thumb = getSmallPic(video.thumb)
         if not video.available:
+          img(src=thumb)
           renderVideoUnavailable(video)
         elif not prefs.isPlaybackEnabled(video):
+          img(src=thumb)
           renderVideoDisabled(video, path)
         else:
           let vid = video.variants.filterIt(it.videoType == video.playbackType)