☰

External Player

Play web video via external player

目前为 2024-11-24 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                    External Player
  3. // @name:zh-CN              外部播放器
  4. // @namespace               https://github.com/LuckyPuppy514/external-player
  5. // @copyright               2024, Grant LuckyPuppy514 (https://github.com/LuckyPuppy514)
  6. // @version                 1.0.0
  7. // @license                 MIT
  8. // @description             Play web video via external player
  9. // @description:zh-CN       使用外部播放器播放网页中的视频
  10. // @icon                    https://www.lckp.top/gh/LuckyPuppy514/pic-bed/common/mpv.png
  11. // @author                  LuckyPuppy514
  12. // @homepage                https://github.com/LuckyPuppy514/external-player
  13. // @include                 *://*
  14. // @grant                   GM_setValue
  15. // @grant                   GM_getValue
  16. // @run-at                  document-end
  17. // @require                 https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/pako/2.0.4/pako.min.js
  18. // ==/UserScript==
  19.  
  20. 'use strict';
  21.  
  22. const SETTING_URL = undefined;
  23. // const SETTING_URL = 'http://127.0.0.1:5500/setting.html';
  24.  
  25. const VIDEO_URL_REGEX_GLOBAL = /https?:\/\/((?![^"^']*http)[^"^']+(\.|%2e)(mp4|mkv|flv|m3u8|m4s|m3u|mov|avi|wmv|webm)(\?[^"^']+|))|((?![^"^']*http)[^"^']+\?[^"^']+(\.|%2e|video_)(mp4|mkv|flv|mov|avi|wmv|webm|m3u8|m3u)[^"^']*)/ig;
  26.  
  27. const VIDEO_URL_REGEX_EXACT = /^https?:\/\/((?![^"^']*http)[^"^']+(\.|%2e)(mp4|mkv|flv|m3u8|m4s|m3u|mov|avi|wmv|webm)(\?[^"^']+|))|((?![^"^']*http)[^"^']+\?[^"^']+(\.|%2e|video_)(mp4|mkv|flv|mov|avi|wmv|webm|m3u8|m3u)[^"^']*)$/ig;
  28.  
  29. const defaultConfig = {
  30.     global: {
  31.         version: '1.0.0',
  32.         language: (navigator.language || navigator.userLanguage) === 'zh-CN' ? 'zh' : 'en',
  33.         buttonXCoord: '0',
  34.         buttonYCoord: '0',
  35.         buttonScale: '1.00',
  36.         buttonVisibilityDuration: '5000',
  37.         networkProxy: '',
  38.         parser: {
  39.             ytdlp: {
  40.                 regex: [
  41.                     "https://www.youtube.com/watch\\?.+",
  42.                     "https://www.youtube.com/playlist\\?list=.+",
  43.                     "https://www.lckp.top/play-with-mpv/index.html",
  44.                 ],
  45.                 preferredQuality: 'unlimited',
  46.             },
  47.             video: {
  48.                 regex: [
  49.                     "https://www.libvio.fun/play/.+",
  50.                     "https://www.tucao.my/play/.+",
  51.                     "https://ddys.pro/.+"
  52.                 ]
  53.             },
  54.             url: {
  55.                 regex: [
  56.                     "https://anime.girigirilove.com/play.+",
  57.                 ]
  58.             },
  59.             html: {
  60.                 regex: []
  61.             },
  62.             script: {
  63.                 regex: []
  64.             },
  65.             request: {
  66.                 regex: []
  67.             },
  68.             bilibili: {
  69.                 regex: [
  70.                     "https://www.bilibili.com/bangumi/play/.+",
  71.                     "https://www.bilibili.com/video/.+",
  72.                     "https://www.bilibili.com/list/.+",
  73.                     "https://www.bilibili.com/festival/.+"
  74.                 ],
  75.                 preferredQuality: '127',
  76.                 preferredSubtitle: 'off',
  77.                 preferredCodec: '12',
  78.             },
  79.             bilibiliLive: {
  80.                 regex: [
  81.                     "https://live.bilibili.com/\\d+.*",
  82.                     "https://live.bilibili.com/blanc/\\d+.*",
  83.                     "https://live.bilibili.com/blackboard/era/.+",
  84.                 ],
  85.                 preferredQuality: '4',
  86.                 preferredLine: '0',
  87.             }
  88.         }
  89.     },
  90.     players: [{
  91.             name: 'IINA',
  92.             system: 'mac',
  93.             icon: 'https://upload.wikimedia.org/wikipedia/commons/5/51/IINA_Logo.png',
  94.             iconSize: 60,
  95.             playEvent: "const delimiter = '&';\n\nlet args = [\n    `url=${encodeURIComponent(media.video)}`,\n    media.origin ? `mpv_http-header-fields=${encodeURIComponent('origin: ' + media.origin)}` : '',\n    media.referer ? `mpv_http-header-fields=${encodeURIComponent('referer: ' + media.referer)}` : '',\n]\nargs = args.filter(item => item !== '');\n\nconsole.log(args);\n\nwindow.open(`iina://weblink?${args.join(delimiter)}`, '_self');",
  96.             presetEvent: {
  97.                 playAuto: false,
  98.                 pauseAuto: true,
  99.                 closeAuto: false
  100.             },
  101.             enable: true,
  102.             readonly: true,
  103.         }, {
  104.             name: 'PotPlayer',
  105.             system: 'windows',
  106.             icon: 'https://upload.wikimedia.org/wikipedia/commons/e/e0/PotPlayer_logo_%282017%29.png',
  107.             iconSize: 50,
  108.             playEvent: "let args = [\n    `\"${media.video}\"`,\n    media.subtitle ? `/sub=\"${media.subtitle}\"` : '',\n    media.origin ? `/headers=\"origin: ${media.origin}\"` : '',\n    media.referer ? `/referer=\"${media.referer}\"` : '',\n    config.networkProxy ? `/user_agent=\"${config.networkProxy}\"` : '',\n    media.title ? `/title=\"${media.title}\"` : '',\n]\nargs = args.filter(item => item !== '');\n\nconsole.log(args);\n\nwindow.open(`ush://${player.name}?${compress(args.join(' '))}`, '_self');",
  109.             presetEvent: {
  110.                 playAuto: false,
  111.                 pauseAuto: true,
  112.                 closeAuto: false
  113.             },
  114.             enable: true,
  115.             readonly: true,
  116.         },
  117.         {
  118.             name: 'MPV',
  119.             system: 'windows',
  120.             icon: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Unofficial_Mpv_logo_%28with_gradients%29.svg',
  121.             iconSize: 55,
  122.             playEvent: "let args = [\n    `\"${media.video}\"`,\n    media.audio ? `--audio-file=\"${media.audio}\"` : '',\n    media.subtitle ? `--sub-file=\"${media.subtitle}\"` : '',\n    media.origin ? `--http-header-fields=\"origin: ${media.origin}\"` : '',\n    media.referer ? `--http-header-fields=\"referer: ${media.referer}\"` : '',\n    config.networkProxy ? `--http-proxy=\"${config.networkProxy}\"` : '',\n    media.ytdlp.networkProxy ? `--ytdl-raw-options=\"proxy=[${media.ytdlp.networkProxy}]\"` : '',\n    media.ytdlp.quality ? `--ytdl-format=\"bestvideo[height<=?${media.ytdlp.quality}]%2Bbestaudio/best\"` : '',\n    media.bilibili.cid ? `--script-opts-append=\"cid=${media.bilibili.cid}\"` : '',\n    media.title ? `--force-media-title=\"${media.title}\"` : '',\n]\nargs = args.filter(item => item !== '');\n\nconsole.log(args);\n\nwindow.open(`ush://${player.name}?${compress(args.join(' '))}`, '_self');",
  123.             presetEvent: {
  124.                 playAuto: false,
  125.                 pauseAuto: true,
  126.                 closeAuto: false
  127.             },
  128.             enable: true,
  129.             readonly: true,
  130.         }
  131.     ]
  132. }
  133.  
  134. const translations = {
  135.     en: {
  136.         loadSuccessfully: 'Load successfully',
  137.         loadTimeout: 'Load timeout ......',
  138.         saveSuccessfully: 'Save successfully',
  139.         loadFail: 'Load fail',
  140.         requireLoginOrVip: 'Require login or vip',
  141.         noMatchingParserFound: 'No matching parser found',
  142.         onlyNewTabsCanCloseAutomatically: 'Only new tabs can close automatically'
  143.     },
  144.     zh: {
  145.         loadSuccessfully: '加载成功',
  146.         loadTimeout: '加载超时 ......',
  147.         saveSuccessfully: '保存成功',
  148.         loadFail: '加载失败',
  149.         requireLoginOrVip: '需要登录或会员',
  150.         noMatchingParserFound: '没有匹配的解析器',
  151.         onlyNewTabsCanCloseAutomatically: '只有新标签页才能自动关闭'
  152.     }
  153. };
  154.  
  155. const REFRESH_INTERVAL = 500;
  156. const MAX_TRY_COUNT = 5;
  157.  
  158. var currentTryCount;
  159. var currentConfig;
  160. var currentUrl;
  161. var currentParser;
  162. var currentMedia;
  163. var currentPlayer;
  164. var translation;
  165.  
  166. class BaseParser {
  167.     constructor() {
  168.         currentMedia = {
  169.             video: undefined,
  170.             audio: undefined,
  171.             subtitle: undefined,
  172.             title: undefined,
  173.             origin: undefined,
  174.             referer: undefined,
  175.             bilibili: {
  176.                 cid: undefined
  177.             },
  178.             ytdlp: {
  179.                 quality: undefined,
  180.                 networkProxy: undefined
  181.             }
  182.         }
  183.     }
  184.     async execute() {}
  185.     async parseVideo() {
  186.         currentMedia.video = location.href;
  187.     }
  188.     async parseAudio() {}
  189.     async parseSubtitle() {}
  190.     async parseTitle() {
  191.         currentMedia.title = document.title;
  192.     }
  193.     async parseOrigin() {
  194.         currentMedia.origin = location.origin || location.href;
  195.     }
  196.     async parseReferer() {
  197.         let index = currentUrl.indexOf('?');
  198.         currentMedia.referer = index > 0 ? currentUrl.substring(0, index) : currentUrl;
  199.     }
  200.     async check(video) {
  201.         if (!video) {
  202.             video = currentMedia.video;
  203.         }
  204.         if (!video || !video.startsWith('http') || video.startsWith('https://www.mp4')) {
  205.             return false;
  206.         }
  207.  
  208.         if (video.indexOf('.m3u8') > -1 || video.indexOf('.m3u') > -1) {
  209.             try {
  210.                 const response = await (await fetch(video, {
  211.                     method: 'GET',
  212.                     credentials: 'include'
  213.                 })).body();
  214.                 return response && response.indexOf('png') === -1;
  215.             } catch (error) {}
  216.         }
  217.         return new RegExp(VIDEO_URL_REGEX_EXACT).test(video);
  218.     }
  219.     async pause() {
  220.         for (let index = 0; index < MAX_TRY_COUNT; index++) {
  221.             try {
  222.                 for (const video of document.getElementsByTagName('video')) {
  223.                     video.pause();
  224.                 }
  225.  
  226.                 for (const iframe of document.getElementsByTagName('iframe')) {
  227.                     if (iframe.contentDocument) {
  228.                         for (const video of iframe.contentDocument.getElementsByTagName('video')) {
  229.                             video.pause();
  230.                         }
  231.                     }
  232.                 }
  233.             } catch (error) {
  234.                 console.error('暂停失败', error);
  235.             } finally {
  236.                 await sleep(REFRESH_INTERVAL * 3);
  237.             }
  238.         }
  239.     }
  240.     async close() {
  241.         try {
  242.             await sleep(REFRESH_INTERVAL * 2);
  243.             if (window.top.history.length === 1) {
  244.                 window.top.location.href = "about:blank";
  245.                 window.top.close();
  246.             } else {
  247.                 showToast(translation.onlyNewTabsCanCloseAutomatically);
  248.             }
  249.         } catch (error) {
  250.             console.error('关闭失败', error);
  251.         }
  252.     }
  253.     async play(player) {
  254.         try {
  255.             showLoading(6000);
  256.             currentPlayer = player;
  257.             let media = currentMedia;
  258.             let parser = currentParser;
  259.             let config = currentConfig.global;
  260.  
  261.             currentTryCount = 0;
  262.             let latestError = undefined;
  263.             do {
  264.                 currentTryCount++;
  265.                 try {
  266.                     await parser.execute();
  267.                     if (await parser.check()) {
  268.                         latestError = undefined;
  269.                         break;
  270.                     }
  271.                     await sleep(REFRESH_INTERVAL * 2);
  272.                 } catch (error) {
  273.                     latestError = error;
  274.                     console.error(`第${currentTryCount}次尝试解析失败：`, error);
  275.                 }
  276.             }
  277.             while (currentTryCount < MAX_TRY_COUNT);
  278.             if (latestError) {
  279.                 showToast(translation.loadFail + ': ' + latestError.message);
  280.                 return;
  281.             }
  282.             if (!await parser.check()) {
  283.                 showToast(translation.loadFail);
  284.                 return;
  285.             }
  286.  
  287.             if (player.playEvent) {
  288.                 eval(policy.createScript(player.playEvent));
  289.             }
  290.  
  291.             if (player.presetEvent.closeAuto) {
  292.                 parser.close();
  293.             }
  294.             if (player.presetEvent.pauseAuto) {
  295.                 parser.pause();
  296.             }
  297.         } catch (error) {
  298.             showToast(translation.loadFail + ': ' + error.message);
  299.         } finally {
  300.             hideLoading();
  301.         }
  302.     }
  303. }
  304.  
  305. const PARSER = {
  306.     YTDLP: class Parser extends BaseParser {
  307.         async execute() {
  308.             currentMedia.ytdlp.quality = currentConfig.global.parser.ytdlp.preferredQuality === 'unlimited' ?
  309.                 undefined :
  310.                 currentConfig.global.parser.ytdlp.preferredQuality;
  311.             currentMedia.ytdlp.networkProxy = currentConfig.global.networkProxy ?
  312.                 currentConfig.global.networkProxy :
  313.                 undefined;
  314.             await this.parseVideo();
  315.         }
  316.         async check() {
  317.             return currentMedia.video ? true : false;
  318.         }
  319.     },
  320.     VIDEO: class Parser extends BaseParser {
  321.         async execute() {
  322.             await this.parseVideo();
  323.             await this.parseTitle();
  324.             await this.parseReferer();
  325.         }
  326.         async parseVideo() {
  327.             for (const video of document.getElementsByTagName('video')) {
  328.                 if (await this.check(video.src)) {
  329.                     currentMedia.video = video.src;
  330.                     return;
  331.                 }
  332.             }
  333.  
  334.             for (const iframe of document.getElementsByTagName('iframe')) {
  335.                 if (iframe.contentDocument) {
  336.                     for (const video of iframe.contentDocument.getElementsByTagName('video')) {
  337.                         if (await this.check(video.src)) {
  338.                             currentMedia.video = video.src;
  339.                             return;
  340.                         }
  341.                     }
  342.                 }
  343.             }
  344.         }
  345.     },
  346.     URL: class Parser extends BaseParser {
  347.         async execute() {
  348.             await this.parseVideo();
  349.             await this.parseTitle();
  350.             await this.parseReferer();
  351.         }
  352.         async parseVideo() {
  353.             let urls = currentUrl.match(VIDEO_URL_REGEX_GLOBAL) || [];
  354.             for (const url of urls) {
  355.                 if (await this.check(url)) {
  356.                     currentMedia.video = url;
  357.                     return;
  358.                 }
  359.             }
  360.  
  361.             for (const iframe of document.getElementsByTagName('iframe')) {
  362.                 let urls = iframe.src.match(VIDEO_URL_REGEX_GLOBAL) || [];
  363.                 for (const url of urls) {
  364.                     if (await this.check(url)) {
  365.                         currentMedia.video = url;
  366.                         return;
  367.                     }
  368.                 }
  369.             }
  370.         }
  371.     },
  372.     HTML: class Parser extends BaseParser {
  373.         async execute() {
  374.             await this.parseVideo();
  375.             await this.parseTitle();
  376.             await this.parseReferer();
  377.         }
  378.         async parseVideo() {
  379.             let urls = document.body.innerHTML.match(VIDEO_URL_REGEX_GLOBAL) || [];
  380.             for (const url of urls) {
  381.                 if (await this.check(url)) {
  382.                     currentMedia.video = url;
  383.                     return;
  384.                 }
  385.             }
  386.  
  387.             for (const iframe of document.getElementsByTagName('iframe')) {
  388.                 const doc = iframe.contentDocument || iframe.contentWindow.document;
  389.                 if (!doc) {
  390.                     continue;
  391.                 }
  392.                 urls = doc.body.innerHTML.match(VIDEO_URL_REGEX_GLOBAL) || [];
  393.                 for (const url of urls) {
  394.                     if (await this.check(url)) {
  395.                         currentMedia.video = url;
  396.                         return;
  397.                     }
  398.                 }
  399.             }
  400.         }
  401.     },
  402.     SCRIPT: class Parser extends BaseParser {
  403.         async execute() {
  404.             await this.parseVideo();
  405.             await this.parseTitle();
  406.             await this.parseReferer();
  407.         }
  408.         async parseVideo() {
  409.             for (const script of document.scripts) {
  410.                 let urls = script.innerHTML.match(VIDEO_URL_REGEX_GLOBAL) || [];
  411.                 for (const url of urls) {
  412.                     if (await this.check(url)) {
  413.                         currentMedia.video = url;
  414.                         return;
  415.                     }
  416.                 }
  417.             }
  418.  
  419.             for (const iframe of document.getElementsByTagName('iframe')) {
  420.                 const doc = iframe.contentDocument || iframe.contentWindow.document;
  421.                 if (!doc) {
  422.                     continue;
  423.                 }
  424.                 for (const script of doc.scripts) {
  425.                     let urls = script.innerHTML.match(VIDEO_URL_REGEX_GLOBAL) || [];
  426.                     for (const url of urls) {
  427.                         if (await this.check(url)) {
  428.                             currentMedia.video = url;
  429.                             return;
  430.                         }
  431.                     }
  432.                 }
  433.             }
  434.         }
  435.     },
  436.     REQUEST: class Parser extends BaseParser {
  437.         constructor() {
  438.             super();
  439.             this.video = undefined;
  440.             let that = this;
  441.             const open = XMLHttpRequest.prototype.open;
  442.             XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
  443.                 if (!that.video) {
  444.                     let urls = url.match(VIDEO_URL_REGEX_GLOBAL) || [];
  445.                     for (const vurl of urls) {
  446.                         that.check(vurl).check().then(
  447.                             result => {
  448.                                 if (result === true) {
  449.                                     that.video = vurl;
  450.                                 }
  451.                             }
  452.                         )
  453.                     }
  454.  
  455.                 }
  456.                 return open.apply(this, arguments);
  457.             };
  458.  
  459.             const originalFetch = fetch;
  460.  
  461.             window.fetch = function (url, options) {
  462.                 return originalFetch(url, options).then(response => {
  463.                     alert(url);
  464.                     if (!that.video) {
  465.                         let urls = url.match(VIDEO_URL_REGEX_GLOBAL) || [];
  466.                         for (const vurl of urls) {
  467.                             that.check(vurl).check().then(
  468.                                 result => {
  469.                                     if (result === true) {
  470.                                         that.video = vurl;
  471.                                     }
  472.                                 }
  473.                             )
  474.                         }
  475.  
  476.                     }
  477.  
  478.                     return response;
  479.                 });
  480.             };
  481.         }
  482.         async execute() {
  483.             await this.parseVideo();
  484.         }
  485.         async parseVideo() {
  486.             currentMedia.video = this.video;
  487.         }
  488.     },
  489.     BILIBILI: class Parser extends BaseParser {
  490.         async execute() {
  491.             await this.parseTitle();
  492.             await this.parseVideo();
  493.             await this.parseReferer();
  494.         }
  495.         async parseVideo() {
  496.             let videoInfo = undefined; //await this.getVideoInfo();
  497.  
  498.             if (!videoInfo || !videoInfo.aid || !videoInfo.cid) {
  499.                 if (currentUrl.startsWith('https://www.bilibili.com/bangumi/')) {
  500.                     videoInfo = await this.getVideoInfoByEpid();
  501.                 } else {
  502.                     videoInfo = await this.getVideoInfoByBvid();
  503.                 }
  504.             }
  505.  
  506.             if (!videoInfo || !videoInfo.aid || !videoInfo.cid) {
  507.                 throw new Error('can not find aid and cid');
  508.             }
  509.  
  510.             const aid = videoInfo.aid;
  511.             const cid = videoInfo.cid;
  512.             const title = videoInfo.title;
  513.             const codecid = currentConfig.global.parser.bilibili.preferredCodec;
  514.             const quality = currentConfig.global.parser.bilibili.preferredQuality;
  515.  
  516.             currentMedia.bilibili.cid = cid;
  517.             currentMedia.title = title ? title : currentMedia.title;
  518.             if (currentConfig.global.parser.bilibili.preferredSubtitle &&
  519.                 currentConfig.global.parser.bilibili.preferredSubtitle !== 'off') {
  520.                 currentMedia.subtitle = await this.getSubtitle(aid, cid);
  521.             }
  522.             // 支持传入音频优先获取 dash 格式视频，以支持更高分辨率
  523.             if (currentPlayer.playEvent && currentPlayer.playEvent.indexOf('audio') > -1) {
  524.                 const dash = await this.getDash(aid, cid, codecid, quality);
  525.                 if (dash) {
  526.                     currentMedia.audio = dash.audio;
  527.                     currentMedia.video = dash.video;
  528.                     return;
  529.                 }
  530.             }
  531.             currentMedia.video = await this.getFlvOrMP4(aid, cid);
  532.         }
  533.         async getVideoInfo() {
  534.             try {
  535.                 const initialState = __INITIAL_STATE__;
  536.                 if (!initialState) {
  537.                     return;
  538.                 }
  539.                 const videoInfo = initialState.epInfo || initialState.videoData || initialState.videoInfo;
  540.                 const aid = videoInfo.aid;
  541.                 const page = initialState.p;
  542.                 let cid = videoInfo.cid;
  543.                 let title = videoInfo.title;
  544.                 if (page && page > 1) {
  545.                     cid = initialState.cidMap[aid].cids[page];
  546.                 }
  547.  
  548.                 return {
  549.                     aid: aid,
  550.                     cid: cid,
  551.                     title: title
  552.                 };
  553.             } catch (error) {
  554.                 console.error(error.message);
  555.             }
  556.         }
  557.         async getVideoInfoByBvid() {
  558.             let param = undefined;
  559.             const bvids = currentUrl.match(/BV([0-9a-zA-Z]+)/);
  560.             if (bvids && bvids[1]) {
  561.                 param = `bvid=${bvids[1]}`;
  562.             } else {
  563.                 const avids = page.url.match(/av([0-9]+)/);
  564.                 param = `aid=${avids[1]}`;
  565.             }
  566.  
  567.             if (!param) {
  568.                 throw new Error('can not find bvid or avid');
  569.             }
  570.  
  571.             const response = await (await fetch(`https://api.bilibili.com/x/web-interface/view?${param}`, {
  572.                 method: 'GET',
  573.                 credentials: 'include'
  574.             })).json();
  575.  
  576.             let aid = response.data.aid;
  577.             let cid = response.data.cid;
  578.             let title = response.data.title;
  579.  
  580.             // 分 p 视频
  581.             let index = currentUrl.indexOf("?p=");
  582.             if (index > -1 && response.data.pages.length > 1) {
  583.                 let p = currentUrl.substring(index + 3);
  584.                 let endIndex = p.indexOf("&");
  585.                 if (endIndex > -1) {
  586.                     p = p.substring(0, endIndex);
  587.                 }
  588.                 const currentPage = res.data.pages[p - 1];
  589.                 cid = currentPage.cid;
  590.                 title = currentPage.part;
  591.             }
  592.  
  593.             return {
  594.                 aid: aid,
  595.                 cid: cid,
  596.                 title: title
  597.             };
  598.         }
  599.         async getVideoInfoByEpid() {
  600.             let epid = undefined;
  601.             let epids = currentUrl.match(/ep(\d+)/);
  602.             if (epids && epids[1]) {
  603.                 epid = epids[1];
  604.             } else {
  605.                 let epidElement = undefined;
  606.                 let epidElementClassNames = [
  607.                     "ep-item cursor visited",
  608.                     "ep-item cursor",
  609.                     "numberListItem_select__WgCVr",
  610.                     "imageListItem_wrap__o28QW",
  611.                 ];
  612.                 for (const className of epidElementClassNames) {
  613.                     epidElement = document.getElementsByClassName(className)[0];
  614.                     if (epidElement) {
  615.                         epid = epidElement.getElementsByTagName("a")[0].href.match(/ep(\d+)/)[1];
  616.                         break;
  617.                     }
  618.                 }
  619.  
  620.                 if (!epid) {
  621.                     epidElement = document.getElementsByClassName("squirtle-pagelist-select-item active squirtle-blink")[0];
  622.                     if (epidElement) {
  623.                         epid = epidElement.dataset.value;
  624.                     }
  625.                 }
  626.             }
  627.  
  628.             if (!epid) {
  629.                 throw new Error('can not find epid');
  630.             }
  631.  
  632.             const response = await (await fetch(`https://api.bilibili.com/pgc/view/web/season?ep_id=${epid}`, {
  633.                 method: 'GET',
  634.                 credentials: 'include'
  635.             })).json();
  636.             let section = response.result.section;
  637.             if (!section) {
  638.                 section = new Array();
  639.             }
  640.             section.push({
  641.                 episodes: response.result.episodes
  642.             });
  643.             let currentEpisode;
  644.             for (let i = section.length - 1; i >= 0; i--) {
  645.                 let episodes = section[i].episodes;
  646.                 for (const episode of episodes) {
  647.                     if (episode.id == epid) {
  648.                         currentEpisode = episode;
  649.                         break;
  650.                     }
  651.                 }
  652.                 if (currentEpisode) {
  653.                     return {
  654.                         aid: currentEpisode.aid,
  655.                         cid: currentEpisode.cid,
  656.                         title: currentEpisode.share_copy
  657.                     }
  658.                 }
  659.             }
  660.         }
  661.         async getDash(aid, cid, codecid, quality) {
  662.             const url = `https://api.bilibili.com/x/player/playurl?qn=120&otype=json&fourk=1&fnver=0&fnval=4048&avid=${aid}&cid=${cid}`;
  663.             const response = await (await fetch(url, {
  664.                 method: 'GET',
  665.                 credentials: 'include'
  666.             })).json();
  667.             if (!response.data) {
  668.                 currentTryCount = MAX_TRY_COUNT;
  669.                 throw new Error(translation.requireLoginOrVip);
  670.             }
  671.             let video = undefined;
  672.             let audio = undefined;
  673.             let dash = response.data.dash;
  674.             if (!dash) {
  675.                 return undefined;
  676.             }
  677.             let hiRes = dash.flac;
  678.             let dolby = dash.dolby;
  679.             if (hiRes && hiRes.audio) {
  680.                 audio = hiRes.audio.baseUrl;
  681.             } else if (dolby && dolby.audio) {
  682.                 audio = dolby.audio[0].base_url;
  683.             } else if (dash.audio) {
  684.                 audio = dash.audio[0].baseUrl;
  685.             }
  686.             let i = 0;
  687.             while (i < dash.video.length &&
  688.                 dash.video[i].id > quality) {
  689.                 i++;
  690.             }
  691.             video = dash.video[i].baseUrl;
  692.             let id = dash.video[i].id;
  693.             while (i < dash.video.length) {
  694.                 if (dash.video[i].id != id) {
  695.                     break;
  696.                 }
  697.                 if (dash.video[i].codecid == codecid) {
  698.                     video = dash.video[i].baseUrl;
  699.                     break;
  700.                 }
  701.                 i++;
  702.             }
  703.             return {
  704.                 video: video,
  705.                 audio: audio
  706.             };
  707.         }
  708.         async getFlvOrMP4(aid, cid) {
  709.             const url = `https://api.bilibili.com/x/player/playurl?qn=120&otype=json&fourk=1&fnver=0&fnval=128&avid=${aid}&cid=${cid}`;
  710.             const response = await (await fetch(url, {
  711.                 method: 'GET',
  712.                 credentials: 'include'
  713.             })).json();
  714.             if (!response.data) {
  715.                 currentTryCount = MAX_TRY_COUNT;
  716.                 throw new Error(translation.requireLoginOrVip);
  717.             }
  718.             return response.data.durl[0].url;
  719.         }
  720.         async getSubtitle(avid, cid) {
  721.             const url = `https://api.bilibili.com/x/player/wbi/v2?aid=${avid}&cid=${cid}`;
  722.             const response = await (await fetch(url, {
  723.                 method: 'GET',
  724.                 credentials: 'include'
  725.             })).json();
  726.  
  727.             if (response.code === 0 && response.data.subtitle && response.data.subtitle.subtitles.length > 0) {
  728.                 let subtitles = response.data.subtitle.subtitles;
  729.                 let url = subtitles[0].subtitle_url;
  730.                 let lan = subtitles[0].lan;
  731.                 for (const subtitle of subtitles) {
  732.                     if (currentConfig.global.parser.bilibili.preferredSubtitle.startsWith("zh") &&
  733.                         subtitle.lan.startsWith("zh")) {
  734.                         url = subtitle.subtitle_url;
  735.                         lan = subtitle.lan;
  736.                     }
  737.                     if (subtitle.lan == currentConfig.subtitlePrefer) {
  738.                         url = subtitle.subtitle_url;
  739.                         lan = subtitle.lan;
  740.                         break;
  741.                     }
  742.                 }
  743.                 if (url) {
  744.                     return `https://www.lckp.top/common/bilibili/jsonToSrt/?url=https:${url}&lan=${lan}`;
  745.                 }
  746.             }
  747.         }
  748.     },
  749.     BILIBILI_LIVE: class Parser extends BaseParser {
  750.         async execute() {
  751.             await this.parseVideo();
  752.             await this.parseTitle();
  753.             await this.parseReferer();
  754.         }
  755.         async parseVideo() {
  756.             let iframes = document.getElementsByTagName("iframe");
  757.             let roomid = undefined;
  758.             for (let iframe of iframes) {
  759.                 let roomids = iframe.src.match(
  760.                     /^https:\/\/live\.bilibili\.com.*(roomid=\d+|blanc\/\d+).*/
  761.                 );
  762.                 if (roomids && roomids[1]) {
  763.                     roomid = roomids[1].match(/\d+/)[0];
  764.                     break;
  765.                 }
  766.             }
  767.  
  768.             if (!roomid) {
  769.                 throw new Error('can not find roomid');
  770.             }
  771.  
  772.             const quality = currentConfig.global.parser.bilibiliLive.preferredQuality;
  773.             const url = `https://api.live.bilibili.com/room/v1/Room/playUrl?quality=${quality}&cid=${roomid}`;
  774.             const response = await (await fetch(url, {
  775.                 method: 'GET',
  776.                 credentials: 'include'
  777.             })).json();
  778.  
  779.             const durls = response.data.durl;
  780.             const line = currentConfig.global.parser.bilibiliLive.preferredLine;
  781.             let durl = durls[durls.length - 1];
  782.             for (let index = 0; index < durls.length; index++) {
  783.                 if (line == index) {
  784.                     durl = durls[index];
  785.                     break;
  786.                 }
  787.             }
  788.             currentMedia.video = durl.url;
  789.         }
  790.     }
  791. };
  792.  
  793. function compress(str) {
  794.     return btoa(String.fromCharCode(...pako.gzip(str)));
  795. };
  796.  
  797. function sleep(ms) {
  798.     return new Promise((resolve) => setTimeout(resolve, ms));
  799. }
  800.  
  801. function loadConfig() {
  802.     let config = GM_getValue('config');
  803.     if (config) {
  804.         if (config.global.version === defaultConfig.global.version) {
  805.             return config;
  806.         }
  807.         console.log('更新配置 ......');
  808.         config = updateConfig(defaultConfig, config);
  809.         config.global.version = defaultConfig.global.version;
  810.     } else {
  811.         console.log('初始化配置 ......');
  812.         config = JSON.parse(JSON.stringify(defaultConfig));
  813.         for (const key in config.global.parser) {
  814.             config.global.parser[key].regex = [];
  815.         }
  816.     }
  817.     GM_setValue('config', config);
  818.     return config;
  819. }
  820.  
  821. function updateConfig(defaultConfig, config) {
  822.     function mergeDefaults(defaultObj, currentObj) {
  823.         if (typeof defaultObj !== 'object' || defaultObj === null) {
  824.             return currentObj !== undefined ? currentObj : defaultObj;
  825.         }
  826.  
  827.         if (Array.isArray(defaultObj)) {
  828.             return Array.isArray(currentObj) ? currentObj : defaultObj;
  829.         }
  830.  
  831.         const merged = {};
  832.         for (const key in defaultObj) {
  833.             if (key === 'regex') {
  834.                 merged[key] = currentObj?. [key] || [];
  835.                 continue;
  836.             }
  837.             merged[key] = mergeDefaults(defaultObj[key], currentObj?. [key]);
  838.         }
  839.         return merged;
  840.     }
  841.  
  842.     const newConfig = mergeDefaults(defaultConfig, config);
  843.     for (let index = 0; index < defaultConfig.players.length; index++) {
  844.         const dp = defaultConfig.players[index];
  845.         const np = newConfig.players[index];
  846.         if (dp.name === np.name) {
  847.             np.readonly = dp.readonly;
  848.             np.playEvent = dp.playEvent;
  849.         } else {
  850.             newConfig.players.unshift(dp);
  851.         }
  852.     }
  853.  
  854.     return newConfig;
  855. }
  856.  
  857. function matchParser(parser, url) {
  858.     for (const key in parser) {
  859.         for (const regex of parser[key].regex) {
  860.             if (!regex || regex.startsWith('#') || regex.startsWith('//')) {
  861.                 continue;
  862.             }
  863.             if (new RegExp(regex).test(url)) {
  864.                 console.log(`match parser regex: ${new RegExp(regex)}`);
  865.                 return new PARSER[key.replace(/[A-Z]/g, letter => `_${letter}`).toUpperCase()]();
  866.             }
  867.         }
  868.     }
  869. }
  870.  
  871. // =================================== 按钮区域和设置页面 ===================================
  872.  
  873. const policy = window.trustedTypes.createPolicy('externalPlayer', {
  874.     createHTML: (string, sink) => string,
  875.     createScript: (input) => input
  876. })
  877.  
  878. const ID_PREFIX = 'LCKP-EP-2024';
  879. const FIRST_Z_INDEX = 999999999;
  880. const SECOND_Z_INDEX = FIRST_Z_INDEX - 1;
  881. const THIRD_Z_INDEX = SECOND_Z_INDEX - 1;
  882.  
  883. const COLORS = [{
  884.     // 配色方案1
  885.     PRIMARY: 'rgba(245, 166, 35, 1)',
  886.     TEXT: 'rgba(90, 90, 90, 1)',
  887.     TEXT_ACTIVE: 'rgba(255, 255, 255, 1)',
  888.     WARNING: 'rgba(233, 78, 119, 1)',
  889.     BORDER: 'rgba(243, 229, 213, 1)',
  890. }, {
  891.     // 配色方案2
  892.     PRIMARY: 'rgba(60, 179, 113, 1)',
  893.     TEXT: 'rgba(47, 79, 79, 1)',
  894.     TEXT_ACTIVE: 'rgba(255, 255, 255, 1)',
  895.     WARNING: 'rgba(255, 111, 97, 1)',
  896.     BORDER: 'rgba(204, 231, 208, 1)',
  897. }, {
  898.     // 配色方案3
  899.     PRIMARY: 'rgba(74, 144, 226, 1)',
  900.     TEXT: 'rgba(51, 51, 51, 1)',
  901.     TEXT_ACTIVE: 'rgba(255, 255, 255, 1)',
  902.     WARNING: 'rgba(242, 95, 92, 1)',
  903.     BORDER: 'rgba(217, 227, 240, 1)',
  904. }]
  905. const COLOR = COLORS[2];
  906.  
  907. var style;
  908. var buttonDiv;
  909. var toastDiv;
  910. var loadingDiv;
  911. var settingButton;
  912. var settingIframe;
  913. var loadingId;
  914. var isReloading = false;
  915.  
  916. function appendCss() {
  917.     if (style) {
  918.         return;
  919.     }
  920.     style = document.createElement('style');
  921.     style.innerHTML = policy.createHTML(`
  922.         #${ID_PREFIX}-toast-div {
  923.             z-index: ${FIRST_Z_INDEX};
  924.             position: fixed;
  925.             top: 20px;
  926.             left: 50%;
  927.             transform: translate(-50%, 0);
  928.             background-color: rgba(0, 0, 0, 0.8);
  929.             color: white;
  930.             font-size: 14px;
  931.             padding: 10px 20px;
  932.             border-radius: 5px;
  933.             opacity: 0;
  934.             transition: opacity 0.5s ease;
  935.             display: none;
  936.             letter-spacing: 1px;
  937.         }
  938.         #${ID_PREFIX}-loading-div {
  939.             z-index: ${FIRST_Z_INDEX};
  940.             display: none;
  941.             position: fixed;
  942.             bottom: 50%;
  943.             left: 50%;
  944.             transform: translate(-50%, -50%);
  945.             background-color: rgba(0, 0, 0, 0);
  946.         }
  947.         #${ID_PREFIX}-loading-div div {
  948.             width: 50px;
  949.             height: 50px;
  950.             background-color: ${COLOR.PRIMARY};
  951.             border-radius: 0;
  952.             -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  953.             animation: sk-rotateplane 1.2s infinite ease-in-out;
  954.         }
  955.         @-webkit-keyframes sk-rotateplane {
  956.             0% {
  957.                 -webkit-transform: perspective(120px)
  958.             }
  959.             50% {
  960.                 -webkit-transform: perspective(120px) rotateY(180deg)
  961.             }
  962.             100% {
  963.                 -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
  964.             }
  965.         }
  966.         @keyframes sk-rotateplane {
  967.             0% {
  968.                 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  969.                 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  970.             }
  971.             50% {
  972.                 transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  973.                 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg)
  974.             }
  975.             100% {
  976.                 transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  977.                 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  978.             }
  979.         }
  980.         #${ID_PREFIX}-button-div {
  981.             z-index: ${THIRD_Z_INDEX};
  982.             position: fixed;
  983.             display: none;
  984.             align-items: center;
  985.             width: auto;
  986.             height: auto;
  987.             left: ${currentConfig.global.buttonXCoord}px;
  988.             bottom: ${currentConfig.global.buttonYCoord}px;
  989.             padding: 5px;
  990.             border: 3px solid rgba(0, 0, 0, 0);
  991.             border-radius: 5px;
  992.             cursor: move;
  993.             gap: 10px;
  994.             background-color: rgba(0, 0, 0, 0);
  995.             min-width: ${50 * currentConfig.global.buttonScale}px;
  996.             min-height: ${50 * currentConfig.global.buttonScale}px;
  997.         }
  998.         #${ID_PREFIX}-button-div button {
  999.             color: white;
  1000.             font-size: 20px;
  1001.             font-weight: bold;
  1002.             width: 50px;
  1003.             height: 50px;
  1004.             outline: none;
  1005.             border: none;
  1006.             border-radius: 50%;
  1007.             cursor: pointer;
  1008.             background-size: cover;
  1009.             background-color: rgba(0, 0, 0, 0);
  1010.             transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  1011.         }
  1012.         #${ID_PREFIX}-button-div:hover {
  1013.             background-color: rgb(255, 255, 255, 0.3) !important;
  1014.         }
  1015.         #${ID_PREFIX}-button-div:hover button {
  1016.             visibility: visible !important;
  1017.             transition: opacity 0.5s ease, visibility 0s;
  1018.         }
  1019.         #${ID_PREFIX}-button-div button:hover {
  1020.             transform: scale(1.06);
  1021.             box-shadow: 0px 0px 16px #e6e6e6;
  1022.         }
  1023.         #${ID_PREFIX}-setting-button {
  1024.             visibility: hidden;
  1025.             position: absolute;
  1026.             right: ${-12 * currentConfig.global.buttonScale}px !important;
  1027.             top: ${-12 * currentConfig.global.buttonScale}px !important;
  1028.             width: ${25 * currentConfig.global.buttonScale}px !important;
  1029.             height: ${25 * currentConfig.global.buttonScale}px !important;            
  1030.             background-image: url('data:image/svg+xml,<svg t="1731846507027" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4281" width="16" height="16"><path d="M616.533333 512.128c0-25.6-9.941333-49.536-28.16-67.669333a95.744 95.744 0 0 0-67.84-28.074667c-25.685333 0-49.706667 9.984-67.925333 28.074667a95.146667 95.146667 0 0 0-28.16 67.669333c0 25.6 10.069333 49.578667 28.16 67.712 18.218667 18.048 42.24 28.074667 67.925333 28.074667 25.642667 0 49.664-10.026667 67.84-28.074667 18.218667-18.133333 28.16-42.112 28.16-67.712z m-202.112 352.896l48-55.978667a309.290667 309.290667 0 0 0 99.029334 0l48 55.978667a27.52 27.52 0 0 0 30.208 7.978667l2.218666-0.768a380.074667 380.074667 0 0 0 118.186667-68.138667l1.834667-1.536a27.434667 27.434667 0 0 0 8.106666-30.037333l-24.746666-69.546667a298.666667 298.666667 0 0 0 49.322666-85.205333l72.874667-13.44a27.477333 27.477333 0 0 0 22.058667-22.101334l0.426666-2.304a384.64 384.64 0 0 0 0-135.936l-0.426666-2.304a27.477333 27.477333 0 0 0-22.058667-22.058666l-73.216-13.525334a302.293333 302.293333 0 0 0-49.194667-84.650666l25.002667-70.016a27.306667 27.306667 0 0 0-8.149333-30.037334l-1.834667-1.536a383.018667 383.018667 0 0 0-118.186667-68.138666l-2.218666-0.768a27.605333 27.605333 0 0 0-30.208 7.936l-48.512 56.661333a302.592 302.592 0 0 0-97.834667 0L414.592 159.146667a27.52 27.52 0 0 0-30.208-7.978667l-2.218667 0.768a381.056 381.056 0 0 0-118.186666 68.138667l-1.834667 1.536a27.434667 27.434667 0 0 0-8.106667 30.037333l24.96 69.973333a296.192 296.192 0 0 0-49.194666 84.693334l-73.216 13.525333a27.477333 27.477333 0 0 0-22.058667 22.058667l-0.426667 2.304a382.592 382.592 0 0 0 0 135.936l0.426667 2.304c2.048 11.221333 10.794667 20.053333 22.058667 22.101333l72.874666 13.44a300.672 300.672 0 0 0 49.365334 85.248l-24.832 69.504a27.306667 27.306667 0 0 0 8.149333 30.037333l1.834667 1.536a383.018667 383.018667 0 0 0 118.186666 68.138667l2.218667 0.768a27.733333 27.733333 0 0 0 30.037333-8.149333z m-44.8-352.853333A150.656 150.656 0 0 1 520.533333 361.642667a150.656 150.656 0 0 1 150.869334 150.442666A150.656 150.656 0 0 1 520.533333 662.613333a150.656 150.656 0 0 1-150.912-150.485333z" fill="${COLOR.PRIMARY}" p-id="4282"></path></svg>');
  1031.         }
  1032.         #${ID_PREFIX}-setting-iframe {
  1033.             z-index: ${SECOND_Z_INDEX};
  1034.             position: fixed;
  1035.             width: 1000px;
  1036.             height: 500px;
  1037.             top: 50%;
  1038.             left: 50%;
  1039.             transform: translate(-50%, -50%);
  1040.             border: none;
  1041.             border-radius: 5px;
  1042.             box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
  1043.             background-color: #fff;
  1044.             display: none;
  1045.         }
  1046.     `);
  1047.     document.head.appendChild(style);
  1048. }
  1049.  
  1050. function appendToastDiv() {
  1051.     const TOAST_DIV_ID = `${ID_PREFIX}-toast-div`;
  1052.     if (document.getElementById(TOAST_DIV_ID)) {
  1053.         return;
  1054.     }
  1055.     toastDiv = document.createElement('div');
  1056.     toastDiv.id = TOAST_DIV_ID;
  1057.     document.body.appendChild(toastDiv);
  1058. }
  1059.  
  1060. function showToast(message) {
  1061.     toastDiv.textContent = message;
  1062.     toastDiv.style.opacity = '0.9';
  1063.     toastDiv.style.display = 'block';
  1064.     setTimeout(() => {
  1065.         toastDiv.style.opacity = '0';
  1066.         toastDiv.style.display = 'none';
  1067.     }, 5000);
  1068. }
  1069.  
  1070. function appendLoadingDiv() {
  1071.     const LOADING_DIV_ID = `${ID_PREFIX}-loading-div`;
  1072.     if (document.getElementById(LOADING_DIV_ID)) {
  1073.         return;
  1074.     }
  1075.     loadingDiv = document.createElement('div');
  1076.     loadingDiv.id = LOADING_DIV_ID;
  1077.     loadingDiv.appendChild(document.createElement('div'));
  1078.     document.body.appendChild(loadingDiv);
  1079. }
  1080.  
  1081. function showLoading(timeout) {
  1082.     if (loadingId) {
  1083.         clearTimeout(loadingId);
  1084.         loadingId = undefined;
  1085.     }
  1086.     if (!timeout) {
  1087.         timeout = 10000;
  1088.     }
  1089.     loadingDiv.style.display = 'block';
  1090.     loadingId = setTimeout(() => {
  1091.         if (loadingDiv.style.display === 'block') {
  1092.             hideLoading();
  1093.             showToast(translation.loadTimeout);
  1094.         }
  1095.     }, timeout);
  1096. }
  1097.  
  1098. function hideLoading() {
  1099.     loadingDiv.style.display = 'none';
  1100. }
  1101.  
  1102. function appendButtonDiv() {
  1103.     const BUTTON_DIV_ID = `${ID_PREFIX}-button-div`;
  1104.     if (document.getElementById(BUTTON_DIV_ID)) {
  1105.         return;
  1106.     }
  1107.     buttonDiv = document.createElement('div');
  1108.     buttonDiv.id = BUTTON_DIV_ID;
  1109.     buttonDiv.addEventListener('mousedown', (e) => {
  1110.         if (e.target.tagName === 'BUTTON') {
  1111.             return;
  1112.         }
  1113.         let offsetX = e.clientX - buttonDiv.getBoundingClientRect().left;
  1114.         let offsetY = e.clientY - buttonDiv.getBoundingClientRect().top;
  1115.  
  1116.         document.addEventListener('mouseup', mouseUpHandler);
  1117.         document.addEventListener('mousemove', mouseMoveHandler);
  1118.  
  1119.         function mouseUpHandler() {
  1120.             buttonDiv.style.border = '3px solid rgba(0, 0, 0, 0)';
  1121.             document.removeEventListener('mousemove', mouseMoveHandler);
  1122.             document.removeEventListener('mouseup', mouseUpHandler);
  1123.         }
  1124.  
  1125.         function mouseMoveHandler(e) {
  1126.             buttonDiv.style.border = `3px solid ${COLOR.PRIMARY}`;
  1127.             let newX = e.clientX - offsetX;
  1128.             let newY = e.clientY - offsetY;
  1129.  
  1130.             const windowWidth = window.innerWidth;
  1131.             const windowHeight = window.innerHeight;
  1132.             const divWidth = buttonDiv.offsetWidth;
  1133.             const divHeight = buttonDiv.offsetHeight;
  1134.  
  1135.             if (newX < 0) newX = 0;
  1136.             if (newX + divWidth > windowWidth) newX = windowWidth - divWidth;
  1137.             if (newY < 0) newY = 0;
  1138.             if (newY + divHeight > windowHeight) newY = windowHeight - divHeight;
  1139.  
  1140.             newY = windowHeight - newY - divHeight;
  1141.             buttonDiv.style.left = `${newX}px`;
  1142.             buttonDiv.style.bottom = `${newY}px`;
  1143.             currentConfig.global.buttonXCoord = newX;
  1144.             currentConfig.global.buttonYCoord = newY;
  1145.             GM_setValue('config', currentConfig);
  1146.         }
  1147.     });
  1148.     document.body.appendChild(buttonDiv);
  1149.  
  1150.     appendPlayButton();
  1151.     appendSettingButton();
  1152.  
  1153.     // 全屏隐藏
  1154.     document.addEventListener("fullscreenchange", () => {
  1155.         if (document.fullscreenElement) {
  1156.             buttonDiv.style.display = "none";
  1157.         } else {
  1158.             if (currentParser) {
  1159.                 buttonDiv.style.display = "flex";
  1160.             }
  1161.         }
  1162.     });
  1163. }
  1164.  
  1165. function appendPlayButton() {
  1166.     if (!currentConfig.players) {
  1167.         return;
  1168.     }
  1169.     var playButtonNeedAutoClick;
  1170.     currentConfig.players.forEach(player => {
  1171.         if (player.enable !== true) {
  1172.             return;
  1173.         }
  1174.         const playButton = document.createElement('button');
  1175.         if (player.icon) {
  1176.             const image = new Image();
  1177.             image.src = player.icon;
  1178.             image.onload = () => playButton.style.backgroundImage = `url(${image.src})`;
  1179.             image.onerror = () => {
  1180.                 playButton.style.backgroundColor = COLOR.PRIMARY;
  1181.                 playButton.textContent = player.name ? player.name.substring(0, 1) : 'P';
  1182.             };
  1183.         } else {
  1184.             playButton.style.backgroundColor = COLOR.PRIMARY;
  1185.             playButton.textContent = player.name ? player.name.substring(0, 1) : 'P';
  1186.         }
  1187.         playButton.style.width = `${player.iconSize * currentConfig.global.buttonScale}px`;
  1188.         playButton.style.height = `${player.iconSize * currentConfig.global.buttonScale}px`;
  1189.  
  1190.         // 自动隐藏
  1191.         if (currentConfig.global.buttonVisibilityDuration == 0) {
  1192.             playButton.style.visibility = 'hidden';
  1193.         } else if (currentConfig.global.buttonVisibilityDuration > 0) {
  1194.             setTimeout(() => {
  1195.                 playButton.style.visibility = 'hidden';
  1196.             }, currentConfig.global.buttonVisibilityDuration);
  1197.         }
  1198.  
  1199.         playButton.addEventListener('click', async function () {
  1200.             if (currentParser) {
  1201.                 currentParser.play(player);
  1202.             } else {
  1203.                 showToast(translation.noMatchingParserFound);
  1204.             }
  1205.         });
  1206.  
  1207.         buttonDiv.appendChild(playButton);
  1208.     });
  1209. }
  1210.  
  1211. function appendSettingButton() {
  1212.     settingButton = document.createElement('button');
  1213.     settingButton.id = `${ID_PREFIX}-setting-button`;
  1214.     settingButton.title = 'Ctrl + Alt + E';
  1215.  
  1216.     settingButton.addEventListener('click', async () => {
  1217.         await appendSettingIframe();
  1218.         if (settingIframe.style.display === "block") {
  1219.             settingIframe.style.display = "none";
  1220.         } else {
  1221.             settingIframe.contentWindow.postMessage({
  1222.                 defaultConfig: defaultConfig,
  1223.                 config: currentConfig
  1224.             }, '*');
  1225.             settingIframe.style.display = "block";
  1226.         }
  1227.     });
  1228.     buttonDiv.appendChild(settingButton);
  1229.  
  1230.     // 失去焦点隐藏设置页面
  1231.     document.addEventListener('click', (event) => {
  1232.         if (settingIframe && settingIframe.style.display === 'block' &&
  1233.             !settingButton.contains(event.target) &&
  1234.             !settingIframe.contains(event.target)) {
  1235.             settingIframe.style.display = 'none';
  1236.         }
  1237.     });
  1238. }
  1239.  
  1240. async function appendSettingIframe() {
  1241.     const SETTING_IFRAME_ID = `${ID_PREFIX}-setting-iframe`;
  1242.     if (document.getElementById(SETTING_IFRAME_ID)) {
  1243.         return;
  1244.     }
  1245.     settingIframe = document.createElement('iframe');
  1246.     settingIframe.id = SETTING_IFRAME_ID;
  1247.     let settingIframeHtml = `
  1248.     <!DOCTYPE html>
  1249.     <html lang="en">
  1250.  
  1251.     <head>
  1252.         <meta charset="UTF-8">
  1253.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  1254.         <title>External Player</title>
  1255.         <style>
  1256.             :root {
  1257.                 --primary-color: ${COLOR.PRIMARY};
  1258.                 --text-color: ${COLOR.TEXT};
  1259.                 --text-active-color: ${COLOR.TEXT_ACTIVE};
  1260.                 --warning-color: ${COLOR.WARNING};
  1261.                 --border-color: ${COLOR.BORDER};
  1262.             }
  1263.  
  1264.             body {
  1265.                 display: flex;
  1266.                 flex-direction: row;
  1267.                 height: 100vh;
  1268.                 margin: 0;
  1269.             }
  1270.  
  1271.             body,
  1272.             button,
  1273.             input,
  1274.             textarea,
  1275.             select {
  1276.                 font-family: auto;
  1277.                 color: var(--text-color);
  1278.             }
  1279.  
  1280.             ::placeholder {
  1281.                 font-family: auto;
  1282.                 color: var(--text-color);
  1283.                 opacity: 0.2;
  1284.             }
  1285.  
  1286.             #sidebar-container {
  1287.                 display: none;
  1288.                 flex: 0 0 200px;
  1289.                 flex-direction: column;
  1290.                 background-color: #f4f4f4;
  1291.                 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  1292.                 padding: 25px 20px 35px 20px;
  1293.             }
  1294.  
  1295.             #sidebar {
  1296.                 flex: 1;
  1297.                 overflow-y: auto;
  1298.                 position: relative;
  1299.                 border: none;
  1300.                 border-radius: 5px;
  1301.                 margin-bottom: 10px;
  1302.             }
  1303.  
  1304.             #sidebar::-webkit-scrollbar {
  1305.                 display: none !important;
  1306.             }
  1307.  
  1308.             .reset-button,
  1309.             #add-tab-button,
  1310.             #save-button,
  1311.             #sidebar button {
  1312.                 width: 200px;
  1313.                 padding: 10px;
  1314.                 margin: 0 0 10px 0;
  1315.                 border: none;
  1316.                 border-radius: 5px;
  1317.                 background-color: #e0e0e0;
  1318.                 cursor: pointer;
  1319.                 font-size: 15px;
  1320.                 white-space: nowrap;
  1321.                 display: inline-flex;
  1322.                 position: relative;
  1323.                 align-items: center;
  1324.                 justify-content: center;
  1325.             }
  1326.  
  1327.             #add-tab-button,
  1328.             #save-button {
  1329.                 background-color: var(--primary-color);
  1330.                 color: var(--text-active-color);
  1331.                 margin: 0;
  1332.             }
  1333.  
  1334.             #add-tab-button {
  1335.                 font-size: 25px;
  1336.                 line-height: 21.45px;
  1337.             }
  1338.  
  1339.             #add-tab-button:hover,
  1340.             #save-button:hover {
  1341.                 opacity: 0.9;
  1342.             }
  1343.  
  1344.             #reset-button-coord-button {
  1345.                 padding: 7px 10px;
  1346.             }
  1347.  
  1348.             .reset-button {
  1349.                 margin: 0;
  1350.                 width: 80px;
  1351.                 background-color: var(--warning-color);
  1352.                 color: var(--text-active-color);
  1353.                 opacity: 0.6;
  1354.             }
  1355.  
  1356.             .reset-button:hover {
  1357.                 opacity: 0.8;
  1358.             }
  1359.  
  1360.             #sidebar button svg {
  1361.                 width: 20px !important;
  1362.                 height: 20px !important;
  1363.                 position: absolute;
  1364.                 left: 10px;
  1365.                 fill: var(--text-color);
  1366.             }
  1367.  
  1368.             #content .radio-button svg {
  1369.                 width: 20px !important;
  1370.                 height: 20px !important;
  1371.                 fill: var(--text-color);
  1372.             }
  1373.  
  1374.             #sidebar button.active svg,
  1375.             #sidebar button:hover svg,
  1376.             #content .radio-button.active svg,
  1377.             #content .radio-button:hover svg {
  1378.                 fill: var(--text-active-color)
  1379.             }
  1380.  
  1381.             #sidebar button.active {
  1382.                 background-color: var(--primary-color);
  1383.                 color: var(--text-active-color);
  1384.             }
  1385.  
  1386.             #sidebar button:hover {
  1387.                 background-color: var(--primary-color);
  1388.                 color: var(--text-active-color);
  1389.             }
  1390.  
  1391.             #content-container {
  1392.                 display: none;
  1393.                 flex-direction: column;
  1394.                 flex: 1;
  1395.                 padding: 25px 20px 0 20px;
  1396.             }
  1397.  
  1398.             #content {
  1399.                 flex: 1;
  1400.                 padding: 20px;
  1401.                 overflow-y: auto;
  1402.                 position: relative;
  1403.                 border: 1px solid var(--border-color);
  1404.                 border-radius: 5px;
  1405.                 margin-bottom: 15px;
  1406.             }
  1407.  
  1408.             .tab {
  1409.                 display: none;
  1410.                 position: relative;
  1411.             }
  1412.  
  1413.             .tab.active {
  1414.                 display: block;
  1415.             }
  1416.  
  1417.             .input-group {
  1418.                 margin-bottom: 15px;
  1419.             }
  1420.  
  1421.             label {
  1422.                 display: flex;
  1423.                 margin-bottom: 5px;
  1424.                 font-weight: bold;
  1425.                 align-items: center;
  1426.             }
  1427.  
  1428.             input[type="number"] {
  1429.                 width: calc(100% - 16px);
  1430.                 font-size: 14px;
  1431.                 border-radius: 5px;
  1432.                 border: 1px solid var(--border-color);
  1433.                 margin-right: 15px;
  1434.                 padding: 8px;
  1435.             }
  1436.  
  1437.             input[type="text"],
  1438.             input[type="search"],
  1439.             textarea {
  1440.                 width: 100%;
  1441.                 min-width: 400px;
  1442.                 padding: 8px;
  1443.                 border: 1px solid var(--border-color);
  1444.                 border-radius: 5px;
  1445.                 font-size: 14px;
  1446.                 box-sizing: border-box;
  1447.             }
  1448.  
  1449.             textarea {
  1450.                 resize: vertical;
  1451.                 height: 160px;
  1452.             }
  1453.  
  1454.             .switch {
  1455.                 position: relative;
  1456.                 display: inline-block;
  1457.                 width: 54px;
  1458.                 height: 24px;
  1459.             }
  1460.  
  1461.             .switch input {
  1462.                 opacity: 0;
  1463.                 width: 0;
  1464.                 height: 0;
  1465.             }
  1466.  
  1467.             .switch-slider {
  1468.                 position: absolute;
  1469.                 cursor: pointer;
  1470.                 top: 0;
  1471.                 left: 0;
  1472.                 right: 0;
  1473.                 bottom: 0;
  1474.                 background-color: #ccc;
  1475.                 transition: 0.4s;
  1476.                 border-radius: 34px;
  1477.             }
  1478.  
  1479.             .switch-slider:before {
  1480.                 position: absolute;
  1481.                 content: "";
  1482.                 height: 16px;
  1483.                 width: 16px;
  1484.                 border-radius: 50%;
  1485.                 left: 4px;
  1486.                 bottom: 4px;
  1487.                 background-color: var(--text-active-color);
  1488.                 transition: 0.4s;
  1489.             }
  1490.  
  1491.             input:checked+.switch-slider {
  1492.                 background-color: var(--primary-color);
  1493.             }
  1494.  
  1495.             input:checked+.switch-slider:before {
  1496.                 transform: translateX(30px);
  1497.             }
  1498.  
  1499.             .remove-button {
  1500.                 position: absolute;
  1501.                 opacity: 0.9;
  1502.                 top: -10px;
  1503.                 right: 0;
  1504.                 background: var(--warning-color);
  1505.                 color: var(--text-active-color);
  1506.                 border: none;
  1507.                 padding: 5px 10px;
  1508.                 cursor: pointer;
  1509.                 border-radius: 5px;
  1510.                 font-size: 14px;
  1511.             }
  1512.  
  1513.             .remove-button:hover {
  1514.                 opacity: 1;
  1515.             }
  1516.  
  1517.             .radio-button-group,
  1518.             .checkbox-group {
  1519.                 display: flex;
  1520.                 flex-wrap: wrap;
  1521.                 gap: 10px;
  1522.                 margin-bottom: 15px;
  1523.             }
  1524.  
  1525.             .radio-button,
  1526.             .checkbox-group .chekbox-label {
  1527.                 padding: 8px 23.5px;
  1528.                 background-color: #e0e0e0;
  1529.                 cursor: pointer;
  1530.                 border-radius: 5px;
  1531.                 font-size: 14px;
  1532.                 font-weight: normal;
  1533.                 min-width: 100px;
  1534.                 display: inline-flex;
  1535.                 justify-content: center;
  1536.                 align-items: center;
  1537.                 gap: 10px;
  1538.                 height: 20px;
  1539.                 margin: 0;
  1540.             }
  1541.  
  1542.             .radio-button.active,
  1543.             .checkbox-group input:checked+.chekbox-label {
  1544.                 background-color: var(--primary-color);
  1545.                 color: var(--text-active-color);
  1546.             }
  1547.  
  1548.             .radio-button:hover {
  1549.                 background-color: var(--primary-color);
  1550.                 color: var(--text-active-color);
  1551.             }
  1552.  
  1553.             .checkbox-group input[type="checkbox"] {
  1554.                 display: none;
  1555.             }
  1556.  
  1557.             #language {
  1558.                 padding: 8px;
  1559.                 border-radius: 5px;
  1560.                 cursor: pointer;
  1561.                 width: 100%;
  1562.                 border: 1px solid var(--border-color);
  1563.             }
  1564.  
  1565.             .parser {
  1566.                 border: 1px solid var(--border-color);
  1567.                 border-radius: 5px;
  1568.                 padding: 10px 20px;
  1569.             }
  1570.  
  1571.             .parser textarea {
  1572.                 margin-bottom: 10px;
  1573.                 resize: none;
  1574.             }
  1575.  
  1576.             a {
  1577.                 color: var(--text-color);
  1578.                 text-decoration: none;
  1579.                 font-weight: bold;
  1580.                 transition: color 0.3s ease, border-bottom 0.3s ease;
  1581.                 border-bottom: 2px solid transparent;
  1582.             }
  1583.  
  1584.             a:hover {
  1585.                 color: var(--primary-color);
  1586.                 border-bottom-color: var(--primary-color);
  1587.             }
  1588.  
  1589.             #tab-container {
  1590.                 flex: 1;
  1591.                 padding: 20px;
  1592.                 overflow-y: auto;
  1593.                 position: relative;
  1594.                 border: 1px solid var(--border-color);
  1595.                 border-radius: 5px;
  1596.                 margin-bottom: 10px;
  1597.             }
  1598.  
  1599.             :disabled {
  1600.                 opacity: 0.6;
  1601.             }
  1602.  
  1603.             div.disabled,
  1604.             button:disabled {
  1605.                 pointer-events: none !important;
  1606.                 cursor: not-allowed !important;
  1607.             }
  1608.  
  1609.             .parser textarea:disabled {
  1610.                 height: 30px;
  1611.                 overflow-y: hidden;
  1612.                 line-height: 20px;
  1613.             }
  1614.  
  1615.             textarea:disabled::-webkit-scrollbar {
  1616.                 display: none;
  1617.             }
  1618.  
  1619.             ::-webkit-scrollbar {
  1620.                 width: 19px !important;
  1621.                 height: 19px !important;
  1622.             }
  1623.  
  1624.             ::-webkit-scrollbar-thumb {
  1625.                 background: var(--border-color) !important;
  1626.                 border-radius: 5px !important;
  1627.             }
  1628.  
  1629.             ::-webkit-scrollbar-thumb:hover {
  1630.                 background: var(--primary-color) !important;
  1631.             }
  1632.  
  1633.             ::-webkit-scrollbar-track {
  1634.                 background: rgb(245, 245, 245) !important;
  1635.                 border-radius: 5px !important;
  1636.             }
  1637.  
  1638.             select:focus,
  1639.             input:focus,
  1640.             textarea:focus {
  1641.                 border-color: var(--primary-color);
  1642.                 outline: none;
  1643.             }
  1644.  
  1645.             #footer {
  1646.                 font-size: 14px;
  1647.                 height: 35px;
  1648.                 display: flex;
  1649.                 justify-content: center;
  1650.                 align-items: center;
  1651.             }
  1652.  
  1653.             #footer svg {
  1654.                 width: 20px;
  1655.                 height: 20px;
  1656.                 margin-bottom: -3px;
  1657.             }
  1658.  
  1659.             #footer a,
  1660.             #footer a:hover {
  1661.                 margin-left: 3px;
  1662.                 margin-right: 3px;
  1663.                 font-weight: normal;
  1664.                 border-bottom: none !important;
  1665.                 text-decoration: none !important;
  1666.             }
  1667.         </style>
  1668.     </head>
  1669.  
  1670.     <body>
  1671.         <div id="sidebar-container">
  1672.             <div id="sidebar">
  1673.                 <button id="global-button" class="tab-button active" data-tab="global">
  1674.                     <svg t="1732015880724" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1675.                         xmlns="http://www.w3.org/2000/svg" p-id="4317" width="32" height="32">
  1676.                         <path
  1677.                             d="M386.35 112.05h-228.7c-25.2 0-45.7 20.5-45.7 45.7v228.5c0 25.2 20.4 45.7 45.6 45.8h228.6c25.2 0 45.7-20.4 45.8-45.6V157.65c0.1-25.2-20.4-45.6-45.6-45.6z"
  1678.                             p-id="4318"></path>
  1679.                         <path
  1680.                             d="M157.55 80.05h229c42.8 0 77.5 34.7 77.5 77.5v229c0 42.8-34.7 77.5-77.5 77.5h-229c-42.8 0-77.5-34.7-77.5-77.5v-229c0-42.8 34.7-77.5 77.5-77.5z m228.9 320.5c7.8 0 14.1-6.3 14.1-14.1v-229c0-7.8-6.3-14.1-14.1-14.1h-229c-7.8 0-14.1 6.3-14.1 14.1v229c0 7.8 6.3 14.1 14.1 14.1h229z"
  1681.                             p-id="4319"></path>
  1682.                         <path
  1683.                             d="M387.55 590.25h-231.1c-25.5 0-46.2 20.7-46.2 46.2v231.1c0 25.5 20.7 46.2 46.2 46.2h231.1c25.5 0 46.2-20.7 46.2-46.2v-231.1c0-25.5-20.7-46.2-46.2-46.2z"
  1684.                             p-id="4320"></path>
  1685.                         <path
  1686.                             d="M157.55 560.05h229c42.8 0 77.5 34.7 77.5 77.5v229c0 42.8-34.7 77.5-77.5 77.5h-229c-42.8 0-77.5-34.7-77.5-77.5v-229c0-42.8 34.7-77.5 77.5-77.5z m228.9 320.5c7.8 0 14.1-6.3 14.1-14.1v-229c0-7.8-6.3-14.1-14.1-14.1h-229c-7.8 0-14.1 6.3-14.1 14.1v229c0 7.8 6.3 14.1 14.1 14.1h229zM637.55 80.05h229c42.8 0 77.5 34.7 77.5 77.5v229c0 42.8-34.7 77.5-77.5 77.5h-229c-42.8 0-77.5-34.7-77.5-77.5v-229c0-42.8 34.7-77.5 77.5-77.5z m228.9 320.5c7.8 0 14.1-6.3 14.1-14.1v-229c0-7.8-6.3-14.1-14.1-14.1h-229c-7.8 0-14.1 6.3-14.1 14.1v229c0 7.8 6.3 14.1 14.1 14.1h229z"
  1687.                             p-id="4321"></path>
  1688.                         <path
  1689.                             d="M866.306 592.006h-228.6c-25.2 0-45.7 20.5-45.7 45.7v228.5c0 25.2 20.5 45.7 45.7 45.7h228.5c25.2 0 45.7-20.4 45.8-45.6v-228.6c0-25.2-20.5-45.7-45.7-45.7z"
  1690.                             p-id="4322"></path>
  1691.                         <path
  1692.                             d="M637.506 560.006h229c42.8 0 77.5 34.7 77.5 77.5v229c0 42.8-34.7 77.5-77.5 77.5h-229c-42.8 0-77.5-34.7-77.5-77.5v-229c0-42.8 34.7-77.5 77.5-77.5z m229 320.6c7.8 0 14.1-6.3 14.1-14.1v-229c0-7.8-6.3-14.1-14.1-14.1h-229c-7.8 0-14.1 6.3-14.1 14.1v229c0 7.8 6.3 14.1 14.1 14.1h229z"
  1693.                             p-id="4323"></path>
  1694.                     </svg>
  1695.                     <span data-translate="global">全局配置</span>
  1696.                 </button>
  1697.             </div>
  1698.             <button id="add-tab-button">+</button>
  1699.         </div>
  1700.  
  1701.         <div id="content-container">
  1702.             <div id="content">
  1703.                 <div id="global" class="tab active">
  1704.                     <div class="input-group">
  1705.                         <label data-translate="version">版本</label>
  1706.                         <input type="text" id="version" readonly></input>
  1707.                     </div>
  1708.                     <div class="input-group">
  1709.                         <label data-translate="language">语言</label>
  1710.                         <select id="language">
  1711.                             <option value="zh" selected>中文</option>
  1712.                             <option value="en">English</option>
  1713.                         </select>
  1714.                     </div>
  1715.                     <div class="input-group">
  1716.                         <label data-translate="buttonCoord">按钮坐标</label>
  1717.                         <label>
  1718.                             <input type="number" id="buttonXCoord" min="0" placeholder="0">
  1719.                             <input type="number" id="buttonYCoord" min="0" placeholder="0">
  1720.                             <button id="reset-button-coord-button" class="reset-button" data-translate="reset">重置</button>
  1721.                         </label>
  1722.                     </div>
  1723.                     <div class="input-group">
  1724.                         <label data-translate="buttonScale">按钮比例</label>
  1725.                         <input type="number" id="buttonScale" min="0.01" max="10" step="0.01" placeholder="1.00">
  1726.                     </div>
  1727.                     <div class="input-group">
  1728.                         <label data-translate="buttonVisibilityDuration">按钮可见时长（毫秒，-1：一直可见）</label>
  1729.                         <input type="number" id="buttonVisibilityDuration" min="-1" placeholder="3000">
  1730.                     </div>
  1731.                     <div class="input-group">
  1732.                         <label data-translate="networkProxy">网络代理</label>
  1733.                         <input type="text" id="networkProxy" placeholder="http://127.0.0.1:7890"></input>
  1734.                     </div>
  1735.                     <label data-translate="parser">解析器</label>
  1736.                     <div class="input-group parser" id="ytdlp">
  1737.                         <label><a href="https://github.com/yt-dlp/yt-dlp" target="_blank">YTDLP</a></label>
  1738.                         <textarea name="regex" disabled></textarea>
  1739.                         <textarea name="regex"></textarea>
  1740.                         <label data-translate="preferredQuality">首选画质</label>
  1741.                         <div class="radio-button-group" name="preferredQuality">
  1742.                             <div class="radio-button active" value="unlimited" data-translate="unlimited">无限制</div>
  1743.                             <div class="radio-button" value="2160">2160P</div>
  1744.                             <div class="radio-button" value="1440">1440P</div>
  1745.                             <div class="radio-button" value="1080">1080P</div>
  1746.                             <div class="radio-button" value="720">720P</div>
  1747.                         </div>
  1748.                     </div>
  1749.                     <div class="input-group parser" id="video">
  1750.                         <label><a href="https://github.com/LuckyPuppy514/external-player" target="_blank">VIDEO</a></label>
  1751.                         <textarea name="regex" disabled></textarea>
  1752.                         <textarea name="regex"></textarea>
  1753.                     </div>
  1754.                     <div class="input-group parser" id="url">
  1755.                         <label><a href="https://github.com/LuckyPuppy514/external-player" target="_blank">URL</a></label>
  1756.                         <textarea name="regex" disabled></textarea>
  1757.                         <textarea name="regex"></textarea>
  1758.                     </div>
  1759.                     <div class="input-group parser" id="html">
  1760.                         <label><a href="https://github.com/LuckyPuppy514/external-player" target="_blank">HTML</a></label>
  1761.                         <textarea name="regex" disabled></textarea>
  1762.                         <textarea name="regex"></textarea>
  1763.                     </div>
  1764.                     <div class="input-group parser" id="script">
  1765.                         <label><a href="https://github.com/LuckyPuppy514/external-player" target="_blank">SCRIPT</a></label>
  1766.                         <textarea name="regex" disabled></textarea>
  1767.                         <textarea name="regex"></textarea>
  1768.                     </div>
  1769.                     <div class="input-group parser" id="request">
  1770.                         <label><a href="https://github.com/LuckyPuppy514/external-player"
  1771.                                 target="_blank">REQUEST</a></label>
  1772.                         <textarea name="regex" disabled></textarea>
  1773.                         <textarea name="regex"></textarea>
  1774.                     </div>
  1775.                     <div class="input-group parser" id="bilibili">
  1776.                         <label><a href="https://github.com/SocialSisterYi/bilibili-API-collect"
  1777.                                 target="_blank">BILIBILI</a></label>
  1778.                         <textarea name="regex" disabled></textarea>
  1779.                         <textarea name="regex" style="display: none;"></textarea>
  1780.                         <label data-translate="preferredQuality">首选画质</label>
  1781.                         <div class="radio-button-group" name="preferredQuality">
  1782.                             <div class="radio-button active" value="127" data-translate="unlimited">无限制</div>
  1783.                             <div class="radio-button" value="126">2160P</div>
  1784.                             <div class="radio-button" value="116">1080P</div>
  1785.                             <div class="radio-button" value="74">720P</div>
  1786.                         </div>
  1787.                         <label data-translate="preferredSubtitle">首选字幕</label>
  1788.                         <div class="radio-button-group" name="preferredSubtitle">
  1789.                             <div class="radio-button active" value="off" data-translate="off">关闭</div>
  1790.                             <div class="radio-button" value="zh-Hans">简体</div>
  1791.                             <div class="radio-button" value="zh-Hant">繁体</div>
  1792.                             <div class="radio-button" value="en-US">English</div>
  1793.                         </div>
  1794.                         <label data-translate="preferredCodec">首选编码</label>
  1795.                         <div class="radio-button-group" name="preferredCodec">
  1796.                             <div class="radio-button active" value="12">HEVC</div>
  1797.                             <div class="radio-button" value="13">AV1</div>
  1798.                             <div class="radio-button" value="7">AVC</div>
  1799.                         </div>
  1800.                     </div>
  1801.                     <div class="input-group parser" id="bilibiliLive">
  1802.                         <label><a href="https://github.com/SocialSisterYi/bilibili-API-collect" target="_blank">BILIBILI
  1803.                                 LIVE</a></label>
  1804.                         <textarea name="regex" disabled></textarea>
  1805.                         <textarea name="regex" style="display: none;"></textarea>
  1806.                         <label data-translate="preferredQuality">首选画质</label>
  1807.                         <div class="radio-button-group" name="preferredQuality">
  1808.                             <div class="radio-button active" value="4" data-translate="original">原画</div>
  1809.                             <div class="radio-button active" value="3" data-translate="hd">高清</div>
  1810.                             <div class="radio-button active" value="2" data-translate="smooth">流畅</div>
  1811.                         </div>
  1812.                         <label data-translate="preferredLine">首选线路</label>
  1813.                         <div class="radio-button-group" name="preferredLine">
  1814.                             <div class="radio-button active" value="0" data-translate="mainLine">主线</div>
  1815.                             <div class="radio-button active" value="1" data-translate="backupLine1">备线1</div>
  1816.                             <div class="radio-button active" value="2" data-translate="backupLine2">备线2</div>
  1817.                             <div class="radio-button active" value="3" data-translate="backupLine3">备线3</div>
  1818.                         </div>
  1819.                     </div>
  1820.                 </div>
  1821.             </div>
  1822.  
  1823.             <div style="margin: 0 auto;">
  1824.                 <button id="save-button" data-translate="save">保存</button>
  1825.                 <button id="reset-button" class="reset-button" data-translate="reset">重置</button>
  1826.             </div>
  1827.  
  1828.             <div id="footer">
  1829.                 <span>
  1830.                     <a href="https://github.com/LuckyPuppy514" target="_blank">
  1831.                         &copy 2024 LuckyPuppy514
  1832.                     </a>
  1833.                     <svg t="1731923678389" class="icon" viewBox="0 0 1024 1024" version="1.1"
  1834.                         xmlns="http://www.w3.org/2000/svg" p-id="5894" width="32" height="32">
  1835.                         <path
  1836.                             d="M20.48 503.72608c0 214.4256 137.4208 396.73856 328.94976 463.6672 25.8048 6.5536 21.87264-11.8784 21.87264-24.33024v-85.07392c-148.93056 17.44896-154.86976-81.1008-164.94592-97.52576-20.23424-34.52928-67.91168-43.33568-53.69856-59.76064 33.91488-17.44896 68.48512 4.42368 108.46208 63.61088 28.95872 42.88512 85.44256 35.6352 114.15552 28.4672a138.8544 138.8544 0 0 1 38.0928-66.7648c-154.25536-27.60704-218.60352-121.77408-218.60352-233.79968 0-54.31296 17.94048-104.2432 53.0432-144.54784-22.36416-66.43712 2.08896-123.24864 5.3248-131.6864 63.81568-5.7344 130.00704 45.6704 135.168 49.68448 36.2496-9.78944 77.57824-14.9504 123.82208-14.9504 46.4896 0 88.064 5.3248 124.5184 15.23712 12.288-9.4208 73.80992-53.53472 133.12-48.128 3.15392 8.43776 27.0336 63.93856 6.02112 129.4336 35.59424 40.38656 53.69856 90.76736 53.69856 145.24416 0 112.18944-64.7168 206.4384-219.42272 233.71776a140.0832 140.0832 0 0 1 41.7792 99.9424v123.4944c0.86016 9.87136 0 19.6608 16.50688 19.6608 194.31424-65.49504 334.2336-249.15968 334.2336-465.5104C1002.57792 232.48896 782.66368 12.77952 511.5904 12.77952 240.18944 12.65664 20.48 232.40704 20.48 503.72608z"
  1837.                             fill="#000000" opacity=".65" p-id="5895"></path>
  1838.                     </svg>
  1839.                     <a href="https://github.com/LuckyPuppy514/external-player" target="_blank">
  1840.                         Powered by External Player
  1841.                     </a>
  1842.                 </span>
  1843.             </div>
  1844.         </div>
  1845.     </body>
  1846.     <script>
  1847.         const translations = {
  1848.             en: {
  1849.                 global: 'Global Config',
  1850.                 version: 'Version',
  1851.                 language: 'Language',
  1852.                 buttonCoord: 'Button Coord',
  1853.                 buttonScale: 'Button Scale',
  1854.                 buttonVisibilityDuration: 'Button Visibility Duration (ms, -1: Keep Visible)',
  1855.                 networkProxy: 'Network Proxy',
  1856.                 reset: 'Reset',
  1857.                 save: 'Save',
  1858.                 delete: 'Delete',
  1859.                 name: 'Name',
  1860.                 system: 'System',
  1861.                 icon: 'Icon',
  1862.                 iconSize: 'Icon Size',
  1863.                 playEvent: 'Play Event',
  1864.                 enable: 'Enable',
  1865.                 parser: 'Parser',
  1866.                 preferredQuality: 'Preferred Quality',
  1867.                 preferredSubtitle: 'Preferred Subtitle',
  1868.                 preferredCodec: 'Preferred Codec',
  1869.                 preferredLine: 'Preferred Line',
  1870.                 original: 'Original',
  1871.                 hd: 'HD',
  1872.                 smooth: 'Smooth',
  1873.                 mainLine: 'Main',
  1874.                 backupLine1: 'Backup 1',
  1875.                 backupLine2: 'Backup 2',
  1876.                 backupLine3: 'Backup 3',
  1877.                 unlimited: 'Unlimited',
  1878.                 off: 'OFF'
  1879.             },
  1880.             zh: {
  1881.                 global: '全局配置',
  1882.                 version: '版本',
  1883.                 language: '语言',
  1884.                 buttonCoord: '按钮坐标',
  1885.                 buttonScale: '按钮比例',
  1886.                 buttonVisibilityDuration: '按钮可见时长（毫秒，-1：一直可见）',
  1887.                 networkProxy: '网络代理',
  1888.                 reset: '重置',
  1889.                 save: '保存',
  1890.                 delete: '删除',
  1891.                 name: '名称',
  1892.                 system: '系统',
  1893.                 icon: '图标',
  1894.                 iconSize: '图标大小',
  1895.                 playEvent: '播放事件',
  1896.                 enable: '启用',
  1897.                 parser: '解析器',
  1898.                 preferredQuality: '首选画质',
  1899.                 preferredSubtitle: '首选字幕',
  1900.                 preferredCodec: '首选编码',
  1901.                 preferredLine: '首选线路',
  1902.                 original: '原画',
  1903.                 hd: '高清',
  1904.                 smooth: '流畅',
  1905.                 mainLine: '主线',
  1906.                 backupLine1: '备线1',
  1907.                 backupLine2: '备线2',
  1908.                 backupLine3: '备线3',
  1909.                 unlimited: '无限制',
  1910.                 off: '关闭',
  1911.             }
  1912.         };
  1913.  
  1914.         const SYSTEM_SVG = {
  1915.             windows: '<svg t="1732017849573" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5376" width="32" height="32"><path d="M523.8 191.4v288.9h382V128.1zM523.8 833.6l382 62.2v-352h-382zM120.1 480.2H443V201.9l-322.9 53.5zM120.1 770.6L443 823.2V543.8H120.1z" p-id="5377"></path></svg>',
  1916.             linux: '<svg t="1732017810402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4326" width="32" height="32"><path d="M834.198588 918.588235c-30.659765 15.661176-71.559529 50.115765-86.618353 64.572236-11.324235 10.782118-58.066824 16.203294-84.449882 2.710588-30.659765-15.661176-14.516706-40.417882-61.861647-41.923765-23.672471-0.602353-46.802824-0.602353-69.933177-0.602353-20.419765 0.602353-40.839529 1.626353-61.861647 2.108235-70.957176 1.626353-77.944471 47.405176-123.723294 45.778824-31.201882-1.084235-70.415059-25.840941-138.24-39.755294-47.344941-9.758118-93.003294-12.348235-102.761412-33.370353-9.637647-21.022118 11.866353-44.634353 13.432471-65.054118 1.626353-27.467294-20.419765-64.572235-4.276706-78.607059 13.974588-12.348235 43.550118-3.252706 62.885647-13.914352 20.419765-11.806118 29.033412-21.022118 29.033412-46.260706 7.529412 25.720471-0.542118 46.682353-17.227294 56.922353-10.24 6.445176-29.033412 9.697882-44.694588 8.131764-12.348235-1.144471-19.877647 0.481882-23.130353 5.360941-4.818824 5.903059-3.252706 16.685176 2.710588 30.659765 5.903059 13.974588 12.890353 23.130353 11.806118 40.297412-0.542118 17.227294-19.877647 37.707294-16.624942 52.224 1.084235 5.421176 6.445176 10.24 19.877647 13.974588 21.504 5.903059 60.777412 11.806118 98.966589 21.022118 42.526118 10.721882 86.618353 30.057412 114.085647 26.322823 81.739294-11.324235 34.936471-98.966588 22.046117-119.868235-69.391059-108.724706-115.109647-179.681882-151.67247-151.732706-9.155765 7.529412-9.697882-18.311529-9.155765-28.551529 1.626353-35.538824 19.395765-48.368941 30.117647-75.836236 20.419765-52.224 36.020706-111.856941 67.222588-142.516705 23.311059-30.177882 59.873882-79.088941 66.921412-104.869647-5.963294-55.958588-7.589647-115.109647-8.613647-166.671059-1.084235-55.416471 7.529412-103.905882 69.933177-137.697883C453.391059 33.310118 473.268706 30.117647 494.290824 30.117647c37.104941-0.602353 78.486588 10.24 104.869647 29.575529 41.984 31.201882 68.306824 97.340235 65.114353 144.624942-2.168471 37.104941 4.276706 75.294118 16.143058 115.109647 13.974588 46.802824 36.080941 79.570824 71.55953 117.217882 42.526118 45.176471 75.836235 133.903059 85.534117 190.343529 8.613647 52.826353-3.252706 85.594353-14.516705 87.220706-17.227294 2.590118-27.949176 56.922353-81.739295 54.814118-34.394353-1.626353-37.647059-22.046118-47.344941-39.815529-15.600941-27.407059-31.201882-18.793412-37.104941 10.24-3.252706 14.516706-1.144471 36.080941 3.734588 52.103529 9.697882 33.912471 6.445176 65.656471 0.542118 104.929882-11.324235 74.209882 52.163765 88.184471 94.689882 52.645647 41.923765-34.876235 51.079529-40.297412 103.785412-58.608941 80.112941-27.467294 53.248-51.621647 10.179765-66.138353-38.731294-12.950588-40.297412-78.064941-26.383059-90.413176 3.252706 69.933176 39.815529 80.173176 54.874353 89.810823 66.138353 41.020235-24.756706 74.932706-64.030118 94.810353z m-90.352941-259.734588c14.516706-48.489412 8.071529-67.764706-1.566118-113.543529-7.529412-34.394353-39.273412-81.257412-64.030117-95.713883 6.445176 5.360941 18.311529 20.961882 30.659764 44.574118 21.504 40.417882 43.008 100.050824 29.033412 149.564235-5.360941 19.275294-18.251294 21.985882-26.864941 22.528-37.647059 4.336941-15.600941-45.176471-31.201882-112.338823-17.769412-75.354353-36.020706-80.715294-40.297412-86.618353-22.166588-97.822118-46.320941-88.124235-53.368471-124.687059-5.903059-32.828235 28.551529-59.693176-18.251294-68.848941-14.516706-2.710588-34.936471-17.227294-43.008-18.31153-8.071529-1.024-12.408471-54.332235 17.709177-55.958588 29.575529-2.168471 34.996706 33.370353 29.575529 47.405177-8.553412 13.914353 0.542118 19.335529 15.119059 14.45647 11.806118-3.734588 4.276706-34.936471 6.987294-39.213176-7.529412-45.176471-26.383059-51.621647-45.718588-55.416471-74.270118 5.903059-40.899765 87.702588-48.429177 80.173177-10.782118-11.324235-41.923765-1.084235-41.923764-8.131765 0.542118-41.923765-13.492706-66.138353-32.828236-66.680471-21.504-0.542118-30.117647 29.575529-31.201882 46.742589-1.626353 16.143059 9.155765 50.115765 17.227294 47.405176 5.360941-1.626353 14.516706-12.408471 4.818824-11.806118-4.818824 0-12.348235-11.866353-13.432471-25.840941-0.542118-14.034824 4.879059-28.009412 23.130353-27.467294 20.961882 0.542118 20.961882 42.465882 18.793412 44.092235-6.927059 4.818824-15.600941 14.034824-16.685177 15.600942-6.927059 11.324235-20.359529 14.456471-25.780706 19.395764-9.155765 9.637647-11.264 20.419765-4.276705 24.154353 24.696471 13.974588 16.624941 30.057412 51.079529 31.262118 22.588235 1.084235 39.213176-3.252706 54.874353-8.07153 11.806118-3.734588 50.055529-11.806118 58.066823-25.840941 3.734588-5.903059 8.071529-5.903059 10.721883-4.276706 5.360941 2.650353 6.445176 12.890353-6.987294 16.143059-18.793412 5.421176-37.647059 15.661176-54.814118 22.106353-16.685176 6.927059-22.046118 9.637647-37.647059 12.288-35.478588 6.445176-61.801412-12.890353-38.189176 10.24 8.071529 7.529412 15.600941 12.348235 36.020706 11.866353 45.176471-1.626353 95.232-56.018824 100.050823-31.804235 1.024 5.360941-14.034824 11.806118-25.840941 17.769412-41.923765 20.419765-71.499294 61.319529-98.424471 47.284705-24.214588-12.890353-48.368941-72.643765-47.887058-45.658353 0.542118 41.381647-54.332235 77.944471-29.033412 125.289412-16.685176 4.216471-53.790118 83.365647-59.151059 124.205177-3.252706 23.672471 2.168471 52.705882-3.794824 68.848941-8.071529 23.672471-44.634353-22.588235-32.768-79.028706 2.108235-9.637647 0-11.866353-2.710588-6.927059-14.516706 26.322824-6.445176 63.427765 5.360941 89.208471 4.879059 11.324235 17.227294 16.143059 26.383059 25.840941 18.793412 21.443765 93.003294 76.378353 105.953883 89.810823a33.008941 33.008941 0 0 1-22.588236 55.898353c17.769412 33.370353 34.936471 36.623059 34.454588 90.895059 20.419765-10.721882 12.408471-34.394353 3.734589-49.392941-5.963294-10.842353-13.432471-15.661176-11.866353-18.311529 1.084235-1.626353 11.866353-10.842353 17.769412-3.734589 18.251294 20.419765 52.705882 24.154353 89.268705 19.33553 37.104941-4.336941 76.920471-17.227294 95.171765-46.802824 8.613647-13.974588 14.516706-18.793412 18.31153-16.143059 4.276706 2.108235 5.963294 11.806118 5.360941 27.949177-0.542118 17.227294-7.529412 34.996706-12.348236 49.513412-4.879059 16.685176-6.445176 27.949176 9.697883 28.551529 4.276706-30.177882 12.890353-59.753412 15.058823-89.871059 2.710588-34.394353-22.046118-97.822118 4.879059-129.626353 6.987294-8.613647 15.540706-9.637647 27.407059-9.637647 1.566118-43.068235 67.764706-39.755294 89.810823-22.046117 0-9.758118-20.961882-18.853647-29.575529-22.648471zM304.971294 503.988706c-3.794824 6.927059-13.432471 12.288-5.963294 13.43247 2.710588 0.542118 10.24-6.023529 13.492706-13.43247 2.650353-9.155765 5.360941-14.034824 1.084235-15.661177-4.879059-1.566118-3.794824 8.071529-8.613647 15.661177z m123.120941-291.538824c-6.445176-1.626353-5.360941 8.011294-2.108235 6.987294 2.168471 0 4.879059 3.252706 3.734588 8.07153-1.084235 6.445176-0.542118 10.842353 4.336941 10.842353 0.542118 0 1.566118 0 1.566118-1.626353 2.228706-13.552941-4.276706-23.190588-7.529412-24.274824z m14.576941 49.453177c-5.360941 0.542118-4.336941-11.866353 12.890353-10.782118-10.782118 1.084235-6.987294 10.782118-12.890353 10.782118z m44.092236-9.155765c15.600941-6.927059 20.961882 3.794824 15.600941 5.963294-5.421176 1.566118-5.963294-8.673882-15.600941-5.963294z m65.054117-43.550118c-6.987294 0.602353-4.818824 3.734588-1.566117 4.818824 4.276706 1.204706 8.613647 8.673882 9.697882 16.685176 0 1.084235 5.360941-1.084235 5.360941-2.710588 0.481882-12.830118-10.782118-19.275294-13.492706-18.793412z m31.201883-116.133647c-4.276706-4.336941-8.613647-8.131765-12.890353-8.131764-10.782118 1.084235-5.421176 12.348235-6.987294 17.769411-2.168471 5.903059-10.179765 10.782118-4.818824 15.058824 4.879059 3.734588 8.071529-5.903059 18.31153-9.637647 2.650353-1.144471 15.058824 0.481882 17.709176-5.421177 0.481882-2.710588-6.445176-5.903059-11.324235-9.637647z m59.693176 237.628236c-10.179765-6.384941-12.348235-17.167059-16.082823-13.432471-11.324235 12.348235 13.974588 38.189176 24.69647 40.417882 6.445176 1.084235 11.324235-7.589647 9.697883-15.119058-2.168471-10.179765-9.697882-6.445176-18.31153-11.866353z" p-id="4327"></path></svg>',
  1917.             mac: '<svg t="1731999754869" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7764" width="32" height="32"><path d="M849.124134 704.896288c-1.040702 3.157923-17.300015 59.872622-57.250912 118.190843-34.577516 50.305733-70.331835 101.018741-126.801964 101.909018-55.532781 0.976234-73.303516-33.134655-136.707568-33.134655-63.323211 0-83.23061 32.244378-135.712915 34.110889-54.254671 2.220574-96.003518-54.951543-130.712017-105.011682-70.934562-102.549607-125.552507-290.600541-52.30118-416.625816 36.040844-63.055105 100.821243-103.135962 171.364903-104.230899 53.160757-1.004887 103.739712 36.012192 136.028093 36.012192 33.171494 0 94.357018-44.791136 158.90615-38.089503 27.02654 1.151219 102.622262 11.298324 151.328567 81.891102-3.832282 2.607384-90.452081 53.724599-89.487104 157.76107C739.079832 663.275355 847.952448 704.467523 849.124134 704.896288M633.69669 230.749408c29.107945-35.506678 48.235584-84.314291 43.202964-132.785236-41.560558 1.630127-92.196819 27.600615-122.291231 62.896492-26.609031 30.794353-50.062186 80.362282-43.521213 128.270409C557.264926 291.935955 604.745311 264.949324 633.69669 230.749408" p-id="7765"></path></svg>'
  1918.         };
  1919.  
  1920.         const policy = window.trustedTypes.createPolicy('default', {
  1921.             createHTML: (string, sink) => string
  1922.         })
  1923.  
  1924.         var defaultConfig;
  1925.         var tabCount = 0;
  1926.  
  1927.         function translatePage(language) {
  1928.             const trans = translations[language];
  1929.             document.querySelectorAll('[data-translate]').forEach(el => {
  1930.                 el.textContent = trans[el.getAttribute('data-translate')] || el.textContent;
  1931.             });
  1932.         }
  1933.  
  1934.         function createTab(tabId, tabName = \`Player \${tabCount}\`, config = {}) {
  1935.             const tabButton = document.createElement('button');
  1936.             tabButton.className = 'tab-button';
  1937.             tabButton.textContent = tabName;
  1938.             tabButton.dataset.tab = tabId;
  1939.             sidebar.insertBefore(tabButton, document.getElementById('global-button').nextSibling);
  1940.  
  1941.             const tab = document.createElement('div');
  1942.             tab.id = tabId;
  1943.             tab.name = tabName;
  1944.             tab.className = 'tab';
  1945.             tab.setAttribute('readonly', config.readonly === true)
  1946.             const disabled = config.readonly === true ? 'disabled' : '';
  1947.             config.presetEvent = config.presetEvent || {
  1948.                 pauseAuto: true
  1949.             };
  1950.             tab.innerHTML = policy.createHTML(\`
  1951.                 <div class="header">
  1952.                     <button class="remove-button" data-translate="delete" \${disabled}>删除</button>
  1953.                 </div>
  1954.                 <div class="input-group">
  1955.                     <label data-translate="name">名称</label>
  1956.                     <input type="text" value="\${config.name || tabName}" name="name" placeholder="\${tabName}" required \${disabled}>
  1957.                 </div>
  1958.                 <div class="input-group">
  1959.                     <label data-translate="system">系统</label>
  1960.                     <div class="radio-button-group" name="system">
  1961.                         <div class="radio-button active \${disabled}" value="windows">\${SYSTEM_SVG.windows} Windows</div>
  1962.                         <div class="radio-button \${disabled}" value="linux">\${SYSTEM_SVG.linux} Linux</div>
  1963.                         <div class="radio-button \${disabled}" value="mac">\${SYSTEM_SVG.mac} Mac</div>
  1964.                     </div>
  1965.                 </div>
  1966.                 <div class="input-group">
  1967.                     <label data-translate="iconSize">图标大小</label>
  1968.                     <input type="number" value="\${config.iconSize || 50}" name="iconSize" min="1" required>
  1969.                 </div>
  1970.                 <div class="input-group">
  1971.                     <label data-translate="icon">图标</label>
  1972.                     <input type="search" value="\${config.icon || ''}" list="icon-list" name="icon" required>
  1973.                     <datalist id="icon-list">
  1974.                         <option value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGU4DoFouNX7OYb16a7XBAx_dXV3OgzcXc7A&s">MPV</option>
  1975.                         <option value="https://images.dwncdn.net/images/t_app-icon-l/p/ab54d4c6-a4d2-11e6-99a6-00163ec9f5fa/1236096272/potplayer-32bit-logo">PotPlayer</option>
  1976.                         <option value="https://upload.wikimedia.org/wikipedia/commons/5/51/IINA_Logo.png">IINA</option>
  1977.                     </datalist>
  1978.                 </div>
  1979.                 <div class="input-group">
  1980.                     <label data-translate="presetEvent">预设事件</label>
  1981.                     <div class="checkbox-group">
  1982.                         <input type="checkbox" id="\${tabId}-play-auto" name="playAuto" \${config.presetEvent.playAuto ? 'checked' : ''}/>
  1983.                         <label for="\${tabId}-play-auto" data-translate="playAuto" class="chekbox-label">自动播放</label>
  1984.                         <input type="checkbox" id="\${tabId}-pause-auto" name="pauseAuto"  \${config.presetEvent.pauseAuto ? 'checked' : ''}/>
  1985.                         <label for="\${tabId}-pause-auto" data-translate="pauseAuto" class="chekbox-label">自动暂停</label>
  1986.                         <input type="checkbox" id="\${tabId}-close-auto" name="closeAuto"  \${config.presetEvent.closeAuto ? 'checked' : ''}/>
  1987.                         <label for="\${tabId}-close-auto" data-translate="closeAuto" class="chekbox-label">自动关闭</label>
  1988.                     </div>
  1989.                 </div>
  1990.                 <div class="input-group">
  1991.                     <label data-translate="playEvent">播放事件</label>
  1992.                     <textarea class="tab-textarea" wrap="off" \${disabled} name="playEvent">\${config.playEvent || ''}</textarea>
  1993.                 </div>
  1994.                 <div class="input-group">
  1995.                     <label data-translate="enable">启用</label>
  1996.                     <label class="switch">
  1997.                         <input type="checkbox" class="tab-switch" \${config.enable || config.enable === undefined ? 'checked' : ''} name="enable"><span class="switch-slider"></span>
  1998.                     </label>
  1999.                 </div>
  2000.             \`);
  2001.             content.appendChild(tab);
  2002.  
  2003.             tab.querySelector('.remove-button').onclick = () => {
  2004.                 const previousElement = tabButton.previousElementSibling;
  2005.                 sidebar.removeChild(tabButton);
  2006.                 content.removeChild(tab);
  2007.                 activateTab(previousElement.getAttribute('data-tab'));
  2008.             };
  2009.  
  2010.             const nameInput = tab.querySelector('[name="name"]');
  2011.             nameInput.oninput = () => {
  2012.                 tabButton.innerHTML = SYSTEM_SVG[tab.querySelector('[name=system] .active').getAttribute('value')] + (
  2013.                     nameInput.value || tabName);
  2014.             };
  2015.  
  2016.             config.system = config.system || 'windows';
  2017.             tab.querySelectorAll('[name=system]').forEach(radioButtonGroup => {
  2018.                 const radioButtons = radioButtonGroup.querySelectorAll('.radio-button');
  2019.                 radioButtons.forEach(radioButton => {
  2020.                     radioButton.onclick = () => {
  2021.                         radioButtons.forEach(btn => btn.classList.remove('active'));
  2022.                         radioButton.classList.add('active');
  2023.                         tabButton.innerHTML = SYSTEM_SVG[radioButton.getAttribute('value')] + (nameInput
  2024.                             .value || tabName);
  2025.                     };
  2026.                     if (radioButton.getAttribute('value') === config.system) {
  2027.                         radioButton.classList.add('active');
  2028.                         tabButton.innerHTML = SYSTEM_SVG[radioButton.getAttribute('value')] + (nameInput
  2029.                             .value || tabName);
  2030.                     } else {
  2031.                         radioButton.classList.remove('active');
  2032.                     }
  2033.                 });
  2034.             })
  2035.  
  2036.             tabButton.onclick = () => activateTab(tabId);
  2037.  
  2038.             activateTab(tabId);
  2039.         }
  2040.  
  2041.         function activateTab(tabId) {
  2042.             document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
  2043.             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
  2044.             document.getElementById(tabId).classList.add('active');
  2045.             document.querySelector(\`[data-tab="\${tabId}"]\`).classList.add('active');
  2046.             document.querySelector('#content').scrollTop = 0;
  2047.         }
  2048.  
  2049.         function saveConfig() {
  2050.             const ytdlp = document.querySelector('#ytdlp');
  2051.             const ytdlpRegex = ytdlp.querySelector('[name="regex"]:not([disabled])').value;
  2052.  
  2053.             const bilibili = document.querySelector('#bilibili');
  2054.             const bilibiliRegex = bilibili.querySelector('[name="regex"]:not([disabled])').value;
  2055.  
  2056.             const config = {
  2057.                 global: {
  2058.                     parser: {}
  2059.                 },
  2060.                 players: []
  2061.             };
  2062.  
  2063.             for (const id in defaultConfig.global.parser) {
  2064.                 const parser = document.getElementById(id);
  2065.                 const regex = parser.querySelector('[name="regex"]:not([disabled])').value;
  2066.                 config.global.parser[id] = {};
  2067.                 config.global.parser[id].regex = regex ? regex.split('\\n') : [];
  2068.                 for (const name in defaultConfig.global.parser[id]) {
  2069.                     if (name === 'regex') {
  2070.                         continue;
  2071.                     }
  2072.                     config.global.parser[id][name] = parser.querySelector(\`[name=\${name}] .active\`).getAttribute('value');
  2073.                 }
  2074.             }
  2075.  
  2076.             for (const key in defaultConfig.global) {
  2077.                 if (key === 'parser') {
  2078.                     continue;
  2079.                 }
  2080.                 config.global[key] = document.getElementById(key)?.value || defaultConfig.global[key];
  2081.             }
  2082.  
  2083.             document.querySelectorAll('.tab').forEach(tab => {
  2084.                 if (tab.id !== 'global') {
  2085.                     config.players.push({
  2086.                         readonly: tab.getAttribute('readonly') === "true",
  2087.                         name: tab.querySelector('[name="name"]').value || tab.name || 'Player',
  2088.                         system: tab.querySelector('[name="system"] .active').getAttribute('value') ||
  2089.                             'windows',
  2090.                         icon: tab.querySelector('[name="icon"]').value || '',
  2091.                         iconSize: tab.querySelector('[name="iconSize"]').value || 50,
  2092.                         playEvent: tab.querySelector('[name="playEvent"]').value || '',
  2093.                         presetEvent: {
  2094.                             playAuto: tab.querySelector('[name="playAuto"]').checked,
  2095.                             pauseAuto: tab.querySelector('[name="pauseAuto"]').checked,
  2096.                             closeAuto: tab.querySelector('[name="closeAuto"]').checked,
  2097.                         },
  2098.                         enable: tab.querySelector('[name="enable"]').checked,
  2099.                     });
  2100.                 }
  2101.             });
  2102.  
  2103.             if (window.self === window.top) {
  2104.                 localStorage.setItem('config', JSON.stringify(config));
  2105.             } else {
  2106.                 parent.postMessage(config, '*');
  2107.             }
  2108.         };
  2109.  
  2110.         function resetButtonCoord() {
  2111.             document.getElementById('buttonXCoord').value = defaultConfig.global.buttonXCoord;
  2112.             document.getElementById('buttonYCoord').value = defaultConfig.global.buttonYCoord;
  2113.         }
  2114.  
  2115.         function loadConfig(config) {
  2116.             // 全局配置
  2117.             for (const key in config.global) {
  2118.                 if (key === 'parser' || !document.getElementById(key)) {
  2119.                     continue;
  2120.                 }
  2121.                 document.getElementById(key).value = config.global[key];
  2122.             }
  2123.  
  2124.             document.getElementById('language').value = config.global.language;
  2125.             language.dispatchEvent(new Event("change"));
  2126.  
  2127.             document.querySelectorAll('.parser').forEach(parser => {
  2128.                 parser.querySelectorAll('.radio-button-group').forEach(radioButtonGroup => {
  2129.                     const radioButtons = radioButtonGroup.querySelectorAll('.radio-button');
  2130.                     radioButtons.forEach(radioButton => {
  2131.                         if (radioButton.getAttribute('value') === config.global.parser[parser.id][
  2132.                             radioButtonGroup.getAttribute('name')
  2133.                         ]) {
  2134.                             radioButton.classList.add('active');
  2135.                         } else {
  2136.                             radioButton.classList.remove('active');
  2137.                         }
  2138.                     });
  2139.                 })
  2140.                 parser.querySelectorAll('textarea').forEach(textarea => {
  2141.                     if (textarea.disabled) {
  2142.                         const regex = defaultConfig.global.parser[parser.id][textarea.getAttribute(
  2143.                             'name')] || [];
  2144.                         if (regex.length > 0) {
  2145.                             textarea.value = regex.join('\\n');
  2146.                             textarea.style.height = regex.length * 20 + 20 + 'px';
  2147.                         } else {
  2148.                             textarea.style.display = 'none';
  2149.                         }
  2150.                     } else {
  2151.                         const regex = config.global.parser[parser.id][textarea.getAttribute('name')] || [];
  2152.                         textarea.value = regex.join('\\n');
  2153.                     }
  2154.                 })
  2155.             })
  2156.  
  2157.             // 播放器配置
  2158.             removeAllTab();
  2159.             config.players.forEach(player => createTab(\`player\${tabCount++}\`, player.name, player));
  2160.  
  2161.             // 默认选中全局配置
  2162.             activateTab('global');
  2163.         }
  2164.  
  2165.         function removeAllTab() {
  2166.             document.querySelectorAll('.tab-button').forEach(tabButton => {
  2167.                 if (tabButton.id === 'global-button') {
  2168.                     return;
  2169.                 }
  2170.                 sidebar.removeChild(tabButton);
  2171.             })
  2172.             document.querySelectorAll('.tab').forEach(tab => {
  2173.                 if (tab.id === 'global') {
  2174.                     return;
  2175.                 }
  2176.                 content.removeChild(tab);
  2177.             })
  2178.         }
  2179.  
  2180.         function resetConfig() {
  2181.             let config = JSON.parse(JSON.stringify(defaultConfig));
  2182.             for (const key in config.global.parser) {
  2183.                 config.global.parser[key].regex = [];
  2184.             }
  2185.             loadConfig(config);
  2186.         }
  2187.  
  2188.         function init() {
  2189.             if (window.self === window.top) {
  2190.                 return;
  2191.             }
  2192.  
  2193.             window.addEventListener('message', function (event) {
  2194.                 if (event.data.defaultConfig && event.data.config) {
  2195.                     defaultConfig = event.data.defaultConfig;
  2196.                     loadConfig(event.data.config);
  2197.                     document.getElementById('sidebar-container').style.display = 'flex';
  2198.                     document.getElementById('content-container').style.display = 'flex';
  2199.                 }
  2200.             });
  2201.  
  2202.             document.getElementById('language').addEventListener('change', (e) => {
  2203.                 translatePage(e.target.value);
  2204.             });
  2205.             document.getElementById('add-tab-button').onclick = () => createTab(\`tab\${tabCount++}\`);
  2206.             document.getElementById('global-button').onclick = () => activateTab('global');
  2207.             document.getElementById('save-button').onclick = () => saveConfig();
  2208.             document.getElementById('reset-button').onclick = () => resetConfig();
  2209.             document.getElementById('reset-button-coord-button').onclick = () => resetButtonCoord();
  2210.  
  2211.             document.querySelectorAll('#global .radio-button-group').forEach(radioButtonGroup => {
  2212.                 const radioButtons = radioButtonGroup.querySelectorAll('.radio-button');
  2213.                 radioButtons.forEach(radioButton => {
  2214.                     radioButton.onclick = () => {
  2215.                         radioButtons.forEach(btn => btn.classList.remove('active'));
  2216.                         radioButton.classList.add('active');
  2217.                     };
  2218.                 });
  2219.             })
  2220.         }
  2221.  
  2222.         init();
  2223.     </script>
  2224.  
  2225.     </html>
  2226.     `;
  2227.     if (SETTING_URL) {
  2228.         const response = await fetch(SETTING_URL);
  2229.         settingIframeHtml = await response.text();
  2230.     }
  2231.     settingIframe.onload = function () {
  2232.         const doc = settingIframe.contentDocument || settingIframe.contentWindow.document;
  2233.         doc.open();
  2234.         doc.write(policy.createHTML(settingIframeHtml));
  2235.         doc.close();
  2236.     };
  2237.     document.body.appendChild(settingIframe);
  2238.  
  2239.     window.addEventListener('message', function (event) {
  2240.         if (event.data && event.data.global) {
  2241.             // 保存配置
  2242.             currentConfig = event.data;
  2243.             GM_setValue('config', currentConfig);
  2244.             showToast(translation.saveSuccessfully);
  2245.  
  2246.             // 移除旧元素
  2247.             document.head.removeChild(style);
  2248.             document.body.removeChild(buttonDiv);
  2249.             style = undefined;
  2250.             buttonDiv = undefined;
  2251.  
  2252.             // 重新初始化
  2253.             isReloading = true;
  2254.             init(currentUrl);
  2255.         }
  2256.     });
  2257.  
  2258.     try {
  2259.         showLoading();
  2260.         await sleep(REFRESH_INTERVAL);
  2261.     } finally {
  2262.         hideLoading();
  2263.     }
  2264. }
  2265.  
  2266. function startFlashing(element) {
  2267.     let visibility = element.style.visibility;
  2268.     let transition = element.style.transition;
  2269.     let boxShadow = element.style.boxShadow;
  2270.  
  2271.     element.style.visibility = 'visible';
  2272.     element.style.transition = 'box-shadow 0.5s ease';
  2273.     let isGlowing = false;
  2274.     const interval = setInterval(() => {
  2275.         isGlowing = !isGlowing;
  2276.         element.style.boxShadow = isGlowing ? `0 0 10px 10px ${COLOR.PRIMARY}` : 'none';
  2277.     }, 500);
  2278.  
  2279.     setTimeout(() => {
  2280.         clearInterval(interval);
  2281.         element.style.visibility = visibility;
  2282.         element.transition = transition;
  2283.         element.boxShadow = boxShadow;
  2284.     }, 5000);
  2285. }
  2286.  
  2287. // ======================================== 开始执行 =======================================
  2288.  
  2289. function init(url) {
  2290.     currentConfig = loadConfig();
  2291.     translation = translations[currentConfig.global.language];
  2292.     appendCss();
  2293.     appendToastDiv();
  2294.     appendLoadingDiv();
  2295.     appendButtonDiv();
  2296.     currentParser = matchParser(currentConfig.global.parser, url) || matchParser(defaultConfig.global.parser, url);
  2297.     if (currentParser) {
  2298.         buttonDiv.style.display = 'flex';
  2299.         if (!isReloading) {
  2300.             for (const player of currentConfig.players) {
  2301.                 if (player.presetEvent.playAuto === true) {
  2302.                     currentParser.play(player);
  2303.                 }
  2304.             }
  2305.         }
  2306.         isReloading = false;
  2307.     }
  2308.     currentUrl = url;
  2309. }
  2310.  
  2311. onload = () => {
  2312.     setInterval(() => {
  2313.         const url = location.href;
  2314.         if (currentUrl !== url || !buttonDiv) {
  2315.             console.log(`current url update: ${currentUrl ? currentUrl + ' => ' : ''}${url}`);
  2316.             init(url);
  2317.         }
  2318.     }, REFRESH_INTERVAL);
  2319.  
  2320.     // 快捷键
  2321.     document.addEventListener('keydown', (event) => {
  2322.         // 打开设置：Ctrl + Alt + E
  2323.         if (event.ctrlKey && event.altKey && (event.key === 'e' || event.key === 'E')) {
  2324.             event.preventDefault();
  2325.             startFlashing(settingButton);
  2326.             settingButton.click();
  2327.         }
  2328.     });
  2329. };