Inline videos/gifs for card view (#107)

* Basic gallery support

* Inline videos for card view

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(

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"),

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{

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 -%}

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() %}