Add files via upload

css/settings.css

@@ -286,6 +286,17 @@ a { color: #ffcc00; }
     background-color: #000 !important;
 }
 
+#font-value {
+    display: inline-block;
+    font-style: normal;
+    font-size: 14px;
+    width: 100%;
+    padding: 5px;
+    background: #121212;
+    text-align: center;
+    border-radius: 100px;
+}
+
 
 footer {
     position: sticky;

index.html

@@ -37,6 +37,15 @@
 						<option value="es">Spanish</option>
 					</select>
 				</div>
+				
+				<div class="setting slider">
+					<label>Chat Font Size<br><small>Changes ChatRD's font size</small></label>
+					<label>
+						<input type="range" id="font-slider" name="chatFontSize" min="0.1" max="2" step="0.1" value="1">
+						<br><em id="font-value">100%</em>
+					</label>
+				</div>
+
 				<div class="setting"><label>Events Mockup<br><small>Will show random fake events when Streamer.bot is <strong><u>offline</u></strong>.</small></label></label><label class="switch"><input type="checkbox" name="eventsMockup" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Horizontal Direction<br><small>Chat/Events will be horizontal.</small></label></label><label class="switch"><input type="checkbox" name="chatHorizontal"><span class="slider"></span></label></div>
 				<div class="setting"><label>Platforms<br><small>Shows the platforms icons.</small></label></label><label class="switch"><input type="checkbox" name="showPlatform" checked><span class="slider"></span></label></div>

js/app.js

@@ -6,7 +6,10 @@ const streamerBotServerAddress      = getURLParam("streamerBotServerAddress", "1
 const streamerBotServerPort         = getURLParam("streamerBotServerPort", "8080");
 let streamerBotConnected            = false;
 const chatThreshhold                = 50;
+
 const chatContainer                 = document.querySelector('#chat');
+const chatFontSize                  = getURLParam("chatFontSize", 1);
+
 const currentLang                   = lang[getURLParam("language", 'ptbr')]; 
 const eventsMockup                  = getURLParam("eventsMockup", true); 
 const chatHorizontal                = getURLParam("chatHorizontal", false); 
@@ -25,6 +28,8 @@ const userColors = new Map();
 
 const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || [];
 
+chatContainer.style.zoom = chatFontSize;
+
 /* ----------------------- */
 /*          START          */
 /* ----------------------- */

js/settings.js

@@ -9,11 +9,16 @@ async function saveSettingsToLocalStorage() {
 	
 	const hiddenField = document.querySelector("textarea[name=youTubeCustomEmotes]:not(.avoid)");
 
+	const ranges = document.querySelectorAll("input[type=range]:not(.avoid)");
+
 	const settings = {};
 
 	checkboxes.forEach((checkbox) => {
 		settings[checkbox.name] = checkbox.checked;
 	});
+	ranges.forEach((range) => {
+		settings[range.name] = range.value;
+	});
 	textfields.forEach((textfield) => {
 		settings[textfield.name] = textfield.value;
 	});
@@ -45,18 +50,24 @@ async function loadSettingsFromLocalStorage() {
 	if (!saved) return;
 
 	const settings = JSON.parse(saved);
+	console.log(settings);
 
 	Object.keys(settings).forEach((key) => {
 		const input = document.querySelector(`[name="${key}"]`);
 		if (input) {
 			if (input.type === "checkbox") {
 				input.checked = settings[key];
-			} else {
+			}
+			else {
 				input.value = settings[key];
 			}
 		}
 	});
 
+
+	document.querySelector('#font-value').textContent = Math.floor(document.querySelector('#font-slider').value * 100) + '%';
+
+
 	var streamerBotServerAddress = document.querySelector('input[type=text][name=streamerBotServerAddress]').value;
 	var streamerBotServerPort = document.querySelector('input[type=text][name=streamerBotServerPort]').value;
 
@@ -101,6 +112,8 @@ async function pushChangeEvents() {
 	const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)");
 	const selects = document.querySelectorAll("select:not(.avoid)");
 
+	const ranges = document.querySelectorAll("input[type=range]:not(.avoid)");
+
 	checkboxes.forEach((checkbox) => {
 		checkbox.addEventListener('change', () => {
 			generateUrl();
@@ -131,6 +144,17 @@ async function pushChangeEvents() {
 			saveSettingsToLocalStorage();
 		});
 	});
+
+	ranges.forEach((range) => {
+		range.addEventListener('change', () => {
+			generateUrl();
+			saveSettingsToLocalStorage();
+		});
+	});
+
+	document.querySelector('#font-slider').addEventListener('input', function () {
+		document.querySelector('#font-value').textContent = Math.floor(this.value * 100) + '%';
+	});
 }
 
 
@@ -149,11 +173,16 @@ async function generateUrl() {
 	const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)");
 	const selects = document.querySelectorAll("select:not(.avoid)");
 
+	const ranges = document.querySelectorAll("input[type=range]:not(.avoid)");
+
 	const params = new URLSearchParams();
 	
 	selects.forEach((select) => {
 		params.set(select.name, select.value);
 	});
+	ranges.forEach((range) => {
+		params.set(range.name, range.value);
+	});
 	checkboxes.forEach((checkbox) => {
 		params.set(checkbox.name, checkbox.checked);
 	});