CyTube/www/index.html
2013-09-12 18:42:22 -05:00

191 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CyTube</title>
<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 */
}
#channeldata td, #channeldata th {
text-align: center;
vertical-align: middle;
}
</style>
<link href="./assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="index.html">CyTube</a>
<div class="">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="https://github.com/calzoneman/sync/wiki/Beginner%27s-Guide-and-FAQ" target="_blank">Help</a></li>
<li><a href="account.html">Account</a></li>
</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>
<div class="row">
<div class="span8">
<h3>Public Channels</h3>
<table id="channeldata" class="table table-striped table-bordered">
<thead>
<tr>
<th>Channel</th>
<th>Connected</th>
<th>Playing</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="span4">
<h3>Enter Channel</h3>
<input type="text" class="input-block-level" id="channel" placeholder="Channel Name">
<br>
<div class="alert alert-info">
<strong>Note:</strong> to register a channel, simply enter a channel name that isn't being used. The first person to join will have temporary admin status of that channel, and the channel can be registered by clicking the button on the blue prompt that appears on an unregistered channel.
</div>
</div>
</div>
</div> <!-- /container -->
<div class="push"></div>
<div id="sitefooter">
</div>
</div>
<div id="footer">
<p class="muted">
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>
</div>
<!-- Third party -->
<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>
<!-- Mine -->
<script src="./assets/js/data.js"></script>
<script src="./assets/js/iourl.js"></script>
<script type="text/javascript">
var host = location.protocol + "//" + location.host + "/";
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;
}
function refresh() {
$.getJSON(WEB_URL+"/api/allchannels/public?callback=?",
function(data) {
$("#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)
.text(d.pagetitle + " (" + d.name + ")")
.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("-");
}
}
});
}
$("#channel").keydown(function(ev) {
if(ev.keyCode == 13) {
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();
}
});
</script>
<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 = location.protocol + "//" + location.host + "/";
document.location = host + "r/" + params["channel"];
}
</script>
</body>
</html>