Start reworking client UI
This commit is contained in:
calzoneman
parent
0a087c6507
commit
87f44b69e0
|
|
@ -1874,7 +1874,7 @@ Channel.prototype.handlePlayNext = function (user) {
|
|||
}
|
||||
|
||||
this.logger.log("### " + user.name + " skipped the video");
|
||||
this.playNext();
|
||||
this.playlist.next();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -49,37 +49,44 @@ html(lang="en")
|
|||
#leftcontrols.col-lg-5.col-md-5
|
||||
button#newpollbtn.btn.btn-sm.btn-default New Poll
|
||||
#rightcontrols.col-lg-7.col-md-7
|
||||
#qualitywrap.dropdown.btn-group
|
||||
button#qdrop.btn.btn-sm.btn-default.dropdown-toggle(data-toggle="dropdown") Quality
|
||||
b.caret
|
||||
mixin quality_item(id, text)
|
||||
li(role="presentation")
|
||||
a(id="#{id}", role="menuitem", href="javascript:void(0)") #{text}
|
||||
ul.dropdown-menu(role="menu", aria-labelledby="qdrop")
|
||||
mixin quality_item("quality_auto", "Quality: Auto")
|
||||
mixin quality_item("quality_240p", "240p")
|
||||
mixin quality_item("quality_360p", "360p")
|
||||
mixin quality_item("quality_480p", "480p")
|
||||
mixin quality_item("quality_720p", "720p")
|
||||
mixin quality_item("quality_1080p", "1080p")
|
||||
button#mediarefresh.btn.btn-sm.btn-default Refresh Media
|
||||
|
||||
//#qualitywrap.dropdown.btn-group
|
||||
// button#qdrop.btn.btn-sm.btn-default.dropdown-toggle(data-toggle="dropdown") Quality
|
||||
// b.caret
|
||||
// mixin quality_item(id, text)
|
||||
// li(role="presentation")
|
||||
// a(id="#{id}", role="menuitem", href="javascript:void(0)") #{text}
|
||||
// ul.dropdown-menu(role="menu", aria-labelledby="qdrop")
|
||||
// mixin quality_item("quality_auto", "Quality: Auto")
|
||||
// mixin quality_item("quality_240p", "240p")
|
||||
// mixin quality_item("quality_360p", "360p")
|
||||
// mixin quality_item("quality_480p", "480p")
|
||||
// mixin quality_item("quality_720p", "720p")
|
||||
// mixin quality_item("quality_1080p", "1080p")
|
||||
#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
|
||||
.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
|
||||
|
||||
#playlistrow.row
|
||||
#leftpane.col-lg-5.col-md-5
|
||||
#leftpane-inner.row
|
||||
#pollwrap.col-lg-12.col-md-12
|
||||
#searchwrap.col-lg-12.col-md-12
|
||||
button#showsearch.btn.btn-default.btn-block(data-toggle="collapse", data-target="#searchcontrol") Search Library/YouTube
|
||||
#searchcontrol.collapse
|
||||
.row.vertical-spacer
|
||||
#querywrap.col-lg-12.col-md-12
|
||||
.input-group
|
||||
input#library_query.form-control(type="text")
|
||||
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
|
||||
#playlistmanagerwrap.col-lg-12.col-md-12
|
||||
button#showplaylistmanager.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistmanager") Playlist Manager
|
||||
#playlistmanager.collapse
|
||||
|
|
@ -92,35 +99,34 @@ html(lang="en")
|
|||
ul#userpl_list.col-lg-12.col-md-12
|
||||
#rightpane.col-lg-7.col-md-7
|
||||
#rightpane-inner.row
|
||||
#playlistcontrolswrap.col-lg-12.col-md-12
|
||||
button#showplaylistcontrols.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistcontrols") Playlist Controls
|
||||
#playlistcontrols.collapse
|
||||
.row.vertical-spacer
|
||||
.col-lg-12.col-md-12
|
||||
.input-group
|
||||
input#mediaurl.form-control.input-block-level(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
|
||||
hr
|
||||
.row
|
||||
#customembedwrap.col-lg-12.col-md-12
|
||||
button#showcustomembed.btn.btn-default.btn-block(data-toggle="collapse", data-target="#customembed") Custom Embed
|
||||
#customembed.collapse
|
||||
| Paste the embed code below and click Next or At End.
|
||||
| Acceptable embed codes are <code><iframe></code> and <code><object></code> tags.
|
||||
textarea#customembed_code.input-block-level.form-control(rows="3")
|
||||
hr
|
||||
.row
|
||||
#extended_controls.col-lg-12.col-md-12
|
||||
button#clearplaylist.btn.btn-default.btn-block Clear Playlist
|
||||
button#shuffleplaylist.btn.btn-default.btn-block Shuffle Playlist
|
||||
#voteskipwrap.col-lg-12.col-md-12.col-sm-12.col-xs-12.btn-group
|
||||
button#voteskip.btn.btn-default Voteskip
|
||||
button#getplaylist.btn.btn-default Get Playlist URLs
|
||||
button#qlockbtn.btn.btn-danger(title="Playlist Locked")
|
||||
i.glyphicon.glyphicon-lock
|
||||
#addfromurl.collapse.plcontrol-collapse.col-lg-12.col-md-12
|
||||
.vertical-spacer
|
||||
.input-group
|
||||
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><iframe></code> and <code><object></code> tags.
|
||||
textarea#customembed_code.input-block-level.form-control(rows="3")
|
||||
.col-lg-12.col-md-12
|
||||
#queue.videolist
|
||||
#plmeta
|
||||
|
|
|
|||
|
|
@ -516,12 +516,14 @@ Callbacks = {
|
|||
},
|
||||
|
||||
voteskip: function(data) {
|
||||
var icon = $("#voteskip").find(".glyphicon").remove();
|
||||
if(data.count > 0) {
|
||||
$("#voteskip").text("Voteskip ("+data.count+"/"+data.need+")");
|
||||
}
|
||||
else {
|
||||
$("#voteskip").text("Voteskip");
|
||||
$("#voteskip").text(" ("+data.count+"/"+data.need+")");
|
||||
} else {
|
||||
$("#voteskip").text("");
|
||||
}
|
||||
|
||||
icon.prependTo($("#voteskip"));
|
||||
},
|
||||
|
||||
/* REGION Rank Stuff */
|
||||
|
|
@ -918,7 +920,7 @@ Callbacks = {
|
|||
$("#qlockbtn").removeClass("btn-danger")
|
||||
.addClass("btn-success")
|
||||
.attr("title", "Playlist Unlocked");
|
||||
$("#qlockbtn").find("i")
|
||||
$("#qlockbtn").find("span")
|
||||
.removeClass("glyphicon-lock")
|
||||
.addClass("glyphicon-ok");
|
||||
}
|
||||
|
|
@ -926,7 +928,7 @@ Callbacks = {
|
|||
$("#qlockbtn").removeClass("btn-success")
|
||||
.addClass("btn-danger")
|
||||
.attr("title", "Playlist Locked");
|
||||
$("#qlockbtn").find("i")
|
||||
$("#qlockbtn").find("span")
|
||||
.removeClass("glyphicon-ok")
|
||||
.addClass("glyphicon-lock");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,30 +240,6 @@ $("#userpl_save").click(function() {
|
|||
});
|
||||
|
||||
/* video controls */
|
||||
// TODO this is ugly, change it?
|
||||
(function() {
|
||||
function qualHandler(select, preset) {
|
||||
$(select).click(function() {
|
||||
VIDEOQUALITY = preset;
|
||||
USEROPTS.default_quality = select;
|
||||
storeOpts();
|
||||
var btn = $("#qdrop");
|
||||
var caret = btn.find(".caret").detach();
|
||||
btn.text($(select).text());
|
||||
caret.appendTo(btn);
|
||||
if(PLAYER.type == "yt" && PLAYER.player.setPlaybackQuality)
|
||||
PLAYER.player.setPlaybackQuality(VIDEOQUALITY);
|
||||
});
|
||||
}
|
||||
qualHandler("#quality_auto", "");
|
||||
qualHandler("#quality_240p", "small");
|
||||
qualHandler("#quality_360p", "medium");
|
||||
qualHandler("#quality_480p", "large");
|
||||
qualHandler("#quality_720p", "hd720");
|
||||
qualHandler("#quality_1080p", "hd1080");
|
||||
if($(USEROPTS.default_quality).length > 0)
|
||||
$(USEROPTS.default_quality).click();
|
||||
})();
|
||||
|
||||
$("#mediarefresh").click(function() {
|
||||
PLAYER.type = "";
|
||||
|
|
@ -502,3 +478,11 @@ function chanrankSubmit(rank) {
|
|||
$("#cs-chanranks-mod").click(chanrankSubmit.bind(this, 2));
|
||||
$("#cs-chanranks-adm").click(chanrankSubmit.bind(this, 3));
|
||||
$("#cs-chanranks-owner").click(chanrankSubmit.bind(this, 4));
|
||||
|
||||
["#showmediaurl", "#showsearch", "#showcustomembed"].forEach(function (id) {
|
||||
$(id).click(function () {
|
||||
$(".plcontrol-collapse").collapse("hide");
|
||||
});
|
||||
});
|
||||
$(".plcontrol-collapse").collapse();
|
||||
$(".plcontrol-collapse").collapse("hide");
|
||||
|
|
|
|||
|
|
@ -789,7 +789,8 @@ function handlePermissionChange() {
|
|||
setVisible("#guestlogin", CLIENT.rank < 0);
|
||||
setVisible("#chatline", CLIENT.rank >= 0);
|
||||
|
||||
setVisible("#playlistcontrolswrap", hasPermission("playlistadd"));
|
||||
setVisible("#showmediaurl", hasPermission("playlistadd"));
|
||||
setVisible("#showcustomembed", hasPermission("playlistaddcustom"));
|
||||
$("#queue_next").attr("disabled", !hasPermission("playlistnext"));
|
||||
$("#qlockbtn").attr("disabled", CLIENT.rank < 2);
|
||||
|
||||
|
|
@ -834,12 +835,6 @@ function handlePermissionChange() {
|
|||
|
||||
setVisible("#clearplaylist", hasPermission("playlistclear"));
|
||||
setVisible("#shuffleplaylist", hasPermission("playlistshuffle"));
|
||||
setVisible("#customembedwrap", hasPermission("playlistaddcustom"));
|
||||
if(!hasPermission("playlistaddcustom")) {
|
||||
$("#customembed_entry").hide();
|
||||
$("#customembed_code").val("");
|
||||
}
|
||||
|
||||
|
||||
setVisible("#newpollbtn", hasPermission("pollctl"));
|
||||
$("#voteskip").attr("disabled", !hasPermission("voteskip") ||
|
||||
|
|
|
|||
|
|
@ -201,28 +201,10 @@
|
|||
padding-right: 0;
|
||||
}
|
||||
|
||||
#library_search, #queue_next {
|
||||
#library_search, #queue_next, #ce_queue_next {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#voteskip, #getplaylist {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
#qlockbtn {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
#voteskip, #getplaylist, #qlockbtn {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#getplaylist, #qlockbtn {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
#plmeta {
|
||||
border-radius: 4px;
|
||||
border-top: 0;
|
||||
|
|
@ -263,6 +245,10 @@
|
|||
border-color: #bce8f1;
|
||||
}
|
||||
|
||||
#queue {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#queue li:last-child {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue