☰

Youtube Playlists Sorted Alphabetically

When you click on "+ Add to" (for adding a new video to a playlist) YouTube displays the playlists -by default- in a strange order: beginning with the one selected last. This script arranges your playlists alphabetically, making it easier for you to find the one you are looking for.

  1. // ==UserScript==
  2. // @name           Youtube Playlists Sorted Alphabetically
  3. // @namespace      http://www.pbworks.net
  4. // @description	   When you click on "+ Add to" (for adding a new video to a playlist) YouTube displays the playlists -by default- in a strange order: beginning with the one selected last. This script arranges your playlists alphabetically, making it easier for you to find the one you are looking for.
  5. // @author         Paolo Brocco
  6. // @homepage       http://www.pbworks.net
  7. // @copyright      2012+, Paolo Brocco (http://www.pbworks.net)
  8. // @license        GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
  9. // @version        2015.07.09
  10. // @include        http://www.youtube.com/*
  11. // @include        https://www.youtube.com/*
  12. // @uso:script     123272
  13. // ==/UserScript==
  14.  
  15. /*** DOCUMENT READY: triggers (buttons) with added calls to this script functions ***/
  16.  
  17. document.addEventListener('DOMContentLoaded', function() {
  18.     //here begins everything
  19.  
  20.     //This is the "Add to" button
  21.     document.querySelector('#watch8-secondary-actions > div.yt-uix-menu.yt-uix-videoactionmenu > button').setAttribute('onclick', ';initSortLists();return false;');
  22. }, false);
  23.  
  24. /*** INIT FUNCTIONS: logic to decide when to activate the sorting ***/
  25.  
  26. unsafeWindow.initSortLists = function(){
  27.  
  28. 	//this function checks if the menu is ready (ready I mean: if the ul list has children (li) (youtube populates the list via ajax, then shows it) ):
  29. 	//if ready: call sortLists()
  30. 	//else: wait for 100 ms
  31.     
  32.     var container = document.querySelector('#addto-list-panel > div.playlists.yt-uix-scroller > ul');
  33.  
  34. 	if(typeof container !== 'undefined' && container != null)
  35. 	{
  36. 		//unsafeWindow.console.log('the menu is ready!');
  37. 		
  38. 		if (!container.classList.contains('sorted'))
  39. 		{
  40.             var lists = container.querySelectorAll('li');
  41.  
  42.             if (lists.length > 0) {
  43.                 //unsafeWindow.console.log('playlists arrived, sorting them.');
  44.                 unsafeWindow.sortLists();
  45.             }
  46.             else {
  47.                 setTimeout('initSortLists()', 100);
  48.             }
  49. 		}
  50. 		else
  51. 		{
  52. 			//unsafeWindow.console.log('playlists already sorted ;)');
  53. 		}
  54. 		return false;
  55. 	}
  56. 	else
  57. 	{
  58. 		//unsafeWindow.console.log('waiting 100 ms...');
  59. 		setTimeout('initSortLists()', 100);
  60. 	}
  61. }
  62.  
  63. /*** SORTING FUNCTIONS ***/
  64.  
  65. unsafeWindow.sortLists = function(){
  66. 	
  67. 	//this function does what we want, meaning the sorting of the playlists, alphabetically
  68. 	
  69. 	//unsafeWindow.console.log('doing the magic!');
  70.  
  71.     var oldList = document.querySelector('#addto-list-panel > div.playlists.yt-uix-scroller > ul');
  72.  
  73.     var listParent = oldList.parentNode;
  74.  
  75. 	var plists = [];
  76. 	var lTitle, lElement, newList;
  77.  
  78.     var lists = document.querySelectorAll('#addto-list-panel > div.playlists.yt-uix-scroller > ul li');
  79.  
  80.     [].forEach.call(lists, function(li) {
  81.  
  82.         unsafeWindow.console.log('a list');
  83.  
  84.         lTitle = li.getAttribute('data-item-name');
  85.         lElement = li;
  86.  
  87.         plists.push(listData(lTitle, li));
  88.     });
  89.  
  90. 	plists.sort(SortByTitle);
  91.  
  92.     newList = document.createElement('ul');
  93.     newList.setAttribute('role', 'menu');
  94.     newList.setAttribute('tabindex', '0');
  95.     newList.setAttribute('class', 'yt-uix-kbd-nav yt-uix-kbd-nav-list sorted');
  96. 	
  97. 	for (p in plists)
  98. 	{
  99.         newList.appendChild(plists[p].lElement);
  100. 	}
  101. 	
  102.     listParent.replaceChild(newList, oldList);
  103. }
  104.  
  105. /*** HELPERS ***/
  106.  
  107. //This will sort an array
  108. function SortByTitle(a, b){
  109.     var aName = a.title.toLowerCase();
  110.     var bName = b.title.toLowerCase();
  111.     return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
  112. }
  113.  
  114. //function to populate lists data array
  115. function listData(title, lElement) {
  116.     return {
  117.         title: title,
  118.         lElement: lElement
  119.     }
  120. }