Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ⚡ use proxied image for instance icon on ticker

Browse Source 
Closes #9426
This commit is contained in:
ThatOneCalculator 2023-01-24 15:51:34 -08:00
parent d06ed1b477
commit 2fda83c321
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/components/MkInstanceTicker.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="hpaizdrt" :style="bg">
<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl" aria-hidden="true"/>
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
<span class="name">{{ instance.name }}</span>
</div>
</template>
@ -8,6 +8,7 @@
<script lang="ts" setup>
import { instanceName } from '@/config';
import { instance as Instance } from '@/instance';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
const props = defineProps<{
instance?: {
@ -29,6 +30,10 @@ const themeColor = instance.themeColor ?? '#777777';
const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}11)`,
};
function getInstanceIcon(instance): string {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
}
</script>
<style lang="scss" scoped>

15
packages/client/src/scripts/media-proxy.ts Normal file
View File

@ -0,0 +1,15 @@
import { query } from '@/scripts/url';
import { url } from '@/config';
export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
return `${url}/proxy/image.webp?${query({
url: imageUrl,
fallback: '1',
...(type ? { [type]: '1' } : {}),
})}`;
}
export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null {
if (imageUrl == null) return null;
return getProxiedImageUrl(imageUrl, type);
}