Add Speed Slider to Vimeo Player Settings
// ==UserScript==
// @name Vimeo Player Speed Slider
// @namespace vimeo_player_speed_slider
// @version 0.3.0
// @description Add Speed Slider to Vimeo Player Settings
// @author Łukasz
// @include https://*.vimeo.com/*
// @include https://vimeo.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=vimeo.com
// @grant none
// ==/UserScript==
(()=>{"use strict";var e={953:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Checkbox=void 0;const n=s(807);class i extends n.default{constructor(e){super(document.createElement("input")),this.element.checked=e,this.setParams({type:"checkbox",title:"Remember speed"}),this.setStyle({"accent-color":"var(--color-two)",appearance:"auto",width:"16px",height:"16px",margin:"0",padding:"0"})}getValue(){return this.element.checked}setValue(e){this.element.checked=e}}t.Checkbox=i},807:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0});t.default=class{constructor(e){this.element=e}addStyle(e){const t="vis-style";(document.getElementById(t)||function(){const e=document.createElement("style");return e.id=t,document.head.appendChild(e),e}()).innerHTML+=e}setStyle(e){Object.entries(e).forEach((([e,t])=>{this.element.style.setProperty(e,`${t}`)}))}setParams(e){Object.entries(e).forEach((([e,t])=>{let s=`${t}`;void 0!==t&&!1!==t||(s=""),this.element.setAttribute(e,s)}))}setClassName(e){this.element.className=e}event(e,t){this.element.addEventListener(e,t)}getElement(){return this.element}}},693:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DockItem=void 0;const n=s(807),i=s(938);class r extends n.default{constructor(e,t){super(document.createElement("div")),this.label=document.createElement("label"),this.button=document.createElement("button"),this.speedLabel=document.createElement("span"),this.setParams({id:r.ID}),this.initLabel(),this.initButton(),this.label.appendChild(t),this.label.appendChild(e),this.label.appendChild(this.speedLabel),this.event("mouseenter",(()=>this.label.style.removeProperty("display"))),this.event("mouseleave",(()=>this.label.style.setProperty("display","none")))}initLabel(){this.label.style.setProperty("display","none"),this.element.appendChild(this.label)}initButton(){this.button.appendChild(this.getSvg()),this.element.appendChild(this.button)}getSvg(){const e=document.createElementNS("http://www.w3.org/2000/svg","svg");return e.setAttribute("height","20"),e.setAttribute("width","20"),e.setAttribute("viewBox","0 0 20 20"),e.appendChild(this.getPolygon()),e}getPolygon(){const e=document.createElementNS("http://www.w3.org/2000/svg","polygon");return e.setAttribute("fill","white"),e.setAttribute("points","2,1 2,19 11,10 11,19 20,10 11,1 11,10"),e}initClassNames(){if(""!==this.element.className)return;const e=i.Elements.dockItem();e&&this.setClassName(e.className);const t=i.Elements.dockItemButton();t&&(this.button.className=t.className,this.button.type=t.type);const s=i.Elements.dockItemLabel();s&&(this.label.className=s.className,this.label.role=s.role)}updateSpeed(e){this.speedLabel.innerText=e.toFixed(1)}mount(){if(this.initClassNames(),i.Elements.ref(`#${r.ID}`))return!0;const e=i.Elements.dock();return!!e&&(e.appendChild(this.element),!0)}}t.DockItem=r,r.ID="vis-dock-item"},938:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Elements=void 0;const n=s(176);class i{static ref(e){return document.querySelector(e)}static menu(){return i.ref('[data-menu="prefs"] [class^=Menu_module_menuPanel]')}static menuItem(){return i.ref('[data-menu="prefs"] [class^=Menu_module_menuPanel] [class^=MenuOption_module_option]')}static menuLabel(){var e;return null===(e=i.menuItem())||void 0===e?void 0:e.querySelector("span")}static menuSpeedItem(){return[...document.querySelectorAll('[data-menu="prefs"] [class^=MenuOption_module_option]')].find((e=>/Speed/.test(e.innerText)&&e.id!==n.MenuSpeedItem.ID))}static dock(){return i.ref(".vp-sidedock")}static dockItem(){return i.ref(".vp-sidedock>div")}static dockItemButton(){return i.ref(".vp-sidedock>div>button")}static dockItemLabel(){return i.ref(".vp-sidedock>div>label")}static video(){return i.ref(".vp-video video")}}t.Elements=i},176:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MenuSpeedItem=void 0;const n=s(807),i=s(938);class r extends n.default{constructor(e,t){super(document.createElement("div")),this.sliderWrapper=document.createElement("div"),this.label=document.createElement("span"),this.setParams({id:r.ID}),this.element.appendChild(this.label),this.sliderWrapper.appendChild(t),this.sliderWrapper.appendChild(e),this.element.appendChild(this.sliderWrapper),this.initWrapper()}initWrapper(){this.sliderWrapper.style.setProperty("display","flex"),this.sliderWrapper.style.setProperty("align-items","center")}initClassNames(){if(""!==this.element.className)return;const e=i.Elements.menuItem();e&&this.setClassName(e.className);const t=i.Elements.menuLabel();t&&(this.label.className=t.className)}updateSpeed(e){this.label.innerText=`Speed: ${e.toFixed(1)}`}mount(){this.initClassNames();const e=i.Elements.menuSpeedItem();if(console.log(e),e&&e.style.setProperty("display","none"),i.Elements.ref(`#${r.ID}`))return!0;const t=i.Elements.menu();return!!t&&(t.appendChild(this.element),!0)}}t.MenuSpeedItem=r,r.ID="vis-menu-speed-item"},920:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Player=void 0;const n=s(938);t.Player=class{constructor(e){this.setSpeed(e)}setSpeed(e){const t=n.Elements.video();null!==t&&(t.playbackRate=e)}}},220:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Slider=void 0;const n=s(807);class i extends n.default{constructor(e){super(document.createElement("input")),this.setParams({type:"range",min:i.MIN,max:i.MAX,step:.05,value:e.toString()}),this.setClassName("vis-slider"),this.setStyle({background:"#ffffff66",width:"calc(100% - 30px)",height:"6px",outline:"none",margin:"0 10px",padding:"0","border-radius":"3px"}),this.addStyle("\n .vis-slider {\n -webkit-appearance: none;\n }\n \n .vis-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background: var(--color-two);\n cursor: pointer;\n }\n \n .vis-slider::-moz-range-thumb {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background: var(--color-two);\n cursor: pointer;\n }")}setSpeed(e){this.element.value=e.toString()}getSpeed(){return parseFloat(this.element.value)}}t.Slider=i,i.MIN=.5,i.MAX=4},645:(e,t,s)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppController=void 0;const n=s(220),i=s(953),r=s(353),l=s(176),d=s(920),a=s(596),o=s(693),c=s(938);t.AppController=class{constructor(){this.rememberSpeed=new r.Store("vis-remember-speed"),this.speed=new r.Store("vis-speed");const e=this.getSpeed();this.player=new d.Player(e),this.menuSlider=new n.Slider(e),this.dockSlider=new n.Slider(e),this.menuCheckbox=new i.Checkbox(this.rememberSpeed.get(!1)),this.dockCheckbox=new i.Checkbox(this.rememberSpeed.get(!1)),this.dockItem=new o.DockItem(this.dockSlider.getElement(),this.dockCheckbox.getElement()),this.menuSpeedItem=new l.MenuSpeedItem(this.menuSlider.getElement(),this.menuCheckbox.getElement()),this.observer=new a.Observer,this.initEvents(),this.updateSpeed(e)}initEvents(){this.dockSlider.event("change",this.sliderChangeEvent.bind(this)),this.menuSlider.event("change",this.sliderChangeEvent.bind(this)),this.dockSlider.event("input",this.sliderChangeEvent.bind(this)),this.menuSlider.event("input",this.sliderChangeEvent.bind(this)),this.dockSlider.event("wheel",this.sliderWheelEvent.bind(this)),this.menuSlider.event("wheel",this.sliderWheelEvent.bind(this)),this.dockCheckbox.event("change",this.checkboxEvent.bind(this)),this.menuCheckbox.event("change",this.checkboxEvent.bind(this))}sliderChangeEvent(e){this.updateSpeed(parseFloat(e.target.value))}checkboxEvent(e){const t=e.target.checked;this.rememberSpeed.set(t),this.dockCheckbox.setValue(t),this.menuCheckbox.setValue(t)}sliderWheelEvent(e){const t=parseFloat(e.target.value),s=e.deltaY>0?-.05:.05,i=Math.max(n.Slider.MIN,Math.min(t+s,n.Slider.MAX));t!=i&&this.updateSpeed(i),e.preventDefault()}updateSpeed(e){this.speed.set(e),this.player.setSpeed(e),this.menuSpeedItem.updateSpeed(e),this.dockItem.updateSpeed(e),this.dockSlider.setSpeed(e),this.menuSlider.setSpeed(e)}getSpeed(){return this.rememberSpeed.get(!1)?this.speed.get(1):1}mutationCallback(){this.initApp()}initApp(){this.player.setSpeed(this.getSpeed());const e=c.Elements.video();return e&&this.observer.start(e,this.mutationCallback.bind(this)),this.menuSpeedItem.mount(),this.dockItem.mount()}}},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)}}}},t={};function s(n){var i=t[n];if(void 0!==i)return i.exports;var r=t[n]={exports:{}};return e[n](r,r.exports,s),r.exports}(()=>{const e=new(s(645).AppController);function t(){e.initApp()||window.setTimeout(t,2e3)}document.addEventListener("spfdone",t),t()})()})();