// ==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.03.04
// @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": "none", "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": "auto", 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>${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", "auto")
  }, false)
})();