☰

BeatSaver preview

Preview BeatSaver with +1 Rabbit's BS Viewer (https://skystudioapps.com/bs-viewer/)

  1. // ==UserScript==
  2. // @name         BeatSaver preview
  3. // @namespace    http://ext.ccloli.com
  4. // @version      0.1
  5. // @description  Preview BeatSaver with +1 Rabbit's BS Viewer (https://skystudioapps.com/bs-viewer/)
  6. // @author       864907600cc
  7. // @match        *://beatsaver.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     let lastId;
  15.     const handle = document.createElement('div');
  16.     handle.style.cssText = 'width: 720px; height: 20px; line-height: 20px; background: #ddd; color: #666; cursor: pointer; user-select: none; padding: 0 6px; font-size: 12px; position: absolute; right: 0; bottom: 0; z-index: 999';
  17.     const iframe = document.createElement('iframe');
  18.     iframe.name = 'foo';
  19.     iframe.style.cssText = 'width: 720px; height: 405px; border: 2px solid #ddd; display: block; position: absolute; right: 0; bottom: 20px; background: rgba(255, 255, 255, 0.5); z-index: 999';
  20.     handle.onclick = () => {
  21.         iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none';
  22.     };
  23.  
  24.     const load = () => {
  25.         const id = location.pathname.split('/beatmap/').pop();
  26.         if (!/^[0-9a-f]+$/i.test(id) || lastId === id) {
  27.             return;
  28.         }
  29.         lastId = id;
  30.         const src = `https://skystudioapps.com/bs-viewer/?id=${id}`;
  31.         handle.innerHTML = `+1 Rabbit\'s BS Viewer | <a href="${src}" target="_blank">${src}</a>`;
  32.         iframe.src = src;
  33.         document.body.appendChild(iframe);
  34.         document.body.appendChild(handle);
  35.     };
  36.  
  37.     const history = window.history;
  38.     const pushState = history.pushState;
  39.     const replaceState = history.replaceState;
  40.     window.addEventListener('popstate', load);
  41.     window.history.pushState = (...args) => {
  42.         pushState.apply(history, args);
  43.         load();
  44.     }
  45.     window.history.replaceState = (...args) => {
  46.         replaceState.apply(history, args);
  47.         load();
  48.     }
  49.     load();
  50. })();