Emote Picker & 7TV Personal Emotes

1. 7TV Personal Emotes that are not approved for personal use should no longer appear in auto completion
2. Added 7TV Personal Emotes to the emote picker
3. First tab in emote picker has been changed from Twitch to Sub

Author: Fiszh

pages/channel.html

@@ -40,7 +40,7 @@
         </div>
 
         <div id="emote_picker_sections_selector">
-            <button id="twitch_emotes">Twitch</button>
+            <button id="sub_emotes">Sub</button>
             <button id="channel_emotes">Channel</button>
             <button id="global_emotes">Global</button>
         </div>
@@ -260,7 +260,7 @@ <h2>Stream Chat</h2>
     <script src="src/tooltip.js"></script>
     <script src="src/channel/userCard.js"></script>
     <script src="src/channel/contextMenu.js"></script>
-    <script src="src/channel/emote_picker.js"></script>
+    <script src="src/channel/emotePicker.js"></script>
 </body>
 
 </html>

src/channel/SevenTVHelperV2.js

@@ -99,7 +99,7 @@ async function pushCosmeticUserUsingGQL(cosmetic_id) {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            "query": "query GetUserForUserPage($id: ObjectID!) { user(id: $id) { id username display_name avatar_url emote_sets { id flags capacity emotes { id name data { name host { files { name height width } } owner { username display_name } } } } style { color paint { id kind name function color angle shape image_url repeat stops { at color } shadows { x_offset y_offset radius color } } badge { id kind name tooltip tag } } connections { id platform } } }",
+            "query": "query GetUserForUserPage($id: ObjectID!) { user(id: $id) { id username display_name avatar_url emote_sets { id flags capacity emotes { id name data { name state host { files { name height width } } owner { username display_name } } } } style { color paint { id kind name function color angle shape image_url repeat stops { at color } shadows { x_offset y_offset radius color } } badge { id kind name tooltip tag } } connections { id platform } } }",
             "variables": {
                 "id": `${cosmetic_id}`
             }
@@ -115,8 +115,8 @@ async function pushCosmeticUserUsingGQL(cosmetic_id) {
     if (data && data["data"]) {
         data = data["data"];
     }
-
-    if (!data || !data["user"] || data["user"].length < 1) { return; };
+    
+    if (!Object?.keys(data?.["user"])?.length) { return; };
 
     let user_id = null;
     const userData = data["user"];
@@ -164,6 +164,8 @@ async function pushCosmeticUserUsingGQL(cosmetic_id) {
                 infoTable["personal_set_id"].push(set["id"]);
 
                 if (set["emotes"] && set["emotes"].length > 0) {
+                    set["emotes"] = set["emotes"].filter(item => item.data.state.includes("PERSONAL"));
+
                     const emotes = await mapPersonalEmotes(set["emotes"]);
                     infoTable["personal_emotes"].push(...emotes);
                 }

src/channel/emote_picker.js src/channel/emotePicker.jssrc/channel/emote_picker.js renamed to src/channel/emotePicker.js

@@ -6,7 +6,7 @@ const emote_picker_sections = emote_picker.querySelector("#emote_picker_sections
 const searchInput = emote_picker_search.querySelector("#emote_picker_search_input");
 const emote_picker_sections_selector = emote_picker.querySelector("#emote_picker_sections_selector");
 
-let section = "twitch_emotes";
+let section = "sub_emotes";
 
 let modes = {
     match_case: false,
@@ -59,7 +59,7 @@ function groupEmotesByOwner(emotes) {
     return { mappedSections, remaining };
 }
 
-function displayEmotes(emote_picker_section = "twitch_emotes") {
+function displayEmotes(emote_picker_section = "sub_emotes") {
     let emoteSections = [];
 
     if (emote_picker.style.display !== "flex") {
@@ -77,7 +77,7 @@ function displayEmotes(emote_picker_section = "twitch_emotes") {
     emote_picker_sections.innerHTML = "";
     section = emote_picker_section;
 
-    if (emote_picker_section == "twitch_emotes" || emote_picker_section == "search_emotes") {
+    if (emote_picker_section == "sub_emotes" || emote_picker_section == "search_emotes") {
         const sub_emotes = removeEmoteDuplicates(
             [
                 ...TTVEmoteData.filter(emote => emote.emote_type === "subscriptions" && typeof emote.name === "string"),
@@ -154,6 +154,8 @@ function displayEmotes(emote_picker_section = "twitch_emotes") {
             ...broadcaster_bits_emotes
         ];
 
+        const foundTTVUser = TTVUsersData.find(user => user.name == `@${tmiUsername}`);
+
         emoteSections.push(
             ...broadcaster_emotes,
             ...mapped_sub_emotes,
@@ -164,6 +166,12 @@ function displayEmotes(emote_picker_section = "twitch_emotes") {
             { name: "Hype Train", emotes: hypetrain_emotes },
             { name: "Limited Time", emotes: limited_emotes }
         );
+
+        if (foundTTVUser?.cosmetics?.personal_emotes) {
+            emoteSections.push(
+                { name: "7TV Personal Emotes", emotes: foundTTVUser.cosmetics.personal_emotes }
+            );
+        }
     }
 
     if (emote_picker_section == "channel_emotes" || emote_picker_section == "search_emotes") {
@@ -208,7 +216,7 @@ function displayEmotes(emote_picker_section = "twitch_emotes") {
         if (!searchInput.value.length) {
             emote_picker_sections_selector.style.display = "flex";
 
-            displayEmotes("twitch_emotes");
+            displayEmotes("sub_emotes");
 
             return;
         } else {