big release, fixed multiple functionalities.
This commit is contained in:
Khyretos
parent
a65e0b6fd6
commit
6c192784c4
25 changed files with 1059 additions and 598 deletions
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"npm-scripts.showStartNotification": false
|
||||||
|
}
|
||||||
|
|
@ -3,7 +3,6 @@ module.exports = {
|
||||||
icon: './src/images/icon.ico',
|
icon: './src/images/icon.ico',
|
||||||
asar: true,
|
asar: true,
|
||||||
"extraResource": [
|
"extraResource": [
|
||||||
"./src/config/settings.ini",
|
|
||||||
"./src/config/loquendo.db",
|
"./src/config/loquendo.db",
|
||||||
"./src/sounds"
|
"./src/sounds"
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "loquendo-bot",
|
"name": "loquendo-bot",
|
||||||
"version": "2.0.0",
|
"version": "2.1.0",
|
||||||
"description": "Bot assistant for streamers over different platforms",
|
"description": "Bot assistant for streamers over different platforms",
|
||||||
"main": "src/main.js",
|
"main": "src/main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
3
src/config/languages.txt
Normal file
3
src/config/languages.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
EN
|
||||||
|
ES
|
||||||
|
NL
|
||||||
|
|
@ -389,21 +389,22 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.AdvancedMenuLabel {
|
.AdvancedMenuLabel {
|
||||||
width: 120px;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 125px
|
||||||
|
}
|
||||||
|
|
||||||
|
.AdvancedMenuLabel2 {
|
||||||
|
font-size: 10pt;
|
||||||
|
padding-right: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#SaveAdvancedSettingsButton {
|
#SaveAdvancedSettingsButton {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Big toggle */
|
|
||||||
|
|
||||||
|
|
||||||
/* toggle in label designing */
|
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -425,7 +426,6 @@ select {
|
||||||
background-color: var(--main-color2);
|
background-color: var(--main-color2);
|
||||||
left: 5px;
|
left: 5px;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -476,7 +476,6 @@ select {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -204,3 +204,42 @@ body {
|
||||||
.maximized #max-button {
|
.maximized #max-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.language-selector {
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 55px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 2;
|
||||||
|
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item {
|
||||||
|
padding: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--top-bar);
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item:hover {
|
||||||
|
/* filter: brightness(150%); */
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: NotoColorEmojiLimited;
|
||||||
|
unicode-range: U+1F1E6-1F1FF;
|
||||||
|
src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,9 @@
|
||||||
table {
|
table {
|
||||||
margin-left: 25px;
|
margin-left: 10px;
|
||||||
margin-right: 25px;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
margin-top: 60px;
|
||||||
|
|
||||||
table,
|
|
||||||
h1 {
|
|
||||||
margin-left: 35px !important;
|
|
||||||
/* Adjust the margin value according to your needs */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -32,7 +26,7 @@ td {
|
||||||
}
|
}
|
||||||
|
|
||||||
#logTable {
|
#logTable {
|
||||||
width: 90%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#Logs {
|
#Logs {
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,8 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--main-color1);
|
background: var(--main-color1);
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .items {
|
.menu .items {
|
||||||
|
|
@ -64,19 +66,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .items .item-active {
|
.menu .items .item-active {
|
||||||
transition: 0.3s;
|
|
||||||
background: -webkit-linear-gradient(left, var(--main-color2) 10%, var(--main-color2), var(--main-color1) 10%, var(--main-color1) 10%);
|
background: -webkit-linear-gradient(left, var(--main-color2) 10%, var(--main-color2), var(--main-color1) 10%, var(--main-color1) 10%);
|
||||||
color: var(--main-color2);
|
color: var(--main-color2);
|
||||||
transition: all 0.15s ease-out;
|
filter: brightness(90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .items .item:hover {
|
.menu .items .item:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* filter: brightness(150%); */
|
|
||||||
color: var(--main-color2);
|
color: var(--main-color2);
|
||||||
transition: all 0.15s ease-in-out;
|
filter: brightness(120%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.sidepanel-left {
|
.sidepanel-left {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
@ -86,7 +87,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||||
transition: .3s ease-in-out;
|
transition: .3s ease-in-out;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidepanel-right {
|
.sidepanel-right {
|
||||||
|
|
@ -100,8 +100,12 @@
|
||||||
transition: .3s ease-in-out;
|
transition: .3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-menu {
|
.collapse-menu-left {
|
||||||
width: 0px;
|
margin-left: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-menu-right {
|
||||||
|
margin-right: -200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidepanel-left span {
|
.sidepanel-left span {
|
||||||
|
|
@ -124,11 +128,11 @@
|
||||||
background-color: var(--main-color3);
|
background-color: var(--main-color3);
|
||||||
color: var(--main-color2);
|
color: var(--main-color2);
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
top: 0px;
|
top: 32px;
|
||||||
left: 50px;
|
left: 50px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 9;
|
z-index: 1;
|
||||||
transition: .3s ease-in-out;
|
transition: .3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -146,11 +150,11 @@
|
||||||
background-color: var(--main-color3);
|
background-color: var(--main-color3);
|
||||||
color: var(--main-color2);
|
color: var(--main-color2);
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
top: 0px;
|
top: 32px;
|
||||||
right: 199px;
|
right: 199px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 9;
|
z-index: 1;
|
||||||
transition: .3s ease-in-out;
|
transition: .3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
150
src/css/tabs.css
150
src/css/tabs.css
|
|
@ -203,6 +203,11 @@ select {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.language {
|
||||||
|
width: 80px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
#AdvancedMenu_mask {
|
#AdvancedMenu_mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -253,91 +258,151 @@ select {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type="password"] {
|
||||||
|
background: var(--main-color3);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
width: 300px;
|
||||||
|
outline: none;
|
||||||
|
color: var(--main-color2);
|
||||||
|
font-size: 10pt;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 40px;
|
||||||
|
/* To make space for the reveal button */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="lol"] {
|
||||||
|
background: var(--main-color3);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
width: 300px;
|
||||||
|
outline: none;
|
||||||
|
color: var(--main-color2);
|
||||||
|
font-size: 10pt;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 40px;
|
||||||
|
/* To make space for the reveal button */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style for the reveal button */
|
||||||
|
.password-toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
left: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the default appearance of the button */
|
||||||
|
.password-toggle-btn::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the reveal icon (you can use your preferred icon or font) */
|
||||||
|
.password-toggle-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
#toasts {
|
#toasts {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 10px;
|
bottom: 20px;
|
||||||
right: 10px;
|
/* Adjust the distance from the bottom of the screen */
|
||||||
|
right: 50%;
|
||||||
|
/* Center the toasts horizontally */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: center;
|
||||||
z-index: 1;
|
/* Center the toasts horizontally */
|
||||||
transition: all 0.3s ease-in-out;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background-color: #fff;
|
background-color: #333;
|
||||||
|
color: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(100%);
|
||||||
|
animation: toastAnimation 0.5s ease-in-out forwards, toastDisappear 0.5s ease-in-out 9s forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Apply different colors based on the toast type */
|
||||||
.toast.info {
|
.toast.info {
|
||||||
color: rebeccapurple;
|
background-color: #3498db;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast.success {
|
.toast.success {
|
||||||
color: green;
|
background-color: #2ecc71;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast.warning {
|
.toast.warning {
|
||||||
background-color: orange;
|
background-color: #f39c12;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast.error {
|
.toast.error {
|
||||||
color: red;
|
background-color: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS animation for the toast appearance */
|
||||||
|
@keyframes toastAnimation {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS animation for the toast disappearance */
|
||||||
|
@keyframes toastDisappear {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
font-size: 17pt;
|
font-size: 17pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
[tip] .tooltip {
|
.tooltip {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
visibility: hidden;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background: var(--main-color3);
|
background: var(--main-color3);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
|
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
transition: opacity 0.3s, visibility 0s;
|
transition: opacity 0.3s, visibility 0s;
|
||||||
color: var(--main-color2);
|
color: var(--main-color2);
|
||||||
z-index: 101;
|
|
||||||
font-family: 'xxii_avenmedium';
|
font-family: 'xxii_avenmedium';
|
||||||
}
|
}
|
||||||
|
|
||||||
[tip]:hover .tooltip {
|
/* .tooltip .tooltiptext {
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip .tooltiptext {
|
|
||||||
visibility: hidden;
|
|
||||||
width: 120px;
|
width: 120px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
bottom: 150%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -60px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext::after {
|
.tooltip .tooltiptext::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
border-width: 5px;
|
border-width: 5px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
@ -346,8 +411,21 @@ select {
|
||||||
|
|
||||||
.tooltip:hover .tooltiptext {
|
.tooltip:hover .tooltiptext {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
} */
|
||||||
|
|
||||||
input[type=text]:disabled {
|
input[type=text]:disabled {
|
||||||
background: #dddddd;
|
background: #dddddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type2=text]:disabled {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type=text]:disabled {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:disabled {
|
||||||
|
background: #dddddd;
|
||||||
|
filter: brightness(200%);
|
||||||
|
}
|
||||||
|
|
@ -75,29 +75,12 @@ textarea {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SaveButton {
|
|
||||||
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
|
|
||||||
transition: all 0.15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.SaveButton:hover {
|
|
||||||
/* color: var(--main-color1); */
|
|
||||||
cursor: pointer;
|
|
||||||
/* filter: brightness(150%); */
|
|
||||||
}
|
|
||||||
|
|
||||||
.SaveButton:active {
|
|
||||||
color: var(--main-color1);
|
|
||||||
transform: translateY(4px);
|
|
||||||
text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.SmallButton {
|
.SmallButton {
|
||||||
color: var(--main-color2);
|
color: var(--main-color2);
|
||||||
width: 50px;
|
width: 50px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
|
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
|
||||||
transition: all 0.15s ease-in-out;
|
/* transition: all 0.15s ease-in-out; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -124,16 +107,24 @@ textarea {
|
||||||
border: none;
|
border: none;
|
||||||
font-family: 'xxii_avenmedium';
|
font-family: 'xxii_avenmedium';
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: box-shadow 0.3s ease, background-color 0.3s ease;
|
||||||
|
/* Add a smooth transition for box-shadow and background-color */
|
||||||
}
|
}
|
||||||
|
|
||||||
.AdvancedMenuButton:hover {
|
.AdvancedMenuButton:hover {
|
||||||
/* background-color: var(--main-color1); */
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
background-color: var(--main-color3);
|
||||||
|
filter: brightness(150%);
|
||||||
|
/* Darken the background color on hover */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* filter: brightness(150%); */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.AdvancedMenuButton:active {
|
.AdvancedMenuButton:active {
|
||||||
transform: translateY(4px);
|
transform: translateY(2px);
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
background-color: var(--main-color3);
|
||||||
|
/* Reset the background color on click */
|
||||||
}
|
}
|
||||||
|
|
||||||
.AdvancedMenuIcon {
|
.AdvancedMenuIcon {
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
/* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */
|
/* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */
|
||||||
box-shadow: 0 0 3px rgb(0 0 0 / 10%);
|
box-shadow: 0 0 3px rgb(0 0 0 / 10%);
|
||||||
transition: .3s ease-in-out;
|
/* transition: .3s ease-in-out; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-container .slider:active::-webkit-slider-thumb,
|
.slider-container .slider:active::-webkit-slider-thumb,
|
||||||
|
|
|
||||||
771
src/index.html
771
src/index.html
|
|
@ -27,7 +27,20 @@
|
||||||
<body>
|
<body>
|
||||||
<!--#region title bar -->
|
<!--#region title bar -->
|
||||||
<header id="titlebar">
|
<header id="titlebar">
|
||||||
|
|
||||||
<div id="drag-region">
|
<div id="drag-region">
|
||||||
|
<div class="language-selector">
|
||||||
|
<span class="flag-icon" id="selected-flag">🇬🇧</span>
|
||||||
|
<span id="selected-language">EN</span>
|
||||||
|
<div class="language-dropdown" id="languageDropdown">
|
||||||
|
<div class="language-item" language="NL" flag="🇳🇱">🇳🇱
|
||||||
|
NL</div>
|
||||||
|
<div class="language-item" language="ES" flag="🇪🇸">🇪🇸
|
||||||
|
ES</div>
|
||||||
|
<div class="language-item" language="EN" flag="🇬🇧">🇬🇧
|
||||||
|
EN</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="window-controls">
|
<div id="window-controls">
|
||||||
|
|
||||||
<div class="button" id="min-button">
|
<div class="button" id="min-button">
|
||||||
|
|
@ -66,7 +79,8 @@
|
||||||
<li class="item" tip="Logs" id="btnLogs">
|
<li class="item" tip="Logs" id="btnLogs">
|
||||||
<i class="fa fa-clipboard menu-icon"></i>
|
<i class="fa fa-clipboard menu-icon"></i>
|
||||||
</li>
|
</li>
|
||||||
<li class="item" tip="Chat" id="btnBrowsersourceChat">
|
<li class="item" tip="BrowserSource ChatBubble"
|
||||||
|
id="btnBrowsersourceChat">
|
||||||
<i class="fa fa-history menu-icon"></i>
|
<i class="fa fa-history menu-icon"></i>
|
||||||
</li>
|
</li>
|
||||||
<li class="item" tip="Vtuber"
|
<li class="item" tip="Vtuber"
|
||||||
|
|
@ -79,10 +93,10 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div tip="Hide Menu">
|
</div>
|
||||||
<div class="circle-left">
|
<div tip="Hide Menu">
|
||||||
<i class="fa fa-cog hide"></i>
|
<div class="circle-left">
|
||||||
</div>
|
<i class="fa fa-cog hide"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--#endregion -->
|
<!--#endregion -->
|
||||||
|
|
@ -95,36 +109,23 @@
|
||||||
<div id="tstx">
|
<div id="tstx">
|
||||||
<div>
|
<div>
|
||||||
<div id="TTSSelector">
|
<div id="TTSSelector">
|
||||||
<h3 class="LabelText">Installed Voices</h3>
|
<h3 class="LabelText">Primary TTS Voice</h3>
|
||||||
<div class="optionrow">
|
<div class="optionrow">
|
||||||
<select name="installedTTS"
|
<select name="primaryVoice"
|
||||||
id="installedTTS"></select>
|
id="primaryVoice"></select>
|
||||||
<label class="btn active Basiclabel">
|
<select name="language" class="language"
|
||||||
<input type="radio" name="voiceService"
|
id="primaryLanguage"
|
||||||
id="InternalTTS" /><i
|
tip="Primary language to detect in chat"></select>
|
||||||
class="fa fa-square fa-2x"></i><i
|
<!-- </label> -->
|
||||||
class="fa fa-check-square fa-2x"></i>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="LabelText">Google Voices</h3>
|
<h3 class="LabelText">Secondary TTS Voice</h3>
|
||||||
<div class="optionrow">
|
<div class="optionrow">
|
||||||
<select name="voice" id="googleVoice"></select>
|
<select name="secondaryVoice"
|
||||||
<label class="btn active Basiclabel">
|
id="secondaryVoice"></select>
|
||||||
<input type="radio" name="voiceService"
|
<select name="language" class="language"
|
||||||
id="GoogleTTS" /><i
|
id="secondaryLanguage"
|
||||||
class="fa fa-square fa-2x"></i><i
|
tip="Secondary language to detect in chat"></select>
|
||||||
class="fa fa-check-square fa-2x"></i>
|
<!-- </label> -->
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<h3 class="LabelText">Amazon Voices</h3>
|
|
||||||
<div class="optionrow">
|
|
||||||
<select name="voice" id="amazonVoice"></select>
|
|
||||||
<label class="btn active Basiclabel">
|
|
||||||
<input type="radio" name="voiceService"
|
|
||||||
id="AmazonTTS" /><i
|
|
||||||
class="fa fa-square fa-2x"></i><i
|
|
||||||
class="fa fa-check-square fa-2x"></i>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -173,8 +174,6 @@
|
||||||
<!-- #region Commands Screen-->
|
<!-- #region Commands Screen-->
|
||||||
<div class="OptionPanel" id="Logs">
|
<div class="OptionPanel" id="Logs">
|
||||||
<table id="logTable">
|
<table id="logTable">
|
||||||
|
|
||||||
<h1>Log Viewer</h1>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Level</th>
|
<th>Level</th>
|
||||||
|
|
@ -286,344 +285,406 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="AdvancedMenuRow">
|
<div class="AdvancedMenuRow">
|
||||||
<div class="AdvancedMenuLabel">Oauth
|
<div class="AdvancedMenuLabel">Oauth
|
||||||
Token</div><input
|
Token</div>
|
||||||
type="text"
|
<input
|
||||||
|
type="password"
|
||||||
|
type2="text"
|
||||||
class="fname inputTwitch"
|
class="fname inputTwitch"
|
||||||
id="TWITCH_OAUTH_TOKEN">
|
id="TWITCH_OAUTH_TOKEN">
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_USERNAME"
|
|
||||||
tip="Your Twitch username"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">Client
|
|
||||||
ID</div><input
|
|
||||||
type="text"
|
|
||||||
class="fname inputTwitch"
|
|
||||||
id="TWITCH_CLIENT_ID">
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_USERNAME"
|
|
||||||
tip="Your Twitch username"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">Client
|
|
||||||
Secret</div><input
|
|
||||||
type="text"
|
|
||||||
class="fname inputTwitch"
|
|
||||||
id="TWITCH_CLIENT_SECRET">
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_USERNAME"
|
|
||||||
tip="Your Twitch username"></i>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset id="AdvancedMenuServer"
|
|
||||||
class="AdvancedMenu">
|
|
||||||
<legend class="legendStyle"
|
|
||||||
tip="Enable/Disable Server">
|
|
||||||
<img
|
|
||||||
class="AdvancedMenuIcon"
|
|
||||||
src="./images/server.svg"
|
|
||||||
alt>
|
|
||||||
<input type="checkbox"
|
|
||||||
id="USE_SERVER"
|
|
||||||
class="checkbox" />
|
|
||||||
<label for="USE_SERVER"
|
|
||||||
class="toggle-small "></label>
|
|
||||||
</legend>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">Port</div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="fname inputTwitch"
|
|
||||||
id="PORT">
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_PORT"
|
|
||||||
tip="Port to use to host additional services"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">Use
|
|
||||||
Vtuber</div>
|
|
||||||
<label for="USE_VTUBER"
|
|
||||||
class="toggle-small "></label>
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_VTUBER"
|
|
||||||
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">Use
|
|
||||||
ChatBubble</div>
|
|
||||||
<label for="USE_CHATBUBBLE"
|
|
||||||
class="toggle-small "></label>
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_CHATBUBBLE"
|
|
||||||
tip="You can use it as a browsersource on http://localhost:PORT/chat"></i>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset id="AdvancedMenuAmazon"
|
|
||||||
class="AdvancedMenu">
|
|
||||||
<legend class="legendStyle"
|
|
||||||
tip="Enable/Disable Amazon">
|
|
||||||
<img
|
|
||||||
class="AdvancedMenuIcon"
|
|
||||||
src="./images/amazon.svg"
|
|
||||||
alt>
|
|
||||||
<input type="checkbox"
|
|
||||||
id="USE_AMAZON"
|
|
||||||
class="checkbox" />
|
|
||||||
<label for="USE_AMAZON"
|
|
||||||
class="toggle-small "></label>
|
|
||||||
</legend>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">
|
|
||||||
Access Key</div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="fname inputTwitch"
|
|
||||||
id="AMAZON_ACCESS_KEY">
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_AMAZON_ACCESS_KEY"
|
|
||||||
tip="Amazon Access Key"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">
|
|
||||||
Access Secret</div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="fname inputTwitch"
|
|
||||||
id="AMAZON_ACCESS_SECRET">
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_AMAZON_ACCESS_SECRET"
|
|
||||||
tip="Amazon Access Secret"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">
|
|
||||||
Test credentials</div>
|
|
||||||
<button
|
<button
|
||||||
class="AdvancedMenuButton"
|
class="password-toggle-btn password-toggle-btn1">
|
||||||
id="TestAmazonCredentials">Test</button>
|
<span
|
||||||
<i
|
class="password-toggle-icon">👁️</span>
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
</button>
|
||||||
id="Info_AMAZON_TEST_CREDENTIALS"
|
</input>
|
||||||
tip="Test Amazon credentials"></i>
|
<i
|
||||||
</div>
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
</fieldset>
|
id="Info_USERNAME"
|
||||||
<fieldset id="AdvancedMenuGoogle"
|
tip="Your Twitch username"></i>
|
||||||
class="AdvancedMenu">
|
</div>
|
||||||
<legend class="legendStyle"
|
|
||||||
tip="Enable/Disable Google service">
|
|
||||||
<img
|
|
||||||
class="AdvancedMenuIcon"
|
|
||||||
src="./images/google.svg"
|
|
||||||
alt>
|
|
||||||
<input type="checkbox"
|
|
||||||
id="USE_GOOGLE"
|
|
||||||
class="checkbox" />
|
|
||||||
<label for="USE_GOOGLE"
|
|
||||||
class="toggle-small "></label>
|
|
||||||
</legend>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">
|
|
||||||
API Key</div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="fname inputTwitch"
|
|
||||||
id="GOOGLE_API_KEY">
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_GOOGLE_APPI_KEY"
|
|
||||||
tip="Google API Key"></i>
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div class="AdvancedMenuLabel">
|
|
||||||
Test credentials</div>
|
|
||||||
<button
|
|
||||||
class="AdvancedMenuButton"
|
|
||||||
id="TestGoogleCredentials">Test</button>
|
|
||||||
<i
|
|
||||||
class="fa fa-question-circle fa-2x SmallButton"
|
|
||||||
id="Info_GOOGLE_TEST_CREDENTIALS"
|
|
||||||
tip="Test Google credentials"></i>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="ThemeCreator_mask">
|
|
||||||
<div class="SaveConfig">
|
|
||||||
<div class="AdvancedMenuRow">
|
<div class="AdvancedMenuRow">
|
||||||
<button class="AdvancedMenuButton"
|
<div class="AdvancedMenuLabel">Client
|
||||||
id="HideThemeCreator">Close
|
ID</div><input
|
||||||
Theme Creator</button>
|
type="password"
|
||||||
<label class="testLabel Basiclabel"></label>
|
type2="text"
|
||||||
|
class="fname inputTwitch"
|
||||||
|
id="TWITCH_CLIENT_ID">
|
||||||
|
<button
|
||||||
|
class="password-toggle-btn password-toggle-btn2">
|
||||||
|
<span
|
||||||
|
class="password-toggle-icon">👁️</span>
|
||||||
|
</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_USERNAME"
|
||||||
|
tip="Your Twitch username"></i>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">Client
|
||||||
|
Secret</div><input
|
||||||
|
type="password"
|
||||||
|
type2="text"
|
||||||
|
class="fname inputTwitch"
|
||||||
|
id="TWITCH_CLIENT_SECRET">
|
||||||
|
<button
|
||||||
|
class="password-toggle-btn password-toggle-btn3">
|
||||||
|
<span
|
||||||
|
class="password-toggle-icon">👁️</span>
|
||||||
|
</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_USERNAME"
|
||||||
|
tip="Your Twitch username"></i>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">
|
||||||
|
Test credentials</div>
|
||||||
|
<button
|
||||||
|
class="AdvancedMenuButton"
|
||||||
|
id="TestTwitchCredentials">Test</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_TWITCH_TEST_CREDENTIALS"
|
||||||
|
tip="Test Twitch credentials"></i>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset id="AdvancedMenuServer"
|
||||||
|
class="AdvancedMenu">
|
||||||
|
<legend class="legendStyle"
|
||||||
|
tip="Enable/Disable Server">
|
||||||
|
<img
|
||||||
|
class="AdvancedMenuIcon"
|
||||||
|
src="./images/server.svg"
|
||||||
|
alt>
|
||||||
|
<input type="checkbox"
|
||||||
|
id="USE_SERVER"
|
||||||
|
class="checkbox" />
|
||||||
|
<label for="USE_SERVER"
|
||||||
|
class="toggle-small "></label>
|
||||||
|
</legend>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">Port</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="fname inputServer"
|
||||||
|
id="PORT">
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_PORT"
|
||||||
|
tip="Port to use to host additional services"></i>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">Use
|
||||||
|
Vtuber</div>
|
||||||
|
<input type="checkbox"
|
||||||
|
id="USE_VTUBER"
|
||||||
|
class="checkbox" />
|
||||||
|
<label for="USE_VTUBER"
|
||||||
|
class="toggle-small "></label>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_VTUBER"
|
||||||
|
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"></i>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">Use
|
||||||
|
ChatBubble</div>
|
||||||
|
<input type="checkbox"
|
||||||
|
id="USE_CHATBUBBLE"
|
||||||
|
class="checkbox" />
|
||||||
|
<label for="USE_CHATBUBBLE"
|
||||||
|
class="toggle-small "></label>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_CHATBUBBLE"
|
||||||
|
tip="You can use it as a browsersource on http://localhost:PORT/chat"></i>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset id="AdvancedMenuAmazon"
|
||||||
|
class="AdvancedMenu">
|
||||||
|
<legend class="legendStyle"
|
||||||
|
tip="Enable/Disable Amazon">
|
||||||
|
<img
|
||||||
|
class="AdvancedMenuIcon"
|
||||||
|
src="./images/amazon.svg"
|
||||||
|
alt>
|
||||||
|
<input type="checkbox"
|
||||||
|
id="USE_AMAZON"
|
||||||
|
class="checkbox" />
|
||||||
|
<label for="USE_AMAZON"
|
||||||
|
class="toggle-small "></label>
|
||||||
|
</legend>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">
|
||||||
|
Access Key</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
type2="text"
|
||||||
|
class="fname inputAmazon"
|
||||||
|
id="AMAZON_ACCESS_KEY"><button
|
||||||
|
class="password-toggle-btn password-toggle-btn4">
|
||||||
|
<span
|
||||||
|
class="password-toggle-icon">👁️</span>
|
||||||
|
</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_AMAZON_ACCESS_KEY"
|
||||||
|
tip="Amazon Access Key"></i>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">
|
||||||
|
Access Secret</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
type2="text"
|
||||||
|
class="fname inputAmazon"
|
||||||
|
id="AMAZON_ACCESS_SECRET"><button
|
||||||
|
class="password-toggle-btn password-toggle-btn5">
|
||||||
|
<span
|
||||||
|
class="password-toggle-icon">👁️</span>
|
||||||
|
</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_AMAZON_ACCESS_SECRET"
|
||||||
|
tip="Amazon Access Secret"></i>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">
|
||||||
|
Test credentials</div>
|
||||||
|
<button
|
||||||
|
class="AdvancedMenuButton"
|
||||||
|
id="TestAmazonCredentials">Test</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_AMAZON_TEST_CREDENTIALS"
|
||||||
|
tip="Test Amazon credentials"></i>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset id="AdvancedMenuGoogle"
|
||||||
|
class="AdvancedMenu">
|
||||||
|
<legend class="legendStyle"
|
||||||
|
tip="Enable/Disable Google service">
|
||||||
|
<img
|
||||||
|
class="AdvancedMenuIcon"
|
||||||
|
src="./images/google.svg"
|
||||||
|
alt>
|
||||||
|
<input type="checkbox"
|
||||||
|
id="USE_GOOGLE"
|
||||||
|
class="checkbox" />
|
||||||
|
<label for="USE_GOOGLE"
|
||||||
|
class="toggle-small "></label>
|
||||||
|
</legend>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">
|
||||||
|
API Key</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
type2="text"
|
||||||
|
class="fname inputGoogle"
|
||||||
|
id="GOOGLE_API_KEY"><button
|
||||||
|
class="password-toggle-btn password-toggle-btn6">
|
||||||
|
<span
|
||||||
|
class="password-toggle-icon">👁️</span>
|
||||||
|
</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_GOOGLE_APPI_KEY"
|
||||||
|
tip="Google API Key"></i>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<div class="AdvancedMenuLabel">
|
||||||
|
Test credentials</div>
|
||||||
|
<button
|
||||||
|
class="fname inputGoogle AdvancedMenuButton"
|
||||||
|
id="TestGoogleCredentials">Test</button>
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle fa-2x SmallButton"
|
||||||
|
id="Info_GOOGLE_TEST_CREDENTIALS"
|
||||||
|
tip="Test Google credentials"></i>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="ThemeCreator_mask">
|
||||||
|
<div class="SaveConfig">
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<button class="AdvancedMenuButton"
|
||||||
|
id="HideThemeCreator">Close
|
||||||
|
Theme Creator</button>
|
||||||
|
<label class="testLabel Basiclabel"></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="mini-container">
|
<div id="mini-container">
|
||||||
<div id="mini-top-bar">
|
<div id="mini-top-bar">
|
||||||
|
</div>
|
||||||
|
<div id="mini-main">
|
||||||
|
<div id="mini-left"></div>
|
||||||
|
<div id="mini-mid"></div>
|
||||||
|
<div id="mini-right"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend id="legendStyle"
|
||||||
|
tip="Enable/Disable Custom Theme">
|
||||||
|
<svg width="24" height="24"
|
||||||
|
viewBox="0 0 24 24"><path
|
||||||
|
d="M4 21.832c4.587.38 2.944-4.493 7.188-4.538l1.838 1.534c.458 5.538-6.315 6.773-9.026 3.004zm14.065-7.115c1.427-2.239 5.847-9.749 5.847-9.749.352-.623-.43-1.273-.976-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.039 3.995-2.81zm-11.999 3.876c.666-1.134 1.748-2.977 4.447-3.262.434-2.087.607-3.3 2.547-5.112 1.373-1.282 4.938-4.409 7.021-6.229-1-2.208-4.141-4.023-8.178-3.99-6.624.055-11.956 5.465-11.903 12.092.023 2.911 1.081 5.571 2.82 7.635 1.618.429 2.376.348 3.246-1.134zm6.952-15.835c1.102-.006 2.005.881 2.016 1.983.004 1.103-.882 2.009-1.986 2.016-1.105.009-2.008-.88-2.014-1.984-.013-1.106.876-2.006 1.984-2.015zm-5.997 2.001c1.102-.01 2.008.877 2.012 1.983.012 1.106-.88 2.005-1.98 2.016-1.106.007-2.009-.881-2.016-1.988-.009-1.103.877-2.004 1.984-2.011zm-2.003 5.998c1.106-.007 2.01.882 2.016 1.985.01 1.104-.88 2.008-1.986 2.015-1.105.008-2.005-.88-2.011-1.985-.011-1.105.879-2.004 1.981-2.015zm10.031 8.532c.021 2.239-.882 3.718-1.682 4.587l-.046.044c5.255-.591 9.062-4.304 6.266-7.889-1.373 2.047-2.534 2.442-4.538 3.258z" /></svg>
|
||||||
|
<input type="checkbox"
|
||||||
|
id="USE_CUSTOM_THEME"
|
||||||
|
class="checkbox" />
|
||||||
|
<label for="USE_CUSTOM_THEME"
|
||||||
|
class="toggle-small">
|
||||||
|
</legend>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="MAIN_COLOR_1"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Main
|
||||||
|
Color 1</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="mini-main">
|
<div class="AdvancedMenuRow">
|
||||||
<div id="mini-left"></div>
|
<input type="color"
|
||||||
<div id="mini-mid"></div>
|
id="MAIN_COLOR_2"
|
||||||
<div id="mini-right"></div>
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Main
|
||||||
|
Color 2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="MAIN_COLOR_3"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Main
|
||||||
|
Color 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="MAIN_COLOR_4"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Main
|
||||||
|
Color 4</div>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="TOP_BAR"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Top
|
||||||
|
Bar</div>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="MID_SECTION"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Mid
|
||||||
|
Section</div>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="CHAT_BUBBLE_BG"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Chat
|
||||||
|
Bubble Background</div>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="CHAT_BUBBLE_HEADER"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Chat
|
||||||
|
Bubble Header</div>
|
||||||
|
</div>
|
||||||
|
<div class="AdvancedMenuRow">
|
||||||
|
<input type="color"
|
||||||
|
id="CHAT_BUBBLE_MESSAGE"
|
||||||
|
value="#0000ff">
|
||||||
|
<div
|
||||||
|
class="AdvancedMenuLabel2">Chat
|
||||||
|
Bubble Message</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend id="legendStyle"
|
|
||||||
tip="Enable/Disable Custom Theme">
|
|
||||||
<svg width="24" height="24"
|
|
||||||
viewBox="0 0 24 24"><path
|
|
||||||
d="M4 21.832c4.587.38 2.944-4.493 7.188-4.538l1.838 1.534c.458 5.538-6.315 6.773-9.026 3.004zm14.065-7.115c1.427-2.239 5.847-9.749 5.847-9.749.352-.623-.43-1.273-.976-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.039 3.995-2.81zm-11.999 3.876c.666-1.134 1.748-2.977 4.447-3.262.434-2.087.607-3.3 2.547-5.112 1.373-1.282 4.938-4.409 7.021-6.229-1-2.208-4.141-4.023-8.178-3.99-6.624.055-11.956 5.465-11.903 12.092.023 2.911 1.081 5.571 2.82 7.635 1.618.429 2.376.348 3.246-1.134zm6.952-15.835c1.102-.006 2.005.881 2.016 1.983.004 1.103-.882 2.009-1.986 2.016-1.105.009-2.008-.88-2.014-1.984-.013-1.106.876-2.006 1.984-2.015zm-5.997 2.001c1.102-.01 2.008.877 2.012 1.983.012 1.106-.88 2.005-1.98 2.016-1.106.007-2.009-.881-2.016-1.988-.009-1.103.877-2.004 1.984-2.011zm-2.003 5.998c1.106-.007 2.01.882 2.016 1.985.01 1.104-.88 2.008-1.986 2.015-1.105.008-2.005-.88-2.011-1.985-.011-1.105.879-2.004 1.981-2.015zm10.031 8.532c.021 2.239-.882 3.718-1.682 4.587l-.046.044c5.255-.591 9.062-4.304 6.266-7.889-1.373 2.047-2.534 2.442-4.538 3.258z" /></svg>
|
|
||||||
<input type="checkbox"
|
|
||||||
id="USE_CUSTOM_THEME"
|
|
||||||
class="checkbox" />
|
|
||||||
<label for="USE_CUSTOM_THEME"
|
|
||||||
class="toggle-small">
|
|
||||||
</legend>
|
|
||||||
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Main
|
|
||||||
Color 1</div>
|
|
||||||
<input type="color"
|
|
||||||
id="MAIN_COLOR_1"
|
|
||||||
value="#0000ff">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Main
|
|
||||||
Color 2</div>
|
|
||||||
<input type="color"
|
|
||||||
id="MAIN_COLOR_2"
|
|
||||||
value="#0000ff">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Main
|
|
||||||
Color 3</div>
|
|
||||||
<input type="color"
|
|
||||||
id="MAIN_COLOR_3"
|
|
||||||
value="#0000ff">
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Main
|
|
||||||
Color 4</div>
|
|
||||||
<input type="color"
|
|
||||||
id="MAIN_COLOR_4"
|
|
||||||
value="#0000ff">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Top
|
|
||||||
Bar</div>
|
|
||||||
<input type="color"
|
|
||||||
id="TOP_BAR"
|
|
||||||
value="#0000ff">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Mid
|
|
||||||
Section</div>
|
|
||||||
<input type="color"
|
|
||||||
id="MID_SECTION"
|
|
||||||
value="#0000ff">
|
|
||||||
</div>
|
|
||||||
<div class="AdvancedMenuRow">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Chat
|
|
||||||
Bubble Background</div>
|
|
||||||
<input type="color"
|
|
||||||
id="CHAT_BUBBLE_BG"
|
|
||||||
value="#0000ff">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Chat
|
|
||||||
Bubble Header</div>
|
|
||||||
<input type="color"
|
|
||||||
id="CHAT_BUBBLE_HEADER"
|
|
||||||
value="#0000ff">
|
|
||||||
<div
|
|
||||||
class="AdvancedMenuLabel">Chat
|
|
||||||
Bubble Message</div>
|
|
||||||
<input type="color"
|
|
||||||
id="CHAT_BUBBLE_MESSAGE"
|
|
||||||
value="#0000ff">
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--#endregion -->
|
|
||||||
|
|
||||||
<!-- #region Main chat box-->
|
|
||||||
<div class="OptionPanel show" id="Chat">
|
|
||||||
<div id="chatBox" class="message-window">
|
|
||||||
</div>
|
|
||||||
<!-- User input box-->
|
|
||||||
<div id="userInput" class="chat-input">
|
|
||||||
|
|
||||||
<!-- User text input-->
|
|
||||||
<input id="textInput" class="input-box"
|
|
||||||
type="text" name="msg"
|
|
||||||
placeholder="Tap 'Enter' to send a message">
|
|
||||||
|
|
||||||
<!-- Send button-->
|
|
||||||
<button class="SmallButton" id="SendButton">
|
|
||||||
<i class="fa fa-play-circle fa-2x"
|
|
||||||
aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--#endregion -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!--#endregion -->
|
<!--#endregion -->
|
||||||
|
|
||||||
<!-- #region Viewer list, right section-->
|
<!-- #region Main chat box-->
|
||||||
<div class="sidepanel-right">
|
<div class="OptionPanel show" id="Chat">
|
||||||
<div class="viewer-list">
|
<div id="chatBox" class="message-window">
|
||||||
<div class="tabx-bar">
|
|
||||||
<a class="tabx" href="#"
|
|
||||||
data-text="Twitch">
|
|
||||||
<img class="tab"
|
|
||||||
src="./images/twitch.svg" alt=" ">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<section id="content1">
|
|
||||||
<h1 class="titles">Moderators</h1>
|
|
||||||
<ul class="no-bullets" id="moderators">
|
|
||||||
</ul>
|
|
||||||
<h1 class="titles">Viewers</h1>
|
|
||||||
<ul class="no-bullets" id="viewers">
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section id="content2">
|
|
||||||
<ul class="no-bullets">
|
|
||||||
<li>a</li>
|
|
||||||
<li>b</li>
|
|
||||||
<li>c</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section id="content3">
|
|
||||||
<ul class="no-bullets">
|
|
||||||
<li>1</li>
|
|
||||||
<li>2</li>
|
|
||||||
<li>3</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<div tip="Hide Viewers">
|
|
||||||
<div class="circle-right">
|
|
||||||
<i class="fa fa-eye hide" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- User input box-->
|
||||||
|
<div id="userInput" class="chat-input">
|
||||||
|
|
||||||
|
<!-- User text input-->
|
||||||
|
<input id="textInput" class="input-box"
|
||||||
|
type="text" name="msg"
|
||||||
|
placeholder="Tap 'Enter' to send a message">
|
||||||
|
|
||||||
|
<!-- Send button-->
|
||||||
|
<button class="SmallButton" id="SendButton">
|
||||||
|
<i class="fa fa-play-circle fa-2x"
|
||||||
|
aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- #endregion -->
|
<!--#endregion -->
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<!-- #region js scripts -->
|
|
||||||
<script src="./js/renderer.js"></script>
|
|
||||||
<!--#endregion -->
|
|
||||||
|
|
||||||
</html>
|
</div>
|
||||||
|
<!--#endregion -->
|
||||||
|
|
||||||
|
<!-- #region Viewer list, right section-->
|
||||||
|
<div class="sidepanel-right">
|
||||||
|
<div class="viewer-list">
|
||||||
|
<div class="tabx-bar">
|
||||||
|
<a class="tabx" href="#"
|
||||||
|
data-text="Twitch">
|
||||||
|
<img class="tab"
|
||||||
|
src="./images/twitch.svg" alt=" ">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<section id="content1">
|
||||||
|
<h1 class="titles">Moderators</h1>
|
||||||
|
<ul class="no-bullets" id="moderators">
|
||||||
|
</ul>
|
||||||
|
<h1 class="titles">Viewers</h1>
|
||||||
|
<ul class="no-bullets" id="viewers">
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section id="content2">
|
||||||
|
<ul class="no-bullets">
|
||||||
|
<li>a</li>
|
||||||
|
<li>b</li>
|
||||||
|
<li>c</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section id="content3">
|
||||||
|
<ul class="no-bullets">
|
||||||
|
<li>1</li>
|
||||||
|
<li>2</li>
|
||||||
|
<li>3</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tip="Hide Viewers" tip-left>
|
||||||
|
<div class="circle-right">
|
||||||
|
<i class="fa fa-eye hide" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- #endregion -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!-- #region js scripts -->
|
||||||
|
<script src="./js/renderer.js"></script>
|
||||||
|
<!--#endregion -->
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -51,10 +51,10 @@ document.body.querySelector('#SendButton').addEventListener('click', () => {
|
||||||
document.body.querySelector('.circle-left').addEventListener('click', () => {
|
document.body.querySelector('.circle-left').addEventListener('click', () => {
|
||||||
const menu = document.body.querySelector('.sidepanel-left');
|
const menu = document.body.querySelector('.sidepanel-left');
|
||||||
|
|
||||||
if (menu.classList.contains('collapse-menu')) {
|
if (menu.classList.contains('collapse-menu-left')) {
|
||||||
menu.classList.remove('collapse-menu');
|
menu.classList.remove('collapse-menu-left');
|
||||||
} else {
|
} else {
|
||||||
menu.classList.add('collapse-menu');
|
menu.classList.add('collapse-menu-left');
|
||||||
}
|
}
|
||||||
|
|
||||||
const leftCircle = document.body.querySelector('.circle-left');
|
const leftCircle = document.body.querySelector('.circle-left');
|
||||||
|
|
@ -70,10 +70,10 @@ document.body.querySelector('.circle-left').addEventListener('click', () => {
|
||||||
document.body.querySelector('.circle-right').addEventListener('click', () => {
|
document.body.querySelector('.circle-right').addEventListener('click', () => {
|
||||||
const menu = document.body.querySelector('.sidepanel-right');
|
const menu = document.body.querySelector('.sidepanel-right');
|
||||||
|
|
||||||
if (menu.classList.contains('collapse-menu')) {
|
if (menu.classList.contains('collapse-menu-right')) {
|
||||||
menu.classList.remove('collapse-menu');
|
menu.classList.remove('collapse-menu-right');
|
||||||
} else {
|
} else {
|
||||||
menu.classList.add('collapse-menu');
|
menu.classList.add('collapse-menu-right');
|
||||||
}
|
}
|
||||||
|
|
||||||
const leftCircle = document.body.querySelector('.circle-right');
|
const leftCircle = document.body.querySelector('.circle-right');
|
||||||
|
|
@ -175,6 +175,5 @@ document.body.querySelector('#HideThemeCreator').addEventListener('click', () =>
|
||||||
// #region Test/Save TTS
|
// #region Test/Save TTS
|
||||||
document.body.querySelector('#TTSTestButton').addEventListener('click', () => {
|
document.body.querySelector('#TTSTestButton').addEventListener('click', () => {
|
||||||
const text = document.getElementById('TTSTest').value;
|
const text = document.getElementById('TTSTest').value;
|
||||||
console.log(text);
|
sound.playVoice(text, '', 'User', text);
|
||||||
sound.playVoice(text, '', '', text);
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
0
src/js/google.js
Normal file
0
src/js/google.js
Normal file
|
|
@ -7,7 +7,6 @@ const request = require('request');
|
||||||
const langdetect = require('langdetect');
|
const langdetect = require('langdetect');
|
||||||
const io = require('socket.io-client');
|
const io = require('socket.io-client');
|
||||||
|
|
||||||
const socket = io('http://localhost:9000'); // Connect to your Socket.IO server
|
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
|
||||||
const util = require('util');
|
const util = require('util');
|
||||||
|
|
@ -27,21 +26,21 @@ const googleVoices = fs.readFileSync(path.join(__dirname, './config/googleVoices
|
||||||
// TODO: remove amazon voices txt and use api instead (sakura project has it)
|
// TODO: remove amazon voices txt and use api instead (sakura project has it)
|
||||||
const amazonVoices = fs.readFileSync(path.join(__dirname, './config/amazonVoices.txt')).toString().split('\r\n');
|
const amazonVoices = fs.readFileSync(path.join(__dirname, './config/amazonVoices.txt')).toString().split('\r\n');
|
||||||
|
|
||||||
|
const languagesObject = fs.readFileSync(path.join(__dirname, './config/languages.txt')).toString().split('\r\n');
|
||||||
|
|
||||||
// html elements
|
// html elements
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
const ttsSelector = document.body.querySelector('#TTSSelector');
|
const ttsSelector = document.body.querySelector('#TTSSelector');
|
||||||
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
|
|
||||||
const amazonVoiceSelect = document.querySelector('#amazonVoice'); // obtain the html reference of the amazon voices comboBox
|
const amazonVoiceSelect = document.querySelector('#amazonVoice'); // obtain the html reference of the amazon voices comboBox
|
||||||
const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
|
|
||||||
const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
|
||||||
const notificationAudioDevices = document.querySelector('#notificationAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
const notificationAudioDevices = document.querySelector('#notificationAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
||||||
const devicesDropdown = document.querySelector('#devicesDropdown');
|
const devicesDropdown = document.querySelector('#devicesDropdown');
|
||||||
const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox
|
const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox
|
||||||
|
const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
||||||
|
|
||||||
|
|
||||||
// laod local javascript files
|
// laod local javascript files
|
||||||
const chat = require(path.join(__dirname, './js/chat'));
|
const chat = require(path.join(__dirname, './js/chat'));
|
||||||
|
|
||||||
const Polly = require(path.join(__dirname, './js/amazon'));
|
|
||||||
const messageTemplates = require(path.join(__dirname, './js/messageTemplates'));
|
const messageTemplates = require(path.join(__dirname, './js/messageTemplates'));
|
||||||
const logger = require(path.join(__dirname, './js/logger'));
|
const logger = require(path.join(__dirname, './js/logger'));
|
||||||
const sound = require(path.join(__dirname, './js/sound'));
|
const sound = require(path.join(__dirname, './js/sound'));
|
||||||
|
|
@ -55,15 +54,25 @@ if (envInfo.env) {
|
||||||
notificationSounds = path.join(__dirname, './sounds/notifications');
|
notificationSounds = path.join(__dirname, './sounds/notifications');
|
||||||
}
|
}
|
||||||
|
|
||||||
const server = require(path.join(__dirname, './js/server'));
|
const twitch = config.settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : '';
|
||||||
|
|
||||||
|
let server;
|
||||||
|
let socket;
|
||||||
|
|
||||||
|
if (config.settings.SERVER.USE_SERVER) {
|
||||||
|
server = require(path.join(__dirname, './js/server'));
|
||||||
|
socket = io(`http://localhost:${config.settings.SERVER.PORT}`); // Connect to your Socket.IO server
|
||||||
|
}
|
||||||
|
|
||||||
|
const Polly = config.settings.AMAZON.USE_AMAZON ? require(path.join(__dirname, './js/amazon')) : '';
|
||||||
|
const google = config.settings.GOOGLE.USE_GOOGLE ? require(path.join(__dirname, './js/amazon')) : '';
|
||||||
|
|
||||||
const theme = require(path.join(__dirname, './js/theme'));
|
const theme = require(path.join(__dirname, './js/theme'));
|
||||||
const twitch = require(path.join(__dirname, './js/twitch'));
|
|
||||||
|
|
||||||
// initialize values
|
// initialize values
|
||||||
config.getGeneralSettings();
|
config.getGeneralSettings();
|
||||||
config.getTwitchSettings();
|
|
||||||
config.setCustomThemeToggle();
|
config.setCustomThemeToggle();
|
||||||
config.setTwitchToggle();
|
|
||||||
|
|
||||||
let selectedVoiceIndex;
|
let selectedVoiceIndex;
|
||||||
let selectedEncodingIndex;
|
let selectedEncodingIndex;
|
||||||
|
|
@ -115,68 +124,149 @@ async function getAudioDevices() {
|
||||||
});
|
});
|
||||||
|
|
||||||
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
|
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
|
||||||
// devicesDropdown.selectedIndex = 0;
|
|
||||||
|
|
||||||
// Create an audio context
|
|
||||||
// audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getAudioDevices();
|
getAudioDevices();
|
||||||
|
|
||||||
say.getInstalledVoices((err, voices) => {
|
function setLanguagesinSelect(languageSelector, setting) {
|
||||||
voices.forEach((voice, i) => {
|
let languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox
|
||||||
|
|
||||||
|
const languages = Object.keys(languagesObject);
|
||||||
|
languages.forEach((language) => {
|
||||||
const option = document.createElement('option');
|
const option = document.createElement('option');
|
||||||
|
|
||||||
option.value = i;
|
option.value = language;
|
||||||
option.innerHTML = voice;
|
option.innerHTML = languagesObject[language];
|
||||||
|
|
||||||
installedTTS.appendChild(option);
|
languageSelect.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
languageSelect.selectedIndex = setting;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLanguagesinSelect("#primaryLanguage", config.settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX);
|
||||||
|
setLanguagesinSelect("#secondaryLanguage", config.settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX);
|
||||||
|
|
||||||
|
function getInstalledVoices(callback) {
|
||||||
|
say.getInstalledVoices((err, voices) => {
|
||||||
|
|
||||||
|
function setVoicesinSelect(voiceSelector) {
|
||||||
|
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
|
||||||
|
|
||||||
|
const internalTTSHeader = document.createElement('optgroup');
|
||||||
|
internalTTSHeader.label = "Internal TTS";
|
||||||
|
voiceSelect.appendChild(internalTTSHeader);
|
||||||
|
|
||||||
|
// const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
|
||||||
|
voices.forEach((voice, i) => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
|
||||||
|
option.value = i;
|
||||||
|
option.innerHTML = voice;
|
||||||
|
|
||||||
|
// installedTTS.appendChild(option);
|
||||||
|
internalTTSHeader.appendChild(option);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setVoicesinSelect("#primaryVoice");
|
||||||
|
setVoicesinSelect("#secondaryVoice");
|
||||||
|
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAmazonVoices(callback) {
|
||||||
|
if (!config.settings.AMAZON.USE_AMAZON) {
|
||||||
|
callback();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setVoicesinSelect(voiceSelector) {
|
||||||
|
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
|
||||||
|
|
||||||
|
const internalTTSHeader = document.createElement('optgroup');
|
||||||
|
internalTTSHeader.label = "Amazon TTS";
|
||||||
|
voiceSelect.appendChild(internalTTSHeader);
|
||||||
|
|
||||||
|
const voices = Object.keys(amazonVoices);
|
||||||
|
voices.forEach((voice) => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
|
||||||
|
option.value = voice;
|
||||||
|
option.innerHTML = amazonVoices[voice];
|
||||||
|
|
||||||
|
internalTTSHeader.appendChild(option);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setVoicesinSelect("#primaryVoice");
|
||||||
|
setVoicesinSelect("#secondaryVoice");
|
||||||
|
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getGoogleVoices(callback) {
|
||||||
|
if (!config.settings.GOOGLE.USE_GOOGLE) {
|
||||||
|
callback();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setVoicesinSelect(voiceSelector) {
|
||||||
|
let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox
|
||||||
|
|
||||||
|
const internalTTSHeader = document.createElement('optgroup');
|
||||||
|
internalTTSHeader.label = "Google TTS";
|
||||||
|
voiceSelect.appendChild(internalTTSHeader);
|
||||||
|
|
||||||
|
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
|
||||||
|
const voices = Object.keys(googleVoices);
|
||||||
|
voices.forEach((voice) => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.classList.add("option");
|
||||||
|
|
||||||
|
option.value = voice;
|
||||||
|
option.innerHTML = googleVoices[voice];
|
||||||
|
|
||||||
|
internalTTSHeader.appendChild(option);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setVoicesinSelect("#primaryVoice");
|
||||||
|
setVoicesinSelect("#secondaryVoice");
|
||||||
|
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
|
||||||
|
getGoogleVoices(function () {
|
||||||
|
getAmazonVoices(function () {
|
||||||
|
getInstalledVoices(function () {
|
||||||
|
let primaryVoice = document.querySelector("#primaryVoice");
|
||||||
|
primaryVoice.selectedIndex = config.settings.TTS.PRIMARY_TTS_VOICE;
|
||||||
|
|
||||||
|
let secondaryVoice = document.querySelector("#secondaryVoice");
|
||||||
|
secondaryVoice.selectedIndex = config.settings.TTS.SECONDARY_TTS_VOICE;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
installedTTS.selectedIndex = config.settings.TTS.INTERNAL_TTS_VOICE;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
async function getGoogleVoices() {
|
|
||||||
const voices = Object.keys(googleVoices);
|
|
||||||
await voices.forEach((voice) => {
|
|
||||||
const option = document.createElement('option');
|
|
||||||
|
|
||||||
option.value = voice;
|
|
||||||
option.innerHTML = googleVoices[voice];
|
|
||||||
|
|
||||||
googleVoiceSelect.appendChild(option);
|
|
||||||
});
|
|
||||||
googleVoiceSelect.selectedIndex = config.settings.TTS.GOOGLE_VOICE;
|
|
||||||
}
|
|
||||||
|
|
||||||
getGoogleVoices();
|
|
||||||
|
|
||||||
async function getAmazonVoices() {
|
|
||||||
const voices = Object.keys(amazonVoices);
|
|
||||||
await voices.forEach((voice) => {
|
|
||||||
const option = document.createElement('option');
|
|
||||||
|
|
||||||
option.value = voice;
|
|
||||||
option.innerHTML = amazonVoices[voice];
|
|
||||||
|
|
||||||
amazonVoiceSelect.appendChild(option);
|
|
||||||
});
|
|
||||||
amazonVoiceSelect.selectedIndex = config.settings.TTS.AMAZON_VOICE;
|
|
||||||
}
|
|
||||||
|
|
||||||
getAmazonVoices();
|
|
||||||
|
|
||||||
// Small tooltip
|
// Small tooltip
|
||||||
Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
|
Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
|
||||||
const tip = document.createElement('div');
|
const tip = document.createElement('div');
|
||||||
|
const body = document.querySelector('.container');
|
||||||
const element = el;
|
const element = el;
|
||||||
tip.classList.add('tooltip');
|
tip.classList.add('tooltip');
|
||||||
|
tip.classList.add('tooltiptext');
|
||||||
tip.innerText = el.getAttribute('tip');
|
tip.innerText = el.getAttribute('tip');
|
||||||
tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px'
|
tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px'
|
||||||
})`;
|
})`;
|
||||||
element.appendChild(tip);
|
body.appendChild(tip);
|
||||||
element.onmousemove = (e) => {
|
element.onmousemove = (e) => {
|
||||||
tip.style.left = `${e.pageX}px`;
|
tip.style.left = `${e.x}px`;
|
||||||
tip.style.top = `${e.pageY}px`;
|
tip.style.top = `${e.y}px`;
|
||||||
|
tip.style.zIndex = 1;
|
||||||
|
tip.style.visibility = "visible";
|
||||||
|
};
|
||||||
|
element.onmouseleave = (e) => {
|
||||||
|
tip.style.visibility = "hidden";
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -207,6 +297,25 @@ function showPreviewChatMessage() {
|
||||||
|
|
||||||
showPreviewChatMessage();
|
showPreviewChatMessage();
|
||||||
|
|
||||||
|
function hideText(button, field) {
|
||||||
|
document.body.querySelector(button).addEventListener('click', () => {
|
||||||
|
const passwordInput = document.querySelector(field);
|
||||||
|
if (passwordInput.type === 'password') {
|
||||||
|
passwordInput.type = 'lol';
|
||||||
|
} else {
|
||||||
|
passwordInput.type = 'password';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
hideText('.password-toggle-btn1', "#TWITCH_OAUTH_TOKEN");
|
||||||
|
hideText('.password-toggle-btn2', "#TWITCH_CLIENT_ID");
|
||||||
|
hideText('.password-toggle-btn3', "#TWITCH_CLIENT_SECRET");
|
||||||
|
hideText('.password-toggle-btn4', "#AMAZON_ACCESS_KEY");
|
||||||
|
hideText('.password-toggle-btn5', "#AMAZON_ACCESS_SECRET");
|
||||||
|
hideText('.password-toggle-btn6', "#GOOGLE_API_KEY");
|
||||||
|
|
||||||
// Amazon TTS
|
// Amazon TTS
|
||||||
// const polly = new Polly(amazonCredentials);
|
// const polly = new Polly(amazonCredentials);
|
||||||
// const options = {
|
// const options = {
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,39 @@ const path = require('path');
|
||||||
const http = require('http').createServer(app);
|
const http = require('http').createServer(app);
|
||||||
const io = require('socket.io')(http);
|
const io = require('socket.io')(http);
|
||||||
|
|
||||||
const PORT = 9000;
|
if (!config.settings.SERVER.USE_SERVER) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
app.use('/chat', express.static(path.join(__dirname, '../modules/chat')));
|
const PORT = config.settings.SERVER.PORT;
|
||||||
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));
|
|
||||||
|
http.listen(PORT, () => {
|
||||||
|
if (config.settings.SERVER.USE_VTUBER) {
|
||||||
|
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));
|
||||||
|
|
||||||
|
let vtuber = document.body.querySelector('#BrowsersourceVtuber');
|
||||||
|
let vtuberframe = document.createElement('iframe');
|
||||||
|
vtuberframe.class = "frame";
|
||||||
|
vtuberframe.src = `http://localhost:${PORT}/vtuber`;
|
||||||
|
vtuberframe.style.width = "100%";
|
||||||
|
vtuberframe.style.height = "100%";
|
||||||
|
vtuberframe.frameBorder = 0;
|
||||||
|
vtuber.appendChild(vtuberframe);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.settings.SERVER.USE_CHATBUBBLE) {
|
||||||
|
app.use('/chat', express.static(path.join(__dirname, '../modules/chat')));
|
||||||
|
|
||||||
|
let chat = document.body.querySelector('#BrowsersourceChat');
|
||||||
|
let chatframe = document.createElement('iframe');
|
||||||
|
chatframe.class = "frame";
|
||||||
|
chatframe.src = `http://localhost:${PORT}/chat`;
|
||||||
|
chatframe.style.width = "100%";
|
||||||
|
chatframe.style.height = "100%";
|
||||||
|
chatframe.frameBorder = 0;
|
||||||
|
chat.appendChild(chatframe);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Handle socket connections
|
// Handle socket connections
|
||||||
io.on('connection', (socket) => {
|
io.on('connection', (socket) => {
|
||||||
|
|
@ -23,23 +52,3 @@ io.on('connection', (socket) => {
|
||||||
|
|
||||||
socket.on('disconnect', () => { });
|
socket.on('disconnect', () => { });
|
||||||
});
|
});
|
||||||
|
|
||||||
http.listen(PORT, () => {
|
|
||||||
let vtuber = document.body.querySelector('#BrowsersourceVtuber');
|
|
||||||
let vtuberframe = document.createElement('iframe');
|
|
||||||
vtuberframe.class = "frame";
|
|
||||||
vtuberframe.src = "http://localhost:9000/vtuber";
|
|
||||||
vtuberframe.style.width = "100%";
|
|
||||||
vtuberframe.style.height = "100%";
|
|
||||||
vtuberframe.frameBorder = 0;
|
|
||||||
vtuber.appendChild(vtuberframe);
|
|
||||||
|
|
||||||
let chat = document.body.querySelector('#BrowsersourceChat');
|
|
||||||
let chatframe = document.createElement('iframe');
|
|
||||||
chatframe.class = "frame";
|
|
||||||
chatframe.src = "http://localhost:9000/chat";
|
|
||||||
chatframe.style.width = "100%";
|
|
||||||
chatframe.style.height = "100%";
|
|
||||||
chatframe.frameBorder = 0;
|
|
||||||
chat.appendChild(chatframe);
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,31 @@ if (envInfo.env) {
|
||||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.querySelector('#installedTTS').addEventListener('change', () => {
|
document.body.querySelector('#primaryVoice').addEventListener('change', () => {
|
||||||
settings.TTS.INTERNAL_TTS_VOICE = installedTTS.selectedIndex;
|
var select = document.querySelector("#primaryVoice");
|
||||||
|
settings.TTS.PRIMARY_TTS_VOICE = select.selectedIndex;
|
||||||
|
settings.TTS.PRIMARY_TTS_NAME = select.options[select.selectedIndex].text;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#primaryLanguage').addEventListener('change', () => {
|
||||||
|
var select = document.querySelector("#primaryLanguage");
|
||||||
|
settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
|
||||||
|
settings.TTS.PRIMARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#secondaryVoice').addEventListener('change', () => {
|
||||||
|
var select = document.querySelector("#secondaryVoice");
|
||||||
|
settings.TTS.SECONDARY_TTS_VOICE = select.selectedIndex;
|
||||||
|
settings.TTS.SECONDARY_TTS_NAME = select.options[select.selectedIndex].text;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#secondaryLanguage').addEventListener('change', () => {
|
||||||
|
var select = document.querySelector("#secondaryLanguage");
|
||||||
|
settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
|
||||||
|
settings.TTS.SECONDARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
|
||||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -42,6 +65,26 @@ document.body.querySelector('#TWITCH_CLIENT_SECRET').addEventListener('change',
|
||||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#PORT').addEventListener('change', () => {
|
||||||
|
settings.SERVER.PORT = document.body.querySelector('#PORT').value;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#AMAZON_ACCESS_KEY').addEventListener('change', () => {
|
||||||
|
settings.AMAZON.ACCESS_KEY = document.body.querySelector('#AMAZON_ACCESS_KEY').value;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#AMAZON_ACCESS_SECRET').addEventListener('change', () => {
|
||||||
|
settings.AMAZON.ACCESS_SECRET = document.body.querySelector('#AMAZON_ACCESS_SECRET').value;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#GOOGLE_API_KEY').addEventListener('change', () => {
|
||||||
|
settings.GOOGLE.API_KEY = document.body.querySelector('#GOOGLE_API_KEY').value;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
});
|
||||||
|
|
||||||
// document.body.querySelector('#sliderX').addEventListener('change', () => {
|
// document.body.querySelector('#sliderX').addEventListener('change', () => {
|
||||||
// // TODO: resolve volume control of TTS
|
// // TODO: resolve volume control of TTS
|
||||||
// config.SETTINGS.VOICE_VOLUME;
|
// config.SETTINGS.VOICE_VOLUME;
|
||||||
|
|
@ -67,15 +110,41 @@ function getGeneralSettings() {
|
||||||
|
|
||||||
document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0;
|
document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0;
|
||||||
theme.setTheme(USE_CUSTOM_THEME);
|
theme.setTheme(USE_CUSTOM_THEME);
|
||||||
}
|
|
||||||
|
|
||||||
function getTwitchSettings() {
|
// Twitch
|
||||||
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH === true ? 1 : 0;
|
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH;
|
||||||
document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME;
|
document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME;
|
||||||
document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME;
|
document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME;
|
||||||
document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN;
|
document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN;
|
||||||
document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID;
|
document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID;
|
||||||
document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET;
|
document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET;
|
||||||
|
|
||||||
|
// Server
|
||||||
|
document.body.querySelector('#USE_SERVER').checked = settings.SERVER.USE_SERVER;
|
||||||
|
document.body.querySelector('#PORT').value = settings.SERVER.PORT;
|
||||||
|
document.body.querySelector('#USE_VTUBER').checked = settings.SERVER.USE_VTUBER;
|
||||||
|
showMenuButton("#btnBrowsersourceVtuber", settings.SERVER.USE_VTUBER)
|
||||||
|
document.body.querySelector('#USE_CHATBUBBLE').checked = settings.SERVER.USE_CHATBUBBLE;
|
||||||
|
showMenuButton("#btnBrowsersourceChat", settings.SERVER.USE_CHATBUBBLE)
|
||||||
|
|
||||||
|
// Amazon
|
||||||
|
document.body.querySelector('#USE_AMAZON').checked = settings.AMAZON.USE_AMAZON;
|
||||||
|
document.body.querySelector('#AMAZON_ACCESS_KEY').value = settings.AMAZON.ACCESS_KEY;
|
||||||
|
document.body.querySelector('#AMAZON_ACCESS_SECRET').value = settings.AMAZON.ACCESS_SECRET;
|
||||||
|
|
||||||
|
// Google
|
||||||
|
document.body.querySelector('#USE_GOOGLE').checked = settings.GOOGLE.USE_GOOGLE;
|
||||||
|
document.body.querySelector('#GOOGLE_API_KEY').value = settings.GOOGLE.API_KEY;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function showMenuButton(menuButton, toggle) {
|
||||||
|
let option = document.body.querySelector(menuButton);
|
||||||
|
if (!toggle) {
|
||||||
|
option.style.display = "none";
|
||||||
|
} else {
|
||||||
|
option.style.display = "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const notificationToasts = document.querySelector('#toasts'); // toast messages
|
const notificationToasts = document.querySelector('#toasts'); // toast messages
|
||||||
|
|
@ -86,6 +155,19 @@ function createNotification(message = null, type = null) {
|
||||||
notification.classList.add(type);
|
notification.classList.add(type);
|
||||||
notification.innerText = message;
|
notification.innerText = message;
|
||||||
notificationToasts.appendChild(notification);
|
notificationToasts.appendChild(notification);
|
||||||
|
let notfication = undefined;
|
||||||
|
|
||||||
|
let alertSound = "info.mp3";
|
||||||
|
if (type === "error") {
|
||||||
|
alertSound = "error.mp3";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (envInfo.env) {
|
||||||
|
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${alertSound}`));
|
||||||
|
} else {
|
||||||
|
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${alertSound}`));
|
||||||
|
}
|
||||||
|
notfication.play();
|
||||||
setTimeout(() => notification.remove(), 10000);
|
setTimeout(() => notification.remove(), 10000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -130,14 +212,6 @@ document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () =>
|
||||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
});
|
});
|
||||||
|
|
||||||
function setTwitchToggle() {
|
|
||||||
const toggle = document.getElementById('USE_TWITCH').checked;
|
|
||||||
settings.TWITCH.USE_TWITCH = toggle;
|
|
||||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
|
||||||
const inputs = document.getElementsByClassName('inputTwitch');
|
|
||||||
toggleRadio(toggle, inputs);
|
|
||||||
}
|
|
||||||
|
|
||||||
// #region Top bar buttons
|
// #region Top bar buttons
|
||||||
document.body.querySelector('#min-button').addEventListener('click', () => {
|
document.body.querySelector('#min-button').addEventListener('click', () => {
|
||||||
ipcRenderer.send('minimize-window');
|
ipcRenderer.send('minimize-window');
|
||||||
|
|
@ -149,7 +223,6 @@ document.body.querySelector('#max-button').addEventListener('click', () => {
|
||||||
|
|
||||||
document.body.querySelector('#close-button').addEventListener('click', (event) => {
|
document.body.querySelector('#close-button').addEventListener('click', (event) => {
|
||||||
ipcRenderer.send('close-window');
|
ipcRenderer.send('close-window');
|
||||||
console.log(event);
|
|
||||||
});
|
});
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
|
|
@ -158,31 +231,86 @@ document.body.querySelector('#SoundTestButton').addEventListener('click', () =>
|
||||||
sound.playAudio();
|
sound.playAudio();
|
||||||
});
|
});
|
||||||
|
|
||||||
// #region Use twitch toggle logic
|
function toggleTwitch() {
|
||||||
|
const toggle = settings.TWITCH.USE_TWITCH;
|
||||||
|
const inputs = document.getElementsByClassName('inputTwitch');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
|
}
|
||||||
|
|
||||||
document.body.querySelector('#USE_TWITCH').addEventListener('click', () => {
|
document.body.querySelector('#USE_TWITCH').addEventListener('click', () => {
|
||||||
setTwitchToggle();
|
const toggle = document.getElementById('USE_TWITCH').checked;
|
||||||
|
settings.TWITCH.USE_TWITCH = toggle;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
const inputs = document.getElementsByClassName('inputTwitch');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
});
|
});
|
||||||
|
|
||||||
Array.from(ttsSelector.querySelectorAll('[name="voiceService"]')).forEach((node) => {
|
toggleTwitch();
|
||||||
node.addEventListener('change', (e) => {
|
|
||||||
const { target } = e;
|
|
||||||
|
|
||||||
if (!target) { return; }
|
function toggleGoogle() {
|
||||||
|
const toggle = settings.GOOGLE.USE_GOOGLE;
|
||||||
|
const inputs = document.getElementsByClassName('inputGoogle');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
|
}
|
||||||
|
|
||||||
settings.TTS.SELECTED_TTS = target.id;
|
document.body.querySelector('#USE_GOOGLE').addEventListener('click', () => {
|
||||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
const toggle = document.getElementById('USE_GOOGLE').checked;
|
||||||
|
settings.GOOGLE.USE_GOOGLE = toggle;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
const inputs = document.getElementsByClassName('inputGoogle');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
|
});
|
||||||
|
|
||||||
Array.from(ttsSelector.querySelectorAll('select')).forEach((x) => {
|
toggleGoogle();
|
||||||
const element = x;
|
|
||||||
if (element !== target.parentElement.previousElementSibling) {
|
function toggleAmazon() {
|
||||||
element.disabled = true;
|
const toggle = settings.AMAZON.USE_AMAZON;
|
||||||
} else { element.disabled = false; }
|
const inputs = document.getElementsByClassName('inputAmazon');
|
||||||
});
|
toggleRadio(toggle, inputs);
|
||||||
});
|
}
|
||||||
|
|
||||||
|
document.body.querySelector('#USE_AMAZON').addEventListener('click', () => {
|
||||||
|
const toggle = document.getElementById('USE_AMAZON').checked;
|
||||||
|
settings.AMAZON.USE_AMAZON = toggle;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
const inputs = document.getElementsByClassName('inputAmazon');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
|
});
|
||||||
|
|
||||||
|
toggleAmazon();
|
||||||
|
|
||||||
|
function toggleServer() {
|
||||||
|
const toggle = settings.SERVER.USE_SERVER;
|
||||||
|
const inputs = document.getElementsByClassName('inputServer');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.querySelector('#USE_SERVER').addEventListener('click', () => {
|
||||||
|
const toggle = document.getElementById('USE_SERVER').checked;
|
||||||
|
settings.SERVER.USE_SERVER = toggle;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
const inputs = document.getElementsByClassName('inputServer');
|
||||||
|
toggleRadio(toggle, inputs);
|
||||||
|
});
|
||||||
|
|
||||||
|
toggleServer();
|
||||||
|
|
||||||
|
document.body.querySelector('#USE_VTUBER').addEventListener('change', () => {
|
||||||
|
const toggle = document.getElementById('USE_VTUBER').checked;
|
||||||
|
settings.SERVER.USE_VTUBER = toggle;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
showMenuButton("#btnBrowsersourceVtuber", toggle);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('#USE_CHATBUBBLE').addEventListener('change', () => {
|
||||||
|
const toggle = document.getElementById('USE_CHATBUBBLE').checked;
|
||||||
|
settings.SERVER.USE_CHATBUBBLE = toggle;
|
||||||
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
|
showMenuButton("#btnBrowsersourceChat", toggle);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get the selected TTS
|
// Get the selected TTS
|
||||||
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.selectedTts}`);
|
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.TTS.SELECTED_TTS}`);
|
||||||
|
|
||||||
if (currentlySelectedTTS) {
|
if (currentlySelectedTTS) {
|
||||||
currentlySelectedTTS.checked = true;
|
currentlySelectedTTS.checked = true;
|
||||||
|
|
@ -235,11 +363,45 @@ if (settings.AUDIO.TTS_VOLUME) {
|
||||||
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
|
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.body.querySelector('.language-selector').addEventListener('click', () => {
|
||||||
|
var dropdown = document.body.querySelector('.language-dropdown');
|
||||||
|
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.querySelector('.language-dropdown').addEventListener('mouseleave', () => {
|
||||||
|
hideDropdown();
|
||||||
|
});
|
||||||
|
|
||||||
|
let languageSelector = document.querySelectorAll(".language-item");
|
||||||
|
languageSelector.forEach(item => {
|
||||||
|
item.addEventListener('click', (event) => {
|
||||||
|
const el = event.target;
|
||||||
|
// tip.innerText = el.getAttribute('language');
|
||||||
|
document.getElementById('selected-language').innerText = el.getAttribute('language');
|
||||||
|
document.getElementById('selected-flag').innerText = el.getAttribute('flag');
|
||||||
|
hideDropdown();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function hideDropdown() {
|
||||||
|
var dropdown = document.body.querySelector('.language-dropdown');
|
||||||
|
dropdown.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// let primaryTTSSelector = document.body.querySelector(".optgroup");
|
||||||
|
// primaryTTSSelector.forEach(item => {
|
||||||
|
// item.addEventListener('hover', (event) => {
|
||||||
|
// console.log(event);
|
||||||
|
// // const optionsElement = document.getElementById(optgroupID);
|
||||||
|
// // optionsElement.style.display = optionsElement.style.display === "none" ? "block" : "none";
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
ini,
|
ini,
|
||||||
settings,
|
settings,
|
||||||
getGeneralSettings,
|
getGeneralSettings,
|
||||||
getTwitchSettings,
|
setCustomThemeToggle
|
||||||
setCustomThemeToggle,
|
|
||||||
setTwitchToggle,
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,6 @@ const playTTS = (ttsData) => new Promise((resolve) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('Audio file deleted successfully!');
|
|
||||||
resolve('finished');
|
resolve('finished');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -61,16 +60,16 @@ function playVoice(filteredMessage, logoUrl, username, message) {
|
||||||
trueMessage = filteredMessage;
|
trueMessage = filteredMessage;
|
||||||
currentLogoUrl = logoUrl;
|
currentLogoUrl = logoUrl;
|
||||||
currentUsername = username;
|
currentUsername = username;
|
||||||
let text = '';
|
|
||||||
let textObject = { "filtered": filteredMessage, "formatted": message };
|
let textObject = { "filtered": filteredMessage, "formatted": message };
|
||||||
let voice = installedTTS.options[installedTTS.selectedIndex].text;
|
let voice;
|
||||||
const language = langdetect.detect(filteredMessage);
|
const language = langdetect.detect(filteredMessage);
|
||||||
|
|
||||||
if (language[0].lang === 'en') {
|
if (language[0].lang === config.settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()) {
|
||||||
voice = installedTTS.options[1].text;
|
voice = config.settings.TTS.SECONDARY_TTS_NAME;
|
||||||
text = `${username} said: ${filteredMessage}`
|
textObject.filtered = `${username}: ${filteredMessage}`;
|
||||||
} else {
|
} else {
|
||||||
text = `${username} dice: ${filteredMessage}`
|
voice = config.settings.TTS.PRIMARY_TTS_NAME;
|
||||||
|
textObject.filtered = `${username}: ${filteredMessage}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
talk.add(textObject, voice);
|
talk.add(textObject, voice);
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,6 @@ function setTheme(USE_CUSTOM_THEME) {
|
||||||
document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => {
|
document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => {
|
||||||
const x = document.getElementById('MAIN_COLOR_1').value;
|
const x = document.getElementById('MAIN_COLOR_1').value;
|
||||||
root.style.setProperty('--main-color1-temp', x);
|
root.style.setProperty('--main-color1-temp', x);
|
||||||
console.log("set");
|
|
||||||
});
|
});
|
||||||
|
|
||||||
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
|
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ let counter = 0;
|
||||||
const speak = (textObject) => new Promise((resolve) => {
|
const speak = (textObject) => new Promise((resolve) => {
|
||||||
// say.setEncoding(Encoding);
|
// say.setEncoding(Encoding);
|
||||||
counter += 1;
|
counter += 1;
|
||||||
console.log(textObject);
|
|
||||||
let savePath = '';
|
let savePath = '';
|
||||||
|
|
||||||
if (envInfo.env) {
|
if (envInfo.env) {
|
||||||
|
|
|
||||||
41
src/main.js
41
src/main.js
|
|
@ -31,8 +31,6 @@ async function createWindow() {
|
||||||
icon: path.join(__dirname, '/images/icon.png'),
|
icon: path.join(__dirname, '/images/icon.png'),
|
||||||
width: parseInt(settings.SETTINGS.WIDTH),
|
width: parseInt(settings.SETTINGS.WIDTH),
|
||||||
height: parseInt(settings.SETTINGS.HEIGHT),
|
height: parseInt(settings.SETTINGS.HEIGHT),
|
||||||
minHeight: 800,
|
|
||||||
minWidth: 600,
|
|
||||||
x: parseInt(settings.SETTINGS.POSITION_X),
|
x: parseInt(settings.SETTINGS.POSITION_X),
|
||||||
y: parseInt(settings.SETTINGS.POSITION_Y),
|
y: parseInt(settings.SETTINGS.POSITION_Y),
|
||||||
frame: false,
|
frame: false,
|
||||||
|
|
@ -44,12 +42,14 @@ async function createWindow() {
|
||||||
});
|
});
|
||||||
window.loadURL('https://github.com')
|
window.loadURL('https://github.com')
|
||||||
|
|
||||||
|
|
||||||
window.loadFile(path.join(__dirname, 'index.html'));
|
window.loadFile(path.join(__dirname, 'index.html'));
|
||||||
|
|
||||||
window.webContents.openDevTools();
|
if (!app.isPackaged) {
|
||||||
|
window.webContents.openDevTools();
|
||||||
|
}
|
||||||
|
|
||||||
window.on('close', e => {
|
window.on('close', e => {
|
||||||
|
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); // load newest settings in case anything changed after starting the program
|
||||||
const bounds = window.getBounds();
|
const bounds = window.getBounds();
|
||||||
|
|
||||||
settings.SETTINGS.WIDTH = bounds.width;
|
settings.SETTINGS.WIDTH = bounds.width;
|
||||||
|
|
@ -59,7 +59,6 @@ async function createWindow() {
|
||||||
|
|
||||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||||
})
|
})
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
app.whenReady().then(() => {
|
app.whenReady().then(() => {
|
||||||
|
|
@ -117,21 +116,26 @@ async function createIniFile() {
|
||||||
NOTIFICATION_ENABLED: true,
|
NOTIFICATION_ENABLED: true,
|
||||||
POSITION_X: 0,
|
POSITION_X: 0,
|
||||||
POSITION_Y: 0,
|
POSITION_Y: 0,
|
||||||
WIDTH: 600,
|
WIDTH: 1024,
|
||||||
HEIGHT: 800
|
HEIGHT: 768,
|
||||||
|
LANGUAGE: "EN"
|
||||||
},
|
},
|
||||||
TTS: {
|
TTS: {
|
||||||
SELECTED_TTS: "InternalTTS",
|
PRIMARY_TTS_VOICE: 0,
|
||||||
INTERNAL_TTS_VOICE: 0,
|
PRIMARY_TTS_NAME: "",
|
||||||
GOOGLE_VOICE: 0,
|
PRIMARY_TTS_LANGUAGE: "EN",
|
||||||
AMAZON_VOICE: 0
|
PRIMARY_TTS_LANGUAGE_INDEX: 0,
|
||||||
|
SECONDARY_TTS_VOICE: 0,
|
||||||
|
SECONDARY_TTS_NAME: "",
|
||||||
|
SECONDARY_TTS_LANGUAGE: "EN",
|
||||||
|
SECONDARY_TTS_LANGUAGE_INDEX: 0
|
||||||
},
|
},
|
||||||
AUDIO: {
|
AUDIO: {
|
||||||
NOTIFICATION_AUDIO_DEVICE: 0,
|
NOTIFICATION_AUDIO_DEVICE: 0,
|
||||||
NOTIFICATION_SOUND: 0,
|
NOTIFICATION_SOUND: 0,
|
||||||
NOTIFICATION_VOLUME: 100,
|
NOTIFICATION_VOLUME: 100,
|
||||||
SELECTED_TTS_AUDIO_DEVICE: 0,
|
SELECTED_TTS_AUDIO_DEVICE: 0,
|
||||||
TTS_AUDIO_DEVICE: "",
|
TTS_AUDIO_DEVICE: "default",
|
||||||
TTS_VOLUME: 100
|
TTS_VOLUME: 100
|
||||||
},
|
},
|
||||||
THEME: {
|
THEME: {
|
||||||
|
|
@ -147,16 +151,27 @@ async function createIniFile() {
|
||||||
CHAT_BUBBLE_MESSAGE: "\#b5b5b5",
|
CHAT_BUBBLE_MESSAGE: "\#b5b5b5",
|
||||||
},
|
},
|
||||||
TWITCH: {
|
TWITCH: {
|
||||||
USE_TWITCH: true,
|
USE_TWITCH: false,
|
||||||
CHANNEL_NAME: "khyretos",
|
CHANNEL_NAME: "khyretos",
|
||||||
USERNAME: "loquendo",
|
USERNAME: "loquendo",
|
||||||
OAUTH_TOKEN: "",
|
OAUTH_TOKEN: "",
|
||||||
CLIENT_ID: "",
|
CLIENT_ID: "",
|
||||||
CLIENT_SECRET: "",
|
CLIENT_SECRET: "",
|
||||||
},
|
},
|
||||||
|
SERVER: {
|
||||||
|
USE_SERVER: false,
|
||||||
|
PORT: "9000",
|
||||||
|
USE_VTUBER: false,
|
||||||
|
USE_CHATBUBBLE: false,
|
||||||
|
},
|
||||||
AMAZON: {
|
AMAZON: {
|
||||||
|
USE_TWITCH: false,
|
||||||
ACCESS_KEY: "",
|
ACCESS_KEY: "",
|
||||||
ACCESS_SECRET: "",
|
ACCESS_SECRET: "",
|
||||||
|
},
|
||||||
|
GOOGLE: {
|
||||||
|
USE_GOOGLE: false,
|
||||||
|
API_KEY: "",
|
||||||
}
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,6 @@ function streamText() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayTwitchMessage(logoUrl, username, messageObject) {
|
function displayTwitchMessage(logoUrl, username, messageObject) {
|
||||||
console.log(messageObject);
|
|
||||||
if (!messageObject) {
|
if (!messageObject) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ body {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='vslider'] > button.slider {
|
input[type='vslider']>button.slider {
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 275%;
|
width: 275%;
|
||||||
|
|
@ -86,11 +86,11 @@ button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#meter-microphone > button.slider {
|
#meter-microphone>button.slider {
|
||||||
background-image: url('../png/controls/meters/left.png');
|
background-image: url('../png/controls/meters/left.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
#meter-delay > button.slider {
|
#meter-delay>button.slider {
|
||||||
background-image: url('../png/controls/meters/right.png');
|
background-image: url('../png/controls/meters/right.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -259,7 +259,7 @@ button.motion {
|
||||||
}
|
}
|
||||||
|
|
||||||
.test {
|
.test {
|
||||||
width:50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -268,7 +268,7 @@ button.motion {
|
||||||
.avatar-change {
|
.avatar-change {
|
||||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
width:50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -5px;
|
left: -5px;
|
||||||
|
|
@ -277,7 +277,7 @@ button.motion {
|
||||||
.border {
|
.border {
|
||||||
background-image: url('../png/controls/buttons/top/motion/border.png');
|
background-image: url('../png/controls/buttons/top/motion/border.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
width:50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -50px;
|
top: -50px;
|
||||||
|
|
@ -298,7 +298,7 @@ button.motion {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mouth-transitionx {
|
.mouth-transitionx {
|
||||||
|
|
@ -308,12 +308,12 @@ button.motion {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#mouth-transition::before {
|
#mouth-transition::before {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -338,16 +338,16 @@ button.motion::before {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.motion::after {
|
button.motion::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: -2;
|
z-index: -1;
|
||||||
transform: translate(11%, 11%);
|
transform: translate(11%, 11%);
|
||||||
/* hit-margin: -999px; */
|
/* hit-margin: -999px; */
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
src/sounds/notifications/error.mp3
Normal file
BIN
src/sounds/notifications/error.mp3
Normal file
Binary file not shown.
BIN
src/sounds/notifications/info.mp3
Normal file
BIN
src/sounds/notifications/info.mp3
Normal file
Binary file not shown.
Loading…
Reference in a new issue