From 6982faf66870a0f66328d9ab57894eed5ce6c2c2 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sun, 14 Apr 2019 17:19:25 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20ObjectStrage=E5=88=A9=E7=94=A8=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E3=83=89=E3=83=A9=E3=82=A4=E3=83=96=E3=83=95=E3=82=A1?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=81=8C?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84=20(#4677?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/widgets/post-form.vue     | 7 ++-----
 src/client/app/desktop/views/components/post-form.vue | 7 ++-----
 src/client/app/mobile/views/components/post-form.vue  | 3 ++-
 src/misc/get-drive-file-url.ts                        | 2 +-
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/client/app/common/views/widgets/post-form.vue b/src/client/app/common/views/widgets/post-form.vue
index f1826cc59..c2341c8e3 100644
--- a/src/client/app/common/views/widgets/post-form.vue
+++ b/src/client/app/common/views/widgets/post-form.vue
@@ -24,7 +24,7 @@
 			<div class="files" v-show="files.length != 0">
 				<x-draggable :list="files" :options="{ animation: 150 }">
 					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
+						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl || '/assets/thumbnail-not-available.png'})` }" :title="file.name"></div>
 						<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
 					</div>
 				</x-draggable>
@@ -263,17 +263,14 @@ export default define({
 				border solid 4px transparent
 				cursor move
 
-				&:hover > .remove
-					display block
-
 				> .img
 					width 64px
 					height 64px
 					background-size cover
 					background-position center center
+					background-color: rgba(128, 128, 128, 0.3)
 
 				> .remove
-					display none
 					position absolute
 					top -6px
 					right -6px
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 6ba4d4708..cd6d49a46 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -30,7 +30,7 @@
 			<div class="files" :class="{ with: poll }" v-show="files.length != 0">
 				<x-draggable :list="files" :options="{ animation: 150 }">
 					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
+						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl || '/assets/thumbnail-not-available.png'})` }" :title="file.name"></div>
 						<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
 					</div>
 				</x-draggable>
@@ -640,17 +640,14 @@ export default Vue.extend({
 						border solid 4px transparent
 						cursor move
 
-						&:hover > .remove
-							display block
-
 						> .img
 							width 64px
 							height 64px
 							background-size cover
 							background-position center center
+							background-color: rgba(128, 128, 128, 0.3)
 
 						> .remove
-							display none
 							position absolute
 							top -6px
 							right -6px
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 9c1072b4a..0a59af69e 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -24,7 +24,7 @@
 			<div class="attaches" v-show="files.length != 0">
 				<x-draggable class="files" :list="files" :options="{ animation: 150 }">
 					<div class="file" v-for="file in files" :key="file.id">
-						<div class="img" :style="`background-image: url(${file.thumbnailUrl})`" @click="detachMedia(file)"></div>
+						<div class="img" :style="`background-image: url(${file.thumbnailUrl || '/assets/thumbnail-not-available.png'})`" @click="detachMedia(file)"></div>
 					</div>
 				</x-draggable>
 			</div>
@@ -506,6 +506,7 @@ export default Vue.extend({
 							height 64px
 							background-size cover
 							background-position center center
+							background-color: rgba(128, 128, 128, 0.3)
 
 			> .mk-uploader
 				margin 8px 0 0 0
diff --git a/src/misc/get-drive-file-url.ts b/src/misc/get-drive-file-url.ts
index f2b0f8b00..067db8a5d 100644
--- a/src/misc/get-drive-file-url.ts
+++ b/src/misc/get-drive-file-url.ts
@@ -8,7 +8,7 @@ export default function(file: IDriveFile, thumbnail = false): string {
 
 	if (file.metadata.withoutChunks) {
 		if (thumbnail) {
-			return file.metadata.thumbnailUrl || file.metadata.webpublicUrl || (isImage ? file.metadata.url : '/assets/thumbnail-not-available.png');
+			return file.metadata.thumbnailUrl || file.metadata.webpublicUrl || (isImage ? file.metadata.url : null);
 		} else {
 			return file.metadata.webpublicUrl || file.metadata.url;
 		}