You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
2.8 KiB
136 lines
2.8 KiB
6 years ago
|
// ==UserScript==
|
||
|
// @name YouTube Playback speed adjust
|
||
|
// @version 0.9
|
||
|
// @namespace userjs.osm
|
||
|
// @match *://www.youtube.com/*
|
||
|
// @grant none
|
||
|
// ==/UserScript==
|
||
|
|
||
|
"use strict";
|
||
|
|
||
|
|
||
|
class PlaySpeed {
|
||
|
// Dom accessors
|
||
|
get dom_video() {
|
||
|
return document.querySelector("video");
|
||
|
};
|
||
|
|
||
|
get dom_container() {
|
||
|
return document.getElementById("movie_player");
|
||
|
};
|
||
|
|
||
|
// Constructor
|
||
|
constructor() {
|
||
|
let self = this;
|
||
|
|
||
|
this.overlay = null;
|
||
|
this.rate = this.saved_rate;
|
||
|
|
||
|
this.domevent = window.addEventListener("DOMContentLoaded", () => {
|
||
|
let videos = document.getElementsByTagName("video");
|
||
|
|
||
|
if (videos[0])
|
||
|
videos[0].addEventListener("playing", () => {
|
||
|
// Refresh
|
||
|
self.set_rate(self.rate);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
// Handle keypresses
|
||
|
this.keyevent = window.addEventListener("keydown", e => {
|
||
|
// [ :: Decrease speed
|
||
|
// ] :: Increase speed
|
||
|
// Shift- :: Smaller steps
|
||
|
// Alt- :: Coarser steps
|
||
|
if (e.keyCode === 219) // [
|
||
|
self.set_rate(self.rate - self.modifier_step(e));
|
||
|
else if (e.keyCode === 221) // ]
|
||
|
self.set_rate(self.rate + self.modifier_step(e));
|
||
|
// \ :: Restore speed
|
||
|
// Shift-\ :: Save speed
|
||
|
// Alt-\ :: Set speed to 1
|
||
|
else if (e.keyCode === 220) { // \
|
||
|
if (e.altKey)
|
||
|
self.set_rate(1);
|
||
|
else if (e.shiftKey)
|
||
|
self.save();
|
||
|
else
|
||
|
self.restore();
|
||
|
}
|
||
|
});
|
||
|
};
|
||
|
|
||
|
// Get step size from modifier keys
|
||
|
modifier_step(e) {
|
||
|
if (e.shiftKey == e.altKey)
|
||
|
return 0.1;
|
||
|
if (e.shiftKey)
|
||
|
return 0.01;
|
||
|
else if (e.altKey)
|
||
|
return 1;
|
||
|
};
|
||
|
|
||
|
// Speed overlay
|
||
|
do_overlay(rate) {
|
||
|
let div = this.dom_container;
|
||
|
let ol = this.overlay;
|
||
|
|
||
|
if (div) {
|
||
|
let need_overlay = Math.abs(rate - 1) > 0.001;
|
||
|
|
||
|
if (!need_overlay) {
|
||
|
if (ol) {
|
||
|
div.removeChild(ol);
|
||
|
ol = this.overlay = null;
|
||
|
}
|
||
|
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (!ol) {
|
||
|
ol = this.overlay = document.createElement("div");
|
||
|
ol.style.position = "absolute";
|
||
|
ol.style.top = 0;
|
||
|
ol.style.left = 0;
|
||
|
ol.style.zIndex = 10;
|
||
|
div.appendChild(ol);
|
||
|
}
|
||
|
|
||
|
ol.textContent = rate.toPrecision(3);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// set rates
|
||
|
set_rate(rate) {
|
||
|
this.dom_video.playbackRate = rate;
|
||
|
this.do_overlay(rate);
|
||
|
this.rate = rate;
|
||
|
};
|
||
|
|
||
|
// Restore from localstorage
|
||
|
get lst_key() {
|
||
|
return "yt_playspeed_adjust";
|
||
|
};
|
||
|
|
||
|
get saved_rate() {
|
||
|
let saved = window.localStorage.getItem(this.lst_key);
|
||
|
|
||
|
if (saved)
|
||
|
return parseFloat(saved);
|
||
|
else
|
||
|
return 1;
|
||
|
}
|
||
|
|
||
|
restore() {
|
||
|
this.set_rate(this.saved_rate);
|
||
|
}
|
||
|
|
||
|
save() {
|
||
|
window.localStorage.setItem(this.lst_key, this.rate.toPrecision(5));
|
||
|
}
|
||
|
};
|
||
|
|
||
|
|
||
|
const yt_playspeed = new PlaySpeed();
|
||
|
|