diff --git a/www/assets/css/darkstrap.css b/www/assets/css/darkstrap.css
index bd8b308c..849228b9 100644
--- a/www/assets/css/darkstrap.css
+++ b/www/assets/css/darkstrap.css
@@ -1013,3 +1013,7 @@ li.alert-error.alert-info {
.userlist_owner {
color: #ff9900;
}
+
+.profile-box {
+ background-color: #2f2f2f;
+}
diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css
index b484d6a4..71daefda 100644
--- a/www/assets/css/ytsync.css
+++ b/www/assets/css/ytsync.css
@@ -224,3 +224,20 @@ html, body {
.timestamp {
font-size: 8pt;
}
+
+.profile-box {
+ z-index: 9999;
+ position: absolute;
+ border: 1px solid #aaaaaa;
+ border-radius: 5px;
+ background-color: #ffffff;
+ max-width: 200px;
+ padding: 5px;
+}
+
+.profile-image {
+ width: 80px;
+ height: 80px;
+ border: 1px solid #aaaaaa;
+ border-radius: 5px;
+}
diff --git a/www/assets/js/client.js b/www/assets/js/client.js
index b497e466..dbd0a7b7 100644
--- a/www/assets/js/client.js
+++ b/www/assets/js/client.js
@@ -34,6 +34,10 @@ var CHANNEL = "";
var CUSTOMJS = "";
var uname = readCookie("sync_uname");
var session = readCookie("sync_session");
+var PROFILE = {
+ image: "",
+ bio: ""
+};
function parseBool(x) {
if(typeof x == "boolean")
diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js
index 53038ba0..f961b5c9 100644
--- a/www/assets/js/functions.js
+++ b/www/assets/js/functions.js
@@ -16,6 +16,26 @@ function formatUserlistItem(div, data) {
$(name).css("font-style", "");
$(name).addClass(getNameColor(data.rank));
+ var profile;
+ $(name).mouseenter(function(ev) {
+ profile = $("
")
+ .addClass("profile-box")
+ .css("top", (ev.pageY + 5) + "px")
+ .css("left", ev.pageX + "px")
+ .appendTo($("body"));
+ $("
").addClass("profile-image")
+ .attr("src", "http://i.imgur.com/P8MIHkc.jpg")
+ .appendTo(profile);
+ $("").text("I'm calzoneman, the developer of this site. Feel free to contact me with queries, comments, or praise about the site.").appendTo(profile);
+ });
+ $(name).mousemove(function(ev) {
+ profile.css("top", (ev.pageY + 5) + "px")
+ .css("left", ev.pageX + "px")
+ });
+ $(name).mouseleave(function() {
+ profile.remove();
+ });
+
var flair = div.children[0];
flair.innerHTML = "";
// denote current leader with a star
@@ -143,6 +163,7 @@ function addUserDropdown(entry, name) {
ul.css("display", "none");
}
});
+
return ul;
}
@@ -829,6 +850,7 @@ function showUserOpts() {
var warn = $("").addClass("text-error")
.text("Changing layouts may require a refresh")
addOption("", warn);
+ $("
").appendTo(form);
var synchcontainer = $("").addClass("checkbox")
.text("Synchronize Media");
@@ -846,6 +868,7 @@ function showUserOpts() {
var hidevid = $("").attr("type", "checkbox").appendTo(vidcontainer);
hidevid.prop("checked", USEROPTS.hidevid);
addOption("Hide Video", vidcontainer);
+ $("
").appendTo(form);
var tscontainer = $("").addClass("checkbox")
.text("Show timestamps in chat");
@@ -859,6 +882,15 @@ function showUserOpts() {
blink.prop("checked", USEROPTS.blink_title);
addOption("Chat Notice", blinkcontainer);
+ var profimg = $("").attr("type", "text")
+ profimg.val(PROFILE.image);
+ addOption("Profile Image", profimg);
+
+ var profbio = $("");
+ profbio.attr("rows", 5);
+ profbio.val(PROFILE.bio);
+ addOption("Profile Bio", profbio);
+
if(RANK >= Rank.Moderator) {
$("
").appendTo(form);
var modhatcontainer = $("").addClass("checkbox")
@@ -944,6 +976,32 @@ function applyOpts() {
}
}
+function showProfileModal(data) {
+ $("#ytapiplayer").hide();
+ var modal = $("").addClass("modal hide fade")
+ .appendTo($("body"));
+ var head = $("").addClass("modal-header")
+ .appendTo(modal);
+ $("").addClass("close")
+ .attr("data-dismiss", "modal")
+ .attr("aria-hidden", "true")
+ .appendTo(head)[0].innerHTML = "×";
+ $("").text(data.name).appendTo(head);
+ var body = $("").addClass("modal-body").appendTo(modal);
+ $("
").attr("src", data.image)
+ .css("width", "80px")
+ .css("height", "80px")
+ .appendTo(body)
+ $("").addClass("profile-text").appendTo(body).text(data.text);
+ //var footer = $("").addClass("modal-footer").appendTo(modal);
+
+ modal.on("hidden", function() {
+ $("#ytapiplayer").show();
+ modal.remove();
+ });
+ modal.modal();
+}
+
function idToURL(data) {
var entry = "";
switch(data.type) {