Skip to content

Commit

Permalink
From week 11, completed user profiles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@roncli
roncli committed Jun 20, 2017
1 parent 807c613 commit 4a1e011
Show file tree
Hide file tree
Showing 7 changed files with 169 additions and 80 deletions.
8 changes: 4 additions & 4 deletions app/package.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
"dependencies": { "dependencies": {
"bootstrap": "3.3.7", "bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1", "bootstrap-colorpicker": "2.5.1",
"express": "4.15.2", "express": "4.15.3",
"iconv-lite": "0.4.17", "iconv-lite": "0.4.18",
"jquery": "3.2.1", "jquery": "3.2.1",
"node-fonts": "1.0.0", "node-fonts": "1.0.0",
"tinycolor2": "1.4.1", "tinycolor2": "1.4.1",
"tmi.js": "1.1.2", "tmi.js": "1.2.1",
"twitch-api": "0.4.6" "twitch-api": "0.4.6"
}, },
"engines": { "engines": {
"node": ">=7.0.0" "node": ">=8.0.0"
} }
} }
36 changes: 36 additions & 0 deletions app/site/css/profile.css
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,36 @@
.panel {
margin-bottom: 0;
}

h3 {
margin: 0;
}

.buttons {
padding-bottom: 5px;
}

.buttons-bottom {
padding-top: 5px;
}

#timeout-time {
display: inline-block; width: auto;
}

#user-chat {
height: 252px;
overflow-x: hidden;
overflow-y: auto;
user-select: text;
}

a.userlink, a.userlink:hover, a.userlink:visited {
text-decoration: none;
color: inherit;
cursor: text;
}

.btn.btn-compact {
padding: 3px 6px;
}
72 changes: 24 additions & 48 deletions app/site/js/index.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,47 +1,19 @@
const electron = require("electron"), const path = require("path"),
tinycolor = require("tinycolor2"), electron = require("electron"),
remote = electron.remote, remote = electron.remote,
app = remote.app, app = remote.app,
win = remote.getCurrentWindow(), win = remote.getCurrentWindow(),
path = require("path"), tinycolor = require("tinycolor2"),
Twitch = require("./modules/chat/twitch"), // TODO: Load modules Twitch = require("./modules/chat/twitch"), // TODO: Load modules
File = require("./modules/datastore/file"),
settings = require("./js/apiSettings"), settings = require("./js/apiSettings"),
client = new Twitch(settings), client = new Twitch(settings),
File = require("./modules/datastore/file"); Utilities = require("./js/utilities");


var channels = {}, var channels = {},
profileWin; profileWin;


class Index { class Index {
// # ##
// # # #
// ## ### ### ### ### ## # ### ###
// # # # # # # # # # # ## # ## ##
// # # # # ## # # ## ## # # ## ##
// ## # # # # # # # ## ## ### ###
// ###
// Based on http://stackoverflow.com/a/19826393/214137
static changeCss(cssName, cssValue) {
var cssMainContainer = $("#css-modifier-container"),
classContainer = cssMainContainer.find(`div[data-class="${cssName}"]`);

// Create hidden css main container if it doesn't exist.
if (cssMainContainer.length === 0) {
cssMainContainer = $("<div></div>").attr({id: "css-modifier-container"});
cssMainContainer.hide();
cssMainContainer.appendTo($("body"));
}

// Create div for the css if it doesn't exist.
if (classContainer.length === 0) {
classContainer = $("<div></div>").attr({"data-class": cssName});
classContainer.appendTo(cssMainContainer);
}

// Replace style in the css div.
classContainer.html(`<style>${cssName}{${cssValue}}</style>`);
}

// # ### ## // # ### ##
// # # # # // # # # #
// ### ## ### # # ### ### ## # // ### ## ### # # ### ### ## #
Expand Down Expand Up @@ -115,15 +87,14 @@ class Index {
// ### ## ## ## ### # # # ### ## # # # # # # # ## ### // ### ## ## ## ### # # # ### ## # # # # # # # ## ###
// ### ### // ### ###
static settingsChanged() { static settingsChanged() {
this.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 bo 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
this.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", `color: ${win.data.appSettings.data.chat.colors.chat.foreground}; background-color: ${win.data.appSettings.data.chat.colors.chat.background};`, $);
//changeCss("#display div.chat .text", `font-size: ${win.data.appSettings.data.chat.font.size}px;`); Utilities.changeCss("#display div.chat .info", `color: ${win.data.appSettings.data.chat.colors.chat.info};`, $);
this.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};`, $);
this.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};`, $);
this.changeCss("#display div.chat .part", `color: ${win.data.appSettings.data.chat.colors.chat.part};`); Utilities.changeCss("#display div.chat .highlight", `color: ${win.data.appSettings.data.chat.colors.chat.highlight};`, $);
this.changeCss("#display div.chat .highlight", `color: ${win.data.appSettings.data.chat.colors.chat.highlight};`); Utilities.changeCss("#inputbox", `color: ${win.data.appSettings.data.chat.colors.input.foreground}; background-color: ${win.data.appSettings.data.chat.colors.input.background}; font-family: "${win.data.appSettings.data.chat.font.face}"; font-size: ${win.data.appSettings.data.chat.font.size}px;`, $);
this.changeCss("#inputbox", `color: ${win.data.appSettings.data.chat.colors.input.foreground}; background-color: ${win.data.appSettings.data.chat.colors.input.background}; font-family: "${win.data.appSettings.data.chat.font.face}"; font-size: ${win.data.appSettings.data.chat.font.size}px;`); Utilities.changeCss("#display div.users", `color: ${win.data.appSettings.data.chat.colors.userList.foreground}; background-color: ${win.data.appSettings.data.chat.colors.userList.background};`, $);
this.changeCss("#display div.users", `color: ${win.data.appSettings.data.chat.colors.userList.foreground}; background-color: ${win.data.appSettings.data.chat.colors.userList.background};`);
this.setSize($("#inputbox")); this.setSize($("#inputbox"));
} }


Expand Down Expand Up @@ -198,7 +169,7 @@ class Index {
// # # ## ## # # # # # # # // # # ## ## # # # # # # #
// ### ### ## # #### ### # # # # // ### ### ## # #### ### # # # #
static userLink(channel, username, displayname) { static userLink(channel, username, displayname) {
return `<a class="userlink" data-username="${username}", data-channel="${channel}">${displayname || username}</a>`; return `<a class="userlink" data-username="${username}" data-displayname="${displayname}" data-channel="${channel}">${displayname || username}</a>`;
} }
} }


Expand All @@ -207,6 +178,7 @@ if (!win.data) {
} }
win.data.userSettings = new File(path.join(app.getPath("userData"), "userSettings.js")), win.data.userSettings = new File(path.join(app.getPath("userData"), "userSettings.js")),
win.data.appSettings = new File(path.join(app.getPath("userData"), "appSettings.js")), win.data.appSettings = new File(path.join(app.getPath("userData"), "appSettings.js")),

// TODO: Figure out how to do timeouts, bans, purges // TODO: Figure out how to do timeouts, bans, purges
// ## # # # # # # # # // ## # # # # # # # #
// # # # # # # # # // # # # # # # # #
Expand All @@ -228,9 +200,9 @@ client.on("message", (channel, username, usercolor, displayname, html, text) =>
} }


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


Expand Down Expand Up @@ -393,6 +365,9 @@ win.data.appSettings.load().then(() => {
// # # ### ### ## ## ## ## ### # # # ### ## # # ### # # # ## ### // # # ### ### ## ## ## ## ### # # # ### ## # # ### # # # ## ###
// # # ### // # # ###
win.data.appSettings.on("saved", () => { win.data.appSettings.on("saved", () => {
if (profileWin) {
profileWin.emit("chat-settings", win.data.appSettings.data.chat);
}
Index.settingsChanged(); Index.settingsChanged();
}); });


Expand Down Expand Up @@ -517,12 +492,13 @@ $(document).ready(() => {
var data = $(ev.target).data(); var data = $(ev.target).data();


if (profileWin) { if (profileWin) {
profileWin.emit("profile-set", data.channel, data.username); profileWin.emit("profile-set", data.channel, data.username, $(`#display .text .user-${data.username}`).map((index, el) => $(el).html()).toArray().join("")); // TODO: Consolidate user data, possibly into the channel user array.
} else { } else {
profileWin = new electron.remote.BrowserWindow({width: 800, height: 600, title: `Hyperdrive Toolkit - Profile - ${data.username} on ${data.channel}`}); profileWin = new electron.remote.BrowserWindow({width: 640, height: 480, resizable: false, title: `Hyperdrive Toolkit - Profile - ${data.username} on ${data.channel}`});


profileWin.on("profile-get", () => { profileWin.on("profile-get", () => {
profileWin.emit("profile-set", data.channel, data.username); profileWin.emit("profile-set", data.channel, data.username, $(`#display .text .user-${data.username}`).map((index, el) => $(el).html()).toArray().join("")); // TODO: Consolidate user data, possibly into the channel user array.
profileWin.emit("chat-settings", win.data.appSettings.data.chat);
}); });


profileWin.loadURL(`file://${__dirname}/profile.htm`, { profileWin.loadURL(`file://${__dirname}/profile.htm`, {
Expand Down
21 changes: 19 additions & 2 deletions app/site/js/profile.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,6 @@
const electron = require("electron"), const electron = require("electron"),
win = electron.remote.getCurrentWindow(); win = electron.remote.getCurrentWindow(),
Utilities = require("./js/utilities");


// # # # ## # // # # # ## #
// # # # # // # # # #
Expand All @@ -8,14 +9,30 @@ const electron = require("electron"),
// #### # # # # # # # # # # # # # # # ## ## ## # // #### # # # # # # # # # # # # # # # ## ## ## #
// #### ### # # ## # # ### # ## # ### ### ## ### ## ## // #### ### # # ## # # ### # ## # ### ### ## ### ## ##
// # // #
win.on("profile-set", (channel, username) => { win.on("profile-set", (channel, username, userChat) => {
win.channel = channel; win.channel = channel;
win.username = username; win.username = username;
$("#user-chat").html(userChat);


document.title = `Hyperdrive Toolkit - Profile - ${username} on ${channel}`; document.title = `Hyperdrive Toolkit - Profile - ${username} on ${channel}`;
$(".username").text(username); $(".username").text(username);
}); });


// # # # # # #
// # # # #
// # # ## ### ## ### ## ### ### ### ### ## ### ### ## ### ### ###
// # # # # # # # # # # # # # # # #### ## # ## # # # # # # # ##
// #### # # # # # # # # # # # ## # ## ## # # # # # ## ##
// #### ### # # ## # # ## # # # # ## ### ## ## ## ### # # # ###
// ###
win.on("chat-settings", (settings) => {
Utilities.changeCss("#user-chat", `font-family: "${settings.font.face}"; font-size: ${settings.font.size}px; color: ${settings.colors.chat.foreground}; background-color: ${settings.colors.chat.background};`, $);
Utilities.changeCss("#user-chat .info", `color: ${settings.colors.chat.info};`, $);
Utilities.changeCss("#user-chat .join", `color: ${settings.colors.chat.join};`, $);
Utilities.changeCss("#user-chat .part", `color: ${settings.colors.chat.part};`, $);
Utilities.changeCss("#user-chat .highlight", `color: ${settings.colors.chat.highlight};`, $);
});

// # # # # # // # # # # #
// ### # # # # # // ### # # # # #
// # # # ### ## ## # # # # ## ### ### # ### ## ### ### # # // # # # ### ## ## # # # # ## ### ### # ### ## ### ### # #
Expand Down
40 changes: 40 additions & 0 deletions app/site/js/utilities.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,40 @@
// # # # # ## # # #
// # # # # #
// # # #### ## # ## #### ## ### ###
// # # # # # # # # # # #
// # # # # # # # # ##### ###
// # # # # # # # # # # # #
// ### ## ### ### ### ## ### ### ####
class Utilities {
// # ##
// # # #
// ## ### ### ### ### ## # ### ###
// # # # # # # # # # # ## # ## ##
// # # # # ## # # ## ## # # ## ##
// ## # # # # # # # ## ## ### ###
// ###
// Based on http://stackoverflow.com/a/19826393/214137
static changeCss(cssName, cssValue, $) {
var cssMainContainer = $("#css-modifier-container"),
classContainer = cssMainContainer.find(`div[data-class="${cssName}"]`);

// Create hidden css main container if it doesn't exist.
if (cssMainContainer.length === 0) {
cssMainContainer = $("<div></div>").attr({id: "css-modifier-container"});
cssMainContainer.hide();
cssMainContainer.appendTo($("body"));
}

// Create div for the css if it doesn't exist.
if (classContainer.length === 0) {
classContainer = $("<div></div>").attr({"data-class": cssName});
classContainer.appendTo(cssMainContainer);
}

// Replace style in the css div.
classContainer.html(`<style>${cssName}{${cssValue}}</style>`);
}

}

module.exports = Utilities;
66 changes: 43 additions & 23 deletions app/site/profile.htm
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -2,30 +2,50 @@
<head> <head>
<script src="../node_modules/jquery/dist/jquery.min.js"></script> <script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>$ = jQuery = require("jquery")</script> <script>$ = jQuery = require("jquery")</script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="js/profile.js"></script> <script src="js/profile.js"></script>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<link href="../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet"></link>
<link href="css/profile.css" rel="stylesheet"></link>
</head> </head>
<body> <body style="user-select: none;">
<button id="ban">Ban</button> <div class="panel panel-default">
<button id="unban">Unban</button> <div class="panel-heading"><h3>Profile for <span class="username"></span></h3></div>
Timeout: <div class="panel-body" style="text-align: center;">
<select id="timeout-time"> <div class="buttons">
<option value="1">Purge</option> Ban Reason: <input type="text" id="ban-reason" />
<option value="60">1 minute</option> <button id="ban" class="btn btn-compact btn-default">Ban</button>
<option value="300">5 minutes</option> <button id="unban" class="btn btn-compact btn-default">Unban</button>
<option value="900">15 minutes</option> </div>
<option value="1800">30 minutes</option> <div class="buttons">
</select> <span>Timeout:</span>
<button id="timeout">Timeout</button> <select id="timeout-time" class="form-control">
<br /> <option value="1">Purge</option>
Ban Reason: <input type="text" id="ban-reason" /> <option value="60">1 minute</option>
<br /><br /> <option value="300">5 minutes</option>
<button id="mod">Mod</button> <option value="900">15 minutes</option>
<button id="unmod">Unmod</button> <option value="1800">30 minutes</option>
<br /><br /> </select>
<button id="twitch">twitch.tv/<span class="username"></span></button> <button id="timeout" class="btn btn-compact btn-default">Timeout</button>
<button id="join">Join #<span class="username"></span></button> </div>
<br /><br /> <div class="row buttons buttons-bottom">
<button id="follow">Follow</button> <div class="col-xs-3">
<button id="unfollow">Unfollow</button> <button id="mod" class="btn btn-compact btn-default">Mod</button>
<button id="unmod" class="btn btn-compact btn-default">Unmod</button>
</div>
<div class="col-xs-4">
<button id="follow" class="btn btn-compact btn-default">Follow</button>
<button id="unfollow" class="btn btn-compact btn-default">Unfollow</button>
</div>
<div class="col-xs-5">
<button id="twitch" class="btn btn-compact btn-default">Open Stream</span></button>
<button id="join" class="btn btn-compact btn-default">Join Channel</span></button>
</div>
</div>
</div>
</div>
<div id="user-chat"></div>
</body> </body>
</html> </html>
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
"url": "https://github.com/roncli/HyperdriveToolkit.git" "url": "https://github.com/roncli/HyperdriveToolkit.git"
}, },
"devDependencies": { "devDependencies": {
"electron-builder": "15.6.2", "electron": "1.6.11",
"electron": "1.6.2" "electron-builder": "19.5.1"
}, },
"engines": { "engines": {
"node": ">=7.0.0" "node": ">=8.0.0"
}, },
"productName": "HyperdriveToolkit", "productName": "HyperdriveToolkit",
"build": { "build": {
Expand Down

0 comments on commit 4a1e011

Please sign in to comment.