diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2cb5ca0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "npm-scripts.showStartNotification": false +} \ No newline at end of file diff --git a/forge.config.js b/forge.config.js index b0e05e1..e2850c8 100644 --- a/forge.config.js +++ b/forge.config.js @@ -3,7 +3,6 @@ module.exports = { icon: './src/images/icon.ico', asar: true, "extraResource": [ - "./src/config/settings.ini", "./src/config/loquendo.db", "./src/sounds" ] diff --git a/package.json b/package.json index 43ea291..a4fca9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "loquendo-bot", - "version": "2.0.0", + "version": "2.1.0", "description": "Bot assistant for streamers over different platforms", "main": "src/main.js", "scripts": { @@ -45,4 +45,4 @@ "@electron-forge/plugin-auto-unpack-natives": "^6.2.1", "electron": "25.4.0" } -} +} \ No newline at end of file diff --git a/src/config/languages.txt b/src/config/languages.txt new file mode 100644 index 0000000..73adeae --- /dev/null +++ b/src/config/languages.txt @@ -0,0 +1,3 @@ +EN +ES +NL \ No newline at end of file diff --git a/src/css/chat.css b/src/css/chat.css index 51eb40a..b205162 100644 --- a/src/css/chat.css +++ b/src/css/chat.css @@ -389,21 +389,22 @@ select { } .AdvancedMenuLabel { - width: 120px; font-size: 10pt; padding-right: 5px; + margin-left: 10px; + width: 125px +} + +.AdvancedMenuLabel2 { + font-size: 10pt; + padding-right: 5px; + margin-left: 10px; } #SaveAdvancedSettingsButton { margin-left: 10px; } - -/* Big toggle */ - - -/* toggle in label designing */ - .toggle { position: relative; display: inline-block; @@ -425,7 +426,6 @@ select { background-color: var(--main-color2); left: 5px; top: 5px; - transition: all 0.2s; } @@ -476,7 +476,6 @@ select { background-color: white; left: 2px; top: 2px; - transition: all 0.2s; } diff --git a/src/css/home.css b/src/css/home.css index ee17b30..cf04350 100644 --- a/src/css/home.css +++ b/src/css/home.css @@ -203,4 +203,43 @@ body { .maximized #max-button { display: none; +} + +.language-selector { + -webkit-app-region: no-drag; + position: absolute; + display: inline-block; + background-color: transparent; + cursor: pointer; + font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; +} + +.language-dropdown { + display: none; + position: absolute; + background-color: #fff; + width: 55px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 2; + font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; +} + +.language-item { + padding: 5px; + cursor: pointer; + background-color: var(--top-bar); +} + +.language-item:hover { + /* filter: brightness(150%); */ +} + +@font-face { + font-family: NotoColorEmojiLimited; + unicode-range: U+1F1E6-1F1FF; + src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf); } \ No newline at end of file diff --git a/src/css/logger.css b/src/css/logger.css index a101736..5deb96a 100644 --- a/src/css/logger.css +++ b/src/css/logger.css @@ -1,15 +1,9 @@ table { - margin-left: 25px; - margin-right: 25px; + margin-left: 10px; background-color: white; border-collapse: collapse; width: 100%; -} - -table, -h1 { - margin-left: 35px !important; - /* Adjust the margin value according to your needs */ + margin-top: 60px; } th, @@ -32,7 +26,7 @@ td { } #logTable { - width: 90%; + width: 95%; } #Logs { diff --git a/src/css/menu.css b/src/css/menu.css index 3b54f79..640884b 100644 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -35,6 +35,8 @@ display: block; width: 100%; background: var(--main-color1); + z-index: 1; + position: relative; } .menu .items { @@ -64,19 +66,18 @@ } .menu .items .item-active { - transition: 0.3s; background: -webkit-linear-gradient(left, var(--main-color2) 10%, var(--main-color2), var(--main-color1) 10%, var(--main-color1) 10%); color: var(--main-color2); - transition: all 0.15s ease-out; + filter: brightness(90%); } .menu .items .item:hover { cursor: pointer; - /* filter: brightness(150%); */ color: var(--main-color2); - transition: all 0.15s ease-in-out; + filter: brightness(120%); } + .sidepanel-left { position: relative; width: 50px; @@ -86,7 +87,6 @@ text-align: center; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; transition: .3s ease-in-out; - z-index: 1; } .sidepanel-right { @@ -100,8 +100,12 @@ transition: .3s ease-in-out; } -.collapse-menu { - width: 0px; +.collapse-menu-left { + margin-left: -50px; +} + +.collapse-menu-right { + margin-right: -200px; } .sidepanel-left span { @@ -124,11 +128,11 @@ background-color: var(--main-color3); color: var(--main-color2); justify-content: left; - top: 0px; + top: 32px; left: 50px; cursor: pointer; display: flex; - z-index: 9; + z-index: 1; transition: .3s ease-in-out; } @@ -146,11 +150,11 @@ background-color: var(--main-color3); color: var(--main-color2); justify-content: right; - top: 0px; + top: 32px; right: 199px; cursor: pointer; display: flex; - z-index: 9; + z-index: 1; transition: .3s ease-in-out; } diff --git a/src/css/tabs.css b/src/css/tabs.css index 8c47d9e..7d147fe 100644 --- a/src/css/tabs.css +++ b/src/css/tabs.css @@ -203,6 +203,11 @@ select { width: 300px; } +.language { + width: 80px; + margin-left: 10px; +} + #AdvancedMenu_mask { position: absolute; top: 0; @@ -253,91 +258,151 @@ select { padding-left: 10px; } +input[type="password"] { + background: var(--main-color3); + border: none; + height: 40px; + border-radius: 40px; + width: 300px; + outline: none; + color: var(--main-color2); + font-size: 10pt; + padding-left: 10px; + padding-right: 40px; + /* To make space for the reveal button */ +} + +input[type="lol"] { + background: var(--main-color3); + border: none; + height: 40px; + border-radius: 40px; + width: 300px; + outline: none; + color: var(--main-color2); + font-size: 10pt; + padding-left: 10px; + padding-right: 40px; + /* To make space for the reveal button */ +} + +/* Style for the reveal button */ +.password-toggle-btn { + position: absolute; + background-color: transparent; + border: none; + cursor: pointer; + left: 450px; +} + +/* Hide the default appearance of the button */ +.password-toggle-btn::-moz-focus-inner { + border: 0; +} + +/* Style the reveal icon (you can use your preferred icon or font) */ +.password-toggle-icon { + font-size: 16px; + color: #555; +} + #toasts { position: fixed; - bottom: 10px; - right: 10px; + bottom: 20px; + /* Adjust the distance from the bottom of the screen */ + right: 50%; + /* Center the toasts horizontally */ display: flex; flex-direction: column; - align-items: flex-end; - z-index: 1; - transition: all 0.3s ease-in-out; + align-items: center; + /* Center the toasts horizontally */ + z-index: 999; } .toast { - background-color: #fff; + background-color: #333; + color: white; border-radius: 5px; padding: 1rem 2rem; margin: 0.5rem; + opacity: 0; + transform: translateY(100%); + animation: toastAnimation 0.5s ease-in-out forwards, toastDisappear 0.5s ease-in-out 9s forwards; } +/* Apply different colors based on the toast type */ .toast.info { - color: rebeccapurple; + background-color: #3498db; } .toast.success { - color: green; + background-color: #2ecc71; } .toast.warning { - background-color: orange; - color: white; + background-color: #f39c12; } .toast.error { - color: red; + background-color: #e74c3c; +} + +/* CSS animation for the toast appearance */ +@keyframes toastAnimation { + from { + opacity: 0; + transform: translateY(100%); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* CSS animation for the toast disappearance */ +@keyframes toastDisappear { + from { + opacity: 1; + } + + to { + opacity: 0; + } } .menu-icon { font-size: 17pt; } -[tip] .tooltip { - position: fixed; +.tooltip { + position: absolute; + display: inline-block; + visibility: hidden; font-size: 12px; line-height: 20px; padding: 5px; background: var(--main-color3); border-radius: 5px; visibility: hidden; - opacity: 0; + opacity: 1; box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2); transition: opacity 0.3s, visibility 0s; color: var(--main-color2); - z-index: 101; font-family: 'xxii_avenmedium'; } -[tip]:hover .tooltip { - visibility: visible; - opacity: 1; -} - -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip .tooltiptext { - visibility: hidden; +/* .tooltip .tooltiptext { width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; - position: absolute; - z-index: 1; - bottom: 150%; - left: 50%; - margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; - position: absolute; - top: 100%; - left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; @@ -346,8 +411,21 @@ select { .tooltip:hover .tooltiptext { visibility: visible; -} +} */ input[type=text]:disabled { background: #dddddd; +} + +input[type2=text]:disabled { + background: #dddddd; +} + +button[type=text]:disabled { + background: #dddddd; +} + +div:disabled { + background: #dddddd; + filter: brightness(200%); } \ No newline at end of file diff --git a/src/css/tts-menu.css b/src/css/tts-menu.css index 30203f4..c204953 100644 --- a/src/css/tts-menu.css +++ b/src/css/tts-menu.css @@ -75,29 +75,12 @@ textarea { margin-top: 40px; } -.SaveButton { - text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607; - transition: all 0.15s ease-in-out; -} - -.SaveButton:hover { - /* color: var(--main-color1); */ - cursor: pointer; - /* filter: brightness(150%); */ -} - -.SaveButton:active { - color: var(--main-color1); - transform: translateY(4px); - text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000; -} - .SmallButton { color: var(--main-color2); width: 50px; cursor: pointer; text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607; - transition: all 0.15s ease-in-out; + /* transition: all 0.15s ease-in-out; */ text-align: center; } @@ -124,16 +107,24 @@ textarea { border: none; font-family: 'xxii_avenmedium'; font-size: 14pt; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + transition: box-shadow 0.3s ease, background-color 0.3s ease; + /* Add a smooth transition for box-shadow and background-color */ } .AdvancedMenuButton:hover { - /* background-color: var(--main-color1); */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + background-color: var(--main-color3); + filter: brightness(150%); + /* Darken the background color on hover */ cursor: pointer; - /* filter: brightness(150%); */ } .AdvancedMenuButton:active { - transform: translateY(4px); + transform: translateY(2px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-color: var(--main-color3); + /* Reset the background color on click */ } .AdvancedMenuIcon { diff --git a/src/css/volume-slider.css b/src/css/volume-slider.css index cb765db..e96a86f 100644 --- a/src/css/volume-slider.css +++ b/src/css/volume-slider.css @@ -54,7 +54,7 @@ outline: none; /* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */ box-shadow: 0 0 3px rgb(0 0 0 / 10%); - transition: .3s ease-in-out; + /* transition: .3s ease-in-out; */ } .slider-container .slider:active::-webkit-slider-thumb, diff --git a/src/index.html b/src/index.html index 33455cd..e452dde 100644 --- a/src/index.html +++ b/src/index.html @@ -27,7 +27,20 @@
+
+
+ 🇬🇧 + EN +
+
🇳🇱 + NL
+
🇪🇸 + ES
+
🇬🇧 + EN
+
+
@@ -66,7 +79,8 @@
    • -
  • +
  • -
    -
    - -
    +
    +
    +
    +
    @@ -95,36 +109,23 @@
    -

    Installed Voices

    +

    Primary TTS Voice

    - - + + +
    -

    Google Voices

    +

    Secondary TTS Voice

    - - -
    -

    Amazon Voices

    -
    - - + + +
    @@ -173,8 +174,6 @@
    - -

    Log Viewer

    @@ -286,344 +285,406 @@
    Oauth - Token
    + - -
    -
    -
    Client - ID
    - -
    -
    -
    Client - Secret
    - -
    - -
    - - - - - -
    -
    Port
    - - -
    -
    -
    Use - Vtuber
    - - -
    -
    -
    Use - ChatBubble
    - - -
    -
    -
    - - - - - -
    -
    - Access Key
    - - -
    -
    -
    - Access Secret
    - - -
    -
    -
    - Test credentials
    - -
    -
    -
    - - - - - -
    -
    - API Key
    - - -
    -
    -
    - Test credentials
    - - -
    -
    - - -
    -
    + class="password-toggle-btn password-toggle-btn1"> + 👁️ + + + +
    - - +
    Client + ID
    + +
    +
    +
    Client + Secret
    + + +
    +
    +
    + Test credentials
    + + +
    + +
    + + + + + +
    +
    Port
    + + +
    +
    +
    Use + Vtuber
    + + + +
    +
    +
    Use + ChatBubble
    + + + +
    +
    +
    + + + + + +
    +
    + Access Key
    + + +
    +
    +
    + Access Secret
    + + +
    +
    +
    + Test credentials
    + + +
    +
    +
    + + + + + +
    +
    + API Key
    + + +
    +
    +
    + Test credentials
    + + +
    +
    +
    + +
    +
    +
    + + +
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + + + +
    + +
    Main + Color 1
    -
    -
    -
    -
    +
    + +
    Main + Color 2
    -
    +
    + +
    Main + Color 3
    +
    +
    + +
    Main + Color 4
    +
    +
    + +
    Top + Bar
    +
    +
    + +
    Mid + Section
    +
    +
    + +
    Chat + Bubble Background
    +
    +
    + +
    Chat + Bubble Header
    +
    +
    + +
    Chat + Bubble Message
    +
    +
    -
    - - - - - -
    -
    Main - Color 1
    - -
    Main - Color 2
    - -
    Main - Color 3
    - -
    -
    -
    Main - Color 4
    - -
    Top - Bar
    - -
    Mid - Section
    - -
    -
    -
    Chat - Bubble Background
    - -
    Chat - Bubble Header
    - -
    Chat - Bubble Message
    - -
    -
    - -
    - - - -
    -
    -
    - -
    - - - - - - -
    -
    - - - -
    -
    -
    - - - -
    -
    -

    Moderators

    -
      -
    -

    Viewers

    -
      -
    -
    -
    -
      -
    • a
      • -
    • b
      • -
    • c
      • -
    -
    -
    -
      -
    • 1
      • -
    • 2
      • -
    • 3
      • -
    -
    -
    -
    -
    - -
    + +
    +
    + +
    + + + + + +
    - -
    - - - - + - \ No newline at end of file +
    + + + +
    +
    +
    + + + +
    +
    +

    Moderators

    +
      +
    +

    Viewers

    +
      +
    +
    +
    +
      +
    • a
      • +
    • b
      • +
    • c
      • +
    +
    +
    +
      +
    • 1
      • +
    • 2
      • +
    • 3
      • +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + + + + \ No newline at end of file diff --git a/src/js/chat.js b/src/js/chat.js index a5b8fe3..c96dd05 100644 --- a/src/js/chat.js +++ b/src/js/chat.js @@ -51,10 +51,10 @@ document.body.querySelector('#SendButton').addEventListener('click', () => { document.body.querySelector('.circle-left').addEventListener('click', () => { const menu = document.body.querySelector('.sidepanel-left'); - if (menu.classList.contains('collapse-menu')) { - menu.classList.remove('collapse-menu'); + if (menu.classList.contains('collapse-menu-left')) { + menu.classList.remove('collapse-menu-left'); } else { - menu.classList.add('collapse-menu'); + menu.classList.add('collapse-menu-left'); } const leftCircle = document.body.querySelector('.circle-left'); @@ -70,10 +70,10 @@ document.body.querySelector('.circle-left').addEventListener('click', () => { document.body.querySelector('.circle-right').addEventListener('click', () => { const menu = document.body.querySelector('.sidepanel-right'); - if (menu.classList.contains('collapse-menu')) { - menu.classList.remove('collapse-menu'); + if (menu.classList.contains('collapse-menu-right')) { + menu.classList.remove('collapse-menu-right'); } else { - menu.classList.add('collapse-menu'); + menu.classList.add('collapse-menu-right'); } const leftCircle = document.body.querySelector('.circle-right'); @@ -175,6 +175,5 @@ document.body.querySelector('#HideThemeCreator').addEventListener('click', () => // #region Test/Save TTS document.body.querySelector('#TTSTestButton').addEventListener('click', () => { const text = document.getElementById('TTSTest').value; - console.log(text); - sound.playVoice(text, '', '', text); + sound.playVoice(text, '', 'User', text); }); diff --git a/src/js/google.js b/src/js/google.js new file mode 100644 index 0000000..e69de29 diff --git a/src/js/renderer.js b/src/js/renderer.js index b79b329..71a510d 100644 --- a/src/js/renderer.js +++ b/src/js/renderer.js @@ -7,7 +7,6 @@ const request = require('request'); const langdetect = require('langdetect'); const io = require('socket.io-client'); -const socket = io('http://localhost:9000'); // Connect to your Socket.IO server const fs = require('fs'); const util = require('util'); @@ -27,21 +26,21 @@ const googleVoices = fs.readFileSync(path.join(__dirname, './config/googleVoices // TODO: remove amazon voices txt and use api instead (sakura project has it) const amazonVoices = fs.readFileSync(path.join(__dirname, './config/amazonVoices.txt')).toString().split('\r\n'); +const languagesObject = fs.readFileSync(path.join(__dirname, './config/languages.txt')).toString().split('\r\n'); + // html elements const root = document.documentElement; const ttsSelector = document.body.querySelector('#TTSSelector'); -const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox const amazonVoiceSelect = document.querySelector('#amazonVoice'); // obtain the html reference of the amazon voices comboBox -const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox -const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox const notificationAudioDevices = document.querySelector('#notificationAudioDevice'); // obtain the html reference of the installedTTS comboBox const devicesDropdown = document.querySelector('#devicesDropdown'); const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox +const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox + // laod local javascript files const chat = require(path.join(__dirname, './js/chat')); -const Polly = require(path.join(__dirname, './js/amazon')); const messageTemplates = require(path.join(__dirname, './js/messageTemplates')); const logger = require(path.join(__dirname, './js/logger')); const sound = require(path.join(__dirname, './js/sound')); @@ -55,15 +54,25 @@ if (envInfo.env) { notificationSounds = path.join(__dirname, './sounds/notifications'); } -const server = require(path.join(__dirname, './js/server')); +const twitch = config.settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : ''; + +let server; +let socket; + +if (config.settings.SERVER.USE_SERVER) { + server = require(path.join(__dirname, './js/server')); + socket = io(`http://localhost:${config.settings.SERVER.PORT}`); // Connect to your Socket.IO server +} + +const Polly = config.settings.AMAZON.USE_AMAZON ? require(path.join(__dirname, './js/amazon')) : ''; +const google = config.settings.GOOGLE.USE_GOOGLE ? require(path.join(__dirname, './js/amazon')) : ''; + const theme = require(path.join(__dirname, './js/theme')); -const twitch = require(path.join(__dirname, './js/twitch')); // initialize values config.getGeneralSettings(); -config.getTwitchSettings(); config.setCustomThemeToggle(); -config.setTwitchToggle(); + let selectedVoiceIndex; let selectedEncodingIndex; @@ -115,68 +124,149 @@ async function getAudioDevices() { }); ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE; - // devicesDropdown.selectedIndex = 0; - - // Create an audio context - // audioContext = new (window.AudioContext || window.webkitAudioContext)(); } getAudioDevices(); -say.getInstalledVoices((err, voices) => { - voices.forEach((voice, i) => { +function setLanguagesinSelect(languageSelector, setting) { + let languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox + + const languages = Object.keys(languagesObject); + languages.forEach((language) => { const option = document.createElement('option'); - option.value = i; - option.innerHTML = voice; + option.value = language; + option.innerHTML = languagesObject[language]; - installedTTS.appendChild(option); + languageSelect.appendChild(option); + }); + + languageSelect.selectedIndex = setting; +} + +setLanguagesinSelect("#primaryLanguage", config.settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX); +setLanguagesinSelect("#secondaryLanguage", config.settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX); + +function getInstalledVoices(callback) { + say.getInstalledVoices((err, voices) => { + + function setVoicesinSelect(voiceSelector) { + let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox + + const internalTTSHeader = document.createElement('optgroup'); + internalTTSHeader.label = "Internal TTS"; + voiceSelect.appendChild(internalTTSHeader); + + // const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox + voices.forEach((voice, i) => { + const option = document.createElement('option'); + + option.value = i; + option.innerHTML = voice; + + // installedTTS.appendChild(option); + internalTTSHeader.appendChild(option); + }); + } + setVoicesinSelect("#primaryVoice"); + setVoicesinSelect("#secondaryVoice"); + + callback(); + }); +} + +function getAmazonVoices(callback) { + if (!config.settings.AMAZON.USE_AMAZON) { + callback(); + return; + } + + function setVoicesinSelect(voiceSelector) { + let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox + + const internalTTSHeader = document.createElement('optgroup'); + internalTTSHeader.label = "Amazon TTS"; + voiceSelect.appendChild(internalTTSHeader); + + const voices = Object.keys(amazonVoices); + voices.forEach((voice) => { + const option = document.createElement('option'); + + option.value = voice; + option.innerHTML = amazonVoices[voice]; + + internalTTSHeader.appendChild(option); + }); + } + + setVoicesinSelect("#primaryVoice"); + setVoicesinSelect("#secondaryVoice"); + + callback(); +} + +function getGoogleVoices(callback) { + if (!config.settings.GOOGLE.USE_GOOGLE) { + callback(); + return; + } + + function setVoicesinSelect(voiceSelector) { + let voiceSelect = document.querySelector(voiceSelector); // obtain the html reference of the google voices comboBox + + const internalTTSHeader = document.createElement('optgroup'); + internalTTSHeader.label = "Google TTS"; + voiceSelect.appendChild(internalTTSHeader); + + const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox + const voices = Object.keys(googleVoices); + voices.forEach((voice) => { + const option = document.createElement('option'); + option.classList.add("option"); + + option.value = voice; + option.innerHTML = googleVoices[voice]; + + internalTTSHeader.appendChild(option); + }); + } + setVoicesinSelect("#primaryVoice"); + setVoicesinSelect("#secondaryVoice"); + + callback(); +} + +getGoogleVoices(function () { + getAmazonVoices(function () { + getInstalledVoices(function () { + let primaryVoice = document.querySelector("#primaryVoice"); + primaryVoice.selectedIndex = config.settings.TTS.PRIMARY_TTS_VOICE; + + let secondaryVoice = document.querySelector("#secondaryVoice"); + secondaryVoice.selectedIndex = config.settings.TTS.SECONDARY_TTS_VOICE; + }); }); - installedTTS.selectedIndex = config.settings.TTS.INTERNAL_TTS_VOICE; }); -async function getGoogleVoices() { - const voices = Object.keys(googleVoices); - await voices.forEach((voice) => { - const option = document.createElement('option'); - - option.value = voice; - option.innerHTML = googleVoices[voice]; - - googleVoiceSelect.appendChild(option); - }); - googleVoiceSelect.selectedIndex = config.settings.TTS.GOOGLE_VOICE; -} - -getGoogleVoices(); - -async function getAmazonVoices() { - const voices = Object.keys(amazonVoices); - await voices.forEach((voice) => { - const option = document.createElement('option'); - - option.value = voice; - option.innerHTML = amazonVoices[voice]; - - amazonVoiceSelect.appendChild(option); - }); - amazonVoiceSelect.selectedIndex = config.settings.TTS.AMAZON_VOICE; -} - -getAmazonVoices(); - // Small tooltip Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => { const tip = document.createElement('div'); + const body = document.querySelector('.container'); const element = el; tip.classList.add('tooltip'); + tip.classList.add('tooltiptext'); tip.innerText = el.getAttribute('tip'); tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px' })`; - element.appendChild(tip); + body.appendChild(tip); element.onmousemove = (e) => { - tip.style.left = `${e.pageX}px`; - tip.style.top = `${e.pageY}px`; + tip.style.left = `${e.x}px`; + tip.style.top = `${e.y}px`; + tip.style.zIndex = 1; + tip.style.visibility = "visible"; + }; + element.onmouseleave = (e) => { + tip.style.visibility = "hidden"; }; }); @@ -207,6 +297,25 @@ function showPreviewChatMessage() { showPreviewChatMessage(); +function hideText(button, field) { + document.body.querySelector(button).addEventListener('click', () => { + const passwordInput = document.querySelector(field); + if (passwordInput.type === 'password') { + passwordInput.type = 'lol'; + } else { + passwordInput.type = 'password'; + } + }); + +} + +hideText('.password-toggle-btn1', "#TWITCH_OAUTH_TOKEN"); +hideText('.password-toggle-btn2', "#TWITCH_CLIENT_ID"); +hideText('.password-toggle-btn3', "#TWITCH_CLIENT_SECRET"); +hideText('.password-toggle-btn4', "#AMAZON_ACCESS_KEY"); +hideText('.password-toggle-btn5', "#AMAZON_ACCESS_SECRET"); +hideText('.password-toggle-btn6', "#GOOGLE_API_KEY"); + // Amazon TTS // const polly = new Polly(amazonCredentials); // const options = { @@ -222,4 +331,4 @@ showPreviewChatMessage(); // } // audioStream.pipe(fileStream); // return 1; -// }); +// }); \ No newline at end of file diff --git a/src/js/server.js b/src/js/server.js index 4fe74f4..7abd032 100644 --- a/src/js/server.js +++ b/src/js/server.js @@ -5,10 +5,39 @@ const path = require('path'); const http = require('http').createServer(app); const io = require('socket.io')(http); -const PORT = 9000; +if (!config.settings.SERVER.USE_SERVER) { + return; +} -app.use('/chat', express.static(path.join(__dirname, '../modules/chat'))); -app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/'))); +const PORT = config.settings.SERVER.PORT; + +http.listen(PORT, () => { + if (config.settings.SERVER.USE_VTUBER) { + app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/'))); + + let vtuber = document.body.querySelector('#BrowsersourceVtuber'); + let vtuberframe = document.createElement('iframe'); + vtuberframe.class = "frame"; + vtuberframe.src = `http://localhost:${PORT}/vtuber`; + vtuberframe.style.width = "100%"; + vtuberframe.style.height = "100%"; + vtuberframe.frameBorder = 0; + vtuber.appendChild(vtuberframe); + } + + if (config.settings.SERVER.USE_CHATBUBBLE) { + app.use('/chat', express.static(path.join(__dirname, '../modules/chat'))); + + let chat = document.body.querySelector('#BrowsersourceChat'); + let chatframe = document.createElement('iframe'); + chatframe.class = "frame"; + chatframe.src = `http://localhost:${PORT}/chat`; + chatframe.style.width = "100%"; + chatframe.style.height = "100%"; + chatframe.frameBorder = 0; + chat.appendChild(chatframe); + } +}); // Handle socket connections io.on('connection', (socket) => { @@ -23,23 +52,3 @@ io.on('connection', (socket) => { socket.on('disconnect', () => { }); }); - -http.listen(PORT, () => { - let vtuber = document.body.querySelector('#BrowsersourceVtuber'); - let vtuberframe = document.createElement('iframe'); - vtuberframe.class = "frame"; - vtuberframe.src = "http://localhost:9000/vtuber"; - vtuberframe.style.width = "100%"; - vtuberframe.style.height = "100%"; - vtuberframe.frameBorder = 0; - vtuber.appendChild(vtuberframe); - - let chat = document.body.querySelector('#BrowsersourceChat'); - let chatframe = document.createElement('iframe'); - chatframe.class = "frame"; - chatframe.src = "http://localhost:9000/chat"; - chatframe.style.width = "100%"; - chatframe.style.height = "100%"; - chatframe.frameBorder = 0; - chat.appendChild(chatframe); -}); diff --git a/src/js/settings.js b/src/js/settings.js index 2a72b6e..2ea5873 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -6,8 +6,31 @@ if (envInfo.env) { settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); } -document.body.querySelector('#installedTTS').addEventListener('change', () => { - settings.TTS.INTERNAL_TTS_VOICE = installedTTS.selectedIndex; +document.body.querySelector('#primaryVoice').addEventListener('change', () => { + var select = document.querySelector("#primaryVoice"); + settings.TTS.PRIMARY_TTS_VOICE = select.selectedIndex; + settings.TTS.PRIMARY_TTS_NAME = select.options[select.selectedIndex].text; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + +document.body.querySelector('#primaryLanguage').addEventListener('change', () => { + var select = document.querySelector("#primaryLanguage"); + settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX = select.selectedIndex; + settings.TTS.PRIMARY_TTS_LANGUAGE = select.options[select.selectedIndex].text; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + +document.body.querySelector('#secondaryVoice').addEventListener('change', () => { + var select = document.querySelector("#secondaryVoice"); + settings.TTS.SECONDARY_TTS_VOICE = select.selectedIndex; + settings.TTS.SECONDARY_TTS_NAME = select.options[select.selectedIndex].text; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + +document.body.querySelector('#secondaryLanguage').addEventListener('change', () => { + var select = document.querySelector("#secondaryLanguage"); + settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX = select.selectedIndex; + settings.TTS.SECONDARY_TTS_LANGUAGE = select.options[select.selectedIndex].text; fs.writeFileSync(resourcesPath, ini.stringify(settings)); }); @@ -42,6 +65,26 @@ document.body.querySelector('#TWITCH_CLIENT_SECRET').addEventListener('change', fs.writeFileSync(resourcesPath, ini.stringify(settings)); }); +document.body.querySelector('#PORT').addEventListener('change', () => { + settings.SERVER.PORT = document.body.querySelector('#PORT').value; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + +document.body.querySelector('#AMAZON_ACCESS_KEY').addEventListener('change', () => { + settings.AMAZON.ACCESS_KEY = document.body.querySelector('#AMAZON_ACCESS_KEY').value; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + +document.body.querySelector('#AMAZON_ACCESS_SECRET').addEventListener('change', () => { + settings.AMAZON.ACCESS_SECRET = document.body.querySelector('#AMAZON_ACCESS_SECRET').value; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + +document.body.querySelector('#GOOGLE_API_KEY').addEventListener('change', () => { + settings.GOOGLE.API_KEY = document.body.querySelector('#GOOGLE_API_KEY').value; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); +}); + // document.body.querySelector('#sliderX').addEventListener('change', () => { // // TODO: resolve volume control of TTS // config.SETTINGS.VOICE_VOLUME; @@ -67,15 +110,41 @@ function getGeneralSettings() { document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0; theme.setTheme(USE_CUSTOM_THEME); -} -function getTwitchSettings() { - document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH === true ? 1 : 0; + // Twitch + document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH; document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME; document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME; document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN; document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID; document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET; + + // Server + document.body.querySelector('#USE_SERVER').checked = settings.SERVER.USE_SERVER; + document.body.querySelector('#PORT').value = settings.SERVER.PORT; + document.body.querySelector('#USE_VTUBER').checked = settings.SERVER.USE_VTUBER; + showMenuButton("#btnBrowsersourceVtuber", settings.SERVER.USE_VTUBER) + document.body.querySelector('#USE_CHATBUBBLE').checked = settings.SERVER.USE_CHATBUBBLE; + showMenuButton("#btnBrowsersourceChat", settings.SERVER.USE_CHATBUBBLE) + + // Amazon + document.body.querySelector('#USE_AMAZON').checked = settings.AMAZON.USE_AMAZON; + document.body.querySelector('#AMAZON_ACCESS_KEY').value = settings.AMAZON.ACCESS_KEY; + document.body.querySelector('#AMAZON_ACCESS_SECRET').value = settings.AMAZON.ACCESS_SECRET; + + // Google + document.body.querySelector('#USE_GOOGLE').checked = settings.GOOGLE.USE_GOOGLE; + document.body.querySelector('#GOOGLE_API_KEY').value = settings.GOOGLE.API_KEY; + +} + +function showMenuButton(menuButton, toggle) { + let option = document.body.querySelector(menuButton); + if (!toggle) { + option.style.display = "none"; + } else { + option.style.display = ""; + } } const notificationToasts = document.querySelector('#toasts'); // toast messages @@ -86,6 +155,19 @@ function createNotification(message = null, type = null) { notification.classList.add(type); notification.innerText = message; notificationToasts.appendChild(notification); + let notfication = undefined; + + let alertSound = "info.mp3"; + if (type === "error") { + alertSound = "error.mp3"; + } + + if (envInfo.env) { + notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${alertSound}`)); + } else { + notfication = new Audio(path.join(__dirname, `../sounds/notifications/${alertSound}`)); + } + notfication.play(); setTimeout(() => notification.remove(), 10000); } @@ -130,14 +212,6 @@ document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () => fs.writeFileSync(resourcesPath, ini.stringify(settings)); }); -function setTwitchToggle() { - const toggle = document.getElementById('USE_TWITCH').checked; - settings.TWITCH.USE_TWITCH = toggle; - fs.writeFileSync(resourcesPath, ini.stringify(settings)); - const inputs = document.getElementsByClassName('inputTwitch'); - toggleRadio(toggle, inputs); -} - // #region Top bar buttons document.body.querySelector('#min-button').addEventListener('click', () => { ipcRenderer.send('minimize-window'); @@ -149,7 +223,6 @@ document.body.querySelector('#max-button').addEventListener('click', () => { document.body.querySelector('#close-button').addEventListener('click', (event) => { ipcRenderer.send('close-window'); - console.log(event); }); // #endregion @@ -158,31 +231,86 @@ document.body.querySelector('#SoundTestButton').addEventListener('click', () => sound.playAudio(); }); -// #region Use twitch toggle logic +function toggleTwitch() { + const toggle = settings.TWITCH.USE_TWITCH; + const inputs = document.getElementsByClassName('inputTwitch'); + toggleRadio(toggle, inputs); +} + document.body.querySelector('#USE_TWITCH').addEventListener('click', () => { - setTwitchToggle(); + const toggle = document.getElementById('USE_TWITCH').checked; + settings.TWITCH.USE_TWITCH = toggle; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); + const inputs = document.getElementsByClassName('inputTwitch'); + toggleRadio(toggle, inputs); }); -Array.from(ttsSelector.querySelectorAll('[name="voiceService"]')).forEach((node) => { - node.addEventListener('change', (e) => { - const { target } = e; +toggleTwitch(); - if (!target) { return; } +function toggleGoogle() { + const toggle = settings.GOOGLE.USE_GOOGLE; + const inputs = document.getElementsByClassName('inputGoogle'); + toggleRadio(toggle, inputs); +} - settings.TTS.SELECTED_TTS = target.id; - fs.writeFileSync(resourcesPath, ini.stringify(settings)); +document.body.querySelector('#USE_GOOGLE').addEventListener('click', () => { + const toggle = document.getElementById('USE_GOOGLE').checked; + settings.GOOGLE.USE_GOOGLE = toggle; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); + const inputs = document.getElementsByClassName('inputGoogle'); + toggleRadio(toggle, inputs); +}); - Array.from(ttsSelector.querySelectorAll('select')).forEach((x) => { - const element = x; - if (element !== target.parentElement.previousElementSibling) { - element.disabled = true; - } else { element.disabled = false; } - }); - }); +toggleGoogle(); + +function toggleAmazon() { + const toggle = settings.AMAZON.USE_AMAZON; + const inputs = document.getElementsByClassName('inputAmazon'); + toggleRadio(toggle, inputs); +} + +document.body.querySelector('#USE_AMAZON').addEventListener('click', () => { + const toggle = document.getElementById('USE_AMAZON').checked; + settings.AMAZON.USE_AMAZON = toggle; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); + const inputs = document.getElementsByClassName('inputAmazon'); + toggleRadio(toggle, inputs); +}); + +toggleAmazon(); + +function toggleServer() { + const toggle = settings.SERVER.USE_SERVER; + const inputs = document.getElementsByClassName('inputServer'); + toggleRadio(toggle, inputs); +} + +document.body.querySelector('#USE_SERVER').addEventListener('click', () => { + const toggle = document.getElementById('USE_SERVER').checked; + settings.SERVER.USE_SERVER = toggle; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); + const inputs = document.getElementsByClassName('inputServer'); + toggleRadio(toggle, inputs); +}); + +toggleServer(); + +document.body.querySelector('#USE_VTUBER').addEventListener('change', () => { + const toggle = document.getElementById('USE_VTUBER').checked; + settings.SERVER.USE_VTUBER = toggle; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); + showMenuButton("#btnBrowsersourceVtuber", toggle); +}); + +document.body.querySelector('#USE_CHATBUBBLE').addEventListener('change', () => { + const toggle = document.getElementById('USE_CHATBUBBLE').checked; + settings.SERVER.USE_CHATBUBBLE = toggle; + fs.writeFileSync(resourcesPath, ini.stringify(settings)); + showMenuButton("#btnBrowsersourceChat", toggle); }); // Get the selected TTS -const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.selectedTts}`); +const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.TTS.SELECTED_TTS}`); if (currentlySelectedTTS) { currentlySelectedTTS.checked = true; @@ -235,11 +363,45 @@ if (settings.AUDIO.TTS_VOLUME) { document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 })); } +document.body.querySelector('.language-selector').addEventListener('click', () => { + var dropdown = document.body.querySelector('.language-dropdown'); + dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block'; +}); + +document.body.querySelector('.language-dropdown').addEventListener('mouseleave', () => { + hideDropdown(); +}); + +let languageSelector = document.querySelectorAll(".language-item"); +languageSelector.forEach(item => { + item.addEventListener('click', (event) => { + const el = event.target; + // tip.innerText = el.getAttribute('language'); + document.getElementById('selected-language').innerText = el.getAttribute('language'); + document.getElementById('selected-flag').innerText = el.getAttribute('flag'); + hideDropdown(); + }); +}); + +function hideDropdown() { + var dropdown = document.body.querySelector('.language-dropdown'); + dropdown.style.display = 'none'; +} + + +// let primaryTTSSelector = document.body.querySelector(".optgroup"); +// primaryTTSSelector.forEach(item => { +// item.addEventListener('hover', (event) => { +// console.log(event); +// // const optionsElement = document.getElementById(optgroupID); +// // optionsElement.style.display = optionsElement.style.display === "none" ? "block" : "none"; +// }); +// }); + + module.exports = { ini, settings, getGeneralSettings, - getTwitchSettings, - setCustomThemeToggle, - setTwitchToggle, + setCustomThemeToggle }; diff --git a/src/js/sound.js b/src/js/sound.js index 7f4c4e3..bf4ecc2 100644 --- a/src/js/sound.js +++ b/src/js/sound.js @@ -13,7 +13,6 @@ const playTTS = (ttsData) => new Promise((resolve) => { console.error(err); return; } - console.log('Audio file deleted successfully!'); resolve('finished'); }); }); @@ -61,16 +60,16 @@ function playVoice(filteredMessage, logoUrl, username, message) { trueMessage = filteredMessage; currentLogoUrl = logoUrl; currentUsername = username; - let text = ''; let textObject = { "filtered": filteredMessage, "formatted": message }; - let voice = installedTTS.options[installedTTS.selectedIndex].text; + let voice; const language = langdetect.detect(filteredMessage); - if (language[0].lang === 'en') { - voice = installedTTS.options[1].text; - text = `${username} said: ${filteredMessage}` + if (language[0].lang === config.settings.TTS.SECONDARY_TTS_LANGUAGE.toLowerCase()) { + voice = config.settings.TTS.SECONDARY_TTS_NAME; + textObject.filtered = `${username}: ${filteredMessage}`; } else { - text = `${username} dice: ${filteredMessage}` + voice = config.settings.TTS.PRIMARY_TTS_NAME; + textObject.filtered = `${username}: ${filteredMessage}`; } talk.add(textObject, voice); diff --git a/src/js/theme.js b/src/js/theme.js index 09ac4e9..77e7601 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -78,7 +78,6 @@ function setTheme(USE_CUSTOM_THEME) { document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => { const x = document.getElementById('MAIN_COLOR_1').value; root.style.setProperty('--main-color1-temp', x); - console.log("set"); }); document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => { diff --git a/src/js/voiceQueue.js b/src/js/voiceQueue.js index cf899d7..c276b24 100644 --- a/src/js/voiceQueue.js +++ b/src/js/voiceQueue.js @@ -5,7 +5,6 @@ let counter = 0; const speak = (textObject) => new Promise((resolve) => { // say.setEncoding(Encoding); counter += 1; - console.log(textObject); let savePath = ''; if (envInfo.env) { diff --git a/src/main.js b/src/main.js index 6383d14..68d132b 100644 --- a/src/main.js +++ b/src/main.js @@ -31,8 +31,6 @@ async function createWindow() { icon: path.join(__dirname, '/images/icon.png'), width: parseInt(settings.SETTINGS.WIDTH), height: parseInt(settings.SETTINGS.HEIGHT), - minHeight: 800, - minWidth: 600, x: parseInt(settings.SETTINGS.POSITION_X), y: parseInt(settings.SETTINGS.POSITION_Y), frame: false, @@ -44,12 +42,14 @@ async function createWindow() { }); window.loadURL('https://github.com') - window.loadFile(path.join(__dirname, 'index.html')); - window.webContents.openDevTools(); + if (!app.isPackaged) { + window.webContents.openDevTools(); + } window.on('close', e => { + settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); // load newest settings in case anything changed after starting the program const bounds = window.getBounds(); settings.SETTINGS.WIDTH = bounds.width; @@ -59,7 +59,6 @@ async function createWindow() { fs.writeFileSync(resourcesPath, ini.stringify(settings)); }) - }; app.whenReady().then(() => { @@ -117,21 +116,26 @@ async function createIniFile() { NOTIFICATION_ENABLED: true, POSITION_X: 0, POSITION_Y: 0, - WIDTH: 600, - HEIGHT: 800 + WIDTH: 1024, + HEIGHT: 768, + LANGUAGE: "EN" }, TTS: { - SELECTED_TTS: "InternalTTS", - INTERNAL_TTS_VOICE: 0, - GOOGLE_VOICE: 0, - AMAZON_VOICE: 0 + PRIMARY_TTS_VOICE: 0, + PRIMARY_TTS_NAME: "", + PRIMARY_TTS_LANGUAGE: "EN", + PRIMARY_TTS_LANGUAGE_INDEX: 0, + SECONDARY_TTS_VOICE: 0, + SECONDARY_TTS_NAME: "", + SECONDARY_TTS_LANGUAGE: "EN", + SECONDARY_TTS_LANGUAGE_INDEX: 0 }, AUDIO: { NOTIFICATION_AUDIO_DEVICE: 0, NOTIFICATION_SOUND: 0, NOTIFICATION_VOLUME: 100, SELECTED_TTS_AUDIO_DEVICE: 0, - TTS_AUDIO_DEVICE: "", + TTS_AUDIO_DEVICE: "default", TTS_VOLUME: 100 }, THEME: { @@ -147,16 +151,27 @@ async function createIniFile() { CHAT_BUBBLE_MESSAGE: "\#b5b5b5", }, TWITCH: { - USE_TWITCH: true, + USE_TWITCH: false, CHANNEL_NAME: "khyretos", USERNAME: "loquendo", OAUTH_TOKEN: "", CLIENT_ID: "", CLIENT_SECRET: "", }, + SERVER: { + USE_SERVER: false, + PORT: "9000", + USE_VTUBER: false, + USE_CHATBUBBLE: false, + }, AMAZON: { + USE_TWITCH: false, ACCESS_KEY: "", ACCESS_SECRET: "", + }, + GOOGLE: { + USE_GOOGLE: false, + API_KEY: "", } }).then(() => { settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8')); diff --git a/src/modules/chat/main.js b/src/modules/chat/main.js index 008ca20..1f501b8 100644 --- a/src/modules/chat/main.js +++ b/src/modules/chat/main.js @@ -63,7 +63,6 @@ function streamText() { } function displayTwitchMessage(logoUrl, username, messageObject) { - console.log(messageObject); if (!messageObject) { return; } diff --git a/src/modules/vtuber/css/main.css b/src/modules/vtuber/css/main.css index 87bc7d2..daf7def 100644 --- a/src/modules/vtuber/css/main.css +++ b/src/modules/vtuber/css/main.css @@ -68,7 +68,7 @@ body { background-repeat: no-repeat; } -input[type='vslider'] > button.slider { +input[type='vslider']>button.slider { background-size: 100% auto; border-radius: 0; width: 275%; @@ -86,11 +86,11 @@ button { background-color: transparent; } -#meter-microphone > button.slider { +#meter-microphone>button.slider { background-image: url('../png/controls/meters/left.png'); } -#meter-delay > button.slider { +#meter-delay>button.slider { background-image: url('../png/controls/meters/right.png'); } @@ -259,7 +259,7 @@ button.motion { } .test { - width:50px; + width: 50px; height: 50px; background-size: cover; overflow: hidden; @@ -268,7 +268,7 @@ button.motion { .avatar-change { background-image: url('../png/controls/buttons/top/avatar-change/border/default.png'); background-size: cover; - width:50px; + width: 50px; height: 50px; position: relative; left: -5px; @@ -277,7 +277,7 @@ button.motion { .border { background-image: url('../png/controls/buttons/top/motion/border.png'); background-size: cover; - width:50px; + width: 50px; height: 50px; position: relative; top: -50px; @@ -298,7 +298,7 @@ button.motion { height: 50px; width: 50px; background-position: 50% 50%; - background-color: yellow; + background-color: yellow; } .mouth-transitionx { @@ -308,12 +308,12 @@ button.motion { height: 50px; width: 50px; background-position: 50% 50%; - background-color: red; + background-color: red; } #mouth-transition::before { - background-color: red; + background-color: red; background-image: url('../png/controls/buttons/top/avatar-change/border/default.png'); } @@ -338,16 +338,16 @@ button.motion::before { height: 50px; width: 50px; pointer-events: none; - background-color: yellow; + background-color: yellow; } button.motion::after { position: absolute; width: 80%; height: 80%; - background-color: red; + background-color: red; overflow: hidden; - z-index: -2; + z-index: -1; transform: translate(11%, 11%); /* hit-margin: -999px; */ } @@ -383,4 +383,4 @@ button.motion::after { menu.popup { /* box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.692); */ -} +} \ No newline at end of file diff --git a/src/sounds/notifications/error.mp3 b/src/sounds/notifications/error.mp3 new file mode 100644 index 0000000..17d56a8 Binary files /dev/null and b/src/sounds/notifications/error.mp3 differ diff --git a/src/sounds/notifications/info.mp3 b/src/sounds/notifications/info.mp3 new file mode 100644 index 0000000..5e3fdab Binary files /dev/null and b/src/sounds/notifications/info.mp3 differ
    Level