$username$message
857 | var chatLine = document.createElement('div'),
858 | chatTimestamp = document.createElement('span'),
859 | chatName = document.createElement('span'),
860 | chatMessage = document.createElement('span');
861 |
862 | chatTimestamp.className = 'timestamp';
863 | chatTimestamp.dataset.timestamp = userstate['tmi-sent-ts'] || Date.now();
864 | updateTimestamp(chatTimestamp);
865 | chatLine.appendChild(chatTimestamp);
866 | chatName.className = 'chat-user';
867 | if (userstate.badges?.vip) {
868 | chatName.classList.add('vip');
869 | }
870 | if (userstate.badges?.admin) {
871 | chatName.classList.add('admin');
872 | }
873 | if (userstate.badges?.staff) {
874 | chatName.classList.add('staff');
875 | }
876 | if (userstate.mod) {
877 | chatName.classList.add('moderator');
878 | }
879 | if (userstate['message-type'] == 'action') {
880 | chatName.classList.add('action');
881 | }
882 | chatName.textContent = userstate['display-name'] || userstate.username;
883 | if (userstate['message-type'] == 'announcement') {
884 | chatName.textContent = '📢 ' + chatName.textContent;
885 | }
886 | if (chatName.textContent.toLowerCase() == removeHash(client.channels[0]).toLowerCase()) {
887 | chatLine.className = 'highlight channel';
888 | }
889 | chatMessage.innerHTML = formatMessage(message, userstate.emotes);
890 | chatMessage.id = userstate.id;
891 | if (userstate['user-id']) {
892 | chatMessage.dataset.user = userstate['user-id'];
893 | }
894 |
895 | if (highlightUsers.indexOf(chatName.textContent.toLowerCase()) != -1) {
896 | chatLine.className = 'highlight';
897 | }
898 | if (highlightKeyphrases.find((phrase) => message.toLowerCase().indexOf(phrase) != -1)) {
899 | chatLine.className = 'highlight';
900 | }
901 |
902 | chatLine.appendChild(chatName);
903 | chatLine.appendChild(chatMessage);
904 |
905 | return chatLine;
906 | }
907 |
908 | function addNotice(message) {
909 | var chatLine = document.createElement('div');
910 | chatLine.textContent = message;
911 | chatLine.className = 'notice';
912 | addMessage(chatLine);
913 | }
914 |
915 | function addMessage(chatLine, bypass) {
916 | if (chatLine.className != 'notice' && !bypass && Settings.get('enable-chat-delay') && Settings.get('chat-delay') != 0) {
917 | chatLine.dataset.timestamp = Date.now();
918 | delayQueue.push(chatLine);
919 | return;
920 | }
921 | ui.chat.body.appendChild(chatLine);
922 | // Calculate height for smooth scrolling
923 | scrollReference = scrollDistance += chatLine.scrollHeight;
924 | if (!Settings.get('new-messages-on-top') && !Settings.get('smooth-scroll')) {
925 | ui.chat.container.scrollTop = ui.chat.container.scrollHeight - window.innerHeight;
926 | }
927 |
928 | // Check whether we can remove some of the oldest messages
929 | while (chat.childNodes.length > 2 && ui.chat.body.scrollHeight - (window.innerHeight + (Settings.get('smooth-scroll') ? scrollDistance : 0)) > ui.chat.body.firstChild.scrollHeight + ui.chat.body.childNodes[1].scrollHeight) {
930 | // Always remove two elements at the same time to prevent switching the odd and even rows
931 | ui.chat.body.firstChild.remove();
932 | ui.chat.body.firstChild.remove();
933 | }
934 | }
935 |
936 | function deleteMessage(messageId) {
937 | var message = document.getElementById(messageId);
938 | if (message == null) {
939 | var messageToDelete = messageQueue.find(entry => entry[1].id == messageId);
940 | if (messageToDelete) {
941 | messageToDelete[2] = '') == -1) { 1017 | text.push('
'); 1018 | } 1019 | text.push(`
') == -1) { 1026 | text.push('
'); 1027 | } 1028 | text.push(`
`);
1029 | }
1030 | }
1031 | if (Settings.get('unfurl-twitter') && (match[3] == 'twitter.com/' || match[3] == 'x.com/') && match[4] != undefined) {
1032 | var twitter = /^https?:\/\/(www\.)?x\.com.+\/([0-9]+)$/gm.exec(match[0]);
1033 | if (twitter) {
1034 | if (text.indexOf('') == -1) { 1035 | text.push('
'); 1036 | } 1037 | text.push(``); 1038 | } 1039 | } 1040 | if (Settings.get('shorten-urls')) { 1041 | if (path.length < 25) { 1042 | urlText = match[3] + path; 1043 | } else { 1044 | urlText = match[3] + ' … '; 1045 | if (path.lastIndexOf('/') == -1) { 1046 | urlText += path.slice(-7); // No directory structure in the URL 1047 | } else { 1048 | urlText += path.substring(path.lastIndexOf('/')).slice(-10); // Show last directory if it is not too long 1049 | } 1050 | } 1051 | } 1052 | var replacement = Settings.get('format-urls') ? `${urlText}` : urlText; 1053 | replaceText(text, replacement, match.index, match.index + match[0].length - 1); 1054 | } 1055 | return text; 1056 | } 1057 | 1058 | function flushMessageQueue() { 1059 | messageQueue.forEach((args) => processChat.apply(this, args)); 1060 | messageQueue = []; 1061 | } 1062 | 1063 | function flushDelayQueue() { 1064 | delayQueue.forEach((chatLine) => addMessage(chatLine, true)); 1065 | delayQueue = []; 1066 | } 1067 | 1068 | function createStylePreview(style) { 1069 | var styleContainer = document.createElement('div'); 1070 | styleContainer.className = 'style-preview'; 1071 | var stylePreview = ui.settings.style.custom.preview.cloneNode(true); 1072 | stylePreview.removeAttribute('id'); 1073 | stylePreview.classList.remove('hidden'); 1074 | if (style.name == Settings.get('style-preset')) { 1075 | styleContainer.classList.add('active'); 1076 | Object.keys(style).filter(key => key != 'name').forEach(key => { 1077 | document.body.style.setProperty(`--${key}-color`, (style.name == 'custom' ? Settings.get(`${key}-color`) : style[key])); 1078 | if (['channel', 'notice', 'highlight'].indexOf(key) != -1) { 1079 | document.body.style.setProperty(`--${key}-background-color`, (style.name == 'custom' ? Settings.get(`${key}-color`) : style[key]) + '50'); 1080 | } 1081 | }); 1082 | } 1083 | styleContainer.addEventListener('click', () => { 1084 | Array.from(ui.settings.style.custom.container.querySelectorAll('.style-preview')).forEach(preview => preview.classList.remove('active')); 1085 | styleContainer.classList.add('active'); 1086 | Settings.set('style-preset', style.name); 1087 | ui.settings.style.custom.selector.classList.toggle('hidden', style.name != 'custom'); 1088 | ui.settings.style.custom.exchange.classList.toggle('hidden', style.name != 'custom'); 1089 | Object.keys(style).filter(key => key != 'name').forEach(key => { 1090 | document.body.style.setProperty(`--${key}-color`, (style.name == 'custom' ? Settings.get(`${key}-color`) : style[key])); 1091 | if (['channel', 'notice', 'highlight'].indexOf(key) != -1) { 1092 | document.body.style.setProperty(`--${key}-background-color`, (style.name == 'custom' ? Settings.get(`${key}-color`) : style[key]) + '50'); 1093 | } 1094 | }); 1095 | }); 1096 | Object.keys(style).forEach(key => stylePreview.style.setProperty(`--style-${key}`, style[key])); 1097 | ['channel', 'notice', 'highlight'].forEach(key => stylePreview.style.setProperty(`--style-${key}-background`, style[key] + '50')); 1098 | styleContainer.textContent = style.name; 1099 | styleContainer.appendChild(stylePreview); 1100 | ui.settings.style.custom.container.appendChild(styleContainer); 1101 | return stylePreview; 1102 | } 1103 | 1104 | function updateEmoji(field) { 1105 | let needle = Settings.get('animate-emoji') == 'yes' ? '/static/dark/' : '/default/dark/'; 1106 | let replacement = Settings.get('animate-emoji') == 'yes' ? '/default/dark/' : '/static/dark/'; 1107 | field.style.backgroundImage = field.style.backgroundImage.replace(needle, replacement); 1108 | } 1109 | 1110 | function updateTimestamp(field) { 1111 | var formats = { 1112 | 'short24': (now) => (new Date(now)).toLocaleTimeString('en-GB').replace(/:\d\d$/, ''), 1113 | 'long24': (now) => (new Date(now)).toLocaleTimeString('en-GB'), 1114 | 'short12': (now) => (new Date(now)).toLocaleTimeString('en-US').replace(/:\d\d /, ' ').replace(/^(\d):/, '0$1:'), 1115 | 'long12': (now) => (new Date(now)).toLocaleTimeString('en-US').replace(/^(\d):/, '0$1:'), 1116 | 'short': (now) => (new Date(now)).toLocaleTimeString('en-GB').replace(/^\d\d:/, ''), 1117 | '': () => {} 1118 | }; 1119 | field.textContent = formats[Settings.get('timestamps')](parseInt(field.dataset.timestamp)); 1120 | } 1121 | 1122 | function toggleChatDelay() { 1123 | if (Settings.get('enable-chat-delay')) { 1124 | let delay = Settings.get('chat-delay'); 1125 | addNotice(`Artificial chat delay set to ${delay} second${delay == 1 ? '' : 's'}`); 1126 | } else { 1127 | addNotice('Artificial chat delay disabled'); 1128 | flushDelayQueue(); 1129 | } 1130 | } 1131 | 1132 | function setChatDelay(delay) { 1133 | Settings.set('chat-delay', delay); 1134 | addNotice(`Artificial chat delay set to ${delay} second${delay == 1 ? '' : 's'}`); 1135 | if (delay == 0) { 1136 | flushDelayQueue(); 1137 | } 1138 | } 1139 | 1140 | function updateImportExport() { 1141 | var code = ''; 1142 | colorFields.forEach(key => code += HexCompressor.color2string(Settings.get(key + '-color'))); 1143 | ui.settings.style.custom.field.value = code; 1144 | } 1145 | 1146 | function updateTitle() { 1147 | var pageTitle = 'Twitch Chat Monitor'; 1148 | if (Settings.get('adjust-page-title')) { 1149 | pageTitle = ensureHash(client.channels[0]) + ' - ' + pageTitle; 1150 | } 1151 | if (Settings.get('unread-counter-in-page-title') && unreadMessages > 0) { 1152 | pageTitle = '(' + (unreadMessages > 99 ? '99+' : unreadMessages) + ') ' + pageTitle; 1153 | } 1154 | document.title = pageTitle; 1155 | } 1156 | 1157 | function increaseUnreadCounter() { 1158 | if (document.visibilityState == 'hidden') { 1159 | unreadMessages++; 1160 | updateTitle(); 1161 | } 1162 | } 1163 | 1164 | function updateUnreadCounter() { 1165 | if (document.visibilityState == 'visible') { 1166 | unreadMessages = 0; 1167 | updateTitle(); 1168 | } 1169 | } 1170 | 1171 | function ensureHash(text) { 1172 | if (!text.startsWith('#')) { 1173 | return '#' + text; 1174 | } 1175 | return text; 1176 | } 1177 | 1178 | function removeHash(text) { 1179 | if (text != undefined && text.startsWith('#')) { 1180 | return text.substring(1); 1181 | } 1182 | return text; 1183 | } 1184 | 1185 | function replaceText(text, replacement, from, to) { 1186 | for (var i = from + 1; i <= to; i++) { 1187 | text[i] = ''; 1188 | } 1189 | text.splice(from, 1, replacement); 1190 | } 1191 | 1192 | function htmlEntities(html) { 1193 | const entityRegex = /[\u00A0-\u9999<>\&]/gim; 1194 | return html.map((character) => { 1195 | if (character.length == 1) { 1196 | return character.replace(entityRegex, (match) => '&#' + match.charCodeAt(0) + ';'); 1197 | } 1198 | return character; 1199 | }); 1200 | } 1201 | --------------------------------------------------------------------------------