From 094a5214f11b937259d2291f8139c4b4973dcfce Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 6 Apr 2019 00:51:31 +0900
Subject: [PATCH] Re: fix drive file preview: Fix #4532, Fix #4577 (#4590)

* :art: Re: fix drive file preview

* clean

* fix

* fix
---
 .../views/components/drive-file-thumbnail.vue | 42 ++++++++++++-------
 .../views/components/drive.file-detail.vue    |  4 +-
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue
index b5a8249bfa..faa727f3b6 100644
--- a/src/client/app/common/views/components/drive-file-thumbnail.vue
+++ b/src/client/app/common/views/components/drive-file-thumbnail.vue
@@ -4,6 +4,7 @@
 		:src="file.url"
 		:alt="file.name"
 		:title="file.name"
+		@load="onThumbnailLoaded"
 		v-if="detail && is === 'image'"/>
 	<video
 		:src="file.url"
@@ -146,21 +147,6 @@ export default Vue.extend({
 	> .icon
 		pointer-events none
 
-	> img
-		height 100%
-		width 100%
-		margin auto
-		object-fit cover
-
-	> .icon
-		height 65%
-		width 65%
-		margin auto
-
-	> video,
-	> audio
-		width 100%
-
 	> .icon-sub
 		position absolute
 		width 30%
@@ -169,9 +155,33 @@ export default Vue.extend({
 		right 4%
 		bottom 4%
 
+	> *
+		margin auto
+
+	&:not(.detail)
+		> img
+			height 100%
+			width 100%
+			object-fit cover
+
+		> .icon
+			height 65%
+			width 65%
+
+		> video,
+		> audio
+			width 100%
+
 	&.detail
 		> .icon
 			height 100px
-			margin 16px auto
+			width 100px
+			margin 16px
+
+		> *:not(.icon)
+			max-height 300px
+			max-width 100%
+			height 100%
+			object-fit contain
 
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index 266a3efc60..92f5c1fd19 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="pyvicwrksnfyhpfgkjwqknuururpaztw">
 	<div class="preview">
-		<x-file-thumbnail class="preview" :file="file" fit="cover" :detail="true"/>
+		<x-file-thumbnail class="preview" :file="file" :detail="true"/>
 		<template v-if="kind != 'image'"><fa icon="file"/></template>
 		<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
 			<span class="size">
@@ -149,8 +149,8 @@ export default Vue.extend({
 		background var(--bg)
 
 		> .preview
+			width fit-content
 			max-width 100%
-			max-height 300px
 			margin 0 auto
 			box-shadow 1px 1px 4px rgba(#000, 0.2)
 			overflow hidden