zactopus' Twitch Tweaks

zactopus-twitch-tweaks.user.js

// ==UserScript==
// @name     zactopus' Twitch Tweaks
// @version  1.1.1
// @grant    none
// @match    https://www.twitch.tv/*
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@1
// ==/UserScript==

const logger = (...args) => {
  return console.log("[zactopus' Twitch Tweaks]", ...args);
};

logger("Loading... ✨");

function alphabetiseFollowedChannels() {
  function getParentElementWithClass(element, className) {
    if (element.classList.contains(className)) {
      return element;
    }

    if (!element.parentElement) {
      return null;
    }

    return getParentElementWithClass(element.parentNode, className);
  }


  let currentFollowedChannelsUsernames = [];

  function areUpdatedFollowerChannelSame(followedChannels) {
    const followedChannelsUsernames = followedChannels.map(channel => {
      return channel.username;
		});
    return currentFollowedChannelsUsernames.toString() === followedChannelsUsernames.toString();
  }

  VM.observe(document.body, () => {
    const sideNavTransitionGroupElement = document.querySelector('.side-nav-section .tw-transition-group');

    if (sideNavTransitionGroupElement) {
      const followedChannelsElements = [...document.querySelectorAll('[data-test-selector="followed-channel"]')];

      // no channels
      if (followedChannelsElements.length === 0) {
        logger('No channels');
        return;
      }
      
      const followedChannels = followedChannelsElements.map(element => {
        const username = element.getAttribute('href').replace('/', '');
        return { element, username };
      });
      
      if (areUpdatedFollowerChannelSame(followedChannels)) {
        return; 
      }
      currentFollowedChannelsUsernames = followedChannels.map(j => j.username).toString();
     
      const onlineFollowedChannels = followedChannels.filter(channel => {
        const hasOfflineClassName = channel.element.querySelector('.side-nav-card__avatar--offline');        
        return !hasOfflineClassName;
      });
      
      if (onlineFollowedChannels.length === 0) {
        logger('No online channels');
      	return;
      }
      
      const sortedFollowedChannels = onlineFollowedChannels.sort((a, b) => {
        return a.username.localeCompare(b.username);
      });

      sortedFollowedChannels.reverse().forEach(channel => { 
        const element = getParentElementWithClass(channel.element, 'tw-transition');
        element.setAttribute("data-zactopus-twitch-tweaks", "true");
        sideNavTransitionGroupElement.prepend(element);
      });

      logger('Updated channels', currentFollowedChannelsUsernames);      
    }
  });
}

function goToFollowingPage() {
	return history.pushState({}, '', window.location.origin + '/directory/following');
}

function redirectHomePageToFollowingPage() {
  if (window.location.pathname === '/') {
    return goToFollowingPage();
  }
  
	VM.observe(document.body, () => {
    if (window.location.pathname === '/') {
    	goToFollowingPage();
    }
  });
}

alphabetiseFollowedChannels();
redirectHomePageToFollowingPage();