various updates.

2023-12-28 16:25:52 +01:00 · 2023-12-28 16:25:52 +01:00 · 525cb6116e
commit 525cb6116e
parent 914cf831c4
45 changed files with 5022 additions and 5277 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,5 @@
+node_modules
+docs
+dist
+out
+build
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    node: true
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2021
+  },
+  extends: ['eslint:recommended', '@electron-internal', '@electron-toolkit'],
+  rules: {
+    'space-before-function-paren': 'off',
+    vendorPrefix: 'off'
+  }
+};
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@ -0,0 +1,5 @@
+singleQuote: true
+semi: true
+printWidth: 140
+trailingComma: none
+arrowParens: avoid
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "dependencies": {
        "axios": "^1.4.0",
        "electron-squirrel-startup": "^1.0.0",
+        "emoji-picker-element": "^1.21.0",
        "express": "^4.18.2",
        "ini": "^2.0.0",
        "kill-process-by-name": "^1.0.5",
@ -38,6 +39,12 @@
        "@electron-forge/maker-squirrel": "^6.2.1",
        "@electron-forge/maker-zip": "^6.2.1",
        "@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
-        "electron": "^25.9.8"
+        "@electron-internal/eslint-config": "^1.0.1",
+        "@electron-toolkit/eslint-config": "^1.0.2",
+        "electron": "^25.9.8",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.2",
+        "prettier": "^3.1.1"
    }
 }
--- a/src/backend/loquendoBot_backend.py
+++ b/src/backend/loquendoBot_backend.py
@ -1,7 +1,15 @@
+# from wsgiref.simple_server import WSGIServer
 from flask import Flask, Response, jsonify, request
 import gevent
+
+import re
 import gevent.monkey
 import json
+from waitress import serve
+import logging
+
+logger = logging.getLogger("waitress")
+logger.setLevel(logging.INFO)

 gevent.monkey.patch_all()
 import gevent.queue
@ -40,6 +48,7 @@ q = queue.Queue()

 # gobal functions

+
 # classes
 class LanguageDetection:
    def __init__(self):
@ -56,9 +65,7 @@ class LanguageDetection:
                resources_folder, "language_detection_model", f"lid.176.bin"
            )

-        language_detection_model = (
-            rf"{language_detection_model}"
-        )
+        language_detection_model = rf"{language_detection_model}"
        self.model = fasttext.load_model(language_detection_model)

    def predict_lang(self, text):
@ -69,6 +76,7 @@ class LanguageDetection:

        return language_codes

+
 class STT:
    samplerate = None
    args = ""
@ -92,9 +100,7 @@ class STT:
                resources_folder, "speech_to_text_models", settings["STT"]["LANGUAGE"]
            )

-        self.model = Model(
-            rf"{vosk_model}"
-        )
+        self.model = Model(rf"{vosk_model}")
        self.dump_fn = None

        self.q = gevent.queue.Queue()
@ -180,6 +186,7 @@ text_to_speech_service = TTS()

 # endpoints

+
@app.route("/stream", methods=["GET"])
 def stream_recognition():
    def generate():
@ -239,9 +246,14 @@ def trigger_backend_event():
    try:
        request_data = request.json
        message = request_data.get("message", "")
+        filteredMessage = re.sub(
+            r"https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)",
+            "a link",
+            message,
+        )
        voice = request_data.get("voice")
        count = request_data.get("count")
-        text_to_speech_service.say(message, voice, count)
+        text_to_speech_service.say(filteredMessage, voice, count)
    except Exception as e:
        return jsonify({"error": "An error occurred"}), 500
    return jsonify({"message": "Audio triggered"}), 200
@ -257,14 +269,14 @@ def get_voices():


 if __name__ == "__main__":
-    LANGUAGE = LanguageDetection()
-    lang = LANGUAGE.predict_lang("hola cómo estás")
-    print(lang)
-    text = "Keep it up. You are awesome"
-    translated = MyMemoryTranslator(
-        source="english", target="spanish latin america"
-    ).translate(text)
-    print(translated)
+    # LANGUAGE = LanguageDetection()
+    # lang = LANGUAGE.predict_lang("hola cómo estás")
+    # print(lang)
+    # text = "Keep it up. You are awesome"
+    # translated = MyMemoryTranslator(
+    #     source="english", target="spanish latin america"
+    # ).translate(text)
+    # print(translated)
    if len(sys.argv) > 1:
        settings.read(settingsPath)
        port = int(settings["GENERAL"]["PORT"])
@ -273,5 +285,4 @@ if __name__ == "__main__":
        port = 9000
        stream_recognition()

-    app.run(host="127.0.0.1", port=port)
-    app.terminate()
+    serve(app, host="0.0.0.0", port=port)
--- a/src/css/chat.css
+++ b/src/css/chat.css
@ -1,5 +1,6 @@
@font-face {
  font-family: 'FRAMDCN';
+  src: url(../fonts/FRAMCDN/FRAMDCN.woff);
 }

 h1 {
@ -161,11 +162,15 @@ h1 {
 }

 .chat-input input[good] + button {
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 0 2px rgba(0, 0, 0, 0.12),
+    0 2px 4px rgba(0, 0, 0, 0.24);
 }

 .chat-input input[good] + button:hover {
-    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow:
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* filter: brightness(150%); */
 }

@ -202,7 +207,9 @@ h1 {
  min-width: 100px;
  border-radius: 5px;
  padding: 18px 5px 5px 5px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 0 2px rgba(0, 0, 0, 0.12),
+    0 2px 4px rgba(0, 0, 0, 0.24);
  width: fit-content;
  position: relative;
  align-self: start;
@ -497,3 +504,12 @@ h1 {
 .checkbox:checked + .toggle-small {
  background-color: var(--main-color1);
 }
+
+.emoji-picker {
+  margin-left: auto;
+  visibility: hidden;
+  bottom: 50px;
+  left: 0px;
+  position: absolute;
+  z-index: 1;
+}
--- a/src/css/checkbox.css
+++ b/src/css/checkbox.css
@ -1,9 +1,9 @@
-input[type="radio"]:checked {
+input[type='radio']:checked {
  visibility: hidden;
  position: absolute;
 }

-input[type="radio"] {
+input[type='radio'] {
  visibility: hidden;
  position: absolute;
 }
@ -12,30 +12,30 @@ label.btn span {
  font-size: 1.5em;
 }

-label input[type="radio"]~i.fa.fa-square {
+label input[type='radio'] ~ i.fa.fa-square {
  color: var(--main-color3);
  display: inline;
 }

-label input[type="radio"]~i.fa.fa-check-square {
+label input[type='radio'] ~ i.fa.fa-check-square {
  display: none;
 }

-label input[type="radio"]:checked~i.fa.fa-square {
+label input[type='radio']:checked ~ i.fa.fa-square {
  display: none;
 }

-label input[type="radio"]:checked~i.fa.fa-check-square {
+label input[type='radio']:checked ~ i.fa.fa-check-square {
  display: inline;
  color: var(--main-color2);
 }

-label:hover input[type="radio"]~i.fa {
+label:hover input[type='radio'] ~ i.fa {
  color: var(--main-color1);
  /* filter: brightness(150%); */
 }

-div[data-toggle="buttons"] label {
+div[data-toggle='buttons'] label {
  display: inline-block;
  padding: 3px 12px;
  margin-bottom: 0;
@ -55,8 +55,8 @@ div[data-toggle="buttons"] label {
  user-select: none;
 }

-div[data-toggle="buttons"] label:active,
-div[data-toggle="buttons"] label.active {
+div[data-toggle='buttons'] label:active,
+div[data-toggle='buttons'] label.active {
  -webkit-box-shadow: none;
  box-shadow: none;
 }
--- a/src/css/home.css
+++ b/src/css/home.css
@ -219,8 +219,18 @@ body {
  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';
+  font-family:
+    'NotoColorEmojiLimited',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol';
  left: 50%;
  transform: translateX(-50%);
 }
@ -232,8 +242,18 @@ body {
  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';
+  font-family:
+    'NotoColorEmojiLimited',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol';
 }

 .language-item {
@ -242,9 +262,9 @@ body {
  background-color: var(--top-bar);
 }

-.language-item:hover {
-    /* filter: brightness(150%); */
-}
+/* .language-item:hover {
+  filter: brightness(150%);
+} */

@font-face {
  font-family: NotoColorEmojiLimited;
--- a/src/css/menu.css
+++ b/src/css/menu.css
@ -85,7 +85,9 @@
  line-height: 1.5em;
  font-family: Helvetica;
  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: 0.3s ease-in-out;
 }

@ -96,7 +98,9 @@
  line-height: 1.5em;
  font-family: Helvetica;
  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: 0.3s ease-in-out;
 }

--- a/src/css/sliders.css
+++ b/src/css/sliders.css
@ -53,19 +53,27 @@ input[type='range'].styled-slider::-webkit-slider-runnable-track {
 }

 input[type='range'].styled-slider.slider-progress1::-webkit-slider-runnable-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #1a1a1a;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #1a1a1a;
 }

 input[type='range'].styled-slider.slider-progress2::-webkit-slider-runnable-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #1a1a1a;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #1a1a1a;
 }

 input[type='range'].styled-slider.slider-progress3::-webkit-slider-runnable-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #1a1a1a;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #1a1a1a;
 }

 input[type='range'].styled-slider.slider-progress4::-webkit-slider-runnable-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #1a1a1a;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #1a1a1a;
 }

 /*mozilla*/
@ -87,19 +95,27 @@ input[type='range'].styled-slider::-moz-range-track {
 }

 input[type='range'].styled-slider.slider-progress1::-moz-range-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #464646;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #464646;
 }

 input[type='range'].styled-slider.slider-progress2::-moz-range-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #464646;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #464646;
 }

 input[type='range'].styled-slider.slider-progress3::-moz-range-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #464646;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #464646;
 }

 input[type='range'].styled-slider.slider-progress4::-moz-range-track {
-    background: linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat, #464646;
+  background:
+    linear-gradient(var(--main-color1), var(--main-color1)) 0 / var(--sx) 100% no-repeat,
+    #464646;
 }

 /*ms*/
--- a/src/css/tabs.css
+++ b/src/css/tabs.css
@ -152,8 +152,8 @@ input:checked + label {
  bottom: 0px;
 }

-.tabx-bar .tabx::after {
-}
+/* .tabx-bar .tabx::after {
+} */

 .tabx-bar .tabx:hover {
  padding-bottom: 10px;
@ -325,7 +325,9 @@ input[type='lol'] {
  margin: 0.5rem;
  opacity: 0;
  transform: translateY(100%);
-    animation: toastAnimation 0.5s ease-in-out forwards, toastDisappear 0.5s ease-in-out 9s forwards;
+  animation:
+    toastAnimation 0.5s ease-in-out forwards,
+    toastDisappear 0.5s ease-in-out 9s forwards;
 }

 /* Apply different colors based on the toast type */
@ -385,7 +387,9 @@ input[type='lol'] {
  visibility: hidden;
  opacity: 1;
  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);
  font-family: 'xxii_avenmedium';
  z-index: 999;
--- a/src/css/tts-menu.css
+++ b/src/css/tts-menu.css
@ -74,7 +74,10 @@ textarea {
  color: var(--main-color2);
  width: 50px;
  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; */
  text-align: center;
 }
@ -89,7 +92,10 @@ textarea {
 .SmallButton:active {
  color: var(--main-color1);
  transform: translateY(4px);
-    text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
+  text-shadow:
+    0 0 5px #000,
+    0 0 5px #000,
+    0 0 5px #000;
 }

 .AdvancedMenuButton {
@ -103,7 +109,9 @@ textarea {
  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;
+  transition:
+    box-shadow 0.3s ease,
+    background-color 0.3s ease;
  /* Add a smooth transition for box-shadow and background-color */
 }

--- a/src/index.html
+++ b/src/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
@ -25,6 +25,7 @@
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./css/logger.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
    <!--#endregion -->
  </head>

@ -132,9 +133,9 @@
                    <img class="AdvancedMenuIcon" src="./images/settings.png" alt=" " />
                    <div class="AdvancedMenuLabel3">General settings</div>
                  </legend>
-                                    <div class="AdvancedMenuRow inputServer">
+                  <div class="AdvancedMenuRow">
                    <div class="AdvancedMenuLabel">Port</div>
-                                        <input type="text" class="fname inputServer" id="PORT" />
+                    <input type="text" class="fname" id="PORT" />
                    <i
                      class="fa fa-question-circle fa-2x SmallButton option-icon-container"
                      id="Info_PORT"
@ -142,14 +143,40 @@
                    ></i>
                  </div>
                  <div class="AdvancedMenuRow">
+                    <div class="AdvancedMenuLabel">Zoom level %</div>
+                    <input type="text" class="fname" id="ZOOMLEVEL" />
+                    <i
+                      class="fa fa-question-circle fa-2x SmallButton option-icon-container"
+                      id="Info_ZOOMLEVEL"
+                      tip="Port to use to host additional services"
+                    ></i>
+                  </div>
+                </fieldset>
+
+                <fieldset id="TTSMenu" class="AdvancedMenu">
+                  <legend class="legendStyle" tip="Enable/Disable TTS">
+                    <img class="AdvancedMenuIcon" src="./images/tts.png" alt=" " />
+                    <input type="checkbox" id="USE_TTS" class="checkbox" />
+                    <label for="USE_TTS" class="toggle-small"></label>
+                    <div class="AdvancedMenuLabel3">Enable TTS</div>
+                  </legend>
+                  <div class="AdvancedMenuRow inputTTS">
                    <div class="AdvancedMenuLabel">Default TTS Service</div>
                    <select class="menu-select" name="primaryTTSService" id="primaryTTSService"></select>
                  </div>
-                                    <div class="AdvancedMenuRow">
+                  <div class="AdvancedMenuRow languageDetectionInput">
+                    <div class="AdvancedMenuLabel">Default TTS language</div>
+                    <select class="menu-select" name="defaultLanguage" id="defaultLanguage" tip="Language Service to use"></select>
+                  </div>
+                  <div class="AdvancedMenuRow languageDetectionInput">
                    <div class="AdvancedMenuLabel">2<sup>nd</sup> TTS Service</div>
                    <select class="menu-select" name="secondaryTTSService" id="secondaryTTSService"></select>
                  </div>
-                                    <div class="AdvancedMenuRow">
+                  <div class="AdvancedMenuRow languageDetectionInput">
+                    <div class="AdvancedMenuLabel">2<sup>nd</sup> TTS language</div>
+                    <select class="menu-select" name="secondaryLanguage" id="secondaryLanguage" tip="Language Service to use"></select>
+                  </div>
+                  <div class="AdvancedMenuRow inputTTS">
                    <div class="AdvancedMenuLabel">TTS Output Device</div>
                    <select class="menu-select" name="ttsAudioDevice" id="ttsAudioDevice"></select>
                    <i
@ -158,7 +185,7 @@
                      tip="Outputting to specific device will NOT work with voicemeter"
                    ></i>
                  </div>
-                                    <div class="AdvancedMenuRow">
+                  <div class="AdvancedMenuRow inputTTS">
                    <div class="AdvancedMenuLabel">TTS Volume</div>
                    <div class="slider-container">
                      <input id="ttsVolumeSlider" class="styled-slider slider-progress1" type="range" />
@ -168,6 +195,30 @@
                      <input type="text" id="ttsVolume" class="inputBox" />
                    </div>
                  </div>
+                  <div class="AdvancedMenuRow inputTTS">
+                    <div class="AdvancedMenuLabel">Default Internal Voice</div>
+                    <select class="menu-select" name="primaryVoice" id="primaryVoice"></select>
+                  </div>
+                  <div class="AdvancedMenuRow inputTTS">
+                    <div class="AdvancedMenuLabel">Test default Internal Voice</div>
+                    <textarea id="testPrimaryTTS">Hi, This is a test</textarea>
+                    <div class="option-icon-container" tip="Test internal TTS">
+                      <i class="fa fa-play-circle fa-2x SmallButton option-icon-container" id="TestDefaultTTSButton"></i>
+                      <label class="testLabel Basiclabel"></label>
+                    </div>
+                  </div>
+                  <div class="AdvancedMenuRow inputTTS">
+                    <div class="AdvancedMenuLabel">2<sup>nd</sup> Internal Voice</div>
+                    <select class="menu-select" name="secondaryVoice" id="secondaryVoice"></select>
+                  </div>
+                  <div class="AdvancedMenuRow inputTTS">
+                    <div class="AdvancedMenuLabel">Test 2<sup>nd</sup> Internal Voice</div>
+                    <textarea id="testSecondaryTTS">Hi, This is a test</textarea>
+                    <div class="option-icon-container" tip="Test internal TTS">
+                      <i class="fa fa-play-circle fa-2x SmallButton option-icon-container" id="TestSecondaryTTSButton"></i>
+                      <label class="testLabel Basiclabel"></label>
+                    </div>
+                  </div>
                </fieldset>

                <fieldset id="STTMenu" class="AdvancedMenu">
@ -195,83 +246,20 @@
                    <div class="AdvancedMenuLabel3">Enable Language detection</div>
                  </legend>
                  <div class="AdvancedMenuRow languageDetectionInput">
-                                        <div class="AdvancedMenuLabel">Language detection service</div>
-                                        <select
-                                            class="menu-select"
-                                            name="language"
-                                            id="languageService"
-                                            tip="Language Service to use"
-                                        ></select>
+                    <div class="AdvancedMenuLabel">Translate chat messages to</div>
+                    <select class="menu-select" name="language" id="translateChatMessageLanguage" tip="Language Service to use"></select>
                  </div>
                  <div class="AdvancedMenuRow languageDetectionInput">
-                                        <div class="AdvancedMenuLabel">Translate incoming chat messages to</div>
+                    <div class="AdvancedMenuLabel">Broadcast translation</div>
                    <label for="USE_CHAT_LANGUAGE_DETECTION" class="toggle-small"></label>
                    <input type="checkbox" id="USE_CHAT_LANGUAGE_DETECTION" class="checkbox" />
-                                        <select
-                                            class="menu-select"
-                                            name="language"
-                                            id="translateChatMessageLanguage"
-                                            tip="Language Service to use"
-                                        ></select>
                  </div>
                  <div class="AdvancedMenuRow languageDetectionInput">
-                                        <div class="AdvancedMenuLabel">Default TTS language</div>
-                                        <select
-                                            class="menu-select"
-                                            name="defaultLanguage"
-                                            id="defaultLanguage"
-                                            tip="Language Service to use"
-                                        ></select>
-                                    </div>
-                                    <div class="AdvancedMenuRow languageDetectionInput">
-                                        <div class="AdvancedMenuLabel">2<sup>nd</sup> TTS language</div>
-                                        <select
-                                            class="menu-select"
-                                            name="secondaryLanguage"
-                                            id="secondaryLanguage"
-                                            tip="Language Service to use"
-                                        ></select>
+                    <div class="AdvancedMenuLabel">Output to TTS service</div>
+                    <select class="menu-select" name="language" id="translateChatMessageLanguage" tip="Language Service to use"></select>
                  </div>
                </fieldset>

-                                <fieldset id="TTSMenu" class="AdvancedMenu">
-                                    <legend class="legendStyle" tip="Enable/Disable TTS">
-                                        <img class="AdvancedMenuIcon" src="./images/tts.png" alt=" " />
-                                        <input type="checkbox" id="USE_TTS" class="checkbox" />
-                                        <label for="USE_TTS" class="toggle-small "></label>
-                                        <div class="AdvancedMenuLabel3">Enable internal TTS</div>
-                                    </legend>
-                                    <div class="AdvancedMenuRow inputTTS">
-                                        <div class="AdvancedMenuLabel">Default Internal Voice</div>
-                                        <select class="menu-select" name="primaryVoice" id="primaryVoice"></select>
-                                    </div>
-                                    <div class="AdvancedMenuRow inputTTS">
-                                        <div class="AdvancedMenuLabel">Test default Internal Voice</div>
-                                        <textarea id="testPrimaryTTS">Hi, This is a test</textarea>
-                                        <div class="option-icon-container" tip="Test internal TTS">
-                                            <i
-                                                class="fa fa-play-circle fa-2x SmallButton option-icon-container"
-                                                id="TestDefaultTTSButton"
-                                            ></i>
-                                            <label class="testLabel Basiclabel"></label>
-                                        </div>
-                                    </div>
-                                    <div class="AdvancedMenuRow inputTTS">
-                                        <div class="AdvancedMenuLabel">2<sup>nd</sup> Internal Voice</div>
-                                        <select class="menu-select" name="secondaryVoice" id="secondaryVoice"></select>
-                                    </div>
-                                    <div class="AdvancedMenuRow inputTTS">
-                                        <div class="AdvancedMenuLabel">Test 2<sup>nd</sup> Internal Voice</div>
-                                        <textarea id="testSecondaryTTS">Hi, This is a test</textarea>
-                                        <div class="option-icon-container" tip="Test internal TTS">
-                                            <i
-                                                class="fa fa-play-circle fa-2x SmallButton option-icon-container"
-                                                id="TestSecondaryTTSButton"
-                                            ></i>
-                                            <label class="testLabel Basiclabel"></label>
-                                        </div>
-                                    </div>
-                                </fieldset>
                <fieldset id="NotificationMenu" class="AdvancedMenu">
                  <legend class="legendStyle" tip="Enable/Disable notification sounds">
                    <img class="AdvancedMenuIcon" src="./images/sound.png" alt=" " />
@ -279,6 +267,16 @@
                    <label for="USE_NOTIFICATION_SOUNDS" class="toggle-small"></label>
                    <div class="AdvancedMenuLabel3">Enable notification sounds</div>
                  </legend>
+                  <div class="AdvancedMenuRow inputTTS">
+                    <div class="AdvancedMenuLabel">Notification sounds Output Device</div>
+                    <select class="menu-select" name="notificationSoundAudioDevice" id="notificationSoundAudioDevice"></select>
+                    <i
+                      class="fa fa-question-circle fa-2x SmallButton option-icon-container"
+                      id="Info_OUTPUT_NOTIFIACTION_SOUNDS"
+                      tip="Outputting to specific device will NOT work with voicemeter"
+                    ></i>
+                  </div>
+
                  <div class="AdvancedMenuRow inputNotificationSound">
                    <div class="AdvancedMenuLabel">Notification Volume</div>
                    <div class="slider-container">
@ -293,11 +291,7 @@
                    <div class="AdvancedMenuLabel">Notification Sound</div>
                    <select class="menu-select" name="notification" id="notification"></select>
                    <div class="option-icon-container">
-                                            <i
-                                                class="fa fa-play-circle fa-2x SmallButton option-icon-container"
-                                                id="SoundTestButton"
-                                                tip="Test Sound"
-                                            ></i>
+                      <i class="fa fa-play-circle fa-2x SmallButton option-icon-container" id="SoundTestButton" tip="Test Sound"></i>
                      <label class="testLabel Basiclabel"></label>
                    </div>
                  </div>
@ -331,11 +325,7 @@
                    <button class="password-toggle-btn password-toggle-btn1">
                      <span class="password-toggle-icon"><i class="fa-regular fa-eye-slash"></i></span>
                    </button>
-                                        <i
-                                            class="fa fa-question-circle fa-2x SmallButton option-icon-container"
-                                            id="Info_USERNAME"
-                                            tip="Get OAuth Token"
-                                        ></i>
+                    <i class="fa fa-question-circle fa-2x SmallButton option-icon-container" id="Info_USERNAME" tip="Get OAuth Token"></i>
                  </div>
                  <div class="AdvancedMenuRow inputTwitch">
                    <div class="AdvancedMenuLabel">Test credentials</div>
@ -355,6 +345,17 @@
                    <label for="USE_MODULES" class="toggle-small"></label>
                    <div class="AdvancedMenuLabel3">Enable Modules</div>
                  </legend>
+                  <div class="AdvancedMenuRow inputServer">
+                    <div class="AdvancedMenuLabel">Use PNGtuber</div>
+                    <input type="checkbox" id="USE_PNGTUBER" class="checkbox" />
+                    <label for="USE_PNGTUBER" class="toggle-small"></label>
+                    <input type="url" type2="text" class="fname inputServer" id="PNGTUBER_URL" />
+                    <i
+                      class="fa fa-question-circle fa-2x SmallButton option-icon-container"
+                      id="Info_PNGTUBER"
+                      tip="You can use it as a browsersource on http://localhost:PORT/pngtuber"
+                    ></i>
+                  </div>
                  <div class="AdvancedMenuRow inputServer">
                    <div class="AdvancedMenuLabel">Use Vtuber</div>
                    <input type="checkbox" id="USE_VTUBER" class="checkbox" />
@ -377,6 +378,17 @@
                      tip="You can use it as a browsersource on http://localhost:PORT/chat"
                    ></i>
                  </div>
+                  <div class="AdvancedMenuRow inputServer">
+                    <div class="AdvancedMenuLabel">Use Finger</div>
+                    <input type="checkbox" id="USE_CHATBUBBLE" class="checkbox" />
+                    <label for="USE_CHATBUBBLE" class="toggle-small"></label>
+                    <input type="url" type2="text" class="fname inputServer" id="CHATBUBBLE_URL" />
+                    <i
+                      class="fa fa-question-circle fa-2x SmallButton option-icon-container"
+                      id="Info_CHATBUBBLE"
+                      tip="You can use it as a browsersource on http://localhost:PORT/chat"
+                    ></i>
+                  </div>
                </fieldset>

                <fieldset id="AdvancedMenuAmazon" class="AdvancedMenu">
@ -530,6 +542,12 @@
          <div id="chatBox" class="message-window"></div>
          <!-- User input box-->
          <div id="userInput" class="chat-input">
+            <div id="emoji-picker" class="emoji-picker">
+              <emoji-picker class="dark"></emoji-picker>
+            </div>
+            <button class="SmallButton" id="emojis">
+              <i class="fa-regular fa-grin fa-2x" aria-hidden="true"></i>
+            </button>
            <!-- User text input-->
            <input id="textInput" class="input-box" type="text" name="msg" placeholder="Tap 'Enter' to send a message" />

--- a/src/js/amazon.js
+++ b/src/js/amazon.js
@ -1,3 +1,5 @@
+/* global settings, callback, addVoiceService, amazonVoices, */
+
 const https = require('https');
 const querystring = require('querystring');
 const aws4 = require('aws4');
@ -10,12 +12,12 @@ function getAmazonVoices() {

  addVoiceService('Amazon');

-    let primaryVoice = document.querySelector('#primaryAmazonVoice');
-    let secondaryVoice = document.querySelector('#secondaryAmazonVoice');
+  const primaryVoice = document.querySelector('#primaryAmazonVoice');
+  const secondaryVoice = document.querySelector('#secondaryAmazonVoice');

  function setVoicesinSelect(voiceSelect) {
    const voices = Object.values(amazonVoices);
-        voices.forEach((voice) => {
+    voices.forEach(voice => {
      const option = document.createElement('option');
      option.classList.add('option');

@ -36,8 +38,6 @@ if (settings.AMAZON.USE_AMAZON) {
 }

 class PollyTTS {
-    constructor() {}
-
  textToSpeech(options, callback) {
    if (!options) {
      return callback(new Error('Options are missing'));
@ -49,27 +49,27 @@ class PollyTTS {
      VoiceId: options.voiceId || 'Mia',
      SampleRate: options.sampleRate || 22050,
      OutputFormat: options.outputFormat || 'mp3',
-            Engine: options.engine || 'neural',
+      Engine: options.engine || 'neural'
    };

    const opts = {
      service: 'polly',
      region: options.region || 'us-east-1',
      path: `/v1/speech?${querystring.stringify(qs)}`,
-            signQuery: true,
+      signQuery: true
    };

    // you can also pass AWS credentials in explicitly (otherwise taken from process.env)
    aws4.sign(opts, this.credentials);
    https
-            .get(opts, (res) => {
+      .get(opts, res => {
        if (res.statusCode !== 200) {
          return callback(new Error(`Request Failed. Status Code: ${res.statusCode}`));
        }
        callback(null, res);
        return true;
      })
-            .on('error', (e) => {
+      .on('error', e => {
        callback(e);
      });

@ -79,20 +79,20 @@ class PollyTTS {
  describeVoices(callback, credentials) {
    this.credentials = credentials;
    const qs = {
-            Engine: 'neural',
+      Engine: 'neural'
    };

    const opts = {
      service: 'polly',
      region: 'us-east-1',
      path: `/v1/voices?${querystring.stringify(qs)}`,
-            signQuery: true,
+      signQuery: true
    };

    // you can also pass AWS credentials in explicitly (otherwise taken from process.env)
    aws4.sign(opts, this.credentials);
    https
-            .get(opts, (res) => {
+      .get(opts, res => {
        if (res.statusCode !== 200) {
          return callback(new Error(`Request Failed. Status Code: ${res.statusCode}`));
        }
@ -107,7 +107,7 @@ class PollyTTS {

        return undefined;
      })
-            .on('error', (e) => {
+      .on('error', e => {
        callback(e);
      });

--- a/src/js/auth.js
+++ b/src/js/auth.js
@ -1,18 +1,20 @@
+/* global settings, fs, settingsPath, ini, shell, options, axios */
+
 const twitchAuthentication = () =>
-    new Promise((resolve) => {
+  new Promise(resolve => {
    const http = require('http');
    const redirectUri = 'http://localhost:1989/auth';
    const scopes = ['chat:edit', 'chat:read'];

    const express = require('express');
-        let tempAuthServer = express();
+    const tempAuthServer = express();
    const port = 1989;

    const { parse: parseQueryString } = require('querystring');

    tempAuthServer.use(function (req, res, next) {
      if (req.url !== '/auth') {
-                let token = parseQueryString(req.query.auth);
+        const token = parseQueryString(req.query.auth);
        settings.TWITCH.OAUTH_TOKEN = token['#access_token'];
        fs.writeFileSync(settingsPath, ini.stringify(settings));

@ -22,9 +24,9 @@ const twitchAuthentication = () =>
      next();
    });

-        function stopServer() {
-            tempAuthServer.close();
-        }
+    // function stopServer() {
+    //     tempAuthServer.close();
+    // }

    const htmlString = `
    <!DOCTYPE html>
@ -62,7 +64,7 @@ const twitchAuthentication = () =>

    server.listen(port, () => {
      const authURL = `https://id.twitch.tv/oauth2/authorize?client_id=${settings.TWITCH.CLIENT_ID}&redirect_uri=${encodeURIComponent(
-                redirectUri,
+        redirectUri
      )}&response_type=token&scope=${scopes.join(' ')}`;
      shell.openExternal(authURL);
    });
@ -76,28 +78,140 @@ function getTwitchUserId() {
  // Get user Logo with access token
  options = {
    method: 'GET',
-        url: `https://api.twitch.tv/helix/users`,
-        headers: { 'Client-ID': settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}` },
+    url: 'https://api.twitch.tv/helix/users',
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
  };

  axios
    .request(options)
-        .then((responseLogoUrl) => {
+    .then(responseLogoUrl => {
      console.log(responseLogoUrl.data.data[0]);
      settings.TWITCH.USERNAME = responseLogoUrl.data.data[0].display_name;
      settings.TWITCH.USER_LOGO_URL = responseLogoUrl.data.data[0].profile_image_url;
      settings.TWITCH.USER_ID = responseLogoUrl.data.data[0].id;
      fs.writeFileSync(settingsPath, ini.stringify(settings));
    })
-        .catch((error) => {
+    .catch(error => {
      console.error(error);
    });
 }
-function getTwitchOauthToken() {
-    return twitchAuthentication().then((res) => {
-        getTwitchUserId();
-        return res;
+
+function getTwitchSubscriptions(channelId) {
+  // Get user Logo with access token
+  options = {
+    method: 'GET',
+    url: `https://api.twitch.tv/helix/chat/emotes?broadcaster_id=${channelId}`,
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
+  };
+
+  axios
+    .request(options)
+    .then(responseLogoUrl => {
+      console.log(responseLogoUrl);
+    })
+    .catch(error => {
+      console.error(error);
    });
 }

+function getTwitchChannelEmotes(channelId) {
+  // Get user Logo with access token
+  options = {
+    method: 'GET',
+    url: `https://api.twitch.tv/helix/chat/emotes?broadcaster_id=${channelId}`,
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
+  };
+
+  axios
+    .request(options)
+    .then(responseLogoUrl => {
+      console.log(responseLogoUrl);
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
+function getTwitchChannelFollows(channelId) {
+  // Get user Logo with access token
+  options = {
+    method: 'GET',
+    url: 'https://api.twitch.tv/helix/streams/followed',
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
+  };
+
+  axios
+    .request(options)
+    .then(responseLogoUrl => {
+      console.log(responseLogoUrl);
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
+function getTwitchChannelSubscriptions(channelId) {
+  // Get user Logo with access token
+  options = {
+    method: 'GET',
+    url: `https://api.twitch.tv/helix/chat/emotes?broadcaster_id=${channelId}`,
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
+  };
+
+  axios
+    .request(options)
+    .then(responseLogoUrl => {
+      console.log(responseLogoUrl);
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
+function getTwitchChannelId() {
+  // Get user Logo with access token
+  options = {
+    method: 'GET',
+    url: 'https://api.twitch.tv/helix/users?login=MelvyCoral',
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
+  };
+
+  axios
+    .request(options)
+    .then(responseLogoUrl => {
+      // console.log(responseLogoUrl);
+      getTwitchChannelEmotes(responseLogoUrl.data.data[0].id);
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
+function getTwitchOauthToken() {
+  // getTwitchChannelId();
+  getTwitchGLobalEmotes();
+  // return twitchAuthentication().then(res => {
+  //   getTwitchUserId();
+  //   return res;
+  // });
+}
+
 module.exports = { getTwitchOauthToken };
--- a/src/js/backend.js
+++ b/src/js/backend.js
@ -1,5 +1,7 @@
+/* global settings, addVoiceService, internalVoices, ttsRequestCount, main, path, pythonPath, settingsPath, ipcRenderer */
+
 const spawn = require('child_process').spawn;
-var kill = require('kill-process-by-name');
+const kill = require('kill-process-by-name');
 let python;

 async function getInstalledVoices() {
@ -21,12 +23,12 @@ async function getInstalledVoices() {
    console.error('Error sending termination signal:', error);
  }

-    let primaryVoice = document.querySelector('#primaryVoice');
-    let secondaryVoice = document.querySelector('#secondaryVoice');
+  const primaryVoice = document.querySelector('#primaryVoice');
+  const secondaryVoice = document.querySelector('#secondaryVoice');

  function setVoicesinSelect(voiceSelect) {
    const voices = Object.values(internalVoices.voices);
-        voices.forEach((voice) => {
+    voices.forEach(voice => {
      const option = document.createElement('option');
      option.classList.add('option');

@ -43,6 +45,7 @@ async function getInstalledVoices() {
 }

 async function getBackendServerStatus() {
+  console.log('getting status');
  try {
    const response = await fetch(`http://127.0.0.1:${settings.GENERAL.PORT}/status`, { method: 'GET' });
    if (response.ok) {
@ -59,12 +62,12 @@ async function getBackendServerStatus() {
 function startSTT() {
  const eventSource = new EventSource('http://127.0.0.1:9000/stream');

-    eventSource.addEventListener('message', (event) => {
+  eventSource.addEventListener('message', event => {
    const result = event.data;
    console.log(result); // Log the received data
  });

-    eventSource.addEventListener('error', (event) => {
+  eventSource.addEventListener('error', event => {
    console.error('EventSource failed:', event);

    eventSource.close();
@ -81,9 +84,9 @@ async function getInternalTTSAudio(requestData) {
  const requestOptions = {
    method: 'POST', // HTTP method
    headers: {
-            'Content-Type': 'application/json', // Specify the content type
+      'Content-Type': 'application/json' // Specify the content type
    },
-        body: JSON.stringify(requestData), // Convert the data to JSON and include it in the request body
+    body: JSON.stringify(requestData) // Convert the data to JSON and include it in the request body
  };

  try {
@ -101,32 +104,40 @@ async function getInternalTTSAudio(requestData) {
 }

 const createBackendServer = () =>
-    new Promise((resolve) => {
+  new Promise(resolve => {
    if (main.isPackaged) {
      python = spawn(path.join(pythonPath, './loquendoBot_backend.exe'), [settingsPath, 'prod']);
    } else {
      python = spawn('python', ['-u', path.join(pythonPath, './loquendoBot_backend.py'), settingsPath, 'dev']);
    }
    // Capture the stdout of the Python process
-        python.stdout.on('data', (data) => {
+    python.stdout.on('data', data => {
      console.info(`${data}`);
+      if (data.toString().startsWith('kees')) {
+        console.log('yess');
+        // getBackendServerStatus();
+      }
    });

    // Capture the stderr of the Python process
-        python.stderr.on('data', (data) => {
+    python.stderr.on('data', data => {
+      // console.error(`${data}`);
+      if (data.toString().startsWith('INFO:waitress:Serving on')) {
+        resolve('finished');
+      } else {
        console.error(`${data}`);
-            resolve('finished'); // cannot get it to resolve with stdout
+      }
    });

    // Listen for the Python process to exit
-        python.on('close', (code) => {
+    python.on('close', code => {
      console.log(`Python process exited with code ${code}`);
    });

    if (typeof python.pid !== 'number') {
      console.log('failed');
    } else {
-            console.log(`Spawned subprocess correctly!, PID = ${python.pid}`);
+      // console.log(`Spawned subprocess correctly!, PID = ${python.pid}`);
    }
  });

--- a/src/js/chat.js
+++ b/src/js/chat.js
@ -1,4 +1,6 @@
-function getResponse() {
+/* global messageTemplates, emojiPicker, settings, getPostTime, showChatMessage, twitch */
+
+async function getResponse() {
  const userText = document.querySelector('#textInput').value;

  // If nothing is written don't do anything
@ -27,20 +29,40 @@ function getResponse() {

  const msg = article.querySelector('.msg-box');
  if (msg) {
-        msg.innerText = userText;
-    }
+    console.log(0);
+    await replaceChatMessageWithCustomEmojis(userText).then(data => {
+      // console.log(data);
+      msg.innerHTML = data;

      // Appends the message to the main chat box (shows the message)
-    showChatMessage(article, true);
+      showChatMessage(article);

      twitch.sendMessage(userText);

      // Empty input box after sending message
      document.body.querySelector('#textInput').value = '';
+    });
+  }
 }

+const replaceChatMessageWithCustomEmojis = message =>
+  new Promise(resolve => {
+    const words = message.split(' ');
+    words.forEach(async word => {
+      if (word !== '') {
+        await emojiPicker.database.getEmojiByUnicodeOrName(word).then(data => {
+          if (data && data.name === word) {
+            const url = `<img src="${data.url}">`;
+            message = message.replace(word, url);
+          }
+        });
+        resolve(message);
+      }
+    });
+  });
+
 // Function that will execute when you press 'enter' in the message box
-document.body.querySelector('#textInput').addEventListener('keydown', (e) => {
+document.body.querySelector('#textInput').addEventListener('keydown', e => {
  if (e.which === 13) {
    getResponse();
  }
@ -86,20 +108,19 @@ const displayPanel = (panelSelectorClass, panelSelectorID, btnSelectorID) => {

  btn.addEventListener(
    'click',
-        (event) => {
+    event => {
      event.stopPropagation();
-            panels.forEach((el) => {
+      panels.forEach(el => {
        if (el === panel) return;
        el.classList.remove('show');
      });
-            if (panel.classList.contains('show')) {
-            } else {
+      if (!panel.classList.contains('show')) {
        panel.classList.add('show');
      }
    },
    {
-            capture: true,
-        },
+      capture: true
+    }
  );
 };

@ -119,20 +140,19 @@ const displayPanelX = (panelSelectorClass, panelSelectorID, btnSelectorID) => {

  btn.addEventListener(
    'click',
-        (event) => {
+    event => {
      event.stopPropagation();
-            panels.forEach((el) => {
+      panels.forEach(el => {
        if (el === panel) return;
        el.classList.remove('item-active');
      });
-            if (panel.classList.contains('item-active')) {
-            } else {
+      if (!panel.classList.contains('item-active')) {
        panel.classList.add('item-active');
      }
    },
    {
-            capture: true,
-        },
+      capture: true
+    }
  );
 };

--- a/src/js/customEmojis.js
+++ b/src/js/customEmojis.js
@ -0,0 +1,9 @@
+const customEmojis = [
+  {
+    name: 'sakuraestaKleefeliz',
+    shortcodes: ['sakuraestaKleefeliz'],
+    url: 'https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_0cb536ddb6e143ab87ffeccb160a4d45/default/dark/1.0'
+  }
+];
+
+module.exports = { customEmojis };
--- a/src/js/google.js
+++ b/src/js/google.js
@ -1,3 +1,5 @@
+/* global settings, addVoiceService, googleVoices */
+
 function getGoogleVoices() {
  if (!settings.GOOGLE.USE_GOOGLE) {
    return;
@ -5,12 +7,12 @@ function getGoogleVoices() {

  addVoiceService('Google');

-    let primaryVoice = document.querySelector('#primaryGoogleVoice');
-    let secondaryVoice = document.querySelector('#secondaryGoogleVoice');
+  const primaryVoice = document.querySelector('#primaryGoogleVoice');
+  const secondaryVoice = document.querySelector('#secondaryGoogleVoice');

  function setVoicesinSelect(voiceSelect) {
    const voices = Object.values(googleVoices);
-        voices.forEach((voice) => {
+    voices.forEach(voice => {
      const option = document.createElement('option');
      option.classList.add('option');

--- a/src/js/languages.js
+++ b/src/js/languages.js
@ -4,6 +4,7 @@
 // *info page with credits, version and more info

 const languages = {
+  none: { IETF: 'none', 'ISO-639': 'none' },
  acehnese: { IETF: 'ace-ID', 'ISO-639': 'ace' },
  afrikaans: { IETF: 'af-ZA', 'ISO-639': 'af' },
  akan: { IETF: 'ak-GH', 'ISO-639': 'ak' },
@ -325,7 +326,7 @@ const languages = {
  xhosa: { IETF: 'xh-ZA', 'ISO-639': 'xh' },
  yiddish: { IETF: 'yi-YD', 'ISO-639': 'yi' },
  yoruba: { IETF: 'yo-NG', 'ISO-639': 'yo' },
-    zulu: { IETF: 'zu-ZA', 'ISO-639': 'zu' },
+  zulu: { IETF: 'zu-ZA', 'ISO-639': 'zu' }
 };

 module.exports = { languages };
--- a/src/js/logger.js
+++ b/src/js/logger.js
@ -9,13 +9,13 @@ const consoleFormat = format.combine(
  format.colorize(),
  format.timestamp(),
  format.align(),
-    format.printf((info) => `${info.timestamp} - ${info.level}:  ${info.message} ${JSON.stringify(info.metadata)}`),
+  format.printf(info => `${info.timestamp} - ${info.level}:  ${info.message} ${JSON.stringify(info.metadata)}`)
 );

 const fileFormat = format.combine(
  format.timestamp(),
  format.metadata({ fillExcept: ['message', 'level', 'timestamp', 'label'] }),
-    format.json(),
+  format.json()
 );

 const logger = createLogger({
@ -24,32 +24,32 @@ const logger = createLogger({
  transports: [
    new transports.File({
      filename: path.join(__dirname, '../logs/error.log'),
-            level: 'error',
+      level: 'error'
    }),
    new transports.File({
      filename: path.join(__dirname, '../logs/activity.log'),
      maxsize: 5242880,
-            maxFiles: 5,
-        }),
-    ],
+      maxFiles: 5
+    })
+  ]
 });

 if (process.env.NODE_ENV !== 'production') {
  logger.add(
    new transports.Console({
      level: consoleloggerLevel,
-            format: consoleFormat,
-        }),
+      format: consoleFormat
+    })
  );
 }

 fetch(path.join(__dirname, '../logs/activity.log'))
-    .then((response) => response.text())
-    .then((logData) => {
+  .then(response => response.text())
+  .then(logData => {
    const logLines = logData.trim().split('\n');
    const tableBody = document.getElementById('logContent');

-        logLines.forEach((logLine) => {
+    logLines.forEach(logLine => {
      const logObject = JSON.parse(logLine);
      const row = document.createElement('tr');

@ -73,6 +73,8 @@ fetch(path.join(__dirname, '../logs/activity.log'))
      tableBody.appendChild(row);
    });
  })
-    .catch((error) => {});
+  .catch(error => {
+    console.error(error);
+  });

 module.exports = logger;
--- a/src/js/mediaDevices.js
+++ b/src/js/mediaDevices.js
@ -1,15 +1,17 @@
-let micSelect = document.querySelector('#microphone');
+/* global settings, */
+
+const micSelect = document.querySelector('#microphone');
 let selectedMic;

 function getAvailableMediaDevices(type) {
  return new Promise((resolve, reject) => {
    navigator.mediaDevices
      .enumerateDevices()
-            .then((devices) => {
-                const microphones = devices.filter((device) => device.kind === type);
+      .then(devices => {
+        const microphones = devices.filter(device => device.kind === type);
        resolve(microphones);
      })
-            .catch((error) => {
+      .catch(error => {
        reject(error);
      });
  });
@ -17,10 +19,10 @@ function getAvailableMediaDevices(type) {

 // Microphones
 getAvailableMediaDevices('audioinput')
-    .then((microphones) => {
+  .then(microphones => {
    let i = 0;
    let tempname = '';
-        for (let mic of microphones) {
+    for (const mic of microphones) {
      if (mic.deviceId === 'default') {
        tempname = mic.label.slice(10); // remove "default -" from the label to get the default device name.
      }
@ -44,6 +46,6 @@ getAvailableMediaDevices('audioinput')
      i++;
    }
  })
-    .catch((error) => {
+  .catch(error => {
    console.error('Error retrieving microphones:', error);
  });
--- a/src/js/renderer.js
+++ b/src/js/renderer.js
@ -3,7 +3,7 @@ const ini = require('ini');
 const path = require('path'); // get directory path
 const axios = require('axios');

-const { ipcRenderer, shell } = require('electron'); // necessary electron libraries to send data to the app
+const { webFrame, ipcRenderer, shell } = require('electron'); // necessary electron libraries to send data to the app
 const io = require('socket.io-client');

 const util = require('util');
@ -17,8 +17,8 @@ const { Socket } = require('socket.io-client');
 const main = ipcRenderer.sendSync('environment');

 const resourcesPath = main.resourcesPath;
-let settingsPath = main.settingsPath.toString();
-let pythonPath = main.pythonPath.toString();
+const settingsPath = main.settingsPath.toString();
+const pythonPath = main.pythonPath.toString();
 const settings = main.settings;

 // TODO: remove gooogle voices txt and use api instead
@ -35,6 +35,8 @@ const devicesDropdown = document.querySelector('#devicesDropdown');
 const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox
 const sttModel = document.querySelector('#sttModel'); // obtain the html reference of the sound comboBox
 const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
+const notificationSoundAudioDevices = document.querySelector('#notificationSoundAudioDevice'); // obtain the html reference of the installedTTS comboBox
+const emojiPicker = document.body.querySelector('emoji-picker');

 // laod local javascript files
 const chat = require(path.join(__dirname, './js/chat'));
@ -47,18 +49,18 @@ const config = require(path.join(__dirname, './js/settings'));

 const mediaDevices = require(path.join(__dirname, './js/mediaDevices'));

-let notificationSounds = path.join(__dirname, './sounds/notifications');
-let sttModels = path.join(__dirname, '../speech_to_text_models');
+const notificationSounds = path.join(__dirname, './sounds/notifications');
+const sttModels = path.join(__dirname, '../speech_to_text_models');

 function reset() {
  ipcRenderer.send('restart');
 }

-let server = require(path.join(__dirname, './js/server'));
+const server = require(path.join(__dirname, './js/server'));
 const backend = require(path.join(__dirname, './js/backend'));
-let socket = io(`http://localhost:${settings.GENERAL.PORT}`); // Connect to your Socket.IO server
+const socket = io(`http://localhost:${settings.GENERAL.PORT}`); // Connect to your Socket.IO server

-let twitch = settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : '';
+const twitch = settings.TWITCH.USE_TWITCH ? require(path.join(__dirname, './js/twitch')) : '';
 const Polly = settings.AMAZON.USE_AMAZON ? require(path.join(__dirname, './js/amazon')) : '';
 const google = settings.GOOGLE.USE_GOOGLE ? require(path.join(__dirname, './js/google')) : '';

@ -66,6 +68,9 @@ const theme = require(path.join(__dirname, './js/theme'));
 const auth = require(path.join(__dirname, './js/auth'));

 let ttsRequestCount = 0;
+ttsRequestCount = 0;
+let customEmojis = [];
+customEmojis = [];

 // initialize values
 config.getGeneralSettings();
@ -78,11 +83,15 @@ const speakButton = document.querySelector('#speakBtn');

 const amazonCredentials = {
  accessKeyId: settings.AMAZON.ACCESS_KEY,
-    secretAccessKey: settings.AMAZON.ACCESS_SECRET,
+  secretAccessKey: settings.AMAZON.ACCESS_SECRET
 };

 // Check for installed sounds
 fs.readdir(notificationSounds, (err, files) => {
+  if (err) {
+    console.error(err);
+  }
+
  files.forEach((file, i) => {
    // Create a new option element.
    const option = document.createElement('option');
@ -101,7 +110,11 @@ fs.readdir(notificationSounds, (err, files) => {

 // Check for installed stt models
 fs.readdir(sttModels, (err, files) => {
-    for (let file of files) {
+  if (err) {
+    console.error(err);
+  }
+
+  for (const file of files) {
    if (file.includes('.txt')) {
      continue;
    }
@ -126,25 +139,27 @@ async function getAudioDevices() {
  }

  const devices = await navigator.mediaDevices.enumerateDevices();
-    const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput');
+  const audioOutputDevices = devices.filter(device => device.kind === 'audiooutput');

-    audioOutputDevices.forEach((device) => {
+  audioOutputDevices.forEach(device => {
    const option = document.createElement('option');
    option.text = device.label || `Output ${device.deviceId}`;
    option.value = device.deviceId;
    ttsAudioDevices.appendChild(option);
+    notificationSoundAudioDevices.appendChild(option);
  });

  ttsAudioDevices.selectedIndex = settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
+  notificationSoundAudioDevices.selectedIndex = settings.AUDIO.SELECTED_NOTIFICATION_AUDIO_DEVICE;
 }

 getAudioDevices();

 function setLanguagesinSelect(languageSelector, setting) {
-    let languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox
+  const languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox

  for (const language in languageObject.languages) {
-        if (languageObject.languages.hasOwnProperty(language)) {
+    if (Object.prototype.hasOwnProperty.call(languageObject.languages, language)) {
      const iso639 = languageObject.languages[language]['ISO-639'];
      const option = document.createElement('option');
      option.value = iso639;
@ -162,7 +177,7 @@ setLanguagesinSelect('#secondaryLanguage', settings.TTS.SECONDARY_TTS_LANGUAGE_I

 function addVoiceService(name) {
  function addToselect(select) {
-        let ttsService = document.querySelector(select);
+    const ttsService = document.querySelector(select);
    const option = document.createElement('option');
    ttsService.appendChild(option);

@ -174,7 +189,7 @@ function addVoiceService(name) {
 }

 // Small tooltip
-Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
+Array.from(document.body.querySelectorAll('[tip]')).forEach(el => {
  const tip = document.createElement('div');
  const body = document.querySelector('.container');
  const element = el;
@ -185,33 +200,21 @@ Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
    el.hasAttribute('tip-top') ? '-100%' : '15px'
  })`;
  body.appendChild(tip);
-    element.onmousemove = (e) => {
+  element.onmousemove = e => {
    tip.style.left = `${e.x}px`;
    tip.style.top = `${e.y}px`;
    tip.style.zIndex = 1;
    tip.style.visibility = 'visible';
  };
-    element.onmouseleave = (e) => {
+  element.onmouseleave = e => {
    tip.style.visibility = 'hidden';
  };
 });

-function showChatMessage(article, isUser) {
+function showChatMessage(article) {
  document.querySelector('#chatBox').appendChild(article);
-    let usernameHtml;
-    let msg;
-    let messages = Array.from(document.body.querySelectorAll('.msg-container'));

-    if (isUser) {
-        usernameHtml = article.querySelector('.username-user');
-        msg = article.querySelector('.msg-box-user');
-    } else {
-        usernameHtml = article.querySelector('.username');
-        msg = article.querySelector('.msg-box');
-    }
-
-    // var style = getComputedStyle(usernameHtml);
-    // var style2 = getComputedStyle(usernameHtml);
+  const messages = Array.from(document.body.querySelectorAll('.msg-container'));

  const lastMessage = messages[messages.length - 1];
  lastMessage.scrollIntoView({ behavior: 'smooth' });
@ -221,7 +224,7 @@ function getPostTime() {
  const date = new Date();
  document.body.querySelectorAll('.container').innerHTML = date.getHours();
  const hours = date.getHours();
-    var ampm = hours >= 12 ? 'PM' : 'AM';
+  const ampm = hours >= 12 ? 'PM' : 'AM';
  const minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
  const time = `${hours}:${minutes} ${ampm}`;

@ -253,3 +256,42 @@ hideText('.password-toggle-btn1', '#TWITCH_OAUTH_TOKEN');
 hideText('.password-toggle-btn4', '#AMAZON_ACCESS_KEY');
 hideText('.password-toggle-btn5', '#AMAZON_ACCESS_SECRET');
 hideText('.password-toggle-btn6', '#GOOGLE_API_KEY');
+
+function setZoomLevel(currentZoom, zoomIn) {
+  let newZoom = currentZoom.toFixed(2);
+
+  if (zoomIn === true && currentZoom < 4.95) {
+    newZoom = (currentZoom + 0.05).toFixed(2);
+  }
+  if (zoomIn === false && currentZoom > 0.25) {
+    newZoom = (currentZoom - 0.05).toFixed(2);
+  }
+
+  webFrame.setZoomFactor(parseFloat(newZoom));
+  settings.GENERAL.ZOOMLEVEL = newZoom;
+  fs.writeFileSync(settingsPath, ini.stringify(settings));
+  document.body.querySelector('#ZOOMLEVEL').value = (settings.GENERAL.ZOOMLEVEL * 100).toFixed(0);
+}
+
+// const customEmojix = [
+//   {
+//     name: 'sakuraestaKleefeliz',
+//     shortcodes: ['sakuraestaKleefeliz'],
+//     url: 'https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_0cb536ddb6e143ab87ffeccb160a4d45/default/dark/1.0',
+//     category: 'Sakura'
+//   }
+// ];
+
+// const customEmojiy = [
+//   {
+//     name: 'sakuraestaKleefeliz',
+//     shortcodes: ['sakuraestaKleefeliz'],
+//     url: 'https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_0cb536ddb6e143ab87ffeccb160a4d45/default/dark/1.0',
+//     category: 'Sakurax'
+//   }
+// ];
+
+// emojiPicker.customEmoji = customEmojix;
+// emojiPicker.customEmoji = customEmojiy;
+
+// console.log(emojiPicker.database.getEmojiBySearchQuery('Kappa'));
--- a/src/js/responses.js
+++ b/src/js/responses.js
@ -2,16 +2,19 @@ function getBotResponse(input) {
  // rock paper scissors
  if (input === 'rock') {
    return 'paper';
-	} if (input === 'paper') {
+  }
+  if (input === 'paper') {
    return 'scissors';
-	} if (input === 'scissors') {
+  }
+  if (input === 'scissors') {
    return 'rock';
  }

  // Simple responses
  if (input === 'hello') {
    return 'Hello there!';
-	} if (input === 'goodbye') {
+  }
+  if (input === 'goodbye') {
    return 'Talk to you later!';
  }
  return 'Try asking something else!';
--- a/src/js/server.js
+++ b/src/js/server.js
@ -1,3 +1,5 @@
+/* global settings */
+
 const express = require('express');
 const app = express();
 const path = require('path');
@ -5,7 +7,7 @@ const http = require('http');
 const localServer = http.createServer(app);
 const io = require('socket.io')(localServer);

-let requestCount = 0;
+const requestCount = 0;

 function startVtuberModule() {
  if (!settings.MODULES.USE_VTUBER) {
@ -14,8 +16,8 @@ function startVtuberModule() {

  app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));

-    let vtuber = document.body.querySelector('#BrowsersourceVtuber');
-    let vtuberframe = document.createElement('iframe');
+  const vtuber = document.body.querySelector('#BrowsersourceVtuber');
+  const vtuberframe = document.createElement('iframe');
  vtuberframe.class = 'frame';
  vtuberframe.src = `http://localhost:${settings.GENERAL.PORT}/vtuber`;
  vtuberframe.style.width = '100%';
@ -33,8 +35,8 @@ function startChatBubbleModule() {

  app.use('/chat', express.static(path.join(__dirname, '../modules/chat')));

-    let chat = document.body.querySelector('#BrowsersourceChat');
-    let chatframe = document.createElement('iframe');
+  const chat = document.body.querySelector('#BrowsersourceChat');
+  const chatframe = document.createElement('iframe');
  chatframe.class = 'frame';
  chatframe.src = `http://localhost:${settings.GENERAL.PORT}/chat`;
  chatframe.style.width = '100%';
@ -61,15 +63,12 @@ app.use((req, res, next) => {
 localServer.listen(settings.GENERAL.PORT, () => {
  startVtuberModule();
  startChatBubbleModule();
-
-    if (settings.TTS.USE_TTS) {
-    }
 });

 // Handle socket connections
-io.on('connection', (socket) => {
+io.on('connection', socket => {
  // Receive data from the client
-    socket.on('message', (data) => {});
+  socket.on('message', data => {});

  // Receive data from the client
  socket.on('xxx', (logoUrl, username, message) => {
--- a/src/js/settings.js
+++ b/src/js/settings.js
@ -1,7 +1,10 @@
+/* global settings, setZoomLevel, webFrame, theme, fs, settingsPath, ini, startVoiceRecognition,notificationSoundAudioDevices, ttsAudioDevices, notificationSound, path, resourcesPath, ipcRenderer, auth, shell, sound, twitch, server, backend */
+
 function getGeneralSettings() {
  // General
  document.body.querySelector('#PORT').value = settings.GENERAL.PORT;
-
+  document.body.querySelector('#ZOOMLEVEL').value = settings.GENERAL.ZOOMLEVEL * 100;
+  webFrame.setZoomFactor(parseFloat(settings.GENERAL.ZOOMLEVEL));
  // Theme
  document.querySelector('#USE_CUSTOM_THEME').value = settings.THEME.USE_CUSTOM_THEME;
  document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0;
@ -44,42 +47,42 @@ function getGeneralSettings() {
 }

 document.body.querySelector('#primaryAmazonVoice').addEventListener('change', () => {
-    var select = document.querySelector('#primaryAmazonVoice');
+  const select = document.querySelector('#primaryAmazonVoice');
  settings.AMAZON.PRIMARY_VOICE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved Amazon primary voice!', 'success');
 });

 document.body.querySelector('#secondaryAmazonVoice').addEventListener('change', () => {
-    var select = document.querySelector('#secondaryAmazonVoice');
+  const select = document.querySelector('#secondaryAmazonVoice');
  settings.AMAZON.SECONDARY_VOICE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved Amazon secondary voice!', 'success');
 });

 document.body.querySelector('#primaryGoogleVoice').addEventListener('change', () => {
-    var select = document.querySelector('#primaryGoogleVoice');
+  const select = document.querySelector('#primaryGoogleVoice');
  settings.GOOGLE.PRIMARY_VOICE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved Google primary voice!', 'success');
 });

 document.body.querySelector('#secondaryGoogleVoice').addEventListener('change', () => {
-    var select = document.querySelector('#secondaryGoogleVoice');
+  const select = document.querySelector('#secondaryGoogleVoice');
  settings.GOOGLE.SECONDARY_VOICE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved Google secondary voice!', 'success');
 });

 document.body.querySelector('#primaryVoice').addEventListener('change', () => {
-    var select = document.querySelector('#primaryVoice');
+  const select = document.querySelector('#primaryVoice');
  settings.TTS.PRIMARY_VOICE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved primary voice!', 'success');
 });

 document.body.querySelector('#microphone').addEventListener('change', () => {
-    var select = document.querySelector('#microphone');
+  const select = document.querySelector('#microphone');
  settings.STT.MICROPHONE = select.value;
  settings.STT.MICROPHONE_ID = select.options[select.selectedIndex].text;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
@ -88,14 +91,14 @@ document.body.querySelector('#microphone').addEventListener('change', () => {
 });

 document.body.querySelector('#sttModel').addEventListener('change', () => {
-    var select = document.querySelector('#sttModel');
+  const select = document.querySelector('#sttModel');
  settings.STT.LANGUAGE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved voice detection language!', 'success');
 });

 document.body.querySelector('#defaultLanguage').addEventListener('change', () => {
-    var select = document.querySelector('#defaultLanguage');
+  const select = document.querySelector('#defaultLanguage');
  settings.TTS.PRIMARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
  settings.TTS.PRIMARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
@ -103,14 +106,14 @@ document.body.querySelector('#defaultLanguage').addEventListener('change', () =>
 });

 document.body.querySelector('#secondaryVoice').addEventListener('change', () => {
-    var select = document.querySelector('#secondaryVoice');
+  const select = document.querySelector('#secondaryVoice');
  settings.TTS.SECONDARY_VOICE = select.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved secondary voice!', 'success');
 });

 document.body.querySelector('#secondaryLanguage').addEventListener('change', () => {
-    var select = document.querySelector('#secondaryLanguage');
+  const select = document.querySelector('#secondaryLanguage');
  settings.TTS.SECONDARY_TTS_LANGUAGE_INDEX = select.selectedIndex;
  settings.TTS.SECONDARY_TTS_LANGUAGE = select.options[select.selectedIndex].text;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
@ -124,11 +127,18 @@ document.body.querySelector('#ttsAudioDevice').addEventListener('change', () =>
  createNotification('Saved audio device!', 'success');
 });

+document.body.querySelector('#notificationSoundAudioDevice').addEventListener('change', () => {
+  settings.AUDIO.SELECTED_NOTIFICATION_AUDIO_DEVICE = notificationSoundAudioDevices.value;
+  settings.AUDIO.NOTIFICATION_AUDIO_DEVICE = notificationSoundAudioDevices.selectedIndex;
+  fs.writeFileSync(settingsPath, ini.stringify(settings));
+  createNotification('Saved audio device!', 'success');
+});
+
 document.body.querySelector('#TWITCH_CHANNEL_NAME').addEventListener('change', () => {
  settings.TWITCH.CHANNEL_NAME = document.body.querySelector('#TWITCH_CHANNEL_NAME').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));

-    let button = document.body.querySelector('#TestTwitchCredentials');
+  const button = document.body.querySelector('#TestTwitchCredentials');
  button.className = 'AdvancedMenuButton';
  createNotification('Saved Channel name, please restart the application to reset twitch service', 'warning');
 });
@ -138,11 +148,19 @@ document.body.querySelector('#TWITCH_OAUTH_TOKEN').addEventListener('change', ()
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  createNotification('Saved OAuth token!', 'success');

-    let button = document.body.querySelector('#TestTwitchCredentials');
+  const button = document.body.querySelector('#TestTwitchCredentials');
  button.className = 'AdvancedMenuButton';
  createNotification('Saved OAuth token, please restart the application to reset twitch service', 'warning');
 });

+setInputFilter(
+  document.body.querySelector('#PORT'),
+  function (value) {
+    return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
+  },
+  "Only digits and '.' are allowed"
+);
+
 document.body.querySelector('#PORT').addEventListener('change', () => {
  settings.GENERAL.PORT = document.body.querySelector('#PORT').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
@ -174,7 +192,7 @@ document.body.querySelector('#notification').addEventListener('change', () => {
 });

 function showMenuButton(menuButton, toggle) {
-    let option = document.body.querySelector(menuButton);
+  const option = document.body.querySelector(menuButton);
  if (!toggle) {
    option.style.display = 'none';
  } else {
@ -196,7 +214,7 @@ function createNotification(message = null, type = null) {
    alertSound = 'error.mp3';
  }

-    let notfication = new Audio(path.join(resourcesPath, `./sounds/notifications/${alertSound}`));
+  const notfication = new Audio(path.join(resourcesPath, `./sounds/notifications/${alertSound}`));
  notfication.volume = settings.AUDIO.NOTIFICATION_VOLUME / 100;
  notfication.play();
  setTimeout(() => notification.remove(), 10000);
@ -250,14 +268,14 @@ document.body.querySelector('#min-button').addEventListener('click', () => {

 // #region Top bar buttons
 document.body.querySelector('#Info_USERNAME').addEventListener('click', async () => {
-    let element = document.body.querySelector('#TWITCH_OAUTH_TOKEN');
+  const element = document.body.querySelector('#TWITCH_OAUTH_TOKEN');
  element.value = await auth.getTwitchOauthToken();

  createNotification('Saved OAuth token!', 'success');
 });

-let hideInputToggleButton = document.body.querySelectorAll('.password-toggle-btn .password-toggle-icon .fa-eye-slash');
-hideInputToggleButton.forEach((item) => {
+const hideInputToggleButton = document.body.querySelectorAll('.password-toggle-btn .password-toggle-icon .fa-eye-slash');
+hideInputToggleButton.forEach(item => {
  item.addEventListener('click', () => {
    if (item.classList.contains('fa-eye')) {
      item.classList.remove('fa-eye');
@ -391,7 +409,7 @@ document.body.querySelector('#USE_MODULES').addEventListener('click', () => {
  createNotification(
    `${toggle ? 'Enabled' : 'Disabled'} server settings!, the service will stop working after restarting the application
        ${toggle ? '' : ', the service will stop working after restarting the application'}`,
-        'success',
+    'success'
  );
 });

@ -403,7 +421,7 @@ document.body.querySelector('#USE_VTUBER').addEventListener('change', () => {
  createNotification(
    `${toggle ? 'Enabled' : 'Disabled'} Vtuber setting!
        ${toggle ? '' : ', the service will stop working after restarting the application'}`,
-        'success',
+    'success'
  );
  server.startVtuberModule();
 });
@ -486,7 +504,7 @@ document.body.querySelector('#USE_NOTIFICATION_SOUNDS').addEventListener('change
 });

 document.body.querySelector('#notificationVolume').addEventListener('change', () => {
-    let element = document.body.querySelector('#notificationVolume');
+  const element = document.body.querySelector('#notificationVolume');
  settings.AUDIO.NOTIFICATION_VOLUME = element.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));

@ -524,7 +542,7 @@ if (settings.AUDIO.NOTIFICATION_VOLUME) {
 }

 document.body.querySelector('#ttsVolume').addEventListener('change', () => {
-    let element = document.body.querySelector('#ttsVolume');
+  const element = document.body.querySelector('#ttsVolume');
  settings.AUDIO.TTS_VOLUME = element.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));

@ -562,7 +580,7 @@ if (settings.AUDIO.TTS_VOLUME) {
 }

 document.body.querySelector('#ttsVolume').addEventListener('change', () => {
-    let element = document.body.querySelector('#ttsVolume');
+  const element = document.body.querySelector('#ttsVolume');
  settings.AUDIO.TTS_VOLUME = element.value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));

@ -575,10 +593,10 @@ document.body.querySelector('#TestDefaultTTSButton').addEventListener('click', a
  const text = document.getElementById('testPrimaryTTS').value;
  const requestData = {
    message: `user: ${text}`,
-        voice: settings.TTS.PRIMARY_VOICE,
+    voice: settings.TTS.PRIMARY_VOICE
  };
-    let count = await backend.getInternalTTSAudio(requestData);
-    let textObject = { filtered: text, formatted: text };
+  const count = await backend.getInternalTTSAudio(requestData);
+  const textObject = { filtered: text, formatted: text };
  sound.playAudio({ service: 'Internal', message: textObject, count });
 });

@ -586,15 +604,89 @@ document.body.querySelector('#TestSecondaryTTSButton').addEventListener('click',
  const text = document.getElementById('testSecondaryTTS').value;
  const requestData = {
    message: `user: ${text}`,
-        voice: settings.TTS.SECONDARY_VOICE,
+    voice: settings.TTS.SECONDARY_VOICE
  };

-    let count = await backend.getInternalTTSAudio(requestData);
-    let textObject = { filtered: text, formatted: text };
+  const count = await backend.getInternalTTSAudio(requestData);
+  const textObject = { filtered: text, formatted: text };

  sound.playAudio({ service: 'Internal', message: textObject, count });
 });

+// Restricts input for the given textbox to the given inputFilter function.
+function setInputFilter(textbox, inputFilter, errMsg) {
+  ['input', 'keydown', 'keyup', 'mousedown', 'mouseup', 'select', 'contextmenu', 'drop', 'focusout'].forEach(function (event) {
+    textbox.addEventListener(event, function (e) {
+      if (inputFilter(this.value)) {
+        // Accepted value.
+        if (['keydown', 'mousedown', 'focusout'].indexOf(e.type) >= 0) {
+          this.classList.remove('input-error');
+          this.setCustomValidity('');
+        }
+
+        this.oldValue = this.value;
+        this.oldSelectionStart = this.selectionStart;
+        this.oldSelectionEnd = this.selectionEnd;
+      } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
+        // Rejected value: restore the previous one.
+        this.classList.add('input-error');
+        this.setCustomValidity(errMsg);
+        this.reportValidity();
+        this.value = this.oldValue;
+        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
+      } else {
+        // Rejected value: nothing to restore.
+        this.value = '';
+      }
+    });
+  });
+}
+
+webFrame.setVisualZoomLevelLimits(1, 5);
+
+document.body.addEventListener('wheel', e => {
+  if (e.ctrlKey) {
+    const currentZoom = webFrame.getZoomFactor();
+    const zoomIn = Boolean(e.deltaY < 0);
+    setZoomLevel(currentZoom, zoomIn);
+  }
+});
+
+setInputFilter(
+  document.body.querySelector('#ZOOMLEVEL'),
+  function (value) {
+    return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
+  },
+  "Only digits and '.' are allowed"
+);
+
+document.body.querySelector('#ZOOMLEVEL').addEventListener('change', () => {
+  const newZoom = parseInt(document.body.querySelector('#ZOOMLEVEL').value) / 100;
+  settings.GENERAL.ZOOMLEVEL = newZoom;
+  fs.writeFileSync(settingsPath, ini.stringify(settings));
+  setZoomLevel(newZoom, null);
+  createNotification('Saved zoom new level', 'warning');
+});
+
+document.body.querySelector('emoji-picker').addEventListener('emoji-click', e => {
+  console.log(e.detail);
+  const div = document.getElementById('textInput');
+  if (e.detail.unicode === undefined) {
+    div.value += e.detail.name + ' ';
+  } else {
+    div.value += e.detail.unicode + ' ';
+  }
+
+  div.focus();
+});
+
+// #region Use Custom theme toggle logic
+document.body.querySelector('#emojis').addEventListener('click', () => {
+  const emojiPicker = document.body.querySelector('#emoji-picker');
+  // console.log(emojiPicker);
+  emojiPicker.style.visibility === 'visible' ? (emojiPicker.style.visibility = 'hidden') : (emojiPicker.style.visibility = 'visible');
+});
+
 module.exports = {
-    getGeneralSettings,
+  getGeneralSettings
 };
--- a/src/js/sound.js
+++ b/src/js/sound.js
@ -1,23 +1,24 @@
+/* global ttsAudioFile, path, resourcesPath, settings, fs, notificationSound, backend, socket, requestData */
+
 let trueMessage = '';
 let currentLogoUrl = '';
 let currentUsername = '';
-let voiceSoundArray = [];
+const voiceSoundArray = [];
 let status = 0;
-let counter = 0;
+const counter = 0;

-const playTTS = (data) =>
-    new Promise((resolve) => {
+const playTTS = data =>
+  new Promise(resolve => {
    ttsAudioFile = path.join(resourcesPath, `./sounds/tts/${data.service}_${data.count}.mp3`);
    const tts = new Audio(ttsAudioFile);
-        console.log(settings.AUDIO.TTS_AUDIO_DEVICE);
+    // console.log(settings.AUDIO.TTS_AUDIO_DEVICE);
    tts.setSinkId(settings.AUDIO.TTS_AUDIO_DEVICE);

    tts.addEventListener('ended', () => {
-            console.log('ended');
-            fs.unlink(ttsAudioFile, (err) => {
+      // console.log('ended');
+      fs.unlink(ttsAudioFile, err => {
        if (err) {
-                    console.error('TEST');
-
+          console.error(err);
          resolve('finished');
          return;
        }
@ -25,15 +26,19 @@ const playTTS = (data) =>
      });
    });

-        tts.setSinkId(settings.AUDIO.TTS_AUDIO_DEVICE)
+    tts
+      .setSinkId(settings.AUDIO.TTS_AUDIO_DEVICE)
      .then(() => {
-                console.log('playing');
+        // console.log('playing');
        tts.volume = settings.AUDIO.TTS_VOLUME / 100;
-                tts.play().catch((error) => {
+        tts.play().catch(error => {
+          if (error) {
+            console.error(error);
+          }
          resolve('finished');
        });
      })
-            .catch((error) => {
+      .catch(error => {
        console.error('Failed to set audio output device:', error);
        resolve('finished');
      });
@ -56,11 +61,24 @@ function add(data) {

 function playNotificationSound() {
  if (settings.AUDIO.USE_NOTIFICATION_SOUNDS) {
-        let notfication = new Audio(
-            path.join(resourcesPath, `./sounds/notifications/${notificationSound.options[settings.AUDIO.NOTIFICATION_SOUND].text}`),
+    const notfication = new Audio(
+      path.join(resourcesPath, `./sounds/notifications/${notificationSound.options[settings.AUDIO.NOTIFICATION_SOUND].text}`)
    );
+
+    notfication
+      .setSinkId(settings.AUDIO.SELECTED_NOTIFICATION_AUDIO_DEVICE)
+      .then(() => {
+        // console.log('playing');
        notfication.volume = settings.AUDIO.NOTIFICATION_VOLUME / 100;
-        notfication.play();
+        notfication.play().catch(error => {
+          if (error) {
+            console.error(error);
+          }
+        });
+      })
+      .catch(error => {
+        console.error('Failed to set audio output device:', error);
+      });
  }
 }

@ -75,7 +93,7 @@ async function playVoice(filteredMessage, logoUrl, username, message) {
  trueMessage = filteredMessage;
  currentLogoUrl = logoUrl;
  currentUsername = username;
-    let textObject = { filtered: filteredMessage, formatted: message };
+  const textObject = { filtered: filteredMessage, formatted: message };
  let voice;
  textObject.filtered = `${username}: ${filteredMessage}`;

@ -93,15 +111,16 @@ async function playVoice(filteredMessage, logoUrl, username, message) {
  const service = document.getElementById('primaryTTSService').value;

  switch (service) {
-        case 'Internal':
+    case 'Internal': {
      const requestData = {
        message: textObject.filtered,
-                voice: settings.TTS.PRIMARY_VOICE,
+        voice: settings.TTS.PRIMARY_VOICE
      };

-            let count = await backend.getInternalTTSAudio(requestData);
+      const count = await backend.getInternalTTSAudio(requestData);
      playAudio({ service, message: textObject, count });
      break;
+    }
    case 'Amazon':
      // playAudio({ service: 'Amazon', message: textObject, count });
      break;
--- a/src/js/theme.js
+++ b/src/js/theme.js
@ -1,3 +1,5 @@
+/* global settings, root, fs, settingsPath, ini */
+
 function changeColor(section, setting, tempSection) {
  document.querySelector(section).value = setting;
  const value = document.querySelector(section).value;
@ -12,15 +14,11 @@ function setCurrentTheme(adjustTemp = false) {
  changeColor('#TOP_BAR', settings.THEME.TOP_BAR, adjustTemp ? '--top-bar-temp' : '--top-bar');
  changeColor('#MID_SECTION', settings.THEME.MID_SECTION, adjustTemp ? '--mid-section-temp' : '--mid-section');
  changeColor('#CHAT_BUBBLE_BG', settings.THEME.CHAT_BUBBLE_BG, adjustTemp ? '--chat-bubble-temp' : '--chat-bubble');
-    changeColor(
-        '#CHAT_BUBBLE_HEADER',
-        settings.THEME.CHAT_BUBBLE_HEADER,
-        adjustTemp ? '--chat-bubble-header-temp' : '--chat-bubble-header',
-    );
+  changeColor('#CHAT_BUBBLE_HEADER', settings.THEME.CHAT_BUBBLE_HEADER, adjustTemp ? '--chat-bubble-header-temp' : '--chat-bubble-header');
  changeColor(
    '#CHAT_BUBBLE_MESSAGE',
    settings.THEME.CHAT_BUBBLE_MESSAGE,
-        adjustTemp ? '--chat-bubble-message-temp' : '--chat-bubble-message',
+    adjustTemp ? '--chat-bubble-message-temp' : '--chat-bubble-message'
  );
 }

--- a/src/js/twitch.js
+++ b/src/js/twitch.js
@ -1,7 +1,10 @@
+/* global client, customEmojis, emojiPicker, settings, options, sound, showChatMessage, messageTemplates, getPostTime */
+
 const tmi = require('tmi.js');
 const axios = require('axios');

-let client;
+let client = null;
+let logoUrl = null;

 function sendMessage(message) {
  client.say(settings.TWITCH.CHANNEL_NAME, message).catch(console.error);
@ -9,30 +12,30 @@ function sendMessage(message) {

 client = new tmi.Client({
  options: {
-        skipUpdatingEmotesets: true,
+    skipUpdatingEmotesets: true
  },
  identity: {
    username: settings.TWITCH.USERNAME,
-        password: settings.TWITCH.OAUTH_TOKEN,
+    password: settings.TWITCH.OAUTH_TOKEN
  },
-    channels: [settings.TWITCH.CHANNEL_NAME],
+  channels: [settings.TWITCH.CHANNEL_NAME]
 });

 client
  .connect()
-    .then((data) => {})
+  .then(data => {})
  .catch(console.error);

 function ping(element) {
-    let value = document.body.querySelector(element);
+  const value = document.body.querySelector(element);

  client
    .ping()
-        .then((data) => {
+    .then(data => {
      value.classList.add('success');
      value.innerText = 'Success!';
    })
-        .catch((e) => {
+    .catch(e => {
      value.classList.add('error');
      value.innerText = 'Failed!';
    });
@ -64,7 +67,7 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage

  const msg = article.querySelector('.msg-box');
  if (msg) {
-        messageObject.forEach((entry) => {
+    messageObject.forEach(entry => {
      if (entry.text) {
        msg.innerHTML += entry.text;
      } else {
@ -74,7 +77,7 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
  }

  // Appends the message to the main chat box (shows the message)
-    showChatMessage(article, false);
+  showChatMessage(article);

  if (fileteredMessage) {
    sound.playVoice(fileteredMessage, logoUrl, username, msg);
@ -88,16 +91,16 @@ function getProfileImage(userid, username, message, fileteredMessage) {
  options = {
    method: 'GET',
    url: `https://api.twitch.tv/helix/users?id=${userid}`,
-        headers: { 'Client-ID': settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}` },
+    headers: { 'Client-ID': settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}` }
  };

  axios
    .request(options)
-        .then((responseLogoUrl) => {
-            const logoUrl = responseLogoUrl.data.data[0].profile_image_url;
+    .then(responseLogoUrl => {
+      logoUrl = responseLogoUrl.data.data[0].profile_image_url;
      displayTwitchMessage(logoUrl, username, message, fileteredMessage);
    })
-        .catch((error) => {
+    .catch(error => {
      console.error(error);
    });
 }
@ -125,20 +128,59 @@ client.on('message', (channel, tags, message, self) => {
  }
  const emotes = tags.emotes || {};
  const emoteValues = Object.entries(emotes);
-    let fileteredMessage = message;
+  let filteredMessage = message;
  let emoteMessage = message;

-    emoteValues.forEach((entry) => {
-        entry[1].forEach((lol) => {
+  emoteValues.forEach(entry => {
+    entry[1].forEach(lol => {
      const [start, end] = lol.split('-');
-            let emote = `<img src="https://static-cdn.jtvnw.net/emoticons/v2/${entry[0]}/default/dark/1.0"/>`;
+      const emote = `<img src="https://static-cdn.jtvnw.net/emoticons/v2/${entry[0]}/default/dark/1.0"/>`;
      emoteMessage = emoteMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), emote);
-            fileteredMessage = fileteredMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), '');
+      filteredMessage = filteredMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), '');
    });
  });

-    let messageObject = parseString(emoteMessage);
-    getProfileImage(tags['user-id'], tags['display-name'], messageObject, fileteredMessage);
+  const messageObject = parseString(emoteMessage);
+  getProfileImage(tags['user-id'], tags['display-name'], messageObject, filteredMessage);
 });

+function formatTwitchEmojis(emojis, name) {
+  emojis.forEach(emoji => {
+    const emojiToBeAdded = {
+      name: emoji.name,
+      shortcodes: [emoji.name],
+      url: emoji.images.url_1x,
+      category: name
+    };
+    customEmojis.push(emojiToBeAdded);
+  });
+  emojiPicker.customEmoji = customEmojis;
+}
+
+function getTwitchGLobalEmotes() {
+  // Get user Logo with access token
+  options = {
+    method: 'GET',
+    url: 'https://api.twitch.tv/helix/chat/emotes/global',
+    headers: {
+      'Client-ID': settings.TWITCH.CLIENT_ID,
+      Authorization: `Bearer ${settings.TWITCH.OAUTH_TOKEN}`
+    }
+  };
+
+  axios
+    .request(options)
+    .then(responseLogoUrl => {
+      formatTwitchEmojis(responseLogoUrl.data.data, 'Twitch Global');
+      // console.log(responseLogoUrl);
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
+if (settings.TWITCH.OAUTH_TOKEN) {
+  getTwitchGLobalEmotes();
+}
+
 module.exports = { sendMessage, ping, client };
--- a/src/main.js
+++ b/src/main.js
@ -1,3 +1,5 @@
+/* global pythonPath, a */
+
 const { app, BrowserWindow, ipcMain } = require('electron');
 const { writeIniFile } = require('write-ini-file');
 const path = require('path');
@ -45,8 +47,8 @@ async function createWindow() {
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
-            enableRemoteModule: true,
-        },
+      enableRemoteModule: true
+    }
  });

  window.loadFile(path.join(__dirname, 'index.html'));
@ -55,7 +57,7 @@ async function createWindow() {
    window.webContents.openDevTools();
  }

-    window.on('close', (e) => {
+  window.on('close', e => {
    settings = ini.parse(fs.readFileSync(settingsPath, 'utf-8')); // load newest settings in case anything changed after starting the program
    const bounds = window.getBounds();

@ -72,7 +74,7 @@ app.whenReady().then(() => {
  createWindow();
 });

-app.on('window-all-closed', (event) => {
+app.on('window-all-closed', event => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
@ -93,12 +95,12 @@ ipcMain.on('resize-window', (event, width, height) => {
  browserWindow.setSize(width, height);
 });

-ipcMain.on('minimize-window', (event) => {
+ipcMain.on('minimize-window', event => {
  const browserWindow = BrowserWindow.fromWebContents(event.sender);
  browserWindow.minimize();
 });

-ipcMain.on('maximize-window', (event) => {
+ipcMain.on('maximize-window', event => {
  const browserWindow = BrowserWindow.fromWebContents(event.sender);

  if (!browserWindow.isMaximized()) {
@ -108,18 +110,18 @@ ipcMain.on('maximize-window', (event) => {
  }
 });

-ipcMain.on('close-window', (event) => {
+ipcMain.on('close-window', event => {
  const browserWindow = BrowserWindow.fromWebContents(event.sender);
  kill('loquendoBot_backend');
  browserWindow.close();
  app.quit();
 });

-ipcMain.on('restart', (event) => {
+ipcMain.on('restart', event => {
  app.relaunch();
 });

-ipcMain.on('environment', (event) => {
+ipcMain.on('environment', event => {
  event.returnValue = { resourcesPath, pythonPath, settingsPath, settings, isPackaged: app.isPackaged };
 });

@ -136,32 +138,34 @@ async function createIniFile() {
      PORT: 9000,
      VIEWERS_PANEL: false,
      LOCATION: pythonPath,
+      ZOOMLEVEL: 1
    },
    LANGUAGE: {
-            USE_DETECTION: false,
+      USE_DETECTION: false
    },
    TTS: {
      USE_TTS: true,
      PRIMARY_VOICE: '',
      PRIMARY_TTS_LANGUAGE: 'EN',
      SECONDARY_VOICE: '',
-            SECONDARY_TTS_LANGUAGE: 'EN',
+      SECONDARY_TTS_LANGUAGE: 'EN'
    },
    STT: {
      USE_STT: false,
      MICROPHONE_ID: 'default',
      SELECTED_MICROPHONE: 'default',
      MICROPHONE: 0,
-            LANGUAGE: 'vosk-model-small-es-0.42',
+      LANGUAGE: 'vosk-model-small-es-0.42'
    },
    AUDIO: {
      USE_NOTIFICATION_SOUNDS: true,
+      SELECTED_NOTIFICATION_AUDIO_DEVICE: 'default',
      NOTIFICATION_AUDIO_DEVICE: 0,
      NOTIFICATION_SOUND: 0,
      NOTIFICATION_VOLUME: 50,
      SELECTED_TTS_AUDIO_DEVICE: 0,
      TTS_AUDIO_DEVICE: 'default',
-            TTS_VOLUME: 50,
+      TTS_VOLUME: 50
    },
    THEME: {
      USE_CUSTOM_THEME: false,
@ -173,7 +177,7 @@ async function createIniFile() {
      MID_SECTION: '#6b8578',
      CHAT_BUBBLE_BG: '#447466',
      CHAT_BUBBLE_HEADER: '#ffffff',
-            CHAT_BUBBLE_MESSAGE: '#b5b5b5',
+      CHAT_BUBBLE_MESSAGE: '#b5b5b5'
    },
    TWITCH: {
      USE_TWITCH: false,
@ -182,12 +186,12 @@ async function createIniFile() {
      USER_ID: '',
      USER_LOGO_URL: '',
      OAUTH_TOKEN: '',
-            CLIENT_ID: '2t206sj7rvtr1rutob3p627d13jch9',
+      CLIENT_ID: '2t206sj7rvtr1rutob3p627d13jch9'
    },
    MODULES: {
      USE_MODULES: false,
      USE_VTUBER: false,
-            USE_CHATBUBBLE: false,
+      USE_CHATBUBBLE: false
    },
    AMAZON: {
      USE_AMAZON: false,
@ -195,15 +199,15 @@ async function createIniFile() {
      ACCESS_SECRET: '',
      PRIMARY_VOICE: '',
      SECONDARY_VOICE: '',
-            CHARACTERS_USED: 0,
+      CHARACTERS_USED: 0
    },
    GOOGLE: {
      USE_GOOGLE: false,
      API_KEY: '',
      PRIMARY_VOICE: '',
      SECONDARY_VOICE: '',
-            CHARACTERS_USED: 0,
-        },
+      CHARACTERS_USED: 0
+    }
  }).then(() => {
    settings = ini.parse(fs.readFileSync(settingsPath, 'utf-8'));
  });
--- a/src/modules/chat/index.html
+++ b/src/modules/chat/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <title>Chat</title>
--- a/src/modules/chat/main.css
+++ b/src/modules/chat/main.css
@ -11,7 +11,7 @@ body {
 .thomas {
  position: relative;
  float: center;
-    display: inline-block;
+  /* display: inline-block; */
 }

 .speechbubble {
@ -148,9 +148,9 @@ body {
  padding: 15px;
  border-radius: 20px;
 }
-
+/* 
 .message::after {
-}
+} */

 .arrow {
  content: '';
--- a/src/modules/chat/main.js
+++ b/src/modules/chat/main.js
@ -1,3 +1,5 @@
+/* global io */
+
 // Connect to the Socket.IO server
 const socket = io();

@ -28,16 +30,16 @@ let x;

 let currentIndex = 0;
 let messageStream = '';
-let tempMessageObject = '';
-let fullMessageLength = 0;
+const tempMessageObject = '';
+const fullMessageLength = 0;

 function getFullMessageLength(text) {
  let fullMessageLength = 0;
-    text.forEach((element) => {
+  text.forEach(element => {
    if (element.text) {
      fullMessageLength += element.text.length;
    }
-        element.html;
+    // element.html;
    fullMessageLength += 1;
  });

@ -97,16 +99,16 @@ function displayTwitchMessage(logoUrl, username, messageObject) {
    elements[0].remove();
  }

-    article.addEventListener('animationend', (e) => {
-        if (e.animationName == 'fade-outx') {
+  article.addEventListener('animationend', e => {
+    if (e.animationName === 'fade-outx') {
      article.remove();
    }
  });

  if (elements.length > 1) {
    elements[0].classList.add('fade-outxx');
-        elements[0].addEventListener('animationend', (e) => {
-            if (e.animationName == 'fade-outxx') {
+    elements[0].addEventListener('animationend', e => {
+      if (e.animationName === 'fade-outxx') {
        elements[0].remove();
      }
    });
--- a/src/modules/vtuber/css/about.css
+++ b/src/modules/vtuber/css/about.css
@ -20,8 +20,8 @@ body {
  padding-left: 40dip;
  padding-right: 10dip;
  vertical-align: top;
-  foreground-repeat: no-repeat;
-  foreground-position: 16dip 50%;
+  /* foreground-repeat: no-repeat;
+  foreground-position: 16dip 50%; */
  background-repeat: no-repeat;
  background-position: 10dip 50%;
  background-size: 64dip 64dip;
@ -37,7 +37,7 @@ body {

 .title {
  font-weight: bold !important;
-  flow: column !important;
+  /* flow: column !important; */
  text-align: left !important;
  margin: auto !important;
  width: min-content !important;
@ -86,12 +86,12 @@ img {
 }

 #button-bar {
-  flow: horizontal;
+  /* flow: horizontal; */
  padding: 10dip;
  border-spacing: 10dip;
  margin: 0;
-  flow: horizontal;
-  horizontal-align: right;
+  /* flow: horizontal; */
+  /* horizontal-align: right; */
 }

 label {
@ -103,7 +103,7 @@ label {
  text-shadow: #fff 0px 1px;
  min-width: 4em;
  line-height: 2em;
-  vertical-align: middle;
+  /* vertical-align: middle; */
  width: min-intrinsic;
  text-align: center;
 }
--- a/src/modules/vtuber/css/main.css
+++ b/src/modules/vtuber/css/main.css
@ -248,7 +248,6 @@ button.motion {
  width: 50px;
 }

-
 .closed-mouth-motion {
  background-image: url('../png/controls/buttons/top/motion/closed.png');
  box-sizing: border-box;
@ -311,7 +310,6 @@ button.motion {
  background-color: red;
 }

-
 #mouth-transition::before {
  background-color: red;
  background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
@ -380,7 +378,3 @@ button.motion::after {
  width: 40%;
  height: width(100%);
 }
-
-menu.popup {
-    /* box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.692); */
-}
--- a/src/modules/vtuber/index.html
+++ b/src/modules/vtuber/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html window-frame="transparent">
  <head>
    <title>TransTube</title>
--- a/src/modules/vtuber/js/main.js
+++ b/src/modules/vtuber/js/main.js
@ -41,9 +41,7 @@ monitorDelay();
 function animate() {
  let avatarCurr = $('#avatar').src;

-	const animation = globalThis.MOUTH_IS_OPEN
-		? globalThis.CHOSEN_OPEN_MOUTH_ANIMATION
-		: globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION;
+  const animation = globalThis.MOUTH_IS_OPEN ? globalThis.CHOSEN_OPEN_MOUTH_ANIMATION : globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION;

  globalThis.ANIMATION = animation;

@ -137,10 +135,7 @@ function animateButton(button, animation = 'motionless') {
  });
 }

-animateButton(
-	'#closed-mouth-motion',
-	globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION,
-);
+animateButton('#closed-mouth-motion', globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION);
 animateButton('#open-mouth-motion', globalThis.CHOSEN_OPEN_MOUTH_ANIMATION);

 function blink() {
@ -177,21 +172,13 @@ async function _cycleAnimations() {
    animate(key);
    Window.this.caption = key;
    i++;
-		await new Promise((r) => setTimeout(r, 2000));
+    await new Promise(resolve => setTimeout(resolve, 2000));
  }
 }

-$(document).on(
-	'~mousedown',
-	'#closed-mouth-motion, #open-mouth-motion',
-	motionButtonEvent,
-);
+$(document).on('~mousedown', '#closed-mouth-motion, #open-mouth-motion', motionButtonEvent);

-$(document).on(
-	'~doubleclick',
-	'#closed-mouth-motion, #open-mouth-motion',
-	motionButtonEvent,
-);
+$(document).on('~doubleclick', '#closed-mouth-motion, #open-mouth-motion', motionButtonEvent);

 function motionButtonEvent(evt) {
  const { target: button } = evt;
@ -203,26 +190,10 @@ function motionButtonEvent(evt) {
    button.attributes.counter--;
  }

-	const color = [
-		'white',
-		'#9BCCD4',
-		'#8087D6',
-		'#AB65CF',
-		'#E7FD5B',
-		'#EC9F45',
-		'#E24555',
-	][mod(button.attributes.counter, 7)];
+  const color = ['white', '#9BCCD4', '#8087D6', '#AB65CF', '#E7FD5B', '#EC9F45', '#E24555'][mod(button.attributes.counter, 7)];
  button.style.variable('color', color);

-	const animation = [
-		'motionless',
-		'vibing',
-		'shaking',
-		'shakingMore',
-		'bouncy',
-		'excited',
-		'nervous',
-	][mod(button.attributes.counter, 7)];
+  const animation = ['motionless', 'vibing', 'shaking', 'shakingMore', 'bouncy', 'excited', 'nervous'][mod(button.attributes.counter, 7)];

  animateButton(button, animation);

@ -238,7 +209,8 @@ function motionButtonEvent(evt) {
 function animateMouthButton() {
  setInterval(() => {
    const n = Date.now() % 1200;
-		document.body.querySelector('.mouth-transition').style.backgroundImage = `url('../vtuber/png/controls/buttons/top/motion/${n > 600 ? 'open' : 'closed'
+    document.body.querySelector('.mouth-transition').style.backgroundImage = `url('../vtuber/png/controls/buttons/top/motion/${
+      n > 600 ? 'open' : 'closed'
    }.png')`;
  });
 }
@ -251,21 +223,16 @@ function mod(n, m) {

 globalThis.CURRENT_BUTTON = null;

-$(document).on(
-	'click',
-	'.mouth-image.border-default:not(:first-of-type)',
-	(evt, el) => {
+$(document).on('click', '.mouth-image.border-default:not(:first-of-type)', (evt, el) => {
  globalThis.CURRENT_BUTTON = el;
  el.popup($('menu'));
-	},
-);
+});

 function loadImage() {
  const filename = Window.this.selectFile({
    mode: 'open',
-		filter:
-      'image files (*.bmp,*.dib,*.gif,*.png,*.apng,*.jpg,*.jpeg,*.jiff)|*.bmp;*.dib;*.gif;*.png;*.apng;*.jpg;*.jpeg;*.jiff',
-		caption: 'select image for closed mouth...',
+    filter: 'image files (*.bmp,*.dib,*.gif,*.png,*.apng,*.jpg,*.jpeg,*.jiff)|*.bmp;*.dib;*.gif;*.png;*.apng;*.jpg;*.jpeg;*.jiff',
+    caption: 'select image for closed mouth...'
  });
  return filename;
 }
@ -279,9 +246,7 @@ function changeImage(evt, el) {

    const filename = loadImage();
    if (!filename) return;
-		const which = globalThis.CURRENT_BUTTON.id
-			.match(/closed|open|blink/g)
-			.join('-');
+    const which = globalThis.CURRENT_BUTTON.id.match(/closed|open|blink/g).join('-');
    document.style.variable(which, `url('${filename}')`);

    globalThis.CURRENT_BUTTON.classList.add('border-default');
@ -289,11 +254,7 @@ function changeImage(evt, el) {
  });
 }

-$(document).on(
-	'click',
-	'.mouth-image:first-of-type, .mouth-image.border-add',
-	changeImage,
-);
+$(document).on('click', '.mouth-image:first-of-type, .mouth-image.border-add', changeImage);

 $(document).on('click', '#change-image', changeImage);

@ -301,9 +262,7 @@ $(document).on('click', '#remove-image', (evt, el) => {
  globalThis.CURRENT_BUTTON.classList.remove('border-default');
  globalThis.CURRENT_BUTTON.classList.add('border-add');

-	const which = globalThis.CURRENT_BUTTON.id
-		.match(/closed|open|blink/g)
-		.join('-');
+  const which = globalThis.CURRENT_BUTTON.id.match(/closed|open|blink/g).join('-');
  document.style.variable(which, null);
 });

--- a/src/modules/vtuber/js/motion.js
+++ b/src/modules/vtuber/js/motion.js
@ -7,7 +7,7 @@ export default {
  shakingMore,
  bouncy,
  excited,
-	nervous,
+  nervous
 };

 function motionless(t) {
@ -25,7 +25,7 @@ function _shake(t, amount, velocity) {
  num2 = num2 * 2 - 1;
  return {
    x: amount * (num * Math.sqrt(1 - (num2 * num2) / 2)),
-		y: amount * (num2 * Math.sqrt(1 - (num * num) / 2)),
+    y: amount * (num2 * Math.sqrt(1 - (num * num) / 2))
  };
 }

--- a/src/modules/vtuber/js/movable_view.js
+++ b/src/modules/vtuber/js/movable_view.js
@ -1,4 +1,5 @@
 if (!Number.prototype.limit) {
+  // eslint-disable-next-line no-extend-native
  Number.prototype.limit = function (min, max) {
    if (this < min) return min;
    if (this > max) return max;
@ -7,8 +8,11 @@ if (!Number.prototype.limit) {
 }

 function movableView(s, screenBound = false) {
-	let xoff; let yoff; let minXY; let maxX; let
-		maxY;
+  let xoff;
+  let yoff;
+  let minXY;
+  let maxX;
+  let maxY;
  let dragging = false;

  function screenBounds() {
@ -38,10 +42,7 @@ function movableView(s, screenBound = false) {

  function onMouseMove(e) {
    if (dragging) {
-			Window.this.move(
-				(e.screenX - xoff).limit(minXY, maxX),
-				(e.screenY - yoff).limit(minXY, maxY),
-			);
+      Window.this.move((e.screenX - xoff).limit(minXY, maxX), (e.screenY - yoff).limit(minXY, maxY));
    }
  }

--- a/src/modules/vtuber/js/perlin_noise.js
+++ b/src/modules/vtuber/js/perlin_noise.js