Improve 8bcDump

Improve the interface of the public 8bitcollective archive on brkbrkbrk.com.

当前为 2017-03-30 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Improve 8bcDump
  3. // @namespace Improve8bcDump
  4. // @description Improve the interface of the public 8bitcollective archive on brkbrkbrk.com.
  5. // @include http://brkbrkbrk.com/8bcdump/
  6. // @include https://brkbrkbrk.com/8bcdump/
  7. // @include http://www.brkbrkbrk.com/8bcdump/
  8. // @include https://www.brkbrkbrk.com/8bcdump/
  9. // @version 0.4.3
  10. // @grant none
  11. // @author Jack Willis
  12. // @license MIT; https://opensource.org/licenses/MIT
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. console.log('Improve8bcDump v0.4.3 is active.');
  17.  
  18. // Fix a wrong attribute on the page's external stylesheet.
  19. var stylesheet = document.querySelector('link[type="text/stylesheet"]');
  20. stylesheet.setAttribute('type', 'text/css');
  21.  
  22. // Styles for the last played list
  23. var newStyles = document.createElement('style');
  24. newStyles.textContent += '.lastPlayed li:first-child { font-weight: bold; }';
  25. newStyles.textContent += '.lastPlayed li:first-child:after { content: " (playing)" }';
  26. newStyles.textContent += '.lastPlayed { margin: 1em; padding: 2em; border: 1px solid black; }';
  27. document.body.appendChild(newStyles);
  28. // Create a stack for the last played songs.
  29. // The stack is realized in an <ol>, contained in parentElement.
  30.  
  31. var getSongLinkByIndex = function(index) {
  32. return document.getElementById(index).querySelector('a');
  33. };
  34. function LastPlayedList(maxLength, parentElement) {
  35. // Create a heading for the last played list
  36. var heading = document.createElement('h2');
  37. heading.textContent = 'Last played';
  38. parentElement.appendChild(heading);
  39. // Create the list itself
  40. var list = document.createElement('ol');
  41. list.classList.add('lastPlayed');
  42. parentElement.appendChild(list);
  43. // Push songs through the stack
  44. this.push = function(songNode) {
  45. var nodes = list.childNodes;
  46. if (nodes.length == maxLength) {
  47. list.removeChild(nodes[nodes.length - 1]);
  48. }
  49. list.insertBefore(songNode, nodes[0]);
  50. };
  51.  
  52. this.currentSongInfo = function() {
  53. return list.childNodes[0].querySelector('span').innerHTML;
  54. };
  55. }
  56. // Create a list near the top of the page to hold the last 20 songs
  57. var lastPlayedDiv = document.createElement('div');
  58. document.body.insertBefore(lastPlayedDiv, document.querySelector('h1 + p'));
  59.  
  60. var lastPlayedList = new LastPlayedList(20, lastPlayedDiv);
  61. // The song's information should be added to the last played list.
  62. // Overriding the existing updateID3 method
  63.  
  64. var isBlank = function(str) {
  65. return !str || !(/\w/.test(str));
  66. };
  67.  
  68. window.updateID3 = function(id3) {
  69. var songLi = document.createElement('li');
  70. var songInfo = document.createElement('span');
  71.  
  72. var title = isBlank(id3.title) ? 'Untitled' : ('&ldquo;' + id3.title.trim() + '&rdquo;');
  73. var artist = isBlank(id3.artist) ? 'unknown' : id3.artist.trim();
  74.  
  75. var album = '';
  76. if (!isBlank(id3.album)) {
  77. var em = document.createElement('em');
  78. em.textContent = id3.album;
  79. album = ' on ' + em.outerHTML;
  80. }
  81.  
  82. var songInfoHTML = title + ' by ' + artist + album + '. ';
  83.  
  84. songInfo.innerHTML = songInfoHTML;
  85. window.liID3.innerHTML = songInfoHTML;
  86.  
  87. var originalSongLink = getSongLinkByIndex(window.index);
  88.  
  89. // Create a song link to put in the last played list
  90.  
  91. var secondarySongLink = document.createElement('a');
  92. secondarySongLink.href = originalSongLink.href;
  93. secondarySongLink.textContent = '(' + originalSongLink.textContent + ')';
  94.  
  95. secondarySongLink.onclick = function(e) {
  96. e.preventDefault();
  97. originalSongLink.click();
  98. };
  99.  
  100. songLi.appendChild(songInfo);
  101. songLi.appendChild(secondarySongLink);
  102.  
  103. lastPlayedList.push(songLi);
  104. };
  105.  
  106. // Make sure the player information is the same as on the list due to timing issues
  107. setInterval(function() {
  108. window.liID3.innerHTML = lastPlayedList.currentSongInfo();
  109. }, 250);
  110.  
  111. // Add more buttons to the player interface
  112.  
  113. // The <audio> element
  114. var audio = window.tP.el;
  115.  
  116. var tPControls = document.querySelector('ul.tpControls');
  117.  
  118. var ffLi = document.createElement('li');
  119. ffLi.classList.add('ff');
  120.  
  121. // The player control buttons use Font Awesome icons
  122. var fastForwardButton = document.createElement('i');
  123. fastForwardButton.classList.add('fa', 'fa-fast-forward');
  124.  
  125. ffLi.style.marginLeft = '0.25em';
  126.  
  127. ffLi.appendChild(fastForwardButton);
  128. tPControls.appendChild(ffLi);
  129.  
  130. // Shuffle button uses a checkbox
  131. var shuffleLi = document.createElement('li');
  132. shuffleLi.classList.add('shuffle');
  133.  
  134. var shuffleButton = document.createElement('input');
  135. shuffleButton.setAttribute('type', 'checkbox');
  136.  
  137. var shuffleText = document.createTextNode('Shuffle?');
  138. shuffleLi.style.marginLeft = '1em';
  139.  
  140. shuffleLi.appendChild(shuffleText);
  141. shuffleLi.appendChild(shuffleButton);
  142. tPControls.appendChild(shuffleLi);
  143.  
  144. // The fast forward button triggers the 'ended' event on the audio player.
  145. fastForwardButton.addEventListener('click', function() {
  146. audio.dispatchEvent(new CustomEvent('ended'));
  147. });
  148.  
  149. var randInt = function(max) {
  150. return Math.floor(Math.random() * max);
  151. };
  152.  
  153. audio.addEventListener('ended', function(event) {
  154. event.preventDefault();
  155. event.stopImmediatePropagation();
  156.  
  157. var nextSongIndex = shuffleButton.checked ? randInt(window.archiveAs.length) : window.index;
  158. getSongLinkByIndex(nextSongIndex).click();
  159. });
  160. }());