webview: Style inline videos to show what they are

Fixes: zulip#5781
gnprice · Nov 14, 2023 · df57212 · df57212
1 parent c56822d
commit df57212
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/src/webview/static/base.css b/src/webview/static/base.css
@@ -541,6 +541,27 @@ time {
   object-fit: contain;
 }
 
+.message_inline_video {
+  position: relative;
+}
+.message_inline_video video {
+  width: 240px;
+  height: 160px;
+  background: black;
+}
+.message_inline_video::after {
+  content: "";
+  background-image: url("images/play_button.svg");
+  display: block;
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  top: calc(50% - 16px);
+  left: calc(50% - 16px);
+  border-radius: 100%;
+  transform: scale(0.8);
+}
+
 .twitter-tweet {
   border: 2px solid hsla(203, 89%, 53%, 0.5);
   background: hsla(203, 89%, 53%, 0.1);

diff --git a/src/webview/static/images/play_button.svg b/src/webview/static/images/play_button.svg
diff --git a/tools/build-webview b/tools/build-webview
@@ -193,5 +193,7 @@ sync "src/webview/static" "${dest}" <<EOF
 -,r /katex
 
 + /base.css
++ /images/
++ /images/play_button.svg
 - *
 EOF