natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix(client): use proxied image for instance icon

This commit is contained in:
Cleo 2023-02-10 22:46:08 +00:00
parent 6cfdc31e94
commit b54b8d4d2e
4 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/client/assets/dummy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

7
packages/client/src/ui/_common_/statusbar-federation.vue
View File

@ -4,7 +4,7 @@
<transition name="change" mode="default">
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
{{ instance.host }}
</MkA>
@ -27,6 +27,7 @@ import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
import { getNoteSummary } from '@/scripts/get-note-summary';
import { notePage } from '@/filters/note';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
const props = defineProps<{
display?: 'marquee' | 'oneByOne';
@ -56,6 +57,10 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
immediate: true,
afterMounted: true,
});
function getInstanceIcon(instance): string {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
}
</script>
<style lang="scss" scoped>

7
packages/client/src/widgets/federation.vue
View File

@ -6,7 +6,7 @@
<MkLoading v-if="fetching"/>
<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
<img :src="getInstanceIcon(instance)" alt=""/>
<div class="body">
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
@ -27,6 +27,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
import { i18n } from '@/i18n';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
const name = 'federation';
@ -71,6 +72,10 @@ useInterval(fetch, 1000 * 60, {
afterMounted: true,
});
function getInstanceIcon(instance): string {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
}
defineExpose<WidgetComponentExpose>({
name,
configure,

7
packages/client/src/widgets/instance-cloud.vue
View File

@ -4,7 +4,7 @@
<MkTagCloud v-if="activeInstances">
<li v-for="instance in activeInstances" :key="instance.id">
<a @click.prevent="onInstanceClick(instance)">
<img style="width: 32px;" :src="instance.iconUrl">
<img style="width: 32px;" :src="getInstanceIcon(instance)">
</a>
</li>
</MkTagCloud>
@ -21,6 +21,7 @@ import MkContainer from '@/components/MkContainer.vue';
import MkTagCloud from '@/components/MkTagCloud.vue';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
const name = 'instanceCloud';
@ -65,6 +66,10 @@ useInterval(() => {
afterMounted: true,
});
function getInstanceIcon(instance): string {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
}
defineExpose<WidgetComponentExpose>({
name,
configure,