Re: fix drive file preview: Fix #4532, Fix #4577 (#4590)

* 🎨 Re: fix drive file preview

* clean

* fix

* fix

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>

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