// ==UserScript==
// @name         视频外挂悬浮可点复制翻译字幕,floating-plug-in-for-clickable-subtitle-copying
// @description  视频外挂悬浮可点复制翻译字幕,floating plug-in for clickable subtitle copying
// @grant        GM_log
// @grant        none
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @require      https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js
// @include      *
// @match        *://*/*
// @namespace    http://tampermonkey.net/
// @version      2023.12.16.18.09.31
// @icon         https://www.google.com/s2/favicons?sz=64&domain=greasyfork.org
// @author       You
// @downloadURL none
// ==/UserScript==

(()=>{ "use strict";
// import "./styles.css";
// GM_log("Hello world! GM_log")
// Your code here...
// 报错油猴脚本使用jquery报错eslint:no-undef-‘$‘ is not defined
// eslint-disable-next-line no-unused-vars
/* globals jQuery, $, waitForKeyElements */
// 彩色打印
const clog = content=>{ console.log(`%c${content}`,"background-color: #811f21; color: white;line-height:1.5rem; padding:0 0.5rem;") };
// 全屏封装
function goFullScreen(element){ clog("全屏视频");
// var element = document.getElementById("fullscreenElement");
element.requestFullscreen ? element.requestFullscreen() : element.mozRequestFullScreen ? element.mozRequestFullScreen() : element.webkitRequestFullscreen ? element.webkitRequestFullscreen() : element.msRequestFullscreen && element.msRequestFullscreen() }function exitFullScreen(){ clog("退出全屏视频");document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen() }function checkFullScreen(element){
// var element = document.getElementById("fullscreenElement");
if(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement){ if(element === document.fullscreenElement || element === document.mozFullScreenElement || element === document.webkitFullscreenElement || element === document.msFullscreenElement){ console.log("元素处于全屏状态");return true }console.log("元素不处于全屏状态");return false }console.log("不处于全屏状态");return false }function autoFullScreen(el){
// var el = document,
//   cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
//   wscript;
// if (typeof cfs != "undefined" && cfs) {
//   cfs.call(el);
//   return;
// }
if(checkFullScreen(el)){ exitFullScreen();return }goFullScreen(el);if(typeof window.ActiveXObject != "undefined"){
// eslint-disable-next-line no-undef
const wscript = new ActiveXObject("WScript.Shell");wscript != null && wscript.SendKeys("{F11}") } }
// 等待网页完成加载
window.addEventListener("load",function(){
// 加载完成后执行的代码
clog("视频外挂西悬浮可点复制翻译字幕-floating-plug-in-for-clickable-subtitle-copying");
// 允许全屏
$("iframe").each(function(){ $(this).attr("allowfullscreen","true") });
// 移动端控制台
// new VConsole();
// 视频外层
const videoElement = $("video");
// 视频父元素
// const videoParentElement = videoElement.wrapAll('<div class="videoWrapper" style="position: relative;"/>');
const videoParentElement = videoElement.parent();videoParentElement.addClass("videoWrapper");videoParentElement.css({ position: "relative" });
// 隐藏字幕轨道
videoElement.append("<style>video::cue{opacity: 0 !important}</style>");videoElement.attr("controls","true");videoElement.attr("playsInline","true");
// 全屏开关元素
const clickable_subtitle_switch_button = $("<button class='switchButton'>全屏</button>");
// 全屏开关事件
clickable_subtitle_switch_button.on("click",function(event){ event.stopPropagation();clog("全屏开关点击");autoFullScreen(document.querySelector(".videoWrapper")) });
// 公共样式
const commontCss = { "z-index": "2147483647",color: "#fff",position: "absolute" };
// 开关公共样式
const buttonCommontCss = { margin: "1vw",display: "block",padding: "0.5vw","border-radius": ".5vw","background-color": "#1118","font-size": "1.5vw",cursor: "pointer","user-select": "text","line-height": "2.5rem !important",color: "#fffb" };
// 全屏开关样式
clickable_subtitle_switch_button.css({ ...buttonCommontCss });
// 字幕显示开关元素
const clickable_subtitle_show_switch_button = $("<button class='switchButton'>显隐</button>");let isShow_subtitle = true;
// 字幕显示开关事件
clickable_subtitle_show_switch_button.on("click",function(event){ event.stopPropagation();clog("字幕显示开关点击");isShow_subtitle = !isShow_subtitle;clickable_subtitle_wapper.css({ display: isShow_subtitle ? "block" : "none" }) });
// 字幕显示开关样式
clickable_subtitle_show_switch_button.css({ ...buttonCommontCss });
// 网页外挂字幕元素
const clickable_subtitle_wapper = $("<div class='floating_plug_in_for_clickable_subtitle_copying'></div>");
// 网页外挂字幕事件
clickable_subtitle_wapper.click(function(event){ clog("字幕外层点击");
// console.log(' :', [videoElement]);
// 阻止冒泡
event.stopPropagation() });clickable_subtitle_wapper.on("mousedown",e=>{ e.stopPropagation();console.log(" :",[videoElement]);videoElement?.[0].pause() });clickable_subtitle_wapper.on("touchstart",e=>{ e.stopPropagation();console.log(" :",[videoElement]);videoElement?.[0].pause() });clickable_subtitle_wapper.on("mouseup",e=>{ e.stopPropagation();if(window?.getSelection()?.toString()){ console.log(" :",[videoElement]);videoElement?.[0].pause();return }console.log(" :",[videoElement]);videoElement?.[0].play() });clickable_subtitle_wapper.on("touchend",e=>{ e.stopPropagation();if(window?.getSelection()?.toString()){ console.log(" :",[videoElement]);videoElement?.[0].pause();return }console.log(" :",[videoElement]);videoElement?.[0].play() });
// 网页外挂字幕样式
clickable_subtitle_wapper.css({ ...commontCss,border: "2px solid #aaa8",transform: "translateX(-50%)",display: "block","user-select": "text",width: "80vw",bottom: "0",left: "50%",padding: "3vw 3vw 10vh 3vw","background-color": "#1b2129ee","line-height": "4rem !important","font-size": " 3vw","text-align": " center",mask: "linear-gradient(180deg, black 0%, rgba(0, 0, 0, 1) 80%,rgba(0, 0, 0, 0.0) 95%)","border-radius": "3vw 3vw 0 0","box-shadow": "inset 0 0 2vw #666" });
// 字幕轨道
const subtitleTrack = $('<track  class="videoTrack" kind = "subtitles" default /> ');videoElement.prepend(subtitleTrack);
// 缓存字幕数据
/* document.querySelector('.videoTrak') */subtitleTrack.on("load",()=>{});
// 网页外挂字幕文件
const clickable_subtitle_input_file = $(`<div><input id='input' style='font-size: 2vw;' class='clickable_subtitle_input_file' type='file'  accept='.vtt'>  </input><label style='font-size: 2vw;' for='input'>上传字幕文件(.vtt)</label>  </div> `);clickable_subtitle_input_file.css({ "font-size": " 2vw","background-color": "#0004","order-radius": " 2vw !important",padding: "1vw 4vw",display: "flex","justify-content": "space-between","align-items": "center" });const clickable_subtitle_input_file_transer = $(`<a style='color:#fff;display:block;' href='https://converter.app/srt-to-vtt/result.php?lang=cn' target='转格式'>字幕文件转格式(.srt->.vtt)网站</a>`);clickable_subtitle_input_file.css({ "font-size": "2vw" });
// 字幕读取近内存
clickable_subtitle_input_file.on("change",e=>{ e.stopPropagation();const file = e.target.files[0];console.log("file :",file);
// window?.localStorage?.setItem(`${window.location.href}`, JSON.stringify(lastPlaybackPosition?.current))
if(!file)return;document.querySelector(".videoTrack").src = URL.createObjectURL(file);
// subtitleTrack.attr('src', URL.createObjectURL(file))
console.log(" :",[videoElement]);document.querySelector("video").textTracks[0].oncuechange = e=>{ console.log(" :",e?.currentTarget?.activeCues[0]?.text);clickable_subtitle_wapper.html(`<p style="user-select:text;">${e?.currentTarget?.activeCues[0]?.text}</p>`) } });
// 射手字幕网找字幕
const clickable_subtitle_find_subtitle_webSite = $("<a class='clickable_subtitle_find_subtitle_webSite' href='https://assrt.net/' target='字幕网'>找字幕文件网1 </a>");const clickable_subtitle_find_subtitle_webSite2 = $("<a class='clickable_subtitle_find_subtitle_webSite' href='https://www.opensubtitles.org/zh' target='字幕网'>找字幕文件网2 </a>");const clickable_subtitle_find_subtitle_webSite3 = $("<a class='clickable_subtitle_find_subtitle_webSite' href='https://subscene.com/' target='字幕网'>找字幕文件网3 </a>");clickable_subtitle_find_subtitle_webSite.css({ color: "#fff" });clickable_subtitle_find_subtitle_webSite2.css({ color: "#fff" });clickable_subtitle_find_subtitle_webSite3.css({ color: "#fff" });
// 找字幕外层
const clickable_subtitle_find_subtitle_wapper = $("<div class='clickable_subtitle_find_subtitle_wapper'></div>");const clickable_subtitle_find_subtitle_webSite_wapper = $("<div class='clickable_subtitle_find_subtitle_webSite_wapper'></div>");clickable_subtitle_find_subtitle_webSite_wapper.css({ display: "flex","justify-content": "space-between","align-items": "center","font-size": "2vw","order-radius": "2vw !important",padding: "1vw 4vw","background-color": "#0004" });clickable_subtitle_find_subtitle_webSite_wapper.append(clickable_subtitle_find_subtitle_webSite);clickable_subtitle_find_subtitle_webSite_wapper.append(clickable_subtitle_find_subtitle_webSite2);clickable_subtitle_find_subtitle_webSite_wapper.append(clickable_subtitle_find_subtitle_webSite3);clickable_subtitle_find_subtitle_wapper.append(clickable_subtitle_input_file);clickable_subtitle_find_subtitle_wapper.append(clickable_subtitle_input_file_transer);clickable_subtitle_find_subtitle_wapper.append(clickable_subtitle_find_subtitle_webSite_wapper);clickable_subtitle_wapper.prepend(clickable_subtitle_find_subtitle_wapper);
// 准备改成父级嵌套
// 挂载开关
const videoWrapper = $(".videoWrapper");videoWrapper.css({ "font-size": "2vw","line-height": "2.5rem !important",padding: "0 1rem !important" });
// 按钮外框
const buttonWrapper = $(`<div class="buttonWrapper"/>`);buttonWrapper.css({ ...commontCss,top: "50%",right: "0",color: "#fff",transform: "translateY(-50%)" });buttonWrapper.append(clickable_subtitle_switch_button);buttonWrapper.append(clickable_subtitle_show_switch_button);
// 挂载字幕元素
videoWrapper.append(buttonWrapper);videoWrapper.append(clickable_subtitle_wapper);
//全部元素可选
$("*").css("user-select","text") },false) })();