update descriptions
当前为
// ==UserScript==
// @name Nitro Type Streamer Mode
// @namespace https://youtu.be/G79kuxzcl80/song
// @version 1.1
// @description update descriptions
// @author Ginfio
// @match https://www.nitrotype.com/*
// ==/UserScript==
window.onload = function(){
var style = document.createElement('style');
style.innerHTML = `
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
.iframe{
border: 2px solid yellow;
position: fixed;
z-index: 19;
left: 0;
}
.video{
top: 1px;
}
#root{
margin-left: 300px;
}
body{
margin: 0;
padding: 0;
font-family: "Montserrat", verdana;
background: #1f212d;
color: white;
}
*{
box-sizing: border-box;
}
.motherOfAll{
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 19;
}
.show-hide-btn{
height: 30px;
width: 30px;
bottom: 2px;
left: 2px;
position: fixed;
z-index: 20;
background: black;
border-radius: 50%;
opacity: 1;
cursor: pointer;
border: 2px solid white;
}
.wrap{
padding: 5px;
height: auto;
width: 370px;
background: url("https://www.nitrotype.com/dist/site/images/backgrounds/bg-tires.png"), linear-gradient(130deg, #2E3141 0%, #2E3141 20%, #303343 20%, #303343 25%, #2E3141 25%, #2E3141 27%, #303343 27%, #303343 50%, #2E3141 50%, #2E3141 85%, #303343 85%, #303343 90%, #2E3141 90%);
position: relative;
margin: 10% 35%;
}
.all-container{
height: auto;
width: auto;
}
.category-name-container{
height: auto;
width: auto;
display: flex;
gap: 2px;
padding: 5px;
background: #1f212d;
}
.category-wrapper{
height: auto;
width: auto;
background: #1f212d;
padding: 10px;
}
.category-name{
padding: 2px;
height: auto;
width: 370px;
position: relative;
overflow: hidden;
display: block;
font-size: 16px;
}
/* RADIO */
.on-off-radio{
display: none!important;
}
.on-off-container{
opacity: 1;
}
.on-off-right{
width: 20%;
display: flex;
justify-content: space-around;
}
.on-off-left{
width: 75%;
}
/*
radio
*/
.radio{
height: 19px;
width: 19px;
position: relative;
cursor: pointer;
display: inline-block;
}
label{
cursor: pointer;
}
.label-radio{
display: inline-block;
color: white;
transform: translateY(-3px);
cursor: pointer;
width: 90%;
padding: 1px;
text-indent: 5px;
}
input[type="radio"]:checked+label {
color: #59ffa0;
}
.test{
height: 100px;
width: 100px;
}
.input-radio[type='radio'] {
-webkit-appearance:none;
width:20px;
height:20px;
border:1px solid #59ffa0;;
border-radius:50%;
outline:none;
box-shadow:0 0 5px 0px #59ffa0 inset;
}
.input-radio[type='radio']:hover {
box-shadow:0 0 5px 0px #59ffa0 inset;
}
.input-radio[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
.input-radio[type='radio']:checked:before {
background:#59ffa0;
}
/* check box */
input[type='checkbox']{
filter: hue-rotate(300deg);
border: 1px solid #59ffa0;
}
input[type="checkbox"]:checked+label {
color: #59ffa0;
}
/* url input */
input.url{
height: 30px;
background: transparent;
box-shadow: none;
border: 1px solid #777;
border-radius: 5px;
outline: none;
color: white;
font-family: "Montserrat", verdana;
font-size: 16px;
padding: 10px;
display: inline-block;
}
input.url:focus{
border: 1px solid rgb(0, 183, 255);
}
.save-btn{
display: inline-block;
height: auto;
width: 99%;
border-radius: 5px;
cursor: pointer;
color: white;
background: #d62f3a;
box-shadow: inset 0px -3px 0px 0px rgba(2, 2, 2, 0.25);
outline: none;
border: none;
padding: 20px;
font-size: 16px;
font-family: "Montserrat";
font-weight: 900;
transition: all 0.4s;
}
.save-btn:hover{
background: #c51e29;
}
.save-btn:active{
zoom: 110%;
}
/* iframes */
`;
document.head.appendChild(style);
var localStorage = window.localStorage;
// btn--fw
var showHideBtn = document.createElement('div');
showHideBtn.className = "show-hide-btn";
document.body.appendChild(showHideBtn);
var containTool = document.createElement("div");
containTool.className = "motherOfAll";
containTool.style.display = "none"
var myTool = `<div class = "wrap">
<div class = "all-container">
<div class = "category-wrapper">
<h2 class = "type-title"> Streamer Mode </h2>
<div class = "category-name-container on-off-container">
<div class = "category-name on-off-left">
<span class = "category-name-span"> Streamer Mode </span>
</div>
<div class = "on-off-right">
<div class = "switch-containe">
<input type = "radio" name = "switch" class = "radio on-off-radio" id = "off">
<label for = "off" class = "label-on-off"> off </label>
</div>
<div class = "switch-container">
<input type = "radio" name = "switch" class = "radio on-off-radio" id = "on">
<label for = "on" class = "label-on-off"> on </label>
</div>
</div>
</div>
<div class = "controls-container">
<div class = "category-name-container style-name-container">
<div class = "category-name">
<span style = "display: block"> Live stream ID: </span>
<br>
<input class = "url" type = "text" size = "17" value = ""> </div>
</div>
<div class = "category-name-container style-name-container">
<div class = "category-name">
<input type = "radio" name = "option" class = "radio input-radio" id = "option">
<label for = "option" class = "label-for-option label-radio"> Chat only </label>
</div>
</div>
<div class = "category-name-container style-name-container">
<div class = "category-name">
<input type = "radio" name = "option" class = "radio input-radio" id = "option-2">
<label for = "option-2" class = "label-for-option-2 label-radio"> Chat & Video </label>
</div>
</div>
<hr>
<div class = "category-name-container style-name-container">
<div class = "category-name">
<input type = "checkbox" name = "checkbox" class = "checkbox radio input-radio" id = "check-distract">
<label for = "check-distract" class = "label-for-checkbox label-radio"> Don't distract while racing </label>
</div>
</div>
<button class = "save-btn"> Save </button>
</div> <!-- controls -->
</div>
</div>
</div>
<div class = "test"> </div>`;
containTool.innerHTML = myTool;
document.body.appendChild(containTool);
showHideBtn.addEventListener("click", openOrHide);
function openOrHide() {
if (containTool.style.display === "none") {
containTool.style.display = "block";
} else {
containTool.style.display = "none";
}
}
test_elem = document.querySelector(".test");
// https://youtu.be/ftMnmPC82qM
// qKvzIckPBlQ // news
//var label = document.querySelector("");
var streamerMode;
var gg;
var checked_switched;
// var chatAndVideo;
// var chatAndVideoCall;
/* all input */
on_off_btns = document.getElementsByName("switch");
label_on_off_btns = document.querySelectorAll(".label-on-off")
option_btns = document.getElementsByName("option");
url_input = document.querySelector(".url")
save_btn = document.querySelector(".save-btn");
checkbox = document.querySelector(".checkbox")
var streamerMode = {
Switch: 0,
videoID: "",
CoV: 0, // chat only or video
DDWR: 0// don't distract while racing
}
save_btn.addEventListener("click", function(){
this.disabled = true;
this.style.opacity = "0.1"
// if off do things here...
if (on_off_btns[0].checked == true){
streamerMode.Switch = 0;
chatOnly = undefined;
chatAndVideo = undefined;
document.querySelector(".controls-container").style.display = "none";
document.querySelector("#root").style.marginLeft = "0";
}
// on
else if (on_off_btns[1].checked === true){
streamerMode.Switch = 1;
}
// option btns
if (option_btns[0].checked === true){
streamerMode.CoV = 0;
}
else if (option_btns[1].checked === true){
streamerMode.CoV = 1;
}
// url input
if (url_input.value.length > 7 && url_input.value.length < 15){
streamerMode.videoID = url_input.value;
}
// Don't distract while racing
if (checkbox.checked === true){
streamerMode.DDWR = 1;
} else {
streamerMode.DDWR = 0;
}
localStorage.setItem('streamerMode-state', JSON.stringify(streamerMode));
console.log(url_input.value)
})
on_off_btns[1].addEventListener("click", function(){
document.querySelector(".controls-container").style.display = "block";
})
// opacity | event listener
label_on_off_btns.forEach(function(elm){
elm.addEventListener("click", function(){
save_btn.style.opacity = "1";
save_btn.disabled = false;
})
})
option_btns.forEach(function(element){
element.addEventListener("click", function(){
save_btn.style.opacity = "1";
save_btn.disabled = false;
})
})
// reuse ...
var gg = JSON.parse(localStorage.getItem('streamerMode-state'));
on_off_btns[gg.Switch].checked = true; // on | off
option_btns[gg.CoV].checked = true; // Chat only | Chat & video
url_input.value = gg.videoID;
// checkbox
if (gg.DDWR == 1){
checkbox.checked = true
} else {
checkbox.checked = false;
}
if (gg.Switch == 1){
if (gg.CoV == 0){
chatOnly()
} else if (gg.CoV == 1){
chatAndVideo()
}
}
// is off
if (gg.Switch == 0){
chatOnly = undefined;
document.querySelector(".controls-container").style.display = "none";
document.querySelector("#root").style.marginLeft = "0";
chatAndVideo = undefined;
} else if (gg.Switch == 1){
chatAndVideo = undefined;
chatOnly = undefined;
}
// off
// ... checkbox
function chatOnly(){
chatAndVideoCaller = undefined;
for (var i = 0; i < 1; i++){
i++;
liveChat = document.createElement("iframe");
liveChat.width = "350";
liveChat.height = "400";
liveChat.src = "https://www.youtube.com/live_chat?v="+gg.videoID+"&embed_domain=www.nitrotype.com";
liveChat.className = "chat iframe";
liveChat.id = "chat-id";
document.body.appendChild(liveChat)
if(document.querySelectorAll(".chat").length > 1){
document.querySelectorAll(".chat")[0].remove();
control()
}
}
liveChat.style.top = "1px";
} // chatonly close
function chatAndVideo(){
for (var i = 0; i < 1; i++){
i++;
liveChat = document.createElement("iframe");
liveChat.width = "350";
liveChat.height = "400";
liveChat.src = "https://www.youtube.com/live_chat?v="+gg.videoID+"&embed_domain=www.nitrotype.com";
liveChat.className = "chat iframe";
liveChat.id = "chat-id";
// styles
document.body.appendChild(liveChat)
if(document.querySelectorAll(".chat").length > 1){
document.querySelectorAll(".chat")[0].remove()
}
liveChat.style.top = "225px"
}
var liveStream = document.createElement("iframe");
liveStream.width = "350";
liveStream.height = "225";
liveStream.src = "https://www.youtube.com/embed/"+gg.videoID+"";
liveStream.className = "video iframe"
document.body.appendChild(liveStream);
control()
} // chatandvideo
// https://www.youtube.com/live_chat?is_popout=1&v=gK4qmvvfxtc
function control(){
if(window.location.href.includes("https://www.nitrotype.com/race")){
blurInput()
}
function blurInput(){
document.querySelector(".dash-copy-input").disabled = true; // not racing
if (gg.DDWR == 1){
document.querySelectorAll(".iframe").forEach(function(toBeBlurred){
toBeBlurred.style.filter = "blur(0)"
})
}
}
var checkExistence = setInterval(function(){
if(document.querySelectorAll(".dash-copy").length > 0){
setTimeout(function(){
clearInterval(checkExistence);
focusInput()
}, 500)
}
})
function focusInput(){
document.querySelector(".dash-copy-input").disabled = false;
setInterval(function(){
document.querySelector(".dash-copy-input").focus();
// localStorage // if close
}, 1);
if (gg.DDWR == 1){
document.querySelectorAll(".iframe").forEach(function(toBeBlurred){
toBeBlurred.style.filter = "blur(10px)"
})
}
}
var checkExistenceForRaceResults = setInterval(function(){
if(document.querySelectorAll(".race-results").length > 0){
clearInterval(checkExistenceForRaceResults);
blurInput();
getBack()
}
}, 500)
} // control
} // window