refactor an lots of changes
This commit is contained in:
Khyretos
parent
7e733233ab
commit
039a16711f
29 changed files with 1802 additions and 1627 deletions
27
package-lock.json
generated
27
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "loquendo-bot",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "loquendo-bot",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0",
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
"franc": "^6.1.0",
|
||||
"i18next-electron-language-detector": "^0.0.10",
|
||||
"ini": "^2.0.0",
|
||||
"kill-port": "^2.0.1",
|
||||
"langdetect": "^0.2.1",
|
||||
"node-google-tts-api": "^1.1.1",
|
||||
"querystring": "^0.2.1",
|
||||
|
|
@ -3331,6 +3332,11 @@
|
|||
"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": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
|
||||
|
|
@ -4013,6 +4019,18 @@
|
|||
"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": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
|
||||
|
|
@ -5899,6 +5917,11 @@
|
|||
"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": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"franc": "^6.1.0",
|
||||
"i18next-electron-language-detector": "^0.0.10",
|
||||
"ini": "^2.0.0",
|
||||
"kill-port": "^2.0.1",
|
||||
"langdetect": "^0.2.1",
|
||||
"node-google-tts-api": "^1.1.1",
|
||||
"querystring": "^0.2.1",
|
||||
|
|
|
|||
|
|
@ -369,7 +369,7 @@ select {
|
|||
.AdvancedMenu {
|
||||
border: 1px var(--main-color2) solid;
|
||||
margin-top: 10px;
|
||||
width: 300px;
|
||||
min-width: 555px;
|
||||
border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -377,6 +377,8 @@ select {
|
|||
.legendStyle {
|
||||
margin-left: 1em;
|
||||
padding: 0.2em 0.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.AdvancedMenuRow {
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@ td {
|
|||
}
|
||||
|
||||
.info {
|
||||
background-color: lightblue;
|
||||
background-color: lightblue !important;
|
||||
}
|
||||
|
||||
.warn {
|
||||
background-color: yellow;
|
||||
background-color: #f39c12 !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: lightcoral;
|
||||
background-color: #e74c3c !important;
|
||||
}
|
||||
|
||||
#logTable {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
|
||||
.OptionPanel.show {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*generated with Input range slider CSS style generator (version 20211225)
|
||||
https://toughengineer.github.io/demo/slider-styler*/
|
||||
input[type=range].styled-slider {
|
||||
input[type='range'].styled-slider {
|
||||
/* height: 500px; */
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -8,43 +8,43 @@ input[type=range].styled-slider {
|
|||
}
|
||||
|
||||
/*progress support*/
|
||||
input[type=range].styled-slider.slider-progress1 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5* 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2 {
|
||||
input[type='range'].styled-slider.slider-progress1 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3 {
|
||||
input[type='range'].styled-slider.slider-progress2 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4 {
|
||||
input[type='range'].styled-slider.slider-progress3 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type='range'].styled-slider.slider-progress4 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
/*webkit*/
|
||||
input[type=range].styled-slider::-webkit-slider-thumb {
|
||||
input[type='range'].styled-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 2em;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px black;
|
||||
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;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
|
|
@ -52,37 +52,33 @@ input[type=range].styled-slider::-webkit-slider-runnable-track {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress1::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
input[type='range'].styled-slider.slider-progress1::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
input[type='range'].styled-slider.slider-progress2::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
input[type='range'].styled-slider.slider-progress3::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
input[type='range'].styled-slider.slider-progress4::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #1a1a1a;
|
||||
}
|
||||
|
||||
/*mozilla*/
|
||||
input[type=range].styled-slider::-moz-range-thumb {
|
||||
input[type='range'].styled-slider::-moz-range-thumb {
|
||||
width: 2em;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px black;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-moz-range-track {
|
||||
input[type='range'].styled-slider::-moz-range-track {
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
|
|
@ -90,45 +86,45 @@ input[type=range].styled-slider::-moz-range-track {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress1::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
input[type='range'].styled-slider.slider-progress1::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
input[type='range'].styled-slider.slider-progress2::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
input[type='range'].styled-slider.slider-progress3::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
input[type='range'].styled-slider.slider-progress4::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0 / var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
/*ms*/
|
||||
input[type=range].styled-slider::-ms-fill-upper {
|
||||
input[type='range'].styled-slider::-ms-fill-upper {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-ms-fill-lower {
|
||||
input[type='range'].styled-slider::-ms-fill-lower {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-ms-thumb {
|
||||
input[type='range'].styled-slider::-ms-thumb {
|
||||
width: 2em;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px black;
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-ms-track {
|
||||
input[type='range'].styled-slider::-ms-track {
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #1a1a1a;
|
||||
|
|
@ -137,7 +133,7 @@ input[type=range].styled-slider::-ms-track {
|
|||
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;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
|
|
@ -146,7 +142,7 @@ input[type=range].styled-slider.slider-progress1::-ms-fill-lower {
|
|||
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;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
|
|
@ -155,7 +151,7 @@ input[type=range].styled-slider.slider-progress2::-ms-fill-lower {
|
|||
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;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
|
|
@ -164,7 +160,7 @@ input[type=range].styled-slider.slider-progress3::-ms-fill-lower {
|
|||
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;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
|
|
@ -175,10 +171,9 @@ input[type=range].styled-slider.slider-progress4::-ms-fill-lower {
|
|||
|
||||
.inputBox {
|
||||
border: none;
|
||||
width: 50px;
|
||||
width: 38px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -73,7 +73,7 @@ section {
|
|||
.scale {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
vertical-align: bottom
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tab {
|
||||
|
|
@ -83,15 +83,14 @@ section {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:checked+label {
|
||||
border-top-color: #FFB03D;
|
||||
border-right-color: #DDD;
|
||||
border-left-color: #DDD;
|
||||
input:checked + label {
|
||||
border-top-color: #ffb03d;
|
||||
border-right-color: #ddd;
|
||||
border-left-color: #ddd;
|
||||
border-bottom-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------- */
|
||||
|
||||
.radius {
|
||||
|
|
@ -129,13 +128,13 @@ input:checked+label {
|
|||
|
||||
.tabx-bar .tabx::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
content: '';
|
||||
width: 26%;
|
||||
height: 13%;
|
||||
border-top-left-radius: 200px;
|
||||
border-top-right-radius: 200px;
|
||||
border-bottom: none;
|
||||
background-color: #607D8B;
|
||||
background-color: #607d8b;
|
||||
/* bottom: -8px; */
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
|
@ -153,7 +152,8 @@ input:checked+label {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx::after {}
|
||||
.tabx-bar .tabx::after {
|
||||
}
|
||||
|
||||
.tabx-bar .tabx:hover {
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -192,7 +192,7 @@ input:checked+label {
|
|||
}
|
||||
|
||||
select {
|
||||
font-size: .9rem;
|
||||
font-size: 0.9rem;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--main-color3);
|
||||
|
|
@ -258,7 +258,7 @@ select {
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
input[type='password'] {
|
||||
background: var(--main-color3);
|
||||
border: none;
|
||||
height: 40px;
|
||||
|
|
@ -272,7 +272,19 @@ input[type="password"] {
|
|||
/* 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);
|
||||
border: none;
|
||||
height: 40px;
|
||||
|
|
@ -292,7 +304,7 @@ input[type="lol"] {
|
|||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
left: 450px;
|
||||
left: 425px;
|
||||
}
|
||||
|
||||
/* Hide the default appearance of the button */
|
||||
|
|
@ -331,20 +343,20 @@ input[type="lol"] {
|
|||
}
|
||||
|
||||
/* Apply different colors based on the toast type */
|
||||
.toast.info {
|
||||
background-color: #3498db;
|
||||
.info {
|
||||
background-color: lightblue !important;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background-color: #2ecc71;
|
||||
.success {
|
||||
background-color: #2ecc71 !important;
|
||||
}
|
||||
|
||||
.toast.warning {
|
||||
background-color: #f39c12;
|
||||
.warning {
|
||||
background-color: #f39c12 !important;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background-color: #e74c3c;
|
||||
.error {
|
||||
background-color: #e74c3c !important;
|
||||
}
|
||||
|
||||
/* CSS animation for the toast appearance */
|
||||
|
|
@ -413,19 +425,30 @@ input[type="lol"] {
|
|||
visibility: visible;
|
||||
} */
|
||||
|
||||
input[type=text]:disabled {
|
||||
background: #dddddd;
|
||||
div[type='text']:disabled {
|
||||
background: #4b4b4b;
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type2=text]:disabled {
|
||||
background: #dddddd;
|
||||
input[type='text']:disabled {
|
||||
background: #4b4b4b;
|
||||
}
|
||||
|
||||
button[type=text]:disabled {
|
||||
background: #dddddd;
|
||||
button[type='text']:disabled {
|
||||
background: #4b4b4b;
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type2='text']:disabled {
|
||||
background: #4b4b4b;
|
||||
}
|
||||
|
||||
div:disabled {
|
||||
background: #dddddd;
|
||||
background: #4b4b4b;
|
||||
filter: brightness(200%);
|
||||
}
|
||||
|
||||
div:disabled {
|
||||
background: #4b4b4b;
|
||||
filter: brightness(200%);
|
||||
}
|
||||
|
|
@ -22,9 +22,10 @@
|
|||
|
||||
#volume-icon {
|
||||
color: var(--main-color2);
|
||||
width: 50px;
|
||||
scale: 0.75;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#image {
|
||||
|
|
|
|||
|
|
@ -67,11 +67,14 @@
|
|||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.volume-icon-container {
|
||||
.option-icon-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
/* width: 78px; */
|
||||
/* float: right; */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.brush-icon-container {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 79 KiB |
3
src/images/note.svg
Normal file
3
src/images/note.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
48
src/images/stt.svg
Normal file
48
src/images/stt.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
28
src/images/theme.svg
Normal file
28
src/images/theme.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
26
src/images/tts.svg
Normal file
26
src/images/tts.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
693
src/index.html
693
src/index.html
|
|
@ -1,47 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>LoquendoBot</title>
|
||||
|
||||
<!--#region css styles -->
|
||||
<link rel="stylesheet" href="./fonts/FRAMCDN/font.css" />
|
||||
<link rel="stylesheet" href="./fonts/Aven/stylesheet.css">
|
||||
<link rel="stylesheet" href="./css/checkbox.css">
|
||||
<link rel="stylesheet" href="./css/chat.css">
|
||||
<link rel="stylesheet" href="./css/home.css">
|
||||
<link rel="stylesheet" href="./css/menu.css">
|
||||
<link rel="stylesheet" href="./css/tabs.css">
|
||||
<link rel="stylesheet" href="./css/tts-menu.css">
|
||||
<link rel="stylesheet" href="./css/volume-slider.css">
|
||||
<link rel="stylesheet" href="./css/sliders.css">
|
||||
<link rel="stylesheet"
|
||||
<link rel="stylesheet" href="./fonts/Aven/stylesheet.css" />
|
||||
<link rel="stylesheet" href="./css/checkbox.css" />
|
||||
<link rel="stylesheet" href="./css/chat.css" />
|
||||
<link rel="stylesheet" href="./css/home.css" />
|
||||
<link rel="stylesheet" href="./css/menu.css" />
|
||||
<link rel="stylesheet" href="./css/tabs.css" />
|
||||
<link rel="stylesheet" href="./css/tts-menu.css" />
|
||||
<link rel="stylesheet" href="./css/volume-slider.css" />
|
||||
<link rel="stylesheet" href="./css/sliders.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
||||
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="./css/logger.css">
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="./css/logger.css" />
|
||||
<!--#endregion -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--#region title bar -->
|
||||
<header id="titlebar">
|
||||
|
||||
<div id="drag-region">
|
||||
<div class="language-selector">
|
||||
<span class="flag-icon" id="selected-flag">🇬🇧</span>
|
||||
<span id="selected-language">EN</span>
|
||||
<div class="language-dropdown" id="languageDropdown">
|
||||
<div class="language-item" language="NL" flag="🇳🇱">🇳🇱
|
||||
NL</div>
|
||||
<div class="language-item" language="ES" flag="🇪🇸">🇪🇸
|
||||
ES</div>
|
||||
<div class="language-item" language="EN" flag="🇬🇧">🇬🇧
|
||||
EN</div>
|
||||
<div class="language-item" language="NL" flag="🇳🇱">🇳🇱 NL</div>
|
||||
<div class="language-item" language="ES" flag="🇪🇸">🇪🇸 ES</div>
|
||||
<div class="language-item" language="EN" flag="🇬🇧">🇬🇧 EN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="window-controls">
|
||||
|
|
@ -60,7 +57,6 @@
|
|||
<!--#endregion -->
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- #region Notifications -->
|
||||
<div id="toasts"></div>
|
||||
<!--#endregion -->
|
||||
|
|
@ -72,22 +68,16 @@
|
|||
<li class="item item-active" tip="Chat" id="btnChat">
|
||||
<i class="fa fa-comments"></i>
|
||||
</li>
|
||||
<li class="item" tip="TTS Settings" id="btnTTS">
|
||||
<i class="fa fa-microphone menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Logs" id="btnLogs">
|
||||
<i class="fa fa-clipboard menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="BrowserSource ChatBubble"
|
||||
id="btnBrowsersourceChat">
|
||||
<li class="item" tip="BrowserSource ChatBubble" id="btnBrowsersourceChat">
|
||||
<i class="fa fa-history menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Vtuber"
|
||||
id="btnBrowsersourceVtuber">
|
||||
<li class="item" tip="Vtuber" id="btnBrowsersourceVtuber">
|
||||
<i class="fa fa-user menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Configuration"
|
||||
id="btnConfiguration">
|
||||
<li class="item" tip="Configuration" id="btnConfiguration">
|
||||
<i class="fa fa-cogs menu-icon"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -102,74 +92,6 @@
|
|||
|
||||
<!-- #region Chat, middle section-->
|
||||
<div class="mid">
|
||||
|
||||
<!-- #region TTS Screen-->
|
||||
<div class="OptionPanel" id="TTS">
|
||||
<div id="tstx">
|
||||
<div>
|
||||
<div id="TTSSelector">
|
||||
<h3 class="LabelText">Primary TTS Voice</h3>
|
||||
<div class="optionrow">
|
||||
<select name="primaryVoice"
|
||||
id="primaryVoice"></select>
|
||||
<select name="language" class="language"
|
||||
id="primaryLanguage"
|
||||
tip="Primary language to detect in chat"></select>
|
||||
<!-- </label> -->
|
||||
</div>
|
||||
<h3 class="LabelText">Secondary TTS Voice</h3>
|
||||
<div class="optionrow">
|
||||
<select name="secondaryVoice"
|
||||
id="secondaryVoice"></select>
|
||||
<select name="language" class="language"
|
||||
id="secondaryLanguage"
|
||||
tip="Secondary language to detect in chat"></select>
|
||||
<!-- </label> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="LabelText">TTS Volume</h3>
|
||||
<div class="optionrow">
|
||||
<div class="middle">
|
||||
<div class="slider-container">
|
||||
<!-- <span class="bar"><span class="fill"></span></span> -->
|
||||
<input
|
||||
id="ttsVolumeSlider"
|
||||
class="styled-slider slider-progress1"
|
||||
type="range" />
|
||||
<!-- <input type="text" id="timetext1"
|
||||
class="inputBox" /> -->
|
||||
</div>
|
||||
<div class="volume-icon-container">
|
||||
<i class="fa fa-volume-up fa-2x"
|
||||
id="volume-icon"></i>
|
||||
<!-- <label class="TTSVolume Basiclabel" id="timetext1">50%</label> -->
|
||||
<input type="text" id="ttsVolume"
|
||||
class="inputBox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="LabelText">Test TTS</h3>
|
||||
<div class="optionrow">
|
||||
<textarea id="TTSTest">Hi, This is a test</textarea>
|
||||
<div class="volume-icon-container"
|
||||
tip="Test TTS">
|
||||
<i
|
||||
class="fa fa-play-circle fa-2x SmallButton"
|
||||
id="TTSTestButton"></i>
|
||||
<label class="testLabel Basiclabel"></label>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="LabelText">TTS Output Device</h3>
|
||||
<div class="optionrow">
|
||||
<select name="ttsAudioDevice"
|
||||
id="ttsAudioDevice"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Commands Screen-->
|
||||
<div class="OptionPanel" id="Logs">
|
||||
<table id="logTable">
|
||||
|
|
@ -187,335 +109,263 @@
|
|||
<!--#endregion -->
|
||||
|
||||
<!-- #region Commands Screen-->
|
||||
<div class="OptionPanel" id="BrowsersourceChat">
|
||||
</div>
|
||||
<div class="OptionPanel" id="BrowsersourceChat"></div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Commands Screen-->
|
||||
<div class="OptionPanel" id="BrowsersourceVtuber">
|
||||
</div>
|
||||
<div class="OptionPanel" id="BrowsersourceVtuber"></div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Configuration Screen-->
|
||||
<div class="OptionPanel" id="Configuration">
|
||||
<div id="tstx">
|
||||
<div>
|
||||
<h3 class="LabelText">Theme</h3>
|
||||
<div class="optionrow">
|
||||
<button class="AdvancedMenuButton"
|
||||
id="ShowThemeCreator">Theme Creator</button>
|
||||
<button class="AdvancedMenuButton" id="ShowThemeCreator">Open Theme Creator</button>
|
||||
</div>
|
||||
|
||||
<h3 class="LabelText">Notification Sound</h3>
|
||||
<div class="optionrow">
|
||||
<select name="notification" id="notification"></select>
|
||||
<div class="volume-icon-container">
|
||||
<i
|
||||
class="fa fa-play-circle fa-2x SmallButton"
|
||||
id="SoundTestButton" tip="Test Sound"></i>
|
||||
<label class="testLabel Basiclabel">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="LabelText">Notification Volume</h3>
|
||||
<div class="optionrow">
|
||||
<div class="middle">
|
||||
<div class="slider-container">
|
||||
<!-- <span class="bar"><span class="fill"></span></span> -->
|
||||
<input
|
||||
id="notificationVolumeSlider"
|
||||
class="styled-slider slider-progress2"
|
||||
type="range" />
|
||||
</div>
|
||||
<div class="volume-icon-container">
|
||||
<i class="fa fa-volume-up fa-2x"
|
||||
id="volume-icon"></i>
|
||||
<!-- <label id="SoundVolume"
|
||||
class="Basiclabel">50%</label> -->
|
||||
<input type="text"
|
||||
id="notificationVolume"
|
||||
class="inputBox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="AdvancedMenuButton"
|
||||
id="ShowAdvancedMenu">Show Advanced</button>
|
||||
<div id="AdvancedMenu_mask">
|
||||
<div class="SaveConfig">
|
||||
<div class="AdvancedMenuRow">
|
||||
<button class="AdvancedMenuButton"
|
||||
id="HideAdvancedMenu">Close
|
||||
Advanced Menu</button>
|
||||
</div>
|
||||
<fieldset id="AdvancedMenuTwitch"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Twitch">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/twitch.svg"
|
||||
alt=" ">
|
||||
<input type="checkbox"
|
||||
id="USE_TWITCH"
|
||||
class="checkbox" />
|
||||
<label for="USE_TWITCH"
|
||||
class="toggle-small "></label>
|
||||
<fieldset id="NotificationMenu" class="AdvancedMenu">
|
||||
<legend class="legendStyle" tip="Enable/Disable notification sounds">
|
||||
<img class="AdvancedMenuIcon" src="./images/tts.svg" alt=" " />
|
||||
<div class="AdvancedMenuLabel">Enable TTS</div>
|
||||
<input type="checkbox" id="USE_TTS" class="checkbox" />
|
||||
<label for="USE_TTS" class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Channel
|
||||
Name</div><input type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_CHANNEL_NAME">
|
||||
<div class="AdvancedMenuRow inputTTS">
|
||||
<div class="AdvancedMenuLabel">Primary TTS Voice</div>
|
||||
<select name="primaryVoice" id="primaryVoice"></select>
|
||||
<select
|
||||
name="language"
|
||||
class="language"
|
||||
id="primaryLanguage"
|
||||
tip="Primary language to detect in chat"
|
||||
></select>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow inputTTS">
|
||||
<div class="AdvancedMenuLabel">Secondary TTS Voice</div>
|
||||
<select name="secondaryVoice" id="secondaryVoice"></select>
|
||||
<select
|
||||
name="language"
|
||||
class="language"
|
||||
id="secondaryLanguage"
|
||||
tip="Secondary language to detect in chat"
|
||||
></select>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow inputTTS">
|
||||
<div class="AdvancedMenuLabel">TTS Volume</div>
|
||||
<div class="slider-container">
|
||||
<input id="ttsVolumeSlider" class="styled-slider slider-progress1" type="range" />
|
||||
</div>
|
||||
<div class="option-icon-container">
|
||||
<i class="fa fa-volume-up fa-2x" id="volume-icon"></i>
|
||||
<input type="text" id="ttsVolume" class="inputBox" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow inputTTS">
|
||||
<div class="AdvancedMenuLabel">Test TTS</div>
|
||||
<textarea id="TTSTest">Hi, This is a test</textarea>
|
||||
<div class="option-icon-container" tip="Test TTS">
|
||||
<i class="fa fa-play-circle fa-2x SmallButton option-icon-container" id="TTSTestButton"></i>
|
||||
<label class="testLabel Basiclabel"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow inputTTS">
|
||||
<div class="AdvancedMenuLabel">TTS Output Device</div>
|
||||
<select name="ttsAudioDevice" id="ttsAudioDevice"></select>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="NotificationMenu" class="AdvancedMenu">
|
||||
<legend class="legendStyle" tip="Enable/Disable notification sounds">
|
||||
<img class="AdvancedMenuIcon" src="./images/note.svg" alt=" " />
|
||||
<div class="AdvancedMenuLabel">Enable notification sounds</div>
|
||||
<input type="checkbox" id="USE_NOTIFICATION_SOUNDS" class="checkbox" />
|
||||
<label for="USE_NOTIFICATION_SOUNDS" class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow inputNotificationSound">
|
||||
<div class="AdvancedMenuLabel">Notification Volume</div>
|
||||
<div class="slider-container">
|
||||
<input id="notificationVolumeSlider" class="styled-slider slider-progress2" type="range" />
|
||||
</div>
|
||||
<div class="option-icon-container">
|
||||
<i class="fa fa-volume-up fa-2x" id="volume-icon"></i>
|
||||
<input type="text" id="notificationVolume" class="inputBox" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow inputNotificationSound">
|
||||
<div class="AdvancedMenuLabel">Notification Sound</div>
|
||||
<select name="notification" id="notification"></select>
|
||||
<div class="option-icon-container">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-play-circle fa-2x SmallButton option-icon-container"
|
||||
id="SoundTestButton"
|
||||
tip="Test Sound"
|
||||
></i>
|
||||
<label class="testLabel Basiclabel"></label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="TwitchMenu" class="AdvancedMenu">
|
||||
<legend class="legendStyle" tip="Enable/Disable Twitch">
|
||||
<img class="AdvancedMenuIcon" src="./images/twitch.svg" alt=" " />
|
||||
|
||||
<div class="AdvancedMenuLabel">Enable Twitch</div>
|
||||
<input type="checkbox" id="USE_TWITCH" class="checkbox" />
|
||||
<label for="USE_TWITCH" class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow inputTwitch">
|
||||
<div class="AdvancedMenuLabel">Channel Name</div>
|
||||
<input type="text" class="fname inputTwitch" id="TWITCH_CHANNEL_NAME" />
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_TWITCH_CHANNEL_NAME"
|
||||
tip="The channel you want to connect to"></i>
|
||||
tip="The channel you want to connect to"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Username</div><input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_USERNAME">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_TWITCH_CHANNEL_NAME"
|
||||
tip="The channel you want to connect to"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Oauth
|
||||
Token</div>
|
||||
<input
|
||||
type="password"
|
||||
type2="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_OAUTH_TOKEN">
|
||||
<button
|
||||
class="password-toggle-btn password-toggle-btn1">
|
||||
<span
|
||||
class="password-toggle-icon">👁️</span>
|
||||
</button>
|
||||
</input>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_USERNAME"
|
||||
tip="Your Twitch username"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Client
|
||||
ID</div><input
|
||||
type="password"
|
||||
type2="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_CLIENT_ID">
|
||||
<button
|
||||
class="password-toggle-btn password-toggle-btn2">
|
||||
<span
|
||||
class="password-toggle-icon">👁️</span>
|
||||
<div class="AdvancedMenuRow inputTwitch">
|
||||
<div class="AdvancedMenuLabel">Oauth Token</div>
|
||||
<input type="password" type2="text" class="fname inputTwitch" id="TWITCH_OAUTH_TOKEN" />
|
||||
<button class="password-toggle-btn password-toggle-btn1">
|
||||
<span class="password-toggle-icon">👁️</span>
|
||||
</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_USERNAME"
|
||||
tip="Your Twitch username"></i>
|
||||
tip="Get OAuth Token"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Client
|
||||
Secret</div><input
|
||||
type="password"
|
||||
type2="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_CLIENT_SECRET">
|
||||
<button
|
||||
class="password-toggle-btn password-toggle-btn3">
|
||||
<span
|
||||
class="password-toggle-icon">👁️</span>
|
||||
</button>
|
||||
<div class="AdvancedMenuRow inputTwitch">
|
||||
<div class="AdvancedMenuLabel">Test credentials</div>
|
||||
<button type="text" class="AdvancedMenuButton" id="TestTwitchCredentials">Test</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_USERNAME"
|
||||
tip="Your Twitch username"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Test credentials</div>
|
||||
<button
|
||||
class="AdvancedMenuButton"
|
||||
id="TestTwitchCredentials">Test</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_TWITCH_TEST_CREDENTIALS"
|
||||
tip="Test Twitch credentials"></i>
|
||||
tip="Test Twitch credentials"
|
||||
></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="AdvancedMenuServer"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Server">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/server.svg"
|
||||
alt>
|
||||
<input type="checkbox"
|
||||
id="USE_SERVER"
|
||||
class="checkbox" />
|
||||
<label for="USE_SERVER"
|
||||
class="toggle-small "></label>
|
||||
<fieldset id="AdvancedMenuServer" class="AdvancedMenu">
|
||||
<legend class="legendStyle" tip="Enable/Disable Server">
|
||||
<img class="AdvancedMenuIcon" src="./images/server.svg" alt />
|
||||
<div class="AdvancedMenuLabel">Enable Server</div>
|
||||
<input type="checkbox" id="USE_SERVER" class="checkbox" />
|
||||
<label for="USE_SERVER" class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuRow inputServer">
|
||||
<div class="AdvancedMenuLabel">Port</div>
|
||||
<input
|
||||
type="text"
|
||||
class="fname inputServer"
|
||||
id="PORT">
|
||||
<input type="text" class="fname inputServer" id="PORT" />
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_PORT"
|
||||
tip="Port to use to host additional services"></i>
|
||||
tip="Port to use to host additional services"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Use
|
||||
Vtuber</div>
|
||||
<input type="checkbox"
|
||||
id="USE_VTUBER"
|
||||
class="checkbox" />
|
||||
<label for="USE_VTUBER"
|
||||
class="toggle-small "></label>
|
||||
<div class="AdvancedMenuRow inputServer">
|
||||
<div class="AdvancedMenuLabel">Use Vtuber</div>
|
||||
<input type="checkbox" id="USE_VTUBER" class="checkbox" />
|
||||
<label for="USE_VTUBER" class="toggle-small "></label>
|
||||
<input type="url" type2="text" class="fname inputServer" id="VTUBER_URL" />
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_VTUBER"
|
||||
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"></i>
|
||||
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Use
|
||||
ChatBubble</div>
|
||||
<input type="checkbox"
|
||||
id="USE_CHATBUBBLE"
|
||||
class="checkbox" />
|
||||
<label for="USE_CHATBUBBLE"
|
||||
class="toggle-small "></label>
|
||||
<div class="AdvancedMenuRow inputServer">
|
||||
<div class="AdvancedMenuLabel">Use ChatBubble</div>
|
||||
<input type="checkbox" id="USE_CHATBUBBLE" class="checkbox" />
|
||||
<label for="USE_CHATBUBBLE" class="toggle-small "></label>
|
||||
<input type="url" type2="text" class="fname inputServer" id="CHATBUBBLE_URL" />
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_CHATBUBBLE"
|
||||
tip="You can use it as a browsersource on http://localhost:PORT/chat"></i>
|
||||
tip="You can use it as a browsersource on http://localhost:PORT/chat"
|
||||
></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="AdvancedMenuAmazon"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Amazon">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/amazon.svg"
|
||||
alt>
|
||||
<input type="checkbox"
|
||||
id="USE_AMAZON"
|
||||
class="checkbox" />
|
||||
<label for="USE_AMAZON"
|
||||
class="toggle-small "></label>
|
||||
<fieldset id="AdvancedMenuAmazon" class="AdvancedMenu">
|
||||
<legend class="legendStyle" tip="Enable/Disable Amazon">
|
||||
<img class="AdvancedMenuIcon" src="./images/amazon.svg" alt />
|
||||
<div class="AdvancedMenuLabel">Enable Amazon TTS</div>
|
||||
<input type="checkbox" id="USE_AMAZON" class="checkbox" />
|
||||
<label for="USE_AMAZON" class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Access Key</div>
|
||||
<input
|
||||
type="password"
|
||||
type2="text"
|
||||
class="fname inputAmazon"
|
||||
id="AMAZON_ACCESS_KEY"><button
|
||||
class="password-toggle-btn password-toggle-btn4">
|
||||
<span
|
||||
class="password-toggle-icon">👁️</span>
|
||||
<div class="AdvancedMenuRow inputAmazon">
|
||||
<div class="AdvancedMenuLabel">Access Key</div>
|
||||
<input type="password" type2="text" class="fname inputAmazon" id="AMAZON_ACCESS_KEY" /><button
|
||||
class="password-toggle-btn password-toggle-btn4"
|
||||
>
|
||||
<span class="password-toggle-icon">👁️</span>
|
||||
</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_AMAZON_ACCESS_KEY"
|
||||
tip="Amazon Access Key"></i>
|
||||
tip="Amazon Access Key"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Access Secret</div>
|
||||
<input
|
||||
type="password"
|
||||
type2="text"
|
||||
class="fname inputAmazon"
|
||||
id="AMAZON_ACCESS_SECRET"><button
|
||||
class="password-toggle-btn password-toggle-btn5">
|
||||
<span
|
||||
class="password-toggle-icon">👁️</span>
|
||||
<div class="AdvancedMenuRow inputAmazon">
|
||||
<div class="AdvancedMenuLabel">Access Secret</div>
|
||||
<input type="password" type2="text" class="fname inputAmazon" id="AMAZON_ACCESS_SECRET" /><button
|
||||
class="password-toggle-btn password-toggle-btn5"
|
||||
>
|
||||
<span class="password-toggle-icon">👁️</span>
|
||||
</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_AMAZON_ACCESS_SECRET"
|
||||
tip="Amazon Access Secret"></i>
|
||||
tip="Amazon Access Secret"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Test credentials</div>
|
||||
<button
|
||||
class="AdvancedMenuButton"
|
||||
id="TestAmazonCredentials">Test</button>
|
||||
<div class="AdvancedMenuRow inputAmazon">
|
||||
<div class="AdvancedMenuLabel">Test credentials</div>
|
||||
<button type="text" class="AdvancedMenuButton" id="TestAmazonCredentials">Test</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_AMAZON_TEST_CREDENTIALS"
|
||||
tip="Test Amazon credentials"></i>
|
||||
tip="Test Amazon credentials"
|
||||
></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="AdvancedMenuGoogle"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Google service">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/google.svg"
|
||||
alt>
|
||||
<input type="checkbox"
|
||||
id="USE_GOOGLE"
|
||||
class="checkbox" />
|
||||
<label for="USE_GOOGLE"
|
||||
class="toggle-small "></label>
|
||||
<fieldset id="AdvancedMenuGoogle" class="AdvancedMenu">
|
||||
<legend class="legendStyle" tip="Enable/Disable Google service">
|
||||
<img class="AdvancedMenuIcon" src="./images/google.svg" alt />
|
||||
<div class="AdvancedMenuLabel">Enable Google TTS</div>
|
||||
<input type="checkbox" id="USE_GOOGLE" class="checkbox" />
|
||||
<label for="USE_GOOGLE" class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
API Key</div>
|
||||
<input
|
||||
type="password"
|
||||
type2="text"
|
||||
class="fname inputGoogle"
|
||||
id="GOOGLE_API_KEY"><button
|
||||
class="password-toggle-btn password-toggle-btn6">
|
||||
<span
|
||||
class="password-toggle-icon">👁️</span>
|
||||
<div class="AdvancedMenuRow inputGoogle">
|
||||
<div class="AdvancedMenuLabel">API Key</div>
|
||||
<input type="password" type2="text" class="fname inputGoogle" id="GOOGLE_API_KEY" /><button
|
||||
class="password-toggle-btn password-toggle-btn6"
|
||||
>
|
||||
<span class="password-toggle-icon">👁️</span>
|
||||
</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_GOOGLE_APPI_KEY"
|
||||
tip="Google API Key"></i>
|
||||
tip="Google API Key"
|
||||
></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Test credentials</div>
|
||||
<button
|
||||
class="fname inputGoogle AdvancedMenuButton"
|
||||
id="TestGoogleCredentials">Test</button>
|
||||
<div class="AdvancedMenuRow inputGoogle">
|
||||
<div class="AdvancedMenuLabel">Test credentials</div>
|
||||
<button type="text" class="AdvancedMenuButton" id="TestGoogleCredentials">Test</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
||||
id="Info_GOOGLE_TEST_CREDENTIALS"
|
||||
tip="Test Google credentials"></i>
|
||||
tip="Test Google credentials"
|
||||
></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ThemeCreator_mask">
|
||||
<div class="SaveConfig">
|
||||
<div class="AdvancedMenuRow">
|
||||
<button class="AdvancedMenuButton"
|
||||
id="HideThemeCreator">Close
|
||||
Theme Creator</button>
|
||||
<button class="AdvancedMenuButton" id="HideThemeCreator">Close Theme Creator</button>
|
||||
<label class="testLabel Basiclabel"></label>
|
||||
</div>
|
||||
|
||||
<div id="mini-container">
|
||||
<div id="mini-top-bar">
|
||||
</div>
|
||||
<div id="mini-top-bar"></div>
|
||||
<div id="mini-main">
|
||||
<div id="mini-left"></div>
|
||||
<div id="mini-mid"></div>
|
||||
|
|
@ -524,91 +374,49 @@
|
|||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend id="legendStyle"
|
||||
tip="Enable/Disable Custom Theme">
|
||||
<svg width="24" height="24"
|
||||
viewBox="0 0 24 24"><path
|
||||
d="M4 21.832c4.587.38 2.944-4.493 7.188-4.538l1.838 1.534c.458 5.538-6.315 6.773-9.026 3.004zm14.065-7.115c1.427-2.239 5.847-9.749 5.847-9.749.352-.623-.43-1.273-.976-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.039 3.995-2.81zm-11.999 3.876c.666-1.134 1.748-2.977 4.447-3.262.434-2.087.607-3.3 2.547-5.112 1.373-1.282 4.938-4.409 7.021-6.229-1-2.208-4.141-4.023-8.178-3.99-6.624.055-11.956 5.465-11.903 12.092.023 2.911 1.081 5.571 2.82 7.635 1.618.429 2.376.348 3.246-1.134zm6.952-15.835c1.102-.006 2.005.881 2.016 1.983.004 1.103-.882 2.009-1.986 2.016-1.105.009-2.008-.88-2.014-1.984-.013-1.106.876-2.006 1.984-2.015zm-5.997 2.001c1.102-.01 2.008.877 2.012 1.983.012 1.106-.88 2.005-1.98 2.016-1.106.007-2.009-.881-2.016-1.988-.009-1.103.877-2.004 1.984-2.011zm-2.003 5.998c1.106-.007 2.01.882 2.016 1.985.01 1.104-.88 2.008-1.986 2.015-1.105.008-2.005-.88-2.011-1.985-.011-1.105.879-2.004 1.981-2.015zm10.031 8.532c.021 2.239-.882 3.718-1.682 4.587l-.046.044c5.255-.591 9.062-4.304 6.266-7.889-1.373 2.047-2.534 2.442-4.538 3.258z" /></svg>
|
||||
<input type="checkbox"
|
||||
id="USE_CUSTOM_THEME"
|
||||
class="checkbox" />
|
||||
<label for="USE_CUSTOM_THEME"
|
||||
class="toggle-small">
|
||||
<legend class="legendStyle" tip="Enable/Disable Custom Theme">
|
||||
<img class="AdvancedMenuIcon" src="./images/theme.svg" alt />
|
||||
<div class="AdvancedMenuLabel">Enable Custom Theme</div>
|
||||
<input type="checkbox" id="USE_CUSTOM_THEME" class="checkbox" />
|
||||
<label for="USE_CUSTOM_THEME" class="toggle-small"></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_1"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Main
|
||||
Color 1</div>
|
||||
<input type="color" id="MAIN_COLOR_1" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Main Color 1</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_2"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Main
|
||||
Color 2</div>
|
||||
<input type="color" id="MAIN_COLOR_2" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Main Color 2</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_3"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Main
|
||||
Color 3</div>
|
||||
<input type="color" id="MAIN_COLOR_3" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Main Color 3</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_4"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Main
|
||||
Color 4</div>
|
||||
<input type="color" id="MAIN_COLOR_4" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Main Color 4</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="TOP_BAR"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Top
|
||||
Bar</div>
|
||||
<input type="color" id="TOP_BAR" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Top Bar</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="MID_SECTION"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Mid
|
||||
Section</div>
|
||||
<input type="color" id="MID_SECTION" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Mid Section</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="CHAT_BUBBLE_BG"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Chat
|
||||
Bubble Background</div>
|
||||
<input type="color" id="CHAT_BUBBLE_BG" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Chat Bubble Background</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="CHAT_BUBBLE_HEADER"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Chat
|
||||
Bubble Header</div>
|
||||
<input type="color" id="CHAT_BUBBLE_HEADER" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Chat Bubble Header</div>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<input type="color"
|
||||
id="CHAT_BUBBLE_MESSAGE"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel2">Chat
|
||||
Bubble Message</div>
|
||||
<input type="color" id="CHAT_BUBBLE_MESSAGE" value="#0000ff" />
|
||||
<div class="AdvancedMenuLabel2">Chat Bubble Message</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -618,25 +426,19 @@
|
|||
|
||||
<!-- #region Main chat box-->
|
||||
<div class="OptionPanel show" id="Chat">
|
||||
<div id="chatBox" class="message-window">
|
||||
</div>
|
||||
<div id="chatBox" class="message-window"></div>
|
||||
<!-- User input box-->
|
||||
<div id="userInput" class="chat-input">
|
||||
|
||||
<!-- User text input-->
|
||||
<input id="textInput" class="input-box"
|
||||
type="text" name="msg"
|
||||
placeholder="Tap 'Enter' to send a message">
|
||||
<input id="textInput" class="input-box" type="text" name="msg" placeholder="Tap 'Enter' to send a message" />
|
||||
|
||||
<!-- Send button-->
|
||||
<button class="SmallButton" id="SendButton">
|
||||
<i class="fa fa-play-circle fa-2x"
|
||||
aria-hidden="true"></i>
|
||||
<i class="fa fa-play-circle fa-2x" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
|
|
@ -644,19 +446,15 @@
|
|||
<div class="sidepanel-right">
|
||||
<div class="viewer-list">
|
||||
<div class="tabx-bar">
|
||||
<a class="tabx" href="#"
|
||||
data-text="Twitch">
|
||||
<img class="tab"
|
||||
src="./images/twitch.svg" alt=" ">
|
||||
<a class="tabx" href="#" data-text="Twitch">
|
||||
<img class="tab" src="./images/twitch.svg" alt=" " />
|
||||
</a>
|
||||
</div>
|
||||
<section id="content1">
|
||||
<h1 class="titles">Moderators</h1>
|
||||
<ul class="no-bullets" id="moderators">
|
||||
</ul>
|
||||
<ul class="no-bullets" id="moderators"></ul>
|
||||
<h1 class="titles">Viewers</h1>
|
||||
<ul class="no-bullets" id="viewers">
|
||||
</ul>
|
||||
<ul class="no-bullets" id="viewers"></ul>
|
||||
</section>
|
||||
<section id="content2">
|
||||
<ul class="no-bullets">
|
||||
|
|
@ -685,5 +483,4 @@
|
|||
<!-- #region js scripts -->
|
||||
<script src="./js/renderer.js"></script>
|
||||
<!--#endregion -->
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
65
src/js/auth.js
Normal file
65
src/js/auth.js
Normal 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");
|
||||
});
|
||||
|
|
@ -117,7 +117,6 @@ displayPanel('.OptionPanel', '#Configuration', '#btnConfiguration');
|
|||
displayPanel('.OptionPanel', '#Logs', '#btnLogs');
|
||||
displayPanel('.OptionPanel', '#BrowsersourceChat', '#btnBrowsersourceChat');
|
||||
displayPanel('.OptionPanel', '#BrowsersourceVtuber', '#btnBrowsersourceVtuber');
|
||||
displayPanel('.OptionPanel', '#TTS', '#btnTTS');
|
||||
displayPanel('.OptionPanel', '#Chat', '#btnChat');
|
||||
// #endregion
|
||||
|
||||
|
|
@ -142,25 +141,12 @@ const displayPanelX = (panelSelectorClass, panelSelectorID, btnSelectorID) => {
|
|||
});
|
||||
};
|
||||
|
||||
displayPanelX('.item', '#btnTTS', '#btnTTS');
|
||||
displayPanelX('.item', '#btnChat', '#btnChat');
|
||||
displayPanelX('.item', '#btnBrowsersourceChat', '#btnBrowsersourceChat');
|
||||
displayPanelX('.item', '#btnBrowsersourceVtuber', '#btnBrowsersourceVtuber');
|
||||
displayPanelX('.item', '#btnLogs', '#btnLogs');
|
||||
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
|
||||
document.body.querySelector('#ShowThemeCreator').addEventListener('click', () => {
|
||||
document.getElementById('ThemeCreator_mask').style.visibility = 'visible';
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ const logger = createLogger({
|
|||
format: fileFormat,
|
||||
transports: [
|
||||
new transports.File({
|
||||
filename: path.join(__dirname, '../logs/error.log'),
|
||||
filename: path.join(resourcesPath, '../logs/error.log'),
|
||||
level: 'error',
|
||||
}),
|
||||
new transports.File({
|
||||
filename: path.join(__dirname, '../logs/activity.log'),
|
||||
filename: path.join(resourcesPath, '../logs/activity.log'),
|
||||
maxsize: 5242880,
|
||||
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((logData) => {
|
||||
const logLines = logData.trim().split('\n');
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
const fs = require('fs');
|
||||
const ini = require('ini');
|
||||
const path = require('path'); // get directory path
|
||||
const {
|
||||
ipcRenderer,
|
||||
} = require('electron'); // necessary electron libraries to send data to the app
|
||||
|
||||
const { ipcRenderer } = require('electron'); // necessary electron libraries to send data to the app
|
||||
const say = require('say');
|
||||
const request = require('request');
|
||||
const langdetect = require('langdetect');
|
||||
const io = require('socket.io-client');
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
const util = require('util');
|
||||
const exec = util.promisify(require('child_process').exec);
|
||||
|
||||
|
|
@ -17,16 +16,18 @@ const GoogleTTS = require('node-google-tts-api');
|
|||
const tts = new GoogleTTS();
|
||||
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
|
||||
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)
|
||||
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
|
||||
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 ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
||||
|
||||
|
||||
// laod local javascript files
|
||||
const chat = require(path.join(__dirname, './js/chat'));
|
||||
const chat = require(path.join(resourcesPath, './js/chat'));
|
||||
|
||||
const messageTemplates = require(path.join(__dirname, './js/messageTemplates'));
|
||||
const logger = require(path.join(__dirname, './js/logger'));
|
||||
const sound = require(path.join(__dirname, './js/sound'));
|
||||
const talk = require(path.join(__dirname, './js/voiceQueue')); // Voice queue system
|
||||
const config = require(path.join(__dirname, './js/settings'));
|
||||
const messageTemplates = require(path.join(resourcesPath, './js/messageTemplates'));
|
||||
const logger = require(path.join(resourcesPath, './js/logger'));
|
||||
const sound = require(path.join(resourcesPath, './js/sound'));
|
||||
const talk = require(path.join(resourcesPath, './js/voiceQueue')); // Voice queue system
|
||||
const config = require(path.join(resourcesPath, './js/settings'));
|
||||
|
||||
let notificationSounds = undefined;
|
||||
if (envInfo.env) {
|
||||
notificationSounds = path.join(envInfo.path, './sounds/notifications');
|
||||
} else {
|
||||
notificationSounds = path.join(__dirname, './sounds/notifications');
|
||||
let notificationSounds = path.join(resourcesPath, './sounds/notifications');
|
||||
|
||||
let twitch = require(path.join(resourcesPath, './js/twitch'));
|
||||
|
||||
function reset() {
|
||||
ipcRenderer.send('restart');
|
||||
}
|
||||
|
||||
const twitch = config.settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : '';
|
||||
|
||||
let server;
|
||||
let socket;
|
||||
|
||||
if (config.settings.SERVER.USE_SERVER) {
|
||||
server = require(path.join(__dirname, './js/server'));
|
||||
socket = io(`http://localhost:${config.settings.SERVER.PORT}`); // Connect to your Socket.IO server
|
||||
function setServer() {
|
||||
if (!settings.SERVER.USE_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')) : '';
|
||||
const google = config.settings.GOOGLE.USE_GOOGLE ? require(path.join(__dirname, './js/amazon')) : '';
|
||||
setServer();
|
||||
|
||||
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
|
||||
config.getGeneralSettings();
|
||||
config.setCustomThemeToggle();
|
||||
|
||||
|
||||
let selectedVoiceIndex;
|
||||
let selectedEncodingIndex;
|
||||
let selectedTtsAudioDeviceIndex;
|
||||
const TTSVolume = 1;
|
||||
|
||||
const notificationSoundVolume = 1;
|
||||
|
|
@ -85,8 +84,8 @@ const StartDateAndTime = Date.now();
|
|||
const speakButton = document.querySelector('#speakBtn');
|
||||
|
||||
const amazonCredentials = {
|
||||
accessKeyId: config.settings.AMAZON.ACCESS_KEY,
|
||||
secretAccessKey: config.settings.AMAZON.ACCESS_SECRET,
|
||||
accessKeyId: settings.AMAZON.ACCESS_KEY,
|
||||
secretAccessKey: settings.AMAZON.ACCESS_SECRET,
|
||||
};
|
||||
|
||||
// Check for installed sounds
|
||||
|
|
@ -104,7 +103,7 @@ fs.readdir(notificationSounds, (err, files) => {
|
|||
});
|
||||
|
||||
// set the saved notification sound
|
||||
notificationSound.selectedIndex = config.settings.AUDIO.NOTIFICATION_SOUND;
|
||||
notificationSound.selectedIndex = settings.AUDIO.NOTIFICATION_SOUND;
|
||||
});
|
||||
|
||||
async function getAudioDevices() {
|
||||
|
|
@ -123,7 +122,7 @@ async function getAudioDevices() {
|
|||
ttsAudioDevices.appendChild(option);
|
||||
});
|
||||
|
||||
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
|
||||
ttsAudioDevices.selectedIndex = settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
|
||||
}
|
||||
|
||||
getAudioDevices();
|
||||
|
|
@ -144,17 +143,16 @@ function setLanguagesinSelect(languageSelector, setting) {
|
|||
languageSelect.selectedIndex = setting;
|
||||
}
|
||||
|
||||
setLanguagesinSelect("#primaryLanguage", config.settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX);
|
||||
setLanguagesinSelect("#secondaryLanguage", config.settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX);
|
||||
setLanguagesinSelect('#primaryLanguage', settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX);
|
||||
setLanguagesinSelect('#secondaryLanguage', settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX);
|
||||
|
||||
function getInstalledVoices(callback) {
|
||||
say.getInstalledVoices((err, voices) => {
|
||||
|
||||
function setVoicesinSelect(voiceSelector) {
|
||||
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
|
||||
|
||||
const internalTTSHeader = document.createElement('optgroup');
|
||||
internalTTSHeader.label = "Internal TTS";
|
||||
internalTTSHeader.label = 'Internal TTS';
|
||||
voiceSelect.appendChild(internalTTSHeader);
|
||||
|
||||
// const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
|
||||
|
|
@ -168,15 +166,15 @@ function getInstalledVoices(callback) {
|
|||
internalTTSHeader.appendChild(option);
|
||||
});
|
||||
}
|
||||
setVoicesinSelect("#primaryVoice");
|
||||
setVoicesinSelect("#secondaryVoice");
|
||||
setVoicesinSelect('#primaryVoice');
|
||||
setVoicesinSelect('#secondaryVoice');
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
function getAmazonVoices(callback) {
|
||||
if (!config.settings.AMAZON.USE_AMAZON) {
|
||||
if (!settings.AMAZON.USE_AMAZON) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
|
@ -185,7 +183,7 @@ function getAmazonVoices(callback) {
|
|||
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
|
||||
|
||||
const internalTTSHeader = document.createElement('optgroup');
|
||||
internalTTSHeader.label = "Amazon TTS";
|
||||
internalTTSHeader.label = 'Amazon TTS';
|
||||
voiceSelect.appendChild(internalTTSHeader);
|
||||
|
||||
const voices = Object.keys(amazonVoices);
|
||||
|
|
@ -199,14 +197,14 @@ function getAmazonVoices(callback) {
|
|||
});
|
||||
}
|
||||
|
||||
setVoicesinSelect("#primaryVoice");
|
||||
setVoicesinSelect("#secondaryVoice");
|
||||
setVoicesinSelect('#primaryVoice');
|
||||
setVoicesinSelect('#secondaryVoice');
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
function getGoogleVoices(callback) {
|
||||
if (!config.settings.GOOGLE.USE_GOOGLE) {
|
||||
if (!settings.GOOGLE.USE_GOOGLE) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
|
@ -215,14 +213,14 @@ function getGoogleVoices(callback) {
|
|||
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
|
||||
|
||||
const internalTTSHeader = document.createElement('optgroup');
|
||||
internalTTSHeader.label = "Google TTS";
|
||||
internalTTSHeader.label = 'Google TTS';
|
||||
voiceSelect.appendChild(internalTTSHeader);
|
||||
|
||||
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
|
||||
const voices = Object.keys(googleVoices);
|
||||
voices.forEach((voice) => {
|
||||
const option = document.createElement('option');
|
||||
option.classList.add("option");
|
||||
option.classList.add('option');
|
||||
|
||||
option.value = voice;
|
||||
option.innerHTML = googleVoices[voice];
|
||||
|
|
@ -230,8 +228,8 @@ function getGoogleVoices(callback) {
|
|||
internalTTSHeader.appendChild(option);
|
||||
});
|
||||
}
|
||||
setVoicesinSelect("#primaryVoice");
|
||||
setVoicesinSelect("#secondaryVoice");
|
||||
setVoicesinSelect('#primaryVoice');
|
||||
setVoicesinSelect('#secondaryVoice');
|
||||
|
||||
callback();
|
||||
}
|
||||
|
|
@ -239,11 +237,11 @@ function getGoogleVoices(callback) {
|
|||
getGoogleVoices(function () {
|
||||
getAmazonVoices(function () {
|
||||
getInstalledVoices(function () {
|
||||
let primaryVoice = document.querySelector("#primaryVoice");
|
||||
primaryVoice.selectedIndex = config.settings.TTS.PRIMARY_TTS_VOICE;
|
||||
let primaryVoice = document.querySelector('#primaryVoice');
|
||||
primaryVoice.selectedIndex = settings.TTS.PRIMARY_TTS_VOICE;
|
||||
|
||||
let secondaryVoice = document.querySelector("#secondaryVoice");
|
||||
secondaryVoice.selectedIndex = config.settings.TTS.SECONDARY_TTS_VOICE;
|
||||
let secondaryVoice = document.querySelector('#secondaryVoice');
|
||||
secondaryVoice.selectedIndex = settings.TTS.SECONDARY_TTS_VOICE;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -256,17 +254,18 @@ Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
|
|||
tip.classList.add('tooltip');
|
||||
tip.classList.add('tooltiptext');
|
||||
tip.innerText = el.getAttribute('tip');
|
||||
tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px'
|
||||
tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${
|
||||
el.hasAttribute('tip-top') ? '-100%' : '15px'
|
||||
})`;
|
||||
body.appendChild(tip);
|
||||
element.onmousemove = (e) => {
|
||||
tip.style.left = `${e.x}px`;
|
||||
tip.style.top = `${e.y}px`;
|
||||
tip.style.zIndex = 1;
|
||||
tip.style.visibility = "visible";
|
||||
tip.style.visibility = 'visible';
|
||||
};
|
||||
element.onmouseleave = (e) => {
|
||||
tip.style.visibility = "hidden";
|
||||
tip.style.visibility = 'hidden';
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -306,15 +305,12 @@ function hideText(button, field) {
|
|||
passwordInput.type = 'password';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
hideText('.password-toggle-btn1', "#TWITCH_OAUTH_TOKEN");
|
||||
hideText('.password-toggle-btn2', "#TWITCH_CLIENT_ID");
|
||||
hideText('.password-toggle-btn3', "#TWITCH_CLIENT_SECRET");
|
||||
hideText('.password-toggle-btn4', "#AMAZON_ACCESS_KEY");
|
||||
hideText('.password-toggle-btn5', "#AMAZON_ACCESS_SECRET");
|
||||
hideText('.password-toggle-btn6', "#GOOGLE_API_KEY");
|
||||
hideText('.password-toggle-btn1', '#TWITCH_OAUTH_TOKEN');
|
||||
hideText('.password-toggle-btn4', '#AMAZON_ACCESS_KEY');
|
||||
hideText('.password-toggle-btn5', '#AMAZON_ACCESS_SECRET');
|
||||
hideText('.password-toggle-btn6', '#GOOGLE_API_KEY');
|
||||
|
||||
// Amazon TTS
|
||||
// const polly = new Polly(amazonCredentials);
|
||||
|
|
@ -323,7 +319,7 @@ hideText('.password-toggle-btn6', "#GOOGLE_API_KEY");
|
|||
// 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) => {
|
||||
// if (err) {
|
||||
|
|
|
|||
|
|
@ -1,54 +1,81 @@
|
|||
const express = require('express');
|
||||
|
||||
const app = express();
|
||||
const path = require('path');
|
||||
const http = require('http').createServer(app);
|
||||
const io = require('socket.io')(http);
|
||||
|
||||
if (!config.settings.SERVER.USE_SERVER) {
|
||||
if (!settings.SERVER.USE_SERVER) {
|
||||
return;
|
||||
}
|
||||
|
||||
const PORT = config.settings.SERVER.PORT;
|
||||
const PORT = settings.SERVER.PORT;
|
||||
|
||||
http.listen(PORT, () => {
|
||||
if (config.settings.SERVER.USE_VTUBER) {
|
||||
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));
|
||||
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.class = 'frame';
|
||||
vtuberframe.src = `http://localhost:${PORT}/vtuber`;
|
||||
vtuberframe.style.width = "100%";
|
||||
vtuberframe.style.height = "100%";
|
||||
vtuberframe.style.width = '100%';
|
||||
vtuberframe.style.height = '100%';
|
||||
vtuberframe.frameBorder = 0;
|
||||
vtuber.appendChild(vtuberframe);
|
||||
}
|
||||
|
||||
function startChatBubble() {
|
||||
if (!settings.SERVER.USE_CHATBUBBLE) {
|
||||
isChatBubbleEnabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (config.settings.SERVER.USE_CHATBUBBLE) {
|
||||
app.use('/chat', express.static(path.join(__dirname, '../modules/chat')));
|
||||
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.class = 'frame';
|
||||
chatframe.src = `http://localhost:${PORT}/chat`;
|
||||
chatframe.style.width = "100%";
|
||||
chatframe.style.height = "100%";
|
||||
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, () => {
|
||||
startVtuber();
|
||||
startChatBubble();
|
||||
});
|
||||
|
||||
// Handle socket connections
|
||||
io.on('connection', (socket) => {
|
||||
|
||||
// Receive data from the client
|
||||
socket.on('message', (data) => { });
|
||||
socket.on('message', (data) => {});
|
||||
|
||||
// Receive data from the client
|
||||
socket.on('xxx', (logoUrl, username, message) => {
|
||||
socket.broadcast.emit('message', logoUrl, username, message);
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => { });
|
||||
socket.on('disconnect', () => {});
|
||||
});
|
||||
|
||||
module.exports = { startVtuber, startChatBubble };
|
||||
|
|
|
|||
|
|
@ -1,131 +1,117 @@
|
|||
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', () => {
|
||||
var select = document.querySelector("#primaryVoice");
|
||||
var select = document.querySelector('#primaryVoice');
|
||||
settings.TTS.PRIMARY_TTS_VOICE = select.selectedIndex;
|
||||
settings.TTS.PRIMARY_TTS_NAME = select.options[select.selectedIndex].text;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
createNotification('Saved primary voice!', 'success');
|
||||
});
|
||||
|
||||
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 = 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', () => {
|
||||
var select = document.querySelector("#secondaryVoice");
|
||||
var select = document.querySelector('#secondaryVoice');
|
||||
settings.TTS.SECONDARY_TTS_VOICE = select.selectedIndex;
|
||||
settings.TTS.SECONDARY_TTS_NAME = select.options[select.selectedIndex].text;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
createNotification('Saved secondary voice!', 'success');
|
||||
});
|
||||
|
||||
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 = 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', () => {
|
||||
settings.AUDIO.TTS_AUDIO_DEVICE = ttsAudioDevices.value;
|
||||
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', () => {
|
||||
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', () => {
|
||||
settings.TWITCH.USERNAME = document.body.querySelector('#TWITCH_USERNAME').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
let button = document.body.querySelector('#TestTwitchCredentials');
|
||||
button.className = 'AdvancedMenuButton';
|
||||
createNotification('Saved Channel name, please restart the application to reset twitch service', 'warning');
|
||||
});
|
||||
|
||||
document.body.querySelector('#TWITCH_OAUTH_TOKEN').addEventListener('change', () => {
|
||||
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', () => {
|
||||
settings.TWITCH.CLIENT_ID = document.body.querySelector('#TWITCH_CLIENT_ID').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
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));
|
||||
let button = document.body.querySelector('#TestTwitchCredentials');
|
||||
button.className = 'AdvancedMenuButton';
|
||||
createNotification('Saved OAuth token, please restart the application to reset twitch service', 'warning');
|
||||
});
|
||||
|
||||
document.body.querySelector('#PORT').addEventListener('change', () => {
|
||||
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', () => {
|
||||
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', () => {
|
||||
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', () => {
|
||||
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', () => {
|
||||
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() {
|
||||
// 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(USE_CUSTOM_THEME);
|
||||
theme.setTheme();
|
||||
|
||||
// TTS
|
||||
document.body.querySelector('#USE_TTS').checked = settings.TTS.USE_TTS;
|
||||
|
||||
// Notification sounds
|
||||
document.body.querySelector('#USE_NOTIFICATION_SOUNDS').checked = settings.AUDIO.USE_NOTIFICATION_SOUNDS;
|
||||
|
||||
// Twitch
|
||||
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH;
|
||||
document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME;
|
||||
document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME;
|
||||
document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN;
|
||||
document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID;
|
||||
document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET;
|
||||
|
||||
// Server
|
||||
document.body.querySelector('#USE_SERVER').checked = settings.SERVER.USE_SERVER;
|
||||
document.body.querySelector('#PORT').value = settings.SERVER.PORT;
|
||||
document.body.querySelector('#USE_VTUBER').checked = settings.SERVER.USE_VTUBER;
|
||||
showMenuButton("#btnBrowsersourceVtuber", settings.SERVER.USE_VTUBER)
|
||||
document.body.querySelector('#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;
|
||||
showMenuButton("#btnBrowsersourceChat", settings.SERVER.USE_CHATBUBBLE)
|
||||
document.body.querySelector('#CHATBUBBLE_URL').value = `http://localhost:${settings.SERVER.PORT}/chat/`;
|
||||
showMenuButton('#btnBrowsersourceChat', settings.SERVER.USE_CHATBUBBLE);
|
||||
|
||||
// Amazon
|
||||
document.body.querySelector('#USE_AMAZON').checked = settings.AMAZON.USE_AMAZON;
|
||||
|
|
@ -135,15 +121,14 @@ function getGeneralSettings() {
|
|||
// Google
|
||||
document.body.querySelector('#USE_GOOGLE').checked = settings.GOOGLE.USE_GOOGLE;
|
||||
document.body.querySelector('#GOOGLE_API_KEY').value = settings.GOOGLE.API_KEY;
|
||||
|
||||
}
|
||||
|
||||
function showMenuButton(menuButton, toggle) {
|
||||
let option = document.body.querySelector(menuButton);
|
||||
if (!toggle) {
|
||||
option.style.display = "none";
|
||||
option.style.display = 'none';
|
||||
} else {
|
||||
option.style.display = "";
|
||||
option.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,18 +140,14 @@ function createNotification(message = null, type = null) {
|
|||
notification.classList.add(type);
|
||||
notification.innerText = message;
|
||||
notificationToasts.appendChild(notification);
|
||||
let notfication = undefined;
|
||||
|
||||
let alertSound = "info.mp3";
|
||||
if (type === "error") {
|
||||
alertSound = "error.mp3";
|
||||
let alertSound = 'info.mp3';
|
||||
if (type === 'error') {
|
||||
alertSound = 'error.mp3';
|
||||
}
|
||||
|
||||
if (envInfo.env) {
|
||||
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${alertSound}`));
|
||||
} else {
|
||||
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${alertSound}`));
|
||||
}
|
||||
let notfication = new Audio(path.join(resourcesPath, `./sounds/notifications/${alertSound}`));
|
||||
notfication.volume = settings.AUDIO.NOTIFICATION_VOLUME / 100;
|
||||
notfication.play();
|
||||
setTimeout(() => notification.remove(), 10000);
|
||||
}
|
||||
|
|
@ -179,37 +160,37 @@ if (!settings.TWITCH.USE_TWITCH) {
|
|||
|
||||
if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.CHANNEL_NAME) {
|
||||
const text = 'No channel name inserted in the Twitch service';
|
||||
createNotification(text, 'alert');
|
||||
createNotification(text, 'warning');
|
||||
}
|
||||
|
||||
if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.USERNAME) {
|
||||
const text = 'No username inserted in the Twitch service';
|
||||
createNotification(text, 'alert');
|
||||
createNotification(text, 'warning');
|
||||
}
|
||||
|
||||
function toggleRadio(toggle, inputs) {
|
||||
const element = inputs;
|
||||
if (toggle === true) {
|
||||
for (let i = 0; i < inputs.length; i += 1) { element[i].disabled = false; }
|
||||
} else {
|
||||
for (let i = 0; i < inputs.length; i += 1) { element[i].disabled = true; }
|
||||
for (let i = 0; i < inputs.length; i += 1) {
|
||||
element[i].style.display = '';
|
||||
}
|
||||
} 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
|
||||
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);
|
||||
|
||||
settings.THEME.USE_CUSTOM_THEME = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
theme.setTheme();
|
||||
createNotification(`${toggle ? 'Enabled' : 'Disabled'} custom theme!`, 'success');
|
||||
});
|
||||
|
||||
// #region Top bar buttons
|
||||
|
|
@ -217,6 +198,22 @@ document.body.querySelector('#min-button').addEventListener('click', () => {
|
|||
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', () => {
|
||||
ipcRenderer.send('maximize-window');
|
||||
});
|
||||
|
|
@ -224,6 +221,7 @@ document.body.querySelector('#max-button').addEventListener('click', () => {
|
|||
document.body.querySelector('#close-button').addEventListener('click', (event) => {
|
||||
ipcRenderer.send('close-window');
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Notification sound test
|
||||
|
|
@ -231,94 +229,151 @@ document.body.querySelector('#SoundTestButton').addEventListener('click', () =>
|
|||
sound.playAudio();
|
||||
});
|
||||
|
||||
document.body.querySelector('#TestTwitchCredentials').addEventListener('click', () => {
|
||||
twitch.ping('#TestTwitchCredentials');
|
||||
// resetTwitch(;
|
||||
});
|
||||
|
||||
function toggleTwitch() {
|
||||
const toggle = settings.TWITCH.USE_TWITCH;
|
||||
const inputs = document.getElementsByClassName('inputTwitch');
|
||||
toggleRadio(toggle, inputs);
|
||||
}
|
||||
|
||||
toggleTwitch();
|
||||
|
||||
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));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
const inputs = document.getElementsByClassName('inputTwitch');
|
||||
toggleRadio(toggle, inputs);
|
||||
twitch = settings.TWITCH.USE_TWITCH ? require(path.join(resourcesPath, './js/twitch')) : null;
|
||||
createNotification(`${toggle ? 'Enabled' : 'Disabled'} Twitch settings!`, 'success');
|
||||
});
|
||||
|
||||
toggleTwitch();
|
||||
|
||||
function toggleGoogle() {
|
||||
const toggle = settings.GOOGLE.USE_GOOGLE;
|
||||
const inputs = document.getElementsByClassName('inputGoogle');
|
||||
toggleRadio(toggle, inputs);
|
||||
}
|
||||
|
||||
toggleGoogle();
|
||||
|
||||
document.body.querySelector('#USE_GOOGLE').addEventListener('click', () => {
|
||||
const toggle = document.getElementById('USE_GOOGLE').checked;
|
||||
settings.GOOGLE.USE_GOOGLE = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
const inputs = document.getElementsByClassName('inputGoogle');
|
||||
toggleRadio(toggle, inputs);
|
||||
createNotification(`${toggle ? 'Enabled' : 'Disabled'} Google settings!`, 'success');
|
||||
});
|
||||
|
||||
toggleGoogle();
|
||||
|
||||
function toggleAmazon() {
|
||||
const toggle = settings.AMAZON.USE_AMAZON;
|
||||
const inputs = document.getElementsByClassName('inputAmazon');
|
||||
toggleRadio(toggle, inputs);
|
||||
}
|
||||
|
||||
toggleAmazon();
|
||||
|
||||
document.body.querySelector('#USE_AMAZON').addEventListener('click', () => {
|
||||
const toggle = document.getElementById('USE_AMAZON').checked;
|
||||
settings.AMAZON.USE_AMAZON = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
const inputs = document.getElementsByClassName('inputAmazon');
|
||||
toggleRadio(toggle, inputs);
|
||||
createNotification(`${toggle ? 'Enabled' : 'Disabled'} Amazon settings!`, 'success');
|
||||
});
|
||||
|
||||
toggleAmazon();
|
||||
|
||||
function toggleServer() {
|
||||
const toggle = settings.SERVER.USE_SERVER;
|
||||
const inputs = document.getElementsByClassName('inputServer');
|
||||
toggleRadio(toggle, inputs);
|
||||
}
|
||||
|
||||
toggleServer();
|
||||
|
||||
document.body.querySelector('#USE_SERVER').addEventListener('click', () => {
|
||||
const toggle = document.getElementById('USE_SERVER').checked;
|
||||
settings.SERVER.USE_SERVER = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
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',
|
||||
);
|
||||
});
|
||||
|
||||
toggleServer();
|
||||
|
||||
document.body.querySelector('#USE_VTUBER').addEventListener('change', () => {
|
||||
const toggle = document.getElementById('USE_VTUBER').checked;
|
||||
settings.SERVER.USE_VTUBER = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
showMenuButton("#btnBrowsersourceVtuber", toggle);
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
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', () => {
|
||||
const toggle = document.getElementById('USE_CHATBUBBLE').checked;
|
||||
settings.SERVER.USE_CHATBUBBLE = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
showMenuButton("#btnBrowsersourceChat", toggle);
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
showMenuButton('#btnBrowsersourceChat', toggle);
|
||||
createNotification(`${toggle ? 'Enabled' : 'Disabled'} chatbubble setting!`, 'success');
|
||||
server.startChatBubble();
|
||||
});
|
||||
|
||||
// Get the selected TTS
|
||||
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.TTS.SELECTED_TTS}`);
|
||||
|
||||
if (currentlySelectedTTS) {
|
||||
currentlySelectedTTS.checked = true;
|
||||
|
||||
// Dispatch the event to initialize logic.
|
||||
currentlySelectedTTS.dispatchEvent(new Event('change'));
|
||||
function toggleTTS() {
|
||||
const toggle = settings.TTS.USE_TTS;
|
||||
const inputs = document.getElementsByClassName('inputTTS');
|
||||
toggleRadio(toggle, inputs);
|
||||
}
|
||||
|
||||
toggleTTS();
|
||||
|
||||
document.body.querySelector('#USE_TTS').addEventListener('change', () => {
|
||||
const toggle = document.getElementById('USE_TTS').checked;
|
||||
settings.TTS.USE_TTS = toggle;
|
||||
fs.writeFileSync(settingsPath, 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);
|
||||
|
|
@ -330,10 +385,14 @@ document.body.querySelector('#notificationVolumeSlider').addEventListener('chang
|
|||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
document.querySelector('#notificationVolume').value = e.value;
|
||||
settings.AUDIO.NOTIFICATION_VOLUME = e.value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
});
|
||||
});
|
||||
|
||||
document.body.querySelector('#notificationVolumeSlider').addEventListener('mouseup', () => {
|
||||
createNotification('Saved notification volume!', 'success');
|
||||
});
|
||||
|
||||
if (settings.AUDIO.NOTIFICATION_VOLUME) {
|
||||
document.querySelector('#notificationVolumeSlider').value = settings.AUDIO.NOTIFICATION_VOLUME;
|
||||
document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change'));
|
||||
|
|
@ -341,6 +400,18 @@ if (settings.AUDIO.NOTIFICATION_VOLUME) {
|
|||
document.querySelector('#notificationVolumeSlider').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);
|
||||
|
||||
createNotification('Saved TTS volume!', 'success');
|
||||
});
|
||||
|
||||
document.body.querySelector('#ttsVolumeSlider').addEventListener('change', () => {
|
||||
const e = document.querySelector('#ttsVolumeSlider');
|
||||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
|
|
@ -351,18 +422,32 @@ document.body.querySelector('#ttsVolumeSlider').addEventListener('change', () =>
|
|||
e.addEventListener('input', () => {
|
||||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
document.querySelector('#ttsVolume').value = e.value;
|
||||
settings.AUDIO.TTS_VOLUME = e.value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
settings.TTS.TTS_VOLUME = e.value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
});
|
||||
});
|
||||
|
||||
if (settings.AUDIO.TTS_VOLUME) {
|
||||
document.querySelector('#ttsVolumeSlider').value = settings.AUDIO.TTS_VOLUME;
|
||||
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 {
|
||||
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', () => {
|
||||
var dropdown = document.body.querySelector('.language-dropdown');
|
||||
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
|
||||
|
|
@ -372,8 +457,8 @@ document.body.querySelector('.language-dropdown').addEventListener('mouseleave',
|
|||
hideDropdown();
|
||||
});
|
||||
|
||||
let languageSelector = document.querySelectorAll(".language-item");
|
||||
languageSelector.forEach(item => {
|
||||
let languageSelector = document.querySelectorAll('.language-item');
|
||||
languageSelector.forEach((item) => {
|
||||
item.addEventListener('click', (event) => {
|
||||
const el = event.target;
|
||||
// tip.innerText = el.getAttribute('language');
|
||||
|
|
@ -388,7 +473,6 @@ function hideDropdown() {
|
|||
dropdown.style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
// let primaryTTSSelector = document.body.querySelector(".optgroup");
|
||||
// primaryTTSSelector.forEach(item => {
|
||||
// item.addEventListener('hover', (event) => {
|
||||
|
|
@ -398,10 +482,6 @@ function hideDropdown() {
|
|||
// });
|
||||
// });
|
||||
|
||||
|
||||
module.exports = {
|
||||
ini,
|
||||
settings,
|
||||
getGeneralSettings,
|
||||
setCustomThemeToggle
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ let currentUsername = '';
|
|||
let voiceSoundArray = [];
|
||||
let status = 0;
|
||||
|
||||
const playTTS = (ttsData) => new Promise((resolve) => {
|
||||
const playTTS = (ttsData) =>
|
||||
new Promise((resolve) => {
|
||||
const tts = new Audio(ttsData.path);
|
||||
|
||||
tts.addEventListener('ended', () => {
|
||||
|
|
@ -17,13 +18,19 @@ const playTTS = (ttsData) => new Promise((resolve) => {
|
|||
});
|
||||
});
|
||||
|
||||
tts.setSinkId(config.settings.AUDIO.TTS_AUDIO_DEVICE).then(() => {
|
||||
tts.setSinkId(settings.AUDIO.TTS_AUDIO_DEVICE)
|
||||
.then(() => {
|
||||
tts.volume = settings.TTS.TTS_VOLUME / 100;
|
||||
tts.play();
|
||||
|
||||
if (settings.SERVER.USE_SERVER) {
|
||||
socket.emit('xxx', currentLogoUrl, currentUsername, ttsData.message);
|
||||
}).catch((error) => {
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to set audio output device:', error);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function shiftVoice() {
|
||||
status = 1;
|
||||
|
|
@ -41,18 +48,19 @@ function add(ttsData) {
|
|||
}
|
||||
|
||||
// Play sound function
|
||||
function playAudio(ttsData = undefined) {
|
||||
let audioPath;
|
||||
if (!ttsData) {
|
||||
let notfication = undefined;
|
||||
if (envInfo.env) {
|
||||
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${notificationSound.options[config.settings.AUDIO.NOTIFICATION_SOUND].text}`));
|
||||
} else {
|
||||
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${notificationSound.options[config.settings.AUDIO.NOTIFICATION_SOUND].text}`));
|
||||
}
|
||||
function playAudio(data) {
|
||||
if (settings.AUDIO.USE_NOTIFICATION_SOUNDS) {
|
||||
let notfication = new Audio(
|
||||
path.join(resourcesPath, `../src/sounds/notifications/${notificationSound.options[settings.AUDIO.NOTIFICATION_SOUND].text}`),
|
||||
);
|
||||
notfication.volume = settings.AUDIO.NOTIFICATION_VOLUME / 100;
|
||||
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;
|
||||
currentLogoUrl = logoUrl;
|
||||
currentUsername = username;
|
||||
let textObject = { "filtered": filteredMessage, "formatted": message };
|
||||
let textObject = { filtered: filteredMessage, formatted: message };
|
||||
let voice;
|
||||
const language = langdetect.detect(filteredMessage);
|
||||
|
||||
if (language[0].lang === config.settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()) {
|
||||
voice = config.settings.TTS.SECONDARY_TTS_NAME;
|
||||
if (
|
||||
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}`;
|
||||
} else {
|
||||
voice = config.settings.TTS.PRIMARY_TTS_NAME;
|
||||
voice = settings.TTS.PRIMARY_TTS_NAME;
|
||||
textObject.filtered = `${username}: ${filteredMessage}`;
|
||||
}
|
||||
|
||||
if (settings.TTS.USE_TTS) {
|
||||
talk.add(textObject, voice);
|
||||
} else {
|
||||
playAudio(textObject);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { playAudio, playVoice };
|
||||
|
|
|
|||
166
src/js/theme.js
166
src/js/theme.js
|
|
@ -1,89 +1,49 @@
|
|||
function setTheme(USE_CUSTOM_THEME) {
|
||||
document.querySelector('#MAIN_COLOR_1').value = config.settings.THEME.MAIN_COLOR_1;
|
||||
const MAIN_COLOR_1 = document.querySelector('#MAIN_COLOR_1').value;
|
||||
root.style.setProperty('--main-color1-temp', MAIN_COLOR_1);
|
||||
|
||||
document.querySelector('#MAIN_COLOR_2').value = config.settings.THEME.MAIN_COLOR_2;
|
||||
const MAIN_COLOR_2 = document.querySelector('#MAIN_COLOR_2').value;
|
||||
root.style.setProperty('--main-color2-temp', MAIN_COLOR_2);
|
||||
|
||||
document.querySelector('#MAIN_COLOR_3').value = config.settings.THEME.MAIN_COLOR_3;
|
||||
const MAIN_COLOR_3 = document.querySelector('#MAIN_COLOR_3').value;
|
||||
root.style.setProperty('--main-color3-temp', MAIN_COLOR_3);
|
||||
|
||||
document.querySelector('#MAIN_COLOR_4').value = config.settings.THEME.MAIN_COLOR_4;
|
||||
const MAIN_COLOR_4 = document.querySelector('#MAIN_COLOR_4').value;
|
||||
root.style.setProperty('--main-color4-temp', MAIN_COLOR_4);
|
||||
|
||||
document.querySelector('#TOP_BAR').value = config.settings.THEME.TOP_BAR;
|
||||
const TOP_BAR = document.querySelector('#TOP_BAR').value;
|
||||
root.style.setProperty('--top-bar-temp', TOP_BAR);
|
||||
|
||||
document.querySelector('#MID_SECTION').value = config.settings.THEME.MID_SECTION;
|
||||
const MID_SECTION = document.querySelector('#MID_SECTION').value;
|
||||
root.style.setProperty('--mid-section-temp', MID_SECTION);
|
||||
|
||||
document.querySelector('#CHAT_BUBBLE_BG').value = config.settings.THEME.CHAT_BUBBLE_BG;
|
||||
const CHAT_BUBBLE_BG = document.querySelector('#CHAT_BUBBLE_BG').value;
|
||||
root.style.setProperty('--chat-bubble-temp', CHAT_BUBBLE_BG);
|
||||
|
||||
document.querySelector('#CHAT_BUBBLE_HEADER').value = config.settings.THEME.CHAT_BUBBLE_HEADER;
|
||||
const CHAT_BUBBLE_HEADER = document.querySelector('#CHAT_BUBBLE_HEADER').value;
|
||||
root.style.setProperty('--chat-bubble-header-temp', CHAT_BUBBLE_HEADER);
|
||||
|
||||
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');
|
||||
}
|
||||
function changeColor(section, setting, tempSection) {
|
||||
document.querySelector(section).value = setting;
|
||||
const value = document.querySelector(section).value;
|
||||
root.style.setProperty(tempSection, value);
|
||||
}
|
||||
|
||||
function setCurrentTheme(adjustTemp = false) {
|
||||
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");
|
||||
changeColor("#MAIN_COLOR_3", settings.THEME.MAIN_COLOR_3, adjustTemp ? "--main-color3-temp" : "--main-color3");
|
||||
changeColor("#MAIN_COLOR_4", settings.THEME.MAIN_COLOR_4, adjustTemp ? "--main-color4-temp" : "--main-color4");
|
||||
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");
|
||||
changeColor("#CHAT_BUBBLE_BG", settings.THEME.CHAT_BUBBLE_BG, adjustTemp ? "--chat-bubble-temp" : "--chat-bubble");
|
||||
changeColor("#CHAT_BUBBLE_HEADER", settings.THEME.CHAT_BUBBLE_HEADER, adjustTemp ? "--chat-bubble-header-temp" : "--chat-bubble-header");
|
||||
changeColor("#CHAT_BUBBLE_MESSAGE", settings.THEME.CHAT_BUBBLE_MESSAGE, adjustTemp ? "--chat-bubble-message-temp" : "--chat-bubble-message");
|
||||
}
|
||||
|
||||
setCurrentTheme(true);
|
||||
|
||||
function setTheme() {
|
||||
if (settings.THEME.USE_CUSTOM_THEME) {
|
||||
setCurrentTheme();
|
||||
} 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', () => {
|
||||
const x = document.getElementById('MAIN_COLOR_1').value;
|
||||
root.style.setProperty('--main-color1-temp', x);
|
||||
console.log(x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
|
||||
config.settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#MAIN_COLOR_1", settings.THEME.MAIN_COLOR_1, "--main-color1");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#MAIN_COLOR_2", settings.THEME.MAIN_COLOR_2, "--main-color2");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#MAIN_COLOR_3", settings.THEME.MAIN_COLOR_3, "--main-color3");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#MAIN_COLOR_4", settings.THEME.MAIN_COLOR_4, "--main-color4");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#TOP_BAR", settings.THEME.TOP_BAR, "--top-bar");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#MID_SECTION", settings.THEME.MID_SECTION, "--mid-section");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#CHAT_BUBBLE_BG", settings.THEME.CHAT_BUBBLE_BG, "--chat-bubble");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#CHAT_BUBBLE_HEADER", settings.THEME.CHAT_BUBBLE_HEADER, "--chat-bubble-header");
|
||||
});
|
||||
|
||||
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', () => {
|
||||
config.settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
changeColor("#CHAT_BUBBLE_MESSAGE", settings.THEME.CHAT_BUBBLE_MESSAGE, "--chat-bubble-message");
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
module.exports = { setTheme };
|
||||
|
|
|
|||
|
|
@ -1,22 +1,45 @@
|
|||
const tmi = require('tmi.js');
|
||||
const axios = require('axios');
|
||||
|
||||
const client = new tmi.Client({
|
||||
let client;
|
||||
|
||||
function sendMessage(message) {
|
||||
client.say(settings.TWITCH.CHANNEL_NAME, message).catch(console.error);
|
||||
}
|
||||
|
||||
client = new tmi.Client({
|
||||
options: {
|
||||
skipUpdatingEmotesets: true,
|
||||
},
|
||||
identity: {
|
||||
username: config.settings.TWITCH.USERNAME,
|
||||
password: config.settings.TWITCH.OAUTH_TOKEN,
|
||||
username: settings.TWITCH.USERNAME,
|
||||
password: settings.TWITCH.OAUTH_TOKEN,
|
||||
},
|
||||
channels: [config.settings.TWITCH.CHANNEL_NAME],
|
||||
channels: [settings.TWITCH.CHANNEL_NAME],
|
||||
});
|
||||
|
||||
function sendMessage(message) {
|
||||
client.say(config.settings.TWITCH.CHANNEL_NAME, message).catch(console.error);
|
||||
}
|
||||
client
|
||||
.connect()
|
||||
.then((data) => {})
|
||||
.catch(console.error);
|
||||
|
||||
client.connect().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) {
|
||||
const article = document.createElement('article');
|
||||
|
|
@ -41,12 +64,12 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
|
|||
|
||||
const msg = article.querySelector('.msg');
|
||||
if (msg) {
|
||||
msg.innerHTML = "";
|
||||
msg.innerHTML = '';
|
||||
|
||||
const messageElement = document.createElement("div");
|
||||
const messageElement = document.createElement('div');
|
||||
|
||||
messageObject.forEach((entry) => {
|
||||
const messageElement = document.createElement("div");
|
||||
const messageElement = document.createElement('div');
|
||||
if (entry.text) {
|
||||
messageElement.innerText = entry.text;
|
||||
msg.appendChild(messageElement);
|
||||
|
|
@ -54,7 +77,7 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
|
|||
messageElement.innerHTML = entry.html;
|
||||
msg.appendChild(messageElement);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Appends the message to the main chat box (shows the message)
|
||||
|
|
@ -68,35 +91,20 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
|
|||
}
|
||||
|
||||
function getProfileImage(userid, username, message, fileteredMessage) {
|
||||
// Get Access Token
|
||||
let options = {
|
||||
method: 'POST',
|
||||
url: 'https://id.twitch.tv/oauth2/token',
|
||||
data: {
|
||||
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) => {
|
||||
const accessToken = responseAccessToken.data.access_token;
|
||||
|
||||
// Get user Logo with access token
|
||||
options = {
|
||||
method: 'GET',
|
||||
url: `https://api.twitch.tv/helix/users?id=${userid}`,
|
||||
headers: { 'Client-ID': config.settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${accessToken}` },
|
||||
headers: { 'Client-ID': settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}` },
|
||||
};
|
||||
|
||||
axios.request(options).then((responseLogoUrl) => {
|
||||
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) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
|
@ -108,9 +116,10 @@ function parseString(inputString) {
|
|||
|
||||
for (let i = 0; i < matches.length; i++) {
|
||||
const match = matches[i].trim();
|
||||
if (match.startsWith("<img")) {
|
||||
if (match.startsWith('<img')) {
|
||||
result.push({ html: match });
|
||||
} if (match !== '' && !match.startsWith("<img")) {
|
||||
}
|
||||
if (match !== '' && !match.startsWith('<img')) {
|
||||
result.push({ text: match });
|
||||
}
|
||||
}
|
||||
|
|
@ -121,7 +130,6 @@ client.on('message', (channel, tags, message, self) => {
|
|||
if (self) {
|
||||
return;
|
||||
}
|
||||
|
||||
const emotes = tags.emotes || {};
|
||||
const emoteValues = Object.entries(emotes);
|
||||
let fileteredMessage = message;
|
||||
|
|
@ -133,14 +141,11 @@ client.on('message', (channel, tags, message, self) => {
|
|||
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();
|
||||
let messageObject = parseString(emoteMessage);
|
||||
getProfileImage(tags['user-id'], tags['display-name'], messageObject, fileteredMessage);
|
||||
});
|
||||
|
||||
|
||||
module.exports = { sendMessage };
|
||||
module.exports = { sendMessage, ping, client };
|
||||
|
|
|
|||
|
|
@ -2,26 +2,21 @@ let SelectedVoice = '';
|
|||
let Encoding = '';
|
||||
let counter = 0;
|
||||
// wrap in promise
|
||||
const speak = (textObject) => new Promise((resolve) => {
|
||||
const speak = (textObject) =>
|
||||
new Promise((resolve) => {
|
||||
// say.setEncoding(Encoding);
|
||||
counter += 1;
|
||||
let savePath = '';
|
||||
|
||||
if (envInfo.env) {
|
||||
savePath = path.join(envInfo.path, './sounds/tts/internal_audio_' + counter + '.mp3')
|
||||
} else {
|
||||
savePath = path.join(__dirname, '../sounds/tts/internal_audio_' + counter + '.mp3')
|
||||
}
|
||||
let savePath = path.join(resourcesPath, '../src/sounds/tts/internal_audio_' + counter + '.mp3');
|
||||
|
||||
say.export(textObject.filtered, SelectedVoice, 1, savePath, (err) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
} else {
|
||||
sound.playAudio({ "path": savePath, "message": textObject });
|
||||
sound.playAudio({ path: savePath, message: textObject });
|
||||
}
|
||||
resolve('finished');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// queue system
|
||||
class SayQueue {
|
||||
|
|
@ -41,7 +36,9 @@ class SayQueue {
|
|||
add(message, selectedVoice) {
|
||||
this.messages.push(message);
|
||||
SelectedVoice = selectedVoice;
|
||||
if (this.status === 0) { this.shift(); }
|
||||
if (this.status === 0) {
|
||||
this.shift();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
184
src/main.js
184
src/main.js
|
|
@ -1,18 +1,19 @@
|
|||
const { app, BrowserWindow, ipcMain } = require('electron');
|
||||
const { writeIniFile } = require('write-ini-file')
|
||||
const { app, shell, BrowserWindow, ipcMain } = require('electron');
|
||||
const writeIniFile = require('write-ini-file');
|
||||
const path = require('path');
|
||||
|
||||
const ini = require('ini');
|
||||
const fs = require('fs');
|
||||
|
||||
let resourcesPath;
|
||||
let settingsPath;
|
||||
let settings;
|
||||
let window;
|
||||
|
||||
if (app.isPackaged) {
|
||||
resourcesPath = path.join(process.resourcesPath, './settings.ini');
|
||||
resourcesPath = process.resourcesPath;
|
||||
} else {
|
||||
resourcesPath = path.join(__dirname, './config/settings.ini');
|
||||
resourcesPath = __dirname;
|
||||
}
|
||||
|
||||
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
|
||||
|
|
@ -22,13 +23,14 @@ if (require('electron-squirrel-startup')) {
|
|||
|
||||
async function createWindow() {
|
||||
if (!fs.existsSync(resourcesPath)) {
|
||||
await createIniFile(resourcesPath);
|
||||
await createIniFile(path.join(resourcesPath, '../config/settings.ini'));
|
||||
} 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({
|
||||
icon: path.join(__dirname, '/images/icon.png'),
|
||||
icon: path.join(resourcesPath, '/images/icon.png'),
|
||||
width: parseInt(settings.SETTINGS.WIDTH),
|
||||
height: parseInt(settings.SETTINGS.HEIGHT),
|
||||
x: parseInt(settings.SETTINGS.POSITION_X),
|
||||
|
|
@ -40,16 +42,16 @@ async function createWindow() {
|
|||
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) {
|
||||
window.webContents.openDevTools();
|
||||
}
|
||||
|
||||
window.on('close', e => {
|
||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); // load newest settings in case anything changed after starting the program
|
||||
window.on('close', (e) => {
|
||||
settings = ini.parse(fs.readFileSync(settingsPath, 'utf-8')); // load newest settings in case anything changed after starting the program
|
||||
const bounds = window.getBounds();
|
||||
|
||||
settings.SETTINGS.WIDTH = bounds.width;
|
||||
|
|
@ -57,13 +59,13 @@ async function createWindow() {
|
|||
settings.SETTINGS.POSITION_X = bounds.x;
|
||||
settings.SETTINGS.POSITION_Y = bounds.y;
|
||||
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
})
|
||||
};
|
||||
fs.writeFileSync(settingsPath, ini.stringify(settings));
|
||||
});
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow();
|
||||
})
|
||||
});
|
||||
|
||||
app.on('window-all-closed', (event) => {
|
||||
if (process.platform !== 'darwin') {
|
||||
|
|
@ -105,8 +107,99 @@ ipcMain.on('close-window', (event) => {
|
|||
app.quit();
|
||||
});
|
||||
|
||||
ipcMain.on('restart', (event) => {
|
||||
app.relaunch();
|
||||
});
|
||||
|
||||
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() {
|
||||
|
|
@ -118,62 +211,63 @@ async function createIniFile() {
|
|||
POSITION_Y: 0,
|
||||
WIDTH: 1024,
|
||||
HEIGHT: 768,
|
||||
LANGUAGE: "EN"
|
||||
LANGUAGE: 'EN',
|
||||
},
|
||||
TTS: {
|
||||
USE_TTS: true,
|
||||
PRIMARY_TTS_VOICE: 0,
|
||||
PRIMARY_TTS_NAME: "",
|
||||
PRIMARY_TTS_LANGUAGE: "EN",
|
||||
PRIMARY_TTS_NAME: '',
|
||||
PRIMARY_TTS_LANGUAGE: 'EN',
|
||||
PRIMARY_TTS_LANGUAGE_INDEX: 0,
|
||||
SECONDARY_TTS_VOICE: 0,
|
||||
SECONDARY_TTS_NAME: "",
|
||||
SECONDARY_TTS_LANGUAGE: "EN",
|
||||
SECONDARY_TTS_LANGUAGE_INDEX: 0
|
||||
SECONDARY_TTS_NAME: '',
|
||||
SECONDARY_TTS_LANGUAGE: 'EN',
|
||||
SECONDARY_TTS_LANGUAGE_INDEX: 0,
|
||||
TTS_VOLUME: 50,
|
||||
},
|
||||
AUDIO: {
|
||||
USE_NOTIFICATION_SOUNDS: true,
|
||||
NOTIFICATION_AUDIO_DEVICE: 0,
|
||||
NOTIFICATION_SOUND: 0,
|
||||
NOTIFICATION_VOLUME: 100,
|
||||
NOTIFICATION_VOLUME: 50,
|
||||
SELECTED_TTS_AUDIO_DEVICE: 0,
|
||||
TTS_AUDIO_DEVICE: "default",
|
||||
TTS_VOLUME: 100
|
||||
TTS_AUDIO_DEVICE: 'default',
|
||||
},
|
||||
THEME: {
|
||||
USE_CUSTOM_THEME: false,
|
||||
MAIN_COLOR_1: "\#cdc1c1",
|
||||
MAIN_COLOR_2: "\#b12020",
|
||||
MAIN_COLOR_3: "\#6c4104",
|
||||
MAIN_COLOR_4: "\#532d2d",
|
||||
TOP_BAR: "\#c8ff00",
|
||||
MID_SECTION: "\#6b8578",
|
||||
CHAT_BUBBLE_BG: "\#447466",
|
||||
CHAT_BUBBLE_HEADER: "\#ffffff",
|
||||
CHAT_BUBBLE_MESSAGE: "\#b5b5b5",
|
||||
MAIN_COLOR_1: '#cdc1c1',
|
||||
MAIN_COLOR_2: '#b12020',
|
||||
MAIN_COLOR_3: '#6c4104',
|
||||
MAIN_COLOR_4: '#532d2d',
|
||||
TOP_BAR: '#c8ff00',
|
||||
MID_SECTION: '#6b8578',
|
||||
CHAT_BUBBLE_BG: '#447466',
|
||||
CHAT_BUBBLE_HEADER: '#ffffff',
|
||||
CHAT_BUBBLE_MESSAGE: '#b5b5b5',
|
||||
},
|
||||
TWITCH: {
|
||||
USE_TWITCH: false,
|
||||
CHANNEL_NAME: "khyretos",
|
||||
USERNAME: "loquendo",
|
||||
OAUTH_TOKEN: "",
|
||||
CLIENT_ID: "",
|
||||
CLIENT_SECRET: "",
|
||||
CHANNEL_NAME: '',
|
||||
USERNAME: 'loquendo',
|
||||
OAUTH_TOKEN: '',
|
||||
CLIENT_ID: '2t206sj7rvtr1rutob3p627d13jch9',
|
||||
},
|
||||
SERVER: {
|
||||
USE_SERVER: false,
|
||||
PORT: "9000",
|
||||
PORT: '9000',
|
||||
USE_VTUBER: false,
|
||||
USE_CHATBUBBLE: false,
|
||||
},
|
||||
AMAZON: {
|
||||
USE_TWITCH: false,
|
||||
ACCESS_KEY: "",
|
||||
ACCESS_SECRET: "",
|
||||
ACCESS_KEY: '',
|
||||
ACCESS_SECRET: '',
|
||||
},
|
||||
GOOGLE: {
|
||||
USE_GOOGLE: false,
|
||||
API_KEY: "",
|
||||
}
|
||||
API_KEY: '',
|
||||
},
|
||||
}).then(() => {
|
||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
// Connect to the Socket.IO server
|
||||
const socket = io();
|
||||
|
||||
|
|
|
|||
BIN
src/sounds/tts/internal_audio_6.mp3
Normal file
BIN
src/sounds/tts/internal_audio_6.mp3
Normal file
Binary file not shown.
Loading…
Reference in a new issue