diff --git a/css/settings.css b/css/settings.css index 11f6bc7..55b94b3 100644 --- a/css/settings.css +++ b/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; diff --git a/index.html b/index.html index 3b38a18..06a4e0e 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,15 @@ + +
+ diff --git a/js/app.js b/js/app.js index 8f18053..d7b20a1 100644 --- a/js/app.js +++ b/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 */ /* ----------------------- */ @@ -103,7 +108,7 @@ async function addMessageToChat(userID, messageID, platform, data) { }, 1000); }, Math.floor(hideAfter * 1000)); } - + removeExtraChatMessages(); } @@ -291,4 +296,4 @@ const notifySuccess = (success) => { function escapeRegex(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); -} +} \ No newline at end of file diff --git a/js/settings.js b/js/settings.js index 3b33f68..200baf2 100644 --- a/js/settings.js +++ b/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); });