From 28267a802a4328b60c1d5381d9df4f85884510c4 Mon Sep 17 00:00:00 2001
From: Alessio <alex@playfulpachyderm.com>
Date: Fri, 19 Apr 2024 21:45:54 -0700
Subject: [PATCH] Add UI support for GIFs; make both gifs and regular videos
 have rounded corners

---
 internal/webserver/static/styles.css          | 26 ++++++++++
 .../tpl/tweet_page_includes/single_tweet.tpl  | 48 ++++++++++++++-----
 2 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index f999763..44d36db 100644
--- a/internal/webserver/static/styles.css
+++ b/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
  */
diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
index eb046e1..bfa0696 100644
--- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
@@ -78,19 +78,43 @@
           >
         {{end}}
         {{range $main_tweet.Videos}}
-          <video controls hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}"
-            {{if .IsDownloaded}}
-              poster="/content/video_thumbnails/{{.ThumbnailLocalPath}}"
-            {{else}}
-              poster="{{.ThumbnailRemoteUrl}}"
+          <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}}
-          >
-            {{if .IsDownloaded}}
-              <source src="/content/videos/{{.LocalFilename}}">
-            {{else}}
-              <source src="{{.RemoteURL}}">
-            {{end}}
-          </video>
+            <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}}
+                poster="{{.ThumbnailRemoteUrl}}"
+              {{end}}
+            >
+              {{if .IsDownloaded}}
+                <source src="/content/videos/{{.LocalFilename}}">
+              {{else}}
+                <source src="{{.RemoteURL}}">
+              {{end}}
+            </video>
+          </div>
         {{end}}
         {{range $main_tweet.Urls}}
           <div class="click-eater" hx-trigger="click consume">