*arr default sort & filter

Sets default sort and filter options for Radarr/Sonarr/...'s interactive search
换行
// ==UserScript==
// @name        *arr default sort & filter
// @namespace   https://github.com/Millio345/arr-default-sort-and-filter
/* Since *arr's installation url is different for every user we need to match all links; Script checks for a 'Radarr' metadata tag before actually doing anything */
// @include http://*
// @include https://*
// @require     https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_registerMenuCommand
// @version     1.2
// @author      Millio
// @description Sets default sort and filter options for Radarr/Sonarr/...'s interactive search
// @license      MIT
// ==/UserScript==
 
/* This script allows you to define default sorting and filter for your interactive searches for the arr websites.
As of version 1.1 you no longer need to make any changes to this file.
USAGE:
After installing the extension, visit your Radarr/Sonarr/... installation and click the 'Configure *arr default sort & filter' button which should show up in your Userscript extension's menu on your browser
 
Problems? Suggestions? Improvements? GitHub at https://github.com/Millio345/arr-default-sort-and-filter
 
CHANGELOG:
1.2 - Add support for Lidarr, Sonarr, Readarr & Whisparr
1.1 - Move all configuration to UI to prevent users having to override this file with every update. Allow sorting by icon columns by entering the label text you see when moving your mouse over the element (span title)
1.0 - Initial release, basic sort & filter functionality
*/
(function() {
    'use strict';
 
    /* FUNCTIONS */
    // Sort the table by sortColumn and click "Filter" button if filterName is set
    function clickColumnAndFilter(tableDiv) {
        if(!(sortColumn === null || sortColumn === ""))
        {
            // Find all table headers
            let thElements = tableDiv.getElementsByTagName('th');
            let correctHeaderFound = false
            let headerList = [];
            // Loop through all table headers
            for (let i = 0; i < thElements.length; i++) {
                // Check if this is the table header we want to sort by
                if (thElements[i].textContent.trim().toLowerCase() === sortColumn.toLowerCase()) {
                    correctHeaderFound = true;
                }
                // Not it, let's check if it has a span with the correct title for icon columns
                else if(thElements[i].querySelector('span') && thElements[i].querySelector('span').getAttribute('title').toLowerCase() === sortColumn.toLowerCase()) {
                    correctHeaderFound = true;
                }
                else {
                    if(thElements[i].textContent!==""){
                        headerList.push(thElements[i].textContent);
                    }
                    else if(thElements[i].querySelector('span')){
                        headerList.push(thElements[i].querySelector('span').getAttribute('title'));
                    }
                }
 
                if(correctHeaderFound){
                    // Click the <th> element
                    thElements[i].click();
 
                    // If we don't want ascending order, click again
                    if(!sortAscending)
                        thElements[i].click();
 
                    break; // Stop the loop since we found the target column
                }
            }
            if(!correctHeaderFound){
                console.warn("Sort column '"+sortColumn+"' not found in table headers.")
                console.log("Valid columns: "+headerList.join(','))
            }
        }
        //If no filterName's set, or we've already clicked the filter button for this page load for this movie, this function is done. Otherwise, continue to clicking the filter button
        if(filterName === null || filterName === "" || filterButtonClicked)
            return
 
        // "Filter" button is first child of tableDiv parent
        let divs = tableDiv.parentElement.getElementsByTagName('div')
        for(let i =0; i < divs.length;i++){
            if(divs[i].className.startsWith('FilterMenu-filterMenu-'))
            {
                let filter = divs[i]
                let button = filter.querySelector('button')
                button.click()
                return;
            }
        }
        console.warn("Filter button not found. Unable to apply filter.");
    }
 
    // Click the filterName as soon as the filter menu is opened
    function clickChosenFilter(filterListNode) {
 
        // First make sure filterName is set
        if(filterName === null || filterName === ""){
            return
        }
 
        // Only click filter button once after opening a modal; Otherwise the user would not be able to override the filter since the script would always take over
        if(filterButtonClicked){
            return
        }
 
        // Get all filters
        let filters = filterListNode.getElementsByTagName('button')
 
        // Create a filterList for debug logging in case filter is not found
        let filterList = [];
 
        for(let i = 0; i < filters.length; i++) {
            let div = filters[i].querySelector('div');
            if(div !== null){
                if(div.textContent.trim()===filterName){
                    // Got the right filter, click it
                    filters[i].click();
 
                    // Set filterButtonClicked to true
                    filterButtonClicked = true
                    return;
                }
                else
                    filterList.push(div.textContent.trim());
            }
        }
        console.warn("Filter '"+filterName+"' not found in filter list.")
        console.log("Valid filters:"+filterList.join(','));
    }
 
    // Observe the body element so we know when modal is opened / closed
    function bodyClassChanged(mutationsList, _observer){
        mutationsList.forEach(mutation => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                // Modal was closed; Set filterButtonClicked to false so we can reclick it next time the modal is opened
                if(!mutation.target.className.includes("Modal-modalOpen")) {
                    filterButtonClicked = false;
                }
            }
        });
    }
    // This function is called by the mutationObserver when additional page content is added. Check if it contains the search table or the filter 'scroller'
    function handleMutations(mutationsList, _observer) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // Check if the added nodes include the target element
                if (mutation.addedNodes) {
                    for (let node of mutation.addedNodes) {
                        // Check if the added node is an element (type 1) which has classes
                        if (node.nodeType === 1 && typeof node.className === 'string')
                        {
                            // Was a tableContainer in a modal added?
                            if(node.className.includes('Table-tableContainer-')&&node.closest("[class^='ModalBody']")) {
                                clickColumnAndFilter(node);
                                return;
                            }
                            // Was a menu scroller added (This is the opened filter list)? Click the chosen filter
                            else if(node.className.includes('MenuContent-scroller-')) {
                                clickChosenFilter(node)
                            }
                        }
                    }
                }
            }
        }
    }
 
    // Check current page url to see if we're on page with interactive search button or not
    function onPageWithInteractiveSearchButton(arr_type) {
        let pattern;
 
        // Depending on which arr site we're on we check the url
        if(arr_type==="Lidarr") {
            // artist/albums links end in /(artist|album)/artist-or-album-name
            pattern = /\/(artist|album)\/[\w-]+$/;
        }
        else if(arr_type==="Radarr") {
            // movie links end in /movie/NUMBER
            pattern = /\/movie\/\d+$/;
        }
        else if(arr_type==="Readarr") {
 
            // author links end in /author/NUMBER
            // Known limitation: The book page does not offer an interactive search modal and is currently not supported; Go to the author page and search from there.
            pattern = /\/author\/\d+$/;
        }
        else if(arr_type==="Sonarr") {
 
            // series links end in /series/series-name
            pattern = /\/series\/[\w-]+$/;
        }
        else if(arr_type==="Whisparr") {
            // site links end in /site/sitename
            pattern = /\/site\/[\w-]+$/;
        }
 
        // Return true / false depending on whether we're on a media page
        return pattern.test(window.location.href);
    }
 
 
    // When a movie page is loaded, start mutation observers and set filter clicked to false
    function interactiveSearchPageLoaded(){
        filterButtonClicked = false
        observer.observe(document.documentElement, { childList: true, subtree: true });
        body_observer.observe(document.querySelector('body'), { attributes: true, attributeFilter: ['class'], attributeOldValue: true });
    }
 
    // To prevent unintended consequences on other tables/buttons, stop observer when another page is loaded
    function nonInteractiveSearchPageLoaded(){
        observer.disconnect()
        body_observer.disconnect()
    }
    function loadScript(arr_type)
    {
        // Set Variable prefix to the arr type (f.e. SonarrInteractiveSearchFilterName
        let prefix = arr_type;
 
        // To prevent breaking changes to previous installations when this script only supported Radarr, Radarr variables don't have a prefix.
        if(prefix==="Radarr"){
            prefix="";
        }
        // Setup GM Config, which provides a nice UI to set the options
        gmc = new GM_config(
            {
                // We need unique id for each site, otherwise all non-specified values will be cleared when saving.
                'id': prefix+'ArrDefaultSortAndFilter',
                "css": `#`+prefix+`ArrDefaultSortAndFilter {background: #2a2a2a;}
                #`+prefix+`ArrDefaultSortAndFilter .field_label {color: #fff;}
                #`+prefix+`ArrDefaultSortAndFilter .config_header {color: #fff; padding-bottom: 10px;}
                #`+prefix+`ArrDefaultSortAndFilter .reset {color: #f00; text-align: center;}
                #`+prefix+`ArrDefaultSortAndFilter .section_header {color: #fff; text-align: left; margin-top: 15px;margin-bottom: 5px; padding:5px;}
                #`+prefix+`ArrDefaultSortAndFilter .section_desc {background: #2a2a2a; color: #fff; text-align: left; border:none;}
                #`+prefix+`ArrDefaultSortAndFilter .config_var {text-align: left;}
                #`+prefix+`ArrDefaultSortAndFilter input { display: block; margin-top:5px; margin-bottom: 20px}
                #`+prefix+`ArrDefaultSortAndFilter .reset_holder {display: none;}`,
                'title': arr_type+' Default Sort and Filter', // Panel Title
                'fields': // Fields object
                    {
                        [prefix+'InteractiveSearchFilterName']: // This is the id of the field
                            {
                                'label': 'Name of default filter to apply (leave empty to disable)', // Appears next to field
                                'section': [GM_config.create('Automatic Filter'), 'Automatically applies a filter when loading interactive search table'],
                                'type': 'text', // Makes this setting a text field
                                'title': 'Enter the name of the filter exactly as you see it in '+arr_type,
                                'default': '' // Default value if user doesn't change it
                            },
                        [prefix+'InteractiveSearchSortColumn']: // This is the id of the field
                            {
                                'label': 'Default interactive search column to sort by (leave empty to disable)', // Appears next to field
                                'section': [GM_config.create('Automatic Sort'), 'If you want the script to automatically apply a filter when loading interactive search, enter the exact name of the filter here'],
                                'title':  'Column title exactly as you see it. For icons enter the value that appears when you move your mouse over the icon.',
                                'type': 'text', // Makes this setting a text field
                                'default': '' // Default value if user doesn't change it
                            },
                        [prefix+'InteractiveSearchSortAscending']: // This is the id of the field
                            {
                                'label': 'Sort Ascending? (Check to sort A-Z / 0 - 9)', // Appears next to field
                                'type': 'checkbox', // Makes this setting a text field
                                'default': false // Default value if user doesn't change it
                            },
                    },
                'events': {
                    'init': () => {
                        // initialization complete, load values
                        filterName = gmc.get([prefix+'InteractiveSearchFilterName']);
                        sortColumn = gmc.get([prefix+'InteractiveSearchSortColumn']);
                        sortAscending = gmc.get([prefix+'InteractiveSearchSortAscending']);
                    },
                    'save': function () { // runs after values are saved
                        // settings may have been changed, reload values
                        filterName = gmc.get([prefix+'InteractiveSearchFilterName']);
                        sortColumn = gmc.get([prefix+'InteractiveSearchSortColumn']);
                        sortAscending = gmc.get([prefix+'InteractiveSearchSortAscending']);
                    }
                }
            });
 
        // Add configuration menu item to extension
        GM_registerMenuCommand("Configure "+arr_type+" default sort & filter", show_config, "c");
 
        // Initial page load - Are we on a movie page?
        if(onPageWithInteractiveSearchButton(arr_type))
            interactiveSearchPageLoaded()
 
        // Code below to detect page change without reload *arr uses - https://stackoverflow.com/questions/6390341/how-to-detect-if-url-has-changed-after-hash-in-javascript
        let oldPushState = history.pushState;
        history.pushState = function pushState() {
            let ret = oldPushState.apply(this, arguments);
            window.dispatchEvent(new Event('pushstate'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        };
 
        let oldReplaceState = history.replaceState;
        history.replaceState = function replaceState() {
            let ret = oldReplaceState.apply(this, arguments);
            window.dispatchEvent(new Event('replacestate'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        };
 
        window.addEventListener('popstate', () => {
            window.dispatchEvent(new Event('locationchange'));
        });
 
        // locationchange event is fired when url is changed thanks to code above
        window.addEventListener('locationchange', function () {
            //Are we on a movie page? Call appropriate function
            if(onPageWithInteractiveSearchButton(arr_type))
                interactiveSearchPageLoaded()
            // When on another page, disable the mutation observer
            else
                nonInteractiveSearchPageLoaded()
        });
 
    }
 
    function show_config()
    {
        gmc.open();
    }
 
    /* END FUNCTIONS */
    // Following code is ran on every single tab so should be kept as light as possible
    // Support all sites listed under Media Automation on https://wiki.servarr.com/
    let supportedSites = ["Lidarr","Radarr","Readarr","Sonarr","Whisparr"];
 
    // Check if we're on a supported site (site with metadata description 'Radarr'/'Sonarr'/...)
    let description = document.querySelector('meta[name="description"]');
 
    if(description && supportedSites.includes(description.content)){
        let arr_type=description.content
        console.log(arr_type+" installation found. Watching for interactive search table.")
        // Define some variables for global use through the script
        // Create a new MutationObserver since *arr sites dynamically add elements after pageload
        var observer = new MutationObserver(handleMutations);
 
        // Observe the body element for changes to the class (= modal opened / closed)
        var body_observer = new MutationObserver(bodyClassChanged);
 
        // *arr sites uses ajax to change pages; We only want to click the filter button once per movie (otherwise the filter button is completely blocked from user interaction)
        var filterButtonClicked = false;
 
        // Variable to store gm config
        var gmc;
 
        // filter and sort options. Variables automatically get populated by the GMC config menu on init
        var filterName;
        var sortColumn;
        var sortAscending;
 
        // Load the script functionality
        loadScript(arr_type);
    }
})();