HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge: Stop banners and backgrounds from being animated when showing animated images is disabled - fixes #435 (!574)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/574

Closes #435

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Leah <kevinlukej@gmail.com>
This commit is contained in:
dakkar 2024-07-19 16:36:07 +00:00
commit 69bdbf22b3
3 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/components/MkUserInfo.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="_panel" :class="$style.root"> <div class="_panel" :class="$style.root">
<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` : ''"></div>
<MkAvatar :class="$style.avatar" :user="user" indicator/> <MkAvatar :class="$style.avatar" :user="user" indicator/>
<div :class="$style.title"> <div :class="$style.title">
<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
@ -41,6 +41,8 @@ import { userPage } from '@/filters/user.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js'; import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { defaultStore } from '@/store.js';
defineProps<{ defineProps<{
user: Misskey.entities.UserDetailed; user: Misskey.entities.UserDetailed;

3
packages/frontend/src/components/MkUserPopup.vue
View file

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }"> <div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
<div v-if="user != null"> <div v-if="user != null">
<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"> <div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` : ''">
<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span> <span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
<span v-if="user.isLocked && $i && $i.id != user.id && !user.isFollowing" :title="i18n.ts.isLocked" :class="$style.locked"><i class="ph-lock ph-bold ph-lg"></i></span> <span v-if="user.isLocked && $i && $i.id != user.id && !user.isFollowing" :title="i18n.ts.isLocked" :class="$style.locked"><i class="ph-lock ph-bold ph-lg"></i></span>
</div> </div>
@ -79,6 +79,7 @@ import { i18n } from '@/i18n.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js'; import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
const props = defineProps<{ const props = defineProps<{
showing: boolean; showing: boolean;

25
packages/frontend/src/pages/user/home.vue
View file

@ -193,6 +193,7 @@ import { defaultStore } from '@/store.js';
import { misskeyApi } from '@/scripts/misskey-api.js'; import { misskeyApi } from '@/scripts/misskey-api.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js'; import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { useRouter } from '@/router/supplier.js'; import { useRouter } from '@/router/supplier.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
function calcAge(birthdate: string): number { function calcAge(birthdate: string): number {
const date = new Date(birthdate); const date = new Date(birthdate);
@ -258,9 +259,15 @@ if (props.user.listenbrainz) {
const background = computed(() => { const background = computed(() => {
if (props.user.backgroundUrl == null) return {}; if (props.user.backgroundUrl == null) return {};
return { if (defaultStore.state.disableShowingAnimatedImages) {
'--backgroundImageStatic': `url('${props.user.backgroundUrl}')` return {
}; '--backgroundImageStatic': `url('${getStaticImageUrl(props.user.backgroundUrl)}')`
};
} else {
return {
'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`
};
}
}); });
watch(moderationNote, async () => { watch(moderationNote, async () => {
@ -289,9 +296,15 @@ const AllPagination = {
const style = computed(() => { const style = computed(() => {
if (props.user.bannerUrl == null) return {}; if (props.user.bannerUrl == null) return {};
return { if (defaultStore.state.disableShowingAnimatedImages) {
backgroundImage: `url(${ props.user.bannerUrl })`, return {
}; backgroundImage: `url(${ getStaticImageUrl(props.user.bannerUrl) })`,
};
} else {
return {
backgroundImage: `url(${ props.user.bannerUrl })`,
};
}
}); });
const age = computed(() => { const age = computed(() => {