<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Twitcher</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://yourwebsite.com/style.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/username/pen/aBcDef'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--ONLY WORKS IN FULL PAGE MODE-->
<!-- metadata-->
<meta name="description" content="Twitchviewer">
<meta name="author" content="Jenny Hofbauer">
<!-- navbar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<a class="navbar-brand">
<button class="iconbutton" onclick='loadOn()'>
<i class="fa fa-circle"></i>
</button>
</a>
<a class="navbar-brand">
<button class="iconbutton" onclick='loadOff()'>
<i class="fa fa-circle-o"></i>
</button>
</a>
<a class="navbar-brand">
<button class="iconbutton" onclick='loadAll()'>
<i class="fa fa-dot-circle-o"></i>
</button>
</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand">
<button class="iconbutton" onclick='removeChannel()'>
<i class="fa fa-minus-square"></i>
</button>
</a>
<a class="navbar-brand">
<button class="iconbutton" onclick='addChannel()'>
<i class="fa fa-plus-square"></i>
</button>
</a>
</ul>
</div>
</nav>
<!-- loading animation container-->
<div class="load"></div>
<!-- content container-->
<div class="container-fluid content"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js'></script>
<script src='https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/0xFFD700/twitcher-gLrNEZ */
body {
background-color: black;
}
a,
a:hover {
text-decoration: none;
}
/*media query (hovertext size)*/
@media all and (max-width: 2000px) {
h2 {
font-size: 1.6em;
}
}
@media all and (max-width: 1600px) {
h2 {
font-size: 1.2em;
}
}
@media all and (max-width: 1300px) {
h2 {
font-size: 1em;
}
}
@media all and (max-width: 960px) {
h2 {
font-size: 2em;
}
}
@media all and (max-width: 768px) {
h2 {
font-size: 3em;
}
}
@media all and (max-width: 500px) {
h2 {
font-size: 2em;
}
}
@media all and (max-width: 300px) {
h2 {
font-size: 1.5em;
}
}
/*navbar*/
.navbar,
.iconbutton {
background-color: black;
color: white;
border: none;
}
/*channel hover effects*/
.hovereffect {
position: relative;
margin-top: 10%;
}
.img-responsive {
border-radius: 25px;
}
.overlay {
display: none;
color: white;
}
h2 {
text-align: center;
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
.hovereffect:hover .overlay {
display: block;
}
.hovereffect:hover .img-responsive {
opacity: 0.2;
}
/*loading animation*/
.load {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 0, 0, 0, 0.98) url('https://upload.wikimedia.org/wikipedia/commons/3/37/YouTube_loading_symbol_2_(stable).gif') 50% 50% no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .load {
display: block;
}
/*Downloaded from https://www.codeseek.co/0xFFD700/twitcher-gLrNEZ */
var Accs = ["ESL_SC2", "OgamingSC2", "comster404", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "FreeCodeCamp", "hisisabadacct"];
//"loltyler1", "freaken_rican", "day9tv", "nathanias", "incontroltv", "sovietwomble", "escapistmagazine" to many request for Codepen works just fine in debugmode
var offAccs = [];
$(document).ready(function() {
loadOn();
});
/*API REQUESTS
AccArray: Channels to be queried (from the arrays Accs and offAccs)
AllOnOff: Specifies how the queried elements are appended (all, off, on)
baseUrl: Specifies which api request is used (channels or stream)*/
function load(AccArray, AllOnOff, baseUrl) {
$(".content").empty();
for (var j = 0; j < AccArray.length; j++) {
channel = AccArray[j];
var ajaxChannel = $.ajax({
url: baseUrl + channel,
type: 'GET',
headers: {
'Client-ID': 's5qwxoeau5a7khkn7pd9g4nvrfvymqh'
},
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json"
});
if (AllOnOff === "on") {
$.when(ajaxChannel).done(function(data) {
if (data.stream === null) {
offAccs.push(channel);
} else {
appendOn(data);
}
});
}
if (AllOnOff === "all") {
$.when(ajaxChannel).fail(function(err) {
appendErr(err);
});
}
if (AllOnOff === "all" || AllOnOff === "off") {
$.when(ajaxChannel).done(function(data) {
appendAllOff(data);
});
}
}
}
//button and onload event functions
function loadOn() {
offAccs = [];
load(Accs, "on", "https://api.twitch.tv/kraken/streams/");
}
function loadOff() {
load(offAccs, "off", "https://api.twitch.tv/kraken/channels/");
}
function loadAll() {
load(Accs, "all", "https://api.twitch.tv/kraken/channels/");
}
//append/binding functions
function appendOn(data) {
var appOn = '<div class="col-md-3 col-sm-6 col-lg-2">' +
' <a href="' + data.stream.channel.url + '">' +
'<div class="hovereffect">' +
'<img class="img-responsive" src="' + data.stream.channel.logo + '" alt="Sorry, it seems like the image got lost." width="100%">' +
'<div class="overlay">' +
'<h2>' + data.stream.channel.display_name + '<br>' + data.stream.game + '<br>' + data.stream.created_at + '</h2>' +
'</div></div></a></div>';
$(".content").append(appOn);
}
function appendAllOff(data) {
var appAll = '<div class="col-md-3 col-sm-6 col-lg-2">' +
' <a href="' + data.url + '">' +
'<div class="hovereffect">' +
'<img class="img-responsive" src="' + data.logo + '" alt="Sorry, it seems like the image got lost." width="100%">' +
'<div class="overlay">' +
'<h2>' + data.name + '</h2>' +
'</div></div></a></div>';
$(".content").append(appAll);
}
function appendErr(err) {
var appErr = '<div class="col-md-3 col-sm-6 col-lg-2">' +
'<div class="hovereffect">' +
'<img class="img-responsive" src="http://www.isv7.com/upload/Stati/polezno_znat/404.jpg" alt="error" width="100%">' +
'<div class="overlay">' +
'<h2>Sorry ' + channel + ' seems to be none existing or deleted</h2>' +
'</div></div></div>';
$(".content").append(appErr);
}
//add Channel
function addChannel() {
var UserAdd = prompt("Enter the Channel you want to add");
if (typeof UserAdd === 'string') {
Accs.push(UserAdd);
loadAll();
}
}
//remove Channel
function removeChannel() {
var UserRemove = prompt("Enter the Channel you want to remove");
if (typeof UserRemove === 'string') {
for (var e = 0; e < Accs.length; e++) {
if (UserRemove == Accs[e]) {
Accs.splice(e, 1);
loadAll();
break;
}
}
}
}
//laoding function
$body = $("body");
$(document).on({
ajaxStart: function() {
$body.addClass("loading");
},
ajaxStop: function() {
$body.removeClass("loading");
}
});