Permalink
Browse files

Week 6 updates... Twitch emotes, horizontal slider, and more.

  • Loading branch information...
roncli committed May 2, 2017
1 parent 5f2586f commit 9a33e1ad6329b649337a2fe2c4e7618ab1f6b193
Showing with 92 additions and 7 deletions.
  1. +27 −3 app/site/css/index.css
  2. +20 −2 app/site/js/index.js
  3. +45 −2 app/site/modules/chat/twitch/index.js
@@ -13,6 +13,13 @@ body {

}

#channels li > a {
padding: 5px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}

#display {
display: flex;
flex-direction: row;
@@ -54,25 +61,42 @@ body {

#display > .tab-pane > .chat > .topic .topic-foreground {
position: absolute;
display: flex;
flex-direction: row;
width: 100%;
white-space: nowrap;
}

#display > .tab-pane > .chat > .topic .topic-foreground > .topic-logo {
display: inline-block;
display: block;
margin-right: 10px;
width: 48px;
height: 48px;
}

#display > .tab-pane > .chat > .topic .topic-foreground > .topic-text {
display: inline-block;
vertical-align: middle;
flex-grow: 1;
height: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

#display > .tab-pane > .divider {
background-color: #cccccc;
width: 4px;
cursor: ew-resize;
}

#display > .tab-pane > .users {
overflow: auto;
width: 100px;
min-width: 75px;
max-width: 250px;
}

#input {
@@ -15,6 +15,7 @@ var electron = require("electron"),
<div class="topic"></div>
<div class="text"></div>
</div>
<div class="divider"></div>
<div class="users"></div>
</div>`;
},
@@ -59,9 +60,9 @@ var electron = require("electron"),
</div>`);
};

client.on("message", (channel, username, displayname, text) => {
client.on("message", (channel, username, usercolor, displayname, html) => {
var channelName = channel.substring(1);
$(`#channel-${channelName} .text`).append(`<b>${displayname}</b>: ${text}<br />`);
$(`#channel-${channelName} .text`).append(`<b style="color: ${usercolor}">${displayname}</b>: ${html}<br />`);
});

client.on("join", (channel, username, self) => {
@@ -183,4 +184,21 @@ $(document).ready(() => {
ev.preventDefault();
$(this).tab("show");
});

$("#display").on("mousedown", "div.divider", (ev) => {
var pageX = ev.pageX,
$users = $(ev.target).next("div.users"),
width = $users.width();

$("#display").on("mousemove", (ev) => {
width += pageX - ev.pageX;
$users.width(width);
pageX = ev.pageX;
});
$("#display").on("mouseup", () => {
$("#display").off("mousemove");
});

ev.preventDefault();
});
});
@@ -2,10 +2,21 @@ var http = require("http"),
electron = require("electron"),
Tmi = require("tmi.js"),
TwitchApi = require("twitch-api"),
Chat = require("../../../js/base/chat");
Chat = require("../../../js/base/chat"),
rangeRegex = /^([0-9]+)-([0-9]+)$/;

require("../../../js/extensions");

TwitchApi.prototype.getEmoticonImages = function(callback) {
this._executeRequest(
{
method: 'GET',
path: '/chat/emoticon_images',
},
callback
);
}

class Twitch extends Chat {
constructor (settings) {
super();
@@ -48,6 +59,7 @@ class Twitch extends Chat {

twitch.tmi.on("connected", (address, port) => {
twitch.emit("connected", address, port);
//twitch.api.getEmoticonImages((err, emotes) => console.log(err, emotes));
});

twitch.tmi.on("disconnected", (message) => {
@@ -62,7 +74,38 @@ class Twitch extends Chat {
});

twitch.tmi.on("message", (channel, userstate, text, self) => {
twitch.emit("message", channel, userstate.username, userstate["display-name"], text);
var span = $("<span></span>");
if (userstate.emotes) {
let emotes = {},
lastEnd = 0;
Object.keys(userstate.emotes).forEach((id) => {
var ranges = userstate.emotes[id];
ranges.forEach((range) => {
var matches = rangeRegex.exec(range);
emotes[+matches[1]] = {start: +matches[1], end: +matches[2], id: id};
});
});
Object.keys(emotes).sort((a, b) => a.start - b.start).forEach((start) => {
var emote = emotes[start];

if (start > lastEnd) {
span.append($("<span></span>").text(text.substring(lastEnd, start)).html());
}

span.append($("<img></img>").attr({
src: `https://static-cdn.jtvnw.net/emoticons/v1/${emote.id}/1.0`,
title: text.substring(start, emote.end + 1)
}));

lastEnd = emote.end + 1;
});
if (lastEnd < text.length) {
span.append($("<span></span>").text(text.substring(lastEnd)).html());
}
} else {
span.text(text);
}
twitch.emit("message", channel, userstate.username, userstate.color, userstate["display-name"], span.html());
});

twitch.tmi.on("join", (channel, username, self) => {

0 comments on commit 9a33e1a

Please sign in to comment.