mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-13 17:30:45 +01:00
merge: Stop banners and backgrounds from being animated when showing animated images is disabled - fixes #435 (!574)
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:
commit
69bdbf22b3
3 changed files with 24 additions and 8 deletions
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<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/>
|
||||
<div :class="$style.title">
|
||||
<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 { $i } from '@/account.js';
|
||||
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
|
||||
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
||||
defineProps<{
|
||||
user: Misskey.entities.UserDetailed;
|
||||
|
|
|
@ -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="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="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>
|
||||
|
@ -79,6 +79,7 @@ import { i18n } from '@/i18n.js';
|
|||
import { defaultStore } from '@/store.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
|
||||
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||
|
||||
const props = defineProps<{
|
||||
showing: boolean;
|
||||
|
|
|
@ -193,6 +193,7 @@ import { defaultStore } from '@/store.js';
|
|||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||
|
||||
function calcAge(birthdate: string): number {
|
||||
const date = new Date(birthdate);
|
||||
|
@ -258,9 +259,15 @@ if (props.user.listenbrainz) {
|
|||
|
||||
const background = computed(() => {
|
||||
if (props.user.backgroundUrl == null) return {};
|
||||
return {
|
||||
'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`
|
||||
};
|
||||
if (defaultStore.state.disableShowingAnimatedImages) {
|
||||
return {
|
||||
'--backgroundImageStatic': `url('${getStaticImageUrl(props.user.backgroundUrl)}')`
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
watch(moderationNote, async () => {
|
||||
|
@ -289,9 +296,15 @@ const AllPagination = {
|
|||
|
||||
const style = computed(() => {
|
||||
if (props.user.bannerUrl == null) return {};
|
||||
return {
|
||||
backgroundImage: `url(${ props.user.bannerUrl })`,
|
||||
};
|
||||
if (defaultStore.state.disableShowingAnimatedImages) {
|
||||
return {
|
||||
backgroundImage: `url(${ getStaticImageUrl(props.user.bannerUrl) })`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
backgroundImage: `url(${ props.user.bannerUrl })`,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const age = computed(() => {
|
||||
|
|
Loading…
Reference in a new issue