diff --git a/panel/js/elements.js b/panel/js/elements.js
index e211da6..4c28197 100644
--- a/panel/js/elements.js
+++ b/panel/js/elements.js
@@ -15,7 +15,7 @@ function createEmote(name, src, target, tooltip) {
return mainElement;
}
-function showEmoteDetails(name, src, buttonText, buttonLink, isFollow, creatorText) {
+function showEmoteDetails(name, src, buttonText, buttonLink, creatorText, isFollow, isUseBits) {
// Set text for detailed emote popup.
document.getElementById('detailsEmoteName').innerText = name;
document.getElementById('detailsCreatorName').innerText = creatorText;
@@ -33,6 +33,15 @@ function showEmoteDetails(name, src, buttonText, buttonLink, isFollow, creatorTe
document.getElementById('detailsButton').addEventListener('click', () => {
window.Twitch.ext.actions.followChannel(displayname)
})
+ // If the emote is a bits reward emote
+ } else if (isUseBits) {
+ // Remove any previous "href" tag and use Twitch's follow feature
+ document.getElementById('detailsButton').removeAttribute('href');
+ document.getElementById('detailsButton').addEventListener('click', () => {
+ if (window.Twitch.ext.features.isBitsEnabled) {
+ window.Twitch.ext.bits.useBits("spend-500-bits")
+ }
+ })
// If the emote is not a follower emote
} else {
// Set the "href" tag to specified link if one exists.
diff --git a/panel/js/emotes.js b/panel/js/emotes.js
index ba11908..63e6b9f 100644
--- a/panel/js/emotes.js
+++ b/panel/js/emotes.js
@@ -14,6 +14,8 @@ function getChannelEmotes(auth) {
})
.then(res => res.json())
.then(body => {
+ console.log("Channel Emotes", body);
+
if (body.data.length === 0) {
let x = document.createTextNode("No emotes found.");
document.getElementById("twitchEmotes").appendChild(x);
@@ -66,20 +68,18 @@ function getChannelEmotes(auth) {
BitsEmotes = BitsEmotes.sort((a, b) => a.name.localeCompare(b.name));
AnimatedEmotes = AnimatedEmotes.sort((a, b) => a.name.localeCompare(b.name));
- console.log(FollowerEmotes, T1Emotes, T2Emotes, T3Emotes, BitsEmotes, AnimatedEmotes);
-
FollowerEmotes.forEach(emote => {
let target = "twitchEmotes";
if (configContent.settings.separateEmoteTypes) {
- document.getElementById("twitchFollowerEmotes").classList.remove("hidden");
+ document.getElementById("twitch-follower").classList.remove("hidden");
target = "twitchFollowerEmotes";
};
let x = createEmote(emote.name, emote.images.url_4x, target, `
${emote.name.toString()}Follower Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "Follow for Emote", null, true, `Follower emote for: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "Follow for Emote", null, `Follower emote for: ${displayname}`, true, false)
});
});
@@ -87,14 +87,14 @@ function getChannelEmotes(auth) {
let target = "twitchEmotes";
if (configContent.settings.separateEmoteTypes) {
- document.getElementById("twitchT1Emotes").classList.remove("hidden");
+ document.getElementById("twitch-tier-1").classList.remove("hidden");
target = "twitchT1Emotes";
};
let x = createEmote(emote.name, emote.images.url_4x, target, `
${emote.name.toString()}Tier 1 Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, false, `Tier 1 emote for: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, `Tier 1 emote for: ${displayname}`, false, false)
});
});
@@ -102,14 +102,14 @@ function getChannelEmotes(auth) {
let target = "twitchEmotes";
if (configContent.settings.separateEmoteTypes) {
- document.getElementById("twitchT2Emotes").classList.remove("hidden");
+ document.getElementById("twitch-tier-2").classList.remove("hidden");
target = "twitchT2Emotes";
};
let x = createEmote(emote.name, emote.images.url_4x, target, `
${emote.name.toString()}Tier 2 Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, false, `Tier 2 emote for: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, `Tier 2 emote for: ${displayname}`, false, false)
});
});
@@ -117,14 +117,14 @@ function getChannelEmotes(auth) {
let target = "twitchEmotes";
if (configContent.settings.separateEmoteTypes) {
- document.getElementById("twitchT3Emotes").classList.remove("hidden");
+ document.getElementById("twitch-tier-3").classList.remove("hidden");
target = "twitchT3Emotes";
};
let x = createEmote(emote.name, emote.images.url_4x, target, `
${emote.name.toString()}Tier 3 Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, false, `Tier 3 emote for: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, `Tier 3 emote for: ${displayname}`, false, false)
});
});
@@ -132,14 +132,14 @@ function getChannelEmotes(auth) {
let target = "twitchEmotes";
if (configContent.settings.separateEmoteTypes) {
- document.getElementById("twitchBitsEmotes").classList.remove("hidden");
+ document.getElementById("twitch-bits").classList.remove("hidden");
target = "twitchBitsEmotes";
};
let x = createEmote(emote.name, emote.images.url_4x, target, `
${emote.name.toString()}Bits Reward Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "Use Bits for Emote", null, false, `Bits reward emote for: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "Spend Bits for Emote", undefined, `Bits reward emote for: ${displayname}`, false, true)
})
});
@@ -147,14 +147,14 @@ function getChannelEmotes(auth) {
let target = "twitchEmotes";
if (configContent.settings.separateEmoteTypes) {
- document.getElementById("twitchAnimatedEmotes").classList.remove("hidden");
+ document.getElementById("twitch-animated").classList.remove("hidden");
target = "twitchAnimatedEmotes";
};
let x = createEmote(emote.name, `https://static-cdn.jtvnw.net/emoticons/v2/${emote.id}/animated/dark/3.0`, target, `
${emote.name.toString()}Animated Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, false, `Animated emote for: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "Subscribe for Emote", `https://subs.twitch.tv/${displayname}`, `Animated emote for: ${displayname}`, false, false)
});
});
}
@@ -190,7 +190,7 @@ function getBTTVEmotes(id) {
let x = createEmote(emote.code, `https://cdn.betterttv.net/emote/${emote.id}/3x`, `bttvEmotes`, `
${emote.code.toString()}Channel Emote`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "View on BTTV", `https://betterttv.com/emotes/${emote.id}`, false, `Created by: ${displayname}`)
+ showEmoteDetails(x.alt, x.src, "View on BTTV", `https://betterttv.com/emotes/${emote.id}`, `Created by: ${displayname}`, false, false)
})
});
};
@@ -203,7 +203,7 @@ function getBTTVEmotes(id) {
let x = createEmote(emote.code, `https://cdn.betterttv.net/emote/${emote.id}/3x`, `bttvEmotes`, `
${emote.code.toString()}By: ${emote.user.displayName.toString()}`)
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "View on BTTV", `https://betterttv.com/emotes/${emote.id}`, false, `Created by: ${emote.user.displayName.toString()}`)
+ showEmoteDetails(x.alt, x.src, "View on BTTV", `https://betterttv.com/emotes/${emote.id}`, `Created by: ${emote.user.displayName.toString()}`, false, false)
})
})
}
@@ -252,12 +252,12 @@ function getFFZEmotes(id) {
// when the emote is clicked, show it's details
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "View on FFZ", `https://frankerfacez.com/emoticon/${emote.id}`, false, `Created by: ${emote.user.displayName.toString()}`)
+ showEmoteDetails(x.alt, x.src, "View on FFZ", `https://frankerfacez.com/emoticon/${emote.id}`, `Created by: ${emote.user.displayName.toString()}`, false, false)
})
})
} catch (err) {
// if something goes wrong while rendering, not my problem
- console.log(err)
+ console.error(err)
let x = document.createTextNode("No emotes found.");
document.getElementById("ffzEmotes").appendChild(x);
}
@@ -290,12 +290,12 @@ function getSevenTVEmotes(id) {
// when clicked, it will display the details of the emote
x.addEventListener("click", () => {
- showEmoteDetails(x.alt, x.src, "View on 7TV", `https://7tv.app/emotes/${emote.id}`, false, `Created by: ${emote.owner.display_name.toString()}`)
+ showEmoteDetails(x.alt, x.src, "View on 7TV", `https://7tv.app/emotes/${emote.id}`, `Created by: ${emote.owner.display_name.toString()}`, false, false)
})
})
} catch (err) {
// if something goes wrong during rendering, just give up lmao
- console.log(err)
+ console.error(err)
let x = document.createTextNode("No emotes found.");
document.getElementById("seventvEmotes").appendChild(x);
}
diff --git a/panel/js/listeners.js b/panel/js/listeners.js
index b739691..c6a6afc 100644
--- a/panel/js/listeners.js
+++ b/panel/js/listeners.js
@@ -21,6 +21,72 @@ document.getElementById("twitch-bar").addEventListener("click", () => {
}
})
+document.getElementById("twitch-follower-bar").addEventListener("click", () => {
+ // expand and collapse channel emotes on click
+ if (document.getElementById("twitchFollowerEmotes").classList.contains("hidden")) {
+ document.getElementById("twitchFollowerEmotes").classList.remove("hidden")
+ document.getElementById("twitch-follower-collapse").className = "collapse"
+ } else {
+ document.getElementById("twitchFollowerEmotes").classList.add("hidden")
+ document.getElementById("twitch-follower-collapse").className = "expand"
+ }
+})
+
+document.getElementById("twitch-tier-1-bar").addEventListener("click", () => {
+ // expand and collapse channel emotes on click
+ if (document.getElementById("twitchT1Emotes").classList.contains("hidden")) {
+ document.getElementById("twitchT1Emotes").classList.remove("hidden")
+ document.getElementById("twitch-tier-1-collapse").className = "collapse"
+ } else {
+ document.getElementById("twitchT1Emotes").classList.add("hidden")
+ document.getElementById("twitch-tier-1-collapse").className = "expand"
+ }
+})
+
+document.getElementById("twitch-tier-2-bar").addEventListener("click", () => {
+ // expand and collapse channel emotes on click
+ if (document.getElementById("twitchT2Emotes").classList.contains("hidden")) {
+ document.getElementById("twitchT2Emotes").classList.remove("hidden")
+ document.getElementById("twitch-tier-2-collapse").className = "collapse"
+ } else {
+ document.getElementById("twitchT2Emotes").classList.add("hidden")
+ document.getElementById("twitch-tier-2-collapse").className = "expand"
+ }
+})
+
+document.getElementById("twitch-tier-3-bar").addEventListener("click", () => {
+ // expand and collapse channel emotes on click
+ if (document.getElementById("twitchT3Emotes").classList.contains("hidden")) {
+ document.getElementById("twitchT3Emotes").classList.remove("hidden")
+ document.getElementById("twitch-tier-3-collapse").className = "collapse"
+ } else {
+ document.getElementById("twitchT3Emotes").classList.add("hidden")
+ document.getElementById("twitch-tier-3-collapse").className = "expand"
+ }
+})
+
+document.getElementById("twitch-bits-bar").addEventListener("click", () => {
+ // expand and collapse channel emotes on click
+ if (document.getElementById("twitchBitsEmotes").classList.contains("hidden")) {
+ document.getElementById("twitchBitsEmotes").classList.remove("hidden")
+ document.getElementById("twitch-bits-collapse").className = "collapse"
+ } else {
+ document.getElementById("twitchBitsEmotes").classList.add("hidden")
+ document.getElementById("twitch-bits-collapse").className = "expand"
+ }
+})
+
+document.getElementById("twitch-animated-bar").addEventListener("click", () => {
+ // expand and collapse channel emotes on click
+ if (document.getElementById("twitchAnimatedEmotes").classList.contains("hidden")) {
+ document.getElementById("twitchAnimatedEmotes").classList.remove("hidden")
+ document.getElementById("twitch-animated-collapse").className = "collapse"
+ } else {
+ document.getElementById("twitchAnimatedEmotes").classList.add("hidden")
+ document.getElementById("twitch-animated-collapse").className = "expand"
+ }
+})
+
document.getElementById("bttv-bar").addEventListener("click", () => {
// expand and collapse bttv emotes on click
if (document.getElementById("bttvEmotes").classList.contains("hidden")) {
diff --git a/panel/js/panel.js b/panel/js/panel.js
index 1e8a86c..80f61a4 100644
--- a/panel/js/panel.js
+++ b/panel/js/panel.js
@@ -33,16 +33,23 @@ function stylePanel(data) {
}
}
if (data.settings.hideServiceIcons) {
- document.getElementById('channelPFP').style.display = 'none';
+ let elements = document.getElementsByClassName("sub_badge");
+
+ Array.prototype.forEach.call(elements, (element) => {
+ element.style.display = 'none';
+ });
+
document.getElementById('bttv-icon').style.display = 'none';
document.getElementById('ffz-icon').style.display = 'none';
document.getElementById('seventv-icon').style.display = 'none';
}
+ if (data.settings.separateEmoteTypes) {
+ document.getElementById('twitch').style.display = 'none';
+ }
// style the panel, will use default config if user config is not present
} finally {
document.documentElement.style.setProperty("--accent-color", data.style.accentColor);
document.documentElement.style.setProperty("--background-color", data.style.backgroundColor);
document.documentElement.style.setProperty("--font-color", data.style.fontColor);
- document.documentElement.style.setProperty("--header-font-color", data.style.headerFontColor);
};
}
\ No newline at end of file
diff --git a/panel/js/twitch.js b/panel/js/twitch.js
index f55a0cd..c68a7e2 100644
--- a/panel/js/twitch.js
+++ b/panel/js/twitch.js
@@ -10,6 +10,15 @@ function readyHandler() {
if (authenticated && configLoaded) {
// Twitch may update something, so we need to make sure it's the first run.
if (firstrun) {
+
+ console.log('Running in channel with ID:', auth.channelId);
+
+ // Get product SKUs for Twitch bit integrations
+ window.Twitch.ext.bits.getProducts()
+ .then((products) => {
+ console.log(products)
+ });
+
// Set the default config and broadcaster config.
let defaultConfig = window.Twitch.ext.configuration.global;
let broadcasterConfig = window.Twitch.ext.configuration.broadcaster;
@@ -66,13 +75,35 @@ function getExtensionData(auth) {
.catch(err => {
console.error(err);
})
- // convert to readable json string
+ // convert to readable json object
.then(res => res.json())
.then(body => {
// set the name and profile picture of broadcaster
displayname = body.data[0].display_name;
document.getElementById("channelHeaderPFP").src = body.data[0].profile_image_url;
- document.getElementById("channelPFP").src = body.data[0].profile_image_url;
}
- )
+ );
+
+ fetch(`https://api.twitch.tv/helix/chat/badges?broadcaster_id=${auth.channelId}`, {
+ method: "GET",
+ headers: {
+ "client-id": auth.clientId,
+ "Authorization": `Extension ${auth.helixToken}`
+ }
+ })
+ // if an error occurs, log it
+ .catch(err => {
+ console.error(err)
+ })
+ // convert to readable json object
+ .then(res => res.json())
+ .then(body => {
+ console.log("Subscriber Badges", body)
+
+ let elements = document.getElementsByClassName("sub_badge");
+
+ Array.prototype.forEach.call(elements, (element) => {
+ element.src = body.data[0].versions[0].image_url_4x
+ })
+ })
};
\ No newline at end of file