From 3712cb4562488d1ac6d41d2c05bb2cb03e42d6dc Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 18 May 2018 15:31:28 +0900 Subject: [PATCH] =?UTF-8?q?=E9=80=8F=E9=81=8E=E7=94=BB=E5=83=8F=E3=81=AE?= =?UTF-8?q?=E3=83=AC=E3=83=B3=E3=83=80=E3=83=AA=E3=83=B3=E3=82=B0=E3=82=92?= =?UTF-8?q?=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/common/views/components/avatar.vue | 2 +- src/client/app/desktop/views/components/drive.file.vue | 4 ++-- src/client/app/desktop/views/components/media-image.vue | 2 +- src/client/app/desktop/views/pages/user/user.header.vue | 2 +- src/client/app/mobile/views/components/drive.file-detail.vue | 2 +- src/client/app/mobile/views/components/drive.file.vue | 2 +- src/client/app/mobile/views/components/media-image.vue | 2 +- src/client/app/mobile/views/pages/user.vue | 2 +- src/services/drive/add-file.ts | 5 ++++- 9 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue index a4648c272..8ec359e83 100644 --- a/src/client/app/common/views/components/avatar.vue +++ b/src/client/app/common/views/components/avatar.vue @@ -23,7 +23,7 @@ export default Vue.extend({ computed: { style(): any { return { - backgroundColor: this.user.avatarColor ? `rgb(${ this.user.avatarColor.join(',') })` : null, + backgroundColor: this.user.avatarColor && this.user.avatarColor.length == 3 ? `rgb(${ this.user.avatarColor.join(',') })` : null, backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`, borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null }; diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue index 39881711f..d8b8420ec 100644 --- a/src/client/app/desktop/views/components/drive.file.vue +++ b/src/client/app/desktop/views/components/drive.file.vue @@ -50,7 +50,7 @@ export default Vue.extend({ return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.datasize)}`; }, background(): string { - return this.file.properties.avgColor + return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent'; } @@ -129,7 +129,7 @@ export default Vue.extend({ }, onThumbnailLoaded() { - if (this.file.properties.avgColor) { + if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) { anime({ targets: this.$refs.thumbnail, backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`, diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue index e5803cc36..b98a4707e 100644 --- a/src/client/app/desktop/views/components/media-image.vue +++ b/src/client/app/desktop/views/components/media-image.vue @@ -26,7 +26,7 @@ export default Vue.extend({ computed: { style(): any { return { - 'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', + 'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', 'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)` }; } diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue index 60dc15b15..edb248dac 100644 --- a/src/client/app/desktop/views/pages/user/user.header.vue +++ b/src/client/app/desktop/views/pages/user/user.header.vue @@ -29,7 +29,7 @@ export default Vue.extend({ style(): any { if (this.user.bannerUrl == null) return {}; return { - backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null, + backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null, backgroundImage: `url(${ this.user.bannerUrl })` }; } 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 764822e98..ddf17d272 100644 --- a/src/client/app/mobile/views/components/drive.file-detail.vue +++ b/src/client/app/mobile/views/components/drive.file-detail.vue @@ -86,7 +86,7 @@ export default Vue.extend({ return this.file.type.split('/')[0]; }, style(): any { - return this.file.properties.avgColor ? { + return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? { 'background-color': `rgb(${ this.file.properties.avgColor.join(',') })` } : {}; } diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue index 7d1957042..94c8ae353 100644 --- a/src/client/app/mobile/views/components/drive.file.vue +++ b/src/client/app/mobile/views/components/drive.file.vue @@ -42,7 +42,7 @@ export default Vue.extend({ }, thumbnail(): any { return { - 'background-color': this.file.properties.avgColor ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent', + 'background-color': this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent', 'background-image': `url(${this.file.url}?thumbnail&size=128)` }; } diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue index 92d1cdc6f..9e0f8e5f7 100644 --- a/src/client/app/mobile/views/components/media-image.vue +++ b/src/client/app/mobile/views/components/media-image.vue @@ -18,7 +18,7 @@ export default Vue.extend({ computed: { style(): any { return { - 'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', + 'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', 'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)` }; } diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index 27482dc21..f43454f9d 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -84,7 +84,7 @@ export default Vue.extend({ style(): any { if (this.user.bannerUrl == null) return {}; return { - backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null, + backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null, backgroundImage: `url(${ this.user.bannerUrl })` }; } diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts index efabe345d..bcd5bee51 100644 --- a/src/services/drive/add-file.ts +++ b/src/services/drive/add-file.ts @@ -171,6 +171,9 @@ const addFile = async ( log('calculate average color...'); + const info = await prominence(gm(fs.createReadStream(path), name)).identify(); + const isTransparent = info ? info['Channel depth'].Alpha != null : false; + const buffer = await prominence(gm(fs.createReadStream(path), name) .setFormat('ppm') .resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック @@ -182,7 +185,7 @@ const addFile = async ( log(`average color is calculated: ${r}, ${g}, ${b}`); - return [r, g, b]; + return isTransparent ? [r, g, b, 255] : [r, g, b]; })(), // folder (async () => {