Fijxu/justlog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix 7tv emote rendering

Browse source 
Migrates to 7tv API v3 aswell
This commit is contained in:
Leppunen 2023-03-07 21:42:16 +02:00
parent b51ce07fc0
commit df5bfac0d2
3 changed files with 52 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/hooks/use7tvChannelEmotes.ts
View file

@ -6,10 +6,10 @@ import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
export function use7tvChannelEmotes(channelId: string): Array<ThirdPartyEmote> { export function use7tvChannelEmotes(channelId: string): Array<ThirdPartyEmote> {
const { isLoading, error, data } = useQuery(["7tv:channel", { channelId: channelId }], () => { const { isLoading, error, data } = useQuery(["7tv:channel", { channelId: channelId }], () => {
if (channelId === "") { if (channelId === "") {
return Promise.resolve([]); return Promise.resolve(<StvChannelEmotesResponse>{});
} }
return fetch(`https://api.7tv.app/v2/users/${channelId}/emotes`).then(res => { return fetch(`https://7tv.io/v3/users/twitch/${channelId}`).then(res => {
if (res.ok) { if (res.ok) {
return res.json() as Promise<StvChannelEmotesResponse>; return res.json() as Promise<StvChannelEmotesResponse>;
} }
@ -29,14 +29,16 @@ export function use7tvChannelEmotes(channelId: string): Array<ThirdPartyEmote> {
const emotes = []; const emotes = [];
for (const channelEmote of data ?? []) { for (const channelEmote of data?.emote_set.emotes ?? []) {
const webpEmotes = channelEmote.data.host.files.filter(i => i.format === 'WEBP');
const emoteURL = channelEmote.data.host.url;
emotes.push({ emotes.push({
id: channelEmote.id, id: channelEmote.id,
code: channelEmote.name, code: channelEmote.name,
urls: { urls: {
small: `https://cdn.7tv.app/emote/${channelEmote.id}/1x`, small: `${emoteURL}/${webpEmotes[0].name}`,
medium: `https://cdn.7tv.app/emote/${channelEmote.id}/2x`, medium: `${emoteURL}/${webpEmotes[1].name}`,
big: `https://cdn.7tv.app/emote/${channelEmote.id}/3x`, big: `${emoteURL}/${webpEmotes[2].name}`,
} }
}); });
} }

12
web/src/hooks/use7tvGlobalEmotes.ts
View file

@ -5,7 +5,7 @@ import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
export function use7tvGlobalEmotes(): Array<ThirdPartyEmote> { export function use7tvGlobalEmotes(): Array<ThirdPartyEmote> {
const { isLoading, error, data } = useQuery("7tv:global", () => { const { isLoading, error, data } = useQuery("7tv:global", () => {
return fetch("https://api.7tv.app/v2/emotes/global").then(res => { return fetch("https://7tv.io/v3/emote-sets/global").then(res => {
if (res.ok) { if (res.ok) {
return res.json() as Promise<StvGlobalEmotesResponse>; return res.json() as Promise<StvGlobalEmotesResponse>;
} }
@ -25,14 +25,16 @@ export function use7tvGlobalEmotes(): Array<ThirdPartyEmote> {
const emotes = []; const emotes = [];
for (const channelEmote of data ?? []) { for (const channelEmote of data.emotes ?? []) {
const webpEmotes = channelEmote.data.host.files.filter(i => i.format === 'WEBP');
const emoteURL = channelEmote.data.host.url;
emotes.push({ emotes.push({
id: channelEmote.id, id: channelEmote.id,
code: channelEmote.name, code: channelEmote.name,
urls: { urls: {
small: `https://cdn.7tv.app/emote/${channelEmote.id}/1x`, small: `${emoteURL}/${webpEmotes[0].name}`,
medium: `https://cdn.7tv.app/emote/${channelEmote.id}/2x`, medium: `${emoteURL}/${webpEmotes[1].name}`,
big: `https://cdn.7tv.app/emote/${channelEmote.id}/3x`, big: `${emoteURL}/${webpEmotes[2].name}`,
} }
}); });
} }

66
web/src/types/7tv.ts
View file

@ -1,35 +1,43 @@
export type StvGlobalEmotesResponse = StvChannelEmote[] export type StvGlobalEmotesResponse = StvGlobal
export type StvChannelEmotesResponse = StvChannelEmote[] export type StvChannelEmotesResponse = StvChannel
export interface StvChannelEmote { interface StvGlobal {
id: string emotes: StvEmote[];
name: string
owner: Owner
visibility: number
visibility_simple: string[]
mime: string
status: number
tags: string[]
width: number[]
height: number[]
urls: string[][]
} }
export interface Owner { interface StvChannel {
id: string emote_set: StvEmoteSet;
twitch_id: string
login: string
display_name: string
role: Role
profile_picture_id?: string
} }
export interface Role { interface StvEmoteSet {
id: string id: string;
name: string name: string;
position: number emotes: StvEmote[];
color: number }
allowed: number
denied: number
default?: boolean interface StvEmote {
id: string;
name: string;
data: StvEmoteData;
}
interface StvEmoteData {
id: string;
name: string;
listed: boolean;
animated: boolean;
host: StvEmoteHost;
}
interface StvEmoteHost {
url: string;
files: StvEmoteFile[];
}
interface StvEmoteFile {
name: string;
width: number;
height: number;
format: string;
} }