From a0768316a49c83e797c83479e3ca2793fbbb6ab1 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Thu, 6 Jun 2013 17:48:21 -0400 Subject: [PATCH 01/65] Start redesigning page --- www/assets/css/ytsync.css | 15 ++- www/assets/js/ui.js | 58 ++++++++++++ www/channel-new.html | 191 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 260 insertions(+), 4 deletions(-) create mode 100644 www/assets/js/ui.js create mode 100644 www/channel-new.html diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css index ce752dca..ccca3137 100644 --- a/www/assets/css/ytsync.css +++ b/www/assets/css/ytsync.css @@ -15,6 +15,10 @@ html, body { clear: both; } +#librarywrap, #userplaylistwrap, #playlist_controls { + display: none; +} + #welcome { font-size: 10pt; color: #ffffff; @@ -77,7 +81,7 @@ html, body { margin-bottom: 0; } -#usercountcontainer, #currenttitle { +#usercountwrap, #currenttitle { border: 1px solid #aaaaaa; border-bottom: none; margin: 0; @@ -87,9 +91,12 @@ html, body { margin: 0; } -#ulistchevron { - cursor: pointer; - float: left; +.pointer { + cursor: pointer; +} + +#leftpane-inner *, #rightpane-inner * { + margin-left: 0; } #plmeta { diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js new file mode 100644 index 00000000..b6720f98 --- /dev/null +++ b/www/assets/js/ui.js @@ -0,0 +1,58 @@ +/* Usercount show/hide */ +$("#userlisttoggle").click(function() { + if($("#userlist").css("display") == "none") { + $("#userlist").show(); + $("#userlisttoggle").removeClass("icon-chevron-down") + .addClass("icon-chevron-up"); + } + else { + $("#userlist").hide(); + $("#userlisttoggle").removeClass("icon-chevron-up") + .addClass("icon-chevron-down"); + } +}); + +/* Library search show/hide */ + +$("#librarytoggle").click(function() { + if($("#librarywrap").css("display") == "none") { + $("#librarywrap").show(); + $("#librarytoggle i").removeClass("icon-chevron-down") + .addClass("icon-chevron-up"); + } + else { + $("#librarywrap").hide(); + $("#librarytoggle i").removeClass("icon-chevron-up") + .addClass("icon-chevron-down"); + } +}); + +/* User playlist show/hide */ + +$("#userpltoggle").click(function() { + if($("#userplaylistwrap").css("display") == "none") { + $("#userplaylistwrap").show(); + $("#userpltoggle i").removeClass("icon-chevron-down") + .addClass("icon-chevron-up"); + } + else { + $("#userplaylistwrap").hide(); + $("#userpltoggle i").removeClass("icon-chevron-up") + .addClass("icon-chevron-down"); + } +}); + +/* Playlist controls show/hide */ + +$("#playlisttoggle").click(function() { + if($("#playlist_controls").css("display") == "none") { + $("#playlist_controls").show(); + $("#playlisttoggle i").removeClass("icon-chevron-down") + .addClass("icon-chevron-up"); + } + else { + $("#playlist_controls").hide(); + $("#playlisttoggle i").removeClass("icon-chevron-up") + .addClass("icon-chevron-down"); + } +}); diff --git a/www/channel-new.html b/www/channel-new.html new file mode 100644 index 00000000..bd7bc251 --- /dev/null +++ b/www/channel-new.html @@ -0,0 +1,191 @@ + + + + + CyTube + + + + + + + + + + +
+ +
+
+
+ CyTube + + + +
+
+
+ + +
+ +
+
+
+
+

+
+
+ + + +
+ +
+ +
+ +

Not connected

+
+ +
+
+ +
+
+ + +
+ +
+ +

Nothing playing

+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+ +

Show Library

+
+
+
+ +
+
+ + +
+
+ +
+ +

Show Playlist Manager

+
+
+
+ +
+
+ +
+
    +
+
+
+
+ +
+
+ +
+ +
+ +

Show Playlist Controls

+
+
+
+ +
+
+ + +
+
+ + + + +
+
+ +
    +
+
+
+
+
+
+ +
+ + + + + + + + + + + + --> + + + + + + + From c7b3adbed1db4743741bebabdc371ad76698646d Mon Sep 17 00:00:00 2001 From: calzoneman Date: Thu, 6 Jun 2013 19:38:47 -0400 Subject: [PATCH 02/65] Slight improvements --- www/assets/css/ytsync.css | 4 +-- www/assets/js/ui.js | 75 ++++++++++----------------------------- www/channel-new.html | 4 +-- 3 files changed, 23 insertions(+), 60 deletions(-) diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css index ccca3137..466e37c3 100644 --- a/www/assets/css/ytsync.css +++ b/www/assets/css/ytsync.css @@ -95,8 +95,8 @@ html, body { cursor: pointer; } -#leftpane-inner *, #rightpane-inner * { - margin-left: 0; +#leftpane-inner div.span12, #rightpane-inner div.span12 { + margin-left: 0; } #plmeta { diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js index b6720f98..abd7f926 100644 --- a/www/assets/js/ui.js +++ b/www/assets/js/ui.js @@ -1,58 +1,21 @@ -/* Usercount show/hide */ -$("#userlisttoggle").click(function() { - if($("#userlist").css("display") == "none") { - $("#userlist").show(); - $("#userlisttoggle").removeClass("icon-chevron-down") - .addClass("icon-chevron-up"); - } - else { - $("#userlist").hide(); - $("#userlisttoggle").removeClass("icon-chevron-up") - .addClass("icon-chevron-down"); - } -}); +/* Generalized show/hide function */ +function generateToggle(chevron, div) { + $(chevron).click(function() { + if($(div).css("display") == "none") { + $(div).show(); + $(chevron+" i").removeClass("icon-chevron-down") + .addClass("icon-chevron-up"); + } + else { + $(div).hide(); + $(chevron+" i").removeClass("icon-chevron-up") + .addClass("icon-chevron-down"); + } + }); +} -/* Library search show/hide */ -$("#librarytoggle").click(function() { - if($("#librarywrap").css("display") == "none") { - $("#librarywrap").show(); - $("#librarytoggle i").removeClass("icon-chevron-down") - .addClass("icon-chevron-up"); - } - else { - $("#librarywrap").hide(); - $("#librarytoggle i").removeClass("icon-chevron-up") - .addClass("icon-chevron-down"); - } -}); - -/* User playlist show/hide */ - -$("#userpltoggle").click(function() { - if($("#userplaylistwrap").css("display") == "none") { - $("#userplaylistwrap").show(); - $("#userpltoggle i").removeClass("icon-chevron-down") - .addClass("icon-chevron-up"); - } - else { - $("#userplaylistwrap").hide(); - $("#userpltoggle i").removeClass("icon-chevron-up") - .addClass("icon-chevron-down"); - } -}); - -/* Playlist controls show/hide */ - -$("#playlisttoggle").click(function() { - if($("#playlist_controls").css("display") == "none") { - $("#playlist_controls").show(); - $("#playlisttoggle i").removeClass("icon-chevron-down") - .addClass("icon-chevron-up"); - } - else { - $("#playlist_controls").hide(); - $("#playlisttoggle i").removeClass("icon-chevron-up") - .addClass("icon-chevron-down"); - } -}); +generateToggle("#usercountwrap", "#userlist"); +generateToggle("#librarytoggle", "#librarywrap"); +generateToggle("#userpltoggle", "#userplaylistwrap"); +generateToggle("#playlisttoggle", "#playlist_controls"); diff --git a/www/channel-new.html b/www/channel-new.html index bd7bc251..d21a0dff 100644 --- a/www/channel-new.html +++ b/www/channel-new.html @@ -60,8 +60,8 @@
-
- +
+

Not connected

From b5ec80d02f2745d84f079a32eef031c421353ba3 Mon Sep 17 00:00:00 2001 From: Calvin Montgomery Date: Thu, 6 Jun 2013 23:13:24 -0400 Subject: [PATCH 03/65] Continue working on rewriting stuff --- www/assets/js/data.js | 72 +++++++++++++++++++++++ www/assets/js/ui.js | 130 +++++++++++++++++++++++++++++++++++++++++- www/channel-new.html | 3 + 3 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 www/assets/js/data.js diff --git a/www/assets/js/data.js b/www/assets/js/data.js new file mode 100644 index 00000000..cb639879 --- /dev/null +++ b/www/assets/js/data.js @@ -0,0 +1,72 @@ +var CLIENT = { + rank: -1, + name: "", + logged_in: false, + profile: { + image: "", + text: "" + } +}; + +var CHANNEL = { + opts: {}, + openqueue: false, + perms: {}, +}; + +var PLAYER = false; +var VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", ""); +var VHEIGHT = ""+parseInt(parseInt(VWIDTH) * 9 / 16); +var POSITION = -1; +var socket; +var IGNORED = []; +var CHATHIST = []; +var CHATHISTIDX = 0; +var SCROLLCHAT = true; +var LASTCHATNAME = ""; +var LASTCHATTIME = 0; +var FOCUSED = true; +var PAGETITLE = "CyTube"; +var TITLE_BLINK; +var KICKED = false; +var NAME = readCookie("cytube_uname"); +var SESSION = readCookie("cytube_session"); + +function getOrDefault(k, def) { + var v = localStorage.getItem(k); + if(v === null) + return def; + if(v === "true") + return true; + if(v === "false") + return false; + if(v.match(/[0-9]+/)) + return parseInt(v); + if(v.match(/[0-9\.]+/)) + return parseFloat(v); + return v; +} + +var USEROPTS = { + theme : getOrDefault("theme", "default"), + css : getOrDefault("css", ""), + layout : getOrDefault("layout", "default"), + synch : getOrDefault("synch", true), + hidevid : getOrDefault("hidevid", false), + show_timestamps : getOrDefault("show_timestamps", true), + modhat : getOrDefault("modhat", false), + blink_title : getOrDefault("blink_title", false), + sync_accuracy : getOrDefault("sync_accuracy", 2), + chatbtn : getOrDefault("chatbtn", false), + altsocket : getOrDefault("altsocket", false) +}; + +var Rank = { + Guest: 0, + Member: 1, + Leader: 1.5, + Moderator: 2, + Admin: 3, + Owner: 10, + Siteadmin: 255 +}; diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js index abd7f926..85e22322 100644 --- a/www/assets/js/ui.js +++ b/www/assets/js/ui.js @@ -14,8 +14,136 @@ function generateToggle(chevron, div) { }); } - +/* setup show/hide toggles */ generateToggle("#usercountwrap", "#userlist"); generateToggle("#librarytoggle", "#librarywrap"); generateToggle("#userpltoggle", "#userplaylistwrap"); generateToggle("#playlisttoggle", "#playlist_controls"); + +/* navbar stuff */ +$("#optlink").click(showOptionsMenu); +$("#guestlogin").click(function() { + socket && socket.emit("login", { + name: $("#guestname").val(), + }); +}); +$("#login").click(showLoginMenu); +$("#logout").click(function() { + eraseCookie("cytube_name"); + eraseCookie("cytube_session"); + document.ocation.reload(true); +}); + +/* chatbox */ +$("#chatline").keyDown(function(ev) { + if(ev.keyCode == 13) { + var msg = $("#chatline").val(); + if(msg.trim()) { + if(USEROPTS.modhat && CLIENT.rank >= Rank.Moderator) { + msg = "/m " + msg; + } + socket.emit("chatMsg", { + msg: msg + }); + CHATHIST.push($("#chatline").val()); + CHATLISTIDX = CHATHIST.length; + $("#chatline").val(""); + } + return; + } + else if(ev.keyCode == 9) { + var words = $("#chatline").val().split(" "); + var current = words[words.length - 1].toLowerCase(); + var users = $("#userlist").children(); + var match = null; + for(var i = 0; i < users.length; i++) { + var name = users[i].children[1].innerHTML.toLowerCase(); + if(name.indexOf(current) == 0 && match == null) { + match = users[i].children[1].innerHTML; + } + else if(name.indexOf(current) == 0) { + match = null; + break; + } + } + if(match != null) { + words[words.length - 1] = match; + if(words.length == 1) + words[0] += ": "; + else + words[words.length - 1] += " "; + $("#chatline").val(words.join(" ")); + } + ev.preventDefault(); + return false; + } + else if(ev.keyCode == 38) { + if(CHATHISTIDX == CHATHIST.length) { + CHATHIST.push($("#chatline").val()); + } + if(CHATHISTIDX > 0) { + CHATHISTIDX--; + $("#chatline").val(CHATHIST[CHATHISTIDX]); + } + + ev.preventDefault(); + return false; + } + else if(ev.keyCode == 40) { + if(CHATHISTIDX < CHATHIST.length - 1) { + CHATHISTIDX++; + $("#chatline").val(CHATHIST[CHATHISTIDX]); + } + + ev.preventDefault(); + return false; + } +}); + +/* poll controls */ +$("#newpollbtn").click(showPollMenu); + +/* search controls */ +$("#library_search").click(function() { + socket.emit("searchMedia", { + source: "library", + query: $("#library_query").val().toLowerCase() + }); +}); + +$("#library_query").keydown(function(ev) { + if(ev.keyCode == 13) { + socket.emit("searchMedia", { + source: "library", + query: $("#library_query").val().toLowerCase() + }); + + } +}); + +$("#youtube_search").click(function() { + socket.emit("searchMedia", { + source: "yt", + query: $("#library_query").val().toLowerCase() + }); +}); + +/* user playlists */ + +$("#userpltoggle").click(function() { + socket.emit("listPlaylists"); +}); + +$("#userpl_save").click(function() { + if($("#userpl_name").val().trim() == "") { + makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-error") + .addClass("span12") + .insertAfter($("#userpl_save").parent()); + return; + } + socket.emit("savePlaylist", { + name: $("#userpl_name").val() + }); +}); + +/* playlist controls */ diff --git a/www/channel-new.html b/www/channel-new.html index d21a0dff..2676726b 100644 --- a/www/channel-new.html +++ b/www/channel-new.html @@ -89,6 +89,8 @@
+ +
@@ -167,6 +169,7 @@ + - - -
-
-
-

-
-
-

-
+ + +
+ +
+
+
+
+

+
-