Merge pull request #140 from gempir/PaauullI-7tv

Add 7tv emote support

web/.gitignore

@@ -3,7 +3,7 @@
 # dependencies
 node_modules
 build/*
-!build/.gitkeep
+!build/gitkeep
 
 public/swagger.json
 

web/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^17.0.1",
     "react-linkify": "^1.0.0-alpha",
     "react-query": "^3.21.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^4",
     "react-window": "^1.8.6",
     "runes": "^0.4.3",
     "swagger-ui-react": "^4.0.0-beta.4",
@@ -37,9 +37,9 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ]
   },
   "devDependencies": {

web/src/hooks/use7tvChannelEmotes.ts

@@ -0,0 +1,41 @@
+import { useQuery } from "react-query";
+import { QueryDefaults } from "../store";
+import { StvChannelEmotesResponse } from "../types/7tv";
+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 fetch(`https://api.7tv.app/v2/users/${channelId}/emotes`).then(res =>
+			res.json() as Promise<StvChannelEmotesResponse>
+		);
+	}, QueryDefaults);
+
+	if (isLoading) {
+		return [];
+	}
+
+	if (error) {
+		console.error(error);
+		return [];
+	}
+
+	const emotes = [];
+
+	for (const channelEmote of data ?? []) {
+		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`,
+			}
+		});
+	}
+
+	return emotes;
+}

web/src/hooks/use7tvGlobalEmotes.ts

@@ -0,0 +1,37 @@
+import { useQuery } from "react-query";
+import { QueryDefaults } from "../store";
+import { StvGlobalEmotesResponse } from "../types/7tv";
+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 =>
+			res.json() as Promise<StvGlobalEmotesResponse>
+		);
+	}, QueryDefaults);
+
+	if (isLoading || !data) {
+		return [];
+	}
+
+	if (error) {
+		console.error(error);
+		return [];
+	}
+
+	const emotes = [];
+
+	for (const channelEmote of data ?? []) {
+		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`,
+			}
+		});
+	}
+
+	return emotes;
+}

web/src/hooks/useThirdPartyEmotes.ts

@@ -1,4 +1,6 @@
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
+import { use7tvChannelEmotes } from "./use7tvChannelEmotes";
+import { use7tvGlobalEmotes } from "./use7tvGlobalEmotes";
 import { useBttvChannelEmotes } from "./useBttvChannelEmotes";
 import { useBttvGlobalEmotes } from "./useBttvGlobalEmotes";
 import { useFfzChannelEmotes } from "./useFfzChannelEmotes";
@@ -8,8 +10,10 @@ export function useThirdPartyEmotes(channelId: string): Array<ThirdPartyEmote> {
 	const thirdPartyEmotes: Array<ThirdPartyEmote> = [
 		...useBttvChannelEmotes(channelId),
 		...useFfzChannelEmotes(channelId),
+		...use7tvChannelEmotes(channelId),
 		...useBttvGlobalEmotes(),
 		...useFfzGlobalEmotes(),
+		...use7tvGlobalEmotes(),
 	];
 
 	return thirdPartyEmotes;

web/src/types/7tv.ts

@@ -0,0 +1,35 @@
+export type StvGlobalEmotesResponse = StvChannelEmote[]
+export type StvChannelEmotesResponse = StvChannelEmote[]
+
+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[][]
+}
+
+export interface Owner {
+    id: string
+    twitch_id: string
+    login: string
+    display_name: string
+    role: Role
+    profile_picture_id?: string
+}
+
+export interface Role {
+    id: string
+    name: string
+    position: number
+    color: number
+    allowed: number
+    denied: number
+    default?: boolean
+}

web/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": [
       "dom",
       "dom.iterable",