☰

Twitch Sort by Newest/Oldest

Sorts Twitch clips by newest or oldest on the 24-hour clips page

  1. // ==UserScript==
  2. // @name Twitch Sort by Newest/Oldest
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Sorts Twitch clips by newest or oldest on the 24-hour clips page
  6. // @author MahdeenSky
  7. // @match https://www.twitch.tv/*/clips?filter=clips&range=24hr
  8. // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  9. // @grant none
  10. // @license      GNU GPLv3
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     let sortByNewest = true;
  17.     
  18.     function sortClips() {
  19.         console.log(`Sorting clips by ${sortByNewest ? 'newest' : 'oldest'}...`);
  20.     
  21.         const clipTowers = document.querySelectorAll('.ScTower-sc-1sjzzes-0');
  22.         const clipTower = clipTowers[1];
  23.     
  24.         if (clipTower) {
  25.             console.log("Found clip tower element:", clipTower);
  26.         } else {
  27.             console.error("Clip tower element not found!");
  28.             return; // Exit if the main container is not found
  29.         }
  30.     
  31.         const clipCards = Array.from(clipTower.querySelectorAll('.Layout-sc-1xcs6mc-0[data-a-target^="clips-card-"]'));
  32.         console.log("Found", clipCards.length, "clip cards.");
  33.     
  34.         clipCards.sort((a, b) => {
  35.             const elementA = a.querySelectorAll('.ScPositionCorner-sc-1shjvnv-1');
  36.             const elementB = b.querySelectorAll('.ScPositionCorner-sc-1shjvnv-1');
  37.             const timeA = elementA[elementA.length - 1].textContent.trim();
  38.             const timeB = elementB[elementB.length - 1].textContent.trim();
  39.     
  40.             // edge case, if there is 'Yesterday' in the time, it should be considered as the oldest or newest
  41.             if (timeA.includes('Yesterday')) {
  42.                 return sortByNewest ? -999 : 999;
  43.             } else if (timeB.includes('Yesterday')) {
  44.                 return sortByNewest ? 999 : -999;
  45.             }
  46.     
  47.             // handle hours ago and minutes ago cases
  48.             let timeAValue = parseInt(timeA);
  49.             let timeBValue = parseInt(timeB);
  50.     
  51.             if (timeA.includes('hour')) {
  52.                 timeAValue *= 60;
  53.             }
  54.             if (timeB.includes('hour')) {
  55.                 timeBValue *= 60;
  56.             }
  57.     
  58.             return sortByNewest ? timeBValue - timeAValue : timeAValue - timeBValue;
  59.         });
  60.     
  61.         clipTower.innerHTML = '';
  62.         clipCards.forEach(card => clipTower.appendChild(card));
  63.     
  64.         console.log("Clips sorted successfully.");
  65.     }
  66.     
  67.     // Create sort button
  68.     const sortButton = document.createElement('button');
  69.     sortButton.textContent = 'Sort by Newest';
  70.     sortButton.style.backgroundColor = '#6441A5';
  71.     sortButton.style.color = 'white';
  72.     sortButton.style.padding = '10px 20px';
  73.     sortButton.style.border = 'none';
  74.     sortButton.style.cursor = 'pointer';
  75.     sortButton.style.borderRadius = '5px';
  76.     sortButton.style.marginTop = '10px';
  77.     
  78.     sortButton.addEventListener('click', () => {
  79.         sortByNewest = !sortByNewest;
  80.         sortButton.textContent = `Sort by ${sortByNewest ? 'Newest' : 'Oldest'}`;
  81.         sortClips();
  82.     });
  83.     
  84.     function addSortButton() {
  85.         const sortContainer = document.querySelector('div[data-test-selector="sort"]');
  86.         if (sortContainer) {
  87.             console.log("Found sort container element:", sortContainer);
  88.             sortContainer.appendChild(sortButton);
  89.             console.log("Sort button added.");
  90.         } else {
  91.             console.log("Sort container element not found. Setting up observer...");
  92.             const observer = new MutationObserver(mutations => {
  93.                 const sortContainer = document.querySelector('div[data-test-selector="sort"]');
  94.                 if (sortContainer) {
  95.                     console.log("Sort container element found by observer:", sortContainer);
  96.                     sortContainer.appendChild(sortButton);
  97.                     console.log("Sort button added.");
  98.                     observer.disconnect();
  99.                 }
  100.             });
  101.             observer.observe(document.body, { childList: true, subtree: true });
  102.         }
  103.     }
  104.     
  105.     addSortButton();
  106.     })();