@lzwme/m3u8-dl 1.5.0 → 1.6.0

package/client/m3u8-capture.user.js

@@ -0,0 +1,94 @@
+// ==UserScript==
+// @name         [M3U8-DL]媒体链接抓取器
+// @namespace    https://github.com/lzwme/m3u8-dl
+// @homepage     https://m3u8-player.lzw.me/download.html
+// @supportURL   https://github.com/lzwme/m3u8-dl/issues
+// @icon         https://gh-proxy.org/raw.githubusercontent.com/lzwme/m3u8-dl/refs/heads/main/packages/frontend/public/logo.png
+// @version      1.0.0
+// @description  自动抓取网页中的多种媒体链接（m3u8、mp4、mkv、avi、mov、音频等），支持可配置的媒体类型，支持跳转到 m3u8-dl webui 下载
+// @author       lzw
+// @updateURL    https://gh-proxy.org/raw.githubusercontent.com/lzwme/m3u8-dl/refs/heads/main/client/m3u8-capture.user.js
+// @downloadURL  https://raw.githubusercontent.com/lzwme/m3u8-dl/refs/heads/main/client/m3u8-capture.user.js
+// @match        *://*/*
+// @grant        GM_addElement
+// @grant        GM_setValue
+// @grant        GM_getValue
+// @grant        GM_getResourceText
+// @grant        GM_xmlhttpRequest
+// @grant        unsafeWindow
+// @resource     SwalJS   https://s4.zstatic.net/ajax/libs/sweetalert2/11.16.1/sweetalert2.min.js
+// @resource     SwalCSS  https://s4.zstatic.net/ajax/libs/sweetalert2/11.16.1/sweetalert2.css
+// @resource     TailwindCSS  https://s4.zstatic.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css
+// @run-at       document-idle
+// ==/UserScript==
+
+(function(){"use strict";const j="m3u8_capture_webui_url",K="m3u8_capture_exclude_urls",J="m3u8_capture_panel_pos",Q="m3u8_capture_panel_visible",Z="m3u8_capture_media_ext_list",ut=["m3u8","mp4","mkv","avi","mov","wmv","flv","webm","m4v","m3u","m4a","aac","flac","ape","mp3","wav","ogg","wma"];function V(){return GM_getValue(j,"http://localhost:6600").replace(/\/$/,"")}function tt(){return GM_getValue(K,"")}function ft(t){GM_setValue(K,t)}function U(){const t=GM_getValue(Z,[]);return t&&Array.isArray(t)&&t.length>0?t:[...ut]}function pt(t){if(Array.isArray(t)&&t.length>0){const e=t.map(n=>n.trim().toLowerCase()).filter(n=>n&&/^[a-z0-9]+$/i.test(n));return GM_setValue(Z,e),e}return null}function mt(){return GM_getValue(J,null)}function xt(t){GM_setValue(J,t)}function wt(){return GM_getValue(Q,!1)}function et(t){GM_setValue(Q,t)}function W(t,e=document.head,n="css"){const o=t.length<50?GM_getResourceText(t):t;return Promise.resolve(GM_addElement(e,n==="css"?"style":"script",{type:n==="css"?"text/css":"text/javascript",textContent:o}))}function gt(){const t=U();return new RegExp(`\\.(${t.join("|")})(\\?|$|#)`,"i")}function k(t){const e=window.location.href;if(e.startsWith(V()))return!0;const n=tt();if(!n||!n.trim())return!1;const o=n.split(`
+`).map(i=>i.trim()).filter(i=>i);for(const i of o)try{if(e.includes(i)||i.startsWith("/")&&i.endsWith("/")&&new RegExp(i.slice(1,-1)).test(e))return!0}catch(a){console.warn("[M3U8 Capture] 排除规则格式错误:",i,a)}return!1}function nt(t){return new Promise((e,n)=>{navigator.clipboard?.writeText?navigator.clipboard.writeText(t).then(()=>e(!0)).catch(()=>{ot(t)?e(!0):n(new Error("复制失败"))}):ot(t)?e(!0):n(new Error("复制失败"))})}function ot(t){try{const e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",e.style.left="-9999px",document.body.appendChild(e),e.select(),e.setSelectionRange(0,t.length);const n=document.execCommand("copy");return document.body.removeChild(e),n}catch(e){return console.error("[M3U8 Capture] fallbackCopy failed:",e),!1}}function ht(t){try{const e=new URL(t);return`${e.protocol}//${e.host}${e.pathname}`}catch{return t}}function O(t){return"touches"in t&&t.touches.length>0?{x:t.touches[0].clientX,y:t.touches[0].clientY}:"changedTouches"in t&&t.changedTouches.length>0?{x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}:{x:t.clientX,y:t.clientY}}function y(t){if(!t||typeof t!="string"||!t.startsWith("http"))return!1;const e=t.toLowerCase();return!!(gt().test(e)||e.includes(".m3u8"))}function it(t){if(!t||typeof t!="string")return"media";const e=t.toLowerCase(),n=U();for(const o of n)if(new RegExp(`\\.${o}(\\?|$|#)`,"i").test(e))return o;return/m3u8/i.test(e)?"m3u8":"media"}function q(t=document){let e="";const n=["h1.title","h2.title","h1","h2"];for(const o of n){const i=t.querySelector(o);if(i?.textContent){e=i.textContent.trim();break}}if(e||(e=(t.title||"").split(/[-|_]/)[0].trim()),!e&&window.top!==window.self)try{e=q(window.top?.document)}catch{}return e}function yt(t){if(!t||typeof t!="string")return null;try{const e=new URL(t);for(const[n,o]of e.searchParams.entries()){if(!o)continue;const i=decodeURIComponent(o);if(y(i))return i}}catch{}return null}function bt(){const t=XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open=function(n,o,i,a,s){return y(o.toString())&&this.addEventListener("load",function(){this.status>=200&&this.status<300&&h(o.toString())}),t.call(this,n,o,i??!0,a,s)};const e=window.fetch;window.fetch=function(n,o){const i=typeof n=="string"?n:n&&typeof n=="object"&&"url"in n?n.url:"";return y(i)?e.call(this,n,o).then(a=>(a.ok&&h(i),a)):e.call(this,n,o)}}function vt(){if(typeof PerformanceObserver>"u")return;const t=new PerformanceObserver(e=>{for(const n of e.getEntries())n.name&&y(n.name)&&h(n.name)});try{t.observe({entryTypes:["resource"]})}catch{console.log("[M3U8 Capture] PerformanceObserver not supported")}}function A(){if(document.querySelectorAll("video").forEach(t=>{t.src&&y(t.src)&&h(t.src,t.getAttribute("title")||""),t.querySelectorAll("source").forEach(e=>{e.src&&y(e.src)&&h(e.src,t.getAttribute("title")||"")})}),document.querySelectorAll("a[href]").forEach(t=>{const e=t.getAttribute("href");if(e&&y(e))try{const n=new URL(e,window.location.href).href;h(n,t.textContent?.trim()||"")}catch{}}),document.body){const t=document.body.innerText||"",n=U().join("|"),o=new RegExp(`https?:\\/\\/[^\\s"'<>]+\\.(${n})(\\?[^\\s"'<>]*)?`,"gi");let i;for(;(i=o.exec(t))!==null;)h(i[0])}}async function Et(){let t=document.body;const e=o=>{t=o},n=()=>t;unsafeWindow.SetSwalTarget=e,window.SetSwalTarget=e,unsafeWindow.GetSwalTarget=n,window.GetSwalTarget=n;try{const o=GM_getResourceText("SwalJS").replace(/document\.body/g,"GetSwalTarget()"),i=()=>W(o,document.head||document.documentElement,"script").then(()=>{const a=window.Swal||window.Sweetalert2||unsafeWindow.Swal||unsafeWindow.Sweetalert2;a&&(window.Swal=a,unsafeWindow.Swal=a)}).catch(a=>{console.error("[M3U8 Capture] Failed to add SweetAlert2 script:",a)});document.head||document.documentElement?await i():document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>i()):setTimeout(i,50)}catch(o){console.error("[M3U8 Capture] Failed to load SweetAlert2:",o)}}function St(t,e){W(GM_getResourceText("SwalCSS").replace(/:root *{/,`#${e.id} {`).replace(/body/g,""),t,"css"),setTimeout(()=>{const n=window.Swal;typeof window.SetSwalTarget=="function"&&n&&(window.SetSwalTarget(e),window.Swal=n.mixin({target:e}))},500)}const m=window.top&&window.top!==window.self;let S=null,b=null,l=null,r=null,p=null,$=wt(),B=!1;const P={x:0,y:0};let M=!1;const R={x:0,y:0};let z={x:0,y:0},C=!1,L=null;const g={x:0,y:0};let x;function Mt(t){x=t}function rt(){if(S)return b;S=document.createElement("div"),S.id="m3u8-capture-shadow-host",S.style.cssText="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;",document.body.appendChild(S),b=S.attachShadow({mode:"open"}),W("TailwindCSS",b,"css");const t=document.createElement("div");t.id="m3u8-capture-swal-container",b.appendChild(t);const e=document.createElement("style");return e.textContent=[":host { all: initial; font-family: system-ui, -apple-system, sans-serif; }","* { box-sizing: border-box; }",".hidden { display: none !important; }",`#${t.id},`,`#${t.id} * { pointer-events: auto !important; }`].join(`
+`),b.appendChild(e),Et().then(()=>{St(b,t)}),b}function at(){if(r||m)return;const t=rt();if(!t)return;r=document.createElement("div"),r.id="m3u8-capture-toggle-btn",r.style.cssText="position: fixed; bottom: 40px; right: 20px; width: 50px; height: 50px; pointer-events: auto; z-index: 999998; will-change: transform;",r.className=`fixed bottom-10 right-5 w-[50px] h-[50px] bg-blue-500 rounded-full flex items-center justify-center cursor-move shadow-lg text-2xl transition-all duration-200 hover:scale-110 hover:shadow-xl select-none touch-none ${$?"hidden":"flex"}`;const e=document.createElement("span");e.textContent="🎬",r.appendChild(e),p=document.createElement("span"),p.id="m3u8-capture-toggle-badge",p.style.cssText="position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: #ef4444; color: white; border-radius: 9px; font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); line-height: 1;",p.textContent="0",p.classList.add("hidden"),r.appendChild(p);const n=o=>{if(!r)return;M=!0,C=!1;const i=O(o);z={x:i.x,y:i.y};const a=r.getBoundingClientRect();R.x=i.x-a.left,R.y=i.y-a.top,g.x=a.left,g.y=a.top;const s=window.getComputedStyle(r);s.transform&&s.transform!=="none"&&(r.style.transform="none",r.style.left=`${a.left}px`,r.style.top=`${a.top}px`,r.style.right="auto",r.style.bottom="auto"),r.style.cursor="move",r.style.transition="none",o.preventDefault(),o.stopPropagation()};r.addEventListener("mousedown",n),r.addEventListener("touchstart",n,{passive:!1}),r.addEventListener("click",()=>{C||st()}),r.addEventListener("touchend",o=>{M&&!C&&(o.preventDefault(),o.stopPropagation(),st())},{passive:!1}),t.appendChild(r),F()}function F(){if(!p||m||!x)return;const t=x.size;t>0?(p.textContent=t>99?"99+":t.toString(),p.classList.remove("hidden")):p.classList.add("hidden")}function st(){m||!ct()||($=!0,et(!0),l&&(l.style.display="flex"),r&&r.classList.add("hidden"))}function H(){m||($=!1,et(!1),l&&(l.style.display="none"),r?r.classList.remove("hidden"):at(),F())}function lt(){const t=window.Swal;t&&t.fire({title:"确认清空",text:"确定要清空所有媒体链接吗？",icon:"warning",showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",confirmButtonColor:"#3b82f6"}).then(e=>{e.isConfirmed&&x&&(x.clear(),N())})}function ct(){if(!document.body||m)return null;if(l)return l;const t=rt();if(!t)return null;const e=document.createElement("div");e.id="m3u8-capture-panel";const n=mt(),o=n&&window.innerWidth>768?{left:`${Math.max(0,Math.min(n.x,window.innerWidth-450))}px`,top:`${Math.max(0,Math.min(n.y,window.innerHeight-350))}px`,right:"auto"}:{right:"20px",top:"20px"};e.className="fixed w-[420px] max-w-[90vw] max-h-[85vh] bg-white border-2 border-blue-500 rounded-xl shadow-2xl font-sans flex flex-col",e.style.cssText=`
+          position: fixed;
+          width: 420px;
+          max-width: 90vw;
+          max-height: 85vh;
+          pointer-events: auto;
+          z-index: 1059;
+          ${o.left?`left: ${o.left};`:""}
+          ${o.top?`top: ${o.top};`:""}
+          ${`right: ${o.right};`}
+          display: ${$?"flex":"none"};
+      `,e.innerHTML=`
+          <div id="m3u8-capture-header" class="bg-gradient-to-br from-blue-500 to-blue-600 text-white px-4 py-3.5 rounded-t-lg flex justify-between items-center cursor-move select-none touch-none">
+              <div class="font-semibold text-[15px] flex items-center gap-2">
+                  <span>🎬</span>
+                  <span>媒体链接抓取器</span>
+                  <span id="m3u8-capture-count" class="bg-white bg-opacity-25 px-2 py-0.5 rounded-xl text-xs font-medium">0</span>
+              </div>
+              <div class="flex gap-1.5">
+                  <button id="m3u8-capture-settings" class="bg-white bg-opacity-20 border-none text-white px-2.5 py-1.5 rounded-md cursor-pointer text-xs transition-colors duration-200 hover:bg-opacity-30 active:bg-opacity-40 touch-manipulation" title="设置">⚙️</button>
+                  <button id="m3u8-capture-toggle" class="bg-white bg-opacity-20 border-none text-white px-2.5 py-1.5 rounded-md cursor-pointer text-xs transition-colors duration-200 hover:bg-opacity-30 active:bg-opacity-40 touch-manipulation" title="隐藏">−</button>
+                  <button id="m3u8-capture-clear" class="bg-white bg-opacity-20 border-none text-white px-2.5 py-1.5 rounded-md cursor-pointer text-xs transition-colors duration-200 hover:bg-opacity-30 active:bg-opacity-40 touch-manipulation" title="清空">🗑️</button>
+              </div>
+          </div>
+          <div id="m3u8-capture-content" class="p-3 overflow-y-auto flex-1 bg-gray-50">
+              <div id="m3u8-capture-list" class="flex flex-col gap-2.5"></div>
+              <div id="m3u8-capture-empty" class="text-center text-gray-400 py-10 px-5 hidden">
+                  <div class="text-5xl mb-3">📹</div>
+                  <div class="text-sm">暂无媒体链接</div>
+                  <div class="text-xs text-gray-300 mt-2">浏览网页时会自动抓取</div>
+              </div>
+          </div>
+      `,t.appendChild(e),l=e;const i=e.querySelector("#m3u8-capture-header");if(!i)return l;const a=u=>{const f=u.target;if(f.tagName==="BUTTON"||f.closest("button"))return;B=!0;const T=O(u),_=e.getBoundingClientRect();P.x=T.x-_.left,P.y=T.y-_.top,e.style.cursor="move",u.preventDefault(),u.stopPropagation()};i.addEventListener("mousedown",a),i.addEventListener("touchstart",a,{passive:!1});const s=u=>{const f=O(u);if(B&&l){u.preventDefault();const T=f.x-P.x,_=f.y-P.y,X=window.innerWidth-e.offsetWidth,Y=window.innerHeight-e.offsetHeight,D=Math.max(0,Math.min(T,X)),G=Math.max(0,Math.min(_,Y));e.style.left=`${D}px`,e.style.top=`${G}px`,e.style.right="auto",xt({x:D,y:G})}if(M&&r){u.preventDefault();const T=f.x-R.x,_=f.y-R.y,X=window.innerWidth-r.offsetWidth,Y=window.innerHeight-r.offsetHeight,D=Math.max(0,Math.min(T,X)),G=Math.max(0,Math.min(_,Y));g.x=D,g.y=G,L||(L=requestAnimationFrame(()=>{r&&M&&(r.style.transform=`translate(${g.x}px, ${g.y}px)`,r.style.left="0",r.style.top="0",r.style.right="auto",r.style.bottom="auto"),L=null})),Math.sqrt((f.x-z.x)**2+(f.y-z.y)**2)>5&&(C=!0)}},d=u=>{B&&(B=!1,l&&(l.style.cursor="default"),u.preventDefault()),M&&(M=!1,L&&(cancelAnimationFrame(L),L=null),r&&(r.style.cursor="move",r.style.transition="",C&&(r.style.transform=`translate(${g.x}px, ${g.y}px)`,r.style.left="0",r.style.top="0",r.style.right="auto",r.style.bottom="auto")),C&&u.preventDefault())};document.addEventListener("mousemove",s),document.addEventListener("mouseup",d),document.addEventListener("touchmove",s,{passive:!1}),document.addEventListener("touchend",d,{passive:!1}),document.addEventListener("touchcancel",d,{passive:!1});const c=u=>f=>{f.preventDefault(),f.stopPropagation(),u()},v=e.querySelector("#m3u8-capture-toggle");v&&(v.addEventListener("click",c(()=>H())),v.addEventListener("touchend",c(()=>H()),{passive:!1}));const w=e.querySelector("#m3u8-capture-clear");w&&(w.addEventListener("click",c(()=>lt())),w.addEventListener("touchend",c(()=>lt()),{passive:!1}));const E=e.querySelector("#m3u8-capture-settings");return E&&(E.addEventListener("click",c(()=>dt())),E.addEventListener("touchend",c(()=>dt()),{passive:!1})),!$&&!r&&at(),l}function dt(){const t=window.Swal;if(!t)return;const e=tt(),n=U();t.fire({title:"设置",html:`
+              <div class="text-left">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">WebUI 地址</label>
+                  <input id="swal-webui-url" type="text" value="${V()}"
+                      class="w-full p-2.5 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="http://localhost:6600">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">媒体扩展名（每行一个，用逗号或换行分隔）</label>
+                  <textarea id="swal-media-ext-list" rows="3"
+                      class="w-full p-2.5 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="例如：m3u8, mp4, mkv, avi, mov, wmv, flv, webm, m4v, ts, m3u, m4a, aac, flac, ape, mp3, wav, ogg, wma">${n.join(", ")}</textarea>
+                  <p class="text-xs text-gray-500 mb-4">支持的媒体文件扩展名，将用于识别和抓取媒体链接</p>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">排除网址规则（每行一个，支持正则表达式，以 / 开头和结尾）</label>
+                  <textarea id="swal-exclude-urls" rows="6"
+                      class="w-full p-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="例如：&#10;localhost:6600&#10;/example.com/&#10;127.0.0.1">${e}</textarea>
+                  <p class="text-xs text-gray-500 mt-1">匹配的网址将不展示面板且不抓取媒体链接</p>
+              </div>
+          `,showCancelButton:!0,confirmButtonText:"保存",cancelButtonText:"取消",confirmButtonColor:"#3b82f6",width:"600px",preConfirm:()=>{const o=document.getElementById("swal-webui-url"),i=document.getElementById("swal-exclude-urls"),a=document.getElementById("swal-media-ext-list"),s=o?o.value.trim():"",d=i?i.value.trim():"",c=a?a.value.trim():"",v=window.Swal;if(!s)return v?.showValidationMessage("WebUI 地址不能为空"),!1;const w=c.split(/[,\n\s]+/).map(E=>E.trim()).filter(E=>E);return w.length===0?(v?.showValidationMessage("媒体扩展名列表不能为空"),!1):{url:s,excludeUrls:d,mediaExtList:w}}}).then(o=>{if(o.isConfirmed&&o.value){const i=o.value;GM_setValue(j,i.url),ft(i.excludeUrls);const a=pt(i.mediaExtList),s=window.Swal;a&&s?s.fire({icon:"success",title:"设置已保存",html:`已保存 ${a.length} 个媒体扩展名类型`,timer:2e3,showConfirmButton:!1}):s&&s.fire({icon:"error",title:"保存失败",text:"媒体扩展名列表格式错误",timer:2e3,showConfirmButton:!1})}})}function Ct(t){const e=window.top&&window.top!==window;try{const o=window.open(t,"_blank");if(o&&!o.closed)return!0}catch(o){console.log("[M3U8 Capture] window.open failed:",o)}if(e&&window.top){try{const o=window.top.open(t,"_blank");if(o&&!o.closed)return!0}catch(o){console.log("[M3U8 Capture] window.top.open failed:",o)}try{return window.top.location.href=t,!0}catch(o){console.log("[M3U8 Capture] window.top.location.href failed:",o)}}const n=()=>{const o=window.Swal;o&&o.fire({icon:"info",title:"链接已复制",html:`由于 iframe 限制，链接已复制到剪贴板<br><br><code style="word-break: break-all; background: #f3f4f6; padding: 8px; border-radius: 4px; display: block; font-size: 12px;">${t}</code><br><br>请手动打开`,timer:4e3,showConfirmButton:!0,confirmButtonText:"确定"})};return nt(t).then(()=>n()).catch(()=>{const o=window.Swal;o&&o.fire({icon:"warning",title:"无法复制链接",html:`由于 iframe 限制，请手动复制并打开：<br><br><code style="word-break: break-all; background: #f3f4f6; padding: 8px; border-radius: 4px; display: block; font-size: 12px;">${t}</code>`,confirmButtonText:"确定"})}),!1}function N(){if(m||!x||!ct())return;F();const t=l?.querySelector("#m3u8-capture-list"),e=l?.querySelector("#m3u8-capture-empty"),n=l?.querySelector("#m3u8-capture-count");if(!t||!e||!n)return;if(n.textContent=x.size.toString(),x.size===0){t.classList.add("hidden"),e.classList.remove("hidden");return}t.classList.remove("hidden"),e.classList.add("hidden"),t.innerHTML="",Array.from(x.values()).sort((i,a)=>a.timestamp-i.timestamp).forEach(i=>{const a=document.createElement("div");a.className="border border-gray-200 rounded-lg p-3 bg-white transition-all duration-200 shadow-sm hover:bg-gray-50 hover:shadow-md";const s=i.title||"",d=i.type.toUpperCase();let c="bg-gray-500";d==="M3U8"||d==="M3U"?c="bg-blue-500":["MP4","MKV","AVI","MOV","WMV","FLV","WEBM","M4V","TS"].includes(d)?c="bg-green-500":["MP3","M4A","AAC","FLAC","APE","WAV","OGG","WMA"].includes(d)&&(c="bg-purple-500"),a.innerHTML=`
+              <div class="flex justify-between items-start gap-2 mb-2">
+                  <div class="flex-1 min-w-0">
+                      <div class="flex items-center gap-1.5 mb-1.5">
+                          <span class="font-semibold text-[13px] text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap" title="${s}">${s||"未命名媒体"}</span>
+                          <span class="${c} text-white px-2 py-0.5 rounded-xl text-[10px] font-bold">${d}</span>
+                      </div>
+                      <div class="text-[11px] text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap leading-snug max-w-[320px]" title="${i.url}">${i.url}</div>
+                  </div>
+              </div>
+              <div class="flex gap-2">
+                  <button class="m3u8-capture-download-btn flex-1 bg-blue-500 text-white border-none px-3.5 py-2 rounded-md cursor-pointer text-xs font-medium transition-all duration-200 hover:bg-blue-600 hover:-translate-y-0.5" data-url="${encodeURIComponent(i.url)}" data-title="${encodeURIComponent(s)}">
+                      跳转下载
+                  </button>
+                  <button class="m3u8-capture-copy-btn bg-gray-500 text-white border-none px-3.5 py-2 rounded-md cursor-pointer text-xs transition-all duration-200 hover:bg-gray-600" data-url="${i.url}">
+                      复制
+                  </button>
+              </div>
+          `,t.appendChild(a)}),l?.querySelectorAll(".m3u8-capture-download-btn").forEach(i=>{i.addEventListener("click",a=>{a.stopPropagation();const s=decodeURIComponent(i.getAttribute("data-url")||""),d=decodeURIComponent(i.getAttribute("data-title")||""),c=`${V()}/page/download?from=capture&action=new&url=${encodeURIComponent(s+(d?`|${d}`:""))}`;Ct(c)})}),l?.querySelectorAll(".m3u8-capture-copy-btn").forEach(i=>{i.addEventListener("click",async a=>{a.stopPropagation();const s=i.getAttribute("data-url")||"",d=i.textContent,c=i.className;try{await nt(s),i.textContent="已复制",i.className="m3u8-capture-copy-btn bg-green-500 text-white border-none px-3.5 py-2 rounded-md cursor-pointer text-xs transition-all duration-200",setTimeout(()=>{i.textContent=d,i.className=c},2e3)}catch{const w=window.Swal;if(!w)return;w.fire({icon:"error",title:"复制失败",text:"请手动复制链接",html:`<code style="word-break: break-all; background: #f3f4f6; padding: 8px; border-radius: 4px; display: block; font-size: 12px;">${s}</code>`,confirmButtonText:"确定"})}})})}const I=new Map;Mt(I);function h(t,e=""){if(t=yt(t)||t,!t)return;if(m){try{const i={url:t,title:e||q(),type:it(t),pageUrl:window.location.href,timestamp:Date.now()};window.top?.postMessage({type:"m3u8-capture-link",data:i},"*")}catch(i){console.warn("[M3U8 Capture] Failed to send link to top window:",i)}return}const n=ht(t);I.get(n)?.title||(I.set(n,{url:t,title:e||q(),type:it(t),pageUrl:window.location.href,timestamp:Date.now()}),N())}function Lt(){if(k())return;m||window.addEventListener("message",n=>{if(n.data?.type==="m3u8-capture-link"&&n.data.data){const o=n.data.data;h(o.url,o.title)}}),bt(),vt();const t=()=>{if(!k()){if(m)return A();document.body&&(A(),I.size>0&&N())}};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t):setTimeout(t,100);let e=location.href;new MutationObserver(()=>{const n=location.href;if(n!==e){if(e=n,k()){H();return}setTimeout(()=>A(),1e3)}}).observe(document,{subtree:!0,childList:!0}),setInterval(()=>{document.body&&!k()&&A()},5e3)}Lt()})();

package/client/play.html

@@ -1,15 +1,22 @@
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh-CN">
 
 <head>
-  <title>M3U8 在线播放</title>
+  <title>M3U8 Player</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover"
+  <meta content="width=device-width, initial-scale=1.0, viewport-fit=cover"
     name="viewport" />
+  <link rel="shortcut icon" href="logo.png">
   <style>
     body {
       margin: 0;
+      padding: 0;
+    }
+
+    #dplayer {
+      width: 100vw;
+      height: 100vh;
     }
   </style>
 </head>
@@ -19,25 +26,225 @@
   <script src="https://s4.zstatic.net/ajax/libs/hls.js/1.5.18/hls.min.js"
     integrity="sha512-hARxLWym80kd0Bzl5/93OuW1ujaKfvmJ90yTKak/RB67JuNIjtErU2H7H3bteyfzMuqiSK0tXarT7eK6lEWBBA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  <script src="https://s4.zstatic.net/ajax/libs/dplayer/1.26.0/DPlayer.min.js" crossorigin="anonymous"
-    referrerpolicy="no-referrer"></script>
 
   <script>
-    const url = location.href.split('url=')[1];
-    if (!url) {
+    const playUrl = location.href.split('url=')[1];
+    if (!playUrl) {
       document.getElementById('dplayer').innerText = '请传入播放地址参数 url=';
     } else {
-      const dp = new DPlayer({
-        container: document.getElementById('dplayer'),
-        autoplay: true,
-        video: {
-          url: decodeURIComponent(url),
-          type: 'auto',
+      const CDN_CONFIG = {
+        // m3u8Demo: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+        dplayer: 'https://s4.zstatic.net/ajax/libs/dplayer/1.26.0/DPlayer.min.js',
+        artplayer: [
+          'https://s4.zstatic.net/ajax/libs/artplayer/5.3.0/artplayer.min.js',
+          // 'https://fastly.jsdelivr.net/npm/artplayer-plugin-hls-control/dist/artplayer-plugin-hls-control.min.js',
+        ],
+      }
+      const T = {
+        data: {
+          playType: playUrl.includes('dplayer') ? 'dplayer' : 'artplayer',
+          videoUrl: decodeURIComponent(playUrl),
+          dpInstance: null,
+          artInstance: null,
+        },
+        play(videoUrl, playType) {
+          if (videoUrl && videoUrl !== T.data.videoUrl) T.data.videoUrl = videoUrl;
+          if (playType && playType !== T.data.playType) T.data.playType = playType;
+          if (!['dplayer', 'artplayer'].includes(T.data.playType)) T.data.playType = 'artplayer';
+
+          if (T.data.playType === 'dplayer') {
+            return T.dplayer(T.data.videoUrl);
+          } else {
+            return T.artplayer(T.data.videoUrl);
+          }
         },
-        pluginOptions: {
-          hls: {},
+        async loadJS(url) {
+          if (Array.isArray(url)) {
+            for (const u of url) {
+              await T.loadJS(u);
+            }
+            return;
+          }
+          if (document.querySelector(`script[src="${url}"]`)) {
+            return;
+          }
+
+          return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = url;
+            script.onload = resolve;
+            script.onerror = reject;
+            document.body.appendChild(script);
+          });
+        },
+        sleep(ms) {
+          return new Promise(resolve => setTimeout(resolve, ms));
+        },
+        async dplayer(videoUrl) {
+          if (T.data.dpInstance) {
+            T.data.dpInstance.destroy();
+            T.data.dpInstance = null;
+            await T.sleep(100);
+          } else {
+            await T.loadJS(CDN_CONFIG.dplayer);
+          }
+
+          const dp = new DPlayer({
+            container: document.getElementById('dplayer'),
+            autoplay: true,
+            airplay: true,
+            theme: '#FADFA3',
+            loop: true,
+            screenshot: true,
+            hotkey: true,
+            chromecast: true,
+            preload: 'auto',
+            playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4, 8],
+            video: {
+              url: videoUrl,
+              type: 'auto',
+            },
+            pluginOptions: {
+              hls: {},
+            },
+            contextmenu: [
+              { text: '在线播放器', link: 'https://m3u8-player.lzw.me' },
+              { text: '在线下载器', link: 'https://m3u8-downloader.lzw.me' },
+            ],
+          });
+          dp.on('ended', () => {
+            console.log('[dplayer]播放完毕', videoUrl);
+            T.next_video();
+          });
+          T.data.dpInstance = dp;
+          return dp;
         },
-      });
+        /** 使用 artplayer 播放 */
+        async artplayer(videoUrl) {
+          if (T.data.artInstance) {
+            T.data.artInstance.destroy();
+            T.data.artInstance = null;
+            await T.sleep(100);
+          } else {
+            await T.loadJS(CDN_CONFIG.artplayer);
+          }
+
+          const art = new Artplayer({
+            container: document.getElementById('dplayer'),
+            url: videoUrl, // 'https://playertest.longtailvideo.com/adaptive/elephants_dream_v4/index.m3u8',
+            // airplay: true,
+            aspectRatio: true, // 是否显示视频长宽比功能
+            autoplay: true,
+            autoOrientation: true,
+            // autoMini: true, // 当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
+            autoPlayback: true,
+            // autoSize: true, // 自动调整播放器尺寸
+            fastForward: true,
+            flip: true, // 是否显示视频翻转功能
+            fullscreen: true, // 是否在底部控制栏里显示播放器 窗口全屏 按钮
+            fullscreenWeb: true, // 是否在底部控制栏里显示播放器 网页全屏 按钮
+            lock: true,
+            miniProgressBar: true,
+            pip: true, // 是否在底部控制栏里显示 画中画 的开关按钮
+            playbackRate: true, // 是否显示视频播放速度功能
+            screenshot: true,
+            setting: true,
+            theme: '#39f',
+            type: videoUrl.includes('mp4') ? 'mp4' : 'm3u8',
+            customType: {
+              m3u8: function playM3u8(video, url, art) {
+                if (Hls.isSupported()) {
+                  if (art.hls) art.hls.destroy();
+                  const hls = new Hls();
+                  hls.loadSource(url);
+                  hls.attachMedia(video);
+                  art.hls = hls;
+                  art.on('destroy', () => hls.destroy());
+                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                  video.src = url;
+                } else {
+                  art.notice.show = 'Unsupported playback format: m3u8';
+                }
+              },
+              flv: function playFlv(video, url, art) {
+                if (flvjs.isSupported()) {
+                  if (art.flv) art.flv.destroy();
+                  const flv = flvjs.createPlayer({ type: 'flv', url });
+                  flv.attachMediaElement(video);
+                  flv.load();
+                  art.flv = flv;
+                  art.on('destroy', () => flv.destroy());
+                } else {
+                  art.notice.show = 'Unsupported playback format: flv';
+                }
+              },
+            },
+            controls: [{
+              name: "previous-button",
+              index: 10,
+              position: "left",
+              html: '<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" height="22" width="22" class="icon icon-tabler icon-tabler-player-track-prev-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z" stroke-width="0" fill="currentColor"></path><path d="M9.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z" stroke-width="0" fill="currentColor"></path></svg>',
+              tooltip: "Previous",
+              click: function () {
+                T.previous_video()
+              },
+            },
+            {
+              name: "next-button",
+              index: 11,
+              position: "left",
+              html: '<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" height="22" width="22" class="icon icon-tabler icon-tabler-player-track-next-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M2 5v14c0 .86 1.012 1.318 1.659 .753l8 -7a1 1 0 0 0 0 -1.506l-8 -7c-.647 -.565 -1.659 -.106 -1.659 .753z" stroke-width="0" fill="currentColor"></path><path d="M13 5v14c0 .86 1.012 1.318 1.659 .753l8 -7a1 1 0 0 0 0 -1.506l-8 -7c-.647 -.565 -1.659 -.106 -1.659 .753z" stroke-width="0" fill="currentColor"></path></svg>',
+              tooltip: "Next",
+              click: function () {
+                T.next_video()
+              },
+            }],
+            contextmenu: [
+              { html: '在线播放器', click: () => window.open('https://m3u8-player.lzw.me', '_blank') },
+              { html: '在线下载器', click: () => window.open('https://m3u8-downloader.lzw.me', '_blank') },
+            ],
+          });
+
+          art.on('video:ended', () => {
+            console.log('[artplayer]播放完毕', videoUrl);
+            T.next_video();
+          });
+          // console.log('[artplayer]播放器初始化完成', art);
+          T.data.artInstance = art;
+          return art;
+        },
+        previous_video() {
+          T.postMessage({ action: 'previous', url: T.data.videoUrl, playType: T.data.playType });
+        },
+        next_video() {
+          T.postMessage({ action: 'next', url: T.data.videoUrl, playType: T.data.playType });
+        },
+        postMessage(message) {
+          if (window.sef === window.parent) {
+            return;
+          } else {
+            window.parent.postMessage(message, '*');
+          }
+        },
+        init() {
+          if (window.sef !== window.parent) {
+            // 监听来自父窗口的消息
+            window.addEventListener('message', (event) => {
+              const data = event.data;
+              if (!data) return;
+
+              if (typeof data === 'object' && data.url) {
+                T.data.videoUrl = data.url;
+                if (data.playType) T.data.playType = data.playType;
+                T.play();
+              }
+            });
+          }
+          return T.play();
+        }
+      };
+      T.init();
+      window.T = T;
     }
   </script>
 </body>

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@lzwme/m3u8-dl",
-  "version": "1.5.0",
-  "description": "Batch download of m3u8 files and convert to mp4",
+  "version": "1.6.0",
+  "description": "A free, open-source, and powerful m3u8 video batch downloader with multi-threaded downloading, play-while-downloading, WebUI management, video parsing, and more.",
   "main": "cjs/index.js",
   "types": "cjs/index.d.ts",
   "license": "MIT",
-  "repository": "https://github.com/lzwme/m3u8-dl.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lzwme/m3u8-dl.git"
+  },
   "author": {
     "name": "renxia",
     "email": "lzwy0820@qq.com",
@@ -13,17 +16,26 @@
   },
   "scripts": {
     "prepare": "husky || true",
-    "dev": "npm run watch",
-    "watch": "npm run build -- -- -w",
+    "dev": "concurrently \"pnpm dev:sdk\" \"pnpm dev:server\" \"pnpm dev:frontend\"",
+    "dev:sdk": "tsc -p tsconfig.cjs.json --watch",
+    "dev:frontend": "pnpm -F @lzwme/m3u8-dl-frontend dev",
+    "dev:app": "pnpm -F @lzwme/m3u8-dl-app dev",
+    "dev:server": "nodemon bin/m3u8dl.js server --debug",
     "lint:flh": "flh --eslint --tscheck --prettier",
-    "lint": "biome lint src",
-    "build": "npm run clean && npm run build:cjs",
+    "lint": "biome lint",
+    "lint:all": "biome lint && pnpm -F @lzwme/m3u8-capture lint && pnpm -F @lzwme/m3u8-dl-frontend lint",
+    "format": "biome format --write",
+    "fix": "biome check --fix",
+    "build": "npm run clean && npm run build:cjs && npm run build:frontend && npm run build:capture",
     "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:frontend": "pnpm -F @lzwme/m3u8-dl-frontend build",
+    "build:capture": "pnpm -F @lzwme/m3u8-capture build",
+    "download-cdn": "node scripts/download-cdn-resources.js",
     "doc": "typedoc src/ --exclude **/*.spec.ts --out docs --tsconfig tsconfig.module.json",
     "version": "standard-version",
     "dist": "npm run build",
     "release": "npm run dist && npm run version",
-    "clean": "flh rm -f ./cjs ./esm ./docs",
+    "clean": "flh rm -f ./cjs ./esm ./docs ./client/assets",
     "test": "npm run lint"
   },
   "bin": {
@@ -44,32 +56,33 @@
     "registry": "https://registry.npmjs.com"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.2",
-    "@eslint/js": "^9.34.0",
+    "@biomejs/biome": "^2.3.5",
+    "@eslint/js": "^9.39.1",
     "@lzwme/fed-lint-helper": "^2.6.6",
-    "@types/express": "^5.0.3",
-    "@types/m3u8-parser": "^7.2.3",
-    "@types/node": "^24.3.0",
+    "@types/express": "^5.0.5",
+    "@types/m3u8-parser": "^7.2.5",
+    "@types/node": "^24.10.0",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.41.0",
-    "@typescript-eslint/parser": "^8.41.0",
-    "eslint": "^9.34.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "express": "^5.1.0",
     "husky": "^9.1.7",
+    "nodemon": "^3.1.11",
     "prettier": "^3.6.2",
     "standard-version": "^9.5.0",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.41.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
     "ws": "^8.18.3"
   },
   "dependencies": {
-    "@lzwme/fe-utils": "^1.9.0",
-    "commander": "^14.0.0",
+    "@lzwme/fe-utils": "^1.9.2",
+    "commander": "^14.0.2",
     "console-log-colors": "^0.5.0",
     "enquirer": "^2.4.1",
-    "ffmpeg-static": "^5.2.0",
     "m3u8-parser": "^7.2.0"
   },
   "files": [

package/client/style.css

@@ -1,137 +0,0 @@
-::placeholder {
-  font-size: 14px;
-}
-
-.swal2-html-container textarea, input {
-  font-size: 16px !important;
-}
-
-#app {
-  max-width: 1400px;
-  margin: auto;
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  position: relative;
-}
-
-.sidebar {
-  background-color: #fff;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 16rem;
-  z-index: 1;
-}
-
-.download-item {
-  transition: all 0.3s ease;
-}
-
-.download-item:hover {
-  background-color: #f8f9fa;
-}
-
-.progress-bar {
-  height: 4px;
-  transition: width 0.3s ease;
-}
-
-.nav-item {
-  transition: all 0.3s ease;
-}
-
-.nav-item:hover {
-  background-color: #f0f0f0;
-  transform: translateX(4px);
-}
-
-.nav-item.active {
-  background-color: #e6f3ff;
-  color: #1890ff;
-}
-
-/* 移动端适配 */
-@media (max-width: 768px) {
-  .sidebar {
-    transform: translateX(-100%);
-  }
-
-  .sidebar.show {
-    transform: translateX(0);
-  }
-
-  .menu-toggle {
-    display: block !important;
-  }
-
-  .main-content {
-    margin-left: 0 !important;
-  }
-}
-
-.menu-toggle {
-  display: none;
-  position: fixed;
-  top: 1rem;
-  left: 1rem;
-  z-index: 51;
-  padding: 0.5rem;
-  background: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 4px #9bdff5;
-  width: 42px;
-  height: 42px;
-}
-
-.main-content {
-  transition: margin-left 0.3s ease;
-  margin-left: 16rem;
-  width: calc(100% - 16rem);
-}
-
-/* 自定义toast样式 */
-.custom-toast {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  min-width: 250px;
-  max-width: 400px;
-  padding: 15px 25px 15px 15px;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  background: #fff;
-  color: #333;
-  z-index: 99999;
-  display: flex;
-  align-items: center;
-  transform: translateX(150%);
-  transition: transform 0.3s ease;
-}
-
-.custom-toast.show {
-  transform: translateX(0);
-}
-
-.custom-toast.hide {
-  transform: translateX(150%);
-}
-
-.custom-toast-success {
-  border-left: 4px solid #28a745;
-}
-
-.custom-toast-error {
-  border-left: 4px solid #dc3545;
-}
-
-.custom-toast-warning {
-  border-left: 4px solid #ffc107;
-}
-
-.custom-toast-info {
-  border-left: 4px solid #17a2b8;
-}