Settings: Font-Size setting

Added chat font-size setting Separated the sections of settings
fet1sov · Apr 4, 2024 · 6a31591 · 6a31591
1 parent 670e7aa
commit 6a31591
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 11 deletions.
diff --git a/_public/_styles/chat.css b/_public/_styles/chat.css
@@ -1,6 +1,5 @@
 body {
     font-family: "Roboto";
-    font-size: 18px;
     line-height: 18px;
 
     color: #FFFFFF;

diff --git a/_public/_styles/settings.css b/_public/_styles/settings.css
@@ -31,7 +31,7 @@ form {
 }
 
 form :nth-child(n) {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 input {
@@ -90,4 +90,45 @@ form .message {
 form button:hover {
     background-color: var(--primary-color-02);
     color: var(--secondary-color-03);
+}
+
+.settings-section {
+    display: flex;
+    flex-direction: column;
+    color: var(--secondary-color-03);
+}
+
+.settings-section span {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-weight: bold;
+
+    margin-bottom: 0;
+}
+
+.settings-section span.youtube {
+    color: #f70000;
+}
+
+.settings-section span div {
+    margin-left: 5px;
+    margin-bottom: 0;
+}
+
+.settings-section div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    margin-left: 5px;
+}
+
+.settings-section div div {
+    margin-right: 5px;
+}
+
+.settings-section svg {
+    fill: #f70000;
+    margin-bottom: 0;
 }
diff --git a/config/config.json b/config/config.json
@@ -1 +1 @@
-{"channelTag":""}
+{"channelTag":"LofiGirl","fontSize":"24"}
diff --git a/src/app.ts b/src/app.ts
@@ -34,6 +34,7 @@ app.get("/", (request: Request, response: Response) => {
 
 app.post("/", (request: Request, response: Response) => {
   config.setChannelTag(request.body.channelTag);
+  config.setFontSize(request.body.fontSize);
   ytChat.connectChannel(config.getChannelTag());
 
   response.render('settings', {

diff --git a/src/config.ts b/src/config.ts
@@ -2,6 +2,7 @@ import * as fs from 'fs';
 
 interface ConfigData {
     channelTag: string;
+    fontSize: number;
 }
 
 export class Config 
@@ -21,7 +22,10 @@ export class Config
             let rawData : string = fs.readFileSync(configFilePath, 'utf8');
             this.configuration = JSON.parse(rawData);
         } else {
-            this.configuration = { channelTag: "" } as ConfigData;
+            this.configuration = { 
+                channelTag: "",
+                fontSize: 18  
+            } as ConfigData;
         }
     }
 
@@ -46,4 +50,26 @@ export class Config
             }
         });
     }
+
+    /**
+     * Getting the font size for live chat from config
+     * @return Font size
+     */
+    getFontSize() : number {
+        return this.configuration.fontSize;
+    }
+
+    /**
+     * Setting font size for live chat to config
+     * @param fontSize Font size
+     */
+    setFontSize(fontSize : number) : void {
+        this.configuration.fontSize = fontSize;
+
+        fs.writeFile(this.configFilePath, JSON.stringify(this.configuration), function(err) {
+            if (err) {
+                console.log(err);
+            }
+        });
+    }
 }
diff --git a/src/socket.ts b/src/socket.ts
@@ -21,10 +21,5 @@ export class ChatSocket {
             console.log(`\x1b[44m` + `\x1b[37m` + ` INFO ` + `\x1b[40m` + `\x1b[0m` 
             + ` Detected a connection to chat`+ `\x1b[0m`);
         });
-
-        this.io.on("settings", (socket) => {
-            console.log(`\x1b[44m` + `\x1b[37m` + ` INFO ` + `\x1b[40m` + `\x1b[0m` 
-            + ` Detected a connection to chat`+ `\x1b[0m`);
-        });
     }
 }
diff --git a/views/chat.ejs b/views/chat.ejs
@@ -91,7 +91,7 @@
         });
     </script>
 </head>
-<body>
+<body style="font-size: <%= configuration.fontSize %>px;">
     <ul class="messages">
         <li class="yt-message" data-id="0">
             <div class="yt-user-name">Test: </div>

diff --git a/views/settings.ejs b/views/settings.ejs
@@ -14,7 +14,31 @@
             <div class="title-text">Chatur</div>
         </div>
 
-        <input type="text" name="channelTag" value="<%= configuration.channelTag %>" placeholder="Youtube channel tag">
+        <div class="settings-section">
+            <span>
+                <div>Chat</div>
+            </span>
+
+            <div>
+                <div>Font size:</div>
+                <input type="number" name="fontSize" value="<%= configuration.fontSize %>" placeholder="Font size" min="12">
+            </div>
+        </div>
+
+        <div class="settings-section">
+            <span class="youtube">
+                <svg fill="#000000" width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z"></path>
+                </svg>
+                <div>Youtube</div>
+            </span>
+
+            <div>
+                <div>Channel Tag:</div>
+                <input type="text" name="channelTag" value="<%= configuration.channelTag %>" placeholder="Youtube channel tag">
+            </div>
+        </div>
+
         <button type="submit">Set up</button>
 
         <% if (typeof message != "undefined") { %>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"channelTag":""}
		{"channelTag":"LofiGirl","fontSize":"24"}