try to take over the world!
目前為
// ==UserScript==
// @name [Typing-Tube]試聴再生を追加
// @namespace http://tampermonkey.net/
// @version 1.4
// @description try to take over the world!
// @author You
// @include *create_movies?*
// @match https://typing-tube.net/my/*
// @exclude https://typing-tube.net/movie/edit*
// @grant https://www.youtube.com/iframe_api
// ==/UserScript==
let control_enable = 1
let humenID = 0
let request_videoid = ""
let img_selector
let td_flag = false
let resize_dom
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
function set_preview_video(){
if(event.shiftKey){
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
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
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
onYouTubeIframeAPIReady_demo(request_videoid)
}
}
}
var player_demo
function onYouTubeIframeAPIReady_demo(preview_videoid) {
if(td_flag){
img_height_size = 60
img_width_size = 90
td_flag.insertAdjacentHTML('beforebegin', `<div id="player_demo" style="position:absolute;"></div>`)
}else{
img_height_size = img_selector.height
img_width_size = img_selector.width
if(demo_player_html.getAttribute("style") == "margin: auto;"){
img_selector.style.position = "absolute"
img_selector.style.visibility = "hidden"
}
img_selector.parentNode.insertBefore(demo_player_html, img_selector);
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+1 ,
width: img_width_size+1 ,
playerVars: {
autoplay: 1,
controls: control_enable,
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("demo_volume").value)
window.addEventListener('keydown',keydown_et,true);
player_demo.seekTo(preview_time-0.07)
}
function onPlayerStateChange_demo(event) {
if(player_demo && player_demo.getPlayerState() == 0){
demo_video_delete()
}
}
function keydown_et(event){
if(event.key == "Escape"){
demo_video_delete()
humenID = 0
hover_id = 0
request_videoid = ""
hover_request_videoid = ""
window.removeEventListener('keydown',keydown_et,true);
}
}
function demo_video_delete(){
if(player_demo){
if(resize_dom){
resize_dom.style.position = "static"
resize_dom.style.visibility = "visible"
document.getElementById("player_demo").remove()
resize_dom = 0
}else{
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+1
img_width_size = resize_dom.width+1
document.getElementById("player_demo").setAttribute("height",img_height_size)
document.getElementById("player_demo").setAttribute("width",img_width_size)
}
}, false );
window.addEventListener("keydown", set_preview_video,true);
//Create Volume Control
function video_volume_change(){
if(document.getElementById("player_demo") != null){
player_demo.setVolume(+document.getElementById("demo_volume").value)
}
localStorage.setItem('demo_volume',document.getElementById("demo_volume").value)
}
document.getElementById("main_content").insertAdjacentHTML('afterbegin', `<div style="margin-top:1rem;"><label>音量 <input value="70" type="range" id="demo_volume"></label>
<span> [再生したい動画にカーソルを合わせてShiftキー:再生] / [再生中にEscapeキー:停止]</span></div><style>
body{
background: #000;
}
html input[type=range] {
outline: 0;
border: 0;
border-radius: 500px;
width: 100px;
max-width: 100%;
margin: 24px 0 16px;
transition: box-shadow 0.2s ease-in-out;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
html input[type=range] {
overflow: hidden;
height: 15px;
-webkit-appearance: none;
background-color: #FFF;
}
html input[type=range]::-webkit-slider-runnable-track {
height: 15px;
-webkit-appearance: none;
color: #444;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.1s ease-in-out;
}
html input[type=range]::-webkit-slider-thumb {
width: 15px;
-webkit-appearance: none;
height: 15px;
cursor: ew-resize;
background: #fff;
box-shadow: -195px 0 0 187px #1597ff, inset 0 0 0 15px #1597ff;
border-radius: 50%;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.1s ease-in-out;
position: relative;
}
html input[type=range]:active::-webkit-slider-thumb {
background: #fff;
box-shadow: -195px 0 0 187px #1597ff, inset 0 0 0 3px #1597ff;
}
}
html input[type=range]::-moz-range-progress {
background-color: #FFF;
}
html input[type=range]::-moz-range-track {
background-color: #FFF;
}
html input[type=range]::-ms-fill-lower {
background-color: #43e5f7;
}
html input[type=range]::-ms-fill-upper {
background-color: #FFF;
}
</style>`)
document.getElementById("demo_volume").addEventListener("input", video_volume_change);
document.getElementById("demo_volume").setAttribute("value",localStorage.getItem('demo_volume'))
//Set Mouse EventListener
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"){
demo_player_html.setAttribute("style", "margin: auto;");
}else{
demo_player_html.setAttribute("style", "position:absolute;");
}
return event.target.closest("[class*="+find_selector_word[i]+"]").querySelector("img[src*='i.ytimg.com']")
}
}
return false
}
let hover_id = 0
let hover_request_videoid = ""
function mouseover_event(event) {
img_selector = get_img(event)
td_flag = event.target.closest("[style*='i.ytimg.com']") ? event.target.closest("[style*='i.ytimg.com']"):false
if(event.currentTarget.href.match("videoid=")){
hover_request_videoid = event.currentTarget.href.replace("https://typing-tube.net/movie/edit?videoid=","")
}else{
hover_id = event.currentTarget.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 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("mouseover",mouseover_event,true)
typing_link[n].addEventListener("mouseout",mouseout_event,true)
}
for(let n = 0; n < edit_link.length ; n++){
edit_link[n].addEventListener("mouseover",mouseover_event,true)
edit_link[n].addEventListener("mouseout",mouseout_event,true)
}
}
eventlistener();