TTS Volume
diff --git a/src/js/auth.js b/src/js/auth.js
index 7aed6e0..ec2d6a8 100644
--- a/src/js/auth.js
+++ b/src/js/auth.js
@@ -72,8 +72,30 @@ const twitchAuthentication = () =>
}
});
+function getTwitchUserId() {
+ // Get user Logo with access token
+ options = {
+ method: 'GET',
+ url: `https://api.twitch.tv/helix/users`,
+ headers: { 'Client-ID': settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}` },
+ };
+
+ axios
+ .request(options)
+ .then((responseLogoUrl) => {
+ console.log(responseLogoUrl.data.data[0]);
+ settings.TWITCH.USERNAME = responseLogoUrl.data.data[0].display_name;
+ settings.TWITCH.USER_LOGO_URL = responseLogoUrl.data.data[0].profile_image_url;
+ settings.TWITCH.USER_ID = responseLogoUrl.data.data[0].id;
+ fs.writeFileSync(settingsPath, ini.stringify(settings));
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
function getTwitchOauthToken() {
return twitchAuthentication().then((res) => {
+ getTwitchUserId();
return res;
});
}
diff --git a/src/js/chat.js b/src/js/chat.js
index 21b3967..6ce1af7 100644
--- a/src/js/chat.js
+++ b/src/js/chat.js
@@ -8,22 +8,31 @@ function getResponse() {
// Create chat message from received data
const article = document.createElement('article');
- article.className = 'msg-container msg-self';
+ article.className = 'msg-container-user';
article.innerHTML = messageTemplates.userTemplate;
- const postTime = article.querySelector('.post-time');
+ const userImg = article.querySelector('.icon-container-user > .user-img-user');
+ if (userImg) {
+ userImg.src = settings.TWITCH.USER_LOGO_URL;
+ }
+
+ const postTime = article.querySelector('.post-time-user');
+
+ const iconContainer = article.querySelector('.icon-container-user');
+ iconContainer.appendChild(postTime);
+
if (postTime) {
postTime.innerText = getPostTime();
}
- const msg = article.querySelector('.msg');
+ const msg = article.querySelector('.msg-box-user');
if (msg) {
msg.innerText = userText;
}
// Appends the message to the main chat box (shows the message)
- showChatMessage(article);
+ showChatMessage(article, true);
twitch.sendMessage(userText);
diff --git a/src/js/messageTemplates.js b/src/js/messageTemplates.js
index d699652..10e4eb0 100644
--- a/src/js/messageTemplates.js
+++ b/src/js/messageTemplates.js
@@ -9,21 +9,14 @@ const twitchTemplate = `
`.trim();
const userTemplate = `
-
- 
+
+
+ You
+
+
+ You
-
-
-
-
+
-
-
-
+
+
`.trim();
const messageTemplate = `
diff --git a/src/js/renderer.js b/src/js/renderer.js
index 012c350..45f7da7 100644
--- a/src/js/renderer.js
+++ b/src/js/renderer.js
@@ -1,6 +1,7 @@
const fs = require('fs');
const ini = require('ini');
const path = require('path'); // get directory path
+const axios = require('axios');
const { ipcRenderer, shell } = require('electron'); // necessary electron libraries to send data to the app
const io = require('socket.io-client');
@@ -195,16 +196,23 @@ Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
};
});
-function showChatMessage(article) {
+function showChatMessage(article, isUser) {
document.querySelector('#chatBox').appendChild(article);
+ let usernameHtml;
+ let msg;
+ let messages = Array.from(document.body.querySelectorAll('.msg-container'));
+
+ if (isUser) {
+ usernameHtml = article.querySelector('.username-user');
+ msg = article.querySelector('.msg-box-user');
+ } else {
+ usernameHtml = article.querySelector('.username');
+ msg = article.querySelector('.msg-box');
+ }
- const usernameHtml = article.querySelector('.username');
var style = getComputedStyle(usernameHtml);
var style2 = getComputedStyle(usernameHtml);
- const msg = article.querySelector('.msg-box');
-
- const messages = Array.from(document.body.querySelectorAll('.msg-container'));
const lastMessage = messages[messages.length - 1];
lastMessage.scrollIntoView({ behavior: 'smooth' });
}
diff --git a/src/js/settings.js b/src/js/settings.js
index 06a70b3..3e57ed7 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -29,7 +29,7 @@ function getGeneralSettings() {
document.body.querySelector('#USE_VTUBER').checked = settings.MODULES.USE_VTUBER;
document.body.querySelector('#VTUBER_URL').value = `http://localhost:${settings.GENERAL.PORT}/vtuber/`;
showMenuButton('#btnBrowsersourceVtuber', settings.MODULES.USE_VTUBER);
- document.body.querySelector('#USE_CHATBUBBLE').checked = settings.GENERAL.USE_CHATBUBBLE;
+ document.body.querySelector('#USE_CHATBUBBLE').checked = settings.MODULES.USE_CHATBUBBLE;
document.body.querySelector('#CHATBUBBLE_URL').value = `http://localhost:${settings.GENERAL.PORT}/chat/`;
showMenuButton('#btnBrowsersourceChat', settings.GENERAL.USE_CHATBUBBLE);
diff --git a/src/js/twitch.js b/src/js/twitch.js
index f316931..ef4f299 100644
--- a/src/js/twitch.js
+++ b/src/js/twitch.js
@@ -61,6 +61,9 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
postTime.innerText = getPostTime();
}
+ const iconContainer = article.querySelector('.icon-container');
+ iconContainer.appendChild(postTime);
+
const msg = article.querySelector('.msg-box');
if (msg) {
messageObject.forEach((entry) => {
@@ -70,11 +73,11 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
msg.innerHTML += entry.html;
}
});
- msg.appendChild(postTime);
+ // msg.appendChild(postTime);
}
// Appends the message to the main chat box (shows the message)
- showChatMessage(article);
+ showChatMessage(article, false);
if (fileteredMessage) {
sound.playVoice(fileteredMessage, logoUrl, username, msg);
diff --git a/src/main.js b/src/main.js
index 94ea851..0bd5fab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -178,7 +178,9 @@ async function createIniFile() {
TWITCH: {
USE_TWITCH: false,
CHANNEL_NAME: '',
- USERNAME: 'loquendo',
+ USERNAME: '',
+ USER_ID: '',
+ USER_LOGO_URL: '',
OAUTH_TOKEN: '',
CLIENT_ID: '2t206sj7rvtr1rutob3p627d13jch9',
},