({ key: lang.code, value: lang.code, label: lang.name }))
},
+ canSpeakAsCat () {
+ return (this.$store.getters.mergedConfig.nyaizePosts && this.status.user.speak_as_cat)
+ },
...mapGetters(['mergedConfig'])
},
components: {
@@ -140,6 +143,16 @@ const StatusContent = {
this.$store.dispatch(
'translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom }
).finally(() => { this.translating = false })
+ },
+ speakAsCat () {
+ // taken from https://github.com/misskey-dev/misskey/blob/develop/packages/misskey-js/src/nyaize.ts
+ const enRegex1 = /(?<=n)a/gi
+ const enRegex2 = /(?<=morn)ing/gi
+ const enRegex3 = /(?<=every)one/gi
+ return this.status.text
+ .replace(enRegex1, x => x === 'A' ? 'YA' : 'ya')
+ .replace(enRegex2, x => x === 'ING' ? 'YAN' : 'yan')
+ .replace(enRegex3, x => x === 'ONE' ? 'NYAN' : 'nyan')
}
}
}
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 068c6c1b..1bc48909 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -48,7 +48,7 @@
{
// Compute scaling ratio between the natural dimensions of the image and its display dimensions
@@ -191,13 +198,13 @@ const StillImage = {
canvas.style.width = `${parentElement.clientWidth}px`;
canvas.style.height = `${parentElement.clientHeight}px`;
context.scale(ratio, ratio);
-
+
// Maintain the aspect ratio of the image
const imgAspectRatio = image.naturalWidth / image.naturalHeight;
const canvasAspectRatio = parentElement.clientWidth / parentElement.clientHeight;
-
+
let drawWidth, drawHeight;
-
+
if (imgAspectRatio > canvasAspectRatio) {
drawWidth = parentElement.clientWidth;
drawHeight = parentElement.clientWidth / imgAspectRatio;
@@ -205,7 +212,7 @@ const StillImage = {
drawHeight = parentElement.clientHeight;
drawWidth = parentElement.clientHeight * imgAspectRatio;
}
-
+
context.clearRect(0, 0, canvas.width, canvas.height); // Clear the previous unscaled image
context.imageSmoothingEnabled = true;
context.imageSmoothingQuality = 'high';
@@ -215,7 +222,7 @@ const StillImage = {
const dy = (parentElement.clientHeight - drawHeight) / 2;
context.drawImage(image, dx, dy, drawWidth, drawHeight);
});
- }
+ }
},
updated () {
// On computed animated change
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 33d9a258..cef1fe27 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -1,6 +1,7 @@
import StillImage from '../still-image/still-image.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
+import { FastAverageColor } from "fast-average-color";
import {
faRobot
@@ -20,7 +21,9 @@ const UserAvatar = {
data () {
return {
showPlaceholder: false,
- defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
+ defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+ earsReady: false,
+ earsColor: "white"
}
},
components: {
@@ -33,6 +36,26 @@ const UserAvatar = {
imageLoadError () {
this.showPlaceholder = true
}
+ },
+ computed: {
+ canShowEars () {
+ return this.$store.getters.mergedConfig.showCatEars
+ }
+ },
+ mounted () {
+ if (this.canShowEars) {
+ const fac = new FastAverageColor()
+ for (let child of this.$el.children) {
+ let img = child.querySelector("img")
+ if (img) {
+ img.crossOrigin = "anonymous";
+ img.onload = () => {
+ this.earsColor = fac.getColor(img).hex;
+ this.earsReady = true;
+ }
+ }
+ }
+ }
}
}
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index e64b54df..4bddd55b 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -3,6 +3,14 @@
class="Avatar"
:class="{ '-compact': compact }"
>
+
+
@import '../../_variables.scss';
+/* ears ripped from https://github.com/ihateblueb/aster/blob/main/packages/frontend/src/lib/components/Avatar.svelte */
.Avatar {
--_avatarShadowBox: var(--avatarStatusShadow);
--_avatarShadowFilter: var(--avatarStatusShadowFilter);
@@ -40,6 +50,17 @@
width: 48px;
height: 48px;
+ &:hover {
+ .ears {
+ .earLeft {
+ animation: earwiggleleft 1s infinite;
+ }
+ .earRight {
+ animation: earwiggleright 1s infinite;
+ }
+ }
+ }
+
&.-compact {
width: 32px;
height: 32px;
@@ -90,5 +111,116 @@
border-radius: var(--tooltipRadius);
}
+ .ears {
+ contain: strict;
+ position: absolute;
+ z-index: 0;
+ display: flex;
+
+ top: -50%;
+ left: -50%;
+ width: 100%;
+ height: 100%;
+ padding: 50%;
+
+ pointer-events: none;
+
+ .earLeft,
+ .earRight {
+ contain: strict;
+ display: inline-block;
+ height: 50%;
+ width: 50%;
+ background: currentColor;
+
+ &::after {
+ contain: strict;
+ content: '';
+ display: block;
+ width: 60%;
+ height: 60%;
+ margin: 20%;
+ background: #df548f;
+ }
+ }
+
+ .earLeft {
+ transform: rotate(37.5deg) skew(30deg);
+
+ &,
+ &::after {
+ border-radius: 25% 75% 75%;
+ }
+ }
+
+ .earRight {
+ transform: rotate(-37.5deg) skew(-30deg);
+
+ &,
+ &::after {
+ border-radius: 75% 25% 75% 75%;
+ }
+ }
+ }
+
+ @keyframes earwiggleleft {
+ from {
+ transform: rotate(37.6deg) skew(30deg);
+ }
+ 25% {
+ transform: rotate(10deg) skew(30deg);
+ }
+ 50% {
+ transform: rotate(20deg) skew(30deg);
+ }
+ 75% {
+ transform: rotate(0deg) skew(30deg);
+ }
+ to {
+ transform: rotate(37.6deg) skew(30deg);
+ }
+ }
+
+ @keyframes earwiggleright {
+ from {
+ transform: rotate(-37.6deg) skew(-30deg);
+ }
+ 30% {
+ transform: rotate(-10deg) skew(-30deg);
+ }
+ 55% {
+ transform: rotate(-20deg) skew(-30deg);
+ }
+ 75% {
+ transform: rotate(0deg) skew(-30deg);
+ }
+ to {
+ transform: rotate(-37.6deg) skew(-30deg);
+ }
+ }
+
+ @keyframes eartightleft {
+ from {
+ transform: rotate(37.6deg) skew(30deg);
+ }
+ 50% {
+ transform: rotate(37.4deg) skew(30deg);
+ }
+ to {
+ transform: rotate(37.6deg) skew(30deg);
+ }
+ }
+
+ @keyframes eartightright {
+ from {
+ transform: rotate(-37.6deg) skew(-30deg);
+ }
+ 50% {
+ transform: rotate(-37.4deg) skew(-30deg);
+ }
+ to {
+ transform: rotate(-37.6deg) skew(-30deg);
+ }
+ }
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index dc876522..cfc9eac6 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -54,7 +54,7 @@
>
@{{ user.screen_name_ui }}
-
+
{{ $t('user_card.bot') }}
+
+ {{ $t('user_card.is_cat') }}
+
{
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 59489cb7..69f84158 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -90,6 +90,8 @@ export const parseUser = (data) => {
output.friends_count = data.following_count
output.bot = data.bot
+ output.is_cat = typeof data.is_cat !== 'undefined' ? data.is_cat : false
+ output.speak_as_cat = typeof data.speak_as_cat !== 'undefined' ? data.speak_as_cat : false
output.accepts_direct_messages_from = data.accepts_direct_messages_from
output.follow_requests_count = data.follow_requests_count
if (data.akkoma) {
diff --git a/yarn.lock b/yarn.lock
index 6abf579f..17ef3fbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3998,6 +3998,11 @@ extract-zip@^2.0.1:
optionalDependencies:
"@types/yauzl" "^2.9.1"
+fast-average-color@^9.5.0:
+ version "9.5.0"
+ resolved "https://registry.yarnpkg.com/fast-average-color/-/fast-average-color-9.5.0.tgz"
+ integrity sha512-nC6x2YIlJ9xxgkMFMd1BNoM1ctMjNoRKfRliPmiEWW3S6rLTHiQcy9g3pt/xiKv/D0NAAkhb9VyV+WJFvTqMGg==
+
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"