twitchtvapp-nicer00ster
Version:
twitchtv show active users
231 lines (210 loc) • 9.07 kB
JavaScript
$(document).ready(function () {
// Display results from search in #clean Modal
$('#user_search').on('click', function(e){
e.preventDefault();
$('#clean').modal('show');
});
$('#submit_search').on('submit', function(e){
e.preventDefault();
$('#clean').modal('show');
});
$(function() {
$('[data-toggle="popover"]').popover();
});
/*
var card = localStorage.getItem('card');
if (card != 'undefined' && card != null) {
$('#cards').html(localStorage.getItem('card'));
} else {
return;
}
*/
// Displays Twitch.tv stream in modal
$('#twitchModal').on('show.bs.modal', function() {
if($('#twitch-embed').children().length <= 0) { // Prevents modal adding addition Twitch.Embed players
var embed = new Twitch.Embed('twitch-embed', {
width: 470,
height: 460,
channel: $('#twitchModalTitle').text(),
layout: "video",
autoplay: false
});
} else {
return;
}
embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
var player = embed.getPlayer();
player.play();
});
});
$('#twitchModal').on('hidden.bs.modal', function() {
$('#twitchModalTitle').empty();
$('#twitch-embed').children().remove();
});
});
// First AJAX call for searching twitch.tv channels
$('#submit_search').on('submit', function() {
scroll(0, 0);
var usersearch = document.getElementById('user_input').value;
var userURL = 'https://api.twitch.tv/kraken/search/channels?query=' + usersearch;
$.ajax({
url: userURL,
type: 'GET',
dataType: 'json',
contentType: 'application/json',
headers: {
'Accept': 'application/vnd.twitchtv.v5+json',
'Client-ID': 'm6dsm7dm7pd4ltqh3nd82g5nudjbu2'
},
success: function(data) {
// Multiple search without refreshing page
// Have this before you call cloneElement() so it doesn't conflict
var clean = $('#clean').clone();
$('#clean').on('hidden.bs.modal', function() {
$(this).remove();
var clone = clean.clone();
$('body').append(clone);
$('#clean').hide();
});
cloneElement(data);
$('.list-group-item:first').hide()
console.log(data);
// Clone HTML search results to display without cluttering HTML
function cloneElement(data) {
for(var i = 0; i < data.channels.length; i++) {
var statusClassName = 'status-' + data.channels[i]._id;
var name = data.channels[i].display_name;
var game = data.channels[i].game;
var logo = data.channels[i].logo;
var follow = data.channels[i].followers;
var commas = new Intl.NumberFormat().format(follow);
const sourceElement = document.querySelector('.list-group-item');
const destination = document.querySelector('.list-group');
const copy = sourceElement.cloneNode(true);
copy.setAttribute('id', 'main_streamer-' + i);
destination.appendChild(copy);
$(copy).text(i + 1 + ". " + name);
$(copy).append('<button class="btn btn-outline-secondary pull-right add_streamer">Add</button>')
$(copy).popover({
html: true,
placement: 'right',
trigger: 'hover',
delay: {
"show": 350,
"hide": 100
},
title: '<p class="text-center popover_name font-weight-bold">'+ name +'</p><h2 class="text-center '+ statusClassName +'"></h2>',
content: '<p class="text-center popover_game">'+ game +'</p>'+'<p class="text-center popover_follow">Followers: '+ commas +'</p>'+'<img src="'+ logo +'" alt="streamers logo" class="img-thumbnail streamers_logo">'
});
}
}
// Add Twitch streamer to users dashboard
$('.add_streamer').on('click', function() {
if (confirm('Are you sure you want to add '+ $('.popover_name').text() + ' to your list?') == true) {
$("#clean .close").click();
$('.album').removeAttr('hidden');
$(function() {
$('.alert-success').attr('hidden', false).fadeIn(3000).delay(1000);
setTimeout(function(){$('.alert-success').fadeOut(1500);}, 5000);
});
$('.streamer_info').append('<div class="card"><span class="card-header"><span class="pull-right close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span></span><img src="'+ $('.streamers_logo')[0].src +'" alt="streamer logo" class="img-thumbnail"><div class="card-body"><h4 class="card-title">'+ $('.popover_name').text() +'</h4><h2 class="card-title statusOnOff">'+ $('.pstatus').html() +'<hr></h2><p class="card-text">'+ $('.popover_game').text() +'<br/>'+ $('.popover_follow').text() +'</p></div></div>');
var q = 0;
$('.card').each(function() {
q++;
var cardId = 'card-' + q;
$(this).attr('id', cardId);
$(this).val(q)
});
//localStorage.setItem('card', $('#cards').html());
} else {
return;
};
$('.close-icon:last').on('click', function() {
var $this = $(this);
$.confirm({
theme: 'modern',
title: 'Deleting Streamer',
content: 'Are you sure you want to delete '+ $this.closest('.card').find('h4').text() +' from your dashboard?',
buttons: {
Okay: function() {
$.alert({
theme: 'modern',
title: 'Success!',
content: $this.closest('.card').find('h4').text() + ' has been removed!'
}),
$this.closest('.card').fadeOut();
setTimeout(function() {
$this.closest('.card').remove();
}, 1000);
setTimeout(function() {
if($('.card').length <= 0) {
$('.album').attr('hidden', true);
} else {
return;
}
}, 1050);
//localStorage.removeItem('card');
},
Cancel: function() {
}
}
});
});
// Show whether LIVE or OFFLINE on dashboard.
if ($('.statusOnOff:last').text() == "LIVE") {
$('.statusOnOff:last').addClass('popover_status_on animated infinite pulse');
} else if ($('.statusOnOff:last').text() == "OFFLINE") {
$('.statusOnOff:last').addClass('popover_status_off');
} else {
return;
};
// Prevents "Watch Stream!" button from cloning on previous streamers cards.
if ($('.card-body:last').children().length <= 3) {
$('.card-body:last').append('<button href="#" class="btn btn-outline-success" data-channel="'+$('.popover_name').text()+'"data-toggle="modal" data-target="#twitchModal">Watch Stream!</button>');
$('.btn-outline-success').on('click', function() {
$('#twitchModalTitle').empty();
$('#twitchModalTitle').append($(this).data('channel'))
});
} else {
return;
};
// Disables "Watch Stream" button if streamer is offline, and sets the players icon opaque.
$('.card h2.popover_status_off').parents('.card').find('button').prop('disabled', true);
$('.card h2.popover_status_off').parents('.card').find('img').prop('style', 'opacity: .55;');
});
var twitchId = [];
for(var x = 0; x < data.channels.length; x++) {
twitchId.push(data.channels[x]._id);
}
console.log(twitchId)
twitchId.forEach(function(stream) {
// Second AJAX call to check if live.
var streamURL = 'https://api.twitch.tv/kraken/streams/' + stream;
$.ajax({
url: streamURL,
type: 'GET',
dataType: 'json',
contentType: 'application/json',
headers: {
'Accept': 'application/vnd.twitchtv.v5+json',
'Client-ID': 'm6dsm7dm7pd4ltqh3nd82g5nudjbu2'
},
success: function(data) {
// Check if streamer is live or not
$('.list-group-item').on('shown.bs.popover', function() {
if(data.stream == null) {
$('.status-' + stream).append('OFFLINE');
$('.status-' + stream).addClass('popover_status_off');
$('.status-' + stream).addClass('pstatus');
} else {
$('.status-' + stream).append('LIVE');
$('.status-' + stream).addClass('popover_status_on animated infinite pulse');
$('.status-' + stream).addClass('pstatus');
}
});
}
});
})
}
});
});