Permalink
Browse files

Week 12, edit channel topic and game!

  • Loading branch information...
roncli committed Jun 20, 2017
1 parent 4a1e011 commit 640a8fb8d4f8752e24dba424cc8277523e0bac25
@@ -41,3 +41,6 @@ jspm_packages

# Electron
dist

# NPM
package-lock.json
No changes.
@@ -71,6 +71,13 @@ body {
height: 48px;
}

#display > .tab-pane > .chat > .topic .topic-foreground > .topic-edit {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 10px;
}

#display > .tab-pane > .chat > .topic .topic-foreground > .topic-text {
flex-grow: 1;
height: 48px;
@@ -0,0 +1,21 @@
<html>
<head>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>$ = jQuery = require("jquery")</script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/editchannel.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="css/editchannel.css" rel="stylesheet"></link>
</head>
<body style="user-select: none;">
<div class="panel panel-default">
<div class="panel-heading"><h3>Edit Channel <span class="channel"></span></h3></div>
<div class="panel-body" style="text-align: center;">
Title: <input type="text" id="title" /><br />
Game: <input type="text" id="game" /><br />
<button id="update">Update</button>
</div>
</div>
</body>
</html>
@@ -0,0 +1,33 @@
const electron = require("electron"),
win = electron.remote.getCurrentWindow();

// # # # # # ## #
// # # # # #
// # # ## ### ## ### ## ### ## ### ## ### ### ### ### ## # ### ## ###
// # # # # # # # # # # ## # # # # # # # # # # # # # # ## # #### ## # ## #
// #### # # # # # # # ## # # # # # # # # ## # # # # ## # ## ## #
// #### ### # # ## # # ## ### ### ## ## # # # # # # # # ## ### ### ## ##
win.on("editchannel-set", (channel, title, game) => {
win.channel = channel;

document.title = `Hyperdrive Toolkit - Edit Channel - #${channel}`;

$("#title").val(title);
$("#game").val(game);
$(".channel").text(channel);
});

// # # # # #
// ### # # # # #
// # # # ### ## ## # # # # ## ### ### # ### ## ### ### # #
// ### # # # # # # # # #### # ## # # # # # # # ## # # # # # #
// # # # # # # # # # # # # ## # # # # ## # ## # ## # # # #
// ### # ### ## ## ### # # ## # # ## # ## # ## # # ### #
// #
$(document).ready(() => {
win.emit("editchannel-get");

$("#update").on("click", () => {
win.emit("updatechannel", win.channel, $("#title").val(), $("#game").val());
});
});
@@ -11,7 +11,7 @@ const path = require("path"),
Utilities = require("./js/utilities");

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

class Index {
// # ### ##
@@ -22,7 +22,7 @@ class Index {
// # ## ## # # # # # ## ###
// ###
static getPanel(username) {
return `<div role="tabpanel" class="tab-pane" id="channel-${username}">
return `<div role="tabpanel" class="tab-pane channel-pane" id="channel-${username}" data-username="${username}">
<div class="chat">
<div class="topic"></div>
<div class="text"></div>
@@ -117,6 +117,11 @@ class Index {
// # # # # # # # ## # ## # # # # ## # ## # #
// ### ### ### # # ## ## ## ## # ## # # # #
// #
/**
* Updates the stream's data.
* @param {stream} channel The channel to update.
* @return {void}
*/
static updateStream(channel) {
var channelName = channel.substring(1);
client.getStream(channelName).then((stream) => {
@@ -154,6 +159,9 @@ class Index {
${channels[channel].channel && channels[channel].channel.profile_banner ? `<div class="topic-background" style="background-image: url('${channels[channel].channel.profile_banner}');"></div>` : ""}
<div class="topic-foreground">
${channels[channel].channel && channels[channel].channel.logo ? `<img src="${channels[channel].channel.logo}" class="topic-logo">` : ""}
<div class="topic-edit">
<button class="btn btn-sm btn-default editchannel"><span class="glyphicon glyphicon-edit"></span></button>
</div>
${channels[channel].channel ? `<div class="topic-text">
${channel}${channels[channel].channel.status ? ` - ` : ""}${this.htmlEncode(channels[channel].channel.status)} ${channels[channel].channel.game ? `(${this.htmlEncode(channels[channel].channel.game)})` : ""}<br />
${channels[channel].stream ? `Online: ${this.getTimeSince(channels[channel].stream.created_at)} - Viewers: ${channels[channel].stream.viewers} - ` : ""}${channels[channel].chatters ? `Chatters: ${channels[channel].chatters.chatter_count} - ` : ""}Followers: ${channels[channel].channel.followers} - Views: ${channels[channel].channel.views}
@@ -501,13 +509,7 @@ $(document).ready(() => {
profileWin.emit("chat-settings", win.data.appSettings.data.chat);
});

profileWin.loadURL(`file://${__dirname}/profile.htm`, {
postData: [{
type: "rawData",
bytes: Buffer.from(`channel=${data.channel}&username=${data.username}`)
}],
extraHeaders: "Content-Type: application/x-www-form-urlencoded"
});
profileWin.loadURL(`file://${__dirname}/profile.htm`);
profileWin.setMenu(null);
profileWin.toggleDevTools(); // TODO: Remove for release.

@@ -549,4 +551,45 @@ $(document).ready(() => {
});
}
});

// # # # # # # # ## ## # #
// # # # # # # # # #
// ### # # ### ### ## ### ## ### ## ### ## ### ### ### ### ## # ## ### ## # ## ## # #
// # # # # # # # # # # # ## # # # # # # # # # # # # # # ## # # # # # # # # # ##
// # # # # # # # # # # ## ## # # # # # # # # ## # # # # ## # # # # # # # # # # #
// ### ### ## ## ## # # ## ## ### ### ## ## # # # # # # # # ## ### ## # # ## ### ### ## # #
$("#display").on("click", "button.editchannel", (ev) => {
const username = $(ev.target).closest(".channel-pane").data("username"),
channelName = `#${username}`,
channel = channels[channelName];

if (editChannelWin) {
editChannelWin.emit("editchannel-set", username, channel && channel.channel ? channel.channel.status : "", channel && channel.channel ? channel.channel.game : "");
} else {
editChannelWin = new electron.remote.BrowserWindow({width: 640, height: 480, resizable: false, title: `Hyperdrive Toolkit - Edit Channel - #${username}`});

editChannelWin.on("editchannel-get", () => {
editChannelWin.emit("editchannel-set", username, channel && channel.channel ? channel.channel.status : "", channel && channel.channel ? channel.channel.game : "");
});

editChannelWin.loadURL(`file://${__dirname}/editchannel.htm`);
editChannelWin.setMenu(null);
editChannelWin.toggleDevTools(); // TODO: Remove for release.

editChannelWin.once("ready-to-show", () => {
editChannelWin.show();
});

editChannelWin.on("updatechannel", (channel, title, game) => {
client.setStatus(channel, {status: title, game}).then((channelData) => {
channels[channelName].channel = channelData;
Index.updateTitle(channelName);
}).catch(console.log);
});

editChannelWin.on("closed", () => {
editChannelWin = null;
});
}
});
});
@@ -474,6 +474,33 @@ class Twitch extends Chat {
});
});
}

// # ## # #
// # # # # #
// ### ## ### # ### ### ### # # ###
// ## # ## # # # # # # # # ##
// ## ## # # # # # ## # # # ##
// ### ## ## ## ## # # ## ### ###
/**
* Sets the channel's status.
* @param {string} channel The channel to set the status for.
* @param {object} status The status to set.
* @return {Promise} A promise that resolves when the status is set.
*/
setStatus(channel, status) {
const twitch = this;

return new Promise((resolve, reject) => {
twitch.api.updateChannel(channel, twitch.accessToken, {channel: status}, (err, channel) => {
if (err) {
reject(err);
return;
}

resolve(channel);
});
});
}
}

module.exports = Twitch;
@@ -3,11 +3,9 @@
<script src="../node_modules/jquery/dist/jquery.min.js"></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>
<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>
<body style="user-select: none;">

0 comments on commit 640a8fb

Please sign in to comment.