From 4cc4de275a8bfaaa03a5defa490be5a716e3521b Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:22:42 -0500 Subject: [PATCH 01/13] added clientid support --- twitch-channel-status.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 8c3c886..6ed9113 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -4,12 +4,19 @@ // Create a closure with a reference to our script (function (document, $script) { // Allow customizing the script with various data-* attributes - var attribute = $script.attr("data-attribute") || "data-twitch-channel", + var clientid = $script.attr("data-clientid") || false + attribute = $script.attr("data-attribute") || "data-twitch-channel", interval = parseInt($script.attr("data-interval")) || false, onlineImage = $script.attr("data-online-image") || 'data:image/svg+xml,', offlineImage = $script.attr("data-offline-image") || 'data:image/svg+xml,', minInterval = 30; // seconds + // if there is no clientId we cannot function! + if(!clientid) { + console.log('[twitch-channel-status] clientid is now manditory for kraken requests. (see: https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.cxn9jkpgi )') + console.log('[twitch-channel-status] the clientid can now be set as a `data-clientid` data attribute on the script tag') + } + document.refreshTwitchChannelStatuses = function () { var channels = {}; @@ -38,7 +45,7 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", - data: {"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, + data: {"clientid": clientid, "channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, dataType: "jsonp" }).done(function (data) { From 7f217d6627657276bc20bb23072b612798cdb859 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:28:20 -0500 Subject: [PATCH 02/13] changed clientid tag in send json --- twitch-channel-status.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 6ed9113..c404d53 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -45,7 +45,7 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", - data: {"clientid": clientid, "channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, + data: {"client-ID": clientid, "channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, dataType: "jsonp" }).done(function (data) { From 2cdaac3d0bc0e7ea80bbca4c88aba034965e4f98 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:29:01 -0500 Subject: [PATCH 03/13] changed clientid tag in send json --- twitch-channel-status.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index c404d53..03c38c8 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -45,7 +45,7 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", - data: {"client-ID": clientid, "channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, + data: {"Client-ID": clientid, "channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, dataType: "jsonp" }).done(function (data) { From b2d89b949f530aca32b06d06f0ae6ad2448fb665 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:33:03 -0500 Subject: [PATCH 04/13] moved Client-ID to headers changed console.log error for missing clientid --- twitch-channel-status.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 03c38c8..0d9b303 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -13,8 +13,8 @@ // if there is no clientId we cannot function! if(!clientid) { - console.log('[twitch-channel-status] clientid is now manditory for kraken requests. (see: https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.cxn9jkpgi )') - console.log('[twitch-channel-status] the clientid can now be set as a `data-clientid` data attribute on the script tag') + console.log('[twitch-channel-status] `Client-ID` is now mandatory for kraken requests. (see: https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.cxn9jkpgi )') + console.log('[twitch-channel-status] your `Client-ID` can now be set as a `data-clientid` data attribute on the script tag') } document.refreshTwitchChannelStatuses = function () { @@ -45,7 +45,11 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", - data: {"Client-ID": clientid, "channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, + beforeSend: function (request) + { + request.setRequestHeader("Client-ID", clientid); + }, + data: {"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, dataType: "jsonp" }).done(function (data) { From 2c51d339ed90e81ecaf80e571374d164b026b53b Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:40:11 -0500 Subject: [PATCH 05/13] moved Client-ID to headers changed console.log error for missing clientid --- twitch-channel-status.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 0d9b303..18d1e77 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -45,10 +45,13 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", - beforeSend: function (request) + headers: { + 'Client-ID': 'l01lduyl0cfxlgl45t85qiegau166q' + }, +/* beforeSend: function (request) { request.setRequestHeader("Client-ID", clientid); - }, + }, */ data: {"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, dataType: "jsonp" From d9258432af0edf3efe20b759d772bb1d7d3d6a85 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:43:07 -0500 Subject: [PATCH 06/13] added version --- twitch-channel-status.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 18d1e77..0d55595 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,6 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { + console.log('[twitch-channel-status] robbimu fork - v1.0.6') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -45,13 +46,13 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", - headers: { +/* headers: { 'Client-ID': 'l01lduyl0cfxlgl45t85qiegau166q' - }, -/* beforeSend: function (request) + }, */ + beforeSend: function (request) { request.setRequestHeader("Client-ID", clientid); - }, */ + }, data: {"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, dataType: "jsonp" From 5b3cfa310c9c4ef57392a3a489d5b7ca61af4648 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:47:41 -0500 Subject: [PATCH 07/13] debugging headers --- twitch-channel-status.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 0d55595..89619aa 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.6') + console.log('[twitch-channel-status] robbimu fork - v1.0.7') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -46,12 +46,8 @@ // Ask twitch for the status of all channels at once $.ajax({ url: "https://api.twitch.tv/kraken/streams", -/* headers: { + headers: { 'Client-ID': 'l01lduyl0cfxlgl45t85qiegau166q' - }, */ - beforeSend: function (request) - { - request.setRequestHeader("Client-ID", clientid); }, data: {"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, cache: false, From 3ba7d71b2ad571abc3e1bc2e14fa57d850bc66ae Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:54:58 -0500 Subject: [PATCH 08/13] moving from jsonp --- twitch-channel-status.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 89619aa..7d15814 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.7') + console.log('[twitch-channel-status] robbimu fork - v1.0.8') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -47,11 +47,10 @@ $.ajax({ url: "https://api.twitch.tv/kraken/streams", headers: { - 'Client-ID': 'l01lduyl0cfxlgl45t85qiegau166q' + 'Client-ID': clientid }, - data: {"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}, + data: JSON.stringify({"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}), cache: false, - dataType: "jsonp" }).done(function (data) { // We can only handle 100 online channels at a time :( if (data.streams.length < data._total) { From a7eec959474effa5ecc1c84ffed014835ca988a3 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 14:58:11 -0500 Subject: [PATCH 09/13] debugging return --- twitch-channel-status.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 7d15814..9340945 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.8') + console.log('[twitch-channel-status] robbimu fork - v1.0.9') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -55,6 +55,7 @@ // We can only handle 100 online channels at a time :( if (data.streams.length < data._total) { console.warn("refreshTwitchChannelStatuses couldn't load all online channels! Please reduce the number of channels you are trying to check."); + console.dir(data.streams) } // Build a hash of who's online for performance From fe6a34a4a369d688fb919c398dca1fbc63541b2b Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 15:13:24 -0500 Subject: [PATCH 10/13] debugging return --- twitch-channel-status.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 9340945..6ff89cd 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.9') + console.log('[twitch-channel-status] robbimu fork - v1.0.10') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -49,7 +49,7 @@ headers: { 'Client-ID': clientid }, - data: JSON.stringify({"channel": Object.keys(channels).join(","), "limit": Object.keys(channels).length}), + data: JSON.stringify({channel: Object.keys(channels).join(","), limit: Object.keys(channels).length}), cache: false, }).done(function (data) { // We can only handle 100 online channels at a time :( From d66f40aa973dd4d5ad715990872c95f3d7e81e11 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 15:26:35 -0500 Subject: [PATCH 11/13] debugging return --- twitch-channel-status.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 6ff89cd..8905176 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.10') + console.log('[twitch-channel-status] robbimu fork - v1.0.12') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -45,12 +45,12 @@ // Ask twitch for the status of all channels at once $.ajax({ - url: "https://api.twitch.tv/kraken/streams", + type: 'GET', + url: 'https://api.twitch.tv/kraken/streams', + data: `channel=${channels.join(",")}&limit=${channels.length}`, headers: { 'Client-ID': clientid - }, - data: JSON.stringify({channel: Object.keys(channels).join(","), limit: Object.keys(channels).length}), - cache: false, + } }).done(function (data) { // We can only handle 100 online channels at a time :( if (data.streams.length < data._total) { From 70da245225718b0cba127be416437cce8d96f990 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 15:28:21 -0500 Subject: [PATCH 12/13] rewrote ajax call --- twitch-channel-status.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 8905176..463622a 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.12') + console.log('[twitch-channel-status] robbimu fork - v1.0.13') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -47,7 +47,7 @@ $.ajax({ type: 'GET', url: 'https://api.twitch.tv/kraken/streams', - data: `channel=${channels.join(",")}&limit=${channels.length}`, + data: `channel=${Object.keys(channels).join(",")}&limit=${Object.keys(channels).length}`, headers: { 'Client-ID': clientid } From d48b71c1f03b95f60810986a592922ab874c3ab1 Mon Sep 17 00:00:00 2001 From: Robisinho Date: Wed, 14 Dec 2016 16:16:56 -0500 Subject: [PATCH 13/13] added class change so we can watch DOMSubtreeModified for the images --- twitch-channel-status.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/twitch-channel-status.js b/twitch-channel-status.js index 463622a..e26ec8e 100644 --- a/twitch-channel-status.js +++ b/twitch-channel-status.js @@ -3,7 +3,7 @@ // Create a closure with a reference to our script (function (document, $script) { - console.log('[twitch-channel-status] robbimu fork - v1.0.13') + console.log('[twitch-channel-status] robbimu fork - v1.0.14') // Allow customizing the script with various data-* attributes var clientid = $script.attr("data-clientid") || false attribute = $script.attr("data-attribute") || "data-twitch-channel", @@ -77,6 +77,7 @@ var $img = imgs[i]; var src = $img.attr("data-" + (online ? "online" : "offline") + "-image") || image; $img.attr("src", src); + online? $img.addClass('online'):$img.removeClass('online') } }