Greasy Fork

Erweiterung (Zusatzinfos) für das gesehene Videos ausblenden oder markieren

zeigt den transfer an und die downloadmenge der aktuellen sessin und den doownload seid

当前为 2024-04-23 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/489860/1365030/Erweiterung%20%28Zusatzinfos%29%20f%C3%BCr%20das%20gesehene%20Videos%20ausblenden%20oder%20markieren.js

// ==UserScript==
// @name         Erweiterung (Zusatzinfos) für das gesehene Videos ausblenden oder markieren
// @namespace    https://basti1012.bplaced.net
// @version      1.4
// @description  zeigt den transfer an und die downloadmenge der aktuellen sessin und den doownload seid
// installatiion des scriptes
// Man kann sich auch die Mausdiztanz der aktuellen session und die komplette edntfernung
// der maus seid installation des scriptes anzeigen lassen
// ACHTUNG: Dieses Script läuft nur mit meinen Userscript "Bastis Youtube Multi Script,gesehende videos ausblenden oder makieren", 
// was in den nächsten Tagen Online kommt.
// Zu den Hauptscript kann dieses Script einfach eingebunden werden und das Hauptscript hat eine Funktion mehr.
// Alle Neue einstellmöglichkeiten der erweiterungen können in das Hauptmenü des Hauptscriptes eingestellt werden.
// @author       basti1012
// @allFrames    true
// @run-at document-end
// @license MIT License
// @noframes
// @icon        https://basti1012.de/images/favicon.png
// ==/UserScript==

var start3 = performance.now();
if(!array_localsdtorage){
    var array_localsdtorage=[];
}
if(!erweiterungs_einstellungs_array){
var erweiterungs_einstellungs_array=[];
}
array_localsdtorage.push(["zusatzinfos_einblenden",true],["transfer_gesamt",0],["transfer_style",""],["transfer_style_image_meter",""],["transfer_style_image_down",""],["selector_zusatzinformationen","title"],["mouse_oder_datentransfer",  true],["mouse_distans_session",  0],["mouse_distans_immer",  0]);

function zusatzinfos_einblenden_anzeigen(){
    var ww='';
    if(localStorage.getItem('zusatzinfos_einblenden')=='true'){
        if(!localStorage.getItem('selector_zusatzinformationen')){
            ww='';
        }else{
            ww=localStorage.getItem('selector_zusatzinformationen');
        }
        if(localStorage.getItem('mouse_oder_datentransfer')=='true'){
            localStorage.setItem('mouse_distans_session',0);
            var totalDistance = 0;
            var lastSeenAt = {
                x: null,
                y: null
            };
            var var_immer=parseInt(localStorage.getItem('mouse_distans_immer'));
            var var_session=parseInt(localStorage.getItem('mouse_distans_session'));
            document.addEventListener('mousemove',function(event) {
                if(lastSeenAt.x){
                    totalDistance += Math.sqrt(Math.pow(lastSeenAt.y - event.clientY, 2) + Math.pow(lastSeenAt.x - event.clientX, 2));
                    document.querySelector(ww).innerHTML=`
                    Pixels:   ${Math.round(totalDistance)} <br>
                    Zentimeter : ${((totalDistance / 75) / 10).toFixed(0)} <br>
                    Meter : ${(((totalDistance) / 75) / 1000).toFixed(2)}<br>
                    Seid Beginn Pixel : ${((var_immer+totalDistance).toFixed(0))} px <br>
                    Seid Beginn Zentimeter : ${((((var_immer+totalDistance)) / 75) / 1).toFixed(0)} <br>
                    Seid beginn Meter : ${(((var_immer+totalDistance) / 75) / 100).toFixed(2)} <br>`;

                    if(ww=='title'){
                        document.querySelector(ww).innerHTML=`
                        Pixel: ${Math.round(totalDistance)},
                        Zentimeter : ${((totalDistance / 75) / 10).toFixed(0)} ,
                        Meter : ${(((totalDistance) / 75) / 1000).toFixed(2)},
                        Gesamt Pixel : ${((var_immer+totalDistance).toFixed(0))} ,
                        Gesamt Zentimeter : ${((((var_immer+totalDistance)) / 75) / 1).toFixed(0)},
                        Gesamt Meter : ${(((var_immer+totalDistance) / 75) / 100).toFixed(2)} `;
                    }
                }
                localStorage.setItem('mouse_distans_immer',(var_immer+totalDistance));
                localStorage.setItem('mouse_distans_session',(var_session+totalDistance));
                lastSeenAt.x = event.clientX;
                lastSeenAt.y = event.clientY;
            });
            localStorage.setItem('mouse_distans_immer',(var_immer+totalDistance));
            localStorage.setItem('mouse_distans_session',(var_session+totalDistance));
            return 5;
        }else{
            var trafficDiv='';
            var meter_image;
            var download_image;
            var set_timeout_var=1000;
            if(location.href.indexOf('youtube')!=-1){
                try{
                    ww=localStorage.getItem('selector_zusatzinformationen').trim();
                    set_timeout_var=10000;
                }catch(e){
                    ww='#search-form';
                    set_timeout_var=5000;
                }
                console.log(ww,"Auf youtube");
            }else{
                ww=localStorage.getItem('selector_zusatzinformationen').trim();
                set_timeout_var=500;
            }
            if(localStorage.getItem('transfer_style_image_down')==''){
               var down_image_base64=`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCA0ODYgNTEyLjAzOSI+PHBhdGggZmlsbD0iIzEwQTQ0RSIgZD0iTTMxNC40NTUgMjczLjU4bDE5LjgwOS0yNTYuNTE0QzMzNC45ODYgNy43MTggMzI2LjU3NSAwIDMxNy4yMDIgMEgxNjguNzk4Yy05LjM3MyAwLTE3Ljc4NCA3LjcwNS0xNy4wNjIgMTcuMDY2bDE5LjgwOSAyNTYuNTE0aC0uMzY5TDcwLjIwOSAyMzguMjZjLTUxLjIxNS0xOS43ODEtOTEuODggMTIuMTg5LTU3LjQ0NCA0OS41OTFsMTkxLjY1MyAxOTkuOTk3YzMyLjI1NyAzMi4yNTQgNDUuNzYyIDMyLjI1NCA3OC4wMTYgMGwxOTEuNjUyLTE5OS45OTdjMzIuNDM0LTM2LjI3Ni02LjIyOC02OS4zNzItNTcuNDQxLTQ5LjU5MWwtMTAwLjk2OSAzNS4zMmgtMS4yMjF6Ii8+PC9zdmc+`;
            }else{
               var down_image_base64=localStorage.getItem('transfer_style_image_down');
            }
            if(localStorage.getItem('transfer_style_image_meter')==''){
               var meter_image_base64='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCA1MTIgMjc4Ljg2MiI+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMCAyNTUuOTk5QzAgMTg1LjMxMSAyOC42NTUgMTIxLjMxIDc0Ljk4MiA3NC45ODIgMTIxLjMxMSAyOC42NTUgMTg1LjMxMSAwIDI1Ni4wMDEgMGM1NS40NTUgMCAxMDYuNzk0IDE3LjYzOCAxNDguNzE0IDQ3LjYwN2wtMjYuNjgyIDIyLjAxN2MtMjkuNzU3LTE5LjUyMS02NC40Ny0zMi4xMDktMTAxLjg0NS0zNS40Njh2MjkuMDY3aC00MC4zNzdWMzQuMTU2Yy00NS4yMjUgNC4wNjMtODYuNTU0IDIxLjY0My0xMTkuOTE2IDQ4LjY2NWwyNC43OTMgMjQuNzk0LTI4LjU0OSAyOC41NDktMjUuMjAyLTI1LjIwMmMtMzMuNDYyIDM4Ljk2OS01My42ODUgODkuNjQxLTUzLjY4NSAxNDUuMDM3SDB6TTQ1MC40OTcgODkuNTQ3QzQ4OC44MzcgMTM0LjMwNCA1MTIgMTkyLjQ0OCA1MTIgMjU1Ljk5OWgtMzMuMjUyYzAtNTMuMDI5LTE4LjUzMS0xMDEuNzMtNDkuNDY3LTEzOS45NzlsMjEuMjE2LTI2LjQ3M3oiLz48cGF0aCBmaWxsPSIjRUYxQzI1IiBkPSJNMjMzLjMyMyAyMjAuODZjLTM4LjkwNCAzMi4xNDMgMTMuMTMxIDg2LjI0NSA0OC4yMzggNDAuMTg4TDQ0MC4xNzkgNjMuMTIzbC03LjQyNy02LjgyNkwyMzMuMzIzIDIyMC44NnoiLz48L3N2Zz4=';
            }else{
               var meter_image_base64=localStorage.getItem('transfer_style_image_meter');
            }
            function starte(){
                console.log('%cZusatzinfos aktiviert'+ (performance.now() - start3) + ' ms.','color:green');
                try{
                    if(ww!='title'){
                        GM_addStyle(`
                        #traffic_anzeige img,${ww} img{
                            height:11px !important;
                        }
                        .bi::before, [class="bi"]::before, [class="b"]::before {
                             display: inline-block;
                             font-display: block;
                             font-family: bootstrap-icons !important;
                             font-style: normal;
                             font-weight: normal !important;
                             font-variant: normal;
                             text-transform: none;
                             line-height: 1;
                             vertical-align: -0.125em;
                             -webkit-font-smoothing: antialiased;
                             -moz-osx-font-smoothing: grayscale;
                        }`
                        );
                    }
                    if(ww=='title'){
                        trafficDiv = document.querySelector('title');
                        meter_image=`🕐`;
                        download_image=`⬇`;
                    }else if(ww!='' && ww!='title'){
                        if(localStorage.getItem('transfer_style')==''){
                            GM_addStyle(`@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");`);
                            //console.log('was steht in ww '+ww)
                            trafficDiv = document.querySelector(ww);
                            //console.log(trafficDiv)
                            trafficDiv.style=`height:auto !important;pointer-events:none;position:fixed;z-index:999999;left:0;top:0;size:15px;background:rgba(0, 0, 0, 0.7);color:white;padding:5px;`;
                          //      meter_image=`<i class="bi bi-speedometer"></i>`;
                          //      download_image=`<i class="bi bi-arrow-down"></i>`;
                            meter_image=`<i class='bi'><img src="${meter_image_base64}"></i>`;
                            download_image=`<i class='bi'><img src="${down_image_base64}"></i>`;
                        }else{
                            trafficDiv = document.createElement('div');
                            trafficDiv.id='traffic_anzeige';
                            trafficDiv.style=localStorage.getItem('transfer_style');
                            meter_image=`<i class='bi'><img src="${meter_image_base64}"></i>`;
                            download_image=`<i class='bi'><img src="${down_image_base64}"></i>`;

                        }
                    }else if(ww==''){

                        if(localStorage.getItem('transfer_style')==''){
                                trafficDiv = document.createElement('div');
                                trafficDiv.id='traffic_anzeige';
                                GM_addStyle(`@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");`);
                                trafficDiv.style=`height:auto !important;pointer-events:none;position:fixed;z-index:999999;left:0;top:0;size:15px;background:rgba(0, 0, 0, 1);color:white;padding:5px;`;
                                meter_image=`<i class='bi'><img src="${meter_image_base64}"></i>`;
                                download_image=`<i class='bi'><img src="${down_image_base64}"></i>`;
                             //   meter_image=`<i class="bi bi-speedometer"></i>`;
                             //   download_image=`<i class="bi bi-arrow-down"></i>`;
                        }else{
                                trafficDiv = document.createElement('div');
                                trafficDiv.id='traffic_anzeige';
                                trafficDiv.style=localStorage.getItem('transfer_style');
                                meter_image=`<img src="${meter_image_base64}">`;
                                download_image=`<img src="${down_image_base64}">`;
                        }
                    }

                    if(ww!='' && ww!='title' || ww!='title' && ww==''){
                        trafficDiv.innerHTML = `${download_image} <span id='traffic_helper1'></span> •
                        ${meter_image} <span id='traffic_helper2'></span> •
                        ${download_image}
                        ${download_image}
                        <span id='traffic_helper3'></span>
                        `;
                        document.body.appendChild(trafficDiv);
                     }

                     if(localStorage.getItem('transfer_gesamt')=='NaN'){
                         localStorage.setItem('transfer_gesamt',0);
                     }

                     let totalReceivedSize = 0;
                     let receivedLastSecond = 0;
                     let totalReceivedSize1 = parseInt(localStorage.getItem('transfer_gesamt'));
                     let receivedLastSecond1 = 0;
                     function formatBytes(bytes, decimals = 2) {
                         if (!+bytes) return '0 Bytes';
                         const k = 1024;
                         const dm = decimals < 0 ? 0 : decimals;
                         const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
                         const i = Math.floor(Math.log(bytes) / Math.log(k));
                         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
                     }

                     function updateTraffic() {
                         const resources = window.performance.getEntriesByType('resource');
                         const now = performance.now();
                         const receivedThisSecond = resources.reduce((acc, entry) => {
                             if (now - entry.responseEnd < 1000) {
                                 return acc + entry.transferSize;
                             } else {
                                 return acc;
                             }
                         }, 0);

                         const downloadSpeed = (receivedThisSecond - receivedLastSecond) / 1024; // em KB/s
                         receivedLastSecond = receivedThisSecond;
                         totalReceivedSize += receivedThisSecond;
                         const downloadSpeed1 = (receivedThisSecond - receivedLastSecond1) / 1024; // em KB/s
                         receivedLastSecond1 = receivedThisSecond;
                         totalReceivedSize1 =parseInt(totalReceivedSize1)+parseInt(receivedThisSecond);
                         localStorage.setItem('transfer_gesamt',totalReceivedSize1);
                         if(ww!='title'){
                             document.querySelector('#traffic_helper1').innerText=formatBytes(totalReceivedSize);
                             document.querySelector('#traffic_helper2').innerText=formatBytes(receivedThisSecond);
                             document.querySelector('#traffic_helper3').innerText=formatBytes(totalReceivedSize1);
                         }else{

                             trafficDiv.innerHTML = `${download_image}
                             ${formatBytes(totalReceivedSize)} •
                             ${meter_image} ${formatBytes(receivedThisSecond)} •
                             ${download_image}
                             ${download_image}
                             ${formatBytes(totalReceivedSize1)}
                             `;
                        }
                    }
                    setInterval(updateTraffic, 1000);
                }catch(e){
                    console.log(e);
                    setTimeout(starte, 5000);
                }
            }
            if(localStorage.getItem('zusatzinfos_einblenden')=='true'){
                setTimeout(starte, set_timeout_var);
            }
        }
        return 1;
    }else{
        return 2;
    }
    return 3;
}

if(localStorage.getItem('zusatzinfos_einblenden')=='true'){
    var checkboxerweiterung_zusatzinfos_aktivieren ='checked="true"';
}else{
    var checkboxerweiterung_zusatzinfos_aktivieren ='';
}

if(localStorage.getItem('mouse_oder_datentransfer')=='true'){
    var checkboxerweiterung_zusatzinfos_mause_oder_daten ='checked="true"';
}else{
    var checkboxerweiterung_zusatzinfos_mause_oder_daten ='';
}

if(!erweiterungs_einstellungs_array){
    var erweiterungs_einstellungs_array = [];
}

erweiterungs_einstellungs_array.push(['zusatzinfos_anzeigen',`
<label>
    <label style="display:flex;flex-direction:column">
        <p>
            <strong>Zusatzinfos einblenden</strong>
            <input type="checkbox" id="zusatzinfos_einblenden_id" ${checkboxerweiterung_zusatzinfos_aktivieren}>
            <span>?
                <small>
                  Es gibt 2 auswahlmöglichkeiten im nächten einstell Menü.
                  Dazu noch den Datentrasfer der aktuell läuft ,
                  Transfer der seid beginn der Seite von Youtube läauft und der Gesamt Transfer angezeigt<br>
                  1. Man kann auch die Maus Distanz anzeigen lassen die die Maus,
                  auf allen Youtube Seiten hinter sich gelassen hat.
                  Es wird einmal die distanz während des aktuellen besuchs von Youtube angezeigt
                  und einmal fir distanz seid beginn dieses Scriptes.<br>
                  Aktuell stehen die Informationen in der Titel Leiste.
                  Unter den Menü Punkt Entwickler können sie den Standort der Anzeige ändern.
                </small>
            </span>
        </p>
    </label>

    <label>Extra Infos auswahl Maus oder Tranfer
        <input type="checkbox" id="mouse_oder_daten_id" ${checkboxerweiterung_zusatzinfos_mause_oder_daten}>
        <span>?
            <small>
                Bei aktivierter Checkbox werden distanz von ihre Maus angezegt auf den Youtube Seiten gemacht hat<br>
                Bleibt das Kästchen leer, wird die aktuelle und Gesamt Transferdaten angezeigt.
            </small>
        </span>
    </label>

    <label style="display:flex;flex-direction:column">
        <p>Zusatzinfos position: <input type="text" id="selector_textarea" value="${localStorage.getItem('selector_zusatzinformationen')}">
            <span>?
                <small>
                    Mit querySelector können Sie die Anzeige in jedes andere Element anzeigen
                    lassen ( Vorsicht,Xoutube arbeitet mit gleichen is'd, was die möglichkeit eine id zu nutzen schwerer macht).
                    Sie können den Infos auch eine feste Position geben.
                    Einfach beues Element erstellen uns über das Style Attributte die position und style der anzeige angeben.
                </small>
            </span>
        </p>
        <p>Einfach ein Selector eintragen wie hier im rot zu sehen</p>
        <p style="display:flex">
            <code>document.querySelector('</code><code style="color:red">head</code><code>');</code>
        </p>
    </label>
    <label style="display:flex;flex-direction:column">
        <p>Pfeil nach unten :<input type="text" id="image_pfeil_value" value="${localStorage.getItem('transfer_style_image_down')}">
            <span>?
                <small>
                   Einen Link oder base64 zu einen Icon was einen Pfeil nach unten zeigt ist Optional:<br>
                </small>
            </span>
        </p>
    </label>
    <label style="display:flex;flex-direction:column">
        <p>Speedmeter : <input type="text" id="image_meter_value" value="${localStorage.getItem('transfer_style_image_meter')}">
            <span>?
                <small>
                    Einen Link oder base64 zu einen Icon was einen Pfeil nach unten zeigt ist Optional:<br>
                </small>
            </span>
        </p>
    </label>
    <label style="display:flex;flex-direction:column">
         <p> Css angabe für style und position :  <textarea style="height:80px:resize:both;width:200px"id="fraffic_position_erstellen">${localStorage.getItem('transfer_style')}</textarea>
             <span>?
                 <small>
                      Mit querySelector können Sie die Anzeige in jedes andere Element anzeigen
                      lassen ( Vorsicht,Xoutube arbeitet mit gleichen is'd, was die möglichkeit eine id zu nutzen schwerer macht).
                      Sie können den Infos auch eine feste Position geben.
                      Einfach heues Element erstellen uns über das Style Attributte die position und style der anzeige angeben.
                 </small>
             </span>
         </p>
         <p>Hier ein Beispiel für eine Css angabe,das ist auch die defaul Css falls sie keine eigene erstellen.
         Diese Css wird als inline style attributte eingebunden</p>
         <p>
         <pre>
          <code>
          height:auto !important;
          pointer-events:none;
          position:fixed;
          z-index:999999;
          left:0;
          top:0;
          size:15px;
          background:rgba(0, 0, 0, 0.7);
          color:white;
          padding:5px;
          </code>
          </pre>
          </p>
     </label>

</label>`]);
if(!array_script){
    var array_script=[];
}
array_script.push([`

    var zusatzinfos_einblenden_id_var=document.getElementById('zusatzinfos_einblenden_id')
    zusatzinfos_einblenden_id_var.addEventListener('click',function(u){
        if(zusatzinfos_einblenden_id_var.checked==true){
            localStorage.setItem('zusatzinfos_einblenden',true);
        }else{
            localStorage.setItem('zusatzinfos_einblenden',false);
        }
    })

    var zusatzinfos_mouse_oder_daten_id_var=document.getElementById('mouse_oder_daten_id')
    zusatzinfos_mouse_oder_daten_id_var.addEventListener('click',function(u){
        if(zusatzinfos_mouse_oder_daten_id_var.checked==true){
            localStorage.setItem('mouse_oder_datentransfer',true);
        }else{
            localStorage.setItem('mouse_oder_datentransfer',false);
        }
    })

    document.getElementById('selector_textarea').addEventListener('click',function(u){
        localStorage.setItem('selector_zusatzinformationen',document.getElementById('selector_textarea').value);
    })
    document.getElementById('image_pfeil_value').addEventListener('click',function(u){
        localStorage.setItem('transfer_style_image_down',document.getElementById('image_pfeil_value').value);
    })
    document.getElementById('image_meter_value').addEventListener('click',function(u){
        localStorage.setItem('transfer_style_image_meter',document.getElementById('image_meter_value').value);
    })
    document.getElementById('fraffic_position_erstellen').addEventListener('click',function(u){
        localStorage.setItem('transfer_style',document.getElementById('fraffic_position_erstellen).innerHTML);
    })

`]);

if(location.href.indexOf('youtube.com/feed/history')==-1 &&
    location.href.indexOf('youtube.com/statistiken_gesehende_videos')==-1 &&
    location.href.indexOf('youtube.com/anleitung-neuikeiten-kontakt-von-basti1012-super-youtube-userscript')==-1 &&
    location.href.indexOf('youtube.com/einstellungen_gesehende_videos')==-1){
    
if(localStorage.getItem('zusatzinfos_einblenden')){
    var zusatz_infos_var=zusatzinfos_einblenden_anzeigen();
    if(zusatz_infos_var==1){
           console.log('%cZusatzinfos aktiviert'+ (performance.now() - start3) + ' ms.','color:green');
    }else if(zusatz_infos_var==2){
          console.log('%cZusatzinfos deaktiviert'+ (performance.now() - start3) + ' ms.','color:orange');
    }else if(zusatz_infos_var==3){
        console.log('%cerror zusatzinfos ladeen:  '+ (performance.now() - start3) + ' ms.','color:red');
    }else if(zusatz_infos_var==4){
        console.log('%cZusatzinfos datentransfer aktive:  '+ (performance.now() - start3) + ' ms.','color:green');
    }else if(zusatz_infos_var==5){
        console.log('%cZusatzinfos mousedistanz aktive:  '+ (performance.now() - start3) + ' ms.','color:green');
    }else{
        console.log('%cerror zusatzinfos ladeen:  '+ (performance.now() - start3) + ' ms.','color:red');
    }
}

}