[Typing-Tube]動画インライン表示

動画インライン表示を追加

// ==UserScript==
// @name         [Typing-Tube]動画インライン表示
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  動画インライン表示を追加
// @author       You
// @match        https://typing-tube.net/movie/show/*
// @exclude      *?test=test*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at document-end
// @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_roma").style.cursor = "pointer"
				document.getElementById("ranking_roma").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_roma").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: absolute;
	width:auto!important;
}
#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-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()