Font size options

web/static/css/chat.css

@@ -147,6 +147,20 @@ body {
     min-height: 150px;
 }
 
+/* User configurable font size increases */
+#chatHistory.x1 {
+    font-size: large;
+}
+#chatHistory.x2 {
+    font-size: x-large;
+}
+#chatHistory.x3 {
+    font-size: xx-large;
+}
+#chatHistory.x4 {
+    font-size: 64pt;
+}
+
 /*******************
  * Video Feeds CSS *
  *******************/

web/static/js/BareRTC.js

@@ -37,6 +37,13 @@ const app = Vue.createApp({
                 channels: PublicChannels,
                 website: WebsiteURL,
                 permitNSFW: PermitNSFW,
+                fontSizeClasses: [
+                    [ "", "Default size" ],
+                    [ "x1", "50% larger chat room text" ],
+                    [ "x2", "2x larger chat room text" ],
+                    [ "x3", "3x larger chat room text" ],
+                    [ "x4", "4x larger chat room text" ],
+                ],
                 sounds: {
                     available: SoundEffects,
                     settings: DefaultSounds,
@@ -121,6 +128,7 @@ const app = Vue.createApp({
             },
             historyScrollbox: null,
             autoscroll: true, // scroll to bottom on new messages
+            fontSizeClass: "", // font size magnification
             DMs: {},
 
             // Responsive CSS controls for mobile.
@@ -157,6 +165,7 @@ const app = Vue.createApp({
     },
     mounted() {
         this.setupSounds();
+        this.setupConfig(); // localSettings persisted settings
 
         this.webcam.elem = document.querySelector("#localVideo");
         this.historyScrollbox = document.querySelector("#chatHistory");
@@ -216,6 +225,10 @@ const app = Vue.createApp({
                 node.style.height = null;
             });
         },
+        fontSizeClass() {
+            // Store the setting persistently.
+            localStorage.fontSizeClass = this.fontSizeClass;
+        },
     },
     computed: {
         chatHistory() {
@@ -262,6 +275,13 @@ const app = Vue.createApp({
         },
     },
     methods: {
+        // Load user prefs from localStorage, called on startup
+        setupConfig() {
+            if (localStorage.fontSizeClass != undefined) {
+                this.fontSizeClass = localStorage.fontSizeClass;
+            }
+        },
+
         signIn() {
             this.loginModal.visible = false;
             this.dial();

web/templates/chat.html

@@ -93,6 +93,27 @@
                         </div>
                     </div>
 
+                    <div class="field is-horizontal">
+                        <div class="field-label is-normal">
+                            <label class="label">Text size</label>
+                        </div>
+                        <div class="field-body">
+                            <div class="field">
+                                <div class="control">
+                                    <div class="select is-fullwidth">
+                                        <select v-model="fontSizeClass">
+                                            <option v-for="s in config.fontSizeClasses"
+                                                v-bind:key="s[0]"
+                                                :value="s[0]">
+                                                [[ s[1] ]]
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <h3 class="subtitle">Sounds</h3>
 
                     <div class="field is-horizontal">
@@ -542,7 +563,7 @@
                     -->
 
                 </div>
-                <div class="card-content" id="chatHistory">
+                <div class="card-content" id="chatHistory" :class="fontSizeClass">
 
                     <!-- No history? -->
                     <div v-if="chatHistory.length === 0">