// ==UserScript==
// @name         floating-plug-in-for-clickable-subtitle-copying

// @namespace    http://tampermonkey.net/
// @version      2023.12.15.14.20.23
// @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');

    // 视频外层
    const videoElement = $('video')

    videoElement.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('字幕外层点击');
      // console.log(' :', [videoElement]);

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

      ...commontCss
    });

    // 字幕轨道
    const subtitleTrack = $('<track  class="videoTrack" kind = "subtitles" default /> ')

    videoElement.prepend(subtitleTrack)

    // 缓存字幕数据
    /* document.querySelector('.videoTrak') */subtitleTrack.on('load', (e) => {
      // videoElement.textTracks[0].oncuechange = (e) => {
      //   console.log(' :', e?.currentTarget?.activeCues);
      // }
      // console.clog('字幕数据缓存 :', 字幕数据缓存);

      // console.log(' :', [videoElement]);

      // const cues = e?.target?.track?.cues
      // const subArr = []
      // const arrCues = cues?.length
      // if (arrCues) {
      //   for (let index = 0; index < arrCues; index++) {
      //     const element = cues?.[index];
      //     if (element) {
      //       element.id = `${index}`
      //       subArr?.push({
      //         align: element?.align,//"center",
      //         endTime: element?.endTime,//18.27,
      //         id: element?.id,//"0",
      //         line: element?.line,//"auto",
      //         pauseOnExit: element?.pauseOnExit,//false,
      //         position: element?.position,//"auto",
      //         size: element?.size,//100,
      //         snapToLines: element?.snapToLines,//true,
      //         startTime: element?.startTime,//15.68,
      //         text: element?.text,//"我叫玛丽·艾莉丝·杨\nMy name is Mary Alice Young.",
      //         text0: element?.text?.split('\n')?.[0],//"我叫玛丽·艾莉丝·杨",
      //         // text0: (element?.text?.includes('\n') && subHidenType?.type !=='5') ? element?.text?.split('\n')?.[0] : element?.text,//"我叫玛丽·艾莉丝·杨",
      //         text0Show: text0Show,
      //         text1: element?.text?.split('\n')?.[1],//"My name is Mary Alice Young.",
      //         // text1: (element?.text?.includes('\n') && subHidenType?.type !=='5') ? element?.text?.split('\n')?.[1] : element?.text,//"My name is Mary Alice Young.",
      //         text1Show: text1Show,
      //       })
      //     }
      //   }
      // }

      // console.clog(subArr);
    });




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

    // 字幕读取近内存
    clickable_subtitle_input_file.on('change', (e) => {
      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.text(e?.currentTarget?.activeCues[0]?.text)
      }
    })


    // 射手字幕网找字幕
    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.append(clickable_subtitle_find_subtitle_webSite)
    clickable_subtitle_find_subtitle_wapper.append(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',
    })




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

})();