mirror of https://github.com/calzoneman/sync.git
Add a few layout options
This commit is contained in:
calzoneman
parent
ddc5016497
commit
19ee0491c3
|
|
@ -43,7 +43,7 @@
|
|||
#userlist {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 360px;
|
||||
height: 347px;
|
||||
float: left;
|
||||
width: 150px;
|
||||
border: 1px solid #aaaaaa; // [](/z13)
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
#messagebuffer {
|
||||
overflow-y: scroll;
|
||||
height: 360px;
|
||||
height: 347px;
|
||||
border: 1px solid #aaaaaa; // AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
|
||||
border-left: 0;
|
||||
}
|
||||
|
|
@ -65,7 +65,8 @@
|
|||
}
|
||||
|
||||
#chatline {
|
||||
width: 456px;
|
||||
/*width: 456px;*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.userlist_siteadmin {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ var FOCUSED = true;
|
|||
var SCROLLCHAT = true;
|
||||
var PAGETITLE = "Sync";
|
||||
var TITLE_BLINK;
|
||||
var VWIDTH = "670";
|
||||
var VHEIGHT = "377";
|
||||
var uname = readCookie("sync_uname");
|
||||
var pw = readCookie("sync_pw");
|
||||
|
||||
|
|
@ -301,10 +303,62 @@ $("#library_query").keydown(function(ev) {
|
|||
searchLibrary();
|
||||
});
|
||||
|
||||
$("#largelayout").click(largeLayout);
|
||||
$("#hugelayout").click(hugeLayout);
|
||||
$("#narrowlayout").click(narrowLayout);
|
||||
$("#stlayout").click(synchtubeLayout);
|
||||
|
||||
function largeLayout() {
|
||||
$("#videodiv").removeClass().addClass("span8 offset2");
|
||||
VWIDTH = "770";
|
||||
VHEIGHT = "430";
|
||||
$("#ytapiplayer").attr("width", "770").attr("height", "430");
|
||||
var chat = $("#chatdiv").remove();
|
||||
$("#layoutrow").remove();
|
||||
var r = $("<div />").addClass("row").insertAfter($(".row")[1]);
|
||||
r.attr("id", "layoutrow");
|
||||
chat.removeClass().addClass("span8 offset2").appendTo(r);
|
||||
$("#userlist").css("width", "200px");
|
||||
//$("#chatline").css("width", "756px");
|
||||
}
|
||||
|
||||
function hugeLayout() {
|
||||
VWIDTH = "1170";
|
||||
VHEIGHT = "658";
|
||||
$("#videodiv").removeClass().addClass("span12");
|
||||
$("#ytapiplayer").attr("width", "1170").attr("height", "658");
|
||||
var chat = $("#chatdiv").remove();
|
||||
$("#layoutrow").remove();
|
||||
var r = $("<div />").addClass("row").insertAfter($(".row")[1]);
|
||||
r.attr("id", "layoutrow");
|
||||
chat.removeClass().addClass("span12").appendTo(r);
|
||||
$("#userlist").css("width", "200px").css("height", "200px");
|
||||
$("#messagebuffer").css("height", "200px");
|
||||
//$("#chatline").css("width", "1156px");
|
||||
}
|
||||
|
||||
function narrowLayout() {
|
||||
VWIDTH = "570";
|
||||
VHEIGHT = "321";
|
||||
$("#videodiv").removeClass().addClass("span6");
|
||||
$("#ytapiplayer").attr("width", "570").attr("height", "321");
|
||||
var chat = $("#chatdiv").remove();
|
||||
$("#layoutrow").remove();
|
||||
var r = $("<div />").addClass("row").insertAfter($(".row")[1]);
|
||||
r.attr("id", "layoutrow");
|
||||
chat.removeClass().addClass("span6").appendTo(r);
|
||||
$("#userlist").css("width", "150px");
|
||||
//$("#chatline").css("width", "556px");
|
||||
}
|
||||
|
||||
function synchtubeLayout() {
|
||||
$("#videodiv").remove().insertBefore($("#chatdiv"));
|
||||
}
|
||||
|
||||
function onYouTubeIframeAPIReady() {
|
||||
PLAYER = new YT.Player("ytapiplayer", {
|
||||
height: "390",
|
||||
width: "640",
|
||||
height: VHEIGHT,
|
||||
width: VWIDTH,
|
||||
videoId: "",
|
||||
playerVars: {
|
||||
"autoplay": 0,
|
||||
|
|
|
|||
|
|
@ -325,8 +325,8 @@ function updateYT(data) {
|
|||
// Note to Soundcloud/Vimeo API designers:
|
||||
// YouTube"s API is actually nice to use
|
||||
PLAYER = new YT.Player("ytapiplayer", {
|
||||
height: "390",
|
||||
width: "640",
|
||||
height: VHEIGHT,
|
||||
width: VWIDTH,
|
||||
videoId: "",
|
||||
playerVars: {
|
||||
"autoplay": 0,
|
||||
|
|
@ -391,8 +391,8 @@ function updateDM(data) {
|
|||
removeCurrentPlayer();
|
||||
PLAYER = DM.player("ytapiplayer", {
|
||||
video: data.id,
|
||||
width: 640,
|
||||
height: 390,
|
||||
width: parseInt(VWIDTH),
|
||||
height: parseInt(VHEIGHT),
|
||||
params: {autoplay: 1}
|
||||
});
|
||||
|
||||
|
|
@ -439,7 +439,7 @@ function initVI(data) {
|
|||
var div = currentEmbed.parent();
|
||||
currentEmbed.remove();
|
||||
// Ugly but it"s the only way I managed to get the API calls to work
|
||||
div[0].innerHTML += "<iframe id=\"ytapiplayer\" src=\"http://player.vimeo.com/video/" + data.id + "?api=1&player_id=ytapiplayer\" width=\"640\" height=\"390\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
|
||||
div[0].innerHTML += "<iframe id=\"ytapiplayer\" src=\"http://player.vimeo.com/video/" + data.id + "?api=1&player_id=ytapiplayer\" width=\"" + VWIDTH + "\" height=\"" + VHEIGHT + "\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
|
||||
// $f() is defined by froogaloop, Vimeo"s API wrapper
|
||||
PLAYER = $f($("iframe")[0]);
|
||||
// So we can retrieve the ID synchronously instead of waiting for
|
||||
|
|
@ -465,7 +465,7 @@ function loadTwitch(channel) {
|
|||
id: "live_embed_player_flash",
|
||||
flashvars:"hostname=www.twitch.tv&channel="+channel+"&auto_play=true&start_volume=100"
|
||||
};
|
||||
swfobject.embedSWF( url, "ytapiplayer", "640", "390", "8", null, null, params, {} );
|
||||
swfobject.embedSWF( url, "ytapiplayer", VWIDTH, VHEIGHT, "8", null, null, params, {} );
|
||||
}
|
||||
|
||||
function loadLivestream(channel) {
|
||||
|
|
@ -473,7 +473,7 @@ function loadLivestream(channel) {
|
|||
removeCurrentPlayer();
|
||||
flashvars = { channel: channel };
|
||||
params = { AllowScriptAccess: "always" };
|
||||
swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf", "ytapiplayer", "640", "390", "9.0.0", "expressInstall.swf", flashvars, params);
|
||||
swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf", "ytapiplayer", VWIDTH, VHEIGHT, "9.0.0", "expressInstall.swf", flashvars, params);
|
||||
}
|
||||
|
||||
function removeCurrentPlayer(){
|
||||
|
|
|
|||
|
|
@ -22,13 +22,8 @@
|
|||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="brand" href="#">CyTube</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<div class="">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="help.html">Help</a></li>
|
||||
|
|
@ -54,7 +49,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="span5">
|
||||
<div class="span5" id="chatdiv">
|
||||
<p id="usercount"></p>
|
||||
<div id="userlist">
|
||||
</div>
|
||||
|
|
@ -62,7 +57,7 @@
|
|||
</div>
|
||||
<input type="text" id="chatline">
|
||||
</div>
|
||||
<div class="span7">
|
||||
<div class="span7" id="videodiv">
|
||||
<p id="currenttitle">Currently Playing: </p>
|
||||
<div id="ytapiplayer">
|
||||
</div>
|
||||
|
|
@ -73,7 +68,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 50px;">
|
||||
<div class="span6">
|
||||
<div class="span6" id="queuediv">
|
||||
<div id="playlist_controls" style="display: none;">
|
||||
<input type="text" id="mediaurl" style="margin:auto;">
|
||||
<div class="btn-group">
|
||||
|
|
@ -86,7 +81,7 @@
|
|||
</ul>
|
||||
<button class="btn btn-danger" id="qlockbtn" style="width: 100%; display:none;">Unlock Queue</button>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div class="span6" id="librarydiv">
|
||||
<input type="text" id="library_query" style="margin:auto;">
|
||||
<button class="btn" id="library_search">Search Library</button>
|
||||
<ul id="library" class="videolist">
|
||||
|
|
@ -94,7 +89,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" style="display: none;" id="modnav">
|
||||
<div class="span10 offset1">
|
||||
<div class="span10 offset1" id="modtabs">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="javascript:void(0)" id="show_chancontrols">Channel Controls</a>
|
||||
|
|
@ -158,6 +153,16 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 offset3">
|
||||
<div class="btn-group" style="width: 100%">
|
||||
<button id="largelayout" class="btn">Large Layout</button>
|
||||
<button id="hugelayout" class="btn">Huge Layout</button>
|
||||
<button id="narrowlayout" class="btn">Narrow Layout</button>
|
||||
<button id="stlayout" class="btn">Synchtube Layout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
|
||||
<script src="http://api.dmcdn.net/all.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue