// ==UserScript==
// @name Block Twitch Emotes - iOS Style
// @version 1.7.6
// @description Twitch emoji blocking via a channel with a management interface and context menu (via Tampermonkey)
// @author
// @license MIT
// @match https://www.twitch.tv/*
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @icon https://cdn-icons-png.flaticon.com/512/10531/10531738.png
// @namespace http://tampermonkey.net/
// ==/UserScript==
(function () {
'use strict';
// Загружаем список заблокированных каналов и состояние панели из хранилища
let blockedChannels = GM_getValue('blockedChannels', []); // Массив заблокированных каналов
let isPanelVisible = GM_getValue('isPanelVisible', false); // Флаг, указывающий, видна ли панель
//----------------------------------- Панель управления -----------------------------------------//
const controlPanel = document.createElement('div');
controlPanel.style.position = 'fixed'; // Фиксируем панель на экране
controlPanel.style.bottom = '124px'; // Располагаем панель на 124px от нижней границы экрана
controlPanel.style.right = '380px'; // Располагаем панель на 310px от правой границы экрана
controlPanel.style.width = '425px'; // Ширина панели
controlPanel.style.height = '370px'; // Высота панели
controlPanel.style.backgroundColor = '#5c5065'; // Цвет фона панели
controlPanel.style.background = 'linear-gradient(180deg, hsla(265, 53%, 29%, 1) 0%, hsla(24, 93%, 73%, 1) 100%)'; // Применяем градиентный фон
controlPanel.style.border = '1px solid #ccc'; // Цвет и стиль границы панели
controlPanel.style.borderRadius = '8px'; // Скругляем углы панели
controlPanel.style.padding = '10px'; // Отступы внутри панели
controlPanel.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; // Добавляем тень панели
controlPanel.style.zIndex = 10000; // Устанавливаем высокий z-index, чтобы панель была поверх других элементов
controlPanel.style.fontFamily = 'Arial, sans-serif'; // Шрифт текста на панели
controlPanel.style.transition = 'height 0.3s ease'; // Плавное изменение высоты при изменении
controlPanel.style.overflow = 'hidden'; // Скрытие содержимого, если оно выходит за пределы панели
//--------------- Название листа список ------------------------//
const title = document.createElement('h4');
title.innerText = 'list of channels';
title.style.margin = '0 0 10px 0';
title.style.color = '#fff';
controlPanel.appendChild(title);
//--------------- Список заблокированных каналов ------------------//
const list = document.createElement('ul');
list.id = 'blockedChannelsList';
list.style.listStyle = 'none';
list.style.padding = '0';
list.style.margin = '0 0 10px 0';
list.style.maxHeight = '230px';
list.style.height = '550px';
list.style.overflowY = 'auto';
list.style.border = '1px solid #ddd';
list.style.borderRadius = '4px';
list.style.maxHeight = '230px'; // Установите максимальную высоту для списка
list.style.overflowY = 'auto'; // Включите вертикальную прокрутку
//==================================== ГРАДИЕНТ ФОН СПИСОК =================================================//
list.style.background = 'linear-gradient(45deg, hsla(292, 44%, 16%, 1) 0%, hsla(173, 29%, 48%, 1) 100%)';
list.style.background = '-moz-linear-gradient(45deg, hsla(292, 44%, 16%, 1) 0%, hsla(173, 29%, 48%, 1) 100%)'; // Для Firefox
list.style.background = '-webkit-linear-gradient(45deg, hsla(292, 44%, 16%, 1) 0%, hsla(173, 29%, 48%, 1) 100%)'; // Для Safari и Chrome
list.style.filter = 'progid: DXImageTransform.Microsoft.gradient(startColorstr="#36173b", endColorstr="#589F97", GradientType=1)'; // Для старых версий IE
list.style.color = '#fff';
const buttonColor = '#907cad'; // Общий цвет для кнопок
const buttonShadow = '0 4px 8px rgba(0, 0, 0, 0.6)'; // Тень для кнопок (60% прозрачности)
function updateChannelList() {
list.innerHTML = '';
blockedChannels.forEach(channel => {
const item = document.createElement('li');
item.style.display = 'flex';
item.style.justifyContent = 'space-between';
item.style.padding = '5px';
item.style.borderBottom = '1px solid #eee';
const channelName = document.createElement('span');
channelName.innerText = channel;
item.appendChild(channelName);
const removeButton = document.createElement('button');
removeButton.innerText = 'Delete';
removeButton.style.background = '#ff4d4d'; // Цвет кнопки удаления
removeButton.style.color = '#fff';
removeButton.style.height = '35px';
removeButton.style.width = '75px';
removeButton.style.fontWeight = 'bold'; // Жирный текст для кнопки удаления
removeButton.style.fontSize = '16px'; // Увеличиваем размер текста для кнопки
removeButton.style.border = 'none';
removeButton.style.borderRadius = '4px';
removeButton.style.padding = '2px 6px';
removeButton.style.cursor = 'pointer';
removeButton.style.boxShadow = buttonShadow; // Тень для кнопки удаления
removeButton.onclick = function () {
blockedChannels = blockedChannels.filter(c => c !== channel);
GM_setValue("blockedChannels", blockedChannels);
updateChannelList();
updateCounter();
};
item.appendChild(removeButton);
list.appendChild(item);
});
}
controlPanel.appendChild(list);
//========================= ПОИСКОВАЯ СТРОКА И КНОПКА ПОИСКА ПО СПИСКУ КАНАЛОВ =================================================//
//======================== КОНТЕЙНЕР ДЛЯ СТРОКИ ПОИСКА =====================================//
const searchContainer = document.createElement('div');
searchContainer.style.display = 'flex';
searchContainer.style.marginTop = '10px';
searchContainer.style.gap = '5px';
searchContainer.style.fontSize = '16px';
searchContainer.style.fontWeight = 'bold';
// Увеличиваем размер текста и делаем его жирным для контейнера
// Создаем поле ввода для поиска
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Enter the search channel';
searchInput.style.boxShadow = 'rgb(76 42 94) 0px 4px 6px inset'; // Внутренняя фиолетовая тень
searchInput.style.flex = '1';
searchInput.style.fontWeight = 'bold'; // Жирный текст
searchInput.style.padding = '5px';
searchInput.style.border = '1px solid #ccc';
searchInput.style.borderRadius = '4px';
// Создаем кнопку поиска
const searchButton = document.createElement('button');
searchButton.innerText = 'search';
searchButton.style.background = '#477bcc';
searchButton.style.color = '#fff';
searchButton.style.height = '35px';
searchButton.style.fontSize = '16px';
searchButton.style.fontWeight = 'bold';
searchButton.style.border = 'none';
searchButton.style.borderRadius = '4px';
searchButton.style.padding = '5px 10px';
searchButton.style.cursor = 'pointer';
searchButton.style.boxShadow = buttonShadow;
// Обработчик клика для поиска
searchButton.addEventListener('click', () => {
const query = searchInput.value.trim();
if (!query) {
alert('Enter the search channel!');
return;
}
// Поиск по текстовому содержимому
const elements = document.querySelectorAll('*'); // Получаем все элементы на странице
let found = false;
for (const element of elements) {
if (element.children.length === 0 && element.textContent) { // Проверяем только текстовые узлы
const regex = new RegExp(`\\b${query}\\b`, 'g'); // Учет регистра и поиск целого слова
if (regex.test(element.textContent)) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
found = true;
break;
}
}
}
if (!found) {
alert('No results found!');
}
});
searchContainer.appendChild(searchInput);
searchContainer.appendChild(searchButton);
controlPanel.appendChild(searchContainer);
//================= Функционал для добавления нового канала в список заблокированных -----------//
const inputContainer = document.createElement('div');
inputContainer.style.display = 'flex';
inputContainer.style.gap = '5px';
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'type to add channel ';
input.style.flex = '1';
input.style.fontWeight = 'bold'; // Жирный текст
input.style.height = '35px'; // Отступ между кнопкой и поисковой строкой
input.style.padding = '5px';
input.style.border = '1px solid #ccc';
input.style.borderRadius = '4px';
input.style.marginTop = '15px'; // Отступ между кнопкой и поисковой строкой
// Добавление тени с фиолетовым цветом (35% прозрачности) внутрь
input.style.boxShadow = '#4c2a5e 0px 4px 6px inset'; // Тень фиолетового цвета внутри
//----------------- Add it Button ----------------------//
const addButton = document.createElement('button');
addButton.innerText = 'Add it';
addButton.style.background = buttonColor;
addButton.style.marginTop = '15px'; // Отступ между кнопкой и поисковой строкой
addButton.style.color = '#fff';
addButton.style.border = 'none';
addButton.style.width= '72px';
addButton.style.borderRadius = '4px';
addButton.style.padding = '5px 10px';
addButton.style.cursor = 'pointer';
addButton.style.boxShadow = buttonShadow; // Тень для кнопки "Add it"
// Увеличиваем размер текста и делаем его жирным
addButton.style.fontSize = '16px'; // Увеличиваем размер текста
addButton.style.fontWeight = 'bold'; // Жирный текст
addButton.onclick = (event) => {
event.preventDefault();
const channel = input.value.trim();
if (channel && !blockedChannels.includes(channel)) {
blockedChannels.push(channel);
GM_setValue("blockedChannels", blockedChannels);
updateChannelList();
updateCounter();
input.value = '';
}
};
//----------------Единый контейнер для кнопок -------------------------//
const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex'; // Используем flexbox для расположения кнопок в строку
buttonContainer.style.gap = '6px'; // Задаем промежуток между кнопками
buttonContainer.style.marginTop = '10px'; // Отступ сверху для контейнера кнопок
buttonContainer.style.fontWeight = 'bold'; // жирный текст для контейнера кнопок
buttonContainer.style.fontSize = '16px'; // жирный текст для контейнера кнопок
//-------------- Кнопка "Delete all" ------------------------//
const clearAllButton = document.createElement('button');
clearAllButton.innerText = 'Delete all'; // Текст на кнопке
clearAllButton.style.background = buttonColor; // Цвет фона кнопки
clearAllButton.style.color = '#fff'; // Цвет текста кнопки
clearAllButton.style.border = 'none'; // Убираем бордер у кнопки
clearAllButton.style.borderRadius = '4px'; // Скругленные углы кнопки
clearAllButton.style.padding = '5px 10px'; // Отступы внутри кнопки
clearAllButton.style.cursor = 'pointer'; // Курсор в виде руки при наведении
clearAllButton.style.boxShadow = buttonShadow; // Тень для кнопки "Delete all"
buttonContainer.appendChild(clearAllButton); // Добавляем кнопку в контейнер
// Обработчик события для кнопки "Delete all"
clearAllButton.onclick = () => {
blockedChannels = []; // Очищаем массив заблокированных каналов
GM_setValue("blockedChannels", blockedChannels); // Сохраняем обновленный массив в хранилище
updateChannelList(); // Обновляем список каналов
updateCounter(); // Обновляем счетчик
};
//----------------- export Button --------------------//
const exportButton = document.createElement('button');
exportButton.innerText = 'Export';
exportButton.style.background = buttonColor;
exportButton.style.color = '#fff';
exportButton.style.border = 'none';
exportButton.style.borderRadius = '4px';
exportButton.style.padding = '5px 10px';
exportButton.style.cursor = 'pointer';
exportButton.style.boxShadow = buttonShadow; // Тень для кнопки "Export"
buttonContainer.appendChild(exportButton);
exportButton.onclick = () => {
const blob = new Blob([JSON.stringify(blockedChannels, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'blocked_channels.json';
link.click();
URL.revokeObjectURL(url);
};
//----------------- importButton --------------------//
const importButton = document.createElement('button');
importButton.innerText = 'Import';
importButton.style.background = buttonColor;
importButton.style.color = '#fff';
importButton.style.border = 'none';
importButton.style.borderRadius = '4px';
importButton.style.padding = '5px 10px';
importButton.style.cursor = 'pointer';
importButton.style.boxShadow = buttonShadow; // Тень для кнопки "Import"
buttonContainer.appendChild(importButton);
importButton.onclick = () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'application/json';
fileInput.onchange = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
try {
const importedChannels = JSON.parse(e.target.result);
if (Array.isArray(importedChannels)) {
blockedChannels = Array.from(new Set([...blockedChannels, ...importedChannels]));
GM_setValue("blockedChannels", blockedChannels);
updateChannelList();
updateCounter();
} else {
alert('Invalid file format!');
}
} catch {
alert('Error reading file!');
}
};
reader.readAsText(file);
};
fileInput.click();
};
//----------------- Счётчик ---------------------//
const counter = document.createElement('div');
counter.style.display = 'inline-block';
counter.style.backgroundColor = '#fff';
counter.style.color = '#4c2a5e';
counter.style.border = '3px solid rgb(76, 42, 94)'; // Обновленный стиль границы
counter.style.borderRadius = '8px';
counter.style.padding = '5px 10px';
counter.style.marginLeft = '6px';
counter.style.fontWeight = 'bold';
buttonContainer.appendChild(counter);
function updateCounter() {
counter.innerText = `Count: ${blockedChannels.length}`;
}
inputContainer.appendChild(input);
inputContainer.appendChild(addButton);
controlPanel.appendChild(inputContainer);
controlPanel.appendChild(buttonContainer);
document.body.appendChild(controlPanel);
// Создаем кнопку "Open Blocker Emote"
const openPanelButton = document.createElement('button');
openPanelButton.innerText = 'Open Blocker Emote';
openPanelButton.style.fontWeight = 'bold';
openPanelButton.style.top = '22px';
openPanelButton.style.right = '1344px';
openPanelButton.style.position = 'fixed'; // Фиксированное положение
openPanelButton.style.width = '200px'; // Фиксированная ширина кнопки
openPanelButton.style.height = '41px'; // Фиксированная высота кнопки
openPanelButton.style.background = '#4c2a5e'; // Цвет кнопки в выключенном состоянии
openPanelButton.style.color = '#bda3d7';
openPanelButton.style.border = 'none'; // Без границ
openPanelButton.style.borderRadius = '20px'; // Закругленные углы
openPanelButton.style.padding = '10px';
openPanelButton.style.cursor = 'pointer';
openPanelButton.style.zIndex = 10000; // Высокий z-index
openPanelButton.style.transition = 'background 0.3s ease'; // Плавное изменение фона
openPanelButton.style.display = 'flex';
openPanelButton.style.alignItems = 'center';
openPanelButton.style.justifyContent = 'space-between'; // Чтобы текст и переключатель были по разным краям
// Создаем контейнер для переключателя (темная рамка)
const switchContainer = document.createElement('div');
switchContainer.style.width = '44px'; // Увеличиваем ширину контейнера на 6px
switchContainer.style.height = '27px'; // Увеличиваем высоту контейнера на 6px
switchContainer.style.borderRadius = '13px'; // Скругленные углы
switchContainer.style.backgroundColor = '#ccb8eb5c'; // Темно-зеленая рамка для кружка
switchContainer.style.position = 'relative'; // Для абсолютного позиционирования кружка
switchContainer.style.transition = 'background 0.3s ease'; // Плавное изменение фона контейнера
openPanelButton.appendChild(switchContainer);
// Создаем фиолетовый кружок (переключатель)
const switchCircle = document.createElement('div');
switchCircle.style.width = '19px'; // Увеличиваем ширину кружка на 3px
switchCircle.style.height = '19px'; // Увеличиваем высоту кружка на 3px
switchCircle.style.borderRadius = '50%'; // Кружок
switchCircle.style.backgroundColor = '#4c2a5e'; // фиолетовый цвет кружка
switchCircle.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.8)'; // Тень для кружка
switchCircle.style.position = 'absolute'; // Абсолютное позиционирование внутри контейнера
switchCircle.style.top = '3px'; // Отступ сверху
switchCircle.style.left = '3px'; // Отступ слева
switchCircle.style.transition = 'transform 0.3s ease'; // Плавное движение
switchContainer.appendChild(switchCircle);
// Устанавливаем начальное состояние Панели //
let isPanelOpen = false;
// Обработчик клика для изменения состояния Панели//
openPanelButton.onclick = () => {
isPanelOpen = !isPanelOpen;
if (isPanelOpen) {
openPanelButton.style.background = '#4c2a5e'; // Включено
switchCircle.style.transform = 'translateX(20px)'; // Перемещаем кружок вправо
switchContainer.style.backgroundColor = '#3c995d'; // Цвет контейнера в включенном состоянии
controlPanel.style.display = 'block'; // Показать панель
} else {
openPanelButton.style.background = '#4c2a5e'; // Выключено
switchCircle.style.transform = 'translateX(0)'; // Перемещаем кружок влево
switchContainer.style.backgroundColor = '#ccb8eb5c'; // Цвет контейнера в выключенном состоянии
controlPanel.style.display = 'none'; // Скрыть панель
}
GM_setValue('isPanelOpen', isPanelOpen); // Сохранить состояние
};
//---------- Добавляем кнопку в DOM только после полной загрузки страницы -------//
window.addEventListener('load', () => {
document.body.appendChild(openPanelButton);
// Устанавливаем начальное положение кнопки
const updateButtonPosition = () => {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Позиция кнопки (например, 5% от высоты и 10% от ширины)
openPanelButton.style.top = `${windowHeight * 0.005}px`; // 5% от высоты окна
openPanelButton.style.right = `${windowWidth * 0.2}px`; // 20% от ширины окна
};
// Устанавливаем положение кнопки сразу
updateButtonPosition();
// Обновляем положение кнопки при изменении размеров окна
window.addEventListener('resize', updateButtonPosition);
});
//----------------------- Функции для скрытия смайлов ---------------//
function hideEmotesForChannel(node) {
const emotes = node.querySelectorAll('.chat-line__message img');
emotes.forEach(emote => {
const emoteName = emote.getAttribute('alt');
if (emoteName && isEmoteFromBlockedChannel(emoteName)) {
emote.style.display = 'none';
}
});
}
function isEmoteFromBlockedChannel(emoteName) {
return blockedChannels.some(channel => emoteName.includes(channel));
}
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) hideEmotesForChannel(node);
});
});
});
//--------------- Функция ожидания появления контейнера чата для отслеживания изменений -----------//
function waitForChatContainerAndObserve() {
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
// Запуск наблюдателя, если контейнер чата найден
observer.observe(chatContainer, { childList: true, subtree: true });
} else {
// Повторная попытка через 10 миллисекунд, если контейнер не найден
setTimeout(waitForChatContainerAndObserve, 1);
}
}
waitForChatContainerAndObserve();
// --------------- Периодическая проверка скрыта ли эмодзи, которые могли быть перерисованы ----------------//
setInterval(() => {
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
const nodes = chatContainer.querySelectorAll('.chat-line__message');
nodes.forEach(node => hideEmotesForChannel(node));
}
}, 1); // Проверка каждую секунду //
//----------------- Анимация сворачивания панели-------------------------//
function openPanel() {
isPanelVisible = true;
GM_setValue('isPanelVisible', isPanelVisible);
controlPanel.style.display = 'block'; // Делаем панель видимой
setTimeout(() => {
controlPanel.style.height = '470px'; // Плавно увеличиваем высоту //
}, 0); // Устанавливаем высоту с задержкой для работы анимации //
}
//-------------------------------- Управление высотой панели ---------------//
function closePanel() {
isPanelVisible = false;
GM_setValue('isPanelVisible', isPanelVisible);
controlPanel.style.height = '0px'; // Плавно уменьшаем высоту
setTimeout(() => {
if (!isPanelVisible) controlPanel.style.display = 'none'; // Полностью скрываем после завершения анимации
}, 150); // Таймер соответствует времени анимации //
}
openPanelButton.onclick = () => {
if (isPanelVisible) {
closePanel();
} else {
openPanel();
}
};
if (isPanelVisible) {
controlPanel.style.display = 'block';
controlPanel.style.height = '470px'; // Высота открытой панели //
} else {
controlPanel.style.display = 'block'; // Оставляем display: block для анимации //
controlPanel.style.height = '0px'; // Высота скрытой панели //
}
if (isPanelVisible) controlPanel.style.display = 'block';
else controlPanel.style.display = 'none';
updateChannelList();
updateCounter();
const ContextMenuManager = {
menu: null,
//--------- Создать контекстное меню ------------//
createMenu(event, emotePrefix) {
this.removeMenu(); // Удалить существующее меню, если есть
// Создание нового контекстного меню
const menu = document.createElement('div');
menu.className = 'custom-context-menu';
menu.style.position = 'absolute';
menu.style.top = `${event.pageY}px`;
menu.style.left = `${event.pageX}px`;
menu.style.background = '#4c2a5e';
menu.style.border = '1px solid #ccc';
menu.style.padding = '5px';
menu.style.zIndex = 10001;
menu.style.cursor = 'pointer';
menu.innerText = `Block Emote (${emotePrefix})`;
document.body.appendChild(menu);
this.menu = menu;
//------ Обработчик клика на меню -------------//
menu.addEventListener('click', () => {
this.blockEmote(emotePrefix);
});
//---------- Удалить меню при клике в любое другое место --------------------//
document.addEventListener('click', () => this.removeMenu(), { once: true });
},
//---------- Удалить контекстное меню ------------//
removeMenu() {
if (this.menu) {
this.menu.remove();
this.menu = null;
}
},
//--------------- Логика блокировки эмодзи ----------------//
blockEmote(emotePrefix) {
if (!blockedChannels.includes(emotePrefix)) {
blockedChannels.push(emotePrefix);
GM_setValue("blockedChannels", blockedChannels);
updateChannelList();
updateCounter();
}
this.removeMenu();
}
};
//-------------- Основной обработчик контекстного меню ---------------------//
document.addEventListener('contextmenu', (event) => {
const target = event.target;
if (target.tagName === 'IMG' && target.closest('.chat-line__message')) {
event.preventDefault();
const emoteAlt = target.getAttribute('alt');
if (emoteAlt) {
const emotePrefix = emoteAlt.split(/[^a-zA-Z0-9]/)[0];
ContextMenuManager.createMenu(event, emotePrefix);
}
}
});
openPanelButton.onclick = () => {
isPanelOpen = !isPanelOpen;
// Переключаем фоновый цвет кнопки
openPanelButton.style.background = isPanelOpen ? '#4c2a5e' : '#4c2a5e'; // Цвет кнопки для каждого состояния
// Перемещаем переключатель
switchCircle.style.transform = isPanelOpen ? 'translateX(20px)' : 'translateX(0)';
// Меняем цвет фона контейнера
switchContainer.style.backgroundColor = isPanelOpen ? '#bda3d7' : '#ccb8eb5c';
// Переключаем состояние панели
if (isPanelOpen) {
openPanel(); // Разворачиваем панель
} else {
closePanel(); // Сворачиваем панель
}
// Сохраняем состояние панели в localStorage
GM_setValue('isPanelOpen', isPanelOpen);
};
console.log(getComputedStyle(controlPanel).display);
console.log("[DEBUG] Creating control panel...");
console.log("[DEBUG] Adding button...");
console.log("[DEBUG] Updating channel list...");
})();
