[mirotlaksfu] - add green theme + autosave

public/css/Room.css

@@ -50,6 +50,7 @@
     --box-shadow: 0px 8px 16px 0px rgb(0 0 0);
     --btns-hover-scale: scale(1.1);
     --settings-bg: radial-gradient(#393939, #000000);
+    --btns-bg-color: rgba(0, 0, 0, 0.7);
     /* buttons bar horizontal */
     --btns-top: 50%;
     --btns-right: 0%;
@@ -191,7 +192,7 @@ body {
     font-size: 1.2rem;
     padding: 10px;
     transition: all 0.3s ease-in-out;
-    background: rgba(0, 0, 0, 0.7);
+    background: var(--btns-bg-color);
     border-radius: 10px;
     border: var(--border);
     /* box-shadow: var(--box-shadow); */

public/js/LocalStorage.js

@@ -67,4 +67,12 @@ class LocalStorage {
     getItemLocalStorage(key) {
         localStorage.getItem(key);
     }
+
+    setObjectLocalStorage(name, object) {
+        localStorage.setItem(name, JSON.stringify(object));
+    }
+
+    getObjectLocalStorage(name) {
+        return JSON.parse(localStorage.getItem(name));
+    }
 }

public/js/Room.js

@@ -53,12 +53,18 @@ const wbHeight = 600;
 const swalImageUrl = '../images/pricing-illustration.svg';
 
 const lS = new LocalStorage();
+const localStorageSettings = lS.getObjectLocalStorage('MIROTALK_SFU_SETTINGS');
+const lsSettings = localStorageSettings
+    ? localStorageSettings
+    : {
+          theme: 'dark',
+          //...
+      };
 
 // ####################################################
 // DYNAMIC SETTINGS
 // ####################################################
 
-let currentTheme = 'dark';
 let swalBackground = 'radial-gradient(#393939, #000000)'; //'rgba(0, 0, 0, 0.7)';
 
 let rc = null;
@@ -122,6 +128,7 @@ let initStream = null;
 // ####################################################
 
 function initClient() {
+    setTheme(lsSettings.theme);
     if (!DetectRTC.isMobileDevice) {
         setTippy('shareButton', 'Share room', 'right');
         setTippy('hideMeButton', 'Toggle hide me', 'right');
@@ -731,7 +738,6 @@ function joinRoom(peer_name, room_id) {
 }
 
 function roomIsReady() {
-    setTheme('dark');
     BUTTONS.main.exitButton && show(exitButton);
     BUTTONS.main.shareButton && show(shareButton);
     BUTTONS.main.hideMeButton && show(hideMeButton);
@@ -2273,23 +2279,44 @@ function setTheme(theme) {
             swalBackground = 'radial-gradient(#393939, #000000)';
             document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#393939, #000000)');
             document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#393939, #000000)');
+            document.documentElement.style.setProperty('--left-msg-bg', '#252d31');
+            document.documentElement.style.setProperty('--right-msg-bg', '#056162');
             document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#393939, #000000)');
             document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#393939, #000000)');
+            document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
             document.body.style.background = 'radial-gradient(#393939, #000000)';
+            selectTheme.selectedIndex = 0;
             break;
         case 'grey':
             swalBackground = 'radial-gradient(#666, #333)';
             document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#666, #333)');
             document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#666, #333)');
+            document.documentElement.style.setProperty('--left-msg-bg', '#252d31');
+            document.documentElement.style.setProperty('--right-msg-bg', '#056162');
             document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#666, #333)');
             document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#797979, #000)');
+            document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
             document.body.style.background = 'radial-gradient(#666, #333)';
+            selectTheme.selectedIndex = 1;
+            break;
+        case 'green':
+            swalBackground = 'radial-gradient(#003934, #001E1A)';
+            document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#003934, #001E1A)');
+            document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#003934, #001E1A)');
+            document.documentElement.style.setProperty('--left-msg-bg', '#003934');
+            document.documentElement.style.setProperty('--right-msg-bg', '#001E1A');
+            document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#003934, #001E1A)');
+            document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#003934, #001E1A)');
+            document.documentElement.style.setProperty('--btns-bg-color', '#001E1A');
+            document.body.style.background = 'radial-gradient(#003934, #001E1A)';
+            selectTheme.selectedIndex = 2;
             break;
         //...
     }
-    currentTheme = theme;
+    lsSettings.theme = theme;
+    lS.setObjectLocalStorage('MIROTALK_SFU_SETTINGS', lsSettings);
     wbIsBgTransparent = false;
-    rc.isChatBgTransparent = false;
+    if (rc) rc.isChatBgTransparent = false;
 }
 
 // ####################################################

public/js/RoomClient.js

@@ -3102,7 +3102,7 @@ class RoomClient {
         if (this.isChatBgTransparent) {
             document.documentElement.style.setProperty('--msger-bg', 'rgba(0, 0, 0, 0.100)');
         } else {
-            setTheme(currentTheme);
+            setTheme(lsSettings.theme);
         }
     }
 

public/views/Room.html

@@ -329,6 +329,7 @@ access to use this app.
                     <select id="selectTheme" class="form-select text-light bg-dark">
                         <option value="dark">⚫ &nbsp;Dark</option>
                         <option value="grey">⚪ &nbsp;Grey</option>
+                        <option value="green">🟢 &nbsp;Green</option>
                     </select>
                     <br />
                     <p>Buttons bar:</p>