feat(OBS): Edit port and password (#238)

app/static/locales/en/app.json

@@ -68,7 +68,8 @@
     "global-shortcut-reserved": "This shortcut is reserved by the system!",
     "type-shortcut-here": "Type shortcut here...",
     "add-event": "Add event",
-    "confirm-quit": "Do you really want to leave Marv?"
+    "confirm-quit": "Do you really want to leave Marv?",
+    "obs-settings": "OBS settings"
   },
   "words": {
     "settings": "settings",
@@ -163,7 +164,9 @@
     "and": "and",
     "or": "or",
     "source": "source",
-    "test": "test"
+    "test": "test",
+    "port": "port",
+    "password": "password"
   },
   "obs": {
     "scene-list": "OBS | Scene list",

app/static/locales/es/app.json

@@ -68,7 +68,8 @@
     "global-shortcut-reserved": "Este acceso directo está reservado por el sistema!",
     "type-shortcut-here": "Escriba el acceso directo aquí...",
     "add-event": "Añadir evento",
-    "confirm-quit": "¿De verdad quieres dejar Marv?"
+    "confirm-quit": "¿De verdad quieres dejar Marv?",
+    "obs-settings": "OBS settings"
   },
   "words": {
     "settings": "opciones",
@@ -162,7 +163,9 @@
     "and": "and",
     "or": "or",
     "source": "fuente",
-    "test": "test"
+    "test": "test",
+    "port": "puerto",
+    "password": "contraseña"
   },
   "obs": {
     "scene-list": "OBS | Lista de escenas",

app/static/locales/fr/app.json

@@ -68,7 +68,8 @@
     "global-shortcut-reserved": "Ce raccourci est réservé par le système!",
     "type-shortcut-here": "Tapez le raccourci ici...",
     "add-event": "Ajouter un évènement",
-    "confirm-quit": "Voulez vous vraiment quitter Marv ?"
+    "confirm-quit": "Voulez vous vraiment quitter Marv ?",
+    "obs-settings": "OBS configuration"
   },
   "words": {
     "settings": "options",
@@ -163,7 +164,9 @@
     "and": "et",
     "or": "ou",
     "source": "source",
-    "test": "test"
+    "test": "test",
+    "port": "port",
+    "password": "mot de passe"
   },
   "obs": {
     "scene-list": "OBS | Liste des scènes",

front-src/client/components/Dashboard/Drawer.svelte

@@ -5,6 +5,7 @@
   import { drawer, hide } from "@/stores/drawer";
   import clickoutside from "@/libs/svelte/click-outside";
   import HelpLinks from "@/components/App/HelpLinks.svelte";
+  import OBSSettings from "@/components/OBS/SettingsModal.svelte";
   import OpenOnStartup from "@/components/App/OpenOnStartup.svelte";
   import LanguageSelect from "@/components/App/LanguageSelect.svelte";
   import OBSConnectAtStartup from "@/components/OBS/ConnectAtStartup.svelte";
@@ -21,14 +22,15 @@
     style="top:{top}px; max-width:300px;"
     class="absolute z-50 right-0 bottom-0 flex flex-col bg-dark shadow overflow-y-auto"
   >
+    <QuitButton />
     <LanguageSelect />
+    <OBSSettings />
     <div class="flex flex-col divide-y divide-gray-800 divide-opacity-50">
       <OpenOnStartup />
       <OBSConnectAtStartup />
       <TwitchConnectAtStartup />
       <CheckUpdateCheckbox />
     </div>
-    <QuitButton />
     <HelpLinks />
     <div class="flex-auto"></div>
     <Donate />

front-src/client/components/OBS/SettingsModal.svelte

@@ -0,0 +1,56 @@
+<script>
+  import api from "@/api/obs";
+  import { _ } from "@/libs/i18next";
+  import { store } from "@/stores/obs";
+  import Input from "@/components/UI/Input.svelte";
+  import Modal from "@/components/UI/Modal.svelte";
+  import Button from "@/components/UI/Button.svelte";
+
+  let opened = false;
+  let title = _("sentences.obs-settings");
+
+  function openModal() {
+    opened = true;
+  }
+
+  function closeModal() {
+    opened = false;
+  }
+
+  function save() {
+    api.setSetting("port", $store.port);
+    api.setSetting("password", $store.password);
+    closeModal();
+  }
+
+  function update(key, { target }) {
+    $store[key] = target.value;
+  }
+</script>
+
+<Button class="bg-secondary" on:click="{openModal}">{title}</Button>
+
+<Modal on:close title="{title}" opened="{opened}">
+  <div class="p-5">
+    <Input
+      value="{$store.port}"
+      label="{_('words.port')}"
+      on:change="{update.bind(null, 'port')}"
+    />
+    <Input
+      type="password"
+      value="{$store.password}"
+      label="{_('words.password')}"
+      on:change="{update.bind(null, 'password')}"
+    />
+  </div>
+
+  <div class="p-5 pt-0 flex space-x-2">
+    <Button on:click="{save}" class="flex-auto justify-center bg-green-600">
+      {_('words.save')}
+    </Button>
+    <Button on:click="{closeModal}" class="flex-auto justify-center bg-red-600">
+      {_('words.cancel')}
+    </Button>
+  </div>
+</Modal>