+
+
+
+ +
Don't like the current game a streamer is playing?
Waiting for a streamer to finally start playing something?
Missed another watch party because it was unannounced?
Login with your Twitch account and create alerts for your individual use case.
+ +
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/j.js b/scripts/j.js
new file mode 100644
index 0000000..200b54e
--- /dev/null
+++ b/scripts/j.js
@@ -0,0 +1,2 @@
+/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0
+
+
+
+ ' +
+ '
' +
+ '
';
+
+ return newStream;
+}
+
+function sanitizeString(str){
+ str = str.replace(/[^a-z0-9áéíóúñü \.,_-]/gim,"");
+ return str.trim();
+}
+
+function getStreamUptime(startTime) {
+ let start = new Date(startTime);
+ let now = new Date();
+ let hours = (((now - start) / 1000) / 60) / 60;
+ let minutes = (((now - start) / 1000) / 60) % 60;
+
+ return parseInt(hours) + ":" + parseInt(minutes).toString().padStart(2, '0');
+}
+
+function getFollowedChannels(ttvToken, ttvUserId, clientId, callback, page) {
+ fetch("https://api.twitch.tv/helix/users/follows?first=100&from_id=" + ttvUserId + (page != null ? "&after=" + page : ""), {
+ method: "GET",
+ headers: {
+ "Authorization": "Bearer " + ttvToken,
+ "Client-Id": clientId
+ }
+ }).then(response => {
+ response.json().then(data => {
+ if (data.pagination != null && Object.keys(data.pagination).length !== 0 && data.total > 100) {
+ let totalData = [];
+ Array.prototype.push.apply(totalData, data.data);
+ getFollowedChannels(ttvToken, ttvUserId, clientId, data => {
+ Array.prototype.push.apply(totalData, data);
+ callback(totalData);
+ }, data.pagination.cursor);
+ } else {
+ callback(data.data);
+ }
+ })
+ }, reason => {
+ // TODO: handle this case
+ console.log(reason);
+ });
+}
+
+function getAllTwitchCategories(ttvToken, ttvUserId, clientId, callback, page) {
+ fetch("https://api.twitch.tv/helix/games/top?first=100" + (page != null ? "&after=" + page : ""), {
+ method: "GET",
+ headers: {
+ "Authorization": "Bearer " + ttvToken,
+ "Client-Id": clientId
+ }
+ }).then(response => {
+ response.json().then(data => {
+ if (data.pagination != null && Object.keys(data.pagination).length !== 0) {
+ let totalData = [];
+ Array.prototype.push.apply(totalData, data.data);
+ getAllTwitchCategories(ttvToken, ttvUserId, clientId, data => {
+ Array.prototype.push.apply(totalData, data);
+ callback(totalData);
+ }, data.pagination.cursor);
+ } else {
+ callback(data.data);
+ }
+ })
+ }, reason => {
+ // TODO: handle this case
+ console.log(reason);
+ });
+}
+
+/**
+ *
+ * @param {*} data Data to normalize
+ * @returns Returns alphabetically sorted normalized data array
+ */
+function normalizeFollowedChannels(data) {
+ var newData = [];
+
+ data.forEach(element => {
+ newData.push({
+ "id": element.to_id,
+ "name": element.to_name,
+ "login": element.to_login,
+ "date": element.followed_at
+ });
+ });
+
+ newData.sort(function(a, b) {
+ return a.name.localeCompare(b.name);
+ });
+
+ return newData;
+}
\ No newline at end of file
diff --git a/scripts/tab_notifications.js b/scripts/tab_notifications.js
new file mode 100644
index 0000000..9e82b75
--- /dev/null
+++ b/scripts/tab_notifications.js
@@ -0,0 +1,317 @@
+function openNotificationsTab() {
+ populateNotifications();
+}
+
+function populateNotifications() {
+ isDisconnected(result => {
+ if (!result) {
+ chrome.storage.local.get("lastFollowedChannelsRefresh", lastFollowedChannelsRefresh_result => {
+ if (lastFollowedChannelsRefresh_result.lastFollowedChannelsRefresh < (Date.now() - 1800000)) {
+ chrome.storage.sync.get("ttvToken", ttvToken_result => {
+ chrome.storage.local.get("ttvUser", ttvUser_result => {
+ getFollowedChannels(
+ ttvToken_result.ttvToken,
+ ttvUser_result.ttvUser.user_id,
+ ttvUser_result.ttvUser.client_id,
+ data => {
+ chrome.storage.local.set({"lastFollowedChannelsRefresh": Date.now()});
+ chrome.storage.local.set({"followedChannels": normalizeFollowedChannels(data)}, () => {
+ chrome.storage.local.get("followedChannels", followedChannels_result => {
+ chrome.storage.local.get("allTwitchCategories", allTwitchCategories_result => {
+ if (!allTwitchCategories_result.allTwitchCategorie || allTwitchCategories_result.allTwitchCategories.length < 50) {
+ getAllTwitchCategories(
+ ttvToken_result.ttvToken, ttvUser_result.ttvUser.user_id,
+ ttvUser_result.ttvUser.client_id, data => {
+ var twitchCategoriesMap = data.map(elm => elm.name);
+ chrome.storage.local.set({"allTwitchCategories": (twitchCategoriesMap)}, () => {
+ chrome.storage.local.get("allTwitchCategories", allTwitchCategories_result => {
+ addNotifChannels(followedChannels_result.followedChannels, allTwitchCategories_result.allTwitchCategories);
+
+ });
+ });
+ },
+ null);
+ } else {
+ addNotifChannels(followedChannels_result.followedChannels, allTwitchCategories_result.allTwitchCategories);
+ }
+ });
+ });
+ });
+ },
+ null);
+ });
+ });
+ } else {
+ chrome.storage.local.get("followedChannels", followedChannels_result => {
+ chrome.storage.local.get("allTwitchCategories", allTwitchCategories_result => {
+ addNotifChannels(followedChannels_result.followedChannels, allTwitchCategories_result.allTwitchCategories);
+
+ });
+ });
+ }
+ });
+ } else {
+
+ }
+ })
+}
+
+function updateAllAlerts() {
+ $(".loading").show();
+
+ this.document.getElementsByClassName("all-alerts")[0].innerHTML = "";
+
+ chrome.storage.sync.get("enabled-notifications", notifieds_result => {
+ var enabled_notifications = notifieds_result["enabled-notifications"];
+ if (enabled_notifications == null || enabled_notifications === false)
+ enabled_notifications = [];
+
+
+ var q_enabled_notifications = enabled_notifications.reduce((unique, o) => {
+ if(!unique.some(obj => obj.type === o.type && obj.login === o.login && obj.fromcat === o.fromcat && obj.tocat === o.tocat)) {
+ unique.push(o);
+ }
+ return unique;
+ },[]);
+
+
+ var html = "";
+ q_enabled_notifications.forEach(function (element, i) {
+ var text = "I receive an " + (element.type).toString() + " when " + (element.login).toString() + " changes category from " + (element.fromcat).toString() + " to " + (element.tocat).toString()+"";
+ var single_alert = "' + sanitizeString(stream_info.user_name) + '
' +
+ '' +
+ '
' +
+ '' + sanitizeString(stream_info.title) + '
' +
+ ' ' + sanitizeString(stream_info.game_name) + '
' +
+ ' ' + new Intl.NumberFormat('fr-FR').format(stream_info.viewer_count) + '
' +
+ ' ' +
+ '"+text+"
"
+ html = html + single_alert;
+ });
+
+ this.document.getElementsByClassName("all-alerts")[0].innerHTML = html;
+
+ $(".remove-alert").click(function(){
+ var type = $(this).parents(".single-alert").children('.type')[0].textContent;
+ var login = $(this).parents(".single-alert").children('.login')[0].textContent;
+ var fromcat = $(this).parents(".single-alert").children('.fromcat')[0].textContent;
+ var tocat = $(this).parents(".single-alert").children('.tocat')[0].textContent;
+
+ removeFromEnabledNotifications(type,login,fromcat,tocat);
+ })
+
+ $(".loading").hide();
+ });
+}
+
+function addNotifChannels(followedChannels, allTwitchCategories) {
+ chrome.storage.sync.get("notified-streams", notifieds_result => {
+
+ updateAllAlerts();
+
+ this.document.getElementById("alertcreator").innerHTML = "";
+ this.document.getElementById("alertcreator").innerHTML = newStreamElement(notifieds_result["notified-streams"], followedChannels, allTwitchCategories);
+
+ tail.select("select", {
+ search: true,
+ descriptions: true,
+ hideSelected: true,
+ hideDisabled: true,
+ multiple: false,
+ });
+
+
+ document.querySelectorAll('.notification').forEach(function(el) {
+ $(".add-new-alert").click(function(){
+ var selects = el.getElementsByTagName('select');
+
+ var select_type;
+ var select_login;
+ var select_fromcat;
+ var select_tocat;
+
+
+ for (var i = 0; i < selects.length; i++) {
+ var select = selects.item(i);
+
+ if (i === 0) {
+ select_type = $(select).val();
+ }
+ if (i === 1) {
+
+ select_login = $(select).val();
+ }
+ if (i === 2) {
+ select_fromcat = $(select).val();
+ }
+ if (i === 3) {
+ select_tocat = $(select).val();
+ }
+ }
+
+
+ addToEnabledNotifications(select_type,select_login,select_fromcat,select_tocat);
+ });
+ });
+ })
+}
+
+function addToEnabledNotifications(type,login,fromcat,tocat) {
+
+
+ chrome.storage.sync.get("enabled-notifications", notifieds_result => {
+ var enabled_notifications = notifieds_result["enabled-notifications"];
+ if (enabled_notifications == null || enabled_notifications === false )
+ enabled_notifications = [];
+
+ enabled_notifications.push({
+ type: type,
+ login: login,
+ fromcat: fromcat,
+ tocat: tocat,
+ });
+
+
+ var q_enabled_notifications = enabled_notifications.reduce((unique, o) => {
+ if(!unique.some(obj => obj.type === o.type && obj.login === o.login && obj.fromcat === o.fromcat && obj.tocat === o.tocat)) {
+ unique.push(o);
+ }
+ return unique;
+ },[]);
+
+
+ chrome.storage.sync.set({"enabled-notifications": q_enabled_notifications});
+
+ chrome.storage.sync.get("enabled-notifications", notifieds_result => {
+ var enabled_notifications = notifieds_result["enabled-notifications"];
+
+ updateAllAlerts();
+ alert("Done!");
+ });
+ });
+}
+
+function removeFromEnabledNotifications(type,login,fromcat,tocat) {
+
+ chrome.storage.sync.get("enabled-notifications", notifieds_result => {
+ var enabled_notifications = notifieds_result["enabled-notifications"];
+ if (enabled_notifications == null || enabled_notifications === false)
+ enabled_notifications = [];
+
+
+ var q_enabled_notifications = enabled_notifications.reduce((unique, o) => {
+ if(!unique.some(obj => obj.type === o.type && obj.login === o.login && obj.fromcat === o.fromcat && obj.tocat === o.tocat)) {
+ unique.push(o);
+ }
+ return unique;
+ },[]);
+
+
+
+ var index = -1;
+ q_enabled_notifications.forEach(function (element, i) {
+ console.log(element);
+ console.log(type+login+fromcat+tocat);
+
+ if (element.type === type && element.login === login && element.fromcat === fromcat && element.tocat === tocat) {
+ index = i;
+ }
+ });
+ if (index !== -1) {
+ var removed = q_enabled_notifications.splice(index, 1);
+
+ chrome.storage.sync.set({"enabled-notifications": q_enabled_notifications});
+
+ chrome.storage.sync.get("enabled-notifications", notifieds_result => {
+ var enabled_notifications = notifieds_result["enabled-notifications"];
+ updateAllAlerts();
+ alert("Done!");
+ });
+ }
+ });
+}
+
+
+
+
+function addToNotified(login) {
+ chrome.storage.sync.get("notified-streams", notifieds_result => {
+ var notifieds = notifieds_result["notified-streams"];
+ if (notifieds == null)
+ notifieds = [];
+ notifieds.push(login);
+ chrome.storage.sync.set({"notified-streams": notifieds});
+ });
+}
+
+function removeFromNotified(login) {
+ chrome.storage.sync.get("notified-streams", notifieds_result => {
+ var notifieds = notifieds_result["notified-streams"];
+ if (notifieds == null)
+ notifieds = [];
+ if (notifieds.includes(login)) {
+ notifieds.splice(notifieds.indexOf(login), 1);
+ chrome.storage.sync.set({"notified-streams": notifieds});
+ }
+ });
+}
+
+function newStreamElement(notified_streams, followedChannels, allTwitchCategories){
+
+ var dropdowntwitchCategories = document.createElement("select");
+ let any = document.createElement("option");
+ any.text = "ANY CATEGORY";
+ any.value = "ANY CATEGORY";
+ dropdowntwitchCategories.add(any);
+ let off = document.createElement("option");
+ off.text = "OFFLINE";
+ off.value = "OFFLINE";
+ dropdowntwitchCategories.add(off);
+ allTwitchCategories.forEach(element => {
+ let optEle = document.createElement("option");
+ optEle.text = element;
+ optEle.value = element;
+ dropdowntwitchCategories.add(optEle);
+ });
+
+
+
+ var dropdownfollowedChannels = document.createElement("select");
+ let ansy = document.createElement("option");
+ ansy.text = "ANY STREAMER";
+ ansy.value = "ANY STREAMER";
+ dropdownfollowedChannels.add(ansy);
+ followedChannels.forEach(element => {
+ let optEle = document.createElement("option");
+ optEle.text = element.login;
+ optEle.value = element.login;
+ dropdownfollowedChannels.add(optEle);
+ });
+
+
+ var dropdownNotificationTypes = document.createElement("select");
+ var notificationTypes = [{label: "ALERT", value: "alert"},];
+ notificationTypes.forEach(element => {
+ let optEle = document.createElement("option");
+ optEle.text = element.label;
+ optEle.value = element.value;
+ dropdownNotificationTypes.add(optEle);
+ });
+
+
+ var newStream =
+ '' +
+ '
'
+ return newStream;
+}
+
+function getFollowedTime(time) {
+ let date = new Date(time);
+ return date.toLocaleString("en-US", {month: "long", day: "numeric", year: "numeric"}) + " · " + date.toLocaleTimeString("en-US", {hour12: false}).substring(0, 5);
+}
+
+function hasNotificationsEnabled(notified_streams, login) {
+ if (notified_streams == null) {
+ return false;
+ }
+ return notified_streams.includes(login);
+}
\ No newline at end of file
diff --git a/scripts/tabs.js b/scripts/tabs.js
new file mode 100644
index 0000000..1a6220e
--- /dev/null
+++ b/scripts/tabs.js
@@ -0,0 +1,39 @@
+window.addEventListener("load", function() {
+ Array.from(document.getElementById("bottom-bar").getElementsByClassName("tab-button")).forEach(element => {
+ element.onclick = function(click) {
+ switchTab(element.id);
+ };
+ });
+
+
+ switchTab("streams-notifications-button");
+});
+
+function switchTab(tabName) {
+ removeAllSelected();
+ hideAllTabs();
+
+
+ switch(tabName) {
+ case "streams-notifications-button":
+ chrome.storage.local.set({"currentTab": tabName});
+ this.document.getElementById("streams-notifications-button").classList.add("selected");
+ this.document.getElementById("notifications-page").style["display"] = "block";
+ openNotificationsTab();
+ break;
+ }
+}
+
+function removeAllSelected() {
+ var selected = Array.from(document.getElementById("bottom-bar").getElementsByClassName("selected"));
+ selected.forEach(element => {
+ element.classList.remove("selected");
+ });
+}
+
+function hideAllTabs() {
+ var selected = Array.from(document.getElementsByClassName("tab"));
+ selected.forEach(element => {
+ element.style["display"] = "none";
+ });
+}
\ No newline at end of file
diff --git a/scripts/tail.js b/scripts/tail.js
new file mode 100644
index 0000000..3da4eae
--- /dev/null
+++ b/scripts/tail.js
@@ -0,0 +1,13 @@
+/*
+ | tail.select - The vanilla solution to make your HTML select fields AWESOME!
+ | @file ./js/tail.select.js
+ | @author wolffe ' +
+ '
' +
+ 'I receive an '+dropdownNotificationTypes.outerHTML+' when '+dropdownfollowedChannels.outerHTML+' changes category from '+dropdowntwitchCategories.outerHTML+' to '+dropdowntwitchCategories.outerHTML+'' + '
' +
+ ' ' +
+ '