diff --git a/src/app/chat/Badge.vue b/src/app/chat/Badge.vue index 21923ade2..97dbbed92 100644 --- a/src/app/chat/Badge.vue +++ b/src/app/chat/Badge.vue @@ -6,6 +6,7 @@ :alt="alt" :style="{ backgroundColor, + borderRadius, }" @mouseenter="show(imgRef)" @mouseleave="hide()" @@ -20,16 +21,18 @@ import BadgeTooltip from "./BadgeTooltip.vue"; const props = defineProps<{ alt: string; - type: "twitch" | "app"; - badge: Twitch.ChatBadge | SevenTV.Cosmetic<"BADGE">; + type: "twitch" | "picture" | "app"; + badge: Twitch.ChatBadge | string | SevenTV.Cosmetic<"BADGE">; }>(); const backgroundColor = ref(""); +const borderRadius = ref(""); const srcset = { twitch: (badge: Twitch.ChatBadge) => `${badge.image1x} 1x, ${badge.image2x} 2x, ${badge.image4x} 4x`, + picture: (badge: string) => `${badge.slice(0, -9)}28x28.png 1.6x, ${badge.slice(0, -9)}70x70.png 3.8x`, app: (badge: SevenTV.Cosmetic<"BADGE">) => badge.data.host.files.map((fi, i) => `https:${badge.data.host.url}/${fi.name} ${i + 1}x`).join(", "), -}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.ChatBadge); +}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & string & Twitch.ChatBadge); const imgRef = ref(); @@ -44,6 +47,10 @@ function isApp(badge: typeof props.badge): badge is SevenTV.Cosmetic<"BADGE"> { if (isApp(props.badge)) { backgroundColor.value = props.badge.data.backgroundColor ?? ""; } + +if (typeof props.badge == "string") { + borderRadius.value = "25%"; +}