From 7edca18f8d76a8f565fa9063ca43e92605c6eaa3 Mon Sep 17 00:00:00 2001
From: robrobinbin <8597693+robrobinbin@users.noreply.github.com>
Date: Mon, 8 Feb 2021 01:22:14 +0100
Subject: [PATCH] Inline videos/gifs for card view (#107)

* Basic gallery support

* Inline videos for card view
---
 src/post.rs          | 1 +
 src/utils.rs         | 3 +++
 static/style.css     | 7 +++++++
 templates/post.html  | 2 +-
 templates/utils.html | 4 ++++
 5 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/post.rs b/src/post.rs
index 3bf810d..1374087 100644
--- a/src/post.rs
+++ b/src/post.rs
@@ -102,6 +102,7 @@ async fn parse_post(json: &serde_json::Value) -> Post {
 			url: format_url(val(post, "thumbnail").as_str()),
 			width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(),
 			height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(),
+			poster: "".to_string(),
 		},
 		flair: Flair {
 			flair_parts: parse_rich_flair(
diff --git a/src/utils.rs b/src/utils.rs
index 512784c..44e042a 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -44,6 +44,7 @@ pub struct Media {
 	pub url: String,
 	pub width: i64,
 	pub height: i64,
+	pub poster: String,
 }
 
 pub struct GalleryMedia {
@@ -255,6 +256,7 @@ pub async fn media(data: &Value) -> (String, Media, Vec<GalleryMedia>) {
 			url,
 			width: data["preview"]["images"][0]["source"]["width"].as_i64().unwrap_or_default(),
 			height: data["preview"]["images"][0]["source"]["height"].as_i64().unwrap_or_default(),
+			poster: format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap_or_default()),
 		},
 		gallery,
 	)
@@ -384,6 +386,7 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 				url: format_url(val(post, "thumbnail").as_str()),
 				width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(),
 				height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(),
+				poster: "".to_string(),
 			},
 			media,
 			domain: val(post, "domain"),
diff --git a/static/style.css b/static/style.css
index c053703..affa18e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -641,6 +641,13 @@ a.search_subreddit:hover {
 	max-width: calc(100% - 40px);
 	grid-area: post_media;
 	margin: 15px auto 5px auto;
+	height: auto;
+}
+
+
+.post_media_video.short {
+	max-height: 512px;
+	width: auto;
 }
 
 .post_media_image.short svg, .post_media_image.short img{
diff --git a/templates/post.html b/templates/post.html
index 6fac69e..1dee7d8 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -77,7 +77,7 @@
 				</svg>
 			</a>
 			{% else if post.post_type == "video" || post.post_type == "gif" %}
-			<video class="post_media_video" src="{{ post.media.url }}" controls autoplay loop></video>
+			<video class="post_media_video" src="{{ post.media.url }}" controls autoplay loop><a href={{ post.media.url }}>Video</a></video>
 			{% else if post.post_type == "gallery" %}
 			<div class="gallery">
 			{% for image in post.gallery -%}
diff --git a/templates/utils.html b/templates/utils.html
index d8ff4b6..ed48e1e 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -86,6 +86,10 @@
 				</desc>
 		</svg>
 	</a>
+	{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "gif" %}
+	<video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}px" height="{{ post.media.height }}px" controls loop><a href={{ post.media.url }}>Video</a></video>
+	{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "video" %}
+	<video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}px" height="{{ post.media.height }}px" poster="{{ post.media.poster }}" preload=none controls><a href={{ post.media.url }}>Video</a></video>
 	{% else if post.post_type != "self" %}
 	<a class="post_thumbnail {% if post.thumbnail.url.is_empty() %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}">
 		{% if post.thumbnail.url.is_empty() %}