CyTube/www/index.html

192 lines
7 KiB
HTML
Raw Normal View History

2013-02-16 05:02:42 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
2013-03-23 22:15:19 +00:00
<title>CyTube</title>
2013-02-16 05:02:42 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Calvin 'calzoneman' Montgomery">
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/ytsync.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
2013-05-01 22:49:34 +00:00
#channeldata td, #channeldata th {
text-align: center;
vertical-align: middle;
}
2013-02-16 05:02:42 +00:00
</style>
<link href="./assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
2013-02-16 05:02:42 +00:00
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="index.html">CyTube</a>
2013-03-31 22:30:46 +00:00
<div class="">
2013-02-16 05:02:42 +00:00
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
2013-06-19 21:54:27 +00:00
<li><a href="https://github.com/calzoneman/sync/wiki/Beginner%27s-Guide-and-FAQ" target="_blank">Help</a></li>
2013-05-30 18:34:54 +00:00
<li><a href="account.html">Account</a></li>
2013-02-16 05:02:42 +00:00
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="loggedin" class="span6" style="display: none;">
<h3 id="welcome"></h3>
</div>
</div>
2013-05-01 22:49:34 +00:00
<div class="row">
<div class="span8">
<h3>Loaded Channels</h3>
<table id="channeldata" class="table table-striped table-bordered">
2013-04-01 21:02:09 +00:00
<thead>
2013-05-01 22:49:34 +00:00
<tr>
<th>Channel</th>
<th>Connected</th>
<th>Playing</th>
</tr>
2013-04-01 21:02:09 +00:00
</thead>
2013-05-01 22:49:34 +00:00
<tbody>
</tbody>
2013-04-01 21:02:09 +00:00
</table>
</div>
2013-05-01 22:49:34 +00:00
<div class="span4">
<h3>Enter Channel</h3>
<input type="text" id="channel" placeholder="Channel Name">
</div>
</div>
2013-02-16 05:02:42 +00:00
</div> <!-- /container -->
2013-04-28 17:14:52 +00:00
<div class="push"></div>
2013-04-30 16:13:06 +00:00
<div id="sitefooter">
</div>
2013-05-01 18:03:03 +00:00
</div>
<div id="footer">
<p class="muted">
2013-04-30 22:09:30 +00:00
CyTube Software Copyright &copy; 2013 Calvin Montgomery&nbsp;&middot;&nbsp;Available for free on <a href="http://github.com/calzoneman/sync">GitHub</a>&nbsp;&middot;
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=5Y7PUVVGVSEWG&lc=US&item_name=CyTube&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted">Donate</a>
</p>
2013-04-30 22:09:30 +00:00
</div>
2013-02-16 05:02:42 +00:00
<!-- Third party -->
2013-05-01 22:49:34 +00:00
<script src="./assets/js/jquery.js"></script>
<script src="./assets/js/bootstrap.js"></script>
<script src="./assets/js/bootstrap-transition.js"></script>
<script src="./assets/js/bootstrap-modal.js"></script>
2013-05-01 22:49:34 +00:00
<!-- Mine -->
2013-05-01 22:49:34 +00:00
<script src="./assets/js/iourl.js"></script>
<script type="text/javascript">
2013-05-01 22:49:34 +00:00
var host = document.location+"";
host = host.replace("http://", "");
var parts = host.split("/");
parts[parts.length - 1] = "";
host = parts.join("/");
2013-05-01 22:57:59 +00:00
host = "http://" + host;
2013-05-01 22:49:34 +00:00
setInterval(refresh, 10000);
refresh();
function idToURL(data) {
var entry = "";
switch(data.type) {
case "yt":
entry = "http://youtube.com/watch?v="+data.id;
break;
case "vi":
entry = "http://vimeo.com/"+data.id;
break;
case "dm":
entry = "http://dailymotion.com/video/"+data.id;
break;
case "sc":
entry = data.id;
break;
case "li":
entry = "http://livestream.com/"+data.id;
break;
case "tw":
entry = "http://twitch.tv/"+data.id;
break;
case "rt":
case "jw":
entry = data.id;
break;
default:
break;
}
return entry;
}
2013-05-01 22:49:34 +00:00
function refresh() {
2013-05-17 22:56:11 +00:00
$.getJSON(WEB_URL+"/api/json/listloaded?filter=public&callback=?", function(data) {
2013-05-01 22:49:34 +00:00
$("#channeldata").find("tbody").remove();
data.sort(function(a, b) {
var x = a.usercount;
var y = b.usercount;
if(x == y) {
var c = a.name.toLowerCase();
var d = b.name.toLowerCase();
return c == d ? 0 : (c < d ? -1 : 1);
}
return y - x;
});
for(var i = 0; i < data.length; i++) {
var d = data[i];
var tr = $("<tr/>").appendTo($("#channeldata"));
var name = $("<td/>").appendTo(tr);
$("<a/>").attr("href", host + "r/" + d.name)
2013-05-24 17:13:07 +00:00
.text(d.pagetitle + " (" + d.name + ")")
2013-05-01 22:49:34 +00:00
.appendTo(name);
$("<td/>").text(d.usercount || 0).appendTo(tr);
var title = $("<td/>").appendTo(tr);
if(d.media.id) {
$("<a/>").appendTo(title)
.text(d.media.title)
.attr("href", idToURL(d.media))
.attr("target", "_blank");
}
else {
title.text("-");
}
}
});
}
2013-05-01 22:57:59 +00:00
$("#channel").keydown(function(ev) {
if(ev.keyCode == 13) {
2013-05-13 00:46:28 +00:00
if(!$("#channel").val().match(/^[a-zA-Z0-9-_]+$/)) {
alert("Invalid channel names. Channel names may contain alphanumeric characters, underscores, and hyphens");
return;
}
document.location = host + "r/" + $("#channel").val();
2013-05-01 22:57:59 +00:00
}
});
</script>
2013-05-01 23:17:19 +00:00
<script type="text/javascript">
var params = {};
if(window.location.search) {
var parameters = window.location.search.substring(1).split("&");
for(var i = 0; i < parameters.length; i++) {
var s = parameters[i].split("=");
if(s.length != 2)
continue;
params[s[0]] = s[1];
}
}
if(params["channel"] && params["channel"].match(/^[a-zA-Z0-9]+$/)) {
var host = ""+document.location;
host = host.replace("http://", "");
host = host.substring(0, host.indexOf("/"));
document.location = "http://" + host + "/r/" + params["channel"];
}
</script>
2013-02-16 05:02:42 +00:00
</body>
</html>