// ==UserScript==
// @name         视频外挂西悬浮可点复制翻译字幕-floating-plug-in-for-clickable-subtitle-copying

// @namespace    http://tampermonkey.net/
// @version      2023.12.15.12.56.58
// @description  视频外挂西悬浮可点复制翻译字幕,floating plug-in for clickable subtitle copying
// @author       You

// @match        *://*/*

// @icon         https://www.google.com/s2/favicons?sz=64&domain=greasyfork.org
// @grant        none

// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @include      *

// @license      MIT

// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';

  // Your code here...

  // 报错油猴脚本使用jquery报错eslint:no-undef-‘$‘ is not defined
  /* globals jQuery, $, waitForKeyElements */

  // 彩色打印
  console.clog = (content) => {
    console.log(
      `%c${content}`,
      "background-color: #811f21; color: white;line-height:1.5rem; padding:0 0.5rem;"
    );
  }

  // 全屏封装
  function goFullScreen(element) {

    console.clog('全屏视频');
    // var element = document.getElementById("fullscreenElement");
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }

  function exitFullScreen() {
    console.clog('退出全屏视频');
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (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
      } else {
        console.log("元素不处于全屏状态");
        return false
      }
    } else {
      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)) {
      goFullScreen(el)
    } else {
      exitFullScreen()
      return
    }
    if (typeof window.ActiveXObject != "undefined") {
      wscript = new ActiveXObject("WScript.Shell");
      if (wscript != null) {
        wscript.SendKeys("{F11}");
      }
    }
  }

  // 等待网页完成加载
  window.addEventListener('load', function () {
    // 加载完成后执行的代码
    console.clog('视频外挂西悬浮可点复制翻译字幕-floating-plug-in-for-clickable-subtitle-copying');

    // 视频外层
    $('video').parent().addClass("videoWrapper");
    // $('video').wrapAll('<div class="videoWrapper" style="position: relative;"/>');

    // 全屏开关元素
    const clickable_subtitle_switch_button = $("<div class='switchButton'>全屏</div>")
    // 全屏开关事件
    clickable_subtitle_switch_button.click(function (event) {
      console.clog('全屏开关点击');
      autoFullScreen(document.querySelector('.videoWrapper'));
      // 阻止冒泡
      event.stopPropagation();
    });
    // 公共样式
    const commontCss = {
      'z-index': '2147483647',
      'transform': 'translate(-50%,-50%)',
      'color': '#fff',
      'position': 'absolute',
      'line-height': '2.5rem !important',
      'padding': '0 1rem !important',
    }

    // 全屏开关样式
    clickable_subtitle_switch_button.css({
      'top': '50%',
      'left': '95%',
      'background-color': '#888',
      'cursor': 'pointer',
      'user-select': 'none',

      ...commontCss
    });

    // 网页外挂字幕元素
    const clickable_subtitle_wapper = $("<div class='floating_plug_in_for_clickable_subtitle_copying'>可点击字幕</div>")

    // 网页外挂字幕事件
    clickable_subtitle_wapper.click(function (event) {
      console.clog('字幕外层点击');

      // 阻止冒泡
      event.stopPropagation();
    });
    // 网页外挂字幕样式
    clickable_subtitle_wapper.css({
      'user-select': 'auto',
      'with': '50vw',
      'bottom': '10%',
      'left': '50%',
      'background-color': '#444',

      ...commontCss
    });

    // 网页外挂字幕文件
    const clickable_subtitle_input_file = $("<input class='clickable_subtitle_input_file' type='file' accept='.srt/.vtt' >上传字幕文件(.srt/.vtt)</input>")

    // 射手字幕网找字幕
    const clickable_subtitle_find_subtitle_webSite = $("<a class='clickable_subtitle_find_subtitle_webSite' href='https://assrt.net/' target='字幕网'>找英文字幕文件</a>")
    clickable_subtitle_find_subtitle_webSite.css({
      display: 'block',
      color: '#fff',
    })

    // 找字幕外层
    const clickable_subtitle_find_subtitle_wapper = $("<div class='clickable_subtitle_find_subtitle_wapper'></div>")

    clickable_subtitle_find_subtitle_wapper.apppend(clickable_subtitle_find_subtitle_webSite)
    clickable_subtitle_find_subtitle_wapper.apppend(clickable_subtitle_input_file)
    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 subtitleTrak = $(`        
      <track
        ref = { setTextTrackRef }
        onLoadCapture = { onLoadedData }
        srcLang = 'zh/en'
        kind = "subtitles"
        label = "zh/en"
        default
        src = { subSrc }
      />
    `)

    // 挂载字幕元素
    videoWrapper.prepend(clickable_subtitle_switch_button);
    videoWrapper.prepend(clickable_subtitle_wapper);
  }, false);

})();