specter/CyTube
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Work on user options

Browse source
This commit is contained in:
calzoneman 2013-12-25 16:18:21 -05:00
parent fc63191773
commit 9d49df6157
8 changed files with 197 additions and 258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/channel.js
View file

@ -1610,7 +1610,7 @@ Channel.prototype.addMedia = function(data, user) {
if (self.dead)
return;
if (err) {
if (err && err !== "Item not in library") {
user.socket.emit("queueFail", {
msg: "Internal error: " + err,
link: $util.formatLink(data.id, data.type)

5
lib/io/ioserver.js
View file

@ -103,6 +103,11 @@ function handleConnection(sock) {
user.name = sock.handshake.user.name;
user.global_rank = sock.handshake.user.global_rank;
user.loggedIn = true;
user.socket.emit("login", {
success: true,
name: user.name
});
user.socket.emit("rank", user.global_rank);
}
}

3
lib/web/jade.js
View file

@ -43,7 +43,8 @@ function sendJade(res, view, locals) {
if (!(view in cache) || process.env['DEBUG']) {
var file = path.join(templates, view + '.jade');
var fn = jade.compile(fs.readFileSync(file), {
filename: file
filename: file,
pretty: true
});
cache[view] = fn;
}

33
templates/channel.jade
View file

@ -13,8 +13,8 @@ html(lang="en")
- var cname = "/r/" + channelName
ul.nav.navbar-nav
+navdefaultlinks(cname)
li: a(href="javascript:showUserOptions()") Options
li: a(href="javascript:$('#channeloptions').modal()") Channel Settings
li: a(href="#", onclick="javascript:showUserOptions()") Options
li: a(href="#", onclick="javascript:$('#channeloptions').modal()") Channel Settings
+navloginlogout(cname)
section#mainpage
.container
@ -123,14 +123,6 @@ html(lang="en")
i.glyphicon.glyphicon-lock
.col-lg-12.col-md-12
#queue.videolist
li.queue_entry
a.qe_title(href="#") Derp
span.qe_time 00:00
div.qe_clear
li.queue_entry.queue_active.queue_temp
a.qe_title(href="#") Derp
span.qe_time 00:00
div.qe_clear
#plmeta
span#plcount 0 items
span#pllength 00:00:00
@ -138,6 +130,27 @@ html(lang="en")
.col-lg-5.col-md-5
#videowidth.col-lg-7.col-md-7
#sitefooter
#useroptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
.modal-dialog
.modal-content
.modal-header
button.close(data-dismiss="modal", aria-hidden="true")×
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
+us-general()
+us-playback()
+us-chat()
+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

82
templates/useroptions.jade Normal file
View file

@ -0,0 +1,82 @@
mixin lcheckbox(id, label)
.form-group
label.control-label.col-sm-4(for=id)= label
.col-sm-8
.checkbox
input(type="checkbox", id=id)
mixin rcheckbox(id, label)
.form-group
.col-sm-8.col-sm-offset-4
.checkbox
label.control-label(for=id)= label
input(type="checkbox", id=id)
mixin textbox(id, label, placeholder)
.form-group
label.control-label.col-sm-4(for=id)= label
.col-sm-8
if placeholder
input.form-control(id=id, type="text", placeholder=placeholder)
else
input.form-control(id=id, type="text")
mixin us-general
#us-general.tab-pane
h4 General Preferences
form.form-horizontal(action="javascript:void(0)")
.form-group
label.control-label.col-sm-4(for="#us-theme") Theme
.col-sm-8
select#us-theme.form-control
option(value="default") Default
option(value="/css/bootstrap-theme.min.css") Bootstrap
option(value="/css/dark.css") Dark
.form-group
label.control-label.col-sm-4(for="#us-layout") Layout
.col-sm-8
select#us-layout.form-control
option(value="default") Compact
option(value="synchtube") Synchtube (flipped)
option(value="fluid") Fluid
.col-sm-4
.col-sm-8
p.text-danger Changing layouts may require refreshing to take effect.
+rcheckbox("us-no-channelcss", "Ignore Channel CSS")
+rcheckbox("us-no-channeljs", "Ignore Channel Javascript")
+rcheckbox("us-ssl", "Encrypt connection with SSL")
mixin us-playback
#us-playback.tab-pane
h4 Playback Preferences
form.form-horizontal(action="javascript:void(0)")
+rcheckbox("us-synch", "Synchronize video playback")
+textbox("us-synch-accuracy", "Synch threshold (seconds)", "2")
+rcheckbox("us-wmode-transparent", "Set wmode=transparent")
.col-sm-4
.col-sm-8
p.text-info Setting <code>wmode=transparent</code> allows objects to be displayed above the video player, but may cause performance issues on some systems.
+rcheckbox("us-hidevideo", "Remove the video player")
+rcheckbox("us-playlistbuttons", "Hide playlist buttons by default")
+rcheckbox("us-oldbtns", "Old style playlist buttons")
mixin us-chat
#us-chat.tab-pane
h4 Chat Preferences
form.form-horizontal(action="javascript:void(0)")
+rcheckbox("us-chat-timestamp", "Show timestamps in chat")
+rcheckbox("us-sort-rank", "Sort userlist by rank")
+rcheckbox("us-sort-afk", "Sort AFKers to bottom")
+rcheckbox("us-chat-notice", "Ping on all new messages")
.col-sm-4
.col-sm-8
p.text-info When unchecked, you will only be pinged if your name is mentioned
+rcheckbox("us-boop", "Play a sound when pinged")
+rcheckbox("us-sendbtn", "Add a send button to chat")
mixin us-mod
#us-mod.tab-pane
h4 Moderator Preferences
form.form-horizontal(action="javascript:void(0)")
+rcheckbox("us-modflair", "Show name color")
+rcheckbox("us-joinmessage", "Show join messages")

7
www/assets/js/ui.js
View file

@ -238,7 +238,7 @@ $("#userpl_save").click(function() {
$(select).click(function() {
VIDEOQUALITY = preset;
USEROPTS.default_quality = select;
saveOpts();
storeOpts();
var btn = $("#qdrop");
var caret = btn.find(".caret").detach();
btn.text($(select).text());
@ -435,9 +435,12 @@ $(window).resize(function() {
/* load channel */
var loc = document.location+"";
var m = loc.match(/\/r\/([a-zA-Z0-9-_]+)$/);
var m = loc.match(/\/r\/([a-zA-Z0-9-_#]+)$/);
if(m) {
CHANNEL.name = m[1];
if (CHANNEL.name.indexOf("#") !== -1) {
CHANNEL.name = CHANNEL.name.substring(0, CHANNEL.name.indexOf("#"));
}
}
/*
else {

312
www/assets/js/util.js
View file

@ -476,7 +476,7 @@ function addQueueButtons(li) {
menu.detach().prependTo(li);
menu.find(".btn").each(function() {
// Clear icon
var icon = $(this).find("i");
var icon = $(this).find(".glyphicon");
$(this).html("");
icon.appendTo(this);
});
@ -524,242 +524,75 @@ function rebuildPlaylist() {
/* menus */
/* user settings menu */
// TODO fix this
function showOptionsMenu() {
function showUserOptions() {
hidePlayer();
var modal = $("<div/>").addClass("modal hide fade")
.appendTo($("body"));
modal.load("useroptions.html", function () {
if (CLIENT.rank < 2) {
$("#uopt-btn-mod").remove();
}
var tabHandler = function (btnid, panelid) {
$(btnid).click(function () {
modal.find(".btn.btn-small").attr("disabled", false);
modal.find(".uopt-panel").hide();
$(btnid).attr("disabled", true);
$(panelid).show();
});
};
tabHandler("#uopt-btn-general", "#uopt-panel-general");
tabHandler("#uopt-btn-playback", "#uopt-panel-playback");
tabHandler("#uopt-btn-chat", "#uopt-panel-chat");
tabHandler("#uopt-btn-mod", "#uopt-panel-mod");
var initForm = function (id) {
var f = $("<form/>").appendTo($(id))
.addClass("form-horizontal")
.attr("action", "javascript:void(0)");
return $("<fieldset/>").appendTo(f);
};
var addOption = function (form, lbl, thing) {
var g = $("<div/>").addClass("control-group").appendTo(form);
$("<label/>").addClass("control-label").text(lbl).appendTo(g);
var c = $("<div/>").addClass("controls").appendTo(g);
thing.appendTo(c);
};
var addCheckbox = function (form, opt, lbl) {
var c = $("<label/>").addClass("checkbox")
.text(lbl);
var box = $("<input/>").attr("type", "checkbox")
.appendTo(c);
addOption(form, opt, c);
return box;
};
// general options
var general = initForm("#uopt-panel-general");
var gen_theme = $("<select/>");
$("<option/>").attr("value", "default")
.text("Default")
.appendTo(gen_theme);
$("<option/>").attr("value", "assets/css/darkstrap.css")
.text("Dark")
.appendTo(gen_theme);
$("<option/>").attr("value", "assets/css/altdark.css")
.text("Alternate Dark")
.appendTo(gen_theme);
gen_theme.val(USEROPTS.theme);
addOption(general, "Theme", gen_theme);
var gen_layout = $("<select/>");
$("<option/>").attr("value", "default")
.text("Compact")
.appendTo(gen_layout);
$("<option/>").attr("value", "synchtube")
.text("Synchtube")
.appendTo(gen_layout);
$("<option/>").attr("value", "fluid")
.text("Fluid")
.appendTo(gen_layout);
gen_layout.val(USEROPTS.layout);
addOption(general, "Layout", gen_layout);
var gen_layoutwarn = $("<p/>").addClass("text-error")
.text("Changing layouts may require a refresh");
addOption(general, "", gen_layoutwarn);
var gen_css = $("<input/>").attr("type", "text")
.attr("placeholder", "Stylesheet URL");
gen_css.val(USEROPTS.css);
addOption(general, "User CSS", gen_css);
var gen_nocss = addCheckbox(general, "Channel CSS",
"Ignore channel CSS");
gen_nocss.prop("checked", USEROPTS.ignore_channelcss);
var gen_nojs = addCheckbox(general, "Channel JS",
"Ignore channel JS");
gen_nojs.prop("checked", USEROPTS.ignore_channeljs);
var gen_altsocket = addCheckbox(general, "Alternate Socket",
"Use alternate socket connection");
gen_altsocket.prop("checked", USEROPTS.altsocket);
var gen_altsocketinfo = $("<p/>")
.addClass("text-error")
.text("Alternate socket requires a refresh after changing. "+
"It should only be used if the default (unchecked) "+
"does not work.");
addOption(general, "", gen_altsocketinfo);
var gen_secure = addCheckbox(general, "SSL",
"Encrypt connections with SSL");
gen_secure.prop("checked", USEROPTS.secure_connection);
gen_secure.attr("disabled", !ALLOW_SSL);
var gen_secureinfo = $("<p/>")
.addClass("text-error")
.text("If enabled, websocket traffic and API calls (logins, "+
"account management) will be sent over a secure "+
"connection. Changes take effect after a refresh.");
addOption(general, "", gen_secureinfo);
if (!ALLOW_SSL) {
gen_secureinfo.text("This server does not support SSL.");
}
// playback options
var playback = initForm("#uopt-panel-playback");
var pl_synch = addCheckbox(playback, "Synchronize",
"Synchronize media playback");
pl_synch.prop("checked", USEROPTS.synch);
var pl_synchacc = $("<input/>").attr("type", "text")
.attr("placeholder", "Accuracy in seconds");
pl_synchacc.val(USEROPTS.sync_accuracy);
addOption(playback, "Synch Accuracy (seconds)", pl_synchacc);
var pl_wmode = addCheckbox(playback, "Transparent wmode",
"Allow transparency over video player");
pl_wmode.prop("checked", USEROPTS.wmode_transparent);
var pl_wmodewarn = $("<p/>").addClass("text-error")
.text("Enabling transparent wmode may cause performance "+
"issues on some systems");
addOption(playback, "", pl_wmodewarn);
var pl_hide = addCheckbox(playback, "Hide Video",
"Remove the video player");
pl_hide.prop("checked", USEROPTS.hidevid);
var pl_hidebtn = addCheckbox(playback, "Playlist Buttons",
"Hide playlist buttons by default");
pl_hidebtn.prop("checked", USEROPTS.qbtn_hide);
var pl_oldbtn = addCheckbox(playback, "Playlist Buttons (old)",
"Old style playlist buttons");
pl_oldbtn.prop("checked", USEROPTS.qbtn_idontlikechange);
// chat options
var chat = initForm("#uopt-panel-chat");
var chat_time = addCheckbox(chat, "Timestamps",
"Show timestamps in chat");
chat_time.prop("checked", USEROPTS.show_timestamps);
var chat_sort_rank = addCheckbox(chat, "Userlist sort",
"Sort userlist by rank");
chat_sort_rank.prop("checked", USEROPTS.sort_rank);
var chat_sort_afk = addCheckbox(chat, "Userlist sort",
"Sort AFKers to bottom");
chat_sort_afk.prop("checked", USEROPTS.sort_afk);
var chat_all = addCheckbox(chat, "Chat Notice",
"Notify on all messages");
chat_all.prop("checked", USEROPTS.blink_title);
var chat_allinfo = $("<p/>")
.text("When disabled, you will only be notified if your "+
"name is mentioned");
addOption(chat, "", chat_allinfo);
var chat_boop = addCheckbox(chat, "Chat Sound",
"Play a sound for notifications");
chat_boop.prop("checked", USEROPTS.boop);
var chat_sendbtn = addCheckbox(chat, "Send Button",
"Add a send button to chat");
chat_sendbtn.prop("checked", USEROPTS.chatbtn);
// mod options
var mod = initForm("#uopt-panel-mod");
var mod_flair = addCheckbox(mod, "Modflair", "Show name color");
mod_flair.prop("checked", USEROPTS.modhat);
var mod_joinmsg = addCheckbox(mod, "Join Messages",
"Show join messages");
mod_joinmsg.prop("checked", USEROPTS.joinmessage);
$("#uopt-btn-general").click();
$("#uopt-btn-save").click(function () {
USEROPTS.theme = gen_theme.val();
USEROPTS.layout = gen_layout.val();
USEROPTS.css = gen_css.val();
USEROPTS.ignore_channelcss = gen_nocss.prop("checked");
USEROPTS.ignore_channeljs = gen_nojs.prop("checked");
USEROPTS.altsocket = gen_altsocket.prop("checked");
USEROPTS.synch = pl_synch.prop("checked");
USEROPTS.sync_accuracy = parseFloat(pl_synchacc.val())||2;
USEROPTS.wmode_transparent = pl_wmode.prop("checked");
USEROPTS.hidevid = pl_hide.prop("checked");
USEROPTS.qbtn_hide = pl_hidebtn.prop("checked");
USEROPTS.qbtn_idontlikechange = pl_oldbtn.prop("checked");
USEROPTS.show_timestamps = chat_time.prop("checked");
USEROPTS.sort_rank = chat_sort_rank.prop("checked");
USEROPTS.sort_afk = chat_sort_afk.prop("checked");
USEROPTS.blink_title = chat_all.prop("checked");
USEROPTS.boop = chat_boop.prop("checked");
USEROPTS.chatbtn = chat_sendbtn.prop("checked");
USEROPTS.secure_connection = gen_secure.prop("checked");
if (CLIENT.rank >= 2) {
USEROPTS.modhat = mod_flair.prop("checked");
USEROPTS.joinmessage = mod_joinmsg.prop("checked");
}
saveOpts();
modal.modal("hide");
});
});
modal.on("hidden", function () {
$("#useroptions").on("hidden", function () {
unhidePlayer();
applyOpts();
modal.remove();
});
modal.modal();
if (CLIENT.rank < 2) {
$("a[href='#us-mod']").parent().hide();
} else {
$("a[href='#us-mod']").parent().show();
}
$("#us-theme").val(USEROPTS.theme);
$("#us-layout").val(USEROPTS.layout);
$("#us-no-channelcss").prop("checked", USEROPTS.ignore_channelcss);
$("#us-no-channeljs").prop("checked", USEROPTS.ignore_channeljs);
$("#us-ssl").prop("checked", USEROPTS.secure_connection);
$("#us-synch").prop("checked", USEROPTS.synch);
$("#us-synch-accuracy").val(USEROPTS.synch_accuracy);
$("#us-wmode-transparent").prop("checked", USEROPTS.wmode_transparent);
$("#us-hidevideo").prop("checked", USEROPTS.hidevid);
$("#us-playlistbuttons").prop("checked", USEROPTS.qbtn_hide);
$("#us-oldbtns").prop("checked", USEROPTS.qbtn_idontlikechange);
$("#us-chat-timestamp").prop("checked", USEROPTS.show_timestamps);
$("#us-sort-rank").prop("checked", USEROPTS.sort_rank);
$("#us-sort-afk").prop("checked", USEROPTS.sort_afk);
$("#us-chat-notice").prop("checked", USEROPTS.blink_title);
$("#us-boop").prop("checked", USEROPTS.boop);
$("#us-sendbtn").prop("checked", USEROPTS.chatbtn);
$("#us-modflair").prop("checked", USEROPTS.modhat);
$("#us-joinmessage").prop("checked", USEROPTS.joinmessage);
$("a[href='#us-general']").click();
$("#useroptions").modal();
}
function saveOpts() {
function saveUserOptions() {
USEROPTS.theme = $("#us-theme").val();
USEROPTS.layout = $("#us-layout").val();
USEROPTS.ignore_channelcss = $("#us-no-channelcss").prop("checked");
USEROPTS.ignore_channeljs = $("#us-no-channeljs").prop("checked");
USEROPTS.secure_connection = $("#us-ssl").prop("checked");
USEROPTS.synch = $("#us-synch").prop("checked");
USEROPTS.synch_accuracy = parseFloat($("#us-synch-accuracy").val()) || 2;
USEROPTS.wmode_transparent = $("#us-wmode-transparent").prop("checked");
USEROPTS.hidevid = $("#us-hidevideo").prop("checked");
USEROPTS.qbtn_hide = $("#us-playlistbuttons").prop("checked");
USEROPTS.qbtn_idontlikechange = $("#us-oldbtns").prop("checked");
USEROPTS.show_timestamps = $("#us-chat-timestamp").prop("checked");
USEROPTS.sort_rank = $("#us-sort-rank").prop("checked");
USEROPTS.sort_afk = $("#us-sort-afk").prop("checked");
USEROPTS.blink_title = $("#us-chat-notice").prop("checked");
USEROPTS.boop = $("#us-boop").prop("checked");
USEROPTS.chatbtn = $("#us-sendbtn").prop("checked");
if (CLIENT.rank >= 2) {
USEROPTS.modhat = $("#us-modflair").prop("checked");
USEROPTS.joinmessage = $("#us-joinmessage").prop("checked");
}
storeOpts();
}
function storeOpts() {
for(var key in USEROPTS) {
setOpt(key, USEROPTS[key]);
}
@ -775,15 +608,6 @@ function applyOpts() {
.appendTo($("head"));
}
$("#usercss").remove();
if(USEROPTS.css) {
$("<link/>").attr("rel", "stylesheet")
.attr("type", "text/css")
.attr("id", "usercss")
.attr("href", USEROPTS.css)
.appendTo($("head"));
}
switch(USEROPTS.layout) {
case "synchtube":
synchtubeLayout();
@ -798,13 +622,13 @@ function applyOpts() {
if(USEROPTS.hidevid) {
$("#qualitywrap").html("");
$("#videowrap").remove();
$("#chatwrap").removeClass("span5").addClass("span12");
$("#chatline").removeClass().addClass("span12");
$("#chatwrap").removeClass("col-lg-5 col-md-5").addClass("col-lg-12 col-md-12");
$("#chatline").removeClass().addClass("col-lg-12 col-md-12");
}
$("#chatbtn").remove();
if(USEROPTS.chatbtn) {
var btn = $("<button/>").addClass("btn btn-block")
var btn = $("<button/>").addClass("btn btn-default btn-block")
.text("Send")
.attr("id", "chatbtn")
.appendTo($("#chatwrap"));
@ -1009,7 +833,7 @@ function handlePermissionChange() {
.appendTo(al)
.click(function() {
USEROPTS.first_visit = false;
saveOpts();
storeOpts();
al.hide("blind", function() {
al.remove();
});

11
www/css/cytube.css
View file

@ -477,3 +477,14 @@
border-width: 3px !important;
margin-right: 10px;
}
#useroptions .modal-header {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
#useroptions .modal-body {
padding-top: 0;
margin-top: 0;
}