Add UI support for GIFs; make both gifs and regular videos have rounded corners

internal/webserver/static/styles.css

@@ -590,6 +590,32 @@ main {
 	}
 }
 
+/**
+ * Video module
+ */
+.video {
+	position: relative;
+	display: flex;
+	width: fit-content;
+	border-radius: 1.5em;
+	overflow: hidden;
+
+	.video__gif-controls {
+		position: absolute;
+		bottom: 1.2em;
+		left: 1em;
+		background-color: #999;
+		font-weight: bold;
+		padding: 0 0.2em 0 0.4em;
+		border-radius: 0.3em;
+		border: 1px solid #444;
+
+		.svg-icon {
+			font-size: 0.6em;
+		}
+	}
+}
+
 /**
  * Retweet info module
  */

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -78,7 +78,30 @@
           >
         {{end}}
         {{range $main_tweet.Videos}}
-          <video controls hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}"
+          <div class="video">
+            {{if .IsGif}}
+              <div class="video__gif-controls labelled-icon">
+                <img class="svg-icon" src="/static/icons/play.svg" width="24" height="24" />
+                <label class="video__gif-label">GIF</label>
+              </div>
+              <script>
+                function gif_on_click(video) {
+                  if (video.paused) {
+                    video.play();
+                    video.parentElement.querySelector(".svg-icon").src = "/static/icons/pause.svg";
+                  } else {
+                    video.pause();
+                    video.parentElement.querySelector(".svg-icon").src = "/static/icons/play.svg";
+                  }
+                }
+              </script>
+            {{end}}
+            <video hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}"
+              {{if .IsGif}}
+                loop muted playsinline onclick="gif_on_click(this)" class="gif"
+              {{else}}
+                controls class="video"
+              {{end}}
               {{if .IsDownloaded}}
                 poster="/content/video_thumbnails/{{.ThumbnailLocalPath}}"
               {{else}}
@@ -91,6 +114,7 @@
                 <source src="{{.RemoteURL}}">
               {{end}}
             </video>
+          </div>
         {{end}}
         {{range $main_tweet.Urls}}
           <div class="click-eater" hx-trigger="click consume">