Add synchtube-fluid and hd layout

This commit is contained in:
calzoneman 2014-01-26 14:15:50 -06:00
parent 0f82faaef8
commit 8a7cbb2a84
5 changed files with 271 additions and 129 deletions

View file

@ -3,6 +3,7 @@ html(lang="en")
head
include head
mixin head()
link(href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", rel="stylesheet")
body
#wrap
nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
@ -12,97 +13,190 @@ html(lang="en")
- var cname = "/r/" + channelName
ul.nav.navbar-nav
mixin navdefaultlinks(cname)
li: a(href="javascript:showUserOptions()") Options
li: a(href="#", onclick="javascript:showUserOptions()") Options
li: a#showchansettings(href="#", onclick="javascript:$('#channeloptions').modal()") Channel Settings
mixin navloginlogout(cname)
section#mainpage
.container
#motdwrap.col-lg-12.col-md-12
#motd
#announcements.col-lg-12.col-md-12
.alert.alert-info Demo announcement
#drinkbar.col-lg-12.col-md-12
#drinkcount
#videowrap.hd-video-wrap.col-lg-8.col-lg-offset-2.col-md-8.col-md-offset-2
#videoopts.col-lg-8.col-lg-offset-2.col-md-8.col-md-offset-2
button#voteskip.btn.btn-sm.btn-default Voteskip
.vertical-spacer.col-lg-8.col-md-8
#playlistwrap.col-lg-6.col-md-6
#playlistheader
button#showimport.btn.btn-default.btn-xs.btn-block(data-toggle="collapse", data-target="#playlistcontrols") Playlist Controls
#playlistcontrols.collapse
strong Add from URL
#fromurl.input-group
input#urlinput.form-control(type="text")
.input-group-btn
button#queuenext.btn.btn-default(type="button") Next
button#queueend.btn.btn-default(type="button") End
hr
#customembed
strong Custom Embed
br
| Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags)
textarea#customembedcode.form-control.input-block-level(rows="3")
#motdrow.row
.col-lg-12.col-md-12
#motdwrap.well
button#togglemotd.close.pull-right(type="button")
span.glyphicon.glyphicon-minus
#motd
.clear
#announcements.row
#drinkbarwrap.row
#drinkbar.col-lg-12.col-md-12
h1#drinkcount
#videowrap.col-md-8.col-md-offset-2
p#currenttitle Nothing Playing
#ytapiplayer
#rightcontrols.col-md-8.col-md-offset-2
.btn-group.pull-right
button#mediarefresh.btn.btn-sm.btn-default(title="Reload the video player")
span.glyphicon.glyphicon-retweet
button#getplaylist.btn.btn-sm.btn-default(title="Retrieve playlist links")
span.glyphicon.glyphicon-link
button#voteskip.btn.btn-sm.btn-default(title="Voteskip")
span.glyphicon.glyphicon-step-forward
#main.row
#playlistrow.row
#rightpane.col-md-6
#rightpane-inner.row
.col-md-12
#plcontrol.btn-group
button#showsearch.btn.btn-sm.btn-default(title="Search for a video", data-toggle="collapse", data-target="#searchcontrol")
span.glyphicon.glyphicon-search
button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
span.glyphicon.glyphicon-plus
button#showcustomembed.btn.btn-sm.btn-default(title="Embed a custom frame", data-toggle="collapse", data-target="#customembed")
span.glyphicon.glyphicon-th-large
button#clearplaylist.btn.btn-sm.btn-default(title="Clear the playlist")
span.glyphicon.glyphicon-trash
button#shuffleplaylist.btn.btn-sm.btn-default(title="Shuffle the playlist")
span.glyphicon.glyphicon-sort
button#qlockbtn.btn.btn-sm.btn-danger(title="Playlist locked")
span.glyphicon.glyphicon-lock
#addfromurl.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#customembedtitle.form-control.input-block-level(placeholder="(Optional) Title")
.input-group-btn
button#customqueuenext.btn.btn-default(type="button") Next
button#customqueueend.btn.btn-default(type="button") End
hr
#misccontrols
strong Additional Controls
button#clearplaylist.btn.btn-xs.btn-default.btn-block(type="button") Clear Playlist
button#shuffleplaylist.btn.btn-xs.btn-default.btn-block(type="button") Shuffle Playlist
hr
button#showsearch.btn.btn-default.btn-xs.btn-block(data-toggle="collapse", data-target="#fromsearch") Search Library/YouTube
#fromsearch.collapse
.input-group
input#ytsearchtext.form-control(type="text")
.input-group-btn
button#libsearchbtn.btn.btn-default(type="button") Library
button#ytsearchbtn.btn.btn-default(type="button") YouTube
hr
#searchresultswrap(style="display: none")
#searchresults
hr
ul#playlist
li
.btn-group.video-buttons
button.btn.btn-xs.btn-default
span.glyphicon.glyphicon-play
button.btn.btn-xs.btn-default
span.glyphicon.glyphicon-share-alt
button.btn.btn-xs.btn-default
span.glyphicon.glyphicon-flag
button.btn.btn-xs.btn-default
span.glyphicon.glyphicon-trash
a.video-title(href="#") Some Video Thing
span.video-time 02:00
span.clear
li
a.video-title(href="#") Some Video Thing
span.video-time 02:00
span.clear
li
a.video-title(href="#") Some Video Thing
span.video-time 02:00
span.clear
#chatwrap.col-lg-6.col-md-6
#chatheader
span Not connected
ul#chatlist.pull-right
li Test
li Test 2
#chatbuffer.linewrap.
sdfngjksdfngjnsdjkgfnjklsdngjksdngfsnjdfg
sdgfsdjifgjksdfngjksdngfjksdfnjgfknsdjkgfnsdgsdbfasdhbfhjbasdhjfbsdhjbghjsdfbghjsdbhjgbsdhjfbghjdsfbghj
fsdfgfnjksdgjnsdjgnfjksngjksngjnksjgnsjnfgsd
gfsnjgfjsnjkg
input#chatline.form-control.input-block-level(type="text")
input#mediaurl.form-control(type="text", placeholder="Media URL")
span.input-group-btn
button#queue_next.btn.btn-default Next
span.input-group-btn
button#queue_end.btn.btn-default At End
#searchcontrol.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#library_query.form-control(type="text", placeholder="Search query")
span.input-group-btn
button#library_search.btn.btn-default Library
span.input-group-btn
button#youtube_search.btn.btn-default YouTube
ul#library.videolist.col-lg-12.col-md-12
#customembed.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#customembed-title.form-control(type="text", placeholder="Title (optional)")
span.input-group-btn
button#ce_queue_next.btn.btn-default Next
span.input-group-btn
button#ce_queue_end.btn.btn-default At End
| Paste the embed code below and click Next or At End.
| Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags.
textarea#customembed-content.input-block-level.form-control(rows="3")
#queuefail.col-lg-12.col-md-12
.vertical-spacer
.col-lg-12.col-md-12
ul#queue.videolist
#plmeta
span#plcount 0 items
span#pllength 00:00:00
#chatwrap.col-md-6
#chatheader
i#userlisttoggle.glyphicon.glyphicon-chevron-up.pull-left.pointer(title="Show/Hide Userlist")
span#usercount.pointer Not Connected
span#modflair.label.label-default.pull-right.pointer M
span#adminflair.label.label-default.pull-right.pointer A
#userlist
#messagebuffer
input#chatline.form-control(type="text", maxlength="240", style="display: none")
#guestlogin.input-group
span.input-group-addon Guest login
input#guestname.form-control(type="text", placeholder="Name")
#leftcontrols.col-lg-5.col-md-5
button#newpollbtn.btn.btn-sm.btn-default New Poll
#leftpane.col-lg-5.col-md-5
#leftpane-inner.row
#pollwrap.col-lg-12.col-md-12
#playlistmanagerwrap.col-lg-12.col-md-12
button#showplaylistmanager.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistmanager") Playlist Manager
#playlistmanager.collapse
.row.vertical-spacer
.col-lg-12.col-md-12
.input-group
input#userpl_name.form-control(type="text", placeholder="Playlist Name")
span.input-group-btn
button#userpl_save.btn.btn-default Save
ul#userpl_list.col-lg-12.col-md-12
#resizewrap.row
.col-lg-5.col-md-5
#videowidth.col-lg-7.col-md-7
#sitefooter
include pagefooter
#useroptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
.modal-dialog
.modal-content
.modal-header
button.close(data-dismiss="modal", aria-hidden="true") &times;
h4 User Preferences
ul.nav.nav-tabs
li: a(href="#us-general", data-toggle="tab") General
li: a(href="#us-playback", data-toggle="tab") Playback
li: a(href="#us-chat", data-toggle="tab") Chat
li: a(href="#us-mod", data-toggle="tab", style="") Moderator
.modal-body
.tab-content
include useroptions
mixin us-general()
mixin us-playback()
mixin us-chat()
mixin us-mod()
.modal-footer
button.btn.btn-primary(type="button", data-dismiss="modal", onclick="javascript:saveUserOptions()") Save
button.btn.btn-default(type="button", data-dismiss="modal") Close
#channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
.modal-dialog
.modal-content
.modal-header
button.close(data-dismiss="modal", aria-hidden="true") &times;
h4 Channel Settings
ul.nav.nav-tabs
li: a(href="#cs-miscoptions", data-toggle="tab") General Settings
li: a(href="#cs-adminoptions", data-toggle="tab") Admin Settings
li.dropdown
a#cs-edit-dd-toggle(href="#", data-toggle="dropdown") Edit
span.caret
ul.dropdown-menu
li: a(href="#cs-chatfilters", data-toggle="tab", onclick="javascript:socket.emit('requestChatFilters')") Chat Filters
li: a(href="#cs-motdeditor", data-toggle="tab", tabindex="-1") MOTD
li: a(href="#cs-csseditor", data-toggle="tab", tabindex="-1") CSS
li: a(href="#cs-jseditor", data-toggle="tab", tabindex="-1") Javascript
li: a(href="#cs-permedit", data-toggle="tab", tabindex="-1") Permissions
li: a(href="#cs-chanranks", data-toggle="tab", tabindex="-1", onclick="javascript:socket.emit('requestChannelRanks')") Moderators
li: a(href="#cs-banlist", data-toggle="tab", tabindex="-1", onclick="javascript:socket.emit('requestBanlist')") Ban list
li: a(href="#cs-chanlog", data-toggle="tab", onclick="javascript:socket.emit('readChanLog')") Log
.modal-body
.tab-content
include channeloptions
mixin miscoptions()
mixin adminoptions()
mixin motdeditor()
mixin csseditor()
mixin jseditor()
mixin banlist()
mixin recentjoins()
mixin chanranks()
mixin chatfilters()
mixin chanlog()
mixin permeditor()
.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
include footer
mixin footer()
script(src="#{ioUrl}/socket.io/socket.io.js")
script(type="text/javascript").
var IOSERVER = "#{ioUrl}";
var SOCKET = io.connect(IOSERVER);
script(src="/js/functions.js")
script(src=sioSource)
script(src="/assets/js/data.js")
script(src="/sioconfig")
script(src="/assets/js/util.js")
script(src="/assets/js/player.js")
script(src="/assets/js/paginator.js")
script(src="/assets/js/ui.js")
script(src="/assets/js/callbacks.js")
script(defer, src="https://www.youtube.com/iframe_api")
script(defer, src="//api.dmcdn.net/all.js")
script(defer, src="/assets/js/jwplayer.js")
script(defer, src="/assets/js/sc.js")
script(defer, src="/assets/js/froogaloop.min.js")
script(defer, src="/assets/js/swf.js")

View file

@ -31,7 +31,7 @@ mixin us-general
select#us-theme.form-control
option(value="default") Default
option(value="/css/bootstrap-theme.min.css") Bootstrap
option(value="/css/dark.css") Dark
//option(value="/css/dark.css") Dark
.form-group
label.control-label.col-sm-4(for="#us-layout") Layout
.col-sm-8
@ -39,6 +39,8 @@ mixin us-general
option(value="default") Compact
option(value="synchtube") Synchtube (flipped)
option(value="fluid") Fluid
option(value="synchtube-fluid") Synchtube + Fluid
option(value="hd") HD
.col-sm-4
.col-sm-8
p.text-danger Changing layouts may require refreshing to take effect.

View file

@ -1,5 +1,4 @@
/*
return null;
The MIT License (MIT)
Copyright (c) 2013 Calvin Montgomery
@ -13,32 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
Callbacks = {
error: function (reason) {
// Don't show the error for when the server goes down
if(reason && reason.returnValue === true)
return;
var d = $("<div/>").addClass("alert alert-danger col-lg-12 col-md-12")
.appendTo($("#announcements"));
$("<h3/>").text("Uh-oh!").appendTo(d);
$("<p/>").html("The socket.io connection failed."+
"Try going to the "+
"'Options' menu and enabling 'Alternate socket "+
" connection'. If that doesn't help, talk to "+
"someone on <a href='http://webchat.6irc.net/?"+
"channels=synchtube'>IRC</a>").appendTo(d);
var data = {
iourl: IO_URL,
weburl: WEB_URL,
transports: io.transports,
fallback: USEROPTS.altsocket,
reason: reason
};
var r = JSON.stringify(data);
$("<em/>").text("When asking for help, give the following "+
"information to an administrator:").appendTo(d);
$("<code/>").text(r).appendTo(d)
.css("white-space", "pre-wrap");
window.SOCKET_ERROR_REASON = reason;
},
/* fired when socket connection completes */
@ -1041,6 +1015,15 @@ setupCallbacks = function() {
}
try {
if (typeof io === "undefined") {
makeAlert("Uh oh!", "It appears the connection to <code>" + IO_URL + "</code> " +
"has failed. If this error persists, a firewall or " +
"antivirus is likely blocking the connection, or the " +
"server is down.", "alert-danger")
.appendTo($("#announcements"));
throw false;
}
if (NO_WEBSOCKETS || USEROPTS.altsocket) {
var i = io.transports.indexOf("websocket");
if (i >= 0) {
@ -1054,5 +1037,7 @@ try {
socket = io.connect(IO_URL, opts);
setupCallbacks();
} catch (e) {
Callbacks.disconnect();
if (e) {
Callbacks.disconnect();
}
}

View file

@ -14,19 +14,22 @@ function makeAlert(title, text, klass) {
klass = "alert-info";
}
var wrap = $("<div/>").addClass("col-md-12");
var al = $("<div/>").addClass("alert")
.addClass(klass)
.html(text);
.html(text)
.appendTo(wrap);
$("<br/>").prependTo(al);
$("<strong/>").text(title).prependTo(al);
$("<button/>").addClass("close pull-right").html("&times;")
.click(function() {
al.hide("fade", function() {
al.remove();
wrap.remove();
});
})
.prependTo(al);
return al;
return wrap;
}
function formatURL(data) {
@ -653,6 +656,9 @@ function applyOpts() {
case "fluid":
fluidLayout();
break;
case "hd":
hdLayout();
break;
default:
break;
}
@ -1284,6 +1290,7 @@ function formatChatMessage(data) {
.addClass(data.meta.superadminflair.labelclass);
$("<span/>").addClass(data.meta.superadminflair.icon)
.addClass("glyphicon")
.css("margin-right", "3px")
.prependTo(name);
}
@ -1359,6 +1366,8 @@ function addChatMessage(data) {
function fluidLayout() {
$(".container").removeClass("container").addClass("container-fluid");
$("footer .container").removeClass("container-fluid").addClass("container");
$("body").addClass("fluid");
resizeStuff();
}
@ -1367,6 +1376,62 @@ function synchtubeLayout() {
$("#rightcontrols").detach().insertBefore($("#leftcontrols"));
$("#rightpane").detach().insertBefore($("#leftpane"));
$("#userlist").css("float", "right");
$("body").addClass("synchtube");
}
function hdLayout() {
var videowrap = $("#videowrap"),
chatwrap = $("#chatwrap"),
playlist = $("#rightpane")
videowrap.detach().insertAfter($("#drinkbar"))
.removeClass()
.addClass("col-md-8 col-md-offset-2");
playlist.detach().insertBefore(chatwrap)
.removeClass()
.addClass("col-md-6");
chatwrap.removeClass()
.addClass("col-md-6");
var ch = "320px";
$("#messagebuffer").css("max-height", ch);
$("#userlist").css("max-height", ch);
$("#queue").css("max-height", "312px");
$("#leftcontrols").detach()
.insertAfter(chatwrap)
.removeClass()
.addClass("col-md-6");
$("#playlistmanagerwrap").detach()
.insertBefore($("#leftcontrols"))
.css("margin-top", "0")
.removeClass()
.addClass("col-md-6");
$("#showplaylistmanager").addClass("btn-sm");
var plcontrolwrap = $("<div/>").addClass("col-md-12")
.prependTo($("#rightpane-inner"));
$("#plcontrol").detach().appendTo(plcontrolwrap);
$("#rightcontrols .btn-group.pull-right").detach()
.appendTo(plcontrolwrap);
$("#controlswrap").remove();
$("#leftpane").remove();
$("#pollwrap").detach()
.insertAfter($("#leftcontrols"))
.removeClass()
.addClass("col-md-6 col-md-offset-6");
$("nav.navbar-fixed-top").removeClass("navbar-fixed-top");
$("#mainpage").css("padding-top", "0");
$("body").addClass("hd");
}
function chatOnly() {
@ -1380,14 +1445,15 @@ function chatOnly() {
}
function resizeStuff() {
// Only execute if we are on a fluid layout
if ($(".container-fluid").length === 0) {
return;
}
VWIDTH = $("#videowrap").width() + "";
VHEIGHT = Math.floor(parseInt(VWIDTH) * 9 / 16) + "";
$("#ytapiplayer").width(VWIDTH).height(VHEIGHT);
// Only execute if we are on a fluid layout
if ($("body").hasClass("fluid")) {
return;
}
var h = parseInt(VHEIGHT) - 33;
$("#messagebuffer").height(h);
$("#userlist").height(h);

View file

@ -17,11 +17,6 @@
margin-top: 20px;
}
#videowrap.hd-video-wrap {
height: 410px;
margin-bottom: 10px;
}
.vertical-spacer {
margin-top: 10px;
}