khyretos/LoquendoBot
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions

big release, fixed multiple functionalities.

Browse source
This commit is contained in:
Khyretos 2023-08-06 11:25:21 +02:00
parent a65e0b6fd6
commit 6c192784c4
25 changed files with 1059 additions and 598 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"npm-scripts.showStartNotification": false
}

1
forge.config.js
View file

@ -3,7 +3,6 @@ module.exports = {
icon: './src/images/icon.ico', icon: './src/images/icon.ico',
asar: true, asar: true,
"extraResource": [ "extraResource": [
"./src/config/settings.ini",
"./src/config/loquendo.db", "./src/config/loquendo.db",
"./src/sounds" "./src/sounds"
] ]

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "loquendo-bot", "name": "loquendo-bot",
"version": "2.0.0", "version": "2.1.0",
"description": "Bot assistant for streamers over different platforms", "description": "Bot assistant for streamers over different platforms",
"main": "src/main.js", "main": "src/main.js",
"scripts": { "scripts": {

3
src/config/languages.txt Normal file
View file

@ -0,0 +1,3 @@
EN
ES
NL

17
src/css/chat.css
View file

@ -389,21 +389,22 @@ select {
} }
.AdvancedMenuLabel { .AdvancedMenuLabel {
width: 120px;
font-size: 10pt; font-size: 10pt;
padding-right: 5px; padding-right: 5px;
margin-left: 10px;
width: 125px
}
.AdvancedMenuLabel2 {
font-size: 10pt;
padding-right: 5px;
margin-left: 10px;
} }
#SaveAdvancedSettingsButton { #SaveAdvancedSettingsButton {
margin-left: 10px; margin-left: 10px;
} }
/* Big toggle */
/* toggle in label designing */
.toggle { .toggle {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -425,7 +426,6 @@ select {
background-color: var(--main-color2); background-color: var(--main-color2);
left: 5px; left: 5px;
top: 5px; top: 5px;
transition: all 0.2s;
} }
@ -476,7 +476,6 @@ select {
background-color: white; background-color: white;
left: 2px; left: 2px;
top: 2px; top: 2px;
transition: all 0.2s;
} }

39
src/css/home.css
View file

@ -204,3 +204,42 @@ body {
.maximized #max-button { .maximized #max-button {
display: none; display: none;
} }
.language-selector {
-webkit-app-region: no-drag;
position: absolute;
display: inline-block;
background-color: transparent;
cursor: pointer;
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
}
.language-dropdown {
display: none;
position: absolute;
background-color: #fff;
width: 55px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
}
.language-item {
padding: 5px;
cursor: pointer;
background-color: var(--top-bar);
}
.language-item:hover {
/* filter: brightness(150%); */
}
@font-face {
font-family: NotoColorEmojiLimited;
unicode-range: U+1F1E6-1F1FF;
src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

12
src/css/logger.css
View file

@ -1,15 +1,9 @@
table { table {
margin-left: 25px; margin-left: 10px;
margin-right: 25px;
background-color: white; background-color: white;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
} margin-top: 60px;
table,
h1 {
margin-left: 35px !important;
/* Adjust the margin value according to your needs */
} }
th, th,
@ -32,7 +26,7 @@ td {
} }
#logTable { #logTable {
width: 90%; width: 95%;
} }
#Logs { #Logs {

26
src/css/menu.css
View file

@ -35,6 +35,8 @@
display: block; display: block;
width: 100%; width: 100%;
background: var(--main-color1); background: var(--main-color1);
z-index: 1;
position: relative;
} }
.menu .items { .menu .items {
@ -64,19 +66,18 @@
} }
.menu .items .item-active { .menu .items .item-active {
transition: 0.3s;
background: -webkit-linear-gradient(left, var(--main-color2) 10%, var(--main-color2), var(--main-color1) 10%, var(--main-color1) 10%); background: -webkit-linear-gradient(left, var(--main-color2) 10%, var(--main-color2), var(--main-color1) 10%, var(--main-color1) 10%);
color: var(--main-color2); color: var(--main-color2);
transition: all 0.15s ease-out; filter: brightness(90%);
} }
.menu .items .item:hover { .menu .items .item:hover {
cursor: pointer; cursor: pointer;
/* filter: brightness(150%); */
color: var(--main-color2); color: var(--main-color2);
transition: all 0.15s ease-in-out; filter: brightness(120%);
} }
.sidepanel-left { .sidepanel-left {
position: relative; position: relative;
width: 50px; width: 50px;
@ -86,7 +87,6 @@
text-align: center; text-align: center;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
transition: .3s ease-in-out; transition: .3s ease-in-out;
z-index: 1;
} }
.sidepanel-right { .sidepanel-right {
@ -100,8 +100,12 @@
transition: .3s ease-in-out; transition: .3s ease-in-out;
} }
.collapse-menu { .collapse-menu-left {
width: 0px; margin-left: -50px;
}
.collapse-menu-right {
margin-right: -200px;
} }
.sidepanel-left span { .sidepanel-left span {
@ -124,11 +128,11 @@
background-color: var(--main-color3); background-color: var(--main-color3);
color: var(--main-color2); color: var(--main-color2);
justify-content: left; justify-content: left;
top: 0px; top: 32px;
left: 50px; left: 50px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
z-index: 9; z-index: 1;
transition: .3s ease-in-out; transition: .3s ease-in-out;
} }
@ -146,11 +150,11 @@
background-color: var(--main-color3); background-color: var(--main-color3);
color: var(--main-color2); color: var(--main-color2);
justify-content: right; justify-content: right;
top: 0px; top: 32px;
right: 199px; right: 199px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
z-index: 9; z-index: 1;
transition: .3s ease-in-out; transition: .3s ease-in-out;
} }

150
src/css/tabs.css
View file

@ -203,6 +203,11 @@ select {
width: 300px; width: 300px;
} }
.language {
width: 80px;
margin-left: 10px;
}
#AdvancedMenu_mask { #AdvancedMenu_mask {
position: absolute; position: absolute;
top: 0; top: 0;
@ -253,91 +258,151 @@ select {
padding-left: 10px; padding-left: 10px;
} }
input[type="password"] {
background: var(--main-color3);
border: none;
height: 40px;
border-radius: 40px;
width: 300px;
outline: none;
color: var(--main-color2);
font-size: 10pt;
padding-left: 10px;
padding-right: 40px;
/* To make space for the reveal button */
}
input[type="lol"] {
background: var(--main-color3);
border: none;
height: 40px;
border-radius: 40px;
width: 300px;
outline: none;
color: var(--main-color2);
font-size: 10pt;
padding-left: 10px;
padding-right: 40px;
/* To make space for the reveal button */
}
/* Style for the reveal button */
.password-toggle-btn {
position: absolute;
background-color: transparent;
border: none;
cursor: pointer;
left: 450px;
}
/* Hide the default appearance of the button */
.password-toggle-btn::-moz-focus-inner {
border: 0;
}
/* Style the reveal icon (you can use your preferred icon or font) */
.password-toggle-icon {
font-size: 16px;
color: #555;
}
#toasts { #toasts {
position: fixed; position: fixed;
bottom: 10px; bottom: 20px;
right: 10px; /* Adjust the distance from the bottom of the screen */
right: 50%;
/* Center the toasts horizontally */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: center;
z-index: 1; /* Center the toasts horizontally */
transition: all 0.3s ease-in-out; z-index: 999;
} }
.toast { .toast {
background-color: #fff; background-color: #333;
color: white;
border-radius: 5px; border-radius: 5px;
padding: 1rem 2rem; padding: 1rem 2rem;
margin: 0.5rem; margin: 0.5rem;
opacity: 0;
transform: translateY(100%);
animation: toastAnimation 0.5s ease-in-out forwards, toastDisappear 0.5s ease-in-out 9s forwards;
} }
/* Apply different colors based on the toast type */
.toast.info { .toast.info {
color: rebeccapurple; background-color: #3498db;
} }
.toast.success { .toast.success {
color: green; background-color: #2ecc71;
} }
.toast.warning { .toast.warning {
background-color: orange; background-color: #f39c12;
color: white;
} }
.toast.error { .toast.error {
color: red; background-color: #e74c3c;
}
/* CSS animation for the toast appearance */
@keyframes toastAnimation {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* CSS animation for the toast disappearance */
@keyframes toastDisappear {
from {
opacity: 1;
}
to {
opacity: 0;
}
} }
.menu-icon { .menu-icon {
font-size: 17pt; font-size: 17pt;
} }
[tip] .tooltip { .tooltip {
position: fixed; position: absolute;
display: inline-block;
visibility: hidden;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
padding: 5px; padding: 5px;
background: var(--main-color3); background: var(--main-color3);
border-radius: 5px; border-radius: 5px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 1;
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s, visibility 0s; transition: opacity 0.3s, visibility 0s;
color: var(--main-color2); color: var(--main-color2);
z-index: 101;
font-family: 'xxii_avenmedium'; font-family: 'xxii_avenmedium';
} }
[tip]:hover .tooltip { /* .tooltip .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px; width: 120px;
background-color: black; background-color: black;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
padding: 5px 0; padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
} }
.tooltip .tooltiptext::after { .tooltip .tooltiptext::after {
content: ""; content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px; margin-left: -5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
@ -346,8 +411,21 @@ select {
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} } */
input[type=text]:disabled { input[type=text]:disabled {
background: #dddddd; background: #dddddd;
} }
input[type2=text]:disabled {
background: #dddddd;
}
button[type=text]:disabled {
background: #dddddd;
}
div:disabled {
background: #dddddd;
filter: brightness(200%);
}

33
src/css/tts-menu.css
View file

@ -75,29 +75,12 @@ textarea {
margin-top: 40px; margin-top: 40px;
} }
.SaveButton {
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
transition: all 0.15s ease-in-out;
}
.SaveButton:hover {
/* color: var(--main-color1); */
cursor: pointer;
/* filter: brightness(150%); */
}
.SaveButton:active {
color: var(--main-color1);
transform: translateY(4px);
text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
}
.SmallButton { .SmallButton {
color: var(--main-color2); color: var(--main-color2);
width: 50px; width: 50px;
cursor: pointer; cursor: pointer;
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607; text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
transition: all 0.15s ease-in-out; /* transition: all 0.15s ease-in-out; */
text-align: center; text-align: center;
} }
@ -124,16 +107,24 @@ textarea {
border: none; border: none;
font-family: 'xxii_avenmedium'; font-family: 'xxii_avenmedium';
font-size: 14pt; font-size: 14pt;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
/* Add a smooth transition for box-shadow and background-color */
} }
.AdvancedMenuButton:hover { .AdvancedMenuButton:hover {
/* background-color: var(--main-color1); */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
background-color: var(--main-color3);
filter: brightness(150%);
/* Darken the background color on hover */
cursor: pointer; cursor: pointer;
/* filter: brightness(150%); */
} }
.AdvancedMenuButton:active { .AdvancedMenuButton:active {
transform: translateY(4px); transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: var(--main-color3);
/* Reset the background color on click */
} }
.AdvancedMenuIcon { .AdvancedMenuIcon {

2
src/css/volume-slider.css
View file

@ -54,7 +54,7 @@
outline: none; outline: none;
/* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */ /* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */
box-shadow: 0 0 3px rgb(0 0 0 / 10%); box-shadow: 0 0 3px rgb(0 0 0 / 10%);
transition: .3s ease-in-out; /* transition: .3s ease-in-out; */
} }
.slider-container .slider:active::-webkit-slider-thumb, .slider-container .slider:active::-webkit-slider-thumb,

203
src/index.html
View file

@ -27,7 +27,20 @@
<body> <body>
<!--#region title bar --> <!--#region title bar -->
<header id="titlebar"> <header id="titlebar">
<div id="drag-region"> <div id="drag-region">
<div class="language-selector">
<span class="flag-icon" id="selected-flag">🇬🇧</span>
<span id="selected-language">EN</span>
<div class="language-dropdown" id="languageDropdown">
<div class="language-item" language="NL" flag="🇳🇱">🇳🇱
NL</div>
<div class="language-item" language="ES" flag="🇪🇸">🇪🇸
ES</div>
<div class="language-item" language="EN" flag="🇬🇧">🇬🇧
EN</div>
</div>
</div>
<div id="window-controls"> <div id="window-controls">
<div class="button" id="min-button"> <div class="button" id="min-button">
@ -66,7 +79,8 @@
<li class="item" tip="Logs" id="btnLogs"> <li class="item" tip="Logs" id="btnLogs">
<i class="fa fa-clipboard menu-icon"></i> <i class="fa fa-clipboard menu-icon"></i>
</li> </li>
<li class="item" tip="Chat" id="btnBrowsersourceChat"> <li class="item" tip="BrowserSource ChatBubble"
id="btnBrowsersourceChat">
<i class="fa fa-history menu-icon"></i> <i class="fa fa-history menu-icon"></i>
</li> </li>
<li class="item" tip="Vtuber" <li class="item" tip="Vtuber"
@ -79,12 +93,12 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
<div tip="Hide Menu"> <div tip="Hide Menu">
<div class="circle-left"> <div class="circle-left">
<i class="fa fa-cog hide"></i> <i class="fa fa-cog hide"></i>
</div> </div>
</div> </div>
</div>
<!--#endregion --> <!--#endregion -->
<!-- #region Chat, middle section--> <!-- #region Chat, middle section-->
@ -95,36 +109,23 @@
<div id="tstx"> <div id="tstx">
<div> <div>
<div id="TTSSelector"> <div id="TTSSelector">
<h3 class="LabelText">Installed Voices</h3> <h3 class="LabelText">Primary TTS Voice</h3>
<div class="optionrow"> <div class="optionrow">
<select name="installedTTS" <select name="primaryVoice"
id="installedTTS"></select> id="primaryVoice"></select>
<label class="btn active Basiclabel"> <select name="language" class="language"
<input type="radio" name="voiceService" id="primaryLanguage"
id="InternalTTS" /><i tip="Primary language to detect in chat"></select>
class="fa fa-square fa-2x"></i><i <!-- </label> -->
class="fa fa-check-square fa-2x"></i>
</label>
</div> </div>
<h3 class="LabelText">Google Voices</h3> <h3 class="LabelText">Secondary TTS Voice</h3>
<div class="optionrow"> <div class="optionrow">
<select name="voice" id="googleVoice"></select> <select name="secondaryVoice"
<label class="btn active Basiclabel"> id="secondaryVoice"></select>
<input type="radio" name="voiceService" <select name="language" class="language"
id="GoogleTTS" /><i id="secondaryLanguage"
class="fa fa-square fa-2x"></i><i tip="Secondary language to detect in chat"></select>
class="fa fa-check-square fa-2x"></i> <!-- </label> -->
</label>
</div>
<h3 class="LabelText">Amazon Voices</h3>
<div class="optionrow">
<select name="voice" id="amazonVoice"></select>
<label class="btn active Basiclabel">
<input type="radio" name="voiceService"
id="AmazonTTS" /><i
class="fa fa-square fa-2x"></i><i
class="fa fa-check-square fa-2x"></i>
</label>
</div> </div>
</div> </div>
@ -173,8 +174,6 @@
<!-- #region Commands Screen--> <!-- #region Commands Screen-->
<div class="OptionPanel" id="Logs"> <div class="OptionPanel" id="Logs">
<table id="logTable"> <table id="logTable">
<h1>Log Viewer</h1>
<thead> <thead>
<tr> <tr>
<th>Level</th> <th>Level</th>
@ -286,10 +285,18 @@
</div> </div>
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Oauth <div class="AdvancedMenuLabel">Oauth
Token</div><input Token</div>
type="text" <input
type="password"
type2="text"
class="fname inputTwitch" class="fname inputTwitch"
id="TWITCH_OAUTH_TOKEN"> id="TWITCH_OAUTH_TOKEN">
<button
class="password-toggle-btn password-toggle-btn1">
<span
class="password-toggle-icon">👁️</span>
</button>
</input>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME" id="Info_USERNAME"
@ -298,9 +305,15 @@
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Client <div class="AdvancedMenuLabel">Client
ID</div><input ID</div><input
type="text" type="password"
type2="text"
class="fname inputTwitch" class="fname inputTwitch"
id="TWITCH_CLIENT_ID"> id="TWITCH_CLIENT_ID">
<button
class="password-toggle-btn password-toggle-btn2">
<span
class="password-toggle-icon">👁️</span>
</button>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME" id="Info_USERNAME"
@ -309,14 +322,31 @@
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Client <div class="AdvancedMenuLabel">Client
Secret</div><input Secret</div><input
type="text" type="password"
type2="text"
class="fname inputTwitch" class="fname inputTwitch"
id="TWITCH_CLIENT_SECRET"> id="TWITCH_CLIENT_SECRET">
<button
class="password-toggle-btn password-toggle-btn3">
<span
class="password-toggle-icon">👁️</span>
</button>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME" id="Info_USERNAME"
tip="Your Twitch username"></i> tip="Your Twitch username"></i>
</div> </div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Test credentials</div>
<button
class="AdvancedMenuButton"
id="TestTwitchCredentials">Test</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_TWITCH_TEST_CREDENTIALS"
tip="Test Twitch credentials"></i>
</div>
</fieldset> </fieldset>
<fieldset id="AdvancedMenuServer" <fieldset id="AdvancedMenuServer"
class="AdvancedMenu"> class="AdvancedMenu">
@ -336,7 +366,7 @@
<div class="AdvancedMenuLabel">Port</div> <div class="AdvancedMenuLabel">Port</div>
<input <input
type="text" type="text"
class="fname inputTwitch" class="fname inputServer"
id="PORT"> id="PORT">
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
@ -346,6 +376,9 @@
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Use <div class="AdvancedMenuLabel">Use
Vtuber</div> Vtuber</div>
<input type="checkbox"
id="USE_VTUBER"
class="checkbox" />
<label for="USE_VTUBER" <label for="USE_VTUBER"
class="toggle-small "></label> class="toggle-small "></label>
<i <i
@ -356,6 +389,9 @@
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Use <div class="AdvancedMenuLabel">Use
ChatBubble</div> ChatBubble</div>
<input type="checkbox"
id="USE_CHATBUBBLE"
class="checkbox" />
<label for="USE_CHATBUBBLE" <label for="USE_CHATBUBBLE"
class="toggle-small "></label> class="toggle-small "></label>
<i <i
@ -382,9 +418,14 @@
<div class="AdvancedMenuLabel"> <div class="AdvancedMenuLabel">
Access Key</div> Access Key</div>
<input <input
type="text" type="password"
class="fname inputTwitch" type2="text"
id="AMAZON_ACCESS_KEY"> class="fname inputAmazon"
id="AMAZON_ACCESS_KEY"><button
class="password-toggle-btn password-toggle-btn4">
<span
class="password-toggle-icon">👁️</span>
</button>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_ACCESS_KEY" id="Info_AMAZON_ACCESS_KEY"
@ -394,9 +435,14 @@
<div class="AdvancedMenuLabel"> <div class="AdvancedMenuLabel">
Access Secret</div> Access Secret</div>
<input <input
type="text" type="password"
class="fname inputTwitch" type2="text"
id="AMAZON_ACCESS_SECRET"> class="fname inputAmazon"
id="AMAZON_ACCESS_SECRET"><button
class="password-toggle-btn password-toggle-btn5">
<span
class="password-toggle-icon">👁️</span>
</button>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_ACCESS_SECRET" id="Info_AMAZON_ACCESS_SECRET"
@ -432,9 +478,14 @@
<div class="AdvancedMenuLabel"> <div class="AdvancedMenuLabel">
API Key</div> API Key</div>
<input <input
type="text" type="password"
class="fname inputTwitch" type2="text"
id="GOOGLE_API_KEY"> class="fname inputGoogle"
id="GOOGLE_API_KEY"><button
class="password-toggle-btn password-toggle-btn6">
<span
class="password-toggle-icon">👁️</span>
</button>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
id="Info_GOOGLE_APPI_KEY" id="Info_GOOGLE_APPI_KEY"
@ -444,7 +495,7 @@
<div class="AdvancedMenuLabel"> <div class="AdvancedMenuLabel">
Test credentials</div> Test credentials</div>
<button <button
class="AdvancedMenuButton" class="fname inputGoogle AdvancedMenuButton"
id="TestGoogleCredentials">Test</button> id="TestGoogleCredentials">Test</button>
<i <i
class="fa fa-question-circle fa-2x SmallButton" class="fa fa-question-circle fa-2x SmallButton"
@ -485,66 +536,77 @@
<label for="USE_CUSTOM_THEME" <label for="USE_CUSTOM_THEME"
class="toggle-small"> class="toggle-small">
</legend> </legend>
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div
class="AdvancedMenuLabel">Main
Color 1</div>
<input type="color" <input type="color"
id="MAIN_COLOR_1" id="MAIN_COLOR_1"
value="#0000ff"> value="#0000ff">
<div <div
class="AdvancedMenuLabel">Main class="AdvancedMenuLabel2">Main
Color 2</div> Color 1</div>
</div>
<div class="AdvancedMenuRow">
<input type="color" <input type="color"
id="MAIN_COLOR_2" id="MAIN_COLOR_2"
value="#0000ff"> value="#0000ff">
<div <div
class="AdvancedMenuLabel">Main class="AdvancedMenuLabel2">Main
Color 3</div> Color 2</div>
</div>
<div class="AdvancedMenuRow">
<input type="color" <input type="color"
id="MAIN_COLOR_3" id="MAIN_COLOR_3"
value="#0000ff"> value="#0000ff">
<div
class="AdvancedMenuLabel2">Main
Color 3</div>
</div> </div>
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div
class="AdvancedMenuLabel">Main
Color 4</div>
<input type="color" <input type="color"
id="MAIN_COLOR_4" id="MAIN_COLOR_4"
value="#0000ff"> value="#0000ff">
<div <div
class="AdvancedMenuLabel">Top class="AdvancedMenuLabel2">Main
Bar</div> Color 4</div>
</div>
<div class="AdvancedMenuRow">
<input type="color" <input type="color"
id="TOP_BAR" id="TOP_BAR"
value="#0000ff"> value="#0000ff">
<div <div
class="AdvancedMenuLabel">Mid class="AdvancedMenuLabel2">Top
Section</div> Bar</div>
</div>
<div class="AdvancedMenuRow">
<input type="color" <input type="color"
id="MID_SECTION" id="MID_SECTION"
value="#0000ff"> value="#0000ff">
<div
class="AdvancedMenuLabel2">Mid
Section</div>
</div> </div>
<div class="AdvancedMenuRow"> <div class="AdvancedMenuRow">
<div
class="AdvancedMenuLabel">Chat
Bubble Background</div>
<input type="color" <input type="color"
id="CHAT_BUBBLE_BG" id="CHAT_BUBBLE_BG"
value="#0000ff"> value="#0000ff">
<div <div
class="AdvancedMenuLabel">Chat class="AdvancedMenuLabel2">Chat
Bubble Header</div> Bubble Background</div>
</div>
<div class="AdvancedMenuRow">
<input type="color" <input type="color"
id="CHAT_BUBBLE_HEADER" id="CHAT_BUBBLE_HEADER"
value="#0000ff"> value="#0000ff">
<div <div
class="AdvancedMenuLabel">Chat class="AdvancedMenuLabel2">Chat
Bubble Message</div> Bubble Header</div>
</div>
<div class="AdvancedMenuRow">
<input type="color" <input type="color"
id="CHAT_BUBBLE_MESSAGE" id="CHAT_BUBBLE_MESSAGE"
value="#0000ff"> value="#0000ff">
<div
class="AdvancedMenuLabel2">Chat
Bubble Message</div>
</div> </div>
</fieldset> </fieldset>
@ -612,13 +674,12 @@
</ul> </ul>
</section> </section>
</div> </div>
<div tip="Hide Viewers"> </div>
<div tip="Hide Viewers" tip-left>
<div class="circle-right"> <div class="circle-right">
<i class="fa fa-eye hide" aria-hidden="true"></i> <i class="fa fa-eye hide" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div>
<!-- #endregion --> <!-- #endregion -->
</div> </div>
</body> </body>

15
src/js/chat.js
View file

@ -51,10 +51,10 @@ document.body.querySelector('#SendButton').addEventListener('click', () => {
document.body.querySelector('.circle-left').addEventListener('click', () => { document.body.querySelector('.circle-left').addEventListener('click', () => {
const menu = document.body.querySelector('.sidepanel-left'); const menu = document.body.querySelector('.sidepanel-left');
if (menu.classList.contains('collapse-menu')) { if (menu.classList.contains('collapse-menu-left')) {
menu.classList.remove('collapse-menu'); menu.classList.remove('collapse-menu-left');
} else { } else {
menu.classList.add('collapse-menu'); menu.classList.add('collapse-menu-left');
} }
const leftCircle = document.body.querySelector('.circle-left'); const leftCircle = document.body.querySelector('.circle-left');
@ -70,10 +70,10 @@ document.body.querySelector('.circle-left').addEventListener('click', () => {
document.body.querySelector('.circle-right').addEventListener('click', () => { document.body.querySelector('.circle-right').addEventListener('click', () => {
const menu = document.body.querySelector('.sidepanel-right'); const menu = document.body.querySelector('.sidepanel-right');
if (menu.classList.contains('collapse-menu')) { if (menu.classList.contains('collapse-menu-right')) {
menu.classList.remove('collapse-menu'); menu.classList.remove('collapse-menu-right');
} else { } else {
menu.classList.add('collapse-menu'); menu.classList.add('collapse-menu-right');
} }
const leftCircle = document.body.querySelector('.circle-right'); const leftCircle = document.body.querySelector('.circle-right');
@ -175,6 +175,5 @@ document.body.querySelector('#HideThemeCreator').addEventListener('click', () =>
// #region Test/Save TTS // #region Test/Save TTS
document.body.querySelector('#TTSTestButton').addEventListener('click', () => { document.body.querySelector('#TTSTestButton').addEventListener('click', () => {
const text = document.getElementById('TTSTest').value; const text = document.getElementById('TTSTest').value;
console.log(text); sound.playVoice(text, '', 'User', text);
sound.playVoice(text, '', '', text);
}); });

0
src/js/google.js Normal file
View file

181
src/js/renderer.js
View file

@ -7,7 +7,6 @@ const request = require('request');
const langdetect = require('langdetect'); const langdetect = require('langdetect');
const io = require('socket.io-client'); const io = require('socket.io-client');
const socket = io('http://localhost:9000'); // Connect to your Socket.IO server
const fs = require('fs'); const fs = require('fs');
const util = require('util'); const util = require('util');
@ -27,21 +26,21 @@ const googleVoices = fs.readFileSync(path.join(__dirname, './config/googleVoices
// TODO: remove amazon voices txt and use api instead (sakura project has it) // TODO: remove amazon voices txt and use api instead (sakura project has it)
const amazonVoices = fs.readFileSync(path.join(__dirname, './config/amazonVoices.txt')).toString().split('\r\n'); const amazonVoices = fs.readFileSync(path.join(__dirname, './config/amazonVoices.txt')).toString().split('\r\n');
const languagesObject = fs.readFileSync(path.join(__dirname, './config/languages.txt')).toString().split('\r\n');
// html elements // html elements
const root = document.documentElement; const root = document.documentElement;
const ttsSelector = document.body.querySelector('#TTSSelector'); const ttsSelector = document.body.querySelector('#TTSSelector');
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
const amazonVoiceSelect = document.querySelector('#amazonVoice'); // obtain the html reference of the amazon voices comboBox const amazonVoiceSelect = document.querySelector('#amazonVoice'); // obtain the html reference of the amazon voices comboBox
const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
const notificationAudioDevices = document.querySelector('#notificationAudioDevice'); // obtain the html reference of the installedTTS comboBox const notificationAudioDevices = document.querySelector('#notificationAudioDevice'); // obtain the html reference of the installedTTS comboBox
const devicesDropdown = document.querySelector('#devicesDropdown'); const devicesDropdown = document.querySelector('#devicesDropdown');
const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox
const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
// laod local javascript files // laod local javascript files
const chat = require(path.join(__dirname, './js/chat')); const chat = require(path.join(__dirname, './js/chat'));
const Polly = require(path.join(__dirname, './js/amazon'));
const messageTemplates = require(path.join(__dirname, './js/messageTemplates')); const messageTemplates = require(path.join(__dirname, './js/messageTemplates'));
const logger = require(path.join(__dirname, './js/logger')); const logger = require(path.join(__dirname, './js/logger'));
const sound = require(path.join(__dirname, './js/sound')); const sound = require(path.join(__dirname, './js/sound'));
@ -55,15 +54,25 @@ if (envInfo.env) {
notificationSounds = path.join(__dirname, './sounds/notifications'); notificationSounds = path.join(__dirname, './sounds/notifications');
} }
const server = require(path.join(__dirname, './js/server')); const twitch = config.settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : '';
let server;
let socket;
if (config.settings.SERVER.USE_SERVER) {
server = require(path.join(__dirname, './js/server'));
socket = io(`http://localhost:${config.settings.SERVER.PORT}`); // Connect to your Socket.IO server
}
const Polly = config.settings.AMAZON.USE_AMAZON ? require(path.join(__dirname, './js/amazon')) : '';
const google = config.settings.GOOGLE.USE_GOOGLE ? require(path.join(__dirname, './js/amazon')) : '';
const theme = require(path.join(__dirname, './js/theme')); const theme = require(path.join(__dirname, './js/theme'));
const twitch = require(path.join(__dirname, './js/twitch'));
// initialize values // initialize values
config.getGeneralSettings(); config.getGeneralSettings();
config.getTwitchSettings();
config.setCustomThemeToggle(); config.setCustomThemeToggle();
config.setTwitchToggle();
let selectedVoiceIndex; let selectedVoiceIndex;
let selectedEncodingIndex; let selectedEncodingIndex;
@ -115,68 +124,149 @@ async function getAudioDevices() {
}); });
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE; ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
// devicesDropdown.selectedIndex = 0;
// Create an audio context
// audioContext = new (window.AudioContext || window.webkitAudioContext)();
} }
getAudioDevices(); getAudioDevices();
function setLanguagesinSelect(languageSelector, setting) {
let languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox
const languages = Object.keys(languagesObject);
languages.forEach((language) => {
const option = document.createElement('option');
option.value = language;
option.innerHTML = languagesObject[language];
languageSelect.appendChild(option);
});
languageSelect.selectedIndex = setting;
}
setLanguagesinSelect("#primaryLanguage", config.settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX);
setLanguagesinSelect("#secondaryLanguage", config.settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX);
function getInstalledVoices(callback) {
say.getInstalledVoices((err, voices) => { say.getInstalledVoices((err, voices) => {
function setVoicesinSelect(voiceSelector) {
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
const internalTTSHeader = document.createElement('optgroup');
internalTTSHeader.label = "Internal TTS";
voiceSelect.appendChild(internalTTSHeader);
// const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
voices.forEach((voice, i) => { voices.forEach((voice, i) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = i; option.value = i;
option.innerHTML = voice; option.innerHTML = voice;
installedTTS.appendChild(option); // installedTTS.appendChild(option);
internalTTSHeader.appendChild(option);
}); });
installedTTS.selectedIndex = config.settings.TTS.INTERNAL_TTS_VOICE; }
setVoicesinSelect("#primaryVoice");
setVoicesinSelect("#secondaryVoice");
callback();
}); });
async function getGoogleVoices() {
const voices = Object.keys(googleVoices);
await voices.forEach((voice) => {
const option = document.createElement('option');
option.value = voice;
option.innerHTML = googleVoices[voice];
googleVoiceSelect.appendChild(option);
});
googleVoiceSelect.selectedIndex = config.settings.TTS.GOOGLE_VOICE;
} }
getGoogleVoices(); function getAmazonVoices(callback) {
if (!config.settings.AMAZON.USE_AMAZON) {
callback();
return;
}
function setVoicesinSelect(voiceSelector) {
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
const internalTTSHeader = document.createElement('optgroup');
internalTTSHeader.label = "Amazon TTS";
voiceSelect.appendChild(internalTTSHeader);
async function getAmazonVoices() {
const voices = Object.keys(amazonVoices); const voices = Object.keys(amazonVoices);
await voices.forEach((voice) => { voices.forEach((voice) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = voice; option.value = voice;
option.innerHTML = amazonVoices[voice]; option.innerHTML = amazonVoices[voice];
amazonVoiceSelect.appendChild(option); internalTTSHeader.appendChild(option);
}); });
amazonVoiceSelect.selectedIndex = config.settings.TTS.AMAZON_VOICE;
} }
getAmazonVoices(); setVoicesinSelect("#primaryVoice");
setVoicesinSelect("#secondaryVoice");
callback();
}
function getGoogleVoices(callback) {
if (!config.settings.GOOGLE.USE_GOOGLE) {
callback();
return;
}
function setVoicesinSelect(voiceSelector) {
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
const internalTTSHeader = document.createElement('optgroup');
internalTTSHeader.label = "Google TTS";
voiceSelect.appendChild(internalTTSHeader);
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
const voices = Object.keys(googleVoices);
voices.forEach((voice) => {
const option = document.createElement('option');
option.classList.add("option");
option.value = voice;
option.innerHTML = googleVoices[voice];
internalTTSHeader.appendChild(option);
});
}
setVoicesinSelect("#primaryVoice");
setVoicesinSelect("#secondaryVoice");
callback();
}
getGoogleVoices(function () {
getAmazonVoices(function () {
getInstalledVoices(function () {
let primaryVoice = document.querySelector("#primaryVoice");
primaryVoice.selectedIndex = config.settings.TTS.PRIMARY_TTS_VOICE;
let secondaryVoice = document.querySelector("#secondaryVoice");
secondaryVoice.selectedIndex = config.settings.TTS.SECONDARY_TTS_VOICE;
});
});
});
// Small tooltip // Small tooltip
Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => { Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
const tip = document.createElement('div'); const tip = document.createElement('div');
const body = document.querySelector('.container');
const element = el; const element = el;
tip.classList.add('tooltip'); tip.classList.add('tooltip');
tip.classList.add('tooltiptext');
tip.innerText = el.getAttribute('tip'); tip.innerText = el.getAttribute('tip');
tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px' tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px'
})`; })`;
element.appendChild(tip); body.appendChild(tip);
element.onmousemove = (e) => { element.onmousemove = (e) => {
tip.style.left = `${e.pageX}px`; tip.style.left = `${e.x}px`;
tip.style.top = `${e.pageY}px`; tip.style.top = `${e.y}px`;
tip.style.zIndex = 1;
tip.style.visibility = "visible";
};
element.onmouseleave = (e) => {
tip.style.visibility = "hidden";
}; };
}); });
@ -207,6 +297,25 @@ function showPreviewChatMessage() {
showPreviewChatMessage(); showPreviewChatMessage();
function hideText(button, field) {
document.body.querySelector(button).addEventListener('click', () => {
const passwordInput = document.querySelector(field);
if (passwordInput.type === 'password') {
passwordInput.type = 'lol';
} else {
passwordInput.type = 'password';
}
});
}
hideText('.password-toggle-btn1', "#TWITCH_OAUTH_TOKEN");
hideText('.password-toggle-btn2', "#TWITCH_CLIENT_ID");
hideText('.password-toggle-btn3', "#TWITCH_CLIENT_SECRET");
hideText('.password-toggle-btn4', "#AMAZON_ACCESS_KEY");
hideText('.password-toggle-btn5', "#AMAZON_ACCESS_SECRET");
hideText('.password-toggle-btn6', "#GOOGLE_API_KEY");
// Amazon TTS // Amazon TTS
// const polly = new Polly(amazonCredentials); // const polly = new Polly(amazonCredentials);
// const options = { // const options = {

53
src/js/server.js
View file

@ -5,11 +5,40 @@ const path = require('path');
const http = require('http').createServer(app); const http = require('http').createServer(app);
const io = require('socket.io')(http); const io = require('socket.io')(http);
const PORT = 9000; if (!config.settings.SERVER.USE_SERVER) {
return;
}
app.use('/chat', express.static(path.join(__dirname, '../modules/chat'))); const PORT = config.settings.SERVER.PORT;
http.listen(PORT, () => {
if (config.settings.SERVER.USE_VTUBER) {
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/'))); app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));
let vtuber = document.body.querySelector('#BrowsersourceVtuber');
let vtuberframe = document.createElement('iframe');
vtuberframe.class = "frame";
vtuberframe.src = `http://localhost:${PORT}/vtuber`;
vtuberframe.style.width = "100%";
vtuberframe.style.height = "100%";
vtuberframe.frameBorder = 0;
vtuber.appendChild(vtuberframe);
}
if (config.settings.SERVER.USE_CHATBUBBLE) {
app.use('/chat', express.static(path.join(__dirname, '../modules/chat')));
let chat = document.body.querySelector('#BrowsersourceChat');
let chatframe = document.createElement('iframe');
chatframe.class = "frame";
chatframe.src = `http://localhost:${PORT}/chat`;
chatframe.style.width = "100%";
chatframe.style.height = "100%";
chatframe.frameBorder = 0;
chat.appendChild(chatframe);
}
});
// Handle socket connections // Handle socket connections
io.on('connection', (socket) => { io.on('connection', (socket) => {
@ -23,23 +52,3 @@ io.on('connection', (socket) => {
socket.on('disconnect', () => { }); socket.on('disconnect', () => { });
}); });
http.listen(PORT, () => {
let vtuber = document.body.querySelector('#BrowsersourceVtuber');
let vtuberframe = document.createElement('iframe');
vtuberframe.class = "frame";
vtuberframe.src = "http://localhost:9000/vtuber";
vtuberframe.style.width = "100%";
vtuberframe.style.height = "100%";
vtuberframe.frameBorder = 0;
vtuber.appendChild(vtuberframe);
let chat = document.body.querySelector('#BrowsersourceChat');
let chatframe = document.createElement('iframe');
chatframe.class = "frame";
chatframe.src = "http://localhost:9000/chat";
chatframe.style.width = "100%";
chatframe.style.height = "100%";
chatframe.frameBorder = 0;
chat.appendChild(chatframe);
});

230
src/js/settings.js
View file

@ -6,8 +6,31 @@ if (envInfo.env) {
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
} }
document.body.querySelector('#installedTTS').addEventListener('change', () => { document.body.querySelector('#primaryVoice').addEventListener('change', () => {
settings.TTS.INTERNAL_TTS_VOICE = installedTTS.selectedIndex; var select = document.querySelector("#primaryVoice");
settings.TTS.PRIMARY_TTS_VOICE = select.selectedIndex;
settings.TTS.PRIMARY_TTS_NAME = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
document.body.querySelector('#primaryLanguage').addEventListener('change', () => {
var select = document.querySelector("#primaryLanguage");
settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
settings.TTS.PRIMARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
document.body.querySelector('#secondaryVoice').addEventListener('change', () => {
var select = document.querySelector("#secondaryVoice");
settings.TTS.SECONDARY_TTS_VOICE = select.selectedIndex;
settings.TTS.SECONDARY_TTS_NAME = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
document.body.querySelector('#secondaryLanguage').addEventListener('change', () => {
var select = document.querySelector("#secondaryLanguage");
settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
settings.TTS.SECONDARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(resourcesPath, ini.stringify(settings));
}); });
@ -42,6 +65,26 @@ document.body.querySelector('#TWITCH_CLIENT_SECRET').addEventListener('change',
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(resourcesPath, ini.stringify(settings));
}); });
document.body.querySelector('#PORT').addEventListener('change', () => {
settings.SERVER.PORT = document.body.querySelector('#PORT').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
document.body.querySelector('#AMAZON_ACCESS_KEY').addEventListener('change', () => {
settings.AMAZON.ACCESS_KEY = document.body.querySelector('#AMAZON_ACCESS_KEY').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
document.body.querySelector('#AMAZON_ACCESS_SECRET').addEventListener('change', () => {
settings.AMAZON.ACCESS_SECRET = document.body.querySelector('#AMAZON_ACCESS_SECRET').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
document.body.querySelector('#GOOGLE_API_KEY').addEventListener('change', () => {
settings.GOOGLE.API_KEY = document.body.querySelector('#GOOGLE_API_KEY').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
});
// document.body.querySelector('#sliderX').addEventListener('change', () => { // document.body.querySelector('#sliderX').addEventListener('change', () => {
// // TODO: resolve volume control of TTS // // TODO: resolve volume control of TTS
// config.SETTINGS.VOICE_VOLUME; // config.SETTINGS.VOICE_VOLUME;
@ -67,15 +110,41 @@ function getGeneralSettings() {
document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0; document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0;
theme.setTheme(USE_CUSTOM_THEME); theme.setTheme(USE_CUSTOM_THEME);
}
function getTwitchSettings() { // Twitch
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH === true ? 1 : 0; document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH;
document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME; document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME;
document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME; document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME;
document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN; document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN;
document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID; document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID;
document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET; document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET;
// Server
document.body.querySelector('#USE_SERVER').checked = settings.SERVER.USE_SERVER;
document.body.querySelector('#PORT').value = settings.SERVER.PORT;
document.body.querySelector('#USE_VTUBER').checked = settings.SERVER.USE_VTUBER;
showMenuButton("#btnBrowsersourceVtuber", settings.SERVER.USE_VTUBER)
document.body.querySelector('#USE_CHATBUBBLE').checked = settings.SERVER.USE_CHATBUBBLE;
showMenuButton("#btnBrowsersourceChat", settings.SERVER.USE_CHATBUBBLE)
// Amazon
document.body.querySelector('#USE_AMAZON').checked = settings.AMAZON.USE_AMAZON;
document.body.querySelector('#AMAZON_ACCESS_KEY').value = settings.AMAZON.ACCESS_KEY;
document.body.querySelector('#AMAZON_ACCESS_SECRET').value = settings.AMAZON.ACCESS_SECRET;
// Google
document.body.querySelector('#USE_GOOGLE').checked = settings.GOOGLE.USE_GOOGLE;
document.body.querySelector('#GOOGLE_API_KEY').value = settings.GOOGLE.API_KEY;
}
function showMenuButton(menuButton, toggle) {
let option = document.body.querySelector(menuButton);
if (!toggle) {
option.style.display = "none";
} else {
option.style.display = "";
}
} }
const notificationToasts = document.querySelector('#toasts'); // toast messages const notificationToasts = document.querySelector('#toasts'); // toast messages
@ -86,6 +155,19 @@ function createNotification(message = null, type = null) {
notification.classList.add(type); notification.classList.add(type);
notification.innerText = message; notification.innerText = message;
notificationToasts.appendChild(notification); notificationToasts.appendChild(notification);
let notfication = undefined;
let alertSound = "info.mp3";
if (type === "error") {
alertSound = "error.mp3";
}
if (envInfo.env) {
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${alertSound}`));
} else {
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${alertSound}`));
}
notfication.play();
setTimeout(() => notification.remove(), 10000); setTimeout(() => notification.remove(), 10000);
} }
@ -130,14 +212,6 @@ document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () =>
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(resourcesPath, ini.stringify(settings));
}); });
function setTwitchToggle() {
const toggle = document.getElementById('USE_TWITCH').checked;
settings.TWITCH.USE_TWITCH = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputTwitch');
toggleRadio(toggle, inputs);
}
// #region Top bar buttons // #region Top bar buttons
document.body.querySelector('#min-button').addEventListener('click', () => { document.body.querySelector('#min-button').addEventListener('click', () => {
ipcRenderer.send('minimize-window'); ipcRenderer.send('minimize-window');
@ -149,7 +223,6 @@ document.body.querySelector('#max-button').addEventListener('click', () => {
document.body.querySelector('#close-button').addEventListener('click', (event) => { document.body.querySelector('#close-button').addEventListener('click', (event) => {
ipcRenderer.send('close-window'); ipcRenderer.send('close-window');
console.log(event);
}); });
// #endregion // #endregion
@ -158,31 +231,86 @@ document.body.querySelector('#SoundTestButton').addEventListener('click', () =>
sound.playAudio(); sound.playAudio();
}); });
// #region Use twitch toggle logic function toggleTwitch() {
const toggle = settings.TWITCH.USE_TWITCH;
const inputs = document.getElementsByClassName('inputTwitch');
toggleRadio(toggle, inputs);
}
document.body.querySelector('#USE_TWITCH').addEventListener('click', () => { document.body.querySelector('#USE_TWITCH').addEventListener('click', () => {
setTwitchToggle(); const toggle = document.getElementById('USE_TWITCH').checked;
}); settings.TWITCH.USE_TWITCH = toggle;
Array.from(ttsSelector.querySelectorAll('[name="voiceService"]')).forEach((node) => {
node.addEventListener('change', (e) => {
const { target } = e;
if (!target) { return; }
settings.TTS.SELECTED_TTS = target.id;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(resourcesPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputTwitch');
toggleRadio(toggle, inputs);
});
Array.from(ttsSelector.querySelectorAll('select')).forEach((x) => { toggleTwitch();
const element = x;
if (element !== target.parentElement.previousElementSibling) { function toggleGoogle() {
element.disabled = true; const toggle = settings.GOOGLE.USE_GOOGLE;
} else { element.disabled = false; } const inputs = document.getElementsByClassName('inputGoogle');
toggleRadio(toggle, inputs);
}
document.body.querySelector('#USE_GOOGLE').addEventListener('click', () => {
const toggle = document.getElementById('USE_GOOGLE').checked;
settings.GOOGLE.USE_GOOGLE = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputGoogle');
toggleRadio(toggle, inputs);
}); });
toggleGoogle();
function toggleAmazon() {
const toggle = settings.AMAZON.USE_AMAZON;
const inputs = document.getElementsByClassName('inputAmazon');
toggleRadio(toggle, inputs);
}
document.body.querySelector('#USE_AMAZON').addEventListener('click', () => {
const toggle = document.getElementById('USE_AMAZON').checked;
settings.AMAZON.USE_AMAZON = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputAmazon');
toggleRadio(toggle, inputs);
}); });
toggleAmazon();
function toggleServer() {
const toggle = settings.SERVER.USE_SERVER;
const inputs = document.getElementsByClassName('inputServer');
toggleRadio(toggle, inputs);
}
document.body.querySelector('#USE_SERVER').addEventListener('click', () => {
const toggle = document.getElementById('USE_SERVER').checked;
settings.SERVER.USE_SERVER = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputServer');
toggleRadio(toggle, inputs);
});
toggleServer();
document.body.querySelector('#USE_VTUBER').addEventListener('change', () => {
const toggle = document.getElementById('USE_VTUBER').checked;
settings.SERVER.USE_VTUBER = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
showMenuButton("#btnBrowsersourceVtuber", toggle);
});
document.body.querySelector('#USE_CHATBUBBLE').addEventListener('change', () => {
const toggle = document.getElementById('USE_CHATBUBBLE').checked;
settings.SERVER.USE_CHATBUBBLE = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
showMenuButton("#btnBrowsersourceChat", toggle);
}); });
// Get the selected TTS // Get the selected TTS
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.selectedTts}`); const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.TTS.SELECTED_TTS}`);
if (currentlySelectedTTS) { if (currentlySelectedTTS) {
currentlySelectedTTS.checked = true; currentlySelectedTTS.checked = true;
@ -235,11 +363,45 @@ if (settings.AUDIO.TTS_VOLUME) {
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 })); document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
} }
document.body.querySelector('.language-selector').addEventListener('click', () => {
var dropdown = document.body.querySelector('.language-dropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
});
document.body.querySelector('.language-dropdown').addEventListener('mouseleave', () => {
hideDropdown();
});
let languageSelector = document.querySelectorAll(".language-item");
languageSelector.forEach(item => {
item.addEventListener('click', (event) => {
const el = event.target;
// tip.innerText = el.getAttribute('language');
document.getElementById('selected-language').innerText = el.getAttribute('language');
document.getElementById('selected-flag').innerText = el.getAttribute('flag');
hideDropdown();
});
});
function hideDropdown() {
var dropdown = document.body.querySelector('.language-dropdown');
dropdown.style.display = 'none';
}
// let primaryTTSSelector = document.body.querySelector(".optgroup");
// primaryTTSSelector.forEach(item => {
// item.addEventListener('hover', (event) => {
// console.log(event);
// // const optionsElement = document.getElementById(optgroupID);
// // optionsElement.style.display = optionsElement.style.display === "none" ? "block" : "none";
// });
// });
module.exports = { module.exports = {
ini, ini,
settings, settings,
getGeneralSettings, getGeneralSettings,
getTwitchSettings, setCustomThemeToggle
setCustomThemeToggle,
setTwitchToggle,
}; };

13
src/js/sound.js
View file

@ -13,7 +13,6 @@ const playTTS = (ttsData) => new Promise((resolve) => {
console.error(err); console.error(err);
return; return;
} }
console.log('Audio file deleted successfully!');
resolve('finished'); resolve('finished');
}); });
}); });
@ -61,16 +60,16 @@ function playVoice(filteredMessage, logoUrl, username, message) {
trueMessage = filteredMessage; trueMessage = filteredMessage;
currentLogoUrl = logoUrl; currentLogoUrl = logoUrl;
currentUsername = username; currentUsername = username;
let text = '';
let textObject = { "filtered": filteredMessage, "formatted": message }; let textObject = { "filtered": filteredMessage, "formatted": message };
let voice = installedTTS.options[installedTTS.selectedIndex].text; let voice;
const language = langdetect.detect(filteredMessage); const language = langdetect.detect(filteredMessage);
if (language[0].lang === 'en') { if (language[0].lang === config.settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()) {
voice = installedTTS.options[1].text; voice = config.settings.TTS.SECONDARY_TTS_NAME;
text = `${username} said: ${filteredMessage}` textObject.filtered = `${username}: ${filteredMessage}`;
} else { } else {
text = `${username} dice: ${filteredMessage}` voice = config.settings.TTS.PRIMARY_TTS_NAME;
textObject.filtered = `${username}: ${filteredMessage}`;
} }
talk.add(textObject, voice); talk.add(textObject, voice);

1
src/js/theme.js
View file

@ -78,7 +78,6 @@ function setTheme(USE_CUSTOM_THEME) {
document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => { document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => {
const x = document.getElementById('MAIN_COLOR_1').value; const x = document.getElementById('MAIN_COLOR_1').value;
root.style.setProperty('--main-color1-temp', x); root.style.setProperty('--main-color1-temp', x);
console.log("set");
}); });
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => { document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {

1
src/js/voiceQueue.js
View file

@ -5,7 +5,6 @@ let counter = 0;
const speak = (textObject) => new Promise((resolve) => { const speak = (textObject) => new Promise((resolve) => {
// say.setEncoding(Encoding); // say.setEncoding(Encoding);
counter += 1; counter += 1;
console.log(textObject);
let savePath = ''; let savePath = '';
if (envInfo.env) { if (envInfo.env) {

39
src/main.js
View file

@ -31,8 +31,6 @@ async function createWindow() {
icon: path.join(__dirname, '/images/icon.png'), icon: path.join(__dirname, '/images/icon.png'),
width: parseInt(settings.SETTINGS.WIDTH), width: parseInt(settings.SETTINGS.WIDTH),
height: parseInt(settings.SETTINGS.HEIGHT), height: parseInt(settings.SETTINGS.HEIGHT),
minHeight: 800,
minWidth: 600,
x: parseInt(settings.SETTINGS.POSITION_X), x: parseInt(settings.SETTINGS.POSITION_X),
y: parseInt(settings.SETTINGS.POSITION_Y), y: parseInt(settings.SETTINGS.POSITION_Y),
frame: false, frame: false,
@ -44,12 +42,14 @@ async function createWindow() {
}); });
window.loadURL('https://github.com') window.loadURL('https://github.com')
window.loadFile(path.join(__dirname, 'index.html')); window.loadFile(path.join(__dirname, 'index.html'));
if (!app.isPackaged) {
window.webContents.openDevTools(); window.webContents.openDevTools();
}
window.on('close', e => { window.on('close', e => {
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); // load newest settings in case anything changed after starting the program
const bounds = window.getBounds(); const bounds = window.getBounds();
settings.SETTINGS.WIDTH = bounds.width; settings.SETTINGS.WIDTH = bounds.width;
@ -59,7 +59,6 @@ async function createWindow() {
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(resourcesPath, ini.stringify(settings));
}) })
}; };
app.whenReady().then(() => { app.whenReady().then(() => {
@ -117,21 +116,26 @@ async function createIniFile() {
NOTIFICATION_ENABLED: true, NOTIFICATION_ENABLED: true,
POSITION_X: 0, POSITION_X: 0,
POSITION_Y: 0, POSITION_Y: 0,
WIDTH: 600, WIDTH: 1024,
HEIGHT: 800 HEIGHT: 768,
LANGUAGE: "EN"
}, },
TTS: { TTS: {
SELECTED_TTS: "InternalTTS", PRIMARY_TTS_VOICE: 0,
INTERNAL_TTS_VOICE: 0, PRIMARY_TTS_NAME: "",
GOOGLE_VOICE: 0, PRIMARY_TTS_LANGUAGE: "EN",
AMAZON_VOICE: 0 PRIMARY_TTS_LANGUAGE_INDEX: 0,
SECONDARY_TTS_VOICE: 0,
SECONDARY_TTS_NAME: "",
SECONDARY_TTS_LANGUAGE: "EN",
SECONDARY_TTS_LANGUAGE_INDEX: 0
}, },
AUDIO: { AUDIO: {
NOTIFICATION_AUDIO_DEVICE: 0, NOTIFICATION_AUDIO_DEVICE: 0,
NOTIFICATION_SOUND: 0, NOTIFICATION_SOUND: 0,
NOTIFICATION_VOLUME: 100, NOTIFICATION_VOLUME: 100,
SELECTED_TTS_AUDIO_DEVICE: 0, SELECTED_TTS_AUDIO_DEVICE: 0,
TTS_AUDIO_DEVICE: "", TTS_AUDIO_DEVICE: "default",
TTS_VOLUME: 100 TTS_VOLUME: 100
}, },
THEME: { THEME: {
@ -147,16 +151,27 @@ async function createIniFile() {
CHAT_BUBBLE_MESSAGE: "\#b5b5b5", CHAT_BUBBLE_MESSAGE: "\#b5b5b5",
}, },
TWITCH: { TWITCH: {
USE_TWITCH: true, USE_TWITCH: false,
CHANNEL_NAME: "khyretos", CHANNEL_NAME: "khyretos",
USERNAME: "loquendo", USERNAME: "loquendo",
OAUTH_TOKEN: "", OAUTH_TOKEN: "",
CLIENT_ID: "", CLIENT_ID: "",
CLIENT_SECRET: "", CLIENT_SECRET: "",
}, },
SERVER: {
USE_SERVER: false,
PORT: "9000",
USE_VTUBER: false,
USE_CHATBUBBLE: false,
},
AMAZON: { AMAZON: {
USE_TWITCH: false,
ACCESS_KEY: "", ACCESS_KEY: "",
ACCESS_SECRET: "", ACCESS_SECRET: "",
},
GOOGLE: {
USE_GOOGLE: false,
API_KEY: "",
} }
}).then(() => { }).then(() => {
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));

1
src/modules/chat/main.js
View file

@ -63,7 +63,6 @@ function streamText() {
} }
function displayTwitchMessage(logoUrl, username, messageObject) { function displayTwitchMessage(logoUrl, username, messageObject) {
console.log(messageObject);
if (!messageObject) { if (!messageObject) {
return; return;
} }

2
src/modules/vtuber/css/main.css
View file

@ -347,7 +347,7 @@ button.motion::after {
height: 80%; height: 80%;
background-color: red; background-color: red;
overflow: hidden; overflow: hidden;
z-index: -2; z-index: -1;
transform: translate(11%, 11%); transform: translate(11%, 11%);
/* hit-margin: -999px; */ /* hit-margin: -999px; */
} }

BIN
src/sounds/notifications/error.mp3 Normal file
View file

Binary file not shown.

BIN
src/sounds/notifications/info.mp3 Normal file
View file

Binary file not shown.