moon
/
sync
mirror of https://github.com/calzoneman/sync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Start reworking client UI

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.playNext();
this.playlist.next();
};
/**

100
templates/channel.jade
View File

@ -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
#addfromurl.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#mediaurl.form-control.input-block-level(type="text", placeholder="Media URL")
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
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
#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_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
.col-lg-12.col-md-12
#queue.videolist
#plmeta

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

@ -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");
}

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

@ -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");

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

@ -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") ||

24
www/css/cytube.css
View File

@ -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;