☰

Youtube Save To Playlist Hotkey And Filter

Adds a P hotkey to Youtube, to bring up the Save to Playlist dialog. Playlists will be displayed alfabetically sorted, any any playlist the current video belongs to, will be shown at the top. Also adds a focuced filter input field. If nothing is written into the filter input, all playlists will be shown, alternatively only the playlists where the name containes the sequence of letters typed in the input field, will be displayed. Press escape to exit the dialog.

  1. // ==UserScript==
  2. // @name         Youtube Save To Playlist Hotkey And Filter
  3. // @namespace    https://gist.github.com/f-steff
  4. // @version      1.2
  5. // @description  Adds a P hotkey to Youtube, to bring up the Save to Playlist dialog. Playlists will be displayed alfabetically sorted, any any playlist the current video belongs to, will be shown at the top. Also adds a focuced filter input field. If nothing is written into the filter input, all playlists will be shown, alternatively only the playlists where the name containes the sequence of letters typed in the input field, will be displayed. Press escape to exit the dialog.
  6. // @author       Flemming Steffensen
  7. // @license MIT
  8. // @match        http://www.youtube.com/*
  9. // @match        https://www.youtube.com/*
  10. // @include      http://www.youtube.com/*
  11. // @include      https://www.youtube.com/*
  12. // @grant        none
  13. // @homepageURL  https://gist.github.com/f-steff/4d765eef037e9b751c58d43490ebad62
  14. // @run-at       document-start
  15. // ==/UserScript==
  16.  
  17. (function (d) {
  18.  
  19.   /**
  20.    * Pressing 'p' simulates a click on YouTube's "Save" button to open the dialog.
  21.    */
  22.   function openSaveToPlaylistDialog() {
  23.     // Commonly, there's a button with aria-label="Save" or aria-label^="Save"
  24.     // near the Like/Dislike/Share row on the watch page.
  25.     const saveButton = d.querySelector('button[aria-label^="Save"]');
  26.     if (saveButton) {
  27.       saveButton.click();
  28.     } else {
  29.       console.log("Could not find 'Save' button. Adjust the selector if needed.");
  30.     }
  31.   }
  32.   
  33.  // Listen for the 'p' key at the document level
  34. d.addEventListener('keydown', evt => {
  35.   // Avoid capturing if user holds Ctrl/Alt/Meta, or if in a text field, etc.
  36.   if (
  37.       evt.key === 'p' &&
  38.       !evt.ctrlKey &&
  39.       !evt.altKey &&
  40.       !evt.metaKey &&
  41.       evt.target.tagName !== 'INPUT' &&
  42.       evt.target.tagName !== 'TEXTAREA' && evt.target.contentEditable !== "true"
  43.   ) {
  44.       // Prevent YouTube from interpreting 'p' in any other way
  45.       evt.preventDefault();
  46.       evt.stopPropagation();
  47.  
  48.       // Attempt to open the "Save to playlist" dialog
  49.       openSaveToPlaylistDialog();
  50.   }
  51. }, true);
  52.  
  53.   /**
  54.    * Sort playlists such that:
  55.    *   - checked items (aria-checked="true") come first,
  56.    *   - then everything else in alphabetical (0-9,A→Z).
  57.    */
  58.   function sortPlaylist(playlist) {
  59.     let options = query(playlist, 'ytd-playlist-add-to-option-renderer');
  60.     let optionsMap = new Map();
  61.  
  62.     // Collect items by playlist title
  63.     options.forEach(op => {
  64.       let formattedString = query(op, 'yt-formatted-string')[0];
  65.       let title = formattedString?.getAttribute('title') || '';
  66.       if (!optionsMap.has(title)) {
  67.         optionsMap.set(title, []);
  68.       }
  69.       optionsMap.get(title).push(op);
  70.     });
  71.  
  72.     // Sort so "checked" groups come first, then A→Z
  73.     let sortedEntries = [...optionsMap.entries()].sort(([titleA, groupA], [titleB, groupB]) => {
  74.       const checkedA = groupA.some(
  75.         op => query(op, 'tp-yt-paper-checkbox[aria-checked="true"]').length
  76.       );
  77.       const checkedB = groupB.some(
  78.         op => query(op, 'tp-yt-paper-checkbox[aria-checked="true"]').length
  79.       );
  80.  
  81.       if (checkedA && !checkedB) return -1;
  82.       if (checkedB && !checkedA) return 1;
  83.  
  84.       // Otherwise alphabetical
  85.       const upA = titleA.toUpperCase();
  86.       const upB = titleB.toUpperCase();
  87.       if (upA < upB) return -1;
  88.       if (upA > upB) return 1;
  89.       return 0;
  90.     });
  91.  
  92.     // Re-insert items in sorted order
  93.     for (const [, group] of sortedEntries) {
  94.       for (const opNode of group) {
  95.         playlist.appendChild(opNode);
  96.       }
  97.     }
  98.   }
  99.  
  100.   /**
  101.    * Filter all playlist entries based on user-typed substring.
  102.    * If the filter is blank, show everything; otherwise hide non-matches.
  103.    */
  104.   function filterPlaylist(playlist, filterText) {
  105.     let options = query(playlist, 'ytd-playlist-add-to-option-renderer');
  106.     const text = filterText.trim().toLowerCase();
  107.  
  108.     options.forEach(op => {
  109.       let formattedString = query(op, 'yt-formatted-string')[0];
  110.       let title = (formattedString?.getAttribute('title') || '').toLowerCase();
  111.       op.style.display = (text && !title.includes(text)) ? 'none' : 'block';
  112.     });
  113.   }
  114.  
  115.   /**
  116.    * When the dialog closes, re-attach the observer so we see the next open event.
  117.    */
  118.   function observePaperDialogClose(paperDialog, onCloseDialog) {
  119.     let ob = new MutationObserver((mutations, me) => {
  120.       mutations.forEach(mutation => {
  121.         if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {
  122.           me.disconnect();
  123.           onCloseDialog();
  124.         }
  125.       });
  126.     });
  127.     ob.observe(paperDialog, { attributes: true });
  128.   }
  129.  
  130.   /**
  131.    * Main logic: watch for the "Add to Playlist" dialog, then
  132.    * Insert input, sort once, filter, focus the input, etc.
  133.    * Added a small setTimeout to avoid first-time invocation timing issues.
  134.    */
  135.   function handlePopupContainer(popupContainer) {
  136.     let currentFilter = '';
  137.     const popupObserverConfig = { subtree: true, childList: true };
  138.  
  139.     const popupContainerObserver = new MutationObserver(function (mut, me) {
  140.       // Defer so the DOM has time to settle on first invocation
  141.       setTimeout(() => {
  142.         const paperDialog = query(popupContainer, 'tp-yt-paper-dialog')[0];
  143.         if (paperDialog) {
  144.           // Sort/insert only once per open
  145.           me.disconnect();
  146.  
  147.           // Re-attach after closing
  148.           observePaperDialogClose(paperDialog, function () {
  149.             popupContainerObserver.observe(popupContainer, popupObserverConfig);
  150.           });
  151.  
  152.           // Look for "Save video to..."
  153.           const headingSpan = query(
  154.             paperDialog,
  155.             'span.yt-core-attributed-string[role="text"]'
  156.           ).find(el => el.textContent.trim() === 'Save video to...');
  157.  
  158.           // Grab #playlists container
  159.           const playlistContainer = query(paperDialog, '#playlists')[0];
  160.  
  161.           if (headingSpan && playlistContainer) {
  162.             // If we haven't inserted our input yet, do it now
  163.             const existingFilterInput = d.getElementById('filterText');
  164.             if (!existingFilterInput) {
  165.               // Create <input> and <br>
  166.               const filterInput = d.createElement('input');
  167.               filterInput.id = 'filterText';
  168.               filterInput.type = 'text';
  169.               filterInput.placeholder = 'Filter';
  170.  
  171.               const br = d.createElement('br');
  172.  
  173.               headingSpan.parentNode.appendChild(filterInput);
  174.               headingSpan.parentNode.appendChild(br);
  175.  
  176.               // On typing => filter
  177.               filterInput.addEventListener('input', evt => {
  178.                 currentFilter = evt.target.value;
  179.                 filterPlaylist(playlistContainer, currentFilter);
  180.               });
  181.             }
  182.  
  183.             // Sort once for this session
  184.             sortPlaylist(playlistContainer);
  185.  
  186.             // Re-apply current filter (if any)
  187.             filterPlaylist(playlistContainer, currentFilter);
  188.  
  189.             // Focus
  190.             const input = d.getElementById('filterText');
  191.             if (input) {
  192.               input.focus();
  193.             }
  194.           }
  195.         }
  196.       }, 10); // 10ms delay
  197.     });
  198.  
  199.     // Start observing
  200.     popupContainerObserver.observe(popupContainer, popupObserverConfig);
  201.   }
  202.  
  203.   /**
  204.    * A top-level observer that waits for <ytd-popup-container> to show up,
  205.    * then calls handlePopupContainer() exactly once.
  206.    */
  207.   const documentObserver = new MutationObserver(function (mutations, me) {
  208.     const popupContainer = query(d, 'ytd-popup-container')[0];
  209.     if (popupContainer) {
  210.       console.log("Found ytd-popup-container");
  211.       handlePopupContainer(popupContainer);
  212.       me.disconnect(); // stop once found
  213.     }
  214.   });
  215.   documentObserver.observe(d, { childList: true, subtree: true });
  216.  
  217.   /**
  218.    * Helper: safely do querySelectorAll, returns an Array
  219.    */
  220.   function query(startNode, selector) {
  221.     try {
  222.       return Array.prototype.slice.call(startNode.querySelectorAll(selector));
  223.     } catch (e) {
  224.       return [];
  225.     }
  226.   }
  227.  
  228. })(document);