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

Start reworking client UI

Browse source
This commit is contained in:
calzoneman 2014-01-13 18:31:12 -06:00
parent 0a087c6507
commit 87f44b69e0
6 changed files with 86 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/channel-new.js
View file

@ -1874,7 +1874,7 @@ Channel.prototype.handlePlayNext = function (user) {
} }
this.logger.log("### " + user.name + " skipped the video"); this.logger.log("### " + user.name + " skipped the video");
this.playNext(); this.playlist.next();
}; };
/** /**

118
templates/channel.jade
View file

@ -49,37 +49,44 @@ html(lang="en")
#leftcontrols.col-lg-5.col-md-5 #leftcontrols.col-lg-5.col-md-5
button#newpollbtn.btn.btn-sm.btn-default New Poll button#newpollbtn.btn.btn-sm.btn-default New Poll
#rightcontrols.col-lg-7.col-md-7 #rightcontrols.col-lg-7.col-md-7
#qualitywrap.dropdown.btn-group //#qualitywrap.dropdown.btn-group
button#qdrop.btn.btn-sm.btn-default.dropdown-toggle(data-toggle="dropdown") Quality // button#qdrop.btn.btn-sm.btn-default.dropdown-toggle(data-toggle="dropdown") Quality
b.caret // b.caret
mixin quality_item(id, text) // mixin quality_item(id, text)
li(role="presentation") // li(role="presentation")
a(id="#{id}", role="menuitem", href="javascript:void(0)") #{text} // a(id="#{id}", role="menuitem", href="javascript:void(0)") #{text}
ul.dropdown-menu(role="menu", aria-labelledby="qdrop") // ul.dropdown-menu(role="menu", aria-labelledby="qdrop")
mixin quality_item("quality_auto", "Quality: Auto") // mixin quality_item("quality_auto", "Quality: Auto")
mixin quality_item("quality_240p", "240p") // mixin quality_item("quality_240p", "240p")
mixin quality_item("quality_360p", "360p") // mixin quality_item("quality_360p", "360p")
mixin quality_item("quality_480p", "480p") // mixin quality_item("quality_480p", "480p")
mixin quality_item("quality_720p", "720p") // mixin quality_item("quality_720p", "720p")
mixin quality_item("quality_1080p", "1080p") // mixin quality_item("quality_1080p", "1080p")
button#mediarefresh.btn.btn-sm.btn-default Refresh Media #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 #playlistrow.row
#leftpane.col-lg-5.col-md-5 #leftpane.col-lg-5.col-md-5
#leftpane-inner.row #leftpane-inner.row
#pollwrap.col-lg-12.col-md-12 #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 #playlistmanagerwrap.col-lg-12.col-md-12
button#showplaylistmanager.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistmanager") Playlist Manager button#showplaylistmanager.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistmanager") Playlist Manager
#playlistmanager.collapse #playlistmanager.collapse
@ -92,35 +99,34 @@ html(lang="en")
ul#userpl_list.col-lg-12.col-md-12 ul#userpl_list.col-lg-12.col-md-12
#rightpane.col-lg-7.col-md-7 #rightpane.col-lg-7.col-md-7
#rightpane-inner.row #rightpane-inner.row
#playlistcontrolswrap.col-lg-12.col-md-12 #addfromurl.collapse.plcontrol-collapse.col-lg-12.col-md-12
button#showplaylistcontrols.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistcontrols") Playlist Controls .vertical-spacer
#playlistcontrols.collapse .input-group
.row.vertical-spacer input#mediaurl.form-control(type="text", placeholder="Media URL")
.col-lg-12.col-md-12 span.input-group-btn
.input-group button#queue_next.btn.btn-default Next
input#mediaurl.form-control.input-block-level(type="text", placeholder="Media URL") span.input-group-btn
span.input-group-btn button#queue_end.btn.btn-default At End
button#queue_next.btn.btn-default Next #searchcontrol.collapse.plcontrol-collapse.col-lg-12.col-md-12
span.input-group-btn .vertical-spacer
button#queue_end.btn.btn-default At End .input-group
hr input#library_query.form-control(type="text", placeholder="Search query")
.row span.input-group-btn
#customembedwrap.col-lg-12.col-md-12 button#library_search.btn.btn-default Library
button#showcustomembed.btn.btn-default.btn-block(data-toggle="collapse", data-target="#customembed") Custom Embed span.input-group-btn
#customembed.collapse button#youtube_search.btn.btn-default YouTube
| Paste the embed code below and click Next or At End. ul#library.videolist.col-lg-12.col-md-12
| Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags. #customembed.collapse.plcontrol-collapse.col-lg-12.col-md-12
textarea#customembed_code.input-block-level.form-control(rows="3") .vertical-spacer
hr .input-group
.row input#customembed_title.form-control(type="text", placeholder="Title (optional)")
#extended_controls.col-lg-12.col-md-12 span.input-group-btn
button#clearplaylist.btn.btn-default.btn-block Clear Playlist button#ce_queue_next.btn.btn-default Next
button#shuffleplaylist.btn.btn-default.btn-block Shuffle Playlist span.input-group-btn
#voteskipwrap.col-lg-12.col-md-12.col-sm-12.col-xs-12.btn-group button#ce_queue_end.btn.btn-default At End
button#voteskip.btn.btn-default Voteskip | Paste the embed code below and click Next or At End.
button#getplaylist.btn.btn-default Get Playlist URLs | Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags.
button#qlockbtn.btn.btn-danger(title="Playlist Locked") textarea#customembed_code.input-block-level.form-control(rows="3")
i.glyphicon.glyphicon-lock
.col-lg-12.col-md-12 .col-lg-12.col-md-12
#queue.videolist #queue.videolist
#plmeta #plmeta

14
www/assets/js/callbacks.js
View file

@ -516,12 +516,14 @@ Callbacks = {
}, },
voteskip: function(data) { voteskip: function(data) {
var icon = $("#voteskip").find(".glyphicon").remove();
if(data.count > 0) { if(data.count > 0) {
$("#voteskip").text("Voteskip ("+data.count+"/"+data.need+")"); $("#voteskip").text(" ("+data.count+"/"+data.need+")");
} } else {
else { $("#voteskip").text("");
$("#voteskip").text("Voteskip");
} }
icon.prependTo($("#voteskip"));
}, },
/* REGION Rank Stuff */ /* REGION Rank Stuff */
@ -918,7 +920,7 @@ Callbacks = {
$("#qlockbtn").removeClass("btn-danger") $("#qlockbtn").removeClass("btn-danger")
.addClass("btn-success") .addClass("btn-success")
.attr("title", "Playlist Unlocked"); .attr("title", "Playlist Unlocked");
$("#qlockbtn").find("i") $("#qlockbtn").find("span")
.removeClass("glyphicon-lock") .removeClass("glyphicon-lock")
.addClass("glyphicon-ok"); .addClass("glyphicon-ok");
} }
@ -926,7 +928,7 @@ Callbacks = {
$("#qlockbtn").removeClass("btn-success") $("#qlockbtn").removeClass("btn-success")
.addClass("btn-danger") .addClass("btn-danger")
.attr("title", "Playlist Locked"); .attr("title", "Playlist Locked");
$("#qlockbtn").find("i") $("#qlockbtn").find("span")
.removeClass("glyphicon-ok") .removeClass("glyphicon-ok")
.addClass("glyphicon-lock"); .addClass("glyphicon-lock");
} }

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

@ -240,30 +240,6 @@ $("#userpl_save").click(function() {
}); });
/* video controls */ /* 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() { $("#mediarefresh").click(function() {
PLAYER.type = ""; PLAYER.type = "";
@ -502,3 +478,11 @@ function chanrankSubmit(rank) {
$("#cs-chanranks-mod").click(chanrankSubmit.bind(this, 2)); $("#cs-chanranks-mod").click(chanrankSubmit.bind(this, 2));
$("#cs-chanranks-adm").click(chanrankSubmit.bind(this, 3)); $("#cs-chanranks-adm").click(chanrankSubmit.bind(this, 3));
$("#cs-chanranks-owner").click(chanrankSubmit.bind(this, 4)); $("#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");

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

@ -789,7 +789,8 @@ function handlePermissionChange() {
setVisible("#guestlogin", CLIENT.rank < 0); setVisible("#guestlogin", CLIENT.rank < 0);
setVisible("#chatline", 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")); $("#queue_next").attr("disabled", !hasPermission("playlistnext"));
$("#qlockbtn").attr("disabled", CLIENT.rank < 2); $("#qlockbtn").attr("disabled", CLIENT.rank < 2);
@ -834,12 +835,6 @@ function handlePermissionChange() {
setVisible("#clearplaylist", hasPermission("playlistclear")); setVisible("#clearplaylist", hasPermission("playlistclear"));
setVisible("#shuffleplaylist", hasPermission("playlistshuffle")); setVisible("#shuffleplaylist", hasPermission("playlistshuffle"));
setVisible("#customembedwrap", hasPermission("playlistaddcustom"));
if(!hasPermission("playlistaddcustom")) {
$("#customembed_entry").hide();
$("#customembed_code").val("");
}
setVisible("#newpollbtn", hasPermission("pollctl")); setVisible("#newpollbtn", hasPermission("pollctl"));
$("#voteskip").attr("disabled", !hasPermission("voteskip") || $("#voteskip").attr("disabled", !hasPermission("voteskip") ||

24
www/css/cytube.css
View file

@ -201,28 +201,10 @@
padding-right: 0; padding-right: 0;
} }
#library_search, #queue_next { #library_search, #queue_next, #ce_queue_next {
border-radius: 0; 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 { #plmeta {
border-radius: 4px; border-radius: 4px;
border-top: 0; border-top: 0;
@ -263,6 +245,10 @@
border-color: #bce8f1; border-color: #bce8f1;
} }
#queue {
margin-top: 10px;
}
#queue li:last-child { #queue li:last-child {
border-bottom: 0; border-bottom: 0;
margin-bottom: 0; margin-bottom: 0;