// ==UserScript==
// @name youtube video time figuccio
// @namespace https://greasyfork.org/users/237458
// @version 0.5
// @description mostra time sui video
// @author figuccio
// @match *://*.youtube.com/*
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @icon https://www.youtube.com/s/desktop/3748dff5/img/favicon_48.png
// @run-at document-end
// @grant unsafeWindow
// @license GPLv3
// ==/UserScript==
(function() {
'use strict';
let fullShow = GM_getValue("fullShow");
let pos = GM_getValue("pos");//Sinistra(0), centro(1), destra(2)
let pos_top_space = GM_getValue("pos_top");//distanza tra etichetta e piano
let pos_transverse_space = GM_getValue("pos_transverse");//Offset etichetta sinistra e destra
let fontSize_min = GM_getValue("min_font");//più piccolo
let fontSize_small = GM_getValue("small_font");//Piccolo
let fontSize_medium = GM_getValue("medium_font");//medio
let fontSize_large = GM_getValue("large_font");
let fontSize_max = GM_getValue("max_font");
let fontStyle = "Microsoft Yahei";
// valore di inizializzazione
fullShow = (fullShow == undefined)?false:fullShow;
pos = (pos == undefined)?0:pos;//posizione 0 sinistra 1 centro 2 destra
pos_top_space = (pos_top_space == undefined)?10:pos_top_space;
pos_transverse_space = (pos_transverse_space == undefined)?0:pos_transverse_space;
fontSize_min = (fontSize_min == undefined)?10:fontSize_min;
fontSize_small = (fontSize_small == undefined)?15:fontSize_small;
fontSize_medium = (fontSize_medium == undefined)?20:fontSize_medium;
fontSize_large = (fontSize_large == undefined)?24:fontSize_large;
fontSize_max = (fontSize_max == undefined)?28:fontSize_max;
let menu1 = GM_registerMenuCommand ("impostare", openSetting, "");
function openSetting() {
var settingBox = document.querySelector("#vt-setting");
if(settingBox){
return;
}
var settingStyle = document.createElement("style");
settingStyle.type="text/css";
settingStyle.id="vt-classs";
var settingStyleInner = `div#vt-setting {
top: 80px;
left: calc(100vw - 300px);
width: 280px;
border: 1px solid gray;
position: absolute;
display: block;
z-index: 100000;
margin: 0;
padding: 0;
border-radius: 6px;
font-size: small;
color: black;
background-color: white;
}
#vts-title {
background-color:green;
display: inline-block;
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 3px 0px;
text-align: center;
color: white;
cursor: move;
hight: 20px;
line-hight: 20px;
user-select:none;
}
#vts-close-btn {
right: 0px;top:
0px;font-size: 17px;
position: absolute;
background-color:#e81123;
width: 44px;
height: 26px;
line-hight: 27px;
border-top-right-radius: 5px;
user-select:none;
cursor:pointer;
}
#vts-pos input,#vts-general input {
margin-right: 5px;
}
#vts-pos input:is(:nth-child(4),:nth-child(6)) {
margin-left: 35px;
}
.vts-fieldset {
border: 1px solid #c7c7c7;
padding: 5px;
margin: auto 5px;
}
.vts-fieldset>legend {
font-size: small;
color: gray;
width: auto;
padding: 0px 5px;
}
#vts-font input,#vts-pos-top,#vts-pos-transverse,#vts-font-style-name {
width: 110px;
font-size: revert;
outline: revert;
border: revert;
appearance: revert;
}
.vts-input-number,.vts-select {
line-height: revert;
appearance: revert;
margin-top: 1px;
}
.vts-select {
margin-top: 2px;
}
#vts-font select {
width: 150px;
}
#vts-submit {
margin-top: 10px;
text-align: center;
}
#vts-submit>input {
margin: 0;
padding: 0 10px;
appearance: auto;
border: revert;
border-radius: revert;
background: revert;
font-size: revert;
}
#vts-submit>input:not(:first-child) {
margin-left: 20px;
}
#vts-save.disable {
cursor: not-allowed;
pointer-events: none;
background-color: #c0c0c0;
border-color: #8a8a8a;
border-width: 1px;
border-radius: 3px;
color: azure;
padding: 1px 10px;
}
#vts-tips {
font-size: 13px;
color: green;
margin: 10px auto 5px 10px;
}`;
settingStyle.innerHTML = settingStyleInner;
document.querySelector("head").appendChild(settingStyle);
settingBox = document.createElement("div");
settingBox.id = "vt-setting";
var innerHtml = `<span id="vts-title">impostare
<span id="vts-close-btn"title="Chiudi">╳</span>
</span>
<div id="vts-general">
<fieldset style="background:;border:2px solid red;color:red;border-radius:7px;text-align:center; class="vts-fieldset">
<legend>Impostazioni generali</legend>
<input type="checkbox" name="show-full-screen" id="vts-general-check0">
<label for="left">Visualizzato solo a schermo intero</label>
</fieldset>
</div>
<div id="vts-pos">
<fieldset style="background:;border:2px solid green;color:green;border-radius:7px;text-align:center; class="vts-fieldset">
<legend>posizione del timer</legend>
<input type="radio" name="timer-position" id="vts-pos-radio0"><label for="left">Sinistra</label>
<input type="radio" name="timer-position" id="vts-pos-radio1"><label for="left">centro</label>
<input type="radio" name="timer-position" id="vts-pos-radio2"><label for="left">destra</label>
<br><label for="fontSize">sposta in alto-basso：</label><input type="number" name="fontSize" id="vts-pos-top" class="vts-input-number" min="-1000" max="1000" value="10">
<br><label for="fontSize">sposta a destra e a sinistra：</label><input type="number" name="fontSize" id="vts-pos-transverse" class="vts-input-number" min="-2000" max="2000" value="10">
</fieldset>
</div>
<div id="vts-font">
<fieldset style="background:;border:2px solid blue;color:blue;border-radius:7px;text-align:center; class="vts-fieldset">
<legend>font del timer</legend>
<label title="Quando il fotogramma video è molto piccolo，Mostra il carattere più piccolo">più piccolo：</label><input type="number" name="fontSize" id="vts-font-size-min" class="vts-input-number" min="9" max="30" value="10"><br>
<label title="Ore di fotogrammi video，Mostra carattere più piccolo">font small time：</label><input type="number" name="fontSize" id="vts-font-size-small" class="vts-input-number" min="9" max="30" value="15"><br>
<label title="Quando il fotogramma video ha dimensioni normali，Mostra i caratteri di dimensione normale">generalmente：</label><input type="number" name="fontSize" id="vts-font-size-medium" class="vts-input-number" min="9" max="30" value="20"><br>
<label title="Quando il fotogramma video è grande，Mostra carattere più grande">Più grandi：</label><input type="number" name="fontSize" id="vts-font-size-large" class="vts-input-number" min="9" max="30" value="24"><br>
<label title="Quando il fotogramma video è molto grande，Mostra il carattere massimo">massimo：</label><input type="number" name="fontSize" id="vts-font-size-max" class="vts-input-number" min="9" max="30" value="28"><br />
<br style="display:none;" />
<label for="fontStyle">font：</label>
<select disabled name="fontStyle" class="vts-select" id="vts-font-style-name">
<option value="Microsoft Yahei">Microsoft Yahei</option>
<option value="Stile della canzone">Stile della canzone</option>
<option value="corpo nero">corpo nero</option>
</select>
</fieldset>
</div>
<div id="vts-submit">
<input id="vts-save" type="button" value="Salva">
<input id="vts-close" type="button" value="Chiudi">
<input id="vts-reset" type="button" value="Ripristina">
</div>
<div id="vts-tips">Fare clic su Salva per ricordare le impostazioni</div>`;
settingBox.innerHTML = innerHtml;
document.querySelector("body").appendChild(settingBox);
// Aggiungi evento
document.querySelector("#vts-general-check0").addEventListener("change",function(){radioChange(this.checked,'check')});
document.querySelector("#vts-pos-radio0").addEventListener("change",function(){radioChange(0,'radio')});
document.querySelector("#vts-pos-radio1").addEventListener("change",function(){radioChange(1,'radio')});
document.querySelector("#vts-pos-radio2").addEventListener("change",function(){radioChange(2,'radio')});
document.querySelector("#vts-pos-top").addEventListener("input",function(){radioChange(this.value,'top')});
document.querySelector("#vts-pos-transverse").addEventListener("input",function(){radioChange(this.value,'transverse')});
document.querySelector("#vts-font-size-min").addEventListener("input",function(){radioChange(this.value,'fontsize-min')});
document.querySelector("#vts-font-size-small").addEventListener("input",function(){radioChange(this.value,'fontsize-small')});
document.querySelector("#vts-font-size-medium").addEventListener("input",function(){radioChange(this.value,'fontsize-medium')});
document.querySelector("#vts-font-size-large").addEventListener("input",function(){radioChange(this.value,'fontsize-large')});
document.querySelector("#vts-font-size-max").addEventListener("input",function(){radioChange(this.value,'fontsize-max')});
document.querySelector("#vts-save").addEventListener("click",vtsSaveSetting);
document.querySelector("#vts-close").addEventListener("click",vtsClose);
document.querySelector("#vts-close-btn").addEventListener("click",vtsClose);
document.querySelector("#vts-reset").addEventListener("click",vtsResetSetting);
initSetting();
// Rendi trascinabile la finestra delle impostazioni:
dragElement(document.getElementById("vt-setting"));
}
// Interfaccia di impostazione dell'inizializzazione
function initSetting() {
document.querySelector("#vts-general-check0").checked = false;
switch (pos) {
case 0:
document.querySelector("#vts-pos-radio0").checked = true;
break;
case 1:
document.querySelector("#vts-pos-radio1").checked = true;
break;
case 2:
document.querySelector("#vts-pos-radio2").checked = true;
}
document.querySelector("#vts-pos-top").value = pos_top_space;
document.querySelector("#vts-pos-transverse").value = pos_transverse_space;
document.querySelector("#vts-font-size-min").value = fontSize_min;
document.querySelector("#vts-font-size-small").value = fontSize_small;
document.querySelector("#vts-font-size-medium").value = fontSize_medium;
document.querySelector("#vts-font-size-large").value = fontSize_large;
document.querySelector("#vts-font-size-max").value = fontSize_max;
}
var tempPos = 0;
function radioChange(params,type) {
if(type=="check") {
fullShow = params;
}
if(type=="radio") {
pos = params;
}
if (type=="top") {
if ((params < -1000 || params > 1000)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
pos_top_space = Number(params);
document.querySelector("#vts-save").classList.remove("disable");
}
}
if (type=="transverse") {
if ((params < -2000 || params > 2000)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
pos_transverse_space = Number(params);
document.querySelector("#vts-save").classList.remove("disable");
}
}
if (type=="number") {
if ((params < 9 || params > 99)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
document.querySelector("#vts-save").classList.remove("disable");
}
}
if (type.indexOf("fontsize")==0) {
if ((params < 9 || params > 99)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
switch (type) {
case "fontsize-min":
fontSize_min = params;
break;
case "fontsize-small":
fontSize_small = params;
break;
case "fontsize-medium":
fontSize_medium = params;
break;
case "fontsize-large":
fontSize_large = params;
break;
case "fontsize-max":
fontSize_max = params;
}
fontStyle = "Microsoft Yahei";
document.querySelector("#vts-save").classList.remove("disable");
}
}
}
// pulsante salva
function vtsSaveSetting() {
GM_setValue("fullShow",fullShow);
GM_setValue("pos",pos);
GM_setValue("pos_top",pos_top_space);
GM_setValue("pos_transverse",pos_transverse_space);
GM_setValue("min_font",fontSize_min);
GM_setValue("small_font",fontSize_small);
GM_setValue("medium_font",fontSize_medium);
GM_setValue("large_font",fontSize_large);
GM_setValue("max_font",fontSize_max);
fontStyle = document.querySelector("#vts-font-style-name").value;
let textTips1 = "Tips：Salvato con successo！";
let textTips2 = "Tips：Salvato di nuovo con successo！";
let currentText = document.querySelector("#vts-tips").innerText;
if(currentText == textTips1) {
document.querySelector("#vts-tips").innerText = textTips2;
} else {
document.querySelector("#vts-tips").innerText = textTips1;
}
}
//Pulsante Annulla
function vtsClose() {
var settingBox = document.querySelector("#vt-setting");
var settingStyle = document.querySelector("#vt-classs");
if(settingBox){
settingBox.parentNode.removeChild(settingBox);
}
if(settingStyle){
settingStyle.parentNode.removeChild(settingStyle);
}
}
// pulsante di reset
function vtsResetSetting() {
fullShow = false;
pos = 0;
pos_top_space = 10;
pos_transverse_space = 0;
fontSize_min = 10;//più piccolo
fontSize_small = 15;//Piccolo
fontSize_medium = 20;//medio
fontSize_large = 24;//grande
fontSize_max = 28;//massimo
fontStyle = "Microsoft Yahei";
initSetting();
document.querySelector("#vts-tips").innerText = "Riportare alle condizioni originali,Fare clic su Salva per ricordare le impostazioni！";
}
function isFullscreen(){
return document.fullscreenElement ||
document.msFullscreenElement||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
// Crea un'etichetta temporale, larghezza: larghezza video, utilizzata per impostare la dimensione del numero temporale
function createTag(element){
let style = "cursor:pointer;z-index: 101;color:lime;margin:5px;padding: 5px;border-radius: 4px;line-height: 0.8em;background-color:rgba(0, 0, 0, 0.5);/*opacity: 0.8;*/user-select: none;height: min-content;font-family:Arial;font-weight:400;letter-spacing:0px;";
let videoWidth = element.offsetWidth;
let videoTop = element.offsetTop;
let videoLeft = element.offsetLeft;
let space = 10;
let fontSize = 10;
let tagWidth = 50;
if(videoWidth >= 1700){
space = 10;
fontSize = fontSize_max;
tagWidth = 120;
} else if(videoWidth >= 1200){
space = 10;
fontSize = fontSize_large;
tagWidth = 104;
} else if(videoWidth >= 720){
space = 10;
fontSize = fontSize_medium;
tagWidth = 77;
} else if(videoWidth <= 200){
space = 5;
fontSize = fontSize_min;
tagWidth = 50;
} else {
space = 10;
fontSize = fontSize_small;
tagWidth = 50;
}
style += "font-size: "+fontSize+"px;top: " + (videoTop + pos_top_space) + "px;";
switch(pos) {
case 0:
style += "position: absolute;left: " + videoLeft + pos_transverse_space + space + "px;";
break;
case 1:
style += "position: absolute;left: " + videoLeft + pos_transverse_space + ((videoWidth - tagWidth)/2) + "px;";
break;
case 2:
style += "position: absolute;right: " + videoLeft + pos_transverse_space + space + "px;";
break;
}
let timeBar = document.createElement("div");
timeBar.className = "timer";
timeBar.title="Data-ora";
timeBar.style = style;
return timeBar;
}
// Cambia lo stile dell'etichetta temporale
function changeTag(element){
let fullScreenElement = isFullscreen();
if(fullScreenElement == false && fullShow == true){
element.parentElement.querySelector(".timer").style.display = "none";
return;
} else {
element.parentElement.querySelector(".timer").style.display = "unset";
}
let videoTop = element.offsetTop;
let videoLeft = element.offsetLeft;
if(element.offsetWidth > 200){
if(element.offsetWidth >= 1700){
element.parentElement.querySelector(".timer").style.fontSize = fontSize_max + "px";
}else if(element.offsetWidth >= 1200){
element.parentElement.querySelector(".timer").style.fontSize = fontSize_large + "px";
} else if(element.offsetWidth >= 720){
element.parentElement.querySelector(".timer").style.fontSize = fontSize_medium + "px";
} else if(element.offsetWidth <= 200) {
element.parentElement.querySelector(".timer").style.fontSize = fontSize_min + "px";
} else {
element.parentElement.querySelector(".timer").style.fontSize = fontSize_small + "px";
}
} else {
}
changePos(element);
}
function changePos(videoTag){
let videoTop = videoTag.offsetTop;
let videoLeft = videoTag.offsetLeft;
let videoWidth = videoTag.offsetWidth;
let space = 10;
if(videoWidth <= 200){
space = 5;
} else {
space = 10;
}
videoTag.parentElement.querySelector(".timer").style.top = (videoTop + pos_top_space) + "px";
switch(pos) {
case 0:
videoTag.parentElement.querySelector(".timer").style.removeProperty("right");
videoTag.parentElement.querySelector(".timer").style.left = videoLeft + pos_transverse_space + space + "px";
break;
case 1:
videoTag.parentElement.querySelector(".timer").style.removeProperty("right");
videoTag.parentElement.querySelector(".timer").style.left = videoLeft + pos_transverse_space + ((videoWidth - videoTag.parentElement.querySelector(".timer").offsetWidth)/2) + "px";
break;
case 2:
videoTag.parentElement.querySelector(".timer").style.removeProperty("left");
videoTag.parentElement.querySelector(".timer").style.right = videoLeft + pos_transverse_space + space + "px";
break;
}
}
// Ottieni tag video
function getVideoTag(){
setTimeout(()=>{
let videoTagList = Array.from(document.getElementsByTagName('video'));
if(videoTagList.length == 0){
getVideoTag();
} else {
insertTimeBar(videoTagList);
getVideoTag();
}
},1000)
}
getVideoTag();
// Aggiungi etichetta temporale
function insertTimeBar(videoTagList){
videoTagList.forEach((element)=>{
if (element.parentElement.querySelector(".timer") == null ){
// Più barre temporali non possono utilizzare lo stesso oggetto
let timeBar = createTag(element);
element.parentElement.insertBefore(timeBar,element);
} else {
changeTag(element);
}
})
}
// Imposta time
function setTimer(){
setInterval(()=>{
var time = new Date().toLocaleTimeString();
var mm = new Date().getMilliseconds();
var date = new Date().toLocaleString('it', {'weekday': 'short', 'month': '2-digit', 'day': '2-digit','year':'numeric'});
let timer = document.getElementsByClassName("timer");
// Quando non è presente la barra del tempo, aggiungila (questo accadrà con il caricamento lento)
if(timer == undefined){
let videoTagList = Array.from(document.getElementsByTagName('video'));
insertTimeBar(videoTagList);
}
// Imposta l'ora per ciascuna barra temporale
let timeBarList = Array.from(document.getElementsByClassName("timer"));
timeBarList.forEach((timeBar)=>{
timeBar.innerText =date +" - "+ time +":"+ mm;
})
},70)
}
// Avvia il timer
setTimer();
// Casella di richiesta, metodo di chiamata: Toast('Suggerimenti: è facile da usare, ricordati di piacerlo!', 1000);
let dialog;
let timer;
function Toast(msg,duration){
if(timer != null && dialog != null){
clearTimeout(timer);
document.body.removeChild(dialog);
dialog = null;
}
duration=isNaN(duration)?3000:duration;
dialog = document.createElement('div');
dialog.innerText = msg;
dialog.style.cssText="font-size:.32rem;color:green;background-color:white;border:solid green 2px;padding:10px 15px;margin:0 0 0 -60px;border-radius:4px;position:fixed;top:2%;left:93%;/*width:200px;*/text-align:left;z-index:9999";
document.body.appendChild(dialog);
timer = setTimeout(function() {
document.body.removeChild(dialog);
dialog = null;
}, duration);
}
// Finestra delle impostazioni del cellulare
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
var originalonmousemove = null, originalonmouseup = null;
if (document.getElementById("vts-title")) {
document.getElementById("vts-title").onmousedown = dragMouseDown;
document.getElementById("vts-title").children.onmousedown = function(){};
} else {
elmnt.onmousedown = dragMouseDown;
}
elmnt.onmouseup = closeDragElement;
function dragMouseDown(e) {
e = e || window.event;
if(e.target.id == "vts-close-btn"){
return;
}
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
originalonmousemove = document.onmousemove;
originalonmouseup = document.onmouseup;
document.onmousemove = elementDrag;
document.onmouseup = closeDragElement;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmousemove = originalonmousemove;
document.onmouseup = originalonmouseup;
}
}
////////////////////////////////
////////////////////////mostra % volume/////
let previousVolume = -1;
function displaySquareVolume() {
const player = document.getElementById('movie_player');
const currentVolume = player.getVolume();
if (currentVolume !== previousVolume) {
previousVolume = currentVolume;
const squareVolume = document.querySelectorAll('div[data-layer="4"]');
squareVolume.forEach((div) => {
if(div.className === 'ytp-bezel-text-hide') {
div.classList.remove('ytp-bezel-text-hide');
}
if (div.classList.length === 0) {
const ytpBezelTextWrapper = div.querySelector('.ytp-bezel-text-wrapper');
ytpBezelTextWrapper.title="Volume";
const ytpBezelText = ytpBezelTextWrapper.querySelector('.ytp-bezel-text');
const ytpBezel = div.querySelector('.ytp-bezel');
div.style.display = 'block';
if (ytpBezelText && ytpBezel) {
ytpBezelText.innerText = currentVolume + "%";
ytpBezel.style.display = 'none';
}
setTimeout(()=> {
div.style.display = 'none';
}, 20000);//resta fisso per 20 secondi
}
});
}
}
function checkVideoExists() {
const videoElement = document.querySelector('video');
if (videoElement) {
videoElement.addEventListener('volumechange', displaySquareVolume);
previousVolume = videoElement.volume * 100;
}
}
const observer = new MutationObserver(checkVideoExists);
const body = document.body;
const config = { childList: true, subtree: true };
observer.observe(body, config);
GM_addStyle('.ytp-bezel-text-wrapper{color:green;cursor:pointer;}');//% volume colore verde
///////////////////////
})();
