From ffc74506870dd1ff99102ca20be59feceade301d Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Mon, 25 Jul 2022 17:46:29 +0800
Subject: [PATCH] add letterbox to videos

---
 .../views/private/components/file-preview.vue | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/src/views/private/components/file-preview.vue b/app/src/views/private/components/file-preview.vue
index 304bda89f8..fb07cca912 100644
--- a/app/src/views/private/components/file-preview.vue
+++ b/app/src/views/private/components/file-preview.vue
@@ -1,14 +1,12 @@
 <template>
-	<div
-		v-if="type && !imgError"
-		class="file-preview"
-		:class="{ modal: inModal, small: isSmall, svg: isSVG, centered: type === 'video' }"
-	>
+	<div v-if="type && !imgError" class="file-preview" :class="{ modal: inModal, small: isSmall, svg: isSVG }">
 		<div v-if="type === 'image'" class="image" @click="$emit('click')">
 			<v-image :src="src" :width="width" :height="height" :alt="title" @error="imgError = true" />
 		</div>
 
-		<video v-else-if="type === 'video'" controls :src="authenticatedSrc" />
+		<div v-else-if="type === 'video'" class="video">
+			<video controls :src="authenticatedSrc" />
+		</div>
 
 		<audio v-else-if="type === 'audio'" controls :src="authenticatedSrc" />
 
@@ -69,11 +67,6 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
 	position: relative;
 	max-width: calc((var(--form-column-max-width) * 2) + var(--form-horizontal-gap));
 
-	&.centered {
-		display: flex;
-		justify-content: center;
-	}
-
 	img,
 	video {
 		width: auto;
@@ -93,10 +86,13 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
 		border-radius: var(--border-radius);
 	}
 
-	.image {
+	.image,
+	.video {
 		background-color: var(--background-normal);
 		border-radius: var(--border-radius);
+	}
 
+	.image {
 		img {
 			z-index: 1;
 			display: block;
@@ -104,6 +100,16 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
 		}
 	}
 
+	.video {
+		display: flex;
+		justify-content: center;
+
+		video {
+			min-height: 80px;
+			min-width: 80px;
+		}
+	}
+
 	.fallback {
 		background-color: var(--background-normal);
 		display: flex;