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> {
const { isLoading, error, data } = useQuery(["7tv:channel", { channelId: 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) {
return res.json() as Promise<StvChannelEmotesResponse>;
}
@ -29,14 +29,16 @@ export function use7tvChannelEmotes(channelId: string): Array<ThirdPartyEmote> {
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({
id: channelEmote.id,
code: channelEmote.name,
urls: {
small: `https://cdn.7tv.app/emote/${channelEmote.id}/1x`,
medium: `https://cdn.7tv.app/emote/${channelEmote.id}/2x`,
big: `https://cdn.7tv.app/emote/${channelEmote.id}/3x`,
small: `${emoteURL}/${webpEmotes[0].name}`,
medium: `${emoteURL}/${webpEmotes[1].name}`,
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> {
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) {
return res.json() as Promise<StvGlobalEmotesResponse>;
}
@ -25,14 +25,16 @@ export function use7tvGlobalEmotes(): Array<ThirdPartyEmote> {
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({
id: channelEmote.id,
code: channelEmote.name,
urls: {
small: `https://cdn.7tv.app/emote/${channelEmote.id}/1x`,
medium: `https://cdn.7tv.app/emote/${channelEmote.id}/2x`,
big: `https://cdn.7tv.app/emote/${channelEmote.id}/3x`,
small: `${emoteURL}/${webpEmotes[0].name}`,
medium: `${emoteURL}/${webpEmotes[1].name}`,
big: `${emoteURL}/${webpEmotes[2].name}`,
}
});
}

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

@ -1,35 +1,43 @@
export type StvGlobalEmotesResponse = StvChannelEmote[]
export type StvChannelEmotesResponse = StvChannelEmote[]
export type StvGlobalEmotesResponse = StvGlobal
export type StvChannelEmotesResponse = StvChannel
export interface StvChannelEmote {
id: string
name: string
owner: Owner
visibility: number
visibility_simple: string[]
mime: string
status: number
tags: string[]
width: number[]
height: number[]
urls: string[][]
interface StvGlobal {
emotes: StvEmote[];
}
export interface Owner {
id: string
twitch_id: string
login: string
display_name: string
role: Role
profile_picture_id?: string
interface StvChannel {
emote_set: StvEmoteSet;
}
export interface Role {
id: string
name: string
position: number
color: number
allowed: number
denied: number
default?: boolean
interface StvEmoteSet {
id: string;
name: string;
emotes: StvEmote[];
}
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;
}