Permalink
Browse files

Week 16 progress, sorting/hiding right side chatters list, and URL li…

…nks.
  • Loading branch information...
roncli committed Aug 8, 2017
1 parent 8f54786 commit 514e938cf281b5b2bc355fe9569abe5d210c2742
Showing with 112 additions and 14 deletions.
  1. +4 −0 app/site/css/index.css
  2. +92 −12 app/site/js/index.js
  3. +16 −2 app/site/modules/chat/twitch/index.js
@@ -123,6 +123,10 @@ body {
padding-right: 2px;
}

#display > .tab-pane > .users .user {
white-space: nowrap;
}

#input {

}
@@ -88,6 +88,7 @@ class Index {
static settingsChanged() {
Utilities.changeCss("#display", `font-family: "${win.data.appSettings.data.chat.font.face}"; font-size: ${win.data.appSettings.data.chat.font.size}px;`, $); // TODO: Potentially have a max size for title, input box
Utilities.changeCss("#display div.chat", `color: ${win.data.appSettings.data.chat.colors.chat.foreground}; background-color: ${win.data.appSettings.data.chat.colors.chat.background};`, $);
Utilities.changeCss("#display div.chat a.external-link", `color: ${win.data.appSettings.data.chat.colors.chat.foreground}; text-decoration: underline;`, $);
Utilities.changeCss("#display div.chat .info", `color: ${win.data.appSettings.data.chat.colors.chat.info};`, $);
Utilities.changeCss("#display div.chat .join", `color: ${win.data.appSettings.data.chat.colors.chat.join};`, $);
Utilities.changeCss("#display div.chat .part", `color: ${win.data.appSettings.data.chat.colors.chat.part};`, $);
@@ -180,23 +181,85 @@ class Index {
// ### ### ### ### ### # # # ## ### ## # ###
// # #
static displayUsers(channel) {
const channelName = channel.substring(1),
users = [];
const channelName = channel.substring(1);

if (channels[channel].chatters && channels[channel].chatters.chatter_count >= 1000) {
$(`#channel-${channelName} .divider`).hide();
$(`#channel-${channelName} .users`).hide();
return;
} else {
$(`#channel-${channelName} .divider`).show();
$(`#channel-${channelName} .users`).show();
}

const users = [];

if (!channels[channel].chatters) {
return;
}

Object.keys(channels[channel].chatters.chatters).forEach((key) => {
channels[channel].chatters.chatters[key].forEach((user) => {
users.push(user);
if (channels[channel].userBadges[user]) {
users.push(user);
}
});
});

users.sort((a, b) => {
// Channel owner.
if (channel === `#${a}` && !(channel === `#${b}`)) {
return -1;
}

if (!(channel === `#${a}`) && channel === `#${b}`) {
return 1;
}

// Moderators.
if (channels[channel].userBadges[a].includes("moderator") && !channels[channel].userBadges[b].includes("moderator")) {
return -1;
}

if (!channels[channel].userBadges[a].includes("moderator") && channels[channel].userBadges[b].includes("moderator")) {
return 1;
}

// Admin.
if (channels[channel].userBadges[a].includes("admin") && !channels[channel].userBadges[b].includes("admin")) {
return -1;
}

if (!channels[channel].userBadges[a].includes("admin") && channels[channel].userBadges[b].includes("admin")) {
return 1;
}

// Global moderators.
if (channels[channel].userBadges[a].includes("global_mod") && !channels[channel].userBadges[b].includes("global_mod")) {
return -1;
}

if (!channels[channel].userBadges[a].includes("global_mod") && channels[channel].userBadges[b].includes("global_mod")) {
return 1;
}

// Subscribers.
if (channels[channel].userBadges[a].includes("subscriber") && !channels[channel].userBadges[b].includes("subscriber")) {
return -1;
}

if (!channels[channel].userBadges[a].includes("subscriber") && channels[channel].userBadges[b].includes("subscriber")) {
return 1;
}

// Sort everyone else alphabetically.
return a.localeCompare(b);
});

$(`#channel-${channelName} .users`).html(
users.map((username) => {
return `${channels[channel].userBadges[username] || ""}${username}`;
}).join("<br />")
return `<div class="user">${channels[channel].userBadgesHtml[username] || ""}${username}</div>`;
}).join("")
);
}

@@ -281,7 +344,6 @@ if (!win.data) {
win.data.userSettings = new File(path.join(app.getPath("userData"), "userSettings.js")),
win.data.appSettings = new File(path.join(app.getPath("userData"), "appSettings.js")),

// TODO: Figure out how to do timeouts, bans, purges
// ## # # # # # # # #
// # # # # # # # #
// ## # ## ## ### ### ## ### # # # # # ## ### ### ### ### ## # # #
@@ -309,7 +371,9 @@ client.on("message", (channel, username, usercolor, displayname, badges, html, t
}
}

if (badges) {
if (channels[channel].badges && badges) {
const oldBadges = channels[channel].userBadges[username] ? channels[channel].userBadges[username].join("") : "";

Object.keys(badges).forEach((key) => {
const {[key]: version} = badges,
badge = channels[channel].badges[key].versions[version];
@@ -320,16 +384,23 @@ client.on("message", (channel, username, usercolor, displayname, badges, html, t
}).addClass("twitch-badge")[0].outerHTML;
});

channels[channel].userBadges[username] = badgeHtml;
channels[channel].userBadges[username] = Object.keys(badges);
channels[channel].userBadgesHtml[username] = badgeHtml;

const newBadges = channels[channel].userBadges[username].join("");

if (oldBadges !== newBadges) {
Index.displayUsers(channel);
}
} else {
channels[channel].userBadges[username] = [];
}

if ($("<div></div>").append(html).text().indexOf(win.data.userSettings.data.twitch.username) === -1) {
Index.appendToChannel($(`#channel-${channelName} .text`), `<span class="user-${username}">${Index.timestamp()}${badgeHtml}<b style="color: ${usercolor}">${Index.userLink(channel, username, displayname)}</b>: ${html}</span>`);
} else {
Index.appendToChannel($(`#channel-${channelName} .text`), `<span class="user-${username}">${Index.timestamp()}${badgeHtml}<b style="color: ${usercolor}">${Index.userLink(channel, username, displayname)}</b>: <span class="highlight">${html}</span></span>`);
}

Index.displayUsers(channel);
});

// ## # # # # # # # # # #
@@ -345,7 +416,8 @@ client.on("join", (channel, username, self) => {
channels[channel] = {
interval: setInterval(() => Index.updateStream(channel), 60000),
isAtBottom: true,
userBadges: {}
userBadges: {},
userBadgesHtml: {}
};
$("#channels").append(Index.getTab(channelName));
$("#display").append(Index.getPanel(channelName));
@@ -354,6 +426,7 @@ client.on("join", (channel, username, self) => {
}
Index.updateStream(channel);
}
channels[channel].userBadges[username] = [];
Index.appendToChannel($(`#channel-${channelName} .text`), `<span class="join">${Index.timestamp()}${(self ? "You have" : `${Index.userLink(channel, username)} has`)} joined ${channel}</span>`);
Index.displayUsers(channel);
});
@@ -594,7 +667,7 @@ $(document).ready(() => {

channels[`#${currentChannelName}`].isAtBottom = Index.isAtBottom($channel);

$(ev.target).tab("show").on("shown.bs.tab", () => {
$(ev.target).one("shown.bs.tab", () => {
currentChannelName = $("#channels li.active").text().substring(1);
$channel = $(`#channel-${currentChannelName} .text`);

@@ -603,6 +676,8 @@ $(document).ready(() => {
}
});

$(ev.target).tab("show");

$(ev.target).removeClass("text-danger");
});

@@ -708,6 +783,11 @@ $(document).ready(() => {
}
});

$("#display").on("click", "a.external-link", (ev) => {
electron.shell.openExternal($(ev.target).attr("href"));
return false;
});

// # # # # # # # ## ## # #
// # # # # # # # # #
// ### # # ### ### ## ### ## ### ## ### ## ### ### ### ### ## # ## ### ## # ## ## # #
@@ -4,6 +4,7 @@ const http = require("http"),
TwitchApi = require("twitch-api"),
Chat = require("../../../js/base/chat"),
rangeRegex = /^([0-9]+)-([0-9]+)$/,
urlRegex = /\b((?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?)\b/ig,
defaultColors = ["Blue", "Coral", "DodgerBlue", "SpringGreen", "YellowGreen", "Green", "OrangeRed", "Red", "GoldenRod", "HotPink", "CadetBlue", "SeaGreen", "Chocolate", "BlueViolet", "Firebrick"];

require("../../../js/extensions");
@@ -145,7 +146,13 @@ class Twitch extends Chat {
var emote = emotes[start];

if (start > lastEnd) {
span.append($("<span></span>").text(text.substring(lastEnd, start)).html());
const fragment = text.substring(lastEnd, start),
subspan = $("<span></span>");

subspan.text(fragment);
subspan.html(subspan.text().replace(urlRegex, (match, capture) => $("<div></div>").append($("<a></a>").attr({href: capture}).addClass("external-link").text(capture)).html()));

span.append(subspan.html());
}

span.append($("<img></img>").attr({
@@ -157,10 +164,17 @@ class Twitch extends Chat {
});

if (lastEnd < text.length) {
span.append($("<span></span>").text(text.substring(lastEnd)).html());
const fragment = text.substring(lastEnd),
subspan = $("<span></span>");

subspan.text(fragment);
subspan.html(subspan.text().replace(urlRegex, (match, capture) => $("<div></div>").append($("<a></a>").attr({href: capture}).addClass("external-link").text(capture)).html()));

span.append(subspan.html());
}
} else {
span.text(text);
span.html(span.text().replace(urlRegex, (match, capture) => $("<div></div>").append($("<a></a>").attr({href: capture}).addClass("external-link").text(capture)).html()));
}

if (!userstate.color) {

0 comments on commit 514e938

Please sign in to comment.