youtube video progressbar outline & color replacement
// ==UserScript==
// @name YouTube restyle
// @namespace http://tampermonkey.net/
// @version 1.0
// @description youtube video progressbar outline & color replacement
// @author Roman Sergeev aka naxombl4 aka Brutal Doomer
// @match https://www.youtube.com/*
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
/**
* v1.0 added comments, added --vars, removed timeout function changing svg path fill
* added surveyLoadProgresses from another script
* added replacer of YT logos
* v0.1 original script
*/
(function() {
'use strict';
// replace youtube logo on the browser tab with image of corresponding color (changing the theme, you have to upload your own)
document.getElementsByTagName('link')[1].setAttribute("href", "https://dl.dropboxusercontent.com/s/9avoipkut6ydydu/32.png");
document.getElementsByTagName('link')[2].setAttribute("href", "https://dl.dropboxusercontent.com/s/8mujk3poo7nvxsm/48.png");
document.getElementsByTagName('link')[3].setAttribute("href", "https://dl.dropboxusercontent.com/s/5zrmlvm9uy1zran/96.png");
document.getElementsByTagName('link')[4].setAttribute("href", "https://dl.dropboxusercontent.com/s/6goosuv17qzvgit/144.png");
//var notificationImageSrc = "https://www.dropbox.com/scl/fi/uxal14y48igxdp02hy8n9/notification.png"; // dropbox has changed their storing method, yet old links still work. You can't modify links due to CORB policy, so...
// Here's the replacement image in Base64, size 64x64px. If you change the theme - change this as well
// Original image is at https://www.gstatic.com/images/branding/product/2x/youtube_96in128dp.png
var notificationImageSrc64 = "data:image/jpeg;base64,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";
var colour = "#558",
darken = "#447",
bright = "#669",
prgbar = "#0f06",
prgend = "#0f0";
GM_addStyle(`
:root {
--colour: `+colour+`;
--darken: `+darken+`;
--bright: `+bright+`;
--prgbar: `+prgbar+`;
--prgend: `+prgend+`;
}
html[refresh],
[refresh] {
--yt-spec-static-brand-red: var(--colour);
--yt-spec-red-indicator: var(--colour);
}
span.mention.yt-live-chat-text-message-renderer {
background: var(--colour) !important; /* live chat mention background replacement (doesn't work) */
}
div.ytp-chapter-hover-container,
div.ytp-chapter-hover-container>div {
outline: none;
}
div.ytp-load-progress {
background-color: var(--prgbar);
}
div.ytp-load-progress div.progressBarAfter {
position: absolute;
height: 100%;
right: 0;
background-color: var(--prgend);
}
.ytp-hover-progress.ytp-hover-progress-light {
background-color: var(--prgbar);
}
div.ytp-swatch-background-color,
button.ytp-settings-button.ytp-hd-quality-badge::after {
background-color: var(--darken);
}
html:not(.style-scope)[dark], :not(.style-scope)[dark] {
--yt-spec-static-overlay-background-brand: var(--colour);
--yt-spec-brand-button-background: var(--darken);
--yt-spec-light-blue: var(--colour);
--yt-spec-call-to-action: var(--colour);
--yt-live-chat-mention-background-color: var(--colour);
}
sup.ytp-swatch-color {
color: var(--colour);
}
div.ytp-cairo-refresh-signature-moments .ytp-play-progress {
background: var(--colour);
}
span.badge-style-type-live-now.ytd-badge-supported-renderer {
--yt-spec-brand-link-text: var(--bright);
}
span.mention.style-scope.yt-live-chat-text-message-renderer,
.mention.yt-live-chat-text-message-renderer {
background: var(--colour) !important;
}
ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-web] #progress.ytd-thumbnail-overlay-resume-playback-renderer {
background: linear-gradient(to right, var(--darken) 80%, var(--colour) 100%);
}
span.mention.yt-live-chat-text-message-renderer {
background: none;
border: 2px solid var(--colour);
border-radius: 9px;
}
.guide-entry-badge.ytd-guide-entry-renderer {
--yt-spec-static-brand-red: #77a;
}
#newness-dot.ytd-guide-entry-renderer {
--yt-spec-themed-blue: var(--colour);
}
yt-icon#logo-icon svg>g:first-child>path:first-child {
fill: var(--colour);
}
svg>g>g.style-scope.ytd-topbar-logo-renderer>path {
fill: var(--colour);
}
div#title-container svg>path:first-child {
fill: var(--colour);
}
button.ytp-live-badge[disabled]:before {
background: var(--colour);
}
#progress.ytd-thumbnail-overlay-resume-playback-renderer {
--yt-spec-static-brand-red: var(--colour);
}
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
background: var(--colour);
}
.badge-style-type-live-now.ytd-badge-supported-renderer {
--yt-spec-brand-link-text: var(--bright);
}
ytd-thumbnail-overlay-toggle-button-renderer[aria-label="Добавить в очередь"] {
display: none !important;
pointer-events: none !important;
}
.yt-spec-avatar-shape--cairo-refresh.yt-spec-avatar-shape--live-ring::after {
background: linear-gradient(to top right, var(--darken) 60%, var(--bright) 85%);
}
.yt-spec-avatar-shape--cairo-refresh .yt-spec-avatar-shape__live-badge {
background: var(--darken);
}
.yt-spec-icon-badge-shape--type-notification-refresh .yt-spec-icon-badge-shape__badge {
background: var(--darken);
}
/*#item-scroller path.style-scope.yt-icon {
fill: var(--colour);
}*/`);
// update marker position
function surveyLoadProgresses() {
var targets = Array.from(document.getElementsByClassName("ytp-load-progress"));
for (var i = 0; i < targets.length; i++) {
var target = targets[i];
if (target.children.length == 0) {
var div = document.createElement("div");
div.className = "progressBarAfter";
target.appendChild(div);
}
div = target.children[0];
var progress = /\d+(\.\d+)?/.exec(target.style.transform)[0];
div.style.width = (7 / progress) + "px"; // I don't remember why, but ok
if (progress == 0 || progress == 1 && i != targets.length - 1)
div.style.width = 0;
}
//console.log(targets.map(x => /\d+(\.\d+)?/.exec(x.style.transform)[0]).join(" "));
}
setInterval(surveyLoadProgresses, 1000);
var imagesFetched = 0;
function surveyYTImages() {
var list = document.querySelectorAll('[id=img]');
for (var i = imagesFetched; i < list.length; ++i)
if (list[i].src.startsWith("https://www.gstatic.com/images/branding/product/"))
list[i].src = notificationImageSrc64;
//imagesFetched = Math.max(imagesFetched, list.length); // sometimes is skipped
}
setInterval(surveyYTImages, 1000);
})();