`; return emoteSpan.outerHTML; }); } }); if (hasChanges) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = text; const parent = textNode.parentNode; while (tempDiv.firstChild) { parent.insertBefore(tempDiv.firstChild, textNode); } parent.removeChild(textNode); } }); } function loadChannelEmotes() { if (channelName) { loadBTTVEmotes(); loadFFZEmotes(); load7TVEmotes(); } } window.addEventListener('onEventReceived', function(obj) { if (obj.detail.listener === 'message') { if (!channelName) { const extractedChannel = extractChannelName(obj.detail.event); if (extractedChannel) { channelName = extractedChannel; loadChannelEmotes(); } } handleMessage(obj.detail.event); } else if (obj.detail.listener === 'widget-button') { if (obj.detail.field === 'testButton') { generateTestMessages(); } } else if (obj.detail.listener === 'event:test') { if (obj.detail.event && obj.detail.event.listener === 'widget-button' && obj.detail.event.field === 'testButton') { generateTestMessages(); } } }); window.addEventListener('onWidgetLoad', function(obj) { fieldData = obj.detail.fieldData; if (obj.detail.channel) { channelName = obj.detail.channel.name || obj.detail.channel; channelId = obj.detail.channel.providerId || obj.detail.channel.id || obj.detail.channel; } else if (obj.detail.room) { channelName = obj.detail.room.name || obj.detail.room; channelId = obj.detail.room.providerId || obj.detail.room.id || obj.detail.room; } else if (obj.detail.user) { channelName = obj.detail.user.name || obj.detail.user; channelId = obj.detail.user.providerId || obj.detail.user.id || obj.detail.user; } applyTheme(fieldData.theme); document.documentElement.style.setProperty('--font-size', fieldData.fontSize); document.documentElement.style.setProperty('--font-family', fieldData.fontFamily); document.documentElement.style.setProperty('--message-spacing', fieldData.messageSpacing + 'px'); document.documentElement.style.setProperty('--border-radius', fieldData.borderRadius + 'px'); document.documentElement.style.setProperty('--padding', fieldData.padding + 'px'); document.documentElement.style.setProperty('--emote-size', fieldData.emoteSize); document.documentElement.style.setProperty('--single-emote-size', fieldData.singleEmoteSize); document.documentElement.style.setProperty('--badge-size', fieldData.badgeSize); document.documentElement.style.setProperty('--fade-in-duration', fieldData.fadeInDuration); if (fieldData.usernameColorMode === 'fixed') { document.documentElement.style.setProperty('--username-color', fieldData.usernameColor); } document.documentElement.style.setProperty('--username-font-weight', fieldData.usernameBold ? 'bold' : 'normal'); document.documentElement.style.setProperty('--username-font-style', fieldData.usernameItalic ? 'italic' : 'normal'); document.documentElement.style.setProperty('--username-text-transform', fieldData.usernameAllCaps ? 'uppercase' : 'none'); const container = document.getElementById('chat-container'); if (fieldData.alignment === 'center') { container.style.alignItems = 'center'; } else if (fieldData.alignment === 'right') { container.style.alignItems = 'flex-end'; } else { container.style.alignItems = 'flex-start'; } const animationSpeeds = { 'slow': '0.5s', 'normal': '0.3s', 'fast': '0.2s' }; document.documentElement.style.setProperty('--animation-speed', animationSpeeds[fieldData.animationSpeed]); let maxWidthValue = fieldData.maxWidth; const style = document.createElement('style'); style.textContent = ` .chat-message { max-width: ${maxWidthValue === 'fit-content' ? '100%' : maxWidthValue}; width: ${maxWidthValue === 'fit-content' ? 'fit-content' : maxWidthValue}; } .message-content.single-emote img, .message-content.single-emote .emote { max-width: none !important; } ${maxWidthValue === '100%' ? ` .message-content { text-align: left; } .message-content.single-emote { justify-content: flex-start; } ` : ''} `; document.head.appendChild(style); loadBTTVEmotes(); if (channelName) { loadChannelEmotes(); } }); function generateTestMessages(customCount) { const count = customCount || fieldData.testMessageCount || 3; const container = document.getElementById('chat-container'); container.innerHTML = ''; for (let i = 0; i < count; i++) { setTimeout(() => { const testMessage = createTestMessage(); handleMessage(testMessage); }, i * 500); } } function createTestMessage() { const username = sampleUsernames[Math.floor(Math.random() * sampleUsernames.length)]; const messageText = sampleMessages[Math.floor(Math.random() * sampleMessages.length)]; const badgeCount = Math.floor(Math.random() * 2) + 1; const badges = []; const badgesObj = {}; const availableBadges = [...sampleBadges]; for (let i = 0; i < badgeCount && availableBadges.length > 0; i++) { const randomIndex = Math.floor(Math.random() * availableBadges.length); const badge = availableBadges.splice(randomIndex, 1)[0]; badges.push({ type: badge.type, version: badge.version, description: badge.description }); badgesObj[badge.type] = badge.version; } const emoteCount = Math.floor(Math.random() * 3); const emotes = []; const testMessage = { displayName: username, username: username.toLowerCase(), text: messageText, message: messageText, badges: badges, badgesObj: badgesObj, displayColor: getRandomColor(), emotes: {} }; if (emoteCount > 0) { let modifiedMessage = messageText; const emotesObj = {}; for (let i = 0; i < emoteCount; i++) { const emote = sampleEmotes[Math.floor(Math.random() * sampleEmotes.length)]; if (!modifiedMessage.includes(emote.name)) { const startPos = modifiedMessage.length + 1; modifiedMessage += ' ' + emote.name; const endPos = modifiedMessage.length - 1; if (!emotesObj[emote.id]) { emotesObj[emote.id] = []; } emotesObj[emote.id].push(`${startPos}-${endPos}`); } } testMessage.text = modifiedMessage; testMessage.message = modifiedMessage; testMessage.emotes = emotesObj; } if (Math.random() < 0.2) { const emote = sampleEmotes[Math.floor(Math.random() * sampleEmotes.length)]; testMessage.text = emote.name; testMessage.message = emote.name; const emotesObj = {}; emotesObj[emote.id] = [`0-${emote.name.length - 1}`]; testMessage.emotes = emotesObj; } return testMessage; } function applyTheme(theme) { const themes = { 'dark': { backgroundColor: 'rgba(0, 0, 0, 0.7)', textColor: '#ffffff' }, 'light': { backgroundColor: 'rgba(255, 255, 255, 0.7)', textColor: '#000000' }, 'custom': { backgroundColor: fieldData.backgroundColor, textColor: fieldData.textColor } }; const selectedTheme = themes[theme] || themes.custom; document.documentElement.style.setProperty('--background-color', selectedTheme.backgroundColor); document.documentElement.style.setProperty('--text-color', selectedTheme.textColor); } let bttvEmotes = {}; let ffzEmotes = {}; let sevenTvEmotes = {}; function loadBTTVEmotes() { fetch('https://api.betterttv.net/3/cached/emotes/global') .then(response => response.json()) .then(data => { data.forEach(emote => { bttvEmotes[emote.code] = { id: emote.id, type: 'bttv' }; }); }) .catch(error => {}); if (channelName) { const channelIdentifier = channelId || channelName; fetch(`https://api.betterttv.net/3/cached/users/twitch/${channelIdentifier}`) .then(response => response.json()) .then(data => { if (data.channelEmotes) { data.channelEmotes.forEach(emote => { bttvEmotes[emote.code] = { id: emote.id, type: 'bttv' }; }); } if (data.sharedEmotes) { data.sharedEmotes.forEach(emote => { bttvEmotes[emote.code] = { id: emote.id, type: 'bttv' }; }); } }) .catch(error => { if (channelId && channelId !== channelName) { fetch(`https://api.betterttv.net/3/cached/users/twitch/${channelName}`) .then(response => response.json()) .then(data => { if (data.channelEmotes) { data.channelEmotes.forEach(emote => { bttvEmotes[emote.code] = { id: emote.id, type: 'bttv' }; }); } if (data.sharedEmotes) { data.sharedEmotes.forEach(emote => { bttvEmotes[emote.code] = { id: emote.id, type: 'bttv' }; }); } }) .catch(fallbackError => {}); } }); } } function loadFFZEmotes() { if (channelName) { fetch(`https://api.frankerfacez.com/v1/room/${channelName}`) .then(response => response.json()) .then(data => { if (data.room && data.room.sets) { Object.values(data.room.sets).forEach(set => { if (set.emoticons) { set.emoticons.forEach(emote => { ffzEmotes[emote.name] = { id: emote.id, type: 'ffz' }; }); } }); } }) .catch(error => {}); } } function load7TVEmotes() { if (channelName) { const channelIdentifier = channelId || channelName; fetch(`https://7tv.io/v3/users/twitch/${channelIdentifier}`) .then(response => response.json()) .then(data => { if (data.emote_set && data.emote_set.emotes) { data.emote_set.emotes.forEach(emote => { sevenTvEmotes[emote.name] = { id: emote.id, type: '7tv' }; }); } }) .catch(error => { if (channelId && channelId !== channelName) { fetch(`https://7tv.io/v3/users/twitch/${channelName}`) .then(response => response.json()) .then(data => { if (data.emote_set && data.emote_set.emotes) { data.emote_set.emotes.forEach(emote => { sevenTvEmotes[emote.name] = { id: emote.id, type: '7tv' }; }); } }) .catch(fallbackError => {}); } }); } } function hexToRgb(hex) { hex = hex.replace('#', ''); const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); return { r, g, b }; } function isOnlyEmote(text, emotes) { if (!emotes || emotes.length !== 1) return false; const emote = emotes[0]; const textWithoutEmote = text.substring(0, emote.start) + text.substring(emote.end + 1); return textWithoutEmote.trim() === ''; } function getUsernameColor(username, color) { const mode = fieldData.usernameColorMode; if (mode === 'fixed') { return fieldData.usernameColor; } else if (mode === 'twitch' && color) { return color; } else if (mode === 'random') { if (!userColors[username]) { userColors[username] = getRandomColor(); } return userColors[username]; } return fieldData.usernameColor; } // Generate URL for emote based on provider and ID with highest resolution function getEmoteUrl(emoteId, emoteType) { let url; switch (emoteType) { case 'bttv': url = `https://cdn.betterttv.net/emote/${emoteId}/3x`; break; case 'ffz': url = `https://cdn.frankerfacez.com/emoticon/${emoteId}/4`; break; case '7tv': url = `https://cdn.7tv.app/emote/${emoteId}/4x.webp`; break; default: // twitch url = `https://static-cdn.jtvnw.net/emoticons/v2/${emoteId}/default/dark/4.0`; } return url; } function getBadgeUrl(badgeType, badgeVersion) { return badgeUrlFormat.replace('{type}', badgeType).replace('{version}', badgeVersion); } function createBadgeElement(badgeType, badgeVersion, description) { const badgeImg = document.createElement('img'); badgeImg.className = 'badge'; badgeImg.alt = badgeType || 'badge'; badgeImg.title = description || badgeType || 'Badge'; let badgeUrl; switch(badgeType) { case 'broadcaster': badgeUrl = 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/3'; break; case 'moderator': badgeUrl = 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3'; break; case 'vip': badgeUrl = 'https://static-cdn.jtvnw.net/badges/v1/b817aba4-fad8-49e2-b88a-7cc744dfa6ec/3'; break; case 'subscriber': badgeUrl = 'https://static-cdn.jtvnw.net/badges/v1/5d9f2208-5dd8-11e7-8513-2ff4adfae661/3'; break; default: badgeUrl = badgeUrlFormat.replace('{type}', badgeType).replace('{version}', badgeVersion); } badgeImg.src = badgeUrl; badgeImg.onerror = function() { this.style.display = 'inline-block'; this.style.width = fieldData.badgeSize || '20px'; this.style.height = fieldData.badgeSize || '20px'; this.style.backgroundColor = '#6441a5'; this.style.borderRadius = '3px'; this.style.verticalAlign = 'middle'; this.style.marginRight = '5px'; this.removeAttribute('src'); }; return badgeImg; } function handleMessage(event) { const container = document.getElementById('chat-container'); const messageDiv = document.createElement('div'); messageDiv.className = 'chat-message'; if (fieldData.alignment === 'right') { messageDiv.style.alignSelf = 'flex-end'; } else if (fieldData.alignment === 'center') { messageDiv.style.alignSelf = 'center'; } else { messageDiv.style.alignSelf = 'flex-start'; } const messageData = event.data || event; const userInfo = document.createElement('div'); userInfo.className = 'user-info'; if (fieldData.showBadges) { const addedBadgeTypes = new Set(); const badges = messageData.badges || (messageData.data && messageData.data.badges) || []; if (badges && badges.length > 0) { badges.forEach(badge => { if (badge && badge.url) { if (badge.type && addedBadgeTypes.has(badge.type)) { return; } const badgeImg = document.createElement('img'); badgeImg.className = 'badge'; badgeImg.src = badge.url; badgeImg.alt = badge.type || 'badge'; badgeImg.title = badge.description || badge.type || 'Badge'; badgeImg.onerror = function() { this.style.display = 'none'; }; userInfo.appendChild(badgeImg); if (badge.type) { addedBadgeTypes.add(badge.type); } } else if (badge && badge.type && badge.version) { if (addedBadgeTypes.has(badge.type)) { return; } const badgeImg = createBadgeElement(badge.type, badge.version, badge.description); userInfo.appendChild(badgeImg); addedBadgeTypes.add(badge.type); } }); } const badgesObj = messageData.badgesObj || (messageData.data && messageData.data.badgesObj); if (badgesObj && typeof badgesObj === 'object') { const badgeCount = Object.keys(badgesObj).length; Object.keys(badgesObj).forEach(badgeType => { if (addedBadgeTypes.has(badgeType)) { return; } const badgeVersion = badgesObj[badgeType]; const badgeImg = createBadgeElement(badgeType, badgeVersion, badgeType); userInfo.appendChild(badgeImg); addedBadgeTypes.add(badgeType); }); } } const username = document.createElement('span'); username.className = 'username'; const displayName = messageData.displayName || messageData.username || messageData.nick || (messageData.data && messageData.data.nick) || (messageData.data && messageData.data.displayName) || 'Unknown'; username.textContent = displayName; const userColor = messageData.displayColor || messageData.color || (messageData.data && messageData.data.displayColor) || (messageData.data && messageData.data.color); const finalColor = getUsernameColor(displayName, userColor); username.style.color = finalColor; if (fieldData.usernameAllCaps) { username.textContent = username.textContent.toUpperCase(); } userInfo.appendChild(username); const messageContent = document.createElement('div'); messageContent.className = 'message-content'; const renderedText = event.renderedText || (messageData.data && messageData.data.renderedText); if (renderedText) { let processedContent = renderedText; processedContent = processedContent.replace( /(https:\/\/static-cdn\.jtvnw\.net\/emoticons\/v2\/([a-zA-Z0-9_-]+)\/default\/dark\/)[0-9.]+/g, '$14.0' ); processedContent = processedContent.replace( /(https:\/\/cdn\.betterttv\.net\/emote\/[a-zA-Z0-9]+\/)[0-9x]+/g, '$13x' ); processedContent = processedContent.replace( /src="(https:\/\/cdn\.7tv\.app\/emote\/[^/]+)\/[^"]+"/g, 'src="$1/4x.webp"' ); processedContent = processedContent.replace( /src="(https:\/\/cdn\.frankerfacez\.com\/emoticon\/[^/]+)\/[^"]+"/g, 'src="$1/4"' ); processedContent = processedContent.replace( /]*)srcset="[^"]*"([^>]*)>/g, '' ); processedContent = processedContent.replace( / { let highestUrl = ''; if (emote.urls) { if (emote.urls['4']) highestUrl = emote.urls['4']; else if (emote.urls['3']) highestUrl = emote.urls['3']; else if (emote.urls['2']) highestUrl = emote.urls['2']; else if (emote.urls['1']) highestUrl = emote.urls['1']; } if (emote.id && emote.start !== undefined && emote.end !== undefined) { emotes.push({ id: emote.id, type: emote.type || 'twitch', start: emote.start, end: emote.end, code: emote.name, url: highestUrl }); } }); } else if (messageData.emotes && typeof messageData.emotes === 'object' && !Array.isArray(messageData.emotes)) { Object.keys(messageData.emotes).forEach(id => { const positions = messageData.emotes[id]; if (Array.isArray(positions)) { positions.forEach(position => { if (typeof position === 'string') { const [start, end] = position.split('-').map(Number); if (!isNaN(start) && !isNaN(end)) { emotes.push({ id: id, type: 'twitch', start: start, end: end }); } } else if (position.start !== undefined && position.end !== undefined) { emotes.push({ id: id, type: 'twitch', start: position.start, end: position.end }); } }); } else if (positions.start !== undefined && positions.end !== undefined) { emotes.push({ id: id, type: 'twitch', start: positions.start, end: positions.end }); } }); } if (messageData.data && messageData.data.emotes && typeof messageData.data.emotes === 'object') { Object.keys(messageData.data.emotes).forEach(id => { const positions = messageData.data.emotes[id]; if (Array.isArray(positions)) { positions.forEach(position => { const [start, end] = position.split('-').map(Number); if (!isNaN(start) && !isNaN(end)) { emotes.push({ id: id, type: 'twitch', start: start, end: end }); } }); } }); } if (messageData.text) { if (Object.keys(bttvEmotes).length > 0) { Object.keys(bttvEmotes).forEach(code => { const emoteInfo = bttvEmotes[code]; let position = 0; let textToSearch = messageData.text; while ((position = textToSearch.indexOf(code, position)) !== -1) { const beforeChar = position === 0 ? ' ' : textToSearch.charAt(position - 1); const afterChar = position + code.length >= textToSearch.length ? ' ' : textToSearch.charAt(position + code.length); if ((beforeChar === ' ' || position === 0) && (afterChar === ' ' || position + code.length === textToSearch.length)) { emotes.push({ id: emoteInfo.id, type: 'bttv', start: position, end: position + code.length - 1, code: code }); } position += code.length; } }); } if (Object.keys(ffzEmotes).length > 0) { Object.keys(ffzEmotes).forEach(code => { const emoteInfo = ffzEmotes[code]; let position = 0; let textToSearch = messageData.text; while ((position = textToSearch.indexOf(code, position)) !== -1) { const beforeChar = position === 0 ? ' ' : textToSearch.charAt(position - 1); const afterChar = position + code.length >= textToSearch.length ? ' ' : textToSearch.charAt(position + code.length); if ((beforeChar === ' ' || position === 0) && (afterChar === ' ' || position + code.length === textToSearch.length)) { emotes.push({ id: emoteInfo.id, type: 'ffz', start: position, end: position + code.length - 1, code: code }); } position += code.length; } }); } if (Object.keys(sevenTvEmotes).length > 0) { Object.keys(sevenTvEmotes).forEach(code => { const emoteInfo = sevenTvEmotes[code]; let position = 0; let textToSearch = messageData.text; while ((position = textToSearch.indexOf(code, position)) !== -1) { const beforeChar = position === 0 ? ' ' : textToSearch.charAt(position - 1); const afterChar = position + code.length >= textToSearch.length ? ' ' : textToSearch.charAt(position + code.length); if ((beforeChar === ' ' || position === 0) && (afterChar === ' ' || position + code.length === textToSearch.length)) { emotes.push({ id: emoteInfo.id, type: '7tv', start: position, end: position + code.length - 1, code: code }); } position += code.length; } }); } } emotes = emotes.sort((a, b) => a.start - b.start); const onlyEmote = isOnlyEmote(messageData.text, emotes); if (emotes.length > 0) { const text = messageData.text; let lastEnd = 0; const messageFragment = document.createDocumentFragment(); for (const emote of emotes) { if (emote.start > lastEnd) { const textBefore = document.createTextNode( text.substring(lastEnd, emote.start) ); messageFragment.appendChild(textBefore); } const emoteImg = document.createElement('img'); emoteImg.classList.add('emote'); if (onlyEmote) { emoteImg.classList.add('single-emote'); } if (emote.url) { emoteImg.src = emote.url; } else { emoteImg.src = getEmoteUrl(emote.id, emote.type); } emoteImg.alt = emote.code || text.substring(emote.start, emote.end + 1); emoteImg.title = emoteImg.alt; emoteImg.style.imageRendering = 'auto'; emoteImg.style.maxWidth = 'none !important'; messageFragment.appendChild(emoteImg); lastEnd = emote.end + 1; } if (lastEnd < text.length) { const textAfter = document.createTextNode( text.substring(lastEnd) ); messageFragment.appendChild(textAfter); } messageContent.appendChild(messageFragment); if (onlyEmote) { messageContent.classList.add('single-emote'); } } else { messageContent.textContent = messageData.text; } } messageDiv.appendChild(userInfo); messageDiv.appendChild(messageContent); container.appendChild(messageDiv); const maxMessages = fieldData.maxMessages || 5; if (container.children.length > maxMessages) { const elementsToRemove = container.children.length - maxMessages; for (let i = 0; i < elementsToRemove; i++) { const oldMessage = container.children[i]; oldMessage.style.opacity = '0'; oldMessage.style.marginTop = '-' + oldMessage.offsetHeight + 'px'; oldMessage.style.transition = 'all 0.2s ease-out'; setTimeout(() => { if (oldMessage.parentNode === container) { container.removeChild(oldMessage); } }, 250); } } const timeout = fieldData.messageTimeout * 1000 || 60000; setTimeout(() => { messageDiv.style.opacity = '0'; setTimeout(() => { messageDiv.remove(); }, 300); }, timeout); }

Simple Chat Overlay 1.1.3