BetterYTM-Mirror/BetterYTM.user.js

// ==UserScript==
// @name            BetterYTM
// @homepageURL     https://github.com/Sv443/BetterYTM#readme
// @namespace       https://github.com/Sv443/BetterYTM
// @version         1.0.0
// @description     Improvements for YouTube Music
// @description:de  Verbesserungen für YouTube Music
// @license         MIT
// @author          Sv443
// @copyright       Sv443 <[email protected]>
// @match           https://music.youtube.com/*
// @match           https://www.youtube.com/*
// @icon            https://raw.githubusercontent.com/Sv443/BetterYTM/main/resources/icon/v2.1_200.png
// @run-at          document-start
// @grant           GM.getValue
// @grant           GM.setValue
// @connect         self
// @connect         youtube.com
// @connect         github.com
// @connect         githubusercontent.com
// @downloadURL     https://github.com/Sv443/BetterYTM/raw/main/BetterYTM.user.js
// @updateURL       https://github.com/Sv443/BetterYTM/raw/main/BetterYTM.user.js
// ==/UserScript==
/*
 ▄▄▄                    ▄   ▄▄▄▄▄▄   ▄
 █  █ ▄▄▄ █   █   ▄▄▄ ▄ ▄█ █  █  █▀▄▀█
 █▀▀▄ █▄█ █▀  █▀  █▄█ █▀  █   █  █   █
 █▄▄▀ ▀▄▄ ▀▄▄ ▀▄▄ ▀▄▄ █   █   █  █   █

         Made with ❤️ by Sv443
 I welcome every contribution on GitHub! */

/* Disclaimer: I am not affiliated with YouTube, Google, Alphabet, Genius or anyone else */
/* C&D this 🖕 */

!function(){"use strict";var e={d:function(t,n){for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}};function t(){const{hostname:e}=new URL(location.href);if(e.includes("music.youtube"))return"ytm";if(e.includes("youtube"))return"yt";throw new Error("BetterYTM is running on an unexpected website")}function n(e,t){var n;return null===(n=e.parentNode)||void 0===n||n.insertBefore(t,e.nextSibling),t}function o(e,t){"string"==typeof t&&0!==t.length||(t=String(Math.floor(1e4*Math.random())));const n=document.createElement("style");n.id=`betterytm-style-${t}`,n.innerHTML=e,document.querySelector("head").appendChild(n),Y&&console.log(`BetterYTM: Inserted global style with ref '${t}':`,n)}function i(e){var t,n;if(["ArrowLeft","ArrowRight"].includes(e.code)){if(["INPUT","TEXTAREA","SELECT"].includes(null!==(n=null===(t=document.activeElement)||void 0===t?void 0:t.tagName)&&void 0!==n?n:"_"))return Y&&console.info(`BetterYTM: Captured valid key but the current active element is <${document.activeElement.tagName.toLowerCase()}>, so the keypress is ignored`);Y&&console.log(`BetterYTM: Captured key '${e.code}' in proxy listener`);const o={altKey:!1,ctrlKey:!1,metaKey:!1,shiftKey:!1,target:document.body,currentTarget:document.body,originalTarget:document.body,explicitOriginalTarget:document.body,srcElement:document.body,type:"keydown",bubbles:!0,cancelBubble:!1,cancelable:!0,isTrusted:!0,repeat:!1};let i=!1,r={};switch(e.code){case"ArrowLeft":r={code:"KeyH",key:"h",keyCode:72,which:72};break;case"ArrowRight":r={code:"KeyL",key:"l",keyCode:76,which:76};break;default:i=!0}if(i)Y&&console.warn(`BetterYTM: Captured key '${e.code}' has no defined behavior`);else{const t=Object.assign(Object.assign({code:""},o),r);document.body.dispatchEvent(new KeyboardEvent("keydown",t)),Y&&console.log(`BetterYTM: Dispatched proxy keydown event: [${e.code}] -> [${t.code}]`)}}}e.d({},{LV:function(){return Y},um:function(){return R},k3:function(){return O},j_:function(){return L}});var r=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function c(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,c)}s((o=o.apply(e,t||[])).next())}))};let l;function c(){return r(this,void 0,void 0,(function*(){l=yield M()}))}const s=Y?"develop":"main";function a(){const e=document.querySelector("#betterytm-menu-bg");e.style.visibility="hidden",e.style.display="none"}let d=0;function u(){const e=document.querySelector('.ytmusic-nav-bar ytmusic-pivot-bar-item-renderer[tab-id="SPunlimited"]');e?(e.remove(),Y&&console.log(`BetterYTM: Removed upgrade tab after ${d} tries`)):d<L?(setTimeout(u,O),d++):console.error(`BetterYTM: Couldn't find upgrade tab to remove after ${d} tries`)}function m(){const{volumeSliderSize:e}=l;"number"!=typeof e||isNaN(Number(e))||o(`.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar {\n    width: ${e}px !important;\n}`,"vol_slider_size")}function y(){document.querySelector("tp-yt-paper-slider#volume-slider").setAttribute("step",String(l.volumeSliderStep))}var p=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function c(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,c)}s((o=o.apply(e,t||[])).next())}))};const f="https://api.sv443.net/geniurl",g=`${f}/search/top`;let h="",b=0;function v(){return p(this,void 0,void 0,(function*(){const e=document.querySelector(".middle-controls-buttons ytmusic-like-button-renderer#like-button-renderer");if(!e)return b++,b<L?setTimeout(v,O):console.error(`BetterYTM: Couldn't find element to append lyrics buttons to after ${b} tries`);const t=document.querySelector(".content-info-wrapper > yt-formatted-string"),i=yield x(),r=document.createElement("a");r.id="betterytm-lyrics-button",r.className="ytmusic-player-bar",r.title=i?"Click to open this song's lyrics in a new tab":"Loading...",i&&(r.href=i),r.target="_blank",r.rel="noopener noreferrer",r.style.visibility=i?"initial":"hidden",r.style.display=i?"inline-flex":"none",o("    #betterytm-lyrics-button {\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      vertical-align: middle;\n\n      margin-left: 8px;\n      width: 40px;\n      height: 40px;\n      border-radius: 100%;\n      background-color: transparent;\n    }\n\n    #betterytm-lyrics-button:hover {\n      background-color: #383838;\n    }\n\n    #betterytm-lyrics-img {\n      display: inline-block;\n      z-index: 10;\n      width: 24px;\n      height: 24px;\n      padding: 5px;\n    }","lyrics");const l=document.createElement("img");l.id="betterytm-lyrics-img",l.src="https://raw.githubusercontent.com/Sv443/BetterYTM/main/resources/external/genius.png",r.appendChild(l),Y&&console.log(`BetterYTM: Inserted genius button after ${b} tries:`,r),n(e,r),h=t.title,new MutationObserver((e=>{var t,n,o;return p(this,void 0,void 0,(function*(){var i,r,l,c;try{for(t=!0,n=function(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e="function"==typeof __values?__values(e):e[Symbol.iterator](),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(n){t[n]=e[n]&&function(t){return new Promise((function(o,i){!function(e,t,n,o){Promise.resolve(o).then((function(t){e({value:t,done:n})}),t)}(o,i,(t=e[n](t)).done,t.value)}))}}}(e);!(i=(o=yield n.next()).done);){c=o.value,t=!1;try{const e=c.target.title;if(e!=h&&e.length>0){const t=document.querySelector("#betterytm-lyrics-button");if(!t)return;Y&&console.log(`BetterYTM: Song title changed from '${h}' to '${e}'`),t.style.cursor="wait",t.style.pointerEvents="none",h=e;const n=yield x();if(!n)continue;t.href=n,t.title="Click to open this song's lyrics in a new tab",t.style.cursor="pointer",t.style.visibility="initial",t.style.display="inline-flex",t.style.pointerEvents="initial"}}finally{t=!0}}}catch(e){r={error:e}}finally{try{t||i||!(l=n.return)||(yield l.call(n))}finally{if(r)throw r.error}}}))})).observe(t,{attributes:!0,attributeFilter:["title"]})}))}function x(){var e,t;return p(this,void 0,void 0,(function*(){try{const n="string"==typeof(null===(e=document.querySelector("ytmusic-player"))||void 0===e?void 0:e.getAttribute("video-mode_")),o=document.querySelector(".content-info-wrapper > yt-formatted-string"),i=document.querySelector("span.subtitle > yt-formatted-string:first-child");if(!o||!i||!o.title)return null;const r=e=>e.replace(/\(.+\)/gim,"").replace(/\[.+\]/gim,"").trim(),l=e=>((e=e.split(/\s*\u2022\s*/gimu)[0]).match(/&/)&&(e=e.split(/\s*&\s*/gm)[0]),e.match(/,/)&&(e=e.split(/,\s*/gm)[0]),e.trim()),c=r(o.title),s=l(i.title),a=()=>p(this,void 0,void 0,(function*(){if(!c.includes("-"))return yield w(s,c);const[e,...t]=c.split("-").map((e=>e.trim()));return yield w(e,t.join(" "))}));return n?yield a():null!==(t=yield w(s,c))&&void 0!==t?t:yield a()}catch(e){return console.error("BetterYTM: Couldn't resolve genius.com URL:",e),null}}))}function w(e,t){return p(this,void 0,void 0,(function*(){try{const n=`${g}?artist=${encodeURIComponent(e)}&song=${encodeURIComponent(t)}`;Y&&console.log(`BetterYTM: Requesting URL from geniURL at '${n}'`);const o=yield(yield fetch(n)).json();if(o.error)return void console.error("BetterYTM: Couldn't fetch genius.com URL:",o.message);const i=o.url;return Y&&console.info(`BetterYTM: Found genius URL: ${i}`),i}catch(e){return void console.error("BetterYTM: Couldn't get genius URL due to error:",e)}}))}const k={arrowKeySupport:{desc:"Arrow keys skip forwards and backwards by 10 seconds",type:"toggle",default:!0},removeUpgradeTab:{desc:'Remove the "Upgrade" / YT Music Premium tab',type:"toggle",default:!0},switchBetweenSites:{desc:"Add F9 as a hotkey to switch between the YT and YTM sites on a video / song",type:"toggle",default:!0},geniusLyrics:{desc:"Add a button to the media controls to open the current song's lyrics on genius.com in a new tab",type:"toggle",default:!0},lyricsButtonsOnSongQueue:{desc:'TODO: Add a lyrics button to each song in the queue ("up next" tab)',type:"toggle",default:!0},volumeSliderSize:{desc:"The width of the volume slider in pixels",type:"number",min:10,max:1e3,step:5,default:160},volumeSliderStep:{desc:"Volume slider sensitivity - the smaller this number, the finer the volume control",type:"slider",min:1,max:20,default:2},watermarkEnabled:{desc:"Show a BetterYTM watermark under the YTM logo",type:"toggle",default:!0}};var T=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function c(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,c)}s((o=o.apply(e,t||[])).next())}))};const S=Object.keys(k).reduce(((e,t)=>(e[t]=k[t].default,e)),{});let E;function M(e=!1){return T(this,void 0,void 0,(function*(){let t;if(void 0===E||e){const e=yield function(){return T(this,void 0,void 0,(function*(){const e=Object.freeze(Object.assign({},S));try{const t=yield GM.getValue("betterytm-config");return"string"!=typeof t?(yield $(),E=e):Object.freeze(t?JSON.parse(t):{})}catch(t){return yield $(),E=e}}))}();E=t=Object.assign(Object.assign({},S),e),yield C(t)}return E}))}function C(e){if(!e||"object"!=typeof e)throw new TypeError("Feature config not provided or invalid");return GM.setValue("betterytm-config",JSON.stringify(e))}function $(){return GM.setValue("betterytm-config",JSON.stringify(S))}var B=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function c(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,c)}s((o=o.apply(e,t||[])).next())}))};const Y=!0,L=50,O=150,R=Object.freeze({name:GM.info.script.name,version:GM.info.script.version,namespace:GM.info.script.namespace});B(void 0,void 0,void 0,(function*(){const e=yield M();yield c();try{console.log(`${R.name} v${R.version} - ${R.namespace}`),console.log(`Powered by lots of ambition and my song metadata API called geniURL: ${f}`),document.addEventListener("DOMContentLoaded",(function(){return B(this,void 0,void 0,(function*(){const l=t();Y&&console.log(`BetterYTM: Initializing features for domain '${l}'`);try{if("ytm"===l&&(e.arrowKeySupport&&(document.addEventListener("keydown",i),Y&&console.log("BetterYTM: Added key press listener")),e.removeUpgradeTab&&u(),e.watermarkEnabled&&function(){const e=document.createElement("span");e.id="betterytm-watermark",e.className="style-scope ytmusic-nav-bar",e.innerText=R.name,e.title="Open menu",e.addEventListener("click",(()=>function(){const e=document.querySelector("#betterytm-menu-bg");e.style.visibility="visible",e.style.display="block"}())),o("#betterytm-watermark {\n  font-size: 10px;\n  display: inline-block;\n  position: absolute;\n  left: 45px;\n  top: 46px;\n  z-index: 10;\n  color: white;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n@media(max-width: 615px) {\n  #betterytm-watermark {\n    display: none;\n  }\n}\n\n#betterytm-watermark:hover {\n  text-decoration: underline;\n}","watermark"),n(document.querySelector("#left-content"),e),Y&&console.log("BetterYTM: Added watermark element:",e)}(),e.geniusLyrics&&(yield v()),e.lyricsButtonsOnSongQueue&&(yield function(){return p(this,void 0,void 0,(function*(){}))}()),"number"==typeof e.volumeSliderSize&&m(),y()),["ytm","yt"].includes(l)){e.switchBetweenSites&&function(e){document.addEventListener("keydown",(n=>{"F9"==n.key&&function(e){var n;try{let o;if("ytm"===e?o="music":"yt"===e&&(o="www"),!o)throw new TypeError(`Unrecognized domain '${e}'`);const{pathname:i,search:r,hash:l}=new URL(location.href),c=null!==(n=function(){var e;const n=t();try{return"ytm"===n?null!==(e=document.querySelector("#progress-bar").value)&&void 0!==e?e:null:"yt"===n?0:null}catch(e){return console.error("BetterYTM: Couldn't get video time due to error:",e),null}}())&&void 0!==n?n:0;Y&&console.log(`BetterYTM: Found video time of ${c} seconds`);const s=`https://${o}.youtube.com${i}${r.includes("?")?`${r}&t=${c}`:`?t=${c}`}${l}`;console.info(`BetterYTM - switching to domain '${e}' at ${s}`),location.href=s}catch(e){console.error("BetterYTM: Error while switching site:",e)}}("yt"===e?"ytm":"yt")})),Y&&console.log("BetterYTM: Initialized site switch listener")}(l);try{!function(){var e;r(this,void 0,void 0,(function*(){const t=document.createElement("div");t.id="betterytm-menu-bg",t.title="Click here to close the menu",t.style.visibility="hidden",t.style.display="none",t.addEventListener("click",(e=>{"betterytm-menu-bg"===e.target.id&&a()}));const n=document.createElement("div");n.title="",n.id="betterytm-menu",n.style.borderRadius="15px",n.style.display="flex",n.style.flexDirection="column",n.style.justifyContent="space-between";const i=document.createElement("div");i.style.padding="8px 20px 15px 8px",i.style.display="flex",i.style.justifyContent="space-between",i.id="betterytm-menu-titlecont";const l=document.createElement("h2");l.id="betterytm-menu-title",l.innerText="BetterYTM - Configuration";const c=document.createElement("div");c.id="betterytm-menu-linkscont";const d=(e,t,n)=>{const o=document.createElement("a");o.className="betterytm-menu-link",o.rel="noopener noreferrer",o.target="_blank",o.href=t,o.title=n,o.style.marginLeft="10px";const i=document.createElement("img");i.className="betterytm-menu-img",i.src=e,i.style.width="32px",i.style.height="32px",o.appendChild(i),c.appendChild(o)};d(`https://raw.githubusercontent.com/Sv443/BetterYTM/${s}/resources/external/github.png`,R.namespace,`${R.name} on GitHub`),d(`https://raw.githubusercontent.com/Sv443/BetterYTM/${s}/resources/external/greasyfork.png`,"https://greasyfork.org/xyz",`${R.name} on GreasyFork`);const u=document.createElement("img");u.id="betterytm-menu-close",u.src=`https://raw.githubusercontent.com/Sv443/BetterYTM/${s}/resources/icon/close.png`,u.title="Click to close the menu",u.style.marginLeft="50px",u.style.width="32px",u.style.height="32px",u.addEventListener("click",a),c.appendChild(u),i.appendChild(l),i.appendChild(c);const m=document.createElement("div");m.id="betterytm-menu-opts",m.style.display="flex",m.style.flexDirection="column";const y=(e,t,n)=>r(this,void 0,void 0,(function*(){Y&&console.info(`BetterYTM: Feature config changed, key '${e}' from value '${t}' to '${n}'`);const o=Object.assign({},yield M());o[e]=n,yield C(o),Y&&console.log("BetterYTM: Saved feature config changes:\n",yield GM.getValue("betterytm-config"))})),p=yield M(),f=Object.keys(p);for(const t of f){const n=k[t];if(!n)continue;const{desc:o,type:i,default:r}=n,l=null!==(e=null==n?void 0:n.step)&&void 0!==e?e:void 0,c=p[t]||r||void 0,s=document.createElement("div");s.id=`betterytm-ftconf-${t}`,s.style.display="flex",s.style.flexDirection="row",s.style.justifyContent="space-between",s.style.padding="8px 20px";{const e=document.createElement("span");e.style.display="inline-block",e.style.fontSize="15px",e.innerText=o,s.appendChild(e)}{let e="text";switch(i){case"toggle":e="checkbox";break;case"slider":e="range";break;case"number":e="number"}const o=`betterytm-ftconf-${t}-input`,a=document.createElement("span");a.style.display="inline-block",a.style.whiteSpace="nowrap";const d=document.createElement("input");d.id=o,d.style.marginRight="37px",d.type=e,"toggle"===i&&(d.style.marginLeft="5px"),void 0!==c&&(d.value=String(c)),"number"===i&&l&&(d.step=l),n.min&&n.max&&(d.min=n.min,d.max=n.max),"toggle"===i&&void 0!==c&&(d.checked=Boolean(c));const u=e=>String(e),m=e=>e?"On":"Off";let p;"slider"===i?(p=document.createElement("label"),p.classList.add("betterytm-ftconf-label"),p.style.marginRight="20px",p.style.fontSize="16px",p.htmlFor=o,p.innerText=u(c),d.addEventListener("input",(()=>{p&&(p.innerText=u(parseInt(d.value)))}))):"toggle"===i&&void 0!==c&&(p=document.createElement("label"),p.classList.add("betterytm-ftconf-label"),p.style.paddingLeft="10px",p.style.paddingRight="5px",p.style.fontSize="16px",p.htmlFor=o,p.innerText=m(Boolean(c)),d.addEventListener("input",(()=>{p&&(p.innerText=m(d.checked))}))),d.addEventListener("input",(({currentTarget:e})=>{const n=e;let o=parseInt(n.value);isNaN(o)&&(o=Number(n.value)),void 0!==c&&y(t,c,"toggle"!==i?o:n.checked)}));const f=document.createElement("button");f.innerText="Reset",f.addEventListener("click",(()=>{d["toggle"!==i?"value":"checked"]=r,p&&(p.innerText="toggle"===i?m(d.checked):u(parseInt(d.value))),void 0!==c&&y(t,c,r)})),p&&a.appendChild(p),a.appendChild(d),a.appendChild(f),s.appendChild(a)}m.appendChild(s)}const g=document.createElement("div");g.style.marginTop="20px",g.style.fontSize="17px",g.style.textDecoration="underline",g.style.padding="8px 20px",g.innerText="You need to reload the page to apply changes.";const h=document.createElement("button");h.style.marginLeft="20px",h.innerText="Reload now",h.title="Click to reload the page",h.addEventListener("click",(()=>location.reload())),g.appendChild(h),m.appendChild(g);const b=document.createElement("div");b.id="betterytm-menu-body",b.appendChild(i),b.appendChild(m);const v=document.createElement("div");v.style.display="flex",v.style.justifyContent="space-around",v.style.fontSize="1.15em",v.style.marginTop="10px",v.style.marginBottom="5px";const x=document.createElement("span");x.id="betterytm-menu-version",x.innerText=`v${R.version}`,v.appendChild(x),m.appendChild(v),n.appendChild(b),n.appendChild(v),t.appendChild(n),document.body.appendChild(t),Y&&console.log("BetterYTM: Added menu elem:",t),o("#betterytm-menu-bg {\n  display: block;\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  z-index: 15;\n  background-color: rgba(0, 0, 0, 0.6);\n}\n\n#betterytm-menu {\n  display: inline-block;\n  position: fixed;\n  width: 50vw;\n  height: auto;\n  min-height: 500px;\n  left: 25vw;\n  top: 25vh;\n  z-index: 16;\n  overflow: auto;\n  padding: 8px;\n  color: #fff;\n  background-color: #212121;\n}\n\n#betterytm-menu-titlecont {\n  display: flex;\n}\n\n#betterytm-menu-title {\n  font-size: 20px;\n  margin-top: 5px;\n  margin-bottom: 8px;\n}\n\n#betterytm-menu-linkscont {\n  display: flex;\n}\n\n.betterytm-menu-link {\n  display: inline-block;\n}\n\n/*.betterytm-menu-img {\n\n}*/\n\n#betterytm-menu-close {\n  cursor: pointer;\n}\n\n.betterytm-ftconf-label {\n  user-select: none;\n}","menu")}))}()}catch(e){console.error("BetterYTM: Couldn't add menu:",e)}}}catch(e){console.error("BetterYTM: General error while executing feature:",e)}}))}))}catch(e){console.error("BetterYTM - General Error:",e)}}))}();