From 33e94285101339e9000274fd1a000d48ec7fdf9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sat, 8 Apr 2023 15:22:39 +0900
Subject: [PATCH] chore: disable sampling for cat ears (#10513)

* chore: sample 3px for cat ears

* fix: typo

* chore: disable avatar plot for cat ears
---
 .../src/components/global/MkAvatar.vue        | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 0cc30a887f..8497b8443b 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -4,12 +4,16 @@
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 	<div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]">
 		<div :class="$style.earLeft">
-			<div v-if="useBlurEffect" :class="$style.layer">
+			<div v-if="false" :class="$style.layer">
+				<div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/>
+				<div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/>
 				<div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/>
 			</div>
 		</div>
 		<div :class="$style.earRight">
-			<div v-if="useBlurEffect" :class="$style.layer">
+			<div v-if="false" :class="$style.layer">
+				<div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/>
+				<div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/>
 				<div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/>
 			</div>
 		</div>
@@ -195,11 +199,21 @@ watch(() => props.user.avatarBlurhash, () => {
 
 				> .plot {
 					contain: strict;
+					position: absolute;
 					width: 100%;
 					height: 100%;
 					clip-path: path('M0 0H1V1H0z');
 					transform: scale(32767);
 					transform-origin: 0 0;
+					opacity: 0.5;
+
+					&:first-child {
+						opacity: 1;
+					}
+
+					&:last-child {
+						opacity: calc(1 / 3);
+					}
 				}
 			}
 		}
@@ -221,6 +235,14 @@ watch(() => props.user.avatarBlurhash, () => {
 
 				> .plot {
 					background-position: 20% 10%; /* ~= 37.5deg */
+
+					&:first-child {
+						background-position-x: 21%;
+					}
+
+					&:last-child {
+						background-position-y: 11%;
+					}
 				}
 			}
 		}
@@ -241,7 +263,16 @@ watch(() => props.user.avatarBlurhash, () => {
 										-38.5857864376%); /* 40 - 2 * sqrt(2) */
 
 				> .plot {
+					position: absolute;
 					background-position: 80% 10%; /* ~= 37.5deg */
+
+					&:first-child {
+						background-position-x: 79%;
+					}
+
+					&:last-child {
+						background-position-y: 11%;
+					}
 				}
 			}
 		}