☰

Twitch Chat Toggler

Toggles the Twitch chat and automatically collapses the chat when you first visit a Twitch channel and displays notifications accordingly.

// ==UserScript==
// @name         Twitch Chat Toggler
// @version      2.0
// @description  Toggles the Twitch chat and automatically collapses the chat when you first visit a Twitch channel and displays notifications accordingly.
// @icon         https://static.twitchcdn.net/assets/favicon-32-e29e246c157142c94346.png
// @author       Misspent & OpenAI
// @namespace    https://www.perplexity.ai
// @license      MIT
// @match        https://www.twitch.tv/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
  'use strict';

  // Function to show a notification
  function showNotification(message, color) {
    var notification = document.createElement('div');
    notification.textContent = message;
    notification.style.position = 'fixed';
    notification.style.top = '6%';
    notification.style.left = '50%';
    notification.style.transform = 'translate(-50%, -50%)';
    notification.style.backgroundColor = color;
    notification.style.color = 'white';
    notification.style.padding = '8px';
    notification.style.borderRadius = '0px';
    notification.style.zIndex = '9999';
    document.body.appendChild(notification);
    setTimeout(function() {
      notification.remove();
    }, 3000);
  }

  // Function to toggle chat
  function toggleChat() {
    var chatButton = document.querySelector('[class*="right-column__toggle-visibi"] [data-a-target="right-column__toggle-collapse-btn"]');
    if (chatButton) {
      chatButton.click();
      var chatExpanded = chatButton.getAttribute('aria-label') === 'Collapse Chat';
      GM_setValue('chatExpanded', chatExpanded);
      var message = chatExpanded ? 'Chat opened' : 'Chat closed';
      var color = chatExpanded ? 'green' : 'red';
      showNotification(message, color);
    }
  }

  // Check if chat was expanded last time and expand it if needed
  var chatExpanded = GM_getValue('chatExpanded', true);
  if (chatExpanded) {
    toggleChat();
    GM_setValue('chatExpanded', false);
  }

  // Check chat state on page load
  var chatButton = document.querySelector('[data-a-target="right-column__toggle-collapse-btn"]');
  if (chatButton) {
    chatExpanded = chatButton.getAttribute('aria-label') === 'Collapse Chat';
    if (chatExpanded) {
      showNotification('Chat opened', 'green');
    } else {
      showNotification('Chat closed', 'red');
    }
  }

  // Add event listener for "shift+s" key press
  document.addEventListener('keydown', function(event) {
    // Check if the focused element is an input or chat element
    var focusedElement = document.activeElement;
    var isInputOrChat = focusedElement.tagName === 'INPUT' || focusedElement.getAttribute('data-test-selector') === 'chat-input';

    if (!isInputOrChat && event.shiftKey && event.key === 'S') {
      toggleChat();
    }
  });
})();





/*
Write a Twitch TamperMonkey script that does the following:
1. Make the @namespace https://chatbot.theb.ai
2. Make the @author Misspent & OpenAI
3. Give each section/function a brief short description of what it is like you normally do
4. If I press"shift+s" make it click this button for me "[data-a-target="right-column__toggle-collapse-btn"]".
10. Give an output for Console, make the background green, text colour gold, padding "0px 4px" and font bold.

+ some other stuff
*/