Add Speed Slider to Youtube Player Settings
// ==UserScript==
// @name Youtube Player Speed Slider
// @namespace youtube_player_speed_slider
// @version 0.5.0
// @description Add Speed Slider to Youtube Player Settings
// @author Łukasz
// @match https://*.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant none
// ==/UserScript==
(()=>{"use strict";var e={953:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Checkbox=void 0;const i=s(807),n=s(353);class r extends i.default{constructor(){super(document.createElement("input")),this.store=new n.Store("yts-remember-speed"),this.setParams({type:"checkbox",title:"Remember speed",checked:this.store.get()}),this.setStyle({"accent-color":"#f00",width:"20px",height:"20px",margin:"0",padding:"0"})}getValue(){return this.element.checked}}t.Checkbox=r},807:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0});t.default=class{constructor(e){this.element=e}setStyle(e){Object.entries(e).forEach((([e,t])=>{this.element.style.setProperty(e,`${t}`)}))}setParams(e){Object.entries(e).forEach((([e,t])=>{this.element.setAttribute(e,`${t}`)}))}setClasName(e){this.element.className=e}event(e,t){this.element.addEventListener(e,t)}getElement(){return this.element}}},620:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const i=s(807);class n extends i.default{constructor(){super(document.createElement("div")),this.path="M10.01,8v8l6-4L10,8L10,8z M6.3,5L5.7,4.2C7.2,3,9,2.2,11,2l0.1,1C9.3,3.2,7.7,3.9,6.3,5z M5,6.3L4.2,5.7C3,7.2,2.2,9,2,11 l1,.1C3.2,9.3,3.9,7.7,5,6.3z M5,17.7c-1.1-1.4-1.8-3.1-2-4.8L2,13c0.2,2,1,3.8,2.2,5.4L5,17.7z M11.1,21c-1.8-0.2-3.4-0.9-4.8-2 l-0.6,.8C7.2,21,9,21.8,11,22L11.1,21z M22,12c0-5.2-3.9-9.4-9-10l-0.1,1c4.6,.5,8.1,4.3,8.1,9s-3.5,8.5-8.1,9l0.1,1 C18.2,21.5,22,17.2,22,12z",this.element.innerHTML=`<svg height="24" viewBox="0 0 24 24" width="24"><path d="${this.path}" fill="white" /></svg>`,this.setClasName("ytp-menuitem-icon")}}t.Icon=n},489:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Label=void 0;const i=s(807);class n extends i.default{constructor(e,t="Speed"){super(document.createElement("div")),this.speed="1.0",this.label=t,this.setClasName("ytp-menuitem-label"),this.updateSpeed(e)}updateLabel(e="Speed"){this.label=e,this.updateText()}updateSpeed(e){this.speed=e.toFixed(1),this.updateText()}updateText(){this.element.innerHTML=`${this.label}: ${this.speed}`}}t.Label=n},500:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Menu=void 0;const i=s(45),n=s(825);t.Menu=class{constructor(){this.getMenu()}getMenu(){return document.querySelector(".ytp-settings-menu .ytp-panel-menu")}getDefaultMenuItem(){const e=[...document.querySelectorAll(".ytp-menuitem")].filter((e=>{var t;const s=null===(t=e.querySelector(".ytp-menuitem-icon path"))||void 0===t?void 0:t.getAttribute("d");return null==s?void 0:s.startsWith("M10,8v8l6-4L10,")}));if(e.length)return e[0]}getLabel(){var e,t;return null===(t=null===(e=this.getDefaultMenuItem())||void 0===e?void 0:e.querySelector(".ytp-menuitem-label"))||void 0===t?void 0:t.innerHTML}async reopenMenu(){var e,t;const s=document.querySelector(".ytp-settings-button"),i=this.getMenu();i&&this.menuHasCustomItem(i)||s&&(null===(e=null==i?void 0:i.style)||void 0===e||e.setProperty("opacity","0"),s.click(),await(0,n.delay)(50),s.click(),null===(t=null==i?void 0:i.style)||void 0===t||t.setProperty("opacity","1"),await(0,n.delay)(50))}menuHasCustomItem(e){return Boolean(e.querySelector(`#${i.SpeedMenuItem.ID}`))}addCustomSpeedItem(e){var t;const s=this.getMenu(),i=this.getDefaultMenuItem();return null!==s&&(this.menuHasCustomItem(s)?(null===(t=null==i?void 0:i.parentNode)||void 0===t||t.removeChild(i),!0):(i?i.replaceWith(e.getElement()):s.appendChild(e.getElement()),!0))}}},920:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Player=void 0;t.Player=class{constructor(e){this.setSpeed(e)}getPlayer(){return document.querySelector(".html5-main-video")}setSpeed(e){const t=this.getPlayer();t&&(t.playbackRate=e)}}},220:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Slider=void 0;const i=s(807);class n extends i.default{constructor(e){super(document.createElement("input")),this.min=.5,this.max=4,this.setParams({type:"range",min:this.min,max:this.max,step:.05,value:e.toString()}),this.setStyle({"accent-color":"#f00",width:"calc(100% - 30px)",margin:"0 5px",padding:"0"})}setSpeed(e){this.element.value=e.toString()}getSpeed(){return parseFloat(this.element.value)}}t.Slider=n},45:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SpeedMenuItem=void 0;const i=s(807);class n extends i.default{constructor(){super(document.createElement("div")),this.sliderWrapper=document.createElement("div"),this.setParams({id:n.ID}),this.setClasName("ytp-menuitem"),this.sliderWrapper.className="ytp-menuitem-content"}addElement(e,t,s,i){this.element.appendChild(e),this.element.appendChild(t),this.sliderWrapper.appendChild(i),this.sliderWrapper.appendChild(s),this.element.appendChild(this.sliderWrapper)}}t.SpeedMenuItem=n,n.ID="yts-speed-menu-item"},645:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppController=void 0;const i=s(620),n=s(489),r=s(220),l=s(953),d=s(353),a=s(45),o=s(500),u=s(920),h=s(596);t.AppController=class{constructor(){this.rememberSpeed=new d.Store("yts-remember-speed"),this.speed=new d.Store("yts-speed");const e=this.getSpeed();this.menu=new o.Menu,this.player=new u.Player(e),this.speedMenuItem=new a.SpeedMenuItem,this.icon=new i.Icon,this.label=new n.Label(e),this.slider=new r.Slider(e),this.checkbox=new l.Checkbox,this.observer=new h.Observer,this.speedMenuItem.addElement(this.icon.getElement(),this.label.getElement(),this.slider.getElement(),this.checkbox.getElement()),this.initEvents()}initEvents(){this.slider.event("change",this.sliderChangeEvent.bind(this)),this.slider.event("input",this.sliderChangeEvent.bind(this)),this.slider.event("wheel",this.sliderWheelEvent.bind(this)),this.checkbox.event("change",this.checkboxEvent.bind(this)),document.addEventListener("spfdone",this.initApp.bind(this))}sliderChangeEvent(e){this.updateSpeed(this.slider.getSpeed())}checkboxEvent(e){this.rememberSpeed.set(this.checkbox.getValue())}sliderWheelEvent(e){const t=this.slider.getSpeed(),s=e.deltaY>0?-.05:.05,i=Math.max(this.slider.min,Math.min(t+s,this.slider.max));t!=i&&(this.slider.setSpeed(i),this.updateSpeed(i)),e.preventDefault()}updateSpeed(e){this.speed.set(e),this.player.setSpeed(e),this.label.updateSpeed(e)}getSpeed(){return this.rememberSpeed.get()?this.speed.get(1):1}mutationCallback(){this.initApp()}async initApp(){this.player.setSpeed(this.getSpeed()),await this.menu.reopenMenu();const e=this.menu.getLabel();e&&this.label.updateLabel(e);const t=this.player.getPlayer();return t&&this.observer.start(t,this.mutationCallback.bind(this)),this.menu.addCustomSpeedItem(this.speedMenuItem)}}},596:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Observer=void 0;t.Observer=class{stop(){this.observer&&this.observer.disconnect()}start(e,t){this.stop(),this.observer=new MutationObserver(t),this.observer.observe(e,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeOldValue:!0,characterDataOldValue:!0})}}},353:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Store=void 0;t.Store=class{constructor(e){this.key=e}encode(e){return JSON.stringify(e)}decode(e){return JSON.parse(e)}set(e){try{localStorage.setItem(this.key,this.encode(e))}catch(e){return}}get(e=void 0){try{const t=localStorage.getItem(this.key);return t?this.decode(t):e}catch(t){return e}}remove(){localStorage.removeItem(this.key)}}},825:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.delay=void 0,t.delay=async function(e=1e3){return await new Promise((t=>{setTimeout(t,e)}))}}},t={};function s(i){var n=t[i];if(void 0!==n)return n.exports;var r=t[i]={exports:{}};return e[i](r,r.exports,s),r.exports}(()=>{const e=new(s(645).AppController);async function t(){await e.initApp()||window.setTimeout(t,2e3)}document.addEventListener("spfdone",t),t()})()})();