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

refactor an lots of changes

Browse source
This commit is contained in:
Khyretos 2023-08-08 06:46:21 +02:00
parent 7e733233ab
commit 039a16711f
29 changed files with 1802 additions and 1627 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "loquendo-bot", "name": "loquendo-bot",
"version": "2.0.0", "version": "2.1.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "loquendo-bot", "name": "loquendo-bot",
"version": "2.0.0", "version": "2.1.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"axios": "^1.4.0", "axios": "^1.4.0",
@ -15,6 +15,7 @@
"franc": "^6.1.0", "franc": "^6.1.0",
"i18next-electron-language-detector": "^0.0.10", "i18next-electron-language-detector": "^0.0.10",
"ini": "^2.0.0", "ini": "^2.0.0",
"kill-port": "^2.0.1",
"langdetect": "^0.2.1", "langdetect": "^0.2.1",
"node-google-tts-api": "^1.1.1", "node-google-tts-api": "^1.1.1",
"querystring": "^0.2.1", "querystring": "^0.2.1",
@ -3331,6 +3332,11 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/get-them-args": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/get-them-args/-/get-them-args-1.3.2.tgz",
"integrity": "sha512-LRn8Jlk+DwZE4GTlDbT3Hikd1wSHgLMme/+7ddlqKd7ldwR6LjJgTVWzBnR01wnYGe4KgrXjg287RaI22UHmAw=="
},
"node_modules/getpass": { "node_modules/getpass": {
"version": "0.1.7", "version": "0.1.7",
"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
@ -4013,6 +4019,18 @@
"json-buffer": "3.0.1" "json-buffer": "3.0.1"
} }
}, },
"node_modules/kill-port": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/kill-port/-/kill-port-2.0.1.tgz",
"integrity": "sha512-e0SVOV5jFo0mx8r7bS29maVWp17qGqLBZ5ricNSajON6//kmb7qqqNnml4twNE8Dtj97UQD+gNFOaipS/q1zzQ==",
"dependencies": {
"get-them-args": "1.3.2",
"shell-exec": "1.0.2"
},
"bin": {
"kill-port": "cli.js"
}
},
"node_modules/kuler": { "node_modules/kuler": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz", "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
@ -5899,6 +5917,11 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/shell-exec": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/shell-exec/-/shell-exec-1.0.2.tgz",
"integrity": "sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg=="
},
"node_modules/side-channel": { "node_modules/side-channel": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",

1
package.json
View file

@ -23,6 +23,7 @@
"franc": "^6.1.0", "franc": "^6.1.0",
"i18next-electron-language-detector": "^0.0.10", "i18next-electron-language-detector": "^0.0.10",
"ini": "^2.0.0", "ini": "^2.0.0",
"kill-port": "^2.0.1",
"langdetect": "^0.2.1", "langdetect": "^0.2.1",
"node-google-tts-api": "^1.1.1", "node-google-tts-api": "^1.1.1",
"querystring": "^0.2.1", "querystring": "^0.2.1",

4
src/css/chat.css
View file

@ -369,7 +369,7 @@ select {
.AdvancedMenu { .AdvancedMenu {
border: 1px var(--main-color2) solid; border: 1px var(--main-color2) solid;
margin-top: 10px; margin-top: 10px;
width: 300px; min-width: 555px;
border-radius: 5px; border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
@ -377,6 +377,8 @@ select {
.legendStyle { .legendStyle {
margin-left: 1em; margin-left: 1em;
padding: 0.2em 0.8em; padding: 0.2em 0.8em;
display: flex;
align-items: center;
} }
.AdvancedMenuRow { .AdvancedMenuRow {

6
src/css/logger.css
View file

@ -14,15 +14,15 @@ td {
} }
.info { .info {
background-color: lightblue; background-color: lightblue !important;
} }
.warn { .warn {
background-color: yellow; background-color: #f39c12 !important;
} }
.error { .error {
background-color: lightcoral; background-color: #e74c3c !important;
} }
#logTable { #logTable {

1
src/css/menu.css
View file

@ -28,6 +28,7 @@
.OptionPanel.show { .OptionPanel.show {
display: block; display: block;
overflow: auto;
} }
.menu { .menu {

247
src/css/sliders.css
View file

@ -1,184 +1,179 @@
/*generated with Input range slider CSS style generator (version 20211225) /*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/ https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider { input[type='range'].styled-slider {
/* height: 500px; */ /* height: 500px; */
background: transparent; background: transparent;
-webkit-appearance: none; -webkit-appearance: none;
width: 300px; width: 300px;
} }
/*progress support*/ /*progress support*/
input[type=range].styled-slider.slider-progress1 { input[type='range'].styled-slider.slider-progress1 {
--range: calc(var(--max) - var(--min)); --range: calc(var(--max) - var(--min));
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range)); --ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
--sx: calc(0.5* 2em + var(--ratio) * (100% - 2em)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
} }
input[type=range].styled-slider.slider-progress2 { input[type='range'].styled-slider.slider-progress2 {
--range: calc(var(--max) - var(--min)); --range: calc(var(--max) - var(--min));
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range)); --ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
} }
input[type=range].styled-slider.slider-progress3 { input[type='range'].styled-slider.slider-progress3 {
--range: calc(var(--max) - var(--min)); --range: calc(var(--max) - var(--min));
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range)); --ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
} }
input[type=range].styled-slider.slider-progress4 { input[type='range'].styled-slider.slider-progress4 {
--range: calc(var(--max) - var(--min)); --range: calc(var(--max) - var(--min));
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range)); --ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
} }
/*webkit*/ /*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb { input[type='range'].styled-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 2em; width: 2em;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
background: #FFFFFF; background: #ffffff;
border: none; border: none;
box-shadow: 0 0 2px black; box-shadow: 0 0 2px black;
margin-top: calc(2em * 0.5 - 2em * 0.5); margin-top: calc(2em * 0.5 - 2em * 0.5);
} }
input[type=range].styled-slider::-webkit-slider-runnable-track { input[type='range'].styled-slider::-webkit-slider-runnable-track {
height: 40px; height: 40px;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
background: #1a1a1a; background: #1a1a1a;
box-shadow: none; box-shadow: none;
} }
input[type=range].styled-slider.slider-progress1::-webkit-slider-runnable-track { input[type='range'].styled-slider.slider-progress1::-webkit-slider-runnable-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
;
} }
input[type=range].styled-slider.slider-progress2::-webkit-slider-runnable-track { input[type='range'].styled-slider.slider-progress2::-webkit-slider-runnable-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
;
} }
input[type=range].styled-slider.slider-progress3::-webkit-slider-runnable-track { input[type='range'].styled-slider.slider-progress3::-webkit-slider-runnable-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
;
} }
input[type=range].styled-slider.slider-progress4::-webkit-slider-runnable-track { input[type='range'].styled-slider.slider-progress4::-webkit-slider-runnable-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
;
} }
/*mozilla*/ /*mozilla*/
input[type=range].styled-slider::-moz-range-thumb { input[type='range'].styled-slider::-moz-range-thumb {
width: 2em; width: 2em;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
background: #FFFFFF; background: #ffffff;
border: none; border: none;
box-shadow: 0 0 2px black; box-shadow: 0 0 2px black;
} }
input[type=range].styled-slider::-moz-range-track { input[type='range'].styled-slider::-moz-range-track {
height: 40px; height: 40px;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
background: #1a1a1a; background: #1a1a1a;
box-shadow: none; box-shadow: none;
} }
input[type=range].styled-slider.slider-progress1::-moz-range-track { input[type='range'].styled-slider.slider-progress1::-moz-range-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
} }
input[type=range].styled-slider.slider-progress2::-moz-range-track { input[type='range'].styled-slider.slider-progress2::-moz-range-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
} }
input[type=range].styled-slider.slider-progress3::-moz-range-track { input[type='range'].styled-slider.slider-progress3::-moz-range-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
} }
input[type=range].styled-slider.slider-progress4::-moz-range-track { input[type='range'].styled-slider.slider-progress4::-moz-range-track {
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646; background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
} }
/*ms*/ /*ms*/
input[type=range].styled-slider::-ms-fill-upper { input[type='range'].styled-slider::-ms-fill-upper {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
} }
input[type=range].styled-slider::-ms-fill-lower { input[type='range'].styled-slider::-ms-fill-lower {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
} }
input[type=range].styled-slider::-ms-thumb { input[type='range'].styled-slider::-ms-thumb {
width: 2em; width: 2em;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
background: #FFFFFF; background: #ffffff;
border: none; border: none;
box-shadow: 0 0 2px black; box-shadow: 0 0 2px black;
margin-top: 0; margin-top: 0;
box-sizing: border-box; box-sizing: border-box;
} }
input[type=range].styled-slider::-ms-track { input[type='range'].styled-slider::-ms-track {
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
background: #1a1a1a; background: #1a1a1a;
border: none; border: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
} }
input[type=range].styled-slider.slider-progress1::-ms-fill-lower { input[type='range'].styled-slider.slider-progress1::-ms-fill-lower {
height: 40px; height: 40px;
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
margin: -undefined 0 -undefined -undefined; margin: -undefined 0 -undefined -undefined;
background: #7b2cbf; background: #7b2cbf;
border: none; border: none;
border-right-width: 0; border-right-width: 0;
} }
input[type=range].styled-slider.slider-progress2::-ms-fill-lower { input[type='range'].styled-slider.slider-progress2::-ms-fill-lower {
height: 40px; height: 40px;
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
margin: -undefined 0 -undefined -undefined; margin: -undefined 0 -undefined -undefined;
background: #7b2cbf; background: #7b2cbf;
border: none; border: none;
border-right-width: 0; border-right-width: 0;
} }
input[type=range].styled-slider.slider-progress3::-ms-fill-lower { input[type='range'].styled-slider.slider-progress3::-ms-fill-lower {
height: 40px; height: 40px;
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
margin: -undefined 0 -undefined -undefined; margin: -undefined 0 -undefined -undefined;
background: #7b2cbf; background: #7b2cbf;
border: none; border: none;
border-right-width: 0; border-right-width: 0;
} }
input[type=range].styled-slider.slider-progress4::-ms-fill-lower { input[type='range'].styled-slider.slider-progress4::-ms-fill-lower {
height: 40px; height: 40px;
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
margin: -undefined 0 -undefined -undefined; margin: -undefined 0 -undefined -undefined;
background: #7b2cbf; background: #7b2cbf;
border: none; border: none;
border-right-width: 0; border-right-width: 0;
} }
.inputBox { .inputBox {
border: none; border: none;
width: 50px; width: 38px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
margin-left: 10px;
} }

79
src/css/tabs.css
View file

@ -73,7 +73,7 @@ section {
.scale { .scale {
height: 2em; height: 2em;
width: 2em; width: 2em;
vertical-align: bottom vertical-align: bottom;
} }
.tab { .tab {
@ -83,15 +83,14 @@ section {
cursor: pointer; cursor: pointer;
} }
input:checked+label { input:checked + label {
border-top-color: #FFB03D; border-top-color: #ffb03d;
border-right-color: #DDD; border-right-color: #ddd;
border-left-color: #DDD; border-left-color: #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
text-decoration: none; text-decoration: none;
} }
/* --------------------------------- */ /* --------------------------------- */
.radius { .radius {
@ -129,13 +128,13 @@ input:checked+label {
.tabx-bar .tabx::before { .tabx-bar .tabx::before {
position: absolute; position: absolute;
content: ""; content: '';
width: 26%; width: 26%;
height: 13%; height: 13%;
border-top-left-radius: 200px; border-top-left-radius: 200px;
border-top-right-radius: 200px; border-top-right-radius: 200px;
border-bottom: none; border-bottom: none;
background-color: #607D8B; background-color: #607d8b;
/* bottom: -8px; */ /* bottom: -8px; */
opacity: 0; opacity: 0;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
@ -153,7 +152,8 @@ input:checked+label {
bottom: 0px; bottom: 0px;
} }
.tabx-bar .tabx::after {} .tabx-bar .tabx::after {
}
.tabx-bar .tabx:hover { .tabx-bar .tabx:hover {
padding-bottom: 10px; padding-bottom: 10px;
@ -192,7 +192,7 @@ input:checked+label {
} }
select { select {
font-size: .9rem; font-size: 0.9rem;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
background-color: var(--main-color3); background-color: var(--main-color3);
@ -258,7 +258,7 @@ select {
padding-left: 10px; padding-left: 10px;
} }
input[type="password"] { input[type='password'] {
background: var(--main-color3); background: var(--main-color3);
border: none; border: none;
height: 40px; height: 40px;
@ -272,7 +272,19 @@ input[type="password"] {
/* To make space for the reveal button */ /* To make space for the reveal button */
} }
input[type="lol"] { input[type='url'] {
background: var(--main-color3);
border: none;
height: 40px;
border-radius: 40px;
width: 260px;
outline: none;
color: var(--main-color2);
font-size: 10pt;
margin-left: 10px;
}
input[type='lol'] {
background: var(--main-color3); background: var(--main-color3);
border: none; border: none;
height: 40px; height: 40px;
@ -292,7 +304,7 @@ input[type="lol"] {
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
left: 450px; left: 425px;
} }
/* Hide the default appearance of the button */ /* Hide the default appearance of the button */
@ -331,20 +343,20 @@ input[type="lol"] {
} }
/* Apply different colors based on the toast type */ /* Apply different colors based on the toast type */
.toast.info { .info {
background-color: #3498db; background-color: lightblue !important;
} }
.toast.success { .success {
background-color: #2ecc71; background-color: #2ecc71 !important;
} }
.toast.warning { .warning {
background-color: #f39c12; background-color: #f39c12 !important;
} }
.toast.error { .error {
background-color: #e74c3c; background-color: #e74c3c !important;
} }
/* CSS animation for the toast appearance */ /* CSS animation for the toast appearance */
@ -413,19 +425,30 @@ input[type="lol"] {
visibility: visible; visibility: visible;
} */ } */
input[type=text]:disabled { div[type='text']:disabled {
background: #dddddd; background: #4b4b4b;
display: none;
} }
input[type2=text]:disabled { input[type='text']:disabled {
background: #dddddd; background: #4b4b4b;
} }
button[type=text]:disabled { button[type='text']:disabled {
background: #dddddd; background: #4b4b4b;
display: none;
}
input[type2='text']:disabled {
background: #4b4b4b;
} }
div:disabled { div:disabled {
background: #dddddd; background: #4b4b4b;
filter: brightness(200%);
}
div:disabled {
background: #4b4b4b;
filter: brightness(200%); filter: brightness(200%);
} }

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

@ -22,9 +22,10 @@
#volume-icon { #volume-icon {
color: var(--main-color2); color: var(--main-color2);
width: 50px; scale: 0.75;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
align-self: center;
} }
#image { #image {

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

@ -67,11 +67,14 @@
box-shadow: 0 0 0 3px rgba(255, 255, 255, 1); box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
} }
.volume-icon-container { .option-icon-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; /* justify-content: center; */
align-items: center; align-items: center;
/* width: 78px; */
/* float: right; */
flex-grow: 1;
} }
.brush-icon-container { .brush-icon-container {

BIN
src/images/icon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/images/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 79 KiB

3
src/images/note.svg Normal file
View file

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="24px" height="24px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M703.90625 865.90625l-39.9375-15.65625 148.6875-380.0625c6.84375-17.53125-2.4375-37.3125-20.34375-43.125l-260.0625-84.9375c-16.6875-5.4375-34.6875 3.1875-40.875 19.59375L361.8125 704.46875l-61.40625-23.15625 181.875-481.125c6.09375-16.21875 23.8125-24.84375 40.40625-19.78125l389.0625 120.1875c18.1875 5.625 27.84375 25.5 20.90625 43.3125l-199.125 509.0625c-4.6875 11.71875-17.90625 17.53125-29.625 12.9375z" fill="#360682" /><path d="M241.0625 658.15625m-129.375 0a129.375 129.375 0 1 0 258.75 0 129.375 129.375 0 1 0-258.75 0Z" fill="#360682" /><path d="M614.375 802.90625m-129.375 0a129.375 129.375 0 1 0 258.75 0 129.375 129.375 0 1 0-258.75 0Z" fill="#360682" /><path d="M246.53333333 379.36666667L142.43333333 118.66666667c-6.8-16.9 2.4-36 19.8-41.3l107.9-32.9c14.4-4.4 29.7 2.5 36 16.2l13.2 28.8c7.5 16.3-0.9 35.4-17.9 41l-73.7 24.3c-6.9 2.3-10.5 9.9-7.8 16.6L290.33333333 350.96666667c2.1 5.4-0.5 11.4-5.9 13.6l-37.9 14.8z" fill="#E51C5A" /><path d="M211.53333333 379.36666667m-84.8 0a84.8 84.8 0 1 0 169.6 0 84.8 84.8 0 1 0-169.6 0Z" fill="#E51C5A" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

48
src/images/stt.svg Normal file
View file

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>.cls-1{fill:#4285f4;}.cls-2{fill:none;}.cls-3{fill:#669df6;}</style>
</defs>
<title>Icon_24px_SpeechtoText_Color</title>
<g data-name="Product Icons">
<g data-name="colored-32/speech">
<rect class="cls-1" x="11" y="2" width="2" height="20"/>
<rect class="cls-2" width="24" height="24"/>
<g >
<rect id="Rectangle-path-2" data-name="Rectangle-path" class="cls-1" x="7" y="8" width="2" height="8"/>
<rect id="Rectangle-path-3" data-name="Rectangle-path" class="cls-1" x="15" y="8" width="2" height="8"/>
<rect id="Rectangle-path-4" data-name="Rectangle-path" class="cls-1" x="3" y="5" width="2" height="14"/>
<rect id="Rectangle-path-5" data-name="Rectangle-path" class="cls-1" x="19" y="5" width="2" height="14"/>
<rect id="Rectangle-path-6" data-name="Rectangle-path" class="cls-3" x="11" y="2" width="2" height="10"/>
<rect id="Rectangle-path-7" data-name="Rectangle-path" class="cls-3" x="7" y="8" width="2" height="4"/>
<rect id="Rectangle-path-8" data-name="Rectangle-path" class="cls-3" x="15" y="8" width="2" height="4"/>
<rect id="Rectangle-path-9" data-name="Rectangle-path" class="cls-3" x="3" y="5" width="2" height="7"/>
<rect id="Rectangle-path-10" data-name="Rectangle-path" class="cls-3" x="19" y="5" width="2" height="7"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

28
src/images/theme.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<path style="fill:#FFC033;" d="M491.09,328.459c-10.239-17.809-28.826-27.937-51.199-27.937c-28.737,0-47.726-21.359-48.085-44.522
c-0.111-9.906,3.228-20.035,10.685-28.828c8.459-10.017,20.815-15.694,33.837-15.694c24.598,0,44.522-10.351,54.872-28.271
c9.796-17.03,9.685-38.4-0.333-55.652C445.122,48.863,360.307,0,269.373,0C146.938,0,41.421,86.15,18.381,204.911
c-3.338,17.03-5.009,34.059-4.896,51.089v0.668c0.223,58.991,20.48,116.313,58.435,162.282C120.671,478.052,192.685,512,269.374,512
c91.157,0,176.085-49.085,221.717-128C500.997,366.859,500.997,345.6,491.09,328.459z M292.745,104.181
c13.803-23.93,44.3-32.278,68.452-18.365c23.93,13.803,32.167,44.412,18.365,68.452c-13.803,23.819-44.412,32.167-68.452,18.254
C287.18,158.72,278.945,128.223,292.745,104.181z"/>
<path style="fill:#F9A926;" d="M71.919,418.95C120.67,478.052,192.684,512,269.373,512c91.157,0,176.085-49.085,221.717-128
c9.907-17.141,9.907-38.4,0-55.541c-10.239-17.809-28.826-27.937-51.199-27.937c-28.737,0-47.726-21.359-48.085-44.522H13.483v0.668
C13.707,315.659,33.963,372.981,71.919,418.95z"/>
<path style="fill:#88CC2A;" d="M124.677,306.087c-27.619,0-50.087-22.468-50.087-50.087s22.468-50.087,50.087-50.087
s50.087,22.468,50.087,50.087S152.296,306.087,124.677,306.087z"/>
<path style="fill:#736056;" d="M171.981,420.609c-23.923-13.802-32.21-44.397-18.326-68.424
c13.695-23.726,44.21-32.294,68.413-18.321c23.922,13.801,32.21,44.392,18.326,68.419
C226.622,426.154,196.056,434.511,171.981,420.609z"/>
<path style="fill:#37AFCC;" d="M323.198,431.18c-26.712-7.156-42.599-34.587-35.424-61.342c7.175-26.741,34.59-42.578,61.336-35.413
c12.924,3.456,23.728,11.745,30.413,23.326l0,0c6.696,11.587,8.478,25.087,5.011,38.016
C377.349,422.55,349.888,438.339,323.198,431.18z"/>
<path style="fill:#E6563A;" d="M153.655,159.81c-13.855-23.966-5.651-54.579,18.326-68.424
c24.013-13.841,54.599-5.613,68.413,18.332l0,0c13.877,24.016,5.607,54.605-18.326,68.424
C197.941,192.057,167.398,183.631,153.655,159.81z"/>
<path style="fill:#7FB335;" d="M124.677,306.087c27.619,0,50.087-22.468,50.087-50.087H74.59
C74.59,283.619,97.057,306.087,124.677,306.087z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

26
src/images/tts.svg Normal file
View file

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>.cls-1{fill:#669df6;}.cls-2{fill:#4285f4;}</style>
</defs>
<title>Icon_24px_TexttoSpeech_Color</title>
<g data-name="Product Icons">
<rect class="cls-1" x="2.01" y="6.99" width="6.64" height="1.67"/>
<polygon class="cls-1" points="11.17 15.32 2 15.32 2 16.99 2 16.99 11.17 16.99 11.17 15.32"/>
<polygon class="cls-1" points="4.51 11.16 2 11.16 2 12.82 6.18 12.82 12 12.82 10.33 11.16 4.51 11.16"/>
<path class="cls-2" d="M12,9.07a.42.42,0,0,1,.42-.36.41.41,0,0,1,.41.36v9.18a2.09,2.09,0,0,0,2.61,2A2.16,2.16,0,0,0,17,18.14V5.75a.4.4,0,0,1,.19-.4.41.41,0,0,1,.45,0,.4.4,0,0,1,.19.4v9.16a2.07,2.07,0,0,0,.81,1.64,2,2,0,0,0,1.8.37A2.16,2.16,0,0,0,22,14.8V12H20.33v2.92a.4.4,0,0,1-.19.4.41.41,0,0,1-.45,0,.4.4,0,0,1-.19-.4V5.75a2.09,2.09,0,0,0-2.61-2,2.16,2.16,0,0,0-1.56,2.13V18.25a.4.4,0,0,1-.19.4.41.41,0,0,1-.45,0,.4.4,0,0,1-.19-.4V9.08a2.07,2.07,0,0,0-4.11-.36,2.4,2.4,0,0,0-.05.46v2L12,12.82V9.07Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

917
src/index.html
View file

File diff suppressed because it is too large Load diff

65
src/js/auth.js Normal file
View file

@ -0,0 +1,65 @@
console.log("kees");
// const clientId = 'YOUR_TWITCH_CLIENT_ID';
// const redirectUri = 'http://localhost:1989/auth';
// const scopes = ['chat:edit', 'chat:read'];
// const express = require('express');
// const tempAuthServer = express();
// const port = 1989;
// const { parse: parseQueryString } = require('querystring');
// tempAuthServer.use(function (req, res, next) {
// if (req.url !== "/auth") {
// let token = parseQueryString(req.query.auth)
// res.json(token["#access_token"]);
// // settings.TWITCH.OAUTH_TOKEN = token["#access_token"];
// // fs.writeFileSync(settingsPath, ini.stringify(settings));
// // settings = ini.parse(fs.readFileSync(settingsPath, 'utf-8'));
// // tempAuthServer.close();
// }
// next();
// });
// const htmlString = `
// <!DOCTYPE html>
// <html>
// <head>
// <title>Authentication</title>
// </head>
// <body>
// <h1>Authentication successful! You can close this window now.</h1>
// <form name="auth" "action="auth" method="get" >
// <input type="text" id="auth" name="auth"/>
// <input type="submit" />
// </form>
// </body>
// </html>
// <script>
// function onSubmitComplete() {
// close();
// }
// document.querySelector("#auth").value = document.location.hash;
// document.auth.submit();
// setTimeout(onSubmitComplete, 500);
// </script>`;
// tempAuthServer.get('/auth', (req, res) => {
// // res.send(htmlString);
// });
// tempAuthServer.post('/auth', (req, res) => {
// res.render('authentication', { name: req.body.name });
// });
// tempAuthServer.listen(port, () => { });
// const authURL = `https://id.twitch.tv/oauth2/authorize?client_id=${settings.TWITCH.CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=token&scope=${scopes.join(' ')}`;
// shell.openExternal(authURL);
onsole.log('ExecPath', process.execPath);
process.on('message', (m) => {
console.log('Got message:', m);
process.send("message", "lol");
});

14
src/js/chat.js
View file

@ -117,7 +117,6 @@ displayPanel('.OptionPanel', '#Configuration', '#btnConfiguration');
displayPanel('.OptionPanel', '#Logs', '#btnLogs'); displayPanel('.OptionPanel', '#Logs', '#btnLogs');
displayPanel('.OptionPanel', '#BrowsersourceChat', '#btnBrowsersourceChat'); displayPanel('.OptionPanel', '#BrowsersourceChat', '#btnBrowsersourceChat');
displayPanel('.OptionPanel', '#BrowsersourceVtuber', '#btnBrowsersourceVtuber'); displayPanel('.OptionPanel', '#BrowsersourceVtuber', '#btnBrowsersourceVtuber');
displayPanel('.OptionPanel', '#TTS', '#btnTTS');
displayPanel('.OptionPanel', '#Chat', '#btnChat'); displayPanel('.OptionPanel', '#Chat', '#btnChat');
// #endregion // #endregion
@ -142,25 +141,12 @@ const displayPanelX = (panelSelectorClass, panelSelectorID, btnSelectorID) => {
}); });
}; };
displayPanelX('.item', '#btnTTS', '#btnTTS');
displayPanelX('.item', '#btnChat', '#btnChat'); displayPanelX('.item', '#btnChat', '#btnChat');
displayPanelX('.item', '#btnBrowsersourceChat', '#btnBrowsersourceChat'); displayPanelX('.item', '#btnBrowsersourceChat', '#btnBrowsersourceChat');
displayPanelX('.item', '#btnBrowsersourceVtuber', '#btnBrowsersourceVtuber'); displayPanelX('.item', '#btnBrowsersourceVtuber', '#btnBrowsersourceVtuber');
displayPanelX('.item', '#btnLogs', '#btnLogs'); displayPanelX('.item', '#btnLogs', '#btnLogs');
displayPanelX('.item', '#btnConfiguration', '#btnConfiguration'); displayPanelX('.item', '#btnConfiguration', '#btnConfiguration');
// #region Show/Hide Advanced Menu
document.body.querySelector('#ShowAdvancedMenu').addEventListener('click', () => {
document.getElementById('AdvancedMenu_mask').style.visibility = 'visible';
});
document.body.querySelector('#HideAdvancedMenu').addEventListener('click', () => {
document.getElementById('AdvancedMenu_mask').style.visibility = 'hidden';
});
// #endregion
// #region Show/Hide Theme Creator // #region Show/Hide Theme Creator
document.body.querySelector('#ShowThemeCreator').addEventListener('click', () => { document.body.querySelector('#ShowThemeCreator').addEventListener('click', () => {
document.getElementById('ThemeCreator_mask').style.visibility = 'visible'; document.getElementById('ThemeCreator_mask').style.visibility = 'visible';

6
src/js/logger.js
View file

@ -24,11 +24,11 @@ const logger = createLogger({
format: fileFormat, format: fileFormat,
transports: [ transports: [
new transports.File({ new transports.File({
filename: path.join(__dirname, '../logs/error.log'), filename: path.join(resourcesPath, '../logs/error.log'),
level: 'error', level: 'error',
}), }),
new transports.File({ new transports.File({
filename: path.join(__dirname, '../logs/activity.log'), filename: path.join(resourcesPath, '../logs/activity.log'),
maxsize: 5242880, maxsize: 5242880,
maxFiles: 5, maxFiles: 5,
}), }),
@ -44,7 +44,7 @@ if (process.env.NODE_ENV !== 'production') {
); );
} }
fetch(path.join(__dirname, '../logs/activity.log')) fetch(path.join(resourcesPath, '../logs/activity.log'))
.then((response) => response.text()) .then((response) => response.text())
.then((logData) => { .then((logData) => {
const logLines = logData.trim().split('\n'); const logLines = logData.trim().split('\n');

378
src/js/renderer.js
View file

@ -1,14 +1,13 @@
const fs = require('fs');
const ini = require('ini');
const path = require('path'); // get directory path const path = require('path'); // get directory path
const {
ipcRenderer, const { ipcRenderer } = require('electron'); // necessary electron libraries to send data to the app
} = require('electron'); // necessary electron libraries to send data to the app
const say = require('say'); const say = require('say');
const request = require('request'); 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 fs = require('fs');
const util = require('util'); const util = require('util');
const exec = util.promisify(require('child_process').exec); const exec = util.promisify(require('child_process').exec);
@ -17,16 +16,18 @@ const GoogleTTS = require('node-google-tts-api');
const tts = new GoogleTTS(); const tts = new GoogleTTS();
const { Socket } = require('socket.io-client'); const { Socket } = require('socket.io-client');
const ini = require('ini'); const main = ipcRenderer.sendSync('environment');
let envInfo = (ipcRenderer.sendSync('environment')) const resourcesPath = main.resourcesPath;
const settingsPath = main.settingsPath.toString();
const settings = main.settings;
// TODO: remove gooogle voices txt and use api instead // TODO: remove gooogle voices txt and use api instead
const googleVoices = fs.readFileSync(path.join(__dirname, './config/googleVoices.txt')).toString().split('\r\n'); const googleVoices = fs.readFileSync(path.join(resourcesPath, './config/googleVoices.txt')).toString().split('\r\n');
// 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(resourcesPath, './config/amazonVoices.txt')).toString().split('\r\n');
const languagesObject = fs.readFileSync(path.join(__dirname, './config/languages.txt')).toString().split('\r\n'); const languagesObject = fs.readFileSync(path.join(resourcesPath, './config/languages.txt')).toString().split('\r\n');
// html elements // html elements
const root = document.documentElement; const root = document.documentElement;
@ -37,46 +38,44 @@ 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 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(resourcesPath, './js/chat'));
const messageTemplates = require(path.join(__dirname, './js/messageTemplates')); const messageTemplates = require(path.join(resourcesPath, './js/messageTemplates'));
const logger = require(path.join(__dirname, './js/logger')); const logger = require(path.join(resourcesPath, './js/logger'));
const sound = require(path.join(__dirname, './js/sound')); const sound = require(path.join(resourcesPath, './js/sound'));
const talk = require(path.join(__dirname, './js/voiceQueue')); // Voice queue system const talk = require(path.join(resourcesPath, './js/voiceQueue')); // Voice queue system
const config = require(path.join(__dirname, './js/settings')); const config = require(path.join(resourcesPath, './js/settings'));
let notificationSounds = undefined; let notificationSounds = path.join(resourcesPath, './sounds/notifications');
if (envInfo.env) {
notificationSounds = path.join(envInfo.path, './sounds/notifications'); let twitch = require(path.join(resourcesPath, './js/twitch'));
} else {
notificationSounds = path.join(__dirname, './sounds/notifications'); function reset() {
ipcRenderer.send('restart');
} }
const twitch = config.settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : '';
let server; let server;
let socket; let socket;
if (config.settings.SERVER.USE_SERVER) { function setServer() {
server = require(path.join(__dirname, './js/server')); if (!settings.SERVER.USE_SERVER) {
socket = io(`http://localhost:${config.settings.SERVER.PORT}`); // Connect to your Socket.IO server return;
}
server = require(path.join(resourcesPath, './js/server'));
socket = io(`http://localhost:${settings.SERVER.PORT}`); // Connect to your Socket.IO server
} }
const Polly = config.settings.AMAZON.USE_AMAZON ? require(path.join(__dirname, './js/amazon')) : ''; setServer();
const google = config.settings.GOOGLE.USE_GOOGLE ? require(path.join(__dirname, './js/amazon')) : '';
const theme = require(path.join(__dirname, './js/theme')); const Polly = settings.AMAZON.USE_AMAZON ? require(path.join(resourcesPath, './js/amazon')) : '';
const google = settings.GOOGLE.USE_GOOGLE ? require(path.join(resourcesPath, './js/amazon')) : '';
const theme = require(path.join(resourcesPath, './js/theme'));
// initialize values // initialize values
config.getGeneralSettings(); config.getGeneralSettings();
config.setCustomThemeToggle();
let selectedVoiceIndex;
let selectedEncodingIndex;
let selectedTtsAudioDeviceIndex;
const TTSVolume = 1; const TTSVolume = 1;
const notificationSoundVolume = 1; const notificationSoundVolume = 1;
@ -85,236 +84,233 @@ const StartDateAndTime = Date.now();
const speakButton = document.querySelector('#speakBtn'); const speakButton = document.querySelector('#speakBtn');
const amazonCredentials = { const amazonCredentials = {
accessKeyId: config.settings.AMAZON.ACCESS_KEY, accessKeyId: settings.AMAZON.ACCESS_KEY,
secretAccessKey: config.settings.AMAZON.ACCESS_SECRET, secretAccessKey: settings.AMAZON.ACCESS_SECRET,
}; };
// Check for installed sounds // Check for installed sounds
fs.readdir(notificationSounds, (err, files) => { fs.readdir(notificationSounds, (err, files) => {
files.forEach((file, i) => { files.forEach((file, i) => {
// Create a new option element. // Create a new option element.
const option = document.createElement('option'); const option = document.createElement('option');
// Set the options value and text. // Set the options value and text.
option.value = i; option.value = i;
option.innerHTML = file; option.innerHTML = file;
// Add the option to the sound selector. // Add the option to the sound selector.
notificationSound.appendChild(option); notificationSound.appendChild(option);
}); });
// set the saved notification sound // set the saved notification sound
notificationSound.selectedIndex = config.settings.AUDIO.NOTIFICATION_SOUND; notificationSound.selectedIndex = settings.AUDIO.NOTIFICATION_SOUND;
}); });
async function getAudioDevices() { async function getAudioDevices() {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
// logger.info('enumerateDevices() not supported.'); // logger.info('enumerateDevices() not supported.');
return; return;
} }
const devices = await navigator.mediaDevices.enumerateDevices(); const devices = await navigator.mediaDevices.enumerateDevices();
const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput'); const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput');
audioOutputDevices.forEach((device) => { audioOutputDevices.forEach((device) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.text = device.label || `Output ${device.deviceId}`; option.text = device.label || `Output ${device.deviceId}`;
option.value = device.deviceId; option.value = device.deviceId;
ttsAudioDevices.appendChild(option); ttsAudioDevices.appendChild(option);
}); });
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE; ttsAudioDevices.selectedIndex = settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
} }
getAudioDevices(); getAudioDevices();
function setLanguagesinSelect(languageSelector, setting) { function setLanguagesinSelect(languageSelector, setting) {
let languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox let languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox
const languages = Object.keys(languagesObject); const languages = Object.keys(languagesObject);
languages.forEach((language) => { languages.forEach((language) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = language; option.value = language;
option.innerHTML = languagesObject[language]; option.innerHTML = languagesObject[language];
languageSelect.appendChild(option); languageSelect.appendChild(option);
}); });
languageSelect.selectedIndex = setting; languageSelect.selectedIndex = setting;
} }
setLanguagesinSelect("#primaryLanguage", config.settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX); setLanguagesinSelect('#primaryLanguage', settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX);
setLanguagesinSelect("#secondaryLanguage", config.settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX); setLanguagesinSelect('#secondaryLanguage', settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX);
function getInstalledVoices(callback) { 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
function setVoicesinSelect(voiceSelector) { const internalTTSHeader = document.createElement('optgroup');
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox internalTTSHeader.label = 'Internal TTS';
voiceSelect.appendChild(internalTTSHeader);
const internalTTSHeader = document.createElement('optgroup'); // const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
internalTTSHeader.label = "Internal TTS"; voices.forEach((voice, i) => {
voiceSelect.appendChild(internalTTSHeader); const option = document.createElement('option');
// const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox option.value = i;
voices.forEach((voice, i) => { option.innerHTML = voice;
const option = document.createElement('option');
option.value = i; // installedTTS.appendChild(option);
option.innerHTML = voice; internalTTSHeader.appendChild(option);
});
}
setVoicesinSelect('#primaryVoice');
setVoicesinSelect('#secondaryVoice');
// installedTTS.appendChild(option); callback();
internalTTSHeader.appendChild(option); });
});
}
setVoicesinSelect("#primaryVoice");
setVoicesinSelect("#secondaryVoice");
callback();
});
} }
function getAmazonVoices(callback) { function getAmazonVoices(callback) {
if (!config.settings.AMAZON.USE_AMAZON) { if (!settings.AMAZON.USE_AMAZON) {
callback(); callback();
return; return;
} }
function setVoicesinSelect(voiceSelector) { function setVoicesinSelect(voiceSelector) {
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
const internalTTSHeader = document.createElement('optgroup'); const internalTTSHeader = document.createElement('optgroup');
internalTTSHeader.label = "Amazon TTS"; internalTTSHeader.label = 'Amazon TTS';
voiceSelect.appendChild(internalTTSHeader); voiceSelect.appendChild(internalTTSHeader);
const voices = Object.keys(amazonVoices); const voices = Object.keys(amazonVoices);
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];
internalTTSHeader.appendChild(option); internalTTSHeader.appendChild(option);
}); });
} }
setVoicesinSelect("#primaryVoice"); setVoicesinSelect('#primaryVoice');
setVoicesinSelect("#secondaryVoice"); setVoicesinSelect('#secondaryVoice');
callback(); callback();
} }
function getGoogleVoices(callback) { function getGoogleVoices(callback) {
if (!config.settings.GOOGLE.USE_GOOGLE) { if (!settings.GOOGLE.USE_GOOGLE) {
callback(); callback();
return; return;
} }
function setVoicesinSelect(voiceSelector) { function setVoicesinSelect(voiceSelector) {
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
const internalTTSHeader = document.createElement('optgroup'); const internalTTSHeader = document.createElement('optgroup');
internalTTSHeader.label = "Google TTS"; internalTTSHeader.label = 'Google TTS';
voiceSelect.appendChild(internalTTSHeader); voiceSelect.appendChild(internalTTSHeader);
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
const voices = Object.keys(googleVoices); const voices = Object.keys(googleVoices);
voices.forEach((voice) => { voices.forEach((voice) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.classList.add("option"); option.classList.add('option');
option.value = voice; option.value = voice;
option.innerHTML = googleVoices[voice]; option.innerHTML = googleVoices[voice];
internalTTSHeader.appendChild(option); internalTTSHeader.appendChild(option);
}); });
} }
setVoicesinSelect("#primaryVoice"); setVoicesinSelect('#primaryVoice');
setVoicesinSelect("#secondaryVoice"); setVoicesinSelect('#secondaryVoice');
callback(); callback();
} }
getGoogleVoices(function () { getGoogleVoices(function () {
getAmazonVoices(function () { getAmazonVoices(function () {
getInstalledVoices(function () { getInstalledVoices(function () {
let primaryVoice = document.querySelector("#primaryVoice"); let primaryVoice = document.querySelector('#primaryVoice');
primaryVoice.selectedIndex = config.settings.TTS.PRIMARY_TTS_VOICE; primaryVoice.selectedIndex = settings.TTS.PRIMARY_TTS_VOICE;
let secondaryVoice = document.querySelector("#secondaryVoice"); let secondaryVoice = document.querySelector('#secondaryVoice');
secondaryVoice.selectedIndex = config.settings.TTS.SECONDARY_TTS_VOICE; secondaryVoice.selectedIndex = 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 body = document.querySelector('.container');
const element = el; const element = el;
tip.classList.add('tooltip'); tip.classList.add('tooltip');
tip.classList.add('tooltiptext'); 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'
body.appendChild(tip); })`;
element.onmousemove = (e) => { body.appendChild(tip);
tip.style.left = `${e.x}px`; element.onmousemove = (e) => {
tip.style.top = `${e.y}px`; tip.style.left = `${e.x}px`;
tip.style.zIndex = 1; tip.style.top = `${e.y}px`;
tip.style.visibility = "visible"; tip.style.zIndex = 1;
}; tip.style.visibility = 'visible';
element.onmouseleave = (e) => { };
tip.style.visibility = "hidden"; element.onmouseleave = (e) => {
}; tip.style.visibility = 'hidden';
};
}); });
function showChatMessage(article) { function showChatMessage(article) {
document.querySelector('#chatBox').appendChild(article); document.querySelector('#chatBox').appendChild(article);
const messages = Array.from(document.body.querySelectorAll('.msg-container')); const messages = Array.from(document.body.querySelectorAll('.msg-container'));
const lastMessage = messages[messages.length - 1]; const lastMessage = messages[messages.length - 1];
lastMessage.scrollIntoView({ behavior: 'smooth' }); lastMessage.scrollIntoView({ behavior: 'smooth' });
} }
function getPostTime() { function getPostTime() {
const date = new Date(); const date = new Date();
document.body.querySelectorAll('.container').innerHTML = date.getHours(); document.body.querySelectorAll('.container').innerHTML = date.getHours();
const hours = date.getHours(); const hours = date.getHours();
const minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes(); const minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
const time = `${hours}:${minutes}`; const time = `${hours}:${minutes}`;
return time; return time;
} }
function showPreviewChatMessage() { function showPreviewChatMessage() {
const message = messageTemplates.messageTemplate; const message = messageTemplates.messageTemplate;
document.querySelector('#mini-mid').innerHTML += message; document.querySelector('#mini-mid').innerHTML += message;
const messages = Array.from(document.body.querySelectorAll('#mini-mid')); const messages = Array.from(document.body.querySelectorAll('#mini-mid'));
const lastMessage = messages[messages.length - 1]; const lastMessage = messages[messages.length - 1];
lastMessage.scrollIntoView({ behavior: 'smooth' }); lastMessage.scrollIntoView({ behavior: 'smooth' });
} }
showPreviewChatMessage(); showPreviewChatMessage();
function hideText(button, field) { function hideText(button, field) {
document.body.querySelector(button).addEventListener('click', () => { document.body.querySelector(button).addEventListener('click', () => {
const passwordInput = document.querySelector(field); const passwordInput = document.querySelector(field);
if (passwordInput.type === 'password') { if (passwordInput.type === 'password') {
passwordInput.type = 'lol'; passwordInput.type = 'lol';
} else { } else {
passwordInput.type = 'password'; passwordInput.type = 'password';
} }
}); });
} }
hideText('.password-toggle-btn1', "#TWITCH_OAUTH_TOKEN"); hideText('.password-toggle-btn1', '#TWITCH_OAUTH_TOKEN');
hideText('.password-toggle-btn2', "#TWITCH_CLIENT_ID"); hideText('.password-toggle-btn4', '#AMAZON_ACCESS_KEY');
hideText('.password-toggle-btn3', "#TWITCH_CLIENT_SECRET"); hideText('.password-toggle-btn5', '#AMAZON_ACCESS_SECRET');
hideText('.password-toggle-btn4', "#AMAZON_ACCESS_KEY"); hideText('.password-toggle-btn6', '#GOOGLE_API_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);
@ -323,7 +319,7 @@ hideText('.password-toggle-btn6', "#GOOGLE_API_KEY");
// voiceId: 'Lotte', // voiceId: 'Lotte',
// }; // };
// const fileStream = fs.createWriteStream(path.join(__dirname, '/public/sounds/tts/Amazon_audio.mp3')); // const fileStream = fs.createWriteStream(path.join(resourcesPath, '/public/sounds/tts/Amazon_audio.mp3'));
// polly.textToSpeech(options, (err, audioStream) => { // polly.textToSpeech(options, (err, audioStream) => {
// if (err) { // if (err) {

101
src/js/server.js
View file

@ -1,54 +1,81 @@
const express = require('express'); const express = require('express');
const app = express(); const app = express();
const path = require('path'); 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);
if (!config.settings.SERVER.USE_SERVER) { if (!settings.SERVER.USE_SERVER) {
return; return;
} }
const PORT = config.settings.SERVER.PORT; const PORT = settings.SERVER.PORT;
let isVtuberEnabled = true;
let isChatBubbleEnabled = true;
function startVtuber() {
if (!settings.SERVER.USE_VTUBER) {
isVtuberEnabled = false;
return;
}
app.use('/vtuber', express.static(path.join(resourcesPath, './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);
}
function startChatBubble() {
if (!settings.SERVER.USE_CHATBUBBLE) {
isChatBubbleEnabled = false;
return;
}
app.use('/chat', express.static(path.join(resourcesPath, './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);
}
// Middleware to conditionally serve routes
app.use((req, res, next) => {
if (!isVtuberEnabled && req.path === '/vtuber') {
res.sendStatus(404); // Return a 404 status for /vtuber when it's disabled
} else if (!isChatBubbleEnabled && req.path === '/chat') {
res.sendStatus(404); // Return a 404 status for /chat when it's disabled
} else {
next(); // Proceed to the next middleware or route handler
}
});
http.listen(PORT, () => { http.listen(PORT, () => {
if (config.settings.SERVER.USE_VTUBER) { startVtuber();
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/'))); startChatBubble();
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) => {
// Receive data from the client
socket.on('message', (data) => {});
// Receive data from the client // Receive data from the client
socket.on('message', (data) => { }); socket.on('xxx', (logoUrl, username, message) => {
socket.broadcast.emit('message', logoUrl, username, message);
});
// Receive data from the client socket.on('disconnect', () => {});
socket.on('xxx', (logoUrl, username, message) => {
socket.broadcast.emit('message', logoUrl, username, message);
});
socket.on('disconnect', () => { });
}); });
module.exports = { startVtuber, startChatBubble };

594
src/js/settings.js
View file

@ -1,394 +1,478 @@
let resourcesPath = path.join(__dirname, '../config/settings.ini');
let settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
if (envInfo.env) {
resourcesPath = path.join(envInfo.path, './settings.ini');
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
}
document.body.querySelector('#primaryVoice').addEventListener('change', () => { document.body.querySelector('#primaryVoice').addEventListener('change', () => {
var select = document.querySelector("#primaryVoice"); var select = document.querySelector('#primaryVoice');
settings.TTS.PRIMARY_TTS_VOICE = select.selectedIndex; settings.TTS.PRIMARY_TTS_VOICE = select.selectedIndex;
settings.TTS.PRIMARY_TTS_NAME = select.options[select.selectedIndex].text; settings.TTS.PRIMARY_TTS_NAME = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved primary voice!', 'success');
}); });
document.body.querySelector('#primaryLanguage').addEventListener('change', () => { document.body.querySelector('#primaryLanguage').addEventListener('change', () => {
var select = document.querySelector("#primaryLanguage"); var select = document.querySelector('#primaryLanguage');
settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX = select.selectedIndex; settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
settings.TTS.PRIMARY_TTS_LANGUAGE = select.options[select.selectedIndex].text; settings.TTS.PRIMARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved primary language!', 'success');
}); });
document.body.querySelector('#secondaryVoice').addEventListener('change', () => { document.body.querySelector('#secondaryVoice').addEventListener('change', () => {
var select = document.querySelector("#secondaryVoice"); var select = document.querySelector('#secondaryVoice');
settings.TTS.SECONDARY_TTS_VOICE = select.selectedIndex; settings.TTS.SECONDARY_TTS_VOICE = select.selectedIndex;
settings.TTS.SECONDARY_TTS_NAME = select.options[select.selectedIndex].text; settings.TTS.SECONDARY_TTS_NAME = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved secondary voice!', 'success');
}); });
document.body.querySelector('#secondaryLanguage').addEventListener('change', () => { document.body.querySelector('#secondaryLanguage').addEventListener('change', () => {
var select = document.querySelector("#secondaryLanguage"); var select = document.querySelector('#secondaryLanguage');
settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX = select.selectedIndex; settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
settings.TTS.SECONDARY_TTS_LANGUAGE = select.options[select.selectedIndex].text; settings.TTS.SECONDARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved secondary language!', 'success');
}); });
document.body.querySelector('#ttsAudioDevice').addEventListener('change', () => { document.body.querySelector('#ttsAudioDevice').addEventListener('change', () => {
settings.AUDIO.TTS_AUDIO_DEVICE = ttsAudioDevices.value; settings.AUDIO.TTS_AUDIO_DEVICE = ttsAudioDevices.value;
settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE = ttsAudioDevices.selectedIndex; settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE = ttsAudioDevices.selectedIndex;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved audio device!', 'success');
}); });
document.body.querySelector('#TWITCH_CHANNEL_NAME').addEventListener('change', () => { document.body.querySelector('#TWITCH_CHANNEL_NAME').addEventListener('change', () => {
settings.TWITCH.CHANNEL_NAME = document.body.querySelector('#TWITCH_CHANNEL_NAME').value; settings.TWITCH.CHANNEL_NAME = document.body.querySelector('#TWITCH_CHANNEL_NAME').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
});
document.body.querySelector('#TWITCH_USERNAME').addEventListener('change', () => { let button = document.body.querySelector('#TestTwitchCredentials');
settings.TWITCH.USERNAME = document.body.querySelector('#TWITCH_USERNAME').value; button.className = 'AdvancedMenuButton';
fs.writeFileSync(resourcesPath, ini.stringify(settings)); createNotification('Saved Channel name, please restart the application to reset twitch service', 'warning');
}); });
document.body.querySelector('#TWITCH_OAUTH_TOKEN').addEventListener('change', () => { document.body.querySelector('#TWITCH_OAUTH_TOKEN').addEventListener('change', () => {
settings.TWITCH.OAUTH_TOKEN = document.body.querySelector('#TWITCH_OAUTH_TOKEN').value; settings.TWITCH.OAUTH_TOKEN = document.body.querySelector('#TWITCH_OAUTH_TOKEN').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
}); createNotification('Saved OAuth token!', 'success');
document.body.querySelector('#TWITCH_CLIENT_ID').addEventListener('change', () => { let button = document.body.querySelector('#TestTwitchCredentials');
settings.TWITCH.CLIENT_ID = document.body.querySelector('#TWITCH_CLIENT_ID').value; button.className = 'AdvancedMenuButton';
fs.writeFileSync(resourcesPath, ini.stringify(settings)); createNotification('Saved OAuth token, please restart the application to reset twitch service', 'warning');
});
document.body.querySelector('#TWITCH_CLIENT_SECRET').addEventListener('change', () => {
settings.TWITCH.CLIENT_SECRET = document.body.querySelector('#TWITCH_CLIENT_SECRET').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
}); });
document.body.querySelector('#PORT').addEventListener('change', () => { document.body.querySelector('#PORT').addEventListener('change', () => {
settings.SERVER.PORT = document.body.querySelector('#PORT').value; settings.SERVER.PORT = document.body.querySelector('#PORT').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved port, please restart the application to reset the port', 'warning');
}); });
document.body.querySelector('#AMAZON_ACCESS_KEY').addEventListener('change', () => { document.body.querySelector('#AMAZON_ACCESS_KEY').addEventListener('change', () => {
settings.AMAZON.ACCESS_KEY = document.body.querySelector('#AMAZON_ACCESS_KEY').value; settings.AMAZON.ACCESS_KEY = document.body.querySelector('#AMAZON_ACCESS_KEY').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved Amazon access key!', 'success');
}); });
document.body.querySelector('#AMAZON_ACCESS_SECRET').addEventListener('change', () => { document.body.querySelector('#AMAZON_ACCESS_SECRET').addEventListener('change', () => {
settings.AMAZON.ACCESS_SECRET = document.body.querySelector('#AMAZON_ACCESS_SECRET').value; settings.AMAZON.ACCESS_SECRET = document.body.querySelector('#AMAZON_ACCESS_SECRET').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved Amazon access secret!', 'success');
}); });
document.body.querySelector('#GOOGLE_API_KEY').addEventListener('change', () => { document.body.querySelector('#GOOGLE_API_KEY').addEventListener('change', () => {
settings.GOOGLE.API_KEY = document.body.querySelector('#GOOGLE_API_KEY').value; settings.GOOGLE.API_KEY = document.body.querySelector('#GOOGLE_API_KEY').value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved Google api key!', 'success');
}); });
// document.body.querySelector('#sliderX').addEventListener('change', () => {
// // TODO: resolve volume control of TTS
// config.SETTINGS.VOICE_VOLUME;
// fs.writeFileSync(path.join(__dirname, '/public/config/settings.ini'), ini.stringify(config));
// });
// #region Test/change/Save Configuration
document.body.querySelector('#notification').addEventListener('change', () => { document.body.querySelector('#notification').addEventListener('change', () => {
settings.AUDIO.NOTIFICATION_SOUND = notificationSound.selectedIndex; settings.AUDIO.NOTIFICATION_SOUND = notificationSound.selectedIndex;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
createNotification('Saved notification sound!', 'success');
}); });
// document.body.querySelector('#slider').addEventListener('change', () => {
// settings.SETTINGS.NOTIFICATION_VOLUME = parseInt(document.getElementById('SoundVolume').
// innerText);
// fs.writeFileSync(path.join(__dirname, '/public/config/settings.ini'), ini.stringify(settings));
// });
function getGeneralSettings() { function getGeneralSettings() {
// Theme // Theme
document.querySelector('#USE_CUSTOM_THEME').value = settings.THEME.USE_CUSTOM_THEME; document.querySelector('#USE_CUSTOM_THEME').value = settings.THEME.USE_CUSTOM_THEME;
const USE_CUSTOM_THEME = settings.THEME.USE_CUSTOM_THEME; document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0;
theme.setTheme();
document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0; // TTS
theme.setTheme(USE_CUSTOM_THEME); document.body.querySelector('#USE_TTS').checked = settings.TTS.USE_TTS;
// Twitch // Notification sounds
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH; document.body.querySelector('#USE_NOTIFICATION_SOUNDS').checked = settings.AUDIO.USE_NOTIFICATION_SOUNDS;
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 // Twitch
document.body.querySelector('#USE_SERVER').checked = settings.SERVER.USE_SERVER; document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH;
document.body.querySelector('#PORT').value = settings.SERVER.PORT; document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME;
document.body.querySelector('#USE_VTUBER').checked = settings.SERVER.USE_VTUBER; document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN;
showMenuButton("#btnBrowsersourceVtuber", settings.SERVER.USE_VTUBER)
document.body.querySelector('#USE_CHATBUBBLE').checked = settings.SERVER.USE_CHATBUBBLE;
showMenuButton("#btnBrowsersourceChat", settings.SERVER.USE_CHATBUBBLE)
// Amazon // Server
document.body.querySelector('#USE_AMAZON').checked = settings.AMAZON.USE_AMAZON; document.body.querySelector('#USE_SERVER').checked = settings.SERVER.USE_SERVER;
document.body.querySelector('#AMAZON_ACCESS_KEY').value = settings.AMAZON.ACCESS_KEY; document.body.querySelector('#PORT').value = settings.SERVER.PORT;
document.body.querySelector('#AMAZON_ACCESS_SECRET').value = settings.AMAZON.ACCESS_SECRET; document.body.querySelector('#USE_VTUBER').checked = settings.SERVER.USE_VTUBER;
document.body.querySelector('#VTUBER_URL').value = `http://localhost:${settings.SERVER.PORT}/vtuber/`;
showMenuButton('#btnBrowsersourceVtuber', settings.SERVER.USE_VTUBER);
document.body.querySelector('#USE_CHATBUBBLE').checked = settings.SERVER.USE_CHATBUBBLE;
document.body.querySelector('#CHATBUBBLE_URL').value = `http://localhost:${settings.SERVER.PORT}/chat/`;
showMenuButton('#btnBrowsersourceChat', settings.SERVER.USE_CHATBUBBLE);
// Google // Amazon
document.body.querySelector('#USE_GOOGLE').checked = settings.GOOGLE.USE_GOOGLE; document.body.querySelector('#USE_AMAZON').checked = settings.AMAZON.USE_AMAZON;
document.body.querySelector('#GOOGLE_API_KEY').value = settings.GOOGLE.API_KEY; 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) { function showMenuButton(menuButton, toggle) {
let option = document.body.querySelector(menuButton); let option = document.body.querySelector(menuButton);
if (!toggle) { if (!toggle) {
option.style.display = "none"; option.style.display = 'none';
} else { } else {
option.style.display = ""; option.style.display = '';
} }
} }
const notificationToasts = document.querySelector('#toasts'); // toast messages const notificationToasts = document.querySelector('#toasts'); // toast messages
function createNotification(message = null, type = null) { function createNotification(message = null, type = null) {
const notification = document.createElement('div'); const notification = document.createElement('div');
notification.classList.add('toast'); notification.classList.add('toast');
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"; let alertSound = 'info.mp3';
if (type === "error") { if (type === 'error') {
alertSound = "error.mp3"; alertSound = 'error.mp3';
} }
if (envInfo.env) { let notfication = new Audio(path.join(resourcesPath, `./sounds/notifications/${alertSound}`));
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${alertSound}`)); notfication.volume = settings.AUDIO.NOTIFICATION_VOLUME / 100;
} else { notfication.play();
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${alertSound}`)); setTimeout(() => notification.remove(), 10000);
}
notfication.play();
setTimeout(() => notification.remove(), 10000);
} }
// Check for configs // Check for configs
if (!settings.TWITCH.USE_TWITCH) { if (!settings.TWITCH.USE_TWITCH) {
const text = 'Please setup a service to connect to in Configuration > Show Advanced'; const text = 'Please setup a service to connect to in Configuration > Show Advanced';
createNotification(text, 'warning'); createNotification(text, 'warning');
} }
if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.CHANNEL_NAME) { if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.CHANNEL_NAME) {
const text = 'No channel name inserted in the Twitch service'; const text = 'No channel name inserted in the Twitch service';
createNotification(text, 'alert'); createNotification(text, 'warning');
} }
if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.USERNAME) { if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.USERNAME) {
const text = 'No username inserted in the Twitch service'; const text = 'No username inserted in the Twitch service';
createNotification(text, 'alert'); createNotification(text, 'warning');
} }
function toggleRadio(toggle, inputs) { function toggleRadio(toggle, inputs) {
const element = inputs; const element = inputs;
if (toggle === true) { if (toggle === true) {
for (let i = 0; i < inputs.length; i += 1) { element[i].disabled = false; } for (let i = 0; i < inputs.length; i += 1) {
} else { element[i].style.display = '';
for (let i = 0; i < inputs.length; i += 1) { element[i].disabled = true; } }
} } else {
} for (let i = 0; i < inputs.length; i += 1) {
element[i].style.display = 'none';
function setCustomThemeToggle() { }
const toggle = document.getElementById('USE_CUSTOM_THEME').checked; }
const inputs = document.getElementsByClassName('inputTheme');
toggleRadio(toggle, inputs);
theme.setTheme(toggle);
} }
// #region Use Custom theme toggle logic // #region Use Custom theme toggle logic
document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () => { document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () => {
setCustomThemeToggle(); const toggle = document.getElementById('USE_CUSTOM_THEME').checked;
const inputs = document.getElementsByClassName('inputTheme');
toggleRadio(toggle, inputs);
const toggle = document.getElementById('USE_CUSTOM_THEME').checked; settings.THEME.USE_CUSTOM_THEME = toggle;
settings.THEME.USE_CUSTOM_THEME = toggle; fs.writeFileSync(settingsPath, ini.stringify(settings));
fs.writeFileSync(resourcesPath, ini.stringify(settings)); theme.setTheme();
createNotification(`${toggle ? 'Enabled' : 'Disabled'} custom theme!`, 'success');
}); });
// #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');
});
// #region Top bar buttons
document.body.querySelector('#Info_USERNAME').addEventListener('click', () => {
const key = ipcRenderer.sendSync('twitch');
let element = document.body.querySelector('#TWITCH_OAUTH_TOKEN');
element.value = key;
});
document.body.querySelector('#Info_VTUBER').addEventListener('click', () => {
ipcRenderer.send('vtuber');
});
document.body.querySelector('#Info_CHATBUBBLE').addEventListener('click', () => {
ipcRenderer.send('chatBubble');
}); });
document.body.querySelector('#max-button').addEventListener('click', () => { document.body.querySelector('#max-button').addEventListener('click', () => {
ipcRenderer.send('maximize-window'); ipcRenderer.send('maximize-window');
}); });
document.body.querySelector('#close-button').addEventListener('click', (event) => { document.body.querySelector('#close-button').addEventListener('click', (event) => {
ipcRenderer.send('close-window'); ipcRenderer.send('close-window');
}); });
// #endregion // #endregion
// #region Notification sound test // #region Notification sound test
document.body.querySelector('#SoundTestButton').addEventListener('click', () => { document.body.querySelector('#SoundTestButton').addEventListener('click', () => {
sound.playAudio(); sound.playAudio();
});
document.body.querySelector('#TestTwitchCredentials').addEventListener('click', () => {
twitch.ping('#TestTwitchCredentials');
// resetTwitch(;
}); });
function toggleTwitch() { function toggleTwitch() {
const toggle = settings.TWITCH.USE_TWITCH; const toggle = settings.TWITCH.USE_TWITCH;
const inputs = document.getElementsByClassName('inputTwitch'); const inputs = document.getElementsByClassName('inputTwitch');
toggleRadio(toggle, inputs); toggleRadio(toggle, inputs);
} }
document.body.querySelector('#USE_TWITCH').addEventListener('click', () => {
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);
});
toggleTwitch(); toggleTwitch();
function toggleGoogle() { document.body.querySelector('#USE_TWITCH').addEventListener('click', () => {
const toggle = settings.GOOGLE.USE_GOOGLE; const toggle = document.getElementById('USE_TWITCH').checked;
const inputs = document.getElementsByClassName('inputGoogle'); settings.TWITCH.USE_TWITCH = toggle;
toggleRadio(toggle, inputs); fs.writeFileSync(settingsPath, ini.stringify(settings));
} const inputs = document.getElementsByClassName('inputTwitch');
toggleRadio(toggle, inputs);
document.body.querySelector('#USE_GOOGLE').addEventListener('click', () => { twitch = settings.TWITCH.USE_TWITCH ? require(path.join(resourcesPath, './js/twitch')) : null;
const toggle = document.getElementById('USE_GOOGLE').checked; createNotification(`${toggle ? 'Enabled' : 'Disabled'} Twitch settings!`, 'success');
settings.GOOGLE.USE_GOOGLE = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputGoogle');
toggleRadio(toggle, inputs);
}); });
function toggleGoogle() {
const toggle = settings.GOOGLE.USE_GOOGLE;
const inputs = document.getElementsByClassName('inputGoogle');
toggleRadio(toggle, inputs);
}
toggleGoogle(); toggleGoogle();
function toggleAmazon() { document.body.querySelector('#USE_GOOGLE').addEventListener('click', () => {
const toggle = settings.AMAZON.USE_AMAZON; const toggle = document.getElementById('USE_GOOGLE').checked;
const inputs = document.getElementsByClassName('inputAmazon'); settings.GOOGLE.USE_GOOGLE = toggle;
toggleRadio(toggle, inputs); fs.writeFileSync(settingsPath, ini.stringify(settings));
} const inputs = document.getElementsByClassName('inputGoogle');
toggleRadio(toggle, inputs);
document.body.querySelector('#USE_AMAZON').addEventListener('click', () => { createNotification(`${toggle ? 'Enabled' : 'Disabled'} Google settings!`, 'success');
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);
}); });
function toggleAmazon() {
const toggle = settings.AMAZON.USE_AMAZON;
const inputs = document.getElementsByClassName('inputAmazon');
toggleRadio(toggle, inputs);
}
toggleAmazon(); toggleAmazon();
function toggleServer() { document.body.querySelector('#USE_AMAZON').addEventListener('click', () => {
const toggle = settings.SERVER.USE_SERVER; const toggle = document.getElementById('USE_AMAZON').checked;
const inputs = document.getElementsByClassName('inputServer'); settings.AMAZON.USE_AMAZON = toggle;
toggleRadio(toggle, inputs); fs.writeFileSync(settingsPath, ini.stringify(settings));
} const inputs = document.getElementsByClassName('inputAmazon');
toggleRadio(toggle, inputs);
document.body.querySelector('#USE_SERVER').addEventListener('click', () => { createNotification(`${toggle ? 'Enabled' : 'Disabled'} Amazon settings!`, 'success');
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);
}); });
function toggleServer() {
const toggle = settings.SERVER.USE_SERVER;
const inputs = document.getElementsByClassName('inputServer');
toggleRadio(toggle, inputs);
}
toggleServer(); toggleServer();
document.body.querySelector('#USE_SERVER').addEventListener('click', () => {
const toggle = document.getElementById('USE_SERVER').checked;
settings.SERVER.USE_SERVER = toggle;
fs.writeFileSync(settingsPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputServer');
toggleRadio(toggle, inputs);
setServer();
createNotification(
`${toggle ? 'Enabled' : 'Disabled'} server settings!, the service will stop working after restarting the application`,
'success',
);
});
document.body.querySelector('#USE_VTUBER').addEventListener('change', () => { document.body.querySelector('#USE_VTUBER').addEventListener('change', () => {
const toggle = document.getElementById('USE_VTUBER').checked; const toggle = document.getElementById('USE_VTUBER').checked;
settings.SERVER.USE_VTUBER = toggle; settings.SERVER.USE_VTUBER = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
showMenuButton("#btnBrowsersourceVtuber", toggle); showMenuButton('#btnBrowsersourceVtuber', toggle);
createNotification(
`${toggle ? 'Enabled' : 'Disabled'} Vtuber setting!, the service will stop working after restarting the application`,
'success',
);
server.startVtuber();
}); });
document.body.querySelector('#USE_CHATBUBBLE').addEventListener('change', () => { document.body.querySelector('#USE_CHATBUBBLE').addEventListener('change', () => {
const toggle = document.getElementById('USE_CHATBUBBLE').checked; const toggle = document.getElementById('USE_CHATBUBBLE').checked;
settings.SERVER.USE_CHATBUBBLE = toggle; settings.SERVER.USE_CHATBUBBLE = toggle;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
showMenuButton("#btnBrowsersourceChat", toggle); showMenuButton('#btnBrowsersourceChat', toggle);
createNotification(`${toggle ? 'Enabled' : 'Disabled'} chatbubble setting!`, 'success');
server.startChatBubble();
}); });
// Get the selected TTS function toggleTTS() {
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.TTS.SELECTED_TTS}`); const toggle = settings.TTS.USE_TTS;
const inputs = document.getElementsByClassName('inputTTS');
if (currentlySelectedTTS) { toggleRadio(toggle, inputs);
currentlySelectedTTS.checked = true;
// Dispatch the event to initialize logic.
currentlySelectedTTS.dispatchEvent(new Event('change'));
} }
document.body.querySelector('#notificationVolumeSlider').addEventListener('change', () => { toggleTTS();
const e = document.querySelector('#notificationVolumeSlider');
e.style.setProperty('--tiempotemporal', e.value);
e.style.setProperty('--min', e.min === '' ? '0' : e.min);
e.style.setProperty('--max', e.max === '' ? '100' : e.max);
document.querySelector('#notificationVolume').value = e.value;
e.addEventListener('input', () => { document.body.querySelector('#USE_TTS').addEventListener('change', () => {
e.style.setProperty('--tiempotemporal', e.value); const toggle = document.getElementById('USE_TTS').checked;
document.querySelector('#notificationVolume').value = e.value; settings.TTS.USE_TTS = toggle;
settings.AUDIO.NOTIFICATION_VOLUME = e.value; fs.writeFileSync(settingsPath, ini.stringify(settings));
fs.writeFileSync(resourcesPath, ini.stringify(settings)); const inputs = document.getElementsByClassName('inputTTS');
}); toggleRadio(toggle, inputs);
createNotification(`${toggle ? 'Enabled' : 'Disabled'} text to speech!`, 'success');
});
function toggleNotificationSounds() {
const toggle = settings.AUDIO.USE_NOTIFICATION_SOUNDS;
const inputs = document.getElementsByClassName('inputNotificationSound');
toggleRadio(toggle, inputs);
}
toggleNotificationSounds();
document.body.querySelector('#USE_NOTIFICATION_SOUNDS').addEventListener('change', () => {
const toggle = document.getElementById('USE_NOTIFICATION_SOUNDS').checked;
settings.AUDIO.USE_NOTIFICATION_SOUNDS = toggle;
fs.writeFileSync(settingsPath, ini.stringify(settings));
const inputs = document.getElementsByClassName('inputNotificationSound');
toggleRadio(toggle, inputs);
createNotification(`${toggle ? 'Enabled' : 'Disabled'} notification sounds!`, 'success');
});
document.body.querySelector('#notificationVolume').addEventListener('change', () => {
let element = document.body.querySelector('#notificationVolume');
settings.AUDIO.NOTIFICATION_VOLUME = element.value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
const slider = document.querySelector('#notificationVolumeSlider');
slider.value = settings.AUDIO.NOTIFICATION_VOLUME;
slider.style.setProperty('--tiempotemporal', settings.AUDIO.NOTIFICATION_VOLUME);
createNotification('Saved notification volume!', 'success');
});
document.body.querySelector('#notificationVolumeSlider').addEventListener('change', () => {
const e = document.querySelector('#notificationVolumeSlider');
e.style.setProperty('--tiempotemporal', e.value);
e.style.setProperty('--min', e.min === '' ? '0' : e.min);
e.style.setProperty('--max', e.max === '' ? '100' : e.max);
document.querySelector('#notificationVolume').value = e.value;
e.addEventListener('input', () => {
e.style.setProperty('--tiempotemporal', e.value);
document.querySelector('#notificationVolume').value = e.value;
settings.AUDIO.NOTIFICATION_VOLUME = e.value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
});
});
document.body.querySelector('#notificationVolumeSlider').addEventListener('mouseup', () => {
createNotification('Saved notification volume!', 'success');
}); });
if (settings.AUDIO.NOTIFICATION_VOLUME) { if (settings.AUDIO.NOTIFICATION_VOLUME) {
document.querySelector('#notificationVolumeSlider').value = settings.AUDIO.NOTIFICATION_VOLUME; document.querySelector('#notificationVolumeSlider').value = settings.AUDIO.NOTIFICATION_VOLUME;
document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change')); document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change'));
} else { } else {
document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change', { value: 50 })); document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
} }
document.body.querySelector('#ttsVolumeSlider').addEventListener('change', () => { document.body.querySelector('#ttsVolume').addEventListener('change', () => {
const e = document.querySelector('#ttsVolumeSlider'); let element = document.body.querySelector('#ttsVolume');
e.style.setProperty('--tiempotemporal', e.value); settings.TTS.TTS_VOLUME = element.value;
e.style.setProperty('--min', e.min === '' ? '0' : e.min); fs.writeFileSync(settingsPath, ini.stringify(settings));
e.style.setProperty('--max', e.max === '' ? '100' : e.max);
document.querySelector('#ttsVolume').value = e.value;
e.addEventListener('input', () => { const slider = document.querySelector('#ttsVolumeSlider');
e.style.setProperty('--tiempotemporal', e.value); slider.value = settings.TTS.TTS_VOLUME;
document.querySelector('#ttsVolume').value = e.value; slider.style.setProperty('--tiempotemporal', settings.TTS.TTS_VOLUME);
settings.AUDIO.TTS_VOLUME = e.value;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); createNotification('Saved TTS volume!', 'success');
});
}); });
if (settings.AUDIO.TTS_VOLUME) { document.body.querySelector('#ttsVolumeSlider').addEventListener('change', () => {
document.querySelector('#ttsVolumeSlider').value = settings.AUDIO.TTS_VOLUME; const e = document.querySelector('#ttsVolumeSlider');
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change')); e.style.setProperty('--tiempotemporal', e.value);
e.style.setProperty('--min', e.min === '' ? '0' : e.min);
e.style.setProperty('--max', e.max === '' ? '100' : e.max);
document.querySelector('#ttsVolume').value = e.value;
e.addEventListener('input', () => {
e.style.setProperty('--tiempotemporal', e.value);
document.querySelector('#ttsVolume').value = e.value;
settings.TTS.TTS_VOLUME = e.value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
});
});
document.body.querySelector('#ttsVolumeSlider').addEventListener('mouseup', () => {
createNotification('Saved TTS volume!', 'success');
});
if (settings.TTS.TTS_VOLUME) {
document.querySelector('#ttsVolumeSlider').value = settings.TTS.TTS_VOLUME;
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change'));
} else { } else {
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 })); document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
} }
document.body.querySelector('#ttsVolume').addEventListener('change', () => {
let element = document.body.querySelector('#ttsVolume');
settings.TTS.TTS_VOLUME = element.value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
const slider = document.querySelector('#ttsVolumeSlider');
slider.value = settings.TTS.TTS_VOLUME;
slider.style.setProperty('--tiempotemporal', settings.TTS.TTS_VOLUME);
});
document.body.querySelector('.language-selector').addEventListener('click', () => { document.body.querySelector('.language-selector').addEventListener('click', () => {
var dropdown = document.body.querySelector('.language-dropdown'); var dropdown = document.body.querySelector('.language-dropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block'; dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}); });
document.body.querySelector('.language-dropdown').addEventListener('mouseleave', () => { document.body.querySelector('.language-dropdown').addEventListener('mouseleave', () => {
hideDropdown(); hideDropdown();
}); });
let languageSelector = document.querySelectorAll(".language-item"); let languageSelector = document.querySelectorAll('.language-item');
languageSelector.forEach(item => { languageSelector.forEach((item) => {
item.addEventListener('click', (event) => { item.addEventListener('click', (event) => {
const el = event.target; const el = event.target;
// tip.innerText = el.getAttribute('language'); // tip.innerText = el.getAttribute('language');
document.getElementById('selected-language').innerText = el.getAttribute('language'); document.getElementById('selected-language').innerText = el.getAttribute('language');
document.getElementById('selected-flag').innerText = el.getAttribute('flag'); document.getElementById('selected-flag').innerText = el.getAttribute('flag');
hideDropdown(); hideDropdown();
}); });
}); });
function hideDropdown() { function hideDropdown() {
var dropdown = document.body.querySelector('.language-dropdown'); var dropdown = document.body.querySelector('.language-dropdown');
dropdown.style.display = 'none'; dropdown.style.display = 'none';
} }
// let primaryTTSSelector = document.body.querySelector(".optgroup"); // let primaryTTSSelector = document.body.querySelector(".optgroup");
// primaryTTSSelector.forEach(item => { // primaryTTSSelector.forEach(item => {
// item.addEventListener('hover', (event) => { // item.addEventListener('hover', (event) => {
@ -398,10 +482,6 @@ function hideDropdown() {
// }); // });
// }); // });
module.exports = { module.exports = {
ini, getGeneralSettings,
settings,
getGeneralSettings,
setCustomThemeToggle
}; };

79
src/js/sound.js
View file

@ -4,26 +4,33 @@ let currentUsername = '';
let voiceSoundArray = []; let voiceSoundArray = [];
let status = 0; let status = 0;
const playTTS = (ttsData) => new Promise((resolve) => { const playTTS = (ttsData) =>
const tts = new Audio(ttsData.path); new Promise((resolve) => {
const tts = new Audio(ttsData.path);
tts.addEventListener('ended', () => { tts.addEventListener('ended', () => {
fs.unlink(ttsData.path, (err) => { fs.unlink(ttsData.path, (err) => {
if (err) { if (err) {
console.error(err); console.error(err);
return; return;
} }
resolve('finished'); resolve('finished');
});
}); });
});
tts.setSinkId(config.settings.AUDIO.TTS_AUDIO_DEVICE).then(() => { tts.setSinkId(settings.AUDIO.TTS_AUDIO_DEVICE)
tts.play(); .then(() => {
socket.emit('xxx', currentLogoUrl, currentUsername, ttsData.message); tts.volume = settings.TTS.TTS_VOLUME / 100;
}).catch((error) => { tts.play();
console.error('Failed to set audio output device:', error);
if (settings.SERVER.USE_SERVER) {
socket.emit('xxx', currentLogoUrl, currentUsername, ttsData.message);
}
})
.catch((error) => {
console.error('Failed to set audio output device:', error);
});
}); });
});
async function shiftVoice() { async function shiftVoice() {
status = 1; status = 1;
@ -41,18 +48,19 @@ function add(ttsData) {
} }
// Play sound function // Play sound function
function playAudio(ttsData = undefined) { function playAudio(data) {
let audioPath; if (settings.AUDIO.USE_NOTIFICATION_SOUNDS) {
if (!ttsData) { let notfication = new Audio(
let notfication = undefined; path.join(resourcesPath, `../src/sounds/notifications/${notificationSound.options[settings.AUDIO.NOTIFICATION_SOUND].text}`),
if (envInfo.env) { );
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${notificationSound.options[config.settings.AUDIO.NOTIFICATION_SOUND].text}`)); notfication.volume = settings.AUDIO.NOTIFICATION_VOLUME / 100;
} else {
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${notificationSound.options[config.settings.AUDIO.NOTIFICATION_SOUND].text}`));
}
notfication.play(); notfication.play();
} else { }
add(ttsData);
if (settings.TTS.USE_TTS) {
add(data);
} else if (settings.SERVER.USE_SERVER) {
socket.emit('xxx', currentLogoUrl, currentUsername, data);
} }
} }
@ -60,19 +68,26 @@ function playVoice(filteredMessage, logoUrl, username, message) {
trueMessage = filteredMessage; trueMessage = filteredMessage;
currentLogoUrl = logoUrl; currentLogoUrl = logoUrl;
currentUsername = username; currentUsername = username;
let textObject = { "filtered": filteredMessage, "formatted": message }; let textObject = { filtered: filteredMessage, formatted: message };
let voice; let voice;
const language = langdetect.detect(filteredMessage); const language = langdetect.detect(filteredMessage);
if (language[0].lang === config.settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()) { if (
voice = config.settings.TTS.SECONDARY_TTS_NAME; settings.TTS.PRIMARY_TTS_LANGUAGE.toLowerCase() !== settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase() ||
language[0].lang === settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()
) {
voice = settings.TTS.SECONDARY_TTS_NAME;
textObject.filtered = `${username}: ${filteredMessage}`; textObject.filtered = `${username}: ${filteredMessage}`;
} else { } else {
voice = config.settings.TTS.PRIMARY_TTS_NAME; voice = settings.TTS.PRIMARY_TTS_NAME;
textObject.filtered = `${username}: ${filteredMessage}`; textObject.filtered = `${username}: ${filteredMessage}`;
} }
talk.add(textObject, voice); if (settings.TTS.USE_TTS) {
talk.add(textObject, voice);
} else {
playAudio(textObject);
}
} }
module.exports = { playAudio, playVoice }; module.exports = { playAudio, playVoice };

166
src/js/theme.js
View file

@ -1,89 +1,49 @@
function setTheme(USE_CUSTOM_THEME) { function changeColor(section, setting, tempSection) {
document.querySelector('#MAIN_COLOR_1').value = config.settings.THEME.MAIN_COLOR_1; document.querySelector(section).value = setting;
const MAIN_COLOR_1 = document.querySelector('#MAIN_COLOR_1').value; const value = document.querySelector(section).value;
root.style.setProperty('--main-color1-temp', MAIN_COLOR_1); root.style.setProperty(tempSection, value);
}
document.querySelector('#MAIN_COLOR_2').value = config.settings.THEME.MAIN_COLOR_2;
const MAIN_COLOR_2 = document.querySelector('#MAIN_COLOR_2').value; function setCurrentTheme(adjustTemp = false) {
root.style.setProperty('--main-color2-temp', MAIN_COLOR_2); changeColor("#MAIN_COLOR_1", settings.THEME.MAIN_COLOR_1, adjustTemp ? "--main-color1-temp" : "--main-color1");
changeColor("#MAIN_COLOR_2", settings.THEME.MAIN_COLOR_2, adjustTemp ? "--main-color2-temp" : "--main-color2");
document.querySelector('#MAIN_COLOR_3').value = config.settings.THEME.MAIN_COLOR_3; changeColor("#MAIN_COLOR_3", settings.THEME.MAIN_COLOR_3, adjustTemp ? "--main-color3-temp" : "--main-color3");
const MAIN_COLOR_3 = document.querySelector('#MAIN_COLOR_3').value; changeColor("#MAIN_COLOR_4", settings.THEME.MAIN_COLOR_4, adjustTemp ? "--main-color4-temp" : "--main-color4");
root.style.setProperty('--main-color3-temp', MAIN_COLOR_3); changeColor("#TOP_BAR", settings.THEME.TOP_BAR, adjustTemp ? "--top-bar-temp" : "--top-bar");
changeColor("#MID_SECTION", settings.THEME.MID_SECTION, adjustTemp ? "--mid-section-temp" : "--mid-section");
document.querySelector('#MAIN_COLOR_4').value = config.settings.THEME.MAIN_COLOR_4; changeColor("#CHAT_BUBBLE_BG", settings.THEME.CHAT_BUBBLE_BG, adjustTemp ? "--chat-bubble-temp" : "--chat-bubble");
const MAIN_COLOR_4 = document.querySelector('#MAIN_COLOR_4').value; changeColor("#CHAT_BUBBLE_HEADER", settings.THEME.CHAT_BUBBLE_HEADER, adjustTemp ? "--chat-bubble-header-temp" : "--chat-bubble-header");
root.style.setProperty('--main-color4-temp', MAIN_COLOR_4); changeColor("#CHAT_BUBBLE_MESSAGE", settings.THEME.CHAT_BUBBLE_MESSAGE, adjustTemp ? "--chat-bubble-message-temp" : "--chat-bubble-message");
}
document.querySelector('#TOP_BAR').value = config.settings.THEME.TOP_BAR;
const TOP_BAR = document.querySelector('#TOP_BAR').value; setCurrentTheme(true);
root.style.setProperty('--top-bar-temp', TOP_BAR);
function setTheme() {
document.querySelector('#MID_SECTION').value = config.settings.THEME.MID_SECTION; if (settings.THEME.USE_CUSTOM_THEME) {
const MID_SECTION = document.querySelector('#MID_SECTION').value; setCurrentTheme();
root.style.setProperty('--mid-section-temp', MID_SECTION); } else {
root.style.setProperty('--main-color1', '#6e2c8c');
document.querySelector('#CHAT_BUBBLE_BG').value = config.settings.THEME.CHAT_BUBBLE_BG; root.style.setProperty('--main-color2', 'white');
const CHAT_BUBBLE_BG = document.querySelector('#CHAT_BUBBLE_BG').value; root.style.setProperty('--main-color3', '#211E1E');
root.style.setProperty('--chat-bubble-temp', CHAT_BUBBLE_BG); root.style.setProperty('--main-color4', '#2f2c34');
root.style.setProperty('--top-bar', '#100B12');
document.querySelector('#CHAT_BUBBLE_HEADER').value = config.settings.THEME.CHAT_BUBBLE_HEADER; root.style.setProperty('--mid-section', '#352d3d');
const CHAT_BUBBLE_HEADER = document.querySelector('#CHAT_BUBBLE_HEADER').value; root.style.setProperty('--chat-bubble', ' #7A6D7F');
root.style.setProperty('--chat-bubble-header-temp', CHAT_BUBBLE_HEADER); root.style.setProperty('--chat-bubble-header', '#141414');
root.style.setProperty('--chat-bubble-message', 'white');
document.querySelector('#CHAT_BUBBLE_MESSAGE').value = config.settings.THEME.CHAT_BUBBLE_MESSAGE; };
const CHAT_BUBBLE_MESSAGE = document.querySelector('#CHAT_BUBBLE_MESSAGE').value;
root.style.setProperty('--chat-bubble-message-temp', CHAT_BUBBLE_MESSAGE);
if (USE_CUSTOM_THEME) {
root.style.setProperty('--main-color1', MAIN_COLOR_1);
root.style.setProperty('--main-color2', MAIN_COLOR_2);
root.style.setProperty('--main-color3', MAIN_COLOR_3);
root.style.setProperty('--main-color4', MAIN_COLOR_4);
root.style.setProperty('--top-bar', TOP_BAR);
root.style.setProperty('--mid-section', MID_SECTION);
root.style.setProperty('--chat-bubble', CHAT_BUBBLE_BG);
root.style.setProperty('--chat-bubble-header', CHAT_BUBBLE_HEADER);
root.style.setProperty('--chat-bubble-message', CHAT_BUBBLE_MESSAGE);
} else {
root.style.setProperty('--main-color1', '#6e2c8c');
root.style.setProperty('--main-color2', 'white');
root.style.setProperty('--main-color3', '#211E1E');
root.style.setProperty('--main-color4', '#2f2c34');
root.style.setProperty('--top-bar', '#100B12');
root.style.setProperty('--mid-section', '#352d3d');
root.style.setProperty('--chat-bubble', ' #7A6D7F');
root.style.setProperty('--chat-bubble-header', '#141414');
root.style.setProperty('--chat-bubble-message', 'white');
}
} }
// #region Save 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(x);
}); });
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => { document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
config.settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value; settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#MAIN_COLOR_1", settings.THEME.MAIN_COLOR_1, "--main-color1");
}); });
document.body.querySelector('#MAIN_COLOR_2').addEventListener('input', () => { document.body.querySelector('#MAIN_COLOR_2').addEventListener('input', () => {
@ -92,9 +52,9 @@ document.body.querySelector('#MAIN_COLOR_2').addEventListener('input', () => {
}); });
document.body.querySelector('#MAIN_COLOR_2').addEventListener('change', () => { document.body.querySelector('#MAIN_COLOR_2').addEventListener('change', () => {
config.settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value; settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#MAIN_COLOR_2", settings.THEME.MAIN_COLOR_2, "--main-color2");
}); });
document.body.querySelector('#MAIN_COLOR_3').addEventListener('input', () => { document.body.querySelector('#MAIN_COLOR_3').addEventListener('input', () => {
@ -103,9 +63,9 @@ document.body.querySelector('#MAIN_COLOR_3').addEventListener('input', () => {
}); });
document.body.querySelector('#MAIN_COLOR_3').addEventListener('change', () => { document.body.querySelector('#MAIN_COLOR_3').addEventListener('change', () => {
config.settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value; settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#MAIN_COLOR_3", settings.THEME.MAIN_COLOR_3, "--main-color3");
}); });
document.body.querySelector('#MAIN_COLOR_4').addEventListener('input', () => { document.body.querySelector('#MAIN_COLOR_4').addEventListener('input', () => {
@ -114,9 +74,9 @@ document.body.querySelector('#MAIN_COLOR_4').addEventListener('input', () => {
}); });
document.body.querySelector('#MAIN_COLOR_4').addEventListener('change', () => { document.body.querySelector('#MAIN_COLOR_4').addEventListener('change', () => {
config.settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value; settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#MAIN_COLOR_4", settings.THEME.MAIN_COLOR_4, "--main-color4");
}); });
document.body.querySelector('#TOP_BAR').addEventListener('input', () => { document.body.querySelector('#TOP_BAR').addEventListener('input', () => {
@ -125,9 +85,9 @@ document.body.querySelector('#TOP_BAR').addEventListener('input', () => {
}); });
document.body.querySelector('#TOP_BAR').addEventListener('change', () => { document.body.querySelector('#TOP_BAR').addEventListener('change', () => {
config.settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value; settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#TOP_BAR", settings.THEME.TOP_BAR, "--top-bar");
}); });
document.body.querySelector('#MID_SECTION').addEventListener('input', () => { document.body.querySelector('#MID_SECTION').addEventListener('input', () => {
@ -136,9 +96,9 @@ document.body.querySelector('#MID_SECTION').addEventListener('input', () => {
}); });
document.body.querySelector('#MID_SECTION').addEventListener('change', () => { document.body.querySelector('#MID_SECTION').addEventListener('change', () => {
config.settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value; settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#MID_SECTION", settings.THEME.MID_SECTION, "--mid-section");
}); });
document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('input', () => { document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('input', () => {
@ -147,9 +107,9 @@ document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('input', () => {
}); });
document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('change', () => { document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('change', () => {
config.settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value; settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#CHAT_BUBBLE_BG", settings.THEME.CHAT_BUBBLE_BG, "--chat-bubble");
}); });
document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('input', () => { document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('input', () => {
@ -158,9 +118,9 @@ document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('input', ()
}); });
document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('change', () => { document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('change', () => {
config.settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value; settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#CHAT_BUBBLE_HEADER", settings.THEME.CHAT_BUBBLE_HEADER, "--chat-bubble-header");
}); });
document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('input', () => { document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('input', () => {
@ -169,11 +129,9 @@ document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('input', ()
}); });
document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('change', () => { document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('change', () => {
config.settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value; settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
setTheme(config.settings.THEME.USE_CUSTOM_THEME); changeColor("#CHAT_BUBBLE_MESSAGE", settings.THEME.CHAT_BUBBLE_MESSAGE, "--chat-bubble-message");
}); });
// #endregion
module.exports = { setTheme }; module.exports = { setTheme };

229
src/js/twitch.js
View file

@ -1,146 +1,151 @@
const tmi = require('tmi.js'); const tmi = require('tmi.js');
const axios = require('axios'); const axios = require('axios');
const client = new tmi.Client({ let client;
options: {
skipUpdatingEmotesets: true,
},
identity: {
username: config.settings.TWITCH.USERNAME,
password: config.settings.TWITCH.OAUTH_TOKEN,
},
channels: [config.settings.TWITCH.CHANNEL_NAME],
});
function sendMessage(message) { function sendMessage(message) {
client.say(config.settings.TWITCH.CHANNEL_NAME, message).catch(console.error); client.say(settings.TWITCH.CHANNEL_NAME, message).catch(console.error);
} }
client.connect().catch(console.error); client = new tmi.Client({
options: {
skipUpdatingEmotesets: true,
},
identity: {
username: settings.TWITCH.USERNAME,
password: settings.TWITCH.OAUTH_TOKEN,
},
channels: [settings.TWITCH.CHANNEL_NAME],
});
client
.connect()
.then((data) => {})
.catch(console.error);
function ping(element) {
let value = document.body.querySelector(element);
client
.ping()
.then((data) => {
console.log(client.readyState());
console.log(data);
value.classList.add('success');
value.innerText = 'Success!';
})
.catch((e) => {
console.log(e);
value.classList.add('error');
value.innerText = 'Failed!';
});
}
function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage) { function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage) {
const article = document.createElement('article'); const article = document.createElement('article');
article.className = 'msg-container msg-remote'; article.className = 'msg-container msg-remote';
article.innerHTML = messageTemplates.twitchTemplate; article.innerHTML = messageTemplates.twitchTemplate;
const userImg = article.querySelector('.icon-container > .user-img'); const userImg = article.querySelector('.icon-container > .user-img');
if (userImg) { if (userImg) {
userImg.src = logoUrl; userImg.src = logoUrl;
} }
const usernameHtml = article.querySelector('.username'); const usernameHtml = article.querySelector('.username');
if (usernameHtml) { if (usernameHtml) {
usernameHtml.innerText = username; usernameHtml.innerText = username;
} }
const postTime = article.querySelector('.post-time'); const postTime = article.querySelector('.post-time');
if (postTime) { if (postTime) {
postTime.innerText = getPostTime(); postTime.innerText = getPostTime();
} }
const msg = article.querySelector('.msg'); const msg = article.querySelector('.msg');
if (msg) { if (msg) {
msg.innerHTML = ""; msg.innerHTML = '';
const messageElement = document.createElement("div"); const messageElement = document.createElement('div');
messageObject.forEach((entry) => { messageObject.forEach((entry) => {
const messageElement = document.createElement("div"); const messageElement = document.createElement('div');
if (entry.text) { if (entry.text) {
messageElement.innerText = entry.text; messageElement.innerText = entry.text;
msg.appendChild(messageElement); msg.appendChild(messageElement);
} else { } else {
messageElement.innerHTML = entry.html; messageElement.innerHTML = entry.html;
msg.appendChild(messageElement); msg.appendChild(messageElement);
} }
}) });
} }
// Appends the message to the main chat box (shows the message) // Appends the message to the main chat box (shows the message)
showChatMessage(article); showChatMessage(article);
if (fileteredMessage) { if (fileteredMessage) {
sound.playVoice(fileteredMessage, logoUrl, username, msg); sound.playVoice(fileteredMessage, logoUrl, username, msg);
} }
window.article = article; window.article = article;
} }
function getProfileImage(userid, username, message, fileteredMessage) { function getProfileImage(userid, username, message, fileteredMessage) {
// Get Access Token // Get user Logo with access token
let options = { options = {
method: 'POST', method: 'GET',
url: 'https://id.twitch.tv/oauth2/token', url: `https://api.twitch.tv/helix/users?id=${userid}`,
data: { headers: { 'Client-ID': settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}` },
grant_type: 'client_credentials', };
client_Id: config.settings.TWITCH.CLIENT_ID,
client_Secret: config.settings.TWITCH.CLIENT_SECRET,
audience: 'YOUR_API_IDENTIFIER',
},
};
axios.request(options).then((responseAccessToken) => { axios
const accessToken = responseAccessToken.data.access_token; .request(options)
.then((responseLogoUrl) => {
// Get user Logo with access token const logoUrl = responseLogoUrl.data.data[0].profile_image_url;
options = { displayTwitchMessage(logoUrl, username, message, fileteredMessage);
method: 'GET', })
url: `https://api.twitch.tv/helix/users?id=${userid}`, .catch((error) => {
headers: { 'Client-ID': config.settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${accessToken}` }, console.error(error);
}; });
axios.request(options).then((responseLogoUrl) => {
const logoUrl = responseLogoUrl.data.data[0].profile_image_url;
displayTwitchMessage(logoUrl, username, message, fileteredMessage);
}).catch((error) => {
console.error(error);
});
}).catch((error) => {
console.error(error);
});
} }
function parseString(inputString) { function parseString(inputString) {
const regex = /(<img.*?\/>)|([^<]+)/g; const regex = /(<img.*?\/>)|([^<]+)/g;
const matches = inputString.match(regex) || []; const matches = inputString.match(regex) || [];
const result = []; const result = [];
for (let i = 0; i < matches.length; i++) { for (let i = 0; i < matches.length; i++) {
const match = matches[i].trim(); const match = matches[i].trim();
if (match.startsWith("<img")) { if (match.startsWith('<img')) {
result.push({ html: match }); result.push({ html: match });
} if (match !== '' && !match.startsWith("<img")) { }
result.push({ text: match }); if (match !== '' && !match.startsWith('<img')) {
} result.push({ text: match });
} }
return result; }
return result;
} }
client.on('message', (channel, tags, message, self) => { client.on('message', (channel, tags, message, self) => {
if (self) { if (self) {
return; return;
} }
const emotes = tags.emotes || {};
const emoteValues = Object.entries(emotes);
let fileteredMessage = message;
let emoteMessage = message;
const emotes = tags.emotes || {}; emoteValues.forEach((entry) => {
const emoteValues = Object.entries(emotes); entry[1].forEach((lol) => {
let fileteredMessage = message; const [start, end] = lol.split('-');
let emoteMessage = message; let emote = `<img src="https://static-cdn.jtvnw.net/emoticons/v2/${entry[0]}/default/dark/1.0"/>`;
emoteMessage = emoteMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), emote);
fileteredMessage = fileteredMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), '');
});
});
emoteValues.forEach((entry) => { let messageObject = parseString(emoteMessage);
entry[1].forEach((lol) => { getProfileImage(tags['user-id'], tags['display-name'], messageObject, fileteredMessage);
const [start, end] = lol.split('-');
let emote = `<img src="https://static-cdn.jtvnw.net/emoticons/v2/${entry[0]}/default/dark/1.0"/>`;
emoteMessage = emoteMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), emote);
fileteredMessage = fileteredMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), '');
})
});
let messageObject = parseString(emoteMessage)
sound.playAudio();
getProfileImage(tags['user-id'], tags['display-name'], messageObject, fileteredMessage);
}); });
module.exports = { sendMessage, ping, client };
module.exports = { sendMessage };

35
src/js/voiceQueue.js
View file

@ -2,26 +2,21 @@ let SelectedVoice = '';
let Encoding = ''; let Encoding = '';
let counter = 0; let counter = 0;
// wrap in promise // wrap in promise
const speak = (textObject) => new Promise((resolve) => { const speak = (textObject) =>
// say.setEncoding(Encoding); new Promise((resolve) => {
counter += 1; // say.setEncoding(Encoding);
let savePath = ''; counter += 1;
let savePath = path.join(resourcesPath, '../src/sounds/tts/internal_audio_' + counter + '.mp3');
if (envInfo.env) { say.export(textObject.filtered, SelectedVoice, 1, savePath, (err) => {
savePath = path.join(envInfo.path, './sounds/tts/internal_audio_' + counter + '.mp3') if (err) {
} else { console.error(err);
savePath = path.join(__dirname, '../sounds/tts/internal_audio_' + counter + '.mp3') } else {
} sound.playAudio({ path: savePath, message: textObject });
}
say.export(textObject.filtered, SelectedVoice, 1, savePath, (err) => { resolve('finished');
if (err) { });
console.error(err);
} else {
sound.playAudio({ "path": savePath, "message": textObject });
}
resolve('finished');
}); });
});
// queue system // queue system
class SayQueue { class SayQueue {
@ -41,7 +36,9 @@ class SayQueue {
add(message, selectedVoice) { add(message, selectedVoice) {
this.messages.push(message); this.messages.push(message);
SelectedVoice = selectedVoice; SelectedVoice = selectedVoice;
if (this.status === 0) { this.shift(); } if (this.status === 0) {
this.shift();
}
} }
} }

350
src/main.js
View file

@ -1,179 +1,273 @@
const { app, BrowserWindow, ipcMain } = require('electron'); const { app, shell, BrowserWindow, ipcMain } = require('electron');
const { writeIniFile } = require('write-ini-file') const writeIniFile = require('write-ini-file');
const path = require('path'); const path = require('path');
const ini = require('ini'); const ini = require('ini');
const fs = require('fs'); const fs = require('fs');
let resourcesPath; let resourcesPath;
let settingsPath;
let settings; let settings;
let window; let window;
if (app.isPackaged) { if (app.isPackaged) {
resourcesPath = path.join(process.resourcesPath, './settings.ini'); resourcesPath = process.resourcesPath;
} else { } else {
resourcesPath = path.join(__dirname, './config/settings.ini'); resourcesPath = __dirname;
} }
// Handle creating/removing shortcuts on Windows when installing/uninstalling. // Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { if (require('electron-squirrel-startup')) {
app.quit(); app.quit();
} }
async function createWindow() { async function createWindow() {
if (!fs.existsSync(resourcesPath)) { if (!fs.existsSync(resourcesPath)) {
await createIniFile(resourcesPath); await createIniFile(path.join(resourcesPath, '../config/settings.ini'));
} else { } else {
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); settingsPath = path.join(resourcesPath, './config/settings.ini');
} settings = ini.parse(fs.readFileSync(settingsPath, 'utf-8'));
}
window = new BrowserWindow({ window = new BrowserWindow({
icon: path.join(__dirname, '/images/icon.png'), icon: path.join(resourcesPath, '/images/icon.png'),
width: parseInt(settings.SETTINGS.WIDTH), width: parseInt(settings.SETTINGS.WIDTH),
height: parseInt(settings.SETTINGS.HEIGHT), height: parseInt(settings.SETTINGS.HEIGHT),
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,
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, contextIsolation: false,
enableRemoteModule: true, enableRemoteModule: true,
}, },
}); });
window.loadURL('https://github.com') window.loadURL('https://github.com');
window.loadFile(path.join(__dirname, 'index.html')); window.loadFile(path.join(resourcesPath, 'index.html'));
if (!app.isPackaged) { 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 settings = ini.parse(fs.readFileSync(settingsPath, '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;
settings.SETTINGS.HEIGHT = bounds.height; settings.SETTINGS.HEIGHT = bounds.height;
settings.SETTINGS.POSITION_X = bounds.x; settings.SETTINGS.POSITION_X = bounds.x;
settings.SETTINGS.POSITION_Y = bounds.y; settings.SETTINGS.POSITION_Y = bounds.y;
fs.writeFileSync(resourcesPath, ini.stringify(settings)); fs.writeFileSync(settingsPath, ini.stringify(settings));
}) });
}; }
app.whenReady().then(() => { app.whenReady().then(() => {
createWindow(); createWindow();
}) });
app.on('window-all-closed', (event) => { app.on('window-all-closed', (event) => {
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {
app.quit(); app.quit();
} }
}); });
app.on('activate', () => { app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the // On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open. // dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) { if (BrowserWindow.getAllWindows().length === 0) {
createWindow(); createWindow();
} }
}); });
ipcMain.on('resize-window', (event, width, height) => { ipcMain.on('resize-window', (event, width, height) => {
const browserWindow = BrowserWindow.fromWebContents(event.sender); const browserWindow = BrowserWindow.fromWebContents(event.sender);
browserWindow.setSize(width, height); browserWindow.setSize(width, height);
}); });
ipcMain.on('minimize-window', (event) => { ipcMain.on('minimize-window', (event) => {
const browserWindow = BrowserWindow.fromWebContents(event.sender); const browserWindow = BrowserWindow.fromWebContents(event.sender);
browserWindow.minimize(); browserWindow.minimize();
}); });
ipcMain.on('maximize-window', (event) => { ipcMain.on('maximize-window', (event) => {
const browserWindow = BrowserWindow.fromWebContents(event.sender); const browserWindow = BrowserWindow.fromWebContents(event.sender);
if (!browserWindow.isMaximized()) { if (!browserWindow.isMaximized()) {
browserWindow.maximize(); browserWindow.maximize();
} else { } else {
browserWindow.unmaximize(); browserWindow.unmaximize();
} }
}); });
ipcMain.on('close-window', (event) => { ipcMain.on('close-window', (event) => {
const browserWindow = BrowserWindow.fromWebContents(event.sender); const browserWindow = BrowserWindow.fromWebContents(event.sender);
browserWindow.close(); browserWindow.close();
app.quit(); app.quit();
});
ipcMain.on('restart', (event) => {
app.relaunch();
}); });
ipcMain.on('environment', (event) => { ipcMain.on('environment', (event) => {
event.returnValue = { "env": app.isPackaged, "path": process.resourcesPath }; event.returnValue = { resourcesPath: resourcesPath, settingsPath: settingsPath, settings: settings };
});
let twitchAuthentication = () =>
new Promise((resolve) => {
const http = require('http');
const redirectUri = 'http://localhost:1989/auth';
const scopes = ['chat:edit', 'chat:read'];
const express = require('express');
let tempAuthServer = express();
const port = 1989;
const { parse: parseQueryString } = require('querystring');
tempAuthServer.use(function (req, res, next) {
if (req.url !== '/auth') {
let token = parseQueryString(req.query.auth);
settings.TWITCH.OAUTH_TOKEN = token['#access_token'];
fs.writeFileSync(settingsPath, ini.stringify(settings));
settings = ini.parse(fs.readFileSync(settingsPath, 'utf-8'));
resolve('finished');
stopServer();
}
next();
});
function stopServer() {
tempAuthServer.close();
}
const htmlString = `
<!DOCTYPE html>
<html>
<head>
<title>Authentication</title>
</head>
<body>
<h1>Authentication successful! You can close this window now.</h1>
<form name="auth" "action="auth" method="get" >
<input type="text" id="auth" name="auth"/>
<input type="submit" />
</form>
</body>
</html>
<script>
function onSubmitComplete() {
close();
}
document.querySelector("#auth").value = document.location.hash;
document.auth.submit();
setTimeout(onSubmitComplete, 500);
</script>
`;
tempAuthServer.get('/auth', (req, res) => {
res.send(htmlString);
});
tempAuthServer.post('/auth', (req, res) => {
res.render('authentication', { name: req.body.name });
});
const server = http.createServer(tempAuthServer);
server.listen(port, () => {
const authURL = `https://id.twitch.tv/oauth2/authorize?client_id=${settings.TWITCH.CLIENT_ID}&redirect_uri=${encodeURIComponent(
redirectUri,
)}&response_type=token&scope=${scopes.join(' ')}`;
shell.openExternal(authURL);
});
function stopServer() {
server.close(() => {});
}
});
ipcMain.on('twitch', async (event) => {
await twitchAuthentication();
event.returnValue = settings.TWITCH.OAUTH_TOKEN;
});
ipcMain.on('vtuber', async (event) => {
shell.openExternal(`http://localhost:${settings.SERVER.PORT}/vtuber/`);
});
ipcMain.on('chatBubble', async (event) => {
shell.openExternal(`http://localhost:${settings.SERVER.PORT}/chat/`);
}); });
async function createIniFile() { async function createIniFile() {
await writeIniFile(resourcesPath, { await writeIniFile(resourcesPath, {
SETTINGS: { SETTINGS: {
VOICE_ENABLED: true, VOICE_ENABLED: true,
NOTIFICATION_ENABLED: true, NOTIFICATION_ENABLED: true,
POSITION_X: 0, POSITION_X: 0,
POSITION_Y: 0, POSITION_Y: 0,
WIDTH: 1024, WIDTH: 1024,
HEIGHT: 768, HEIGHT: 768,
LANGUAGE: "EN" LANGUAGE: 'EN',
}, },
TTS: { TTS: {
PRIMARY_TTS_VOICE: 0, USE_TTS: true,
PRIMARY_TTS_NAME: "", PRIMARY_TTS_VOICE: 0,
PRIMARY_TTS_LANGUAGE: "EN", PRIMARY_TTS_NAME: '',
PRIMARY_TTS_LANGUAGE_INDEX: 0, PRIMARY_TTS_LANGUAGE: 'EN',
SECONDARY_TTS_VOICE: 0, PRIMARY_TTS_LANGUAGE_INDEX: 0,
SECONDARY_TTS_NAME: "", SECONDARY_TTS_VOICE: 0,
SECONDARY_TTS_LANGUAGE: "EN", SECONDARY_TTS_NAME: '',
SECONDARY_TTS_LANGUAGE_INDEX: 0 SECONDARY_TTS_LANGUAGE: 'EN',
}, SECONDARY_TTS_LANGUAGE_INDEX: 0,
AUDIO: { TTS_VOLUME: 50,
NOTIFICATION_AUDIO_DEVICE: 0, },
NOTIFICATION_SOUND: 0, AUDIO: {
NOTIFICATION_VOLUME: 100, USE_NOTIFICATION_SOUNDS: true,
SELECTED_TTS_AUDIO_DEVICE: 0, NOTIFICATION_AUDIO_DEVICE: 0,
TTS_AUDIO_DEVICE: "default", NOTIFICATION_SOUND: 0,
TTS_VOLUME: 100 NOTIFICATION_VOLUME: 50,
}, SELECTED_TTS_AUDIO_DEVICE: 0,
THEME: { TTS_AUDIO_DEVICE: 'default',
USE_CUSTOM_THEME: false, },
MAIN_COLOR_1: "\#cdc1c1", THEME: {
MAIN_COLOR_2: "\#b12020", USE_CUSTOM_THEME: false,
MAIN_COLOR_3: "\#6c4104", MAIN_COLOR_1: '#cdc1c1',
MAIN_COLOR_4: "\#532d2d", MAIN_COLOR_2: '#b12020',
TOP_BAR: "\#c8ff00", MAIN_COLOR_3: '#6c4104',
MID_SECTION: "\#6b8578", MAIN_COLOR_4: '#532d2d',
CHAT_BUBBLE_BG: "\#447466", TOP_BAR: '#c8ff00',
CHAT_BUBBLE_HEADER: "\#ffffff", MID_SECTION: '#6b8578',
CHAT_BUBBLE_MESSAGE: "\#b5b5b5", CHAT_BUBBLE_BG: '#447466',
}, CHAT_BUBBLE_HEADER: '#ffffff',
TWITCH: { CHAT_BUBBLE_MESSAGE: '#b5b5b5',
USE_TWITCH: false, },
CHANNEL_NAME: "khyretos", TWITCH: {
USERNAME: "loquendo", USE_TWITCH: false,
OAUTH_TOKEN: "", CHANNEL_NAME: '',
CLIENT_ID: "", USERNAME: 'loquendo',
CLIENT_SECRET: "", OAUTH_TOKEN: '',
}, CLIENT_ID: '2t206sj7rvtr1rutob3p627d13jch9',
SERVER: { },
USE_SERVER: false, SERVER: {
PORT: "9000", USE_SERVER: false,
USE_VTUBER: false, PORT: '9000',
USE_CHATBUBBLE: false, USE_VTUBER: false,
}, USE_CHATBUBBLE: false,
AMAZON: { },
USE_TWITCH: false, AMAZON: {
ACCESS_KEY: "", USE_TWITCH: false,
ACCESS_SECRET: "", ACCESS_KEY: '',
}, ACCESS_SECRET: '',
GOOGLE: { },
USE_GOOGLE: false, GOOGLE: {
API_KEY: "", USE_GOOGLE: false,
} API_KEY: '',
}).then(() => { },
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); }).then(() => {
}) settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
});
} }

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

@ -1,3 +1,4 @@
// Connect to the Socket.IO server // Connect to the Socket.IO server
const socket = io(); const socket = io();

BIN
src/sounds/tts/internal_audio_6.mp3 Normal file
View file

Binary file not shown.