From 87f44b69e0130b9ff631495c65309038f2521533 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Mon, 13 Jan 2014 18:31:12 -0600 Subject: [PATCH] Start reworking client UI --- lib/channel-new.js | 2 +- templates/channel.jade | 118 +++++++++++++++++++------------------ www/assets/js/callbacks.js | 14 +++-- www/assets/js/ui.js | 32 +++------- www/assets/js/util.js | 9 +-- www/css/cytube.css | 24 ++------ 6 files changed, 86 insertions(+), 113 deletions(-) diff --git a/lib/channel-new.js b/lib/channel-new.js index 396fd97b..695a7807 100644 --- a/lib/channel-new.js +++ b/lib/channel-new.js @@ -1874,7 +1874,7 @@ Channel.prototype.handlePlayNext = function (user) { } this.logger.log("### " + user.name + " skipped the video"); - this.playNext(); + this.playlist.next(); }; /** diff --git a/templates/channel.jade b/templates/channel.jade index 50bf6024..29dfff1e 100644 --- a/templates/channel.jade +++ b/templates/channel.jade @@ -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 <iframe> and <object> 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 <iframe> and <object> tags. + textarea#customembed_code.input-block-level.form-control(rows="3") .col-lg-12.col-md-12 #queue.videolist #plmeta diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js index 380bfdf7..20f1bb76 100644 --- a/www/assets/js/callbacks.js +++ b/www/assets/js/callbacks.js @@ -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"); } diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js index 7f6cd3c4..808de193 100644 --- a/www/assets/js/ui.js +++ b/www/assets/js/ui.js @@ -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"); diff --git a/www/assets/js/util.js b/www/assets/js/util.js index 3c088522..4999e0b2 100644 --- a/www/assets/js/util.js +++ b/www/assets/js/util.js @@ -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") || diff --git a/www/css/cytube.css b/www/css/cytube.css index e59f9fd4..9b29da90 100644 --- a/www/css/cytube.css +++ b/www/css/cytube.css @@ -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;