Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/447236/1065782/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%5BTyping-Tube%5D%E5%8B%95%E7%94%BB%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E8%A1%A8%E7%A4%BA.js
Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.
Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.
Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.
Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.
Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.
(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)
// ==UserScript==
// @name ライブラリ[Typing-Tube]動画インライン表示
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 動画インライン表示を追加
// @author You
// @match https://typing-tube.net/movie/show/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @license MIT
// ==/UserScript==
document.getElementById("roma-mode-config").insertAdjacentHTML('beforebegin',`
<div id="inline-mode-config" style="display: block;">
<h6>動画インライン設定</h6>
<label><input type="checkbox" id="movie-inline-mode" ${localStorage.getItem("RTC_InlineYT") == "true" ? "checked" : ""}> インラインモード有効</label>
<label><input type="checkbox" id="combatting-mode-inline" ${localStorage.getItem("Inherit_InlineMode") == "true" ? "checked" : ""}> 対戦時のみ有効</label>
<label><span style="
display: flex;
"><input type="range" id="opacity_change" value=`+(+localStorage.getItem("YT_opacity")? localStorage.getItem("YT_opacity"):0.3)+` step="0.01" max="0.8">透過度 <input type="range" id="brightness_change" value=`+(+localStorage.getItem("YT_brightness")? localStorage.getItem("YT_brightness"):-1)+` step="0.01" max="0" min="-1">明度</span></label>
</div>
`)
document.getElementById("movie-inline-mode").addEventListener("input", function(event){
localStorage.setItem("RTC_InlineYT", event.target.checked)
window.alert("インラインモードの設定が変更されました。ページをリロードします。")
location.reload();
});
document.getElementById("combatting-mode-inline").addEventListener("input", function(event){
localStorage.setItem("Inherit_InlineMode", event.target.checked)
window.alert("インラインモードの設定が変更されました。ページをリロードします。")
location.reload();
});
function Inline_Mode(){
if(document.getElementById("player") != null && localStorage.getItem("RTC_InlineYT") == "true" && ((localStorage.getItem("Inherit_InlineMode") == "false" || !localStorage.getItem("Inherit_InlineMode")) || sessionStorage.getItem("RTC_Switch") == "true" && localStorage.getItem("Inherit_InlineMode") == "true")){
if(sessionStorage.getItem("RTC_Switch") == "true"){
document.getElementById("ranking").style.cursor = "pointer"
document.getElementById("ranking").insertAdjacentHTML('afterbegin', `<span id="InlineMovieControl" class="`+(localStorage.getItem("RTCpreview") == "true" ? "video_pause":"video_play")+`" style="position: absolute;left: 0;right: 0;top:0;bottom:0;margin: auto;"></span>`)
}
document.querySelector(`[id*="youtube-movie-content"]`).style.opacity = document.getElementById("opacity_change").value
document.getElementsByClassName("counter")[0].insertAdjacentHTML('afterend',`<style id="brightness">
#controlbox{
background:rgba(0, 0, 0,${Math.abs(document.getElementById("brightness_change").value)})!important;
}
</style>`)
document.getElementById("ranking").addEventListener("click",function(){
if(event.target.tagName != "SPAN"){
if(!is_played&&sessionStorage.getItem("RTC_Switch") == "true"){
if(player.getPlayerState() == 1){
player.pauseVideo()
if(document.getElementById("InlineMovieControl") != null){
document.getElementsByClassName("video_pause")[0].classList.add("video_play")
document.getElementsByClassName("video_pause")[0].classList.remove("video_pause")
}
}else{
player.playVideo()
if(document.getElementById("InlineMovieControl") != null){
document.getElementsByClassName("video_play")[0].classList.add("video_pause")
document.getElementsByClassName("video_play")[0].classList.remove("video_play")
}
}
}
}
})
let style_tag = document.createElement('style');
style_tag.innerHTML = `
#youtube-movie{
position: relative;
}
#ranking{
min-height: 140px;
}
`+(RTC_Switch ? `
.video_play {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
color: rgba(0,0,0,0.6);
font-size: 136px;
}
.video_play::before {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%);
width: 0px;
height: 0px;
border: 0.3em solid transparent;
border-left: 0.5em solid currentColor;
box-sizing: border-box;
content: "";
}
.video_pause {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
color:rgba(0,0,0,0.6);
font-size: 136px;
}
.video_pause::before,
.video_pause::after {
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 0.1em;
height: 0.5em;
box-sizing: border-box;
background-color: currentColor;
content: "";
}
.video_pause::before {
left: 40%;
}
.video_pause::after {
left: 60%;
}
`:"")+`
[id*="youtube-movie-content"]{
position: absolute;
width:100%;
}
#player{
height:`+CONTROLBOX_SELECTOR.getBoundingClientRect().height+`px;
}
`
let ScriptTag_style_tag = document.getElementsByTagName('script')[0];
ScriptTag_style_tag.parentNode.insertBefore(style_tag, ScriptTag_style_tag);
$('#controlbox').before($('#youtube-movie'));
function player_adjust(){
document.getElementById("player").style.height = CONTROLBOX_SELECTOR.getBoundingClientRect().height+"px"
if(document.getElementById("movie_cover") != null){
document.getElementById("movie_cover").style.height = CONTROLBOX_SELECTOR.getBoundingClientRect().height+"px"
document.getElementById("movie_cover_black_layer").style.height = CONTROLBOX_SELECTOR.getBoundingClientRect().height+"px"
}
}
window.addEventListener('resize', player_adjust);
var observer = new MutationObserver(function(){
player_adjust()
});
/** 監視対象の要素オブジェクト */
const elem = CONTROLBOX_SELECTOR
/** 監視時のオプション */
const config = {
childList: true,//「子ノード(テキストノードも含む)」の変化
subtree: true
};
/** 要素の変化監視をスタート */
observer.observe(elem, config);
document.getElementsByClassName("share")[0].insertAdjacentHTML('afterbegin',``)
document.querySelector(`[id*="youtube-movie-content"]`).style.opacity = document.getElementById("opacity_change").value
CONTROLBOX_SELECTOR.style.background = "rgba(0, 0, 0,"+document.getElementById("brightness_change").value+")"
CONTROLBOX_SELECTOR.style.background = "rgba(0, 0, 0,"+document.getElementById("brightness_change").value+")"
document.getElementById("opacity_change").addEventListener("input",function(event){
localStorage.setItem("YT_opacity",event.target.value)
document.querySelector(`[id*="youtube-movie-content"]`).style.opacity = event.target.value
})
document.getElementById("brightness_change").addEventListener("input",function(event){
localStorage.setItem("YT_brightness",event.target.value)
document.getElementById("brightness").innerHTML = `
#controlbox{
background:`+"rgba(0, 0, 0,"+Math.abs(event.target.value)+")!important;"+`
}
`
})
var videoid = window['onYouTubeIframeAPIReady'].toString().match(/videoId: '([^']+)'/)[1]
document.getElementById("player").setAttribute("style","max-height:100%!important;max-width:100%!important;")
onYouTubeIframeAPIReady = function () {
player = new YT.Player('player', {
width:"100%",
playerVars: {
playsinline: 1,
controls: 0,
disablekb: 1,
rel: 0,
origin: location.protocol + '//' + location.hostname + "/"
},
videoId: videoid,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onPlaybackRateChange': onPlayerPlaybackRateChange,
}
});
player.difftime = 0.0;
}
}
}
Inline_Mode()