Fix
This commit is contained in:
		
							parent
							
								
									3a26acbdb2
								
							
						
					
					
						commit
						fab0cc51b3
					
				
					 13 changed files with 17 additions and 24 deletions
				
			
		| 
						 | 
				
			
			@ -153,7 +153,7 @@ export default Vue.extend({
 | 
			
		|||
 | 
			
		||||
		thumbnail(file: any): any {
 | 
			
		||||
			return {
 | 
			
		||||
				'background-color': file.properties.avgColor && file.properties.avgColor.length == 3 ? `rgb(${file.properties.avgColor.join(',')})` : 'transparent',
 | 
			
		||||
				'background-color': file.properties.avgColor || 'transparent',
 | 
			
		||||
				'background-image': `url(${file.thumbnailUrl})`
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -55,12 +55,7 @@ export default Vue.extend({
 | 
			
		|||
		},
 | 
			
		||||
		icon(): any {
 | 
			
		||||
			return {
 | 
			
		||||
				backgroundColor: this.user.avatarColor ? this.lightmode
 | 
			
		||||
					? this.user.avatarColor
 | 
			
		||||
					: this.user.avatarColor.startsWith('rgb(')
 | 
			
		||||
						? this.user.avatarColor
 | 
			
		||||
						: null
 | 
			
		||||
					: null,
 | 
			
		||||
				backgroundColor: this.user.avatarColor,
 | 
			
		||||
				backgroundImage: this.lightmode ? null : `url(${this.url})`,
 | 
			
		||||
				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 | 
			
		||||
			};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -111,9 +111,7 @@ export default Vue.extend({
 | 
			
		|||
				: false;
 | 
			
		||||
		},
 | 
			
		||||
		background(): string {
 | 
			
		||||
			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3
 | 
			
		||||
				? `rgb(${this.file.properties.avgColor.join(',')})`
 | 
			
		||||
				: 'transparent';
 | 
			
		||||
			return this.file.properties.avgColor || 'transparent';
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
| 
						 | 
				
			
			@ -122,10 +120,10 @@ export default Vue.extend({
 | 
			
		|||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		onThumbnailLoaded() {
 | 
			
		||||
			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
 | 
			
		||||
			if (this.file.properties.avgColor) {
 | 
			
		||||
				anime({
 | 
			
		||||
					targets: this.$refs.thumbnail,
 | 
			
		||||
					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
 | 
			
		||||
					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 | 
			
		||||
					duration: 100,
 | 
			
		||||
					easing: 'linear'
 | 
			
		||||
				});
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -52,7 +52,7 @@ export default Vue.extend({
 | 
			
		|||
			}
 | 
			
		||||
 | 
			
		||||
			return {
 | 
			
		||||
				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
 | 
			
		||||
				'background-color': this.image.properties.avgColor || 'transparent',
 | 
			
		||||
				'background-image': url
 | 
			
		||||
			};
 | 
			
		||||
		}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -11,7 +11,7 @@
 | 
			
		|||
				<div class="file" v-if="message.file">
 | 
			
		||||
					<a :href="message.file.url" target="_blank" :title="message.file.name">
 | 
			
		||||
						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
 | 
			
		||||
							:style="{ backgroundColor: message.file.properties.avgColor && message.file.properties.avgColor.length == 3 ? `rgb(${message.file.properties.avgColor.join(',')})` : 'transparent' }"/>
 | 
			
		||||
							:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
 | 
			
		||||
						<p v-else>{{ message.file.name }}</p>
 | 
			
		||||
					</a>
 | 
			
		||||
				</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -165,7 +165,7 @@ export default Vue.extend({
 | 
			
		|||
		bannerStyle(): any {
 | 
			
		||||
			if (this.$store.state.i.bannerUrl == null) return {};
 | 
			
		||||
			return {
 | 
			
		||||
				backgroundColor: this.$store.state.i.bannerColor ? this.$store.state.i.bannerColor : null,
 | 
			
		||||
				backgroundColor: this.$store.state.i.bannerColor,
 | 
			
		||||
				backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -88,7 +88,7 @@ export default Vue.extend({
 | 
			
		|||
			if (this.user == null) return {};
 | 
			
		||||
			if (this.user.bannerUrl == null) return {};
 | 
			
		||||
			return {
 | 
			
		||||
				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
 | 
			
		||||
				backgroundColor: this.user.bannerColor,
 | 
			
		||||
				backgroundImage: `url(${ this.user.bannerUrl })`
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -57,7 +57,7 @@ export default Vue.extend({
 | 
			
		|||
		bannerStyle(): any {
 | 
			
		||||
			if (this.user.bannerUrl == null) return {};
 | 
			
		||||
			return {
 | 
			
		||||
				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
 | 
			
		||||
				backgroundColor: this.user.bannerColor,
 | 
			
		||||
				backgroundImage: `url(${ this.user.bannerUrl })`
 | 
			
		||||
			};
 | 
			
		||||
		}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -139,10 +139,10 @@ export default Vue.extend({
 | 
			
		|||
		},
 | 
			
		||||
 | 
			
		||||
		onThumbnailLoaded() {
 | 
			
		||||
			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
 | 
			
		||||
			if (this.file.properties.avgColor) {
 | 
			
		||||
				anime({
 | 
			
		||||
					targets: this.$refs.thumbnail,
 | 
			
		||||
					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
 | 
			
		||||
					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 | 
			
		||||
					duration: 100,
 | 
			
		||||
					easing: 'linear'
 | 
			
		||||
				});
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -65,7 +65,7 @@ export default Vue.extend({
 | 
			
		|||
		style(): any {
 | 
			
		||||
			if (this.user.bannerUrl == null) return {};
 | 
			
		||||
			return {
 | 
			
		||||
				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
 | 
			
		||||
				backgroundColor: this.user.bannerColor,
 | 
			
		||||
				backgroundImage: `url(${ this.user.bannerUrl })`
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -85,8 +85,8 @@ export default Vue.extend({
 | 
			
		|||
		},
 | 
			
		||||
 | 
			
		||||
		style(): any {
 | 
			
		||||
			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? {
 | 
			
		||||
				'background-color': `rgb(${ this.file.properties.avgColor.join(',') })`
 | 
			
		||||
			return this.file.properties.avgColor ? {
 | 
			
		||||
				'background-color': this.file.properties.avgColor
 | 
			
		||||
			} : {};
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -114,7 +114,7 @@ export default Vue.extend({
 | 
			
		|||
		style(): any {
 | 
			
		||||
			if (this.user.bannerUrl == null) return {};
 | 
			
		||||
			return {
 | 
			
		||||
				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
 | 
			
		||||
				backgroundColor: this.user.bannerColor,
 | 
			
		||||
				backgroundImage: `url(${ this.user.bannerUrl })`
 | 
			
		||||
			};
 | 
			
		||||
		}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -356,7 +356,7 @@ export default async function(
 | 
			
		|||
 | 
			
		||||
				logger.debug(`average color is calculated: ${r}, ${g}, ${b}`);
 | 
			
		||||
 | 
			
		||||
				const value = info.isOpaque ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},255)`;
 | 
			
		||||
				const value = info.isOpaque ? `rgba(${r},${g},${b},0)` : `rgba(${r},${g},${b},255)`;
 | 
			
		||||
 | 
			
		||||
				properties['avgColor'] = value;
 | 
			
		||||
			} catch (e) { }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue