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',
asar: true,
"extraResource": [
"./src/config/settings.ini",
"./src/config/loquendo.db",
"./src/sounds"
]

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "loquendo-bot",
"version": "2.0.0",
"version": "2.1.0",
"description": "Bot assistant for streamers over different platforms",
"main": "src/main.js",
"scripts": {
@ -45,4 +45,4 @@
"@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
"electron": "25.4.0"
}
}
}

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

39
src/css/home.css
View file

@ -203,4 +203,43 @@ body {
.maximized #max-button {
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 {
margin-left: 25px;
margin-right: 25px;
margin-left: 10px;
background-color: white;
border-collapse: collapse;
width: 100%;
}
table,
h1 {
margin-left: 35px !important;
/* Adjust the margin value according to your needs */
margin-top: 60px;
}
th,
@ -32,7 +26,7 @@ td {
}
#logTable {
width: 90%;
width: 95%;
}
#Logs {

26
src/css/menu.css
View file

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

150
src/css/tabs.css
View file

@ -203,6 +203,11 @@ select {
width: 300px;
}
.language {
width: 80px;
margin-left: 10px;
}
#AdvancedMenu_mask {
position: absolute;
top: 0;
@ -253,91 +258,151 @@ select {
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 {
position: fixed;
bottom: 10px;
right: 10px;
bottom: 20px;
/* Adjust the distance from the bottom of the screen */
right: 50%;
/* Center the toasts horizontally */
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 1;
transition: all 0.3s ease-in-out;
align-items: center;
/* Center the toasts horizontally */
z-index: 999;
}
.toast {
background-color: #fff;
background-color: #333;
color: white;
border-radius: 5px;
padding: 1rem 2rem;
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 {
color: rebeccapurple;
background-color: #3498db;
}
.toast.success {
color: green;
background-color: #2ecc71;
}
.toast.warning {
background-color: orange;
color: white;
background-color: #f39c12;
}
.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 {
font-size: 17pt;
}
[tip] .tooltip {
position: fixed;
.tooltip {
position: absolute;
display: inline-block;
visibility: hidden;
font-size: 12px;
line-height: 20px;
padding: 5px;
background: var(--main-color3);
border-radius: 5px;
visibility: hidden;
opacity: 0;
opacity: 1;
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s, visibility 0s;
color: var(--main-color2);
z-index: 101;
font-family: 'xxii_avenmedium';
}
[tip]:hover .tooltip {
visibility: visible;
opacity: 1;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
/* .tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
@ -346,8 +411,21 @@ select {
.tooltip:hover .tooltiptext {
visibility: visible;
}
} */
input[type=text]:disabled {
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;
}
.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 {
color: var(--main-color2);
width: 50px;
cursor: pointer;
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;
}
@ -124,16 +107,24 @@ textarea {
border: none;
font-family: 'xxii_avenmedium';
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 {
/* 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;
/* filter: brightness(150%); */
}
.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 {

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

@ -54,7 +54,7 @@
outline: none;
/* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */
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,

771
src/index.html
View file

@ -27,7 +27,20 @@
<body>
<!--#region title bar -->
<header id="titlebar">
<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 class="button" id="min-button">
@ -66,7 +79,8 @@
<li class="item" tip="Logs" id="btnLogs">
<i class="fa fa-clipboard menu-icon"></i>
</li>
<li class="item" tip="Chat" id="btnBrowsersourceChat">
<li class="item" tip="BrowserSource ChatBubble"
id="btnBrowsersourceChat">
<i class="fa fa-history menu-icon"></i>
</li>
<li class="item" tip="Vtuber"
@ -79,10 +93,10 @@
</li>
</ul>
</nav>
<div tip="Hide Menu">
<div class="circle-left">
<i class="fa fa-cog hide"></i>
</div>
</div>
<div tip="Hide Menu">
<div class="circle-left">
<i class="fa fa-cog hide"></i>
</div>
</div>
<!--#endregion -->
@ -95,36 +109,23 @@
<div id="tstx">
<div>
<div id="TTSSelector">
<h3 class="LabelText">Installed Voices</h3>
<h3 class="LabelText">Primary TTS Voice</h3>
<div class="optionrow">
<select name="installedTTS"
id="installedTTS"></select>
<label class="btn active Basiclabel">
<input type="radio" name="voiceService"
id="InternalTTS" /><i
class="fa fa-square fa-2x"></i><i
class="fa fa-check-square fa-2x"></i>
</label>
<select name="primaryVoice"
id="primaryVoice"></select>
<select name="language" class="language"
id="primaryLanguage"
tip="Primary language to detect in chat"></select>
<!-- </label> -->
</div>
<h3 class="LabelText">Google Voices</h3>
<h3 class="LabelText">Secondary TTS Voice</h3>
<div class="optionrow">
<select name="voice" id="googleVoice"></select>
<label class="btn active Basiclabel">
<input type="radio" name="voiceService"
id="GoogleTTS" /><i
class="fa fa-square fa-2x"></i><i
class="fa fa-check-square fa-2x"></i>
</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>
<select name="secondaryVoice"
id="secondaryVoice"></select>
<select name="language" class="language"
id="secondaryLanguage"
tip="Secondary language to detect in chat"></select>
<!-- </label> -->
</div>
</div>
@ -173,8 +174,6 @@
<!-- #region Commands Screen-->
<div class="OptionPanel" id="Logs">
<table id="logTable">
<h1>Log Viewer</h1>
<thead>
<tr>
<th>Level</th>
@ -286,344 +285,406 @@
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Oauth
Token</div><input
type="text"
Token</div>
<input
type="password"
type2="text"
class="fname inputTwitch"
id="TWITCH_OAUTH_TOKEN">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME"
tip="Your Twitch username"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Client
ID</div><input
type="text"
class="fname inputTwitch"
id="TWITCH_CLIENT_ID">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME"
tip="Your Twitch username"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Client
Secret</div><input
type="text"
class="fname inputTwitch"
id="TWITCH_CLIENT_SECRET">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME"
tip="Your Twitch username"></i>
</div>
</fieldset>
<fieldset id="AdvancedMenuServer"
class="AdvancedMenu">
<legend class="legendStyle"
tip="Enable/Disable Server">
<img
class="AdvancedMenuIcon"
src="./images/server.svg"
alt>
<input type="checkbox"
id="USE_SERVER"
class="checkbox" />
<label for="USE_SERVER"
class="toggle-small "></label>
</legend>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Port</div>
<input
type="text"
class="fname inputTwitch"
id="PORT">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_PORT"
tip="Port to use to host additional services"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Use
Vtuber</div>
<label for="USE_VTUBER"
class="toggle-small "></label>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_VTUBER"
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Use
ChatBubble</div>
<label for="USE_CHATBUBBLE"
class="toggle-small "></label>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_CHATBUBBLE"
tip="You can use it as a browsersource on http://localhost:PORT/chat"></i>
</div>
</fieldset>
<fieldset id="AdvancedMenuAmazon"
class="AdvancedMenu">
<legend class="legendStyle"
tip="Enable/Disable Amazon">
<img
class="AdvancedMenuIcon"
src="./images/amazon.svg"
alt>
<input type="checkbox"
id="USE_AMAZON"
class="checkbox" />
<label for="USE_AMAZON"
class="toggle-small "></label>
</legend>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Access Key</div>
<input
type="text"
class="fname inputTwitch"
id="AMAZON_ACCESS_KEY">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_ACCESS_KEY"
tip="Amazon Access Key"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Access Secret</div>
<input
type="text"
class="fname inputTwitch"
id="AMAZON_ACCESS_SECRET">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_ACCESS_SECRET"
tip="Amazon Access Secret"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Test credentials</div>
<button
class="AdvancedMenuButton"
id="TestAmazonCredentials">Test</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_TEST_CREDENTIALS"
tip="Test Amazon credentials"></i>
</div>
</fieldset>
<fieldset id="AdvancedMenuGoogle"
class="AdvancedMenu">
<legend class="legendStyle"
tip="Enable/Disable Google service">
<img
class="AdvancedMenuIcon"
src="./images/google.svg"
alt>
<input type="checkbox"
id="USE_GOOGLE"
class="checkbox" />
<label for="USE_GOOGLE"
class="toggle-small "></label>
</legend>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
API Key</div>
<input
type="text"
class="fname inputTwitch"
id="GOOGLE_API_KEY">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_GOOGLE_APPI_KEY"
tip="Google API Key"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Test credentials</div>
<button
class="AdvancedMenuButton"
id="TestGoogleCredentials">Test</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_GOOGLE_TEST_CREDENTIALS"
tip="Test Google credentials"></i>
</div>
</fieldset>
</div>
</div>
<div id="ThemeCreator_mask">
<div class="SaveConfig">
class="password-toggle-btn password-toggle-btn1">
<span
class="password-toggle-icon">👁️</span>
</button>
</input>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME"
tip="Your Twitch username"></i>
</div>
<div class="AdvancedMenuRow">
<button class="AdvancedMenuButton"
id="HideThemeCreator">Close
Theme Creator</button>
<label class="testLabel Basiclabel"></label>
<div class="AdvancedMenuLabel">Client
ID</div><input
type="password"
type2="text"
class="fname inputTwitch"
id="TWITCH_CLIENT_ID">
<button
class="password-toggle-btn password-toggle-btn2">
<span
class="password-toggle-icon">👁️</span>
</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME"
tip="Your Twitch username"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Client
Secret</div><input
type="password"
type2="text"
class="fname inputTwitch"
id="TWITCH_CLIENT_SECRET">
<button
class="password-toggle-btn password-toggle-btn3">
<span
class="password-toggle-icon">👁️</span>
</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_USERNAME"
tip="Your Twitch username"></i>
</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 id="AdvancedMenuServer"
class="AdvancedMenu">
<legend class="legendStyle"
tip="Enable/Disable Server">
<img
class="AdvancedMenuIcon"
src="./images/server.svg"
alt>
<input type="checkbox"
id="USE_SERVER"
class="checkbox" />
<label for="USE_SERVER"
class="toggle-small "></label>
</legend>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Port</div>
<input
type="text"
class="fname inputServer"
id="PORT">
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_PORT"
tip="Port to use to host additional services"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Use
Vtuber</div>
<input type="checkbox"
id="USE_VTUBER"
class="checkbox" />
<label for="USE_VTUBER"
class="toggle-small "></label>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_VTUBER"
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">Use
ChatBubble</div>
<input type="checkbox"
id="USE_CHATBUBBLE"
class="checkbox" />
<label for="USE_CHATBUBBLE"
class="toggle-small "></label>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_CHATBUBBLE"
tip="You can use it as a browsersource on http://localhost:PORT/chat"></i>
</div>
</fieldset>
<fieldset id="AdvancedMenuAmazon"
class="AdvancedMenu">
<legend class="legendStyle"
tip="Enable/Disable Amazon">
<img
class="AdvancedMenuIcon"
src="./images/amazon.svg"
alt>
<input type="checkbox"
id="USE_AMAZON"
class="checkbox" />
<label for="USE_AMAZON"
class="toggle-small "></label>
</legend>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Access Key</div>
<input
type="password"
type2="text"
class="fname inputAmazon"
id="AMAZON_ACCESS_KEY"><button
class="password-toggle-btn password-toggle-btn4">
<span
class="password-toggle-icon">👁️</span>
</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_ACCESS_KEY"
tip="Amazon Access Key"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Access Secret</div>
<input
type="password"
type2="text"
class="fname inputAmazon"
id="AMAZON_ACCESS_SECRET"><button
class="password-toggle-btn password-toggle-btn5">
<span
class="password-toggle-icon">👁️</span>
</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_ACCESS_SECRET"
tip="Amazon Access Secret"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Test credentials</div>
<button
class="AdvancedMenuButton"
id="TestAmazonCredentials">Test</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_AMAZON_TEST_CREDENTIALS"
tip="Test Amazon credentials"></i>
</div>
</fieldset>
<fieldset id="AdvancedMenuGoogle"
class="AdvancedMenu">
<legend class="legendStyle"
tip="Enable/Disable Google service">
<img
class="AdvancedMenuIcon"
src="./images/google.svg"
alt>
<input type="checkbox"
id="USE_GOOGLE"
class="checkbox" />
<label for="USE_GOOGLE"
class="toggle-small "></label>
</legend>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
API Key</div>
<input
type="password"
type2="text"
class="fname inputGoogle"
id="GOOGLE_API_KEY"><button
class="password-toggle-btn password-toggle-btn6">
<span
class="password-toggle-icon">👁️</span>
</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_GOOGLE_APPI_KEY"
tip="Google API Key"></i>
</div>
<div class="AdvancedMenuRow">
<div class="AdvancedMenuLabel">
Test credentials</div>
<button
class="fname inputGoogle AdvancedMenuButton"
id="TestGoogleCredentials">Test</button>
<i
class="fa fa-question-circle fa-2x SmallButton"
id="Info_GOOGLE_TEST_CREDENTIALS"
tip="Test Google credentials"></i>
</div>
</fieldset>
</div>
</div>
<div id="ThemeCreator_mask">
<div class="SaveConfig">
<div class="AdvancedMenuRow">
<button class="AdvancedMenuButton"
id="HideThemeCreator">Close
Theme Creator</button>
<label class="testLabel Basiclabel"></label>
</div>
<div id="mini-container">
<div id="mini-top-bar">
<div id="mini-container">
<div id="mini-top-bar">
</div>
<div id="mini-main">
<div id="mini-left"></div>
<div id="mini-mid"></div>
<div id="mini-right"></div>
</div>
</div>
<fieldset>
<legend id="legendStyle"
tip="Enable/Disable Custom Theme">
<svg width="24" height="24"
viewBox="0 0 24 24"><path
d="M4 21.832c4.587.38 2.944-4.493 7.188-4.538l1.838 1.534c.458 5.538-6.315 6.773-9.026 3.004zm14.065-7.115c1.427-2.239 5.847-9.749 5.847-9.749.352-.623-.43-1.273-.976-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.039 3.995-2.81zm-11.999 3.876c.666-1.134 1.748-2.977 4.447-3.262.434-2.087.607-3.3 2.547-5.112 1.373-1.282 4.938-4.409 7.021-6.229-1-2.208-4.141-4.023-8.178-3.99-6.624.055-11.956 5.465-11.903 12.092.023 2.911 1.081 5.571 2.82 7.635 1.618.429 2.376.348 3.246-1.134zm6.952-15.835c1.102-.006 2.005.881 2.016 1.983.004 1.103-.882 2.009-1.986 2.016-1.105.009-2.008-.88-2.014-1.984-.013-1.106.876-2.006 1.984-2.015zm-5.997 2.001c1.102-.01 2.008.877 2.012 1.983.012 1.106-.88 2.005-1.98 2.016-1.106.007-2.009-.881-2.016-1.988-.009-1.103.877-2.004 1.984-2.011zm-2.003 5.998c1.106-.007 2.01.882 2.016 1.985.01 1.104-.88 2.008-1.986 2.015-1.105.008-2.005-.88-2.011-1.985-.011-1.105.879-2.004 1.981-2.015zm10.031 8.532c.021 2.239-.882 3.718-1.682 4.587l-.046.044c5.255-.591 9.062-4.304 6.266-7.889-1.373 2.047-2.534 2.442-4.538 3.258z" /></svg>
<input type="checkbox"
id="USE_CUSTOM_THEME"
class="checkbox" />
<label for="USE_CUSTOM_THEME"
class="toggle-small">
</legend>
<div class="AdvancedMenuRow">
<input type="color"
id="MAIN_COLOR_1"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Main
Color 1</div>
</div>
<div id="mini-main">
<div id="mini-left"></div>
<div id="mini-mid"></div>
<div id="mini-right"></div>
<div class="AdvancedMenuRow">
<input type="color"
id="MAIN_COLOR_2"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Main
Color 2</div>
</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="MAIN_COLOR_3"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Main
Color 3</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="MAIN_COLOR_4"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Main
Color 4</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="TOP_BAR"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Top
Bar</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="MID_SECTION"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Mid
Section</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="CHAT_BUBBLE_BG"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Chat
Bubble Background</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="CHAT_BUBBLE_HEADER"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Chat
Bubble Header</div>
</div>
<div class="AdvancedMenuRow">
<input type="color"
id="CHAT_BUBBLE_MESSAGE"
value="#0000ff">
<div
class="AdvancedMenuLabel2">Chat
Bubble Message</div>
</div>
</fieldset>
<fieldset>
<legend id="legendStyle"
tip="Enable/Disable Custom Theme">
<svg width="24" height="24"
viewBox="0 0 24 24"><path
d="M4 21.832c4.587.38 2.944-4.493 7.188-4.538l1.838 1.534c.458 5.538-6.315 6.773-9.026 3.004zm14.065-7.115c1.427-2.239 5.847-9.749 5.847-9.749.352-.623-.43-1.273-.976-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.039 3.995-2.81zm-11.999 3.876c.666-1.134 1.748-2.977 4.447-3.262.434-2.087.607-3.3 2.547-5.112 1.373-1.282 4.938-4.409 7.021-6.229-1-2.208-4.141-4.023-8.178-3.99-6.624.055-11.956 5.465-11.903 12.092.023 2.911 1.081 5.571 2.82 7.635 1.618.429 2.376.348 3.246-1.134zm6.952-15.835c1.102-.006 2.005.881 2.016 1.983.004 1.103-.882 2.009-1.986 2.016-1.105.009-2.008-.88-2.014-1.984-.013-1.106.876-2.006 1.984-2.015zm-5.997 2.001c1.102-.01 2.008.877 2.012 1.983.012 1.106-.88 2.005-1.98 2.016-1.106.007-2.009-.881-2.016-1.988-.009-1.103.877-2.004 1.984-2.011zm-2.003 5.998c1.106-.007 2.01.882 2.016 1.985.01 1.104-.88 2.008-1.986 2.015-1.105.008-2.005-.88-2.011-1.985-.011-1.105.879-2.004 1.981-2.015zm10.031 8.532c.021 2.239-.882 3.718-1.682 4.587l-.046.044c5.255-.591 9.062-4.304 6.266-7.889-1.373 2.047-2.534 2.442-4.538 3.258z" /></svg>
<input type="checkbox"
id="USE_CUSTOM_THEME"
class="checkbox" />
<label for="USE_CUSTOM_THEME"
class="toggle-small">
</legend>
<div class="AdvancedMenuRow">
<div
class="AdvancedMenuLabel">Main
Color 1</div>
<input type="color"
id="MAIN_COLOR_1"
value="#0000ff">
<div
class="AdvancedMenuLabel">Main
Color 2</div>
<input type="color"
id="MAIN_COLOR_2"
value="#0000ff">
<div
class="AdvancedMenuLabel">Main
Color 3</div>
<input type="color"
id="MAIN_COLOR_3"
value="#0000ff">
</div>
<div class="AdvancedMenuRow">
<div
class="AdvancedMenuLabel">Main
Color 4</div>
<input type="color"
id="MAIN_COLOR_4"
value="#0000ff">
<div
class="AdvancedMenuLabel">Top
Bar</div>
<input type="color"
id="TOP_BAR"
value="#0000ff">
<div
class="AdvancedMenuLabel">Mid
Section</div>
<input type="color"
id="MID_SECTION"
value="#0000ff">
</div>
<div class="AdvancedMenuRow">
<div
class="AdvancedMenuLabel">Chat
Bubble Background</div>
<input type="color"
id="CHAT_BUBBLE_BG"
value="#0000ff">
<div
class="AdvancedMenuLabel">Chat
Bubble Header</div>
<input type="color"
id="CHAT_BUBBLE_HEADER"
value="#0000ff">
<div
class="AdvancedMenuLabel">Chat
Bubble Message</div>
<input type="color"
id="CHAT_BUBBLE_MESSAGE"
value="#0000ff">
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!--#endregion -->
<!-- #region Main chat box-->
<div class="OptionPanel show" id="Chat">
<div id="chatBox" class="message-window">
</div>
<!-- User input box-->
<div id="userInput" class="chat-input">
<!-- User text input-->
<input id="textInput" class="input-box"
type="text" name="msg"
placeholder="Tap 'Enter' to send a message">
<!-- Send button-->
<button class="SmallButton" id="SendButton">
<i class="fa fa-play-circle fa-2x"
aria-hidden="true"></i>
</button>
</div>
</div>
<!--#endregion -->
</div>
<!--#endregion -->
<!-- #region Viewer list, right section-->
<div class="sidepanel-right">
<div class="viewer-list">
<div class="tabx-bar">
<a class="tabx" href="#"
data-text="Twitch">
<img class="tab"
src="./images/twitch.svg" alt=" ">
</a>
</div>
<section id="content1">
<h1 class="titles">Moderators</h1>
<ul class="no-bullets" id="moderators">
</ul>
<h1 class="titles">Viewers</h1>
<ul class="no-bullets" id="viewers">
</ul>
</section>
<section id="content2">
<ul class="no-bullets">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</section>
<section id="content3">
<ul class="no-bullets">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</div>
<div tip="Hide Viewers">
<div class="circle-right">
<i class="fa fa-eye hide" aria-hidden="true"></i>
</div>
<!-- #region Main chat box-->
<div class="OptionPanel show" id="Chat">
<div id="chatBox" class="message-window">
</div>
<!-- User input box-->
<div id="userInput" class="chat-input">
<!-- User text input-->
<input id="textInput" class="input-box"
type="text" name="msg"
placeholder="Tap 'Enter' to send a message">
<!-- Send button-->
<button class="SmallButton" id="SendButton">
<i class="fa fa-play-circle fa-2x"
aria-hidden="true"></i>
</button>
</div>
</div>
<!-- #endregion -->
</div>
</body>
<!-- #region js scripts -->
<script src="./js/renderer.js"></script>
<!--#endregion -->
<!--#endregion -->
</html>
</div>
<!--#endregion -->
<!-- #region Viewer list, right section-->
<div class="sidepanel-right">
<div class="viewer-list">
<div class="tabx-bar">
<a class="tabx" href="#"
data-text="Twitch">
<img class="tab"
src="./images/twitch.svg" alt=" ">
</a>
</div>
<section id="content1">
<h1 class="titles">Moderators</h1>
<ul class="no-bullets" id="moderators">
</ul>
<h1 class="titles">Viewers</h1>
<ul class="no-bullets" id="viewers">
</ul>
</section>
<section id="content2">
<ul class="no-bullets">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</section>
<section id="content3">
<ul class="no-bullets">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</div>
</div>
<div tip="Hide Viewers" tip-left>
<div class="circle-right">
<i class="fa fa-eye hide" aria-hidden="true"></i>
</div>
</div>
<!-- #endregion -->
</div>
</body>
<!-- #region js scripts -->
<script src="./js/renderer.js"></script>
<!--#endregion -->
</html>

15
src/js/chat.js
View file

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

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

215
src/js/renderer.js
View file

@ -7,7 +7,6 @@ const request = require('request');
const langdetect = require('langdetect');
const io = require('socket.io-client');
const socket = io('http://localhost:9000'); // Connect to your Socket.IO server
const fs = require('fs');
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)
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
const root = document.documentElement;
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 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 devicesDropdown = document.querySelector('#devicesDropdown');
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
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 logger = require(path.join(__dirname, './js/logger'));
const sound = require(path.join(__dirname, './js/sound'));
@ -55,15 +54,25 @@ if (envInfo.env) {
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 twitch = require(path.join(__dirname, './js/twitch'));
// initialize values
config.getGeneralSettings();
config.getTwitchSettings();
config.setCustomThemeToggle();
config.setTwitchToggle();
let selectedVoiceIndex;
let selectedEncodingIndex;
@ -115,68 +124,149 @@ async function getAudioDevices() {
});
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
// devicesDropdown.selectedIndex = 0;
// Create an audio context
// audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
getAudioDevices();
say.getInstalledVoices((err, voices) => {
voices.forEach((voice, i) => {
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 = i;
option.innerHTML = voice;
option.value = language;
option.innerHTML = languagesObject[language];
installedTTS.appendChild(option);
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) => {
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) => {
const option = document.createElement('option');
option.value = i;
option.innerHTML = voice;
// installedTTS.appendChild(option);
internalTTSHeader.appendChild(option);
});
}
setVoicesinSelect("#primaryVoice");
setVoicesinSelect("#secondaryVoice");
callback();
});
}
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);
const voices = Object.keys(amazonVoices);
voices.forEach((voice) => {
const option = document.createElement('option');
option.value = voice;
option.innerHTML = amazonVoices[voice];
internalTTSHeader.appendChild(option);
});
}
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;
});
});
installedTTS.selectedIndex = config.settings.TTS.INTERNAL_TTS_VOICE;
});
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();
async function getAmazonVoices() {
const voices = Object.keys(amazonVoices);
await voices.forEach((voice) => {
const option = document.createElement('option');
option.value = voice;
option.innerHTML = amazonVoices[voice];
amazonVoiceSelect.appendChild(option);
});
amazonVoiceSelect.selectedIndex = config.settings.TTS.AMAZON_VOICE;
}
getAmazonVoices();
// Small tooltip
Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
const tip = document.createElement('div');
const body = document.querySelector('.container');
const element = el;
tip.classList.add('tooltip');
tip.classList.add('tooltiptext');
tip.innerText = el.getAttribute('tip');
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) => {
tip.style.left = `${e.pageX}px`;
tip.style.top = `${e.pageY}px`;
tip.style.left = `${e.x}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();
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
// const polly = new Polly(amazonCredentials);
// const options = {
@ -222,4 +331,4 @@ showPreviewChatMessage();
// }
// audioStream.pipe(fileStream);
// return 1;
// });
// });

55
src/js/server.js
View file

@ -5,10 +5,39 @@ const path = require('path');
const http = require('http').createServer(app);
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')));
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));
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/')));
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
io.on('connection', (socket) => {
@ -23,23 +52,3 @@ io.on('connection', (socket) => {
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);
});

228
src/js/settings.js
View file

@ -6,8 +6,31 @@ if (envInfo.env) {
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
}
document.body.querySelector('#installedTTS').addEventListener('change', () => {
settings.TTS.INTERNAL_TTS_VOICE = installedTTS.selectedIndex;
document.body.querySelector('#primaryVoice').addEventListener('change', () => {
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));
});
@ -42,6 +65,26 @@ document.body.querySelector('#TWITCH_CLIENT_SECRET').addEventListener('change',
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', () => {
// // TODO: resolve volume control of TTS
// 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;
theme.setTheme(USE_CUSTOM_THEME);
}
function getTwitchSettings() {
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH === true ? 1 : 0;
// Twitch
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_USERNAME').value = settings.TWITCH.USERNAME;
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_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
@ -86,6 +155,19 @@ function createNotification(message = null, type = null) {
notification.classList.add(type);
notification.innerText = message;
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);
}
@ -130,14 +212,6 @@ document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () =>
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
document.body.querySelector('#min-button').addEventListener('click', () => {
ipcRenderer.send('minimize-window');
@ -149,7 +223,6 @@ document.body.querySelector('#max-button').addEventListener('click', () => {
document.body.querySelector('#close-button').addEventListener('click', (event) => {
ipcRenderer.send('close-window');
console.log(event);
});
// #endregion
@ -158,31 +231,86 @@ document.body.querySelector('#SoundTestButton').addEventListener('click', () =>
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', () => {
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);
});
Array.from(ttsSelector.querySelectorAll('[name="voiceService"]')).forEach((node) => {
node.addEventListener('change', (e) => {
const { target } = e;
toggleTwitch();
if (!target) { return; }
function toggleGoogle() {
const toggle = settings.GOOGLE.USE_GOOGLE;
const inputs = document.getElementsByClassName('inputGoogle');
toggleRadio(toggle, inputs);
}
settings.TTS.SELECTED_TTS = target.id;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
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);
});
Array.from(ttsSelector.querySelectorAll('select')).forEach((x) => {
const element = x;
if (element !== target.parentElement.previousElementSibling) {
element.disabled = true;
} else { element.disabled = false; }
});
});
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
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.selectedTts}`);
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.TTS.SELECTED_TTS}`);
if (currentlySelectedTTS) {
currentlySelectedTTS.checked = true;
@ -235,11 +363,45 @@ if (settings.AUDIO.TTS_VOLUME) {
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 = {
ini,
settings,
getGeneralSettings,
getTwitchSettings,
setCustomThemeToggle,
setTwitchToggle,
setCustomThemeToggle
};

13
src/js/sound.js
View file

@ -13,7 +13,6 @@ const playTTS = (ttsData) => new Promise((resolve) => {
console.error(err);
return;
}
console.log('Audio file deleted successfully!');
resolve('finished');
});
});
@ -61,16 +60,16 @@ function playVoice(filteredMessage, logoUrl, username, message) {
trueMessage = filteredMessage;
currentLogoUrl = logoUrl;
currentUsername = username;
let text = '';
let textObject = { "filtered": filteredMessage, "formatted": message };
let voice = installedTTS.options[installedTTS.selectedIndex].text;
let voice;
const language = langdetect.detect(filteredMessage);
if (language[0].lang === 'en') {
voice = installedTTS.options[1].text;
text = `${username} said: ${filteredMessage}`
if (language[0].lang === config.settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()) {
voice = config.settings.TTS.SECONDARY_TTS_NAME;
textObject.filtered = `${username}: ${filteredMessage}`;
} else {
text = `${username} dice: ${filteredMessage}`
voice = config.settings.TTS.PRIMARY_TTS_NAME;
textObject.filtered = `${username}: ${filteredMessage}`;
}
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', () => {
const x = document.getElementById('MAIN_COLOR_1').value;
root.style.setProperty('--main-color1-temp', x);
console.log("set");
});
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) => {
// say.setEncoding(Encoding);
counter += 1;
console.log(textObject);
let savePath = '';
if (envInfo.env) {

41
src/main.js
View file

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

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

@ -68,7 +68,7 @@ body {
background-repeat: no-repeat;
}
input[type='vslider'] > button.slider {
input[type='vslider']>button.slider {
background-size: 100% auto;
border-radius: 0;
width: 275%;
@ -86,11 +86,11 @@ button {
background-color: transparent;
}
#meter-microphone > button.slider {
#meter-microphone>button.slider {
background-image: url('../png/controls/meters/left.png');
}
#meter-delay > button.slider {
#meter-delay>button.slider {
background-image: url('../png/controls/meters/right.png');
}
@ -259,7 +259,7 @@ button.motion {
}
.test {
width:50px;
width: 50px;
height: 50px;
background-size: cover;
overflow: hidden;
@ -268,7 +268,7 @@ button.motion {
.avatar-change {
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
background-size: cover;
width:50px;
width: 50px;
height: 50px;
position: relative;
left: -5px;
@ -277,7 +277,7 @@ button.motion {
.border {
background-image: url('../png/controls/buttons/top/motion/border.png');
background-size: cover;
width:50px;
width: 50px;
height: 50px;
position: relative;
top: -50px;
@ -298,7 +298,7 @@ button.motion {
height: 50px;
width: 50px;
background-position: 50% 50%;
background-color: yellow;
background-color: yellow;
}
.mouth-transitionx {
@ -308,12 +308,12 @@ button.motion {
height: 50px;
width: 50px;
background-position: 50% 50%;
background-color: red;
background-color: red;
}
#mouth-transition::before {
background-color: red;
background-color: red;
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
}
@ -338,16 +338,16 @@ button.motion::before {
height: 50px;
width: 50px;
pointer-events: none;
background-color: yellow;
background-color: yellow;
}
button.motion::after {
position: absolute;
width: 80%;
height: 80%;
background-color: red;
background-color: red;
overflow: hidden;
z-index: -2;
z-index: -1;
transform: translate(11%, 11%);
/* hit-margin: -999px; */
}
@ -383,4 +383,4 @@ button.motion::after {
menu.popup {
/* box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.692); */
}
}

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.