fixed user message and other visual bugs.
This commit is contained in:
Khyretos
parent
e76ff46e4c
commit
ea61a8ec12
12 changed files with 140 additions and 64 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "loquendo-bot",
|
||||
"version": "2.3.0",
|
||||
"version": "2.4.0",
|
||||
"description": "Bot assistant for streamers over different platforms",
|
||||
"main": "src/main.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -41,8 +41,6 @@ q = queue.Queue()
|
|||
# gobal functions
|
||||
|
||||
# classes
|
||||
|
||||
|
||||
class LanguageDetection:
|
||||
def __init__(self):
|
||||
if environment == "dev":
|
||||
|
|
@ -182,7 +180,6 @@ text_to_speech_service = TTS()
|
|||
|
||||
# endpoints
|
||||
|
||||
|
||||
@app.route("/stream", methods=["GET"])
|
||||
def stream_recognition():
|
||||
def generate():
|
||||
|
|
|
|||
102
src/css/chat.css
102
src/css/chat.css
|
|
@ -15,8 +15,9 @@ h1 {
|
|||
flex-direction: column;
|
||||
background-color: var(--mid-section);
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
font-family: 'FRAMDCN';
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
|
|
@ -172,16 +173,25 @@ h1 {
|
|||
}
|
||||
|
||||
.msg-container {
|
||||
direction: ltr;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.msg-container-user {
|
||||
direction: rtl;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.msg-box {
|
||||
background: var(--chat-bubble);
|
||||
color: white;
|
||||
min-width: 150px;
|
||||
border-radius: 5px;
|
||||
padding: 20px 5px 5px 25px;
|
||||
margin: 20px 0px 0px 25px;
|
||||
|
|
@ -191,15 +201,14 @@ h1 {
|
|||
|
||||
.msg-box-user {
|
||||
background: var(--chat-bubble);
|
||||
padding: 5px 5px 5px 5px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
margin-right: -20px;
|
||||
margin-top: 10px;
|
||||
max-width: 80%;
|
||||
width: auto;
|
||||
float: right;
|
||||
word-wrap: break-word;
|
||||
color: white;
|
||||
text-align: -webkit-left;
|
||||
min-width: 150px;
|
||||
border-radius: 5px;
|
||||
padding: 20px 15px 10px 5px;
|
||||
margin: 0px 35px 0px 25px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.msg-box-user-temp {
|
||||
|
|
@ -211,14 +220,16 @@ h1 {
|
|||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.user-img-user {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 0 0px 10px 10px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.messages {
|
||||
|
|
@ -256,15 +267,26 @@ h1 {
|
|||
|
||||
.username {
|
||||
float: left;
|
||||
color: var(--chat-bubble-header);
|
||||
background-color: var(--main-color4);
|
||||
margin-left: 25px;
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 5px 5px 5px 30px;
|
||||
border-radius: 5px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.username-user {
|
||||
background-color: var(--main-color4);
|
||||
margin-right: 25px;
|
||||
color: white;
|
||||
padding: 5px 40px 5px 15px;
|
||||
border-radius: 5px;
|
||||
margin: 0px 30px 5px 5px;
|
||||
top: 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.username-temp {
|
||||
|
|
@ -272,13 +294,35 @@ h1 {
|
|||
}
|
||||
|
||||
.post-time {
|
||||
float: right;
|
||||
font-size: 8pt;
|
||||
padding: 10px 0px 0px 5px;
|
||||
padding: 3px 5px 0px 15px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
background-color: var(--main-color4);
|
||||
right: 15px;
|
||||
top: -19px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.msg-self .msg-box {
|
||||
.post-time-user {
|
||||
font-size: 8pt;
|
||||
padding: 3px 15px 0px 5px;
|
||||
margin: 5px -15px 0px -10px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
background-color: var(--main-color4);
|
||||
right: 60px;
|
||||
top: -19px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* .msg-self .msg-box {
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
background: var(--main-color1);
|
||||
float: right;
|
||||
|
|
@ -291,30 +335,26 @@ h1 {
|
|||
.msg-self .msg {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
} */
|
||||
|
||||
.mmg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.icon-container-user {
|
||||
width: 50px;
|
||||
direction: ltr;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
float: right;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.img {
|
||||
|
|
@ -328,6 +368,7 @@ h1 {
|
|||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-left: -15px;
|
||||
z-index: 6;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
|
|
@ -335,13 +376,8 @@ h1 {
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-left: -50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
z-index: 6;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.menu-select {
|
||||
|
|
|
|||
|
|
@ -388,6 +388,7 @@ input[type='lol'] {
|
|||
transition: opacity 0.3s, visibility 0s;
|
||||
color: var(--main-color2);
|
||||
font-family: 'xxii_avenmedium';
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* .tooltip .tooltiptext {
|
||||
|
|
|
|||
|
|
@ -152,6 +152,11 @@
|
|||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">TTS Output Device</div>
|
||||
<select class="menu-select" name="ttsAudioDevice" id="ttsAudioDevice"></select>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_OUTPUT_TTS"
|
||||
tip="Outputting to specific device will NOT work with voicemeter"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">TTS Volume</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,21 +9,14 @@ const twitchTemplate = `
|
|||
`.trim();
|
||||
|
||||
const userTemplate = `
|
||||
<div class="icon-container-user">
|
||||
<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
<div class="icon-container-user">
|
||||
<span class="post-time-user">You</span>
|
||||
<img class="status-circle-user" src="./images/twitch-icon.png" />
|
||||
</div>
|
||||
<div class="msg-box-user">
|
||||
<div class="flr">
|
||||
<div class="messages-user">
|
||||
<span class="timestamp">
|
||||
<span class="username">You</span>
|
||||
<span class="post-time"></span>
|
||||
</span>
|
||||
<p class="msg"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
</div>
|
||||
<span class="username-user">You</span>
|
||||
<div class="msg-box-user">
|
||||
</div>
|
||||
`.trim();
|
||||
|
||||
const messageTemplate = `
|
||||
|
|
|
|||
|
|
@ -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' });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue