mirror of
https://iceshrimp.dev/crimekillz/trashposs
synced 2024-11-23 01:13:48 +01:00
fix(client): use proxied image for instance icon
This commit is contained in:
parent
465cb5a570
commit
2ca1717f2a
BIN
packages/client/assets/dummy.png
(Stored with Git LFS)
Normal file
BIN
packages/client/assets/dummy.png
(Stored with Git LFS)
Normal file
Binary file not shown.
@ -4,7 +4,7 @@
|
|||||||
<transition name="change" mode="default">
|
<transition name="change" mode="default">
|
||||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
<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 }">
|
<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">
|
<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
|
||||||
{{ instance.host }}
|
{{ instance.host }}
|
||||||
</MkA>
|
</MkA>
|
||||||
@ -27,6 +27,7 @@ import * as os from '@/os';
|
|||||||
import { useInterval } from '@/scripts/use-interval';
|
import { useInterval } from '@/scripts/use-interval';
|
||||||
import { getNoteSummary } from '@/scripts/get-note-summary';
|
import { getNoteSummary } from '@/scripts/get-note-summary';
|
||||||
import { notePage } from '@/filters/note';
|
import { notePage } from '@/filters/note';
|
||||||
|
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
display?: 'marquee' | 'oneByOne';
|
display?: 'marquee' | 'oneByOne';
|
||||||
@ -56,6 +57,10 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
afterMounted: true,
|
afterMounted: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function getInstanceIcon(instance): string {
|
||||||
|
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<MkLoading v-if="fetching"/>
|
<MkLoading v-if="fetching"/>
|
||||||
<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
|
<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">
|
<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">
|
<div class="body">
|
||||||
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
|
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
|
||||||
<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
|
<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
|
||||||
@ -27,6 +27,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
|
|||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { useInterval } from '@/scripts/use-interval';
|
import { useInterval } from '@/scripts/use-interval';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
|
||||||
|
|
||||||
const name = 'federation';
|
const name = 'federation';
|
||||||
|
|
||||||
@ -71,6 +72,10 @@ useInterval(fetch, 1000 * 60, {
|
|||||||
afterMounted: true,
|
afterMounted: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function getInstanceIcon(instance): string {
|
||||||
|
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose<WidgetComponentExpose>({
|
defineExpose<WidgetComponentExpose>({
|
||||||
name,
|
name,
|
||||||
configure,
|
configure,
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<MkTagCloud v-if="activeInstances">
|
<MkTagCloud v-if="activeInstances">
|
||||||
<li v-for="instance in activeInstances" :key="instance.id">
|
<li v-for="instance in activeInstances" :key="instance.id">
|
||||||
<a @click.prevent="onInstanceClick(instance)">
|
<a @click.prevent="onInstanceClick(instance)">
|
||||||
<img style="width: 32px;" :src="instance.iconUrl">
|
<img style="width: 32px;" :src="getInstanceIcon(instance)">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</MkTagCloud>
|
</MkTagCloud>
|
||||||
@ -21,6 +21,7 @@ import MkContainer from '@/components/MkContainer.vue';
|
|||||||
import MkTagCloud from '@/components/MkTagCloud.vue';
|
import MkTagCloud from '@/components/MkTagCloud.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { useInterval } from '@/scripts/use-interval';
|
import { useInterval } from '@/scripts/use-interval';
|
||||||
|
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
|
||||||
|
|
||||||
const name = 'instanceCloud';
|
const name = 'instanceCloud';
|
||||||
|
|
||||||
@ -65,6 +66,10 @@ useInterval(() => {
|
|||||||
afterMounted: true,
|
afterMounted: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function getInstanceIcon(instance): string {
|
||||||
|
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose<WidgetComponentExpose>({
|
defineExpose<WidgetComponentExpose>({
|
||||||
name,
|
name,
|
||||||
configure,
|
configure,
|
||||||
|
Loading…
Reference in New Issue
Block a user