From d57dc414fe3f0e10b6536941c4a6f2924ccd60e3 Mon Sep 17 00:00:00 2001 From: Killa Fish <61081555+Fiszh@users.noreply.github.com> Date: Thu, 14 Nov 2024 23:24:36 +0100 Subject: [PATCH] Replies, Display and Autocompletion 1. Replies now show twemojis and third party emotes 2. Stream info no longer has a huge margin 3. Autocompletion no longer does R) if the last character is " ", 4. Chat input now scrolls with the autocompletion 6. Redeems with . in their names should no longer display as a link 7. Dark reader no longer works --- src/channel/index.js | 28 +++++++++++++++++++++------- src/events.js | 4 ++-- src/landingPage.js | 6 +++++- src/settings.js | 10 ++++++++++ styles/styles.css | 6 +++--- 5 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/channel/index.js b/src/channel/index.js index 76d13f0..5f73b92 100644 --- a/src/channel/index.js +++ b/src/channel/index.js @@ -549,7 +549,12 @@ async function replaceWithEmotes(inputString, TTVMessageEmoteData, userstate, ch `; } else if (lastEmoteWrapper && lastEmote && foundEmote.flags && foundEmote.flags === 256) { willReturn = false; + emoteStyle = `style="height: ${desiredHeight}px; position: absolute;"`; + + const currentTooltipName = lastEmoteWrapper.getAttribute('tooltip-name') || ''; + lastEmoteWrapper.setAttribute('tooltip-name', `${currentTooltipName}, ${foundEmote.name}`.trim()); + const aTag = lastEmoteWrapper.querySelector('a'); aTag.innerHTML += `${foundEmote.name}`; @@ -596,12 +601,16 @@ async function replaceWithEmotes(inputString, TTVMessageEmoteData, userstate, ch lastEmote = false; - const twemojiHTML = twemoji.parse(part, { - base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/', - folder: 'svg', - ext: '.svg', - className: 'twemoji' - }); + let twemojiHTML = part + + if (part) { + twemojiHTML = twemoji.parse(part, { + base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/', + folder: 'svg', + ext: '.svg', + className: 'twemoji' + }); + } replacedParts.push(twemojiHTML); } @@ -2883,7 +2892,7 @@ document.addEventListener('keydown', async function (event) { textContent = textContent.trimEnd(); } - if (textContent && textContent !== '' && textContent !== ' ') { + if (textContent && textContent !== '' && textContent !== ' ' && !textContent.endsWith(" ")) { let userPersonal_emotes = []; const userData = TTVUsersData.find(user => user.name === `@${tmiUsername}`); @@ -2944,6 +2953,9 @@ document.addEventListener('keydown', async function (event) { chatInput.value = modifiedText + " " EmoteI += 1 } + + chatInput.selectionStart = chatInput.selectionEnd = chatInput.value.length; + chatInput.scrollLeft = chatInput.scrollWidth; } else { EmoteI = 0 TabEmotes = []; @@ -3175,6 +3187,8 @@ client.on("redeem", (channel, userstate, message) => { } if (message !== 'highlighted-message') { + userstate["no-link"] = true; + handleMessage(userstate, message, channel) } else { TTVUserRedeems[`${username}`] = '#00dbdb'; diff --git a/src/events.js b/src/events.js index 082fb1c..f6fc1d9 100644 --- a/src/events.js +++ b/src/events.js @@ -9,14 +9,14 @@ if (document.querySelector('#followed')) { document.querySelector('.chat').style.transition = 'width 0.3s ease'; document.querySelector('#twitch-embed').style.transition = 'height 0.3s ease'; document.querySelector('.chat').style.width = '31.7%'; - document.querySelector('#twitch-embed').style.height = '79.8%'; + document.querySelector('#twitch-embed').style.height = '86%'; }); document.querySelector('#followed').addEventListener('mouseout', () => { document.querySelector('.chat').style.transition = 'width 0.3s ease'; document.querySelector('#twitch-embed').style.transition = 'height 0.3s ease'; document.querySelector('.chat').style.width = '30%'; - document.querySelector('#twitch-embed').style.height = '85.8%'; + document.querySelector('#twitch-embed').style.height = '91%'; }); } diff --git a/src/landingPage.js b/src/landingPage.js index 8cc81f2..0ec970f 100644 --- a/src/landingPage.js +++ b/src/landingPage.js @@ -66,6 +66,10 @@ async function loadAndReplaceHTML(url) { const bodyElements = Array.from(doc.body.children); await loadBodyElements(bodyElements); + const metaTag = document.createElement('meta'); + metaTag.name = 'darkreader-lock'; + document.head.appendChild(metaTag); + console.log("HTML loaded and replaced successfully."); } catch (error) { console.error('Error loading HTML:', error); @@ -175,7 +179,7 @@ function initializeTwitchPlayer(retryCount = 3, delay = 1000) { }); } catch (error) { console.error("Error initializing Twitch Player:", error); - + const twitchEmbed = document.getElementById('twitch-embed'); twitchEmbed.innerHTML = "Refresh if you don't see the player." diff --git a/src/settings.js b/src/settings.js index d23a230..df29844 100644 --- a/src/settings.js +++ b/src/settings.js @@ -32,6 +32,12 @@ const configuration = { value: true, param: 'paintShadows' }, + follower_list: { + name: 'Always display followed channels (not working)', + type: 'boolean', + value: false, + param: 'channelFollow' + }, section_1: { name: "Chat", type: 'section' @@ -166,6 +172,10 @@ function displaySettings() { const checkbox = document.getElementById(`toggle-${i}`); checkbox.addEventListener('change', function () { + if (param === "channelFollow") { + displayFollowlist(checkbox.checked) + } + userSettings[param] = checkbox.checked; saveSettings(); }); diff --git a/styles/styles.css b/styles/styles.css index 06c05f9..5c8ea19 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -32,7 +32,7 @@ body { #twitch-embed { width: 100%; - height: 85.8%; + height: 91%; transition: transform 0.3s ease; } @@ -42,9 +42,9 @@ body { align-items: flex-start; width: 100%; color: #fff; - padding: 10px; + padding: 3px; box-sizing: border-box; - margin-top: 10px; + margin-top: 1px; } .stream-title,