From 3c4ed01dffe8bed903643d46f11b0b4ba1342ace Mon Sep 17 00:00:00 2001 From: Alf Date: Sun, 15 Oct 2017 17:39:14 -0700 Subject: [PATCH 1/3] Update to Twitch's video embed. --- css/main.css | 8 +++++++- index.html | 11 ++--------- js/main.js | 17 ++++++++++++++++- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/css/main.css b/css/main.css index 60c8281..d6e6cd5 100644 --- a/css/main.css +++ b/css/main.css @@ -61,7 +61,7 @@ border-color: #7B848F; } -.intro{ +.intro { border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -74,10 +74,16 @@ position: relative; } +.intro #video-player { + height: 100%; +} + .intro iframe { border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + height: 100%; + width: 100%; } .intro img { diff --git a/index.html b/index.html index 2d20a79..f4bd4f0 100644 --- a/index.html +++ b/index.html @@ -58,15 +58,7 @@
- +

Twitch Stream offline.

Stream offline. Come back later and watch me play.

@@ -156,6 +148,7 @@

Chat

+ diff --git a/js/main.js b/js/main.js index 97d6d57..f41bcb7 100644 --- a/js/main.js +++ b/js/main.js @@ -1,10 +1,10 @@ // Change this to be your own clientId from https://www.twitch.tv/kraken/oauth2/clients/new var clientId = "a7aag1oiocd1vxl0h9jvd2sahmaq5j0"; +var twitchUsername = "{TWITCH_USER_NAME}"; $.getJSON( "https://api.twitch.tv/kraken/streams/twitchusername?client_id="+ clientId + "&callback=?", function(response) { if (response.stream){ $('.viewers span').text(response.stream.viewers); - $('.intro iframe').removeClass("hidden"); $('.intro-text').addClass('hidden'); }else{ $('.viewers span').text("0"); @@ -14,3 +14,18 @@ $.getJSON( "https://api.twitch.tv/kraken/streams/twitchusername?client_id="+ cli $.getJSON( "https://api.twitch.tv/kraken/channels/twitchusername/follows?client_id="+ clientId + "&callback=?", function(response) { $('.followers span').text(response["_total"]); }); + +var options = { + channel: twitchUsername +} +var player = new Twitch.Player("video-player", options); + +player.addEventListener(Twitch.Player.ONLINE, function() { + $('#video-player').removeClass("hidden"); + $('.intro-text').addClass('hidden'); +}); + +player.addEventListener(Twitch.Player.OFFLINE, function() { + $('#video-player').addClass("hidden"); + $('.intro-text').removeClass('hidden'); +}); \ No newline at end of file From c1a3f6200d3ee86fe20c81fe89f3fa9c13b31ea4 Mon Sep 17 00:00:00 2001 From: Alf Date: Sun, 15 Oct 2017 17:45:46 -0700 Subject: [PATCH 2/3] Fixed linting warnings. --- js/main.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/js/main.js b/js/main.js index f41bcb7..e20d617 100644 --- a/js/main.js +++ b/js/main.js @@ -1,3 +1,5 @@ +/* global Twitch */ + // Change this to be your own clientId from https://www.twitch.tv/kraken/oauth2/clients/new var clientId = "a7aag1oiocd1vxl0h9jvd2sahmaq5j0"; var twitchUsername = "{TWITCH_USER_NAME}"; @@ -17,15 +19,15 @@ $.getJSON( "https://api.twitch.tv/kraken/channels/twitchusername/follows?client_ var options = { channel: twitchUsername -} +}; var player = new Twitch.Player("video-player", options); player.addEventListener(Twitch.Player.ONLINE, function() { - $('#video-player').removeClass("hidden"); + $('#video-player').removeClass('hidden'); $('.intro-text').addClass('hidden'); }); player.addEventListener(Twitch.Player.OFFLINE, function() { - $('#video-player').addClass("hidden"); + $('#video-player').addClass('hidden'); $('.intro-text').removeClass('hidden'); }); \ No newline at end of file From 4ae9d874f324515ef103e0b9eb907d65819586f5 Mon Sep 17 00:00:00 2001 From: Alf Date: Sun, 15 Oct 2017 17:55:21 -0700 Subject: [PATCH 3/3] Fix mixed quote linting warning. --- js/main.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/main.js b/js/main.js index e20d617..d47a747 100644 --- a/js/main.js +++ b/js/main.js @@ -6,15 +6,15 @@ var twitchUsername = "{TWITCH_USER_NAME}"; $.getJSON( "https://api.twitch.tv/kraken/streams/twitchusername?client_id="+ clientId + "&callback=?", function(response) { if (response.stream){ - $('.viewers span').text(response.stream.viewers); - $('.intro-text').addClass('hidden'); + $(".viewers span").text(response.stream.viewers); + $(".intro-text").addClass("hidden"); }else{ - $('.viewers span').text("0"); + $(".viewers span").text("0"); } }); $.getJSON( "https://api.twitch.tv/kraken/channels/twitchusername/follows?client_id="+ clientId + "&callback=?", function(response) { - $('.followers span').text(response["_total"]); + $(".followers span").text(response["_total"]); }); var options = { @@ -23,11 +23,11 @@ var options = { var player = new Twitch.Player("video-player", options); player.addEventListener(Twitch.Player.ONLINE, function() { - $('#video-player').removeClass('hidden'); - $('.intro-text').addClass('hidden'); + $("#video-player").removeClass("hidden"); + $(".intro-text").addClass("hidden"); }); player.addEventListener(Twitch.Player.OFFLINE, function() { - $('#video-player').addClass('hidden'); - $('.intro-text').removeClass('hidden'); + $("#video-player").addClass("hidden"); + $(".intro-text").removeClass("hidden"); }); \ No newline at end of file