try to take over the world!
目前為
// ==UserScript==
// @name [Typing-Tube]試聴再生を追加
// @namespace http://tampermonkey.net/
// @version 3.7
// @description try to take over the world!
// @author You
// @include https://typing-tube.net*
// @exclude https://typing-tube.net/movie/*
// ==/UserScript==
let Phone_flag = navigator.userAgent.match(/(iPhone|iPod|iPad|Android.*Mobile)/i)
let control_enable = 1
let humenID = 0
let request_videoid = ""
let img_selector
let td_flag = false
let resize_dom
let hover_id = 0
let hover_request_videoid = ""
let demo_player_html = document.createElement('div');
demo_player_html.setAttribute("id", "player_demo");
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let start_time = 0
let img_height_size = 0
let img_width_size = 0
let preview_time = 0
let transparent_cover = document.createElement('div');
transparent_cover.setAttribute("id", "transparent_cover");
let loading_html = document.createElement('span');
loading_html.setAttribute("id", "loading_logo");
loading_html.setAttribute("class", "loader");
let speed_Fixed = [0.25,0.5,0.75,1.00,1.25,1.5,1.75,2]
let speed_title
function set_preview_video(event){
if(event.key == "Shift"){
if(hover_id && hover_id[0] != humenID[0]){
humenID = hover_id
$.ajax({
type: 'POST',
url: '/movie/lyrics/' + humenID,
success:function(data){
const data_split = data.split("\n")
start_time = -1
speed_title = data_split[0].match(/^【\d?\.?\d?\d倍速】/)
if(speed_title){
speed_title = parseFloat(speed_title[0].slice(1))
if(!speed_Fixed.includes(speed_title)){
speed_title = false
}
}
for(let i=0;i<data_split.length;i++){
if(i>0){
if(start_time == -1 && data_split[i].split("\t")[2]){
start_time = Math.floor(+data_split[i].split("\t")[0])
preview_time = +data_split[i].split("\t")[0]
}else if(data_split[i].split("\t")[0].substr( -5, 1 ) == "."){
start_time = Math.floor(+data_split[i].split("\t")[0])
preview_time = +data_split[i].split("\t")[0]
break;
}
}
}
demo_video_delete()
control_enable = 0
if(timeline_flag && !user_timeline_flag){
transparent_cover.setAttribute("style", "left: 0;right: 0;margin: auto;");
// demo_player_html.setAttribute("style", "left: 0;right: 0;margin: auto;z-index:1;opacity: 0;");
}else{
demo_player_html.setAttribute("style", "opacity: 0;");
transparent_cover.setAttribute("style", "z-index:1;");
}
onYouTubeIframeAPIReady_demo(data.match(/(v=).*\n/)[0].slice(2))
}
});
}else if(hover_request_videoid && request_videoid != hover_request_videoid){
demo_video_delete()
request_videoid = hover_request_videoid
control_enable = 1
preview_time = 0
if(timeline_flag && !user_timeline_flag){
transparent_cover.setAttribute("style", "left: 0;right: 0;margin: auto;");
// demo_player_html.setAttribute("style", "left: 0;right: 0;margin: auto;z-index:1;opacity: 0;");
}else{
demo_player_html.setAttribute("style", "opacity: 0;z-index:1;");
}
onYouTubeIframeAPIReady_demo(request_videoid)
}
}
}
var player_demo
let username_selector
function onYouTubeIframeAPIReady_demo(preview_videoid) {
if(td_flag){
img_height_size = 60
img_width_size = 90
document.getElementsByTagName('section')[0].insertAdjacentHTML('beforebegin', `<div id="player_demo" style="opacity: 0;"></div>`)
document.getElementById("player_demo").parentNode.insertBefore(transparent_cover, document.getElementById("player_demo"));
document.getElementById("transparent_cover").appendChild(loading_html);
document.getElementById("loading_logo").style.top = "42px"
document.getElementById("loading_logo").style.left = "88%"
if(td_flag.classList[0] == "mt-5"){
const elements = [].slice.call( document.querySelectorAll("li.mt-5") ) ;
// 要素の順番を取得
if(elements.indexOf( td_flag )){
document.getElementById("player_demo").classList.add('mt-5');
document.getElementById("transparent_cover").classList.add('mt-5');
}
}
demo_player_html.setAttribute("style", "position:absolute;opacity: 0;");
document.getElementById("transparent_cover").setAttribute("style", "z-index:1;");
transparent_cover.style.height = (img_height_size)+"px"
transparent_cover.style.width = (img_width_size)+"px"
}else if(img_selector){
img_height_size = img_selector.height
img_width_size = img_selector.width
if(timeline_flag){
if(!user_timeline_flag){
img_selector.parentNode.classList.add('col-12');
username_selector = img_selector.parentNode.querySelector(".username")
// demo_player_html.style.top = (parseInt(getComputedStyle( username_selector, null ).marginBottom)+username_selector.offsetHeight)+"px"
transparent_cover.style.top = (parseInt(getComputedStyle( username_selector, null ).marginBottom)+username_selector.offsetHeight)+"px"
}
}
transparent_cover.style.height = (img_height_size)+"px"
transparent_cover.style.width = (img_width_size)+"px"
if(hover_id){
transparent_cover.setAttribute("href", "https://typing-tube.net/movie/show/"+humenID);
}else if(hover_request_videoid){
transparent_cover.setAttribute("href", "/movie/edit?videoid="+request_videoid);
}
img_selector.parentNode.insertBefore(demo_player_html, img_selector);
img_selector.parentNode.insertBefore(transparent_cover, img_selector);
document.getElementById("transparent_cover").appendChild(loading_html);
document.getElementById("loading_logo").style.top = ""
document.getElementById("loading_logo").style.left = ""
document.getElementById("transparent_cover").addEventListener("mousedown",mouseclick_event,true)
demo_player_html = document.getElementById("player_demo").cloneNode(true)
resize_dom = img_selector.parentNode.querySelector("img[src*='i.ytimg.com']")
}
player_demo = new YT.Player('player_demo', {
height: img_height_size ,
width: img_width_size ,
playerVars: {
autoplay: 1,
disablekb: 1,
modestbranding:1,
origin: location.protocol + '//' + location.hostname + "/",
start: start_time
},
videoId: preview_videoid,
events: {
'onReady': onPlayerReady_demo,
'onStateChange': onPlayerStateChange_demo
}
});
}
function onPlayerReady_demo(event) {
player_demo.setVolume(+document.getElementById("volume_control").value)
window.addEventListener('keydown',keydown_et,true);
player_demo.seekTo(preview_time-0.07)
}
function onPlayerStateChange_demo(event) {
if(player_demo){
if(event.data == 0){
demo_video_delete()
}else if(event.data == 1){
if(speed_title){
player_demo.setPlaybackRate(speed_title);
}
document.getElementById("player_demo").style.opacity = 1
}else if(event.data == -1){
}
}
}
function keydown_et(event){
if(event.key == "Escape"){
demo_video_delete()
humenID = 0
request_videoid = ""
if(!img_selector){
hover_id = 0
hover_request_videoid = ""
}
window.removeEventListener('keydown',keydown_et,true);
}
}
function demo_video_delete(){
if(player_demo){
if(resize_dom){
resize_dom.style.opacity = 1
resize_dom = 0
}
if(document.getElementById("loading_logo") != null){
document.getElementById("loading_logo").remove()
}
if(document.getElementById("player_demo") != null){
document.getElementById("player_demo").remove()
}
player_demo = false
}
}
//Set EventListener
window.addEventListener( 'resize', function() {
if(resize_dom && document.getElementById("player_demo") != null && img_height_size != 60){
img_height_size = resize_dom.height
img_width_size = resize_dom.width
document.getElementById("transparent_cover").style.height = img_height_size+"px"
document.getElementById("transparent_cover").style.width = img_width_size+"px"
document.getElementById("player_demo").setAttribute("height",img_height_size)
document.getElementById("player_demo").setAttribute("width",img_width_size)
if(timeline_flag){
if(!user_timeline_flag){
document.getElementById("player_demo").style.top = (parseInt(getComputedStyle( username_selector, null ).marginBottom)+username_selector.offsetHeight)+"px"
document.getElementById("transparent_cover").style.top = (parseInt(getComputedStyle( username_selector, null ).marginBottom)+username_selector.offsetHeight)+"px"
}
}
}
}, false );
window.addEventListener("keyup", set_preview_video,true);
//Create Volume Control
function video_volume_change(){
if(document.getElementById("player_demo") != null){
player_demo.setVolume(+document.getElementById("volume_control").value)
}
localStorage.setItem('volume_storage',document.getElementById("volume_control").value)
document.getElementById("volume").textContent = document.getElementById("volume_control").value;
}
let set_selector = document.querySelector(`[class="row w-100"]`) && document.getElementsByClassName("level").length < 2 ? document.getElementsByClassName("level")[0].parentNode : document.getElementById("main_content")
set_selector.insertAdjacentHTML('afterbegin', `<div id="demo_play_container" style="
display: flex;
margin-top: 25px;
margin-left: 30px;
"><label id="volume_control_area" style="
display: flex;
justify-content: flex-end;
position: relative;
align-items: baseline;
margin-right: 42px;
"><span style="/* position:absolute; */"><span style="
position: absolute;
z-index: -1;
top: -22px;
/* left: 3px; */
color: #FFFFFF88;
">Volume</span><input type="range" id="volume_control" value="70" step="1" max="100"><span style="margin-left: 10px; position: absolute;
top: 5px;"><span id="volume" style="
background: #00000088;
padding: 3px;
border: solid thin;
border-radius: 5px;
position: absolute;
top: -10px;
min-width: 25px;
text-align: center;
">`+localStorage.getItem("volume_storage")+`</span></span></span></label>
<span style="
display: flex;
flex-direction: column;
position: relative;
top: -13px;
margin-left: 25px;
background: #111111b5;
padding: 3px 7px 2px 7px;
border-radius: 11px;
"><span>再生したい動画にカーソルを合わせてShiftキー:再生</span><span>再生中にEscapeキー:停止</span></span></div>
<style>
#volume_control {
-webkit-appearance: none;
width: 11rem;
background: transparent;
}
#volume_control:focus {
outline: none;
}
#volume_control::-webkit-slider-runnable-track {
height: 1.5rem;
margin: 0;
width: 100%;
cursor: pointer;
background: #464646;
background: linear-gradient(
to bottom right,
transparent 50%,
#000000bb 50%
);
}
#volume_control::-moz-range-track {
height: 1.5rem;
margin: 0;
width: 100%;
cursor: pointer;
background: #464646;
background: linear-gradient(
to bottom right,
transparent 50%,
#000000bb 50%
);
}
#volume_control::-webkit-slider-thumb {
-webkit-appearance: none;
height: 1.9rem;
width: 0.5rem;
background: #ffffff;
border: 1px solid;
margin-top: -3px;
border-radius: 3px;
cursor: pointer;
}
#volume_control::-moz-range-thumb {
-webkit-appearance: none;
height: 1.9rem;
width: 0.5rem;
background: #ffffff;
border: 1px solid;
border-radius: 3px;
cursor: pointer;
margin-top: 0;
}
#volume_control:focus::-moz-range-thumb {
box-shadow: 0px 0px 7px 3px #0065c4;
}
#transparent_cover{
position:absolute;
cursor:pointer;
}
#player_demo{
position: fixed;
z-index: 103;
width: 355px;
height: 200px;
bottom: 30px;
right: 17px;
}
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
left: 95%;
top: -20px;
color: #ffffff;
text-indent: -9999em;
z-index:1;
position: absolute;
font-size: 3px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
</style>`)
document.getElementById("volume_control").addEventListener("input", video_volume_change);
document.getElementById("volume_control").setAttribute("value",localStorage.getItem('volume_storage'))
if(Phone_flag){document.getElementById("demo_play_container").style.display = "none"}
//Set Mouse EventListener
let timeline_flag = false
let user_timeline_flag = false
function get_img(event){
const find_selector_word = ["timeline","mt-3","col"]
for(let i=0;i<find_selector_word.length;i++){
if(event.target.closest("[class*="+find_selector_word[i]+"]") && event.target.closest("[class*="+find_selector_word[i]+"]").querySelector("img[src*='i.ytimg.com']")){
if(find_selector_word[i] == "timeline" && location.href.match("user")){
timeline_flag = true
user_timeline_flag = true
}else if(find_selector_word[i] == "timeline"){
timeline_flag = true
user_timeline_flag = false
}else{
timeline_flag = false
user_timeline_flag = false
}
return event.target.closest("[class*="+find_selector_word[i]+"]").querySelector("img[src*='i.ytimg.com']")
}
}
return false
}
function mouseover_event(event) {
const hover_link = event.target.closest("[href*='movie/show/']")?event.target.closest("[href*='movie/show/']"):event.target.closest("[href*='edit?']")
if(hover_link){
if(hover_link.href){
img_selector = get_img(event)
if(hover_link.closest("[style*='i.ytimg.com']")){
td_flag = hover_link.closest("[style*='i.ytimg.com']")
}else if(hover_link.querySelector("[style*='i.ytimg.com']")){
td_flag = hover_link.querySelector("[style*='i.ytimg.com']")
}else{
td_flag = false
}
if(hover_link.href.match("videoid=")){
hover_request_videoid = hover_link.href.replace("https://typing-tube.net/movie/edit?videoid=","")
}else{
hover_id = hover_link.href.match(/[0-9]+\.?[0-9]*/g)
}
}
}
}
function mouseout_event(event) {
img_selector = false
td_flag = false
hover_id = humenID
hover_request_videoid = request_videoid
}
function mouseclick_event(event){
if(event.shiftKey || event.ctrlKey || event.button == 2){
humenID = 0
hover_id = 0
request_videoid = ""
hover_request_videoid = ""
demo_video_delete()
}
}
function hidden_delete(){
if(document.getElementById("player_demo") && document.getElementById("player_demo").offsetParent == null){
humenID = 0
hover_id = 0
request_videoid = ""
hover_request_videoid = ""
demo_video_delete()
}
}
function eventlistener(){
let typing_link = document.querySelectorAll("[href*='movie/show/']")
let edit_link = document.querySelectorAll("[href*='edit?']")
for(let n = 0; n < typing_link.length ; n++){
typing_link[n].addEventListener("mouseout",mouseout_event,true)
typing_link[n].addEventListener("mousedown",mouseclick_event,true)
}
for(let n = 0; n < edit_link.length ; n++){
edit_link[n].addEventListener("mouseout",mouseout_event,true)
edit_link[n].addEventListener("mousedown",mouseclick_event,true)
}
window.addEventListener("mouseover",mouseover_event,true)
//window.addEventListener("click",hidden_delete,false)
}
eventlistener();