更改视频下载逻辑

2025-12-09 22:31:35 +08:00
parent 24e333a705
commit 777e110bf1
9 changed files with 1311 additions and 12 deletions
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
    "hls.js": "^1.6.10",
    "lucide-react": "^0.438.0",
    "media-icons": "^1.1.5",
+    "mux.js": "^6.3.0",
    "next": "^14.2.33",
    "next-pwa": "^5.6.0",
    "next-themes": "^0.4.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
      media-icons:
        specifier: ^1.1.5
        version: 1.1.5
+      mux.js:
+        specifier: ^6.3.0
+        version: 6.3.0
      next:
        specifier: ^14.2.33
        version: 14.2.33(@babel/core@7.27.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2604,6 +2607,9 @@ packages:
  dom-serializer@2.0.0:
    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}

+  dom-walk@0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+
  domelementtype@2.3.0:
    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}

@@ -3109,6 +3115,9 @@ packages:
    resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
    engines: {node: '>=4'}

+  global@4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
+
  globals@11.12.0:
    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
    engines: {node: '>=4'}
@@ -3936,6 +3945,9 @@ packages:
    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
    engines: {node: '>=6'}

+  min-document@2.19.2:
+    resolution: {integrity: sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A==}
+
  min-indent@1.0.1:
    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
    engines: {node: '>=4'}
@@ -3987,6 +3999,11 @@ packages:
    resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
    engines: {node: '>=10'}

+  mux.js@6.3.0:
+    resolution: {integrity: sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==}
+    engines: {node: '>=8', npm: '>=5'}
+    hasBin: true
+
  mz@2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}

@@ -8277,6 +8294,8 @@ snapshots:
      domhandler: 5.0.3
      entities: 4.5.0

+  dom-walk@0.1.2: {}
+
  domelementtype@2.3.0: {}

  domexception@2.0.1:
@@ -8968,6 +8987,11 @@ snapshots:
    dependencies:
      ini: 1.3.8

+  global@4.4.0:
+    dependencies:
+      min-document: 2.19.2
+      process: 0.11.10
+
  globals@11.12.0: {}

  globals@13.24.0:
@@ -10066,6 +10090,10 @@ snapshots:

  mimic-fn@2.1.0: {}

+  min-document@2.19.2:
+    dependencies:
+      dom-walk: 0.1.2
+
  min-indent@1.0.1: {}

  mini-svg-data-uri@1.4.4: {}
@@ -10114,6 +10142,11 @@ snapshots:
      arrify: 2.0.1
      minimatch: 3.1.2

+  mux.js@6.3.0:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      global: 4.4.0
+
  mz@2.7.0:
    dependencies:
      any-promise: 1.3.0
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,6 +12,9 @@ import { SiteProvider } from '../components/SiteProvider';
 import { ThemeProvider } from '../components/ThemeProvider';
 import { WatchRoomProvider } from '../components/WatchRoomProvider';
 import ChatFloatingWindow from '../components/watch-room/ChatFloatingWindow';
+import { DownloadProvider } from '../contexts/DownloadContext';
+import { DownloadBubble } from '../components/DownloadBubble';
+import { DownloadPanel } from '../components/DownloadPanel';

 const inter = Inter({ subsets: ['latin'] });
 export const dynamic = 'force-dynamic';
@@ -124,9 +127,13 @@ export default async function RootLayout({
        >
          <SiteProvider siteName={siteName} announcement={announcement}>
            <WatchRoomProvider>
-              {children}
-              <GlobalErrorIndicator />
-              <ChatFloatingWindow />
+              <DownloadProvider>
+                {children}
+                <GlobalErrorIndicator />
+                <ChatFloatingWindow />
+                <DownloadBubble />
+                <DownloadPanel />
+              </DownloadProvider>
            </WatchRoomProvider>
          </SiteProvider>
        </ThemeProvider>
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -8,6 +8,7 @@ import { Suspense, useEffect, useRef, useState } from 'react';

 import { usePlaySync } from '@/hooks/usePlaySync';
 import { getDoubanDetail } from '@/lib/douban.client';
+import { useDownload } from '@/contexts/DownloadContext';

 import {
  deleteFavorite,
@@ -64,6 +65,7 @@ function PlayPageClient() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const enableComments = useEnableComments();
+  const { addDownloadTask } = useDownload();

  // 获取 Proxy M3U8 Token
  const proxyToken = typeof window !== 'undefined' ? process.env.NEXT_PUBLIC_PROXY_M3U8_TOKEN || '' : '';
@@ -3577,7 +3579,7 @@ function PlayPageClient() {
                      <div className='flex gap-1.5 lg:flex-wrap'>
                        {/* 下载按钮 */}
                        <button
-                          onClick={(e) => {
+                          onClick={async (e) => {
                            e.preventDefault();
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
@@ -3587,18 +3589,19 @@ function PlayPageClient() {
                            const isM3u8 = videoUrl.toLowerCase().includes('.m3u8') || videoUrl.toLowerCase().includes('/m3u8/');

                            if (isM3u8) {
-                              // M3U8格式 - 复制链接并提示
-                              navigator.clipboard.writeText(proxyUrl).then(() => {
+                              // M3U8格式 - 使用新的下载器，TS 格式
+                              try {
+                                const downloadTitle = `${videoTitle}_第${currentEpisodeIndex + 1}集`;
+                                await addDownloadTask(proxyUrl, downloadTitle, 'TS');
                                if (artPlayerRef.current) {
-                                  artPlayerRef.current.notice.show = externalPlayerAdBlock
-                                    ? '代理链接已复制(含去广告)！请使用 FFmpeg、N_m3u8DL-CLI 或 Downie 等工具下载'
-                                    : '链接已复制！请使用 FFmpeg、N_m3u8DL-CLI 或 Downie 等工具下载';
+                                  artPlayerRef.current.notice.show = '已添加到下载队列！下载完成后可重命名为 .mp4';
                                }
-                              }).catch(() => {
+                              } catch (error) {
+                                console.error('添加下载任务失败:', error);
                                if (artPlayerRef.current) {
-                                  artPlayerRef.current.notice.show = '复制失败，请手动复制链接';
+                                  artPlayerRef.current.notice.show = '添加下载失败，请重试';
                                }
-                              });
+                              }
                            } else {
                              // 普通视频格式 - 直接下载
                              const a = document.createElement('a');
@@ -3635,6 +3638,48 @@ function PlayPageClient() {
                          </span>
                        </button>

+                        {/* IDM 下载按钮 */}
+                        <button
+                          onClick={(e) => {
+                            e.preventDefault();
+                            // 使用代理 URL
+                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
+                            const proxyUrl = externalPlayerAdBlock
+                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(videoUrl)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
+                              : videoUrl;
+
+                            // 复制链接到剪贴板
+                            navigator.clipboard.writeText(proxyUrl).then(() => {
+                              if (artPlayerRef.current) {
+                                artPlayerRef.current.notice.show = '链接已复制！请在 IDM 中粘贴下载';
+                              }
+                            }).catch(() => {
+                              if (artPlayerRef.current) {
+                                artPlayerRef.current.notice.show = '复制失败，请手动复制链接';
+                              }
+                            });
+                          }}
+                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-orange-400 flex-shrink-0'
+                          title='IDM 下载'
+                        >
+                          <svg
+                            className='w-4 h-4 flex-shrink-0 text-white'
+                            fill='none'
+                            stroke='currentColor'
+                            viewBox='0 0 24 24'
+                          >
+                            <path
+                              strokeLinecap='round'
+                              strokeLinejoin='round'
+                              strokeWidth='2'
+                              d='M13 10V3L4 14h7v7l9-11h-7z'
+                            />
+                          </svg>
+                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
+                            IDM
+                          </span>
+                        </button>
+
                        {/* PotPlayer */}
                        <button
                          onClick={(e) => {
--- a/src/components/DownloadBubble.tsx
+++ b/src/components/DownloadBubble.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { useDownload } from '@/contexts/DownloadContext';
+
+export function DownloadBubble() {
+  const { tasks, downloadingCount, setShowDownloadPanel } = useDownload();
+
+  if (tasks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='fixed bottom-6 right-6 z-[9998]'>
+      <button
+        onClick={() => setShowDownloadPanel(true)}
+        className='relative group bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110'
+      >
+        {/* 下载图标 */}
+        <svg
+          className='w-6 h-6'
+          fill='none'
+          stroke='currentColor'
+          viewBox='0 0 24 24'
+        >
+          <path
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            strokeWidth='2'
+            d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
+          />
+        </svg>
+
+        {/* 下载中数量徽章 */}
+        {downloadingCount > 0 && (
+          <div className='absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center animate-pulse'>
+            {downloadingCount}
+          </div>
+        )}
+
+        {/* 悬停提示 */}
+        <div className='absolute bottom-full right-0 mb-2 hidden group-hover:block'>
+          <div className='bg-gray-900 text-white text-sm rounded-lg py-2 px-3 whitespace-nowrap'>
+            {downloadingCount > 0 ? `${downloadingCount} 个任务下载中` : '查看下载任务'}
+            <div className='absolute top-full right-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900'></div>
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+}
--- a/src/components/DownloadPanel.tsx
+++ b/src/components/DownloadPanel.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import React from 'react';
+import { useDownload } from '@/contexts/DownloadContext';
+import { M3U8DownloadTask } from '@/lib/m3u8-downloader';
+
+export function DownloadPanel() {
+  const { tasks, showDownloadPanel, setShowDownloadPanel, startTask, pauseTask, cancelTask, getProgress } = useDownload();
+
+  if (!showDownloadPanel) {
+    return null;
+  }
+
+  const getStatusText = (status: M3U8DownloadTask['status']) => {
+    switch (status) {
+      case 'ready':
+        return '等待中';
+      case 'downloading':
+        return '下载中';
+      case 'pause':
+        return '已暂停';
+      case 'done':
+        return '已完成';
+      case 'error':
+        return '错误';
+      default:
+        return '未知';
+    }
+  };
+
+  const getStatusColor = (status: M3U8DownloadTask['status']) => {
+    switch (status) {
+      case 'ready':
+        return 'text-gray-500';
+      case 'downloading':
+        return 'text-blue-500';
+      case 'pause':
+        return 'text-yellow-500';
+      case 'done':
+        return 'text-green-500';
+      case 'error':
+        return 'text-red-500';
+      default:
+        return 'text-gray-500';
+    }
+  };
+
+  return (
+    <div className='fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm'>
+      <div className='bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-full max-w-4xl max-h-[80vh] flex flex-col'>
+        {/* 标题栏 */}
+        <div className='flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700'>
+          <h2 className='text-xl font-bold text-gray-900 dark:text-white'>下载任务列表</h2>
+          <button
+            onClick={() => setShowDownloadPanel(false)}
+            className='text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors'
+          >
+            <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
+            </svg>
+          </button>
+        </div>
+
+        {/* 任务列表 */}
+        <div className='flex-1 overflow-y-auto p-4 space-y-3'>
+          {tasks.length === 0 ? (
+            <div className='flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400'>
+              <svg className='w-16 h-16 mb-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='2'
+                  d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'
+                />
+              </svg>
+              <p className='text-lg'>暂无下载任务</p>
+            </div>
+          ) : (
+            tasks.map((task) => {
+              const progress = getProgress(task.id);
+              return (
+                <div
+                  key={task.id}
+                  className='bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600'
+                >
+                  {/* 任务信息 */}
+                  <div className='flex items-start justify-between mb-3'>
+                    <div className='flex-1 min-w-0'>
+                      <h3 className='text-sm font-medium text-gray-900 dark:text-white truncate mb-1'>
+                        {task.title}
+                      </h3>
+                      <p className='text-xs text-gray-500 dark:text-gray-400 truncate'>{task.url}</p>
+                    </div>
+                    <div className='flex items-center gap-2 ml-4'>
+                      <span className={`text-xs font-medium ${getStatusColor(task.status)}`}>
+                        {getStatusText(task.status)}
+                      </span>
+                      <span className='text-xs text-gray-500 dark:text-gray-400'>
+                        {task.type}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* 进度条 */}
+                  <div className='mb-3'>
+                    <div className='flex items-center justify-between text-xs text-gray-600 dark:text-gray-300 mb-1'>
+                      <span>
+                        {task.finishNum} / {task.rangeDownload.targetSegment} 片段
+                      </span>
+                      <span>{progress.toFixed(1)}%</span>
+                    </div>
+                    <div className='w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 overflow-hidden'>
+                      <div
+                        className={`h-full rounded-full transition-all duration-300 ${
+                          task.status === 'downloading'
+                            ? 'bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse'
+                            : task.status === 'done'
+                            ? 'bg-green-500'
+                            : task.status === 'error'
+                            ? 'bg-red-500'
+                            : 'bg-gray-400'
+                        }`}
+                        style={{ width: `${progress}%` }}
+                      ></div>
+                    </div>
+                  </div>
+
+                  {/* 错误信息 */}
+                  {task.errorNum > 0 && (
+                    <div className='mb-3 text-xs text-red-500 dark:text-red-400'>
+                      {task.errorNum} 个片段下载失败
+                    </div>
+                  )}
+
+                  {/* 操作按钮 */}
+                  <div className='flex items-center gap-2'>
+                    {task.status === 'downloading' && (
+                      <button
+                        onClick={() => pauseTask(task.id)}
+                        className='flex items-center gap-1 px-3 py-1.5 bg-yellow-500 hover:bg-yellow-600 text-white text-xs font-medium rounded transition-colors'
+                      >
+                        <svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M10 9v6m4-6v6' />
+                        </svg>
+                        暂停
+                      </button>
+                    )}
+
+                    {(task.status === 'pause' || task.status === 'ready' || task.status === 'error') && (
+                      <button
+                        onClick={() => startTask(task.id)}
+                        className='flex items-center gap-1 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded transition-colors'
+                      >
+                        <svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z' />
+                          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
+                        </svg>
+                        {task.status === 'error' ? '重试' : '开始'}
+                      </button>
+                    )}
+
+                    <button
+                      onClick={() => cancelTask(task.id)}
+                      className='flex items-center gap-1 px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded transition-colors'
+                    >
+                      <svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' />
+                      </svg>
+                      删除
+                    </button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* 底部统计 */}
+        {tasks.length > 0 && (
+          <div className='p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30'>
+            <div className='flex items-center justify-between text-sm text-gray-600 dark:text-gray-300'>
+              <span>总任务数: {tasks.length}</span>
+              <span>下载中: {tasks.filter(t => t.status === 'downloading').length}</span>
+              <span>已完成: {tasks.filter(t => t.status === 'done').length}</span>
+              <span>已暂停: {tasks.filter(t => t.status === 'pause').length}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/contexts/DownloadContext.tsx
+++ b/src/contexts/DownloadContext.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { M3U8Downloader, M3U8DownloadTask } from '@/lib/m3u8-downloader';
+
+interface DownloadContextType {
+  downloader: M3U8Downloader;
+  tasks: M3U8DownloadTask[];
+  addDownloadTask: (url: string, title: string, type?: 'TS' | 'MP4') => Promise<void>;
+  startTask: (taskId: string) => void;
+  pauseTask: (taskId: string) => void;
+  cancelTask: (taskId: string) => void;
+  getProgress: (taskId: string) => number;
+  downloadingCount: number;
+  showDownloadPanel: boolean;
+  setShowDownloadPanel: (show: boolean) => void;
+}
+
+const DownloadContext = createContext<DownloadContextType | undefined>(undefined);
+
+export function DownloadProvider({ children }: { children: React.ReactNode }) {
+  const [downloader] = useState(() => new M3U8Downloader({
+    onProgress: (task) => {
+      setTasks(downloader.getAllTasks());
+    },
+    onComplete: (task) => {
+      setTasks(downloader.getAllTasks());
+    },
+    onError: (task, error) => {
+      console.error('下载错误:', error);
+      setTasks(downloader.getAllTasks());
+    },
+  }));
+
+  const [tasks, setTasks] = useState<M3U8DownloadTask[]>([]);
+  const [showDownloadPanel, setShowDownloadPanel] = useState(false);
+
+  const addDownloadTask = useCallback(async (url: string, title: string, type: 'TS' | 'MP4' = 'TS') => {
+    try {
+      const taskId = await downloader.createTask(url, title, type);
+      setTasks(downloader.getAllTasks());
+      await downloader.startTask(taskId);
+      setTasks(downloader.getAllTasks());
+    } catch (error) {
+      console.error('添加下载任务失败:', error);
+      throw error;
+    }
+  }, [downloader]);
+
+  const startTask = useCallback((taskId: string) => {
+    downloader.startTask(taskId);
+    setTasks(downloader.getAllTasks());
+  }, [downloader]);
+
+  const pauseTask = useCallback((taskId: string) => {
+    downloader.pauseTask(taskId);
+    setTasks(downloader.getAllTasks());
+  }, [downloader]);
+
+  const cancelTask = useCallback((taskId: string) => {
+    downloader.cancelTask(taskId);
+    setTasks(downloader.getAllTasks());
+  }, [downloader]);
+
+  const getProgress = useCallback((taskId: string) => {
+    return downloader.getProgress(taskId);
+  }, [downloader]);
+
+  const downloadingCount = tasks.filter(t => t.status === 'downloading').length;
+
+  return (
+    <DownloadContext.Provider
+      value={{
+        downloader,
+        tasks,
+        addDownloadTask,
+        startTask,
+        pauseTask,
+        cancelTask,
+        getProgress,
+        downloadingCount,
+        showDownloadPanel,
+        setShowDownloadPanel,
+      }}
+    >
+      {children}
+    </DownloadContext.Provider>
+  );
+}
+
+export function useDownload() {
+  const context = useContext(DownloadContext);
+  if (context === undefined) {
+    throw new Error('useDownload must be used within a DownloadProvider');
+  }
+  return context;
+}
--- a/src/lib/aes-decryptor.ts
+++ b/src/lib/aes-decryptor.ts
@@ -0,0 +1,315 @@
+/**
+ * AES 解密器
+ * 代码来自 hls.js: https://github.com/video-dev/hls.js
+ */
+
+function removePadding(buffer: ArrayBuffer): ArrayBuffer {
+  const outputBytes = buffer.byteLength;
+  const paddingBytes = outputBytes && new DataView(buffer).getUint8(outputBytes - 1);
+  if (paddingBytes) {
+    return buffer.slice(0, outputBytes - paddingBytes);
+  } else {
+    return buffer;
+  }
+}
+
+export class AESDecryptor {
+  private rcon: number[];
+  private subMix: Uint32Array[];
+  private invSubMix: Uint32Array[];
+  private sBox: Uint32Array;
+  private invSBox: Uint32Array;
+  private key: Uint32Array;
+  private keySize?: number;
+  private ksRows?: number;
+  private keySchedule?: Uint32Array;
+  private invKeySchedule?: Uint32Array;
+
+  constructor() {
+    this.rcon = [0x0, 0x1, 0x2, 0x4, 0x8, 0x10, 0x20, 0x40, 0x80, 0x1b, 0x36];
+    this.subMix = [new Uint32Array(256), new Uint32Array(256), new Uint32Array(256), new Uint32Array(256)];
+    this.invSubMix = [new Uint32Array(256), new Uint32Array(256), new Uint32Array(256), new Uint32Array(256)];
+    this.sBox = new Uint32Array(256);
+    this.invSBox = new Uint32Array(256);
+    this.key = new Uint32Array(0);
+
+    this.initTable();
+  }
+
+  private uint8ArrayToUint32Array_(arrayBuffer: ArrayBuffer): Uint32Array {
+    const view = new DataView(arrayBuffer);
+    const newArray = new Uint32Array(4);
+    for (let i = 0; i < 4; i++) {
+      newArray[i] = view.getUint32(i * 4);
+    }
+    return newArray;
+  }
+
+  private initTable(): void {
+    const sBox = this.sBox;
+    const invSBox = this.invSBox;
+    const subMix = this.subMix;
+    const subMix0 = subMix[0];
+    const subMix1 = subMix[1];
+    const subMix2 = subMix[2];
+    const subMix3 = subMix[3];
+    const invSubMix = this.invSubMix;
+    const invSubMix0 = invSubMix[0];
+    const invSubMix1 = invSubMix[1];
+    const invSubMix2 = invSubMix[2];
+    const invSubMix3 = invSubMix[3];
+
+    const d = new Uint32Array(256);
+    let x = 0;
+    let xi = 0;
+    let i = 0;
+
+    for (i = 0; i < 256; i++) {
+      if (i < 128) {
+        d[i] = i << 1;
+      } else {
+        d[i] = (i << 1) ^ 0x11b;
+      }
+    }
+
+    for (i = 0; i < 256; i++) {
+      let sx = xi ^ (xi << 1) ^ (xi << 2) ^ (xi << 3) ^ (xi << 4);
+      sx = (sx >>> 8) ^ (sx & 0xff) ^ 0x63;
+      sBox[x] = sx;
+      invSBox[sx] = x;
+
+      const x2 = d[x];
+      const x4 = d[x2];
+      const x8 = d[x4];
+
+      let t = (d[sx] * 0x101) ^ (sx * 0x1010100);
+      subMix0[x] = (t << 24) | (t >>> 8);
+      subMix1[x] = (t << 16) | (t >>> 16);
+      subMix2[x] = (t << 8) | (t >>> 24);
+      subMix3[x] = t;
+
+      t = (x8 * 0x1010101) ^ (x4 * 0x10001) ^ (x2 * 0x101) ^ (x * 0x1010100);
+      invSubMix0[sx] = (t << 24) | (t >>> 8);
+      invSubMix1[sx] = (t << 16) | (t >>> 16);
+      invSubMix2[sx] = (t << 8) | (t >>> 24);
+      invSubMix3[sx] = t;
+
+      if (!x) {
+        x = xi = 1;
+      } else {
+        x = x2 ^ d[d[d[x8 ^ x2]]];
+        xi ^= d[d[xi]];
+      }
+    }
+  }
+
+  expandKey(keyBuffer: ArrayBuffer): void {
+    const key = this.uint8ArrayToUint32Array_(keyBuffer);
+    let sameKey = true;
+    let offset = 0;
+
+    while (offset < key.length && sameKey) {
+      sameKey = key[offset] === this.key[offset];
+      offset++;
+    }
+
+    if (sameKey) {
+      return;
+    }
+
+    this.key = key;
+    const keySize = (this.keySize = key.length);
+
+    if (keySize !== 4 && keySize !== 6 && keySize !== 8) {
+      throw new Error('Invalid aes key size=' + keySize);
+    }
+
+    const ksRows = (this.ksRows = (keySize + 6 + 1) * 4);
+    let ksRow;
+    let invKsRow;
+
+    const keySchedule = (this.keySchedule = new Uint32Array(ksRows));
+    const invKeySchedule = (this.invKeySchedule = new Uint32Array(ksRows));
+    const sbox = this.sBox;
+    const rcon = this.rcon;
+
+    const invSubMix = this.invSubMix;
+    const invSubMix0 = invSubMix[0];
+    const invSubMix1 = invSubMix[1];
+    const invSubMix2 = invSubMix[2];
+    const invSubMix3 = invSubMix[3];
+
+    let prev;
+    let t;
+
+    for (ksRow = 0; ksRow < ksRows; ksRow++) {
+      if (ksRow < keySize) {
+        prev = keySchedule[ksRow] = key[ksRow];
+        continue;
+      }
+      t = prev;
+
+      if (ksRow % keySize === 0) {
+        t = (t << 8) | (t >>> 24);
+        t = (sbox[t >>> 24] << 24) | (sbox[(t >>> 16) & 0xff] << 16) | (sbox[(t >>> 8) & 0xff] << 8) | sbox[t & 0xff];
+        t ^= rcon[(ksRow / keySize) | 0] << 24;
+      } else if (keySize > 6 && ksRow % keySize === 4) {
+        t = (sbox[t >>> 24] << 24) | (sbox[(t >>> 16) & 0xff] << 16) | (sbox[(t >>> 8) & 0xff] << 8) | sbox[t & 0xff];
+      }
+
+      keySchedule[ksRow] = prev = (keySchedule[ksRow - keySize] ^ t) >>> 0;
+    }
+
+    for (invKsRow = 0; invKsRow < ksRows; invKsRow++) {
+      ksRow = ksRows - invKsRow;
+      if (invKsRow & 3) {
+        t = keySchedule[ksRow];
+      } else {
+        t = keySchedule[ksRow - 4];
+      }
+
+      if (invKsRow < 4 || ksRow <= 4) {
+        invKeySchedule[invKsRow] = t;
+      } else {
+        invKeySchedule[invKsRow] =
+          invSubMix0[sbox[t >>> 24]] ^
+          invSubMix1[sbox[(t >>> 16) & 0xff]] ^
+          invSubMix2[sbox[(t >>> 8) & 0xff]] ^
+          invSubMix3[sbox[t & 0xff]];
+      }
+
+      invKeySchedule[invKsRow] = invKeySchedule[invKsRow] >>> 0;
+    }
+  }
+
+  private networkToHostOrderSwap(word: number): number {
+    return (word << 24) | ((word & 0xff00) << 8) | ((word & 0xff0000) >> 8) | (word >>> 24);
+  }
+
+  decrypt(inputArrayBuffer: ArrayBuffer, offset: number, aesIV: ArrayBuffer, removePKCS7Padding: boolean): ArrayBuffer {
+    if (!this.keySize || !this.ksRows || !this.keySchedule || !this.invKeySchedule) {
+      throw new Error('AES key not expanded');
+    }
+
+    const nRounds = this.keySize + 6;
+    const invKeySchedule = this.invKeySchedule;
+    const invSBOX = this.invSBox;
+
+    const invSubMix = this.invSubMix;
+    const invSubMix0 = invSubMix[0];
+    const invSubMix1 = invSubMix[1];
+    const invSubMix2 = invSubMix[2];
+    const invSubMix3 = invSubMix[3];
+
+    const initVector = this.uint8ArrayToUint32Array_(aesIV);
+    let initVector0 = initVector[0];
+    let initVector1 = initVector[1];
+    let initVector2 = initVector[2];
+    let initVector3 = initVector[3];
+
+    const inputInt32 = new Int32Array(inputArrayBuffer);
+    const outputInt32 = new Int32Array(inputInt32.length);
+
+    let t0, t1, t2, t3;
+    let s0, s1, s2, s3;
+    let inputWords0, inputWords1, inputWords2, inputWords3;
+
+    let ksRow, i;
+    const swapWord = this.networkToHostOrderSwap;
+
+    while (offset < inputInt32.length) {
+      inputWords0 = swapWord(inputInt32[offset]);
+      inputWords1 = swapWord(inputInt32[offset + 1]);
+      inputWords2 = swapWord(inputInt32[offset + 2]);
+      inputWords3 = swapWord(inputInt32[offset + 3]);
+
+      s0 = inputWords0 ^ invKeySchedule[0];
+      s1 = inputWords3 ^ invKeySchedule[1];
+      s2 = inputWords2 ^ invKeySchedule[2];
+      s3 = inputWords1 ^ invKeySchedule[3];
+
+      ksRow = 4;
+
+      for (i = 1; i < nRounds; i++) {
+        t0 =
+          invSubMix0[s0 >>> 24] ^
+          invSubMix1[(s1 >> 16) & 0xff] ^
+          invSubMix2[(s2 >> 8) & 0xff] ^
+          invSubMix3[s3 & 0xff] ^
+          invKeySchedule[ksRow];
+        t1 =
+          invSubMix0[s1 >>> 24] ^
+          invSubMix1[(s2 >> 16) & 0xff] ^
+          invSubMix2[(s3 >> 8) & 0xff] ^
+          invSubMix3[s0 & 0xff] ^
+          invKeySchedule[ksRow + 1];
+        t2 =
+          invSubMix0[s2 >>> 24] ^
+          invSubMix1[(s3 >> 16) & 0xff] ^
+          invSubMix2[(s0 >> 8) & 0xff] ^
+          invSubMix3[s1 & 0xff] ^
+          invKeySchedule[ksRow + 2];
+        t3 =
+          invSubMix0[s3 >>> 24] ^
+          invSubMix1[(s0 >> 16) & 0xff] ^
+          invSubMix2[(s1 >> 8) & 0xff] ^
+          invSubMix3[s2 & 0xff] ^
+          invKeySchedule[ksRow + 3];
+
+        s0 = t0;
+        s1 = t1;
+        s2 = t2;
+        s3 = t3;
+
+        ksRow = ksRow + 4;
+      }
+
+      t0 =
+        ((invSBOX[s0 >>> 24] << 24) ^
+          (invSBOX[(s1 >> 16) & 0xff] << 16) ^
+          (invSBOX[(s2 >> 8) & 0xff] << 8) ^
+          invSBOX[s3 & 0xff]) ^
+        invKeySchedule[ksRow];
+      t1 =
+        ((invSBOX[s1 >>> 24] << 24) ^
+          (invSBOX[(s2 >> 16) & 0xff] << 16) ^
+          (invSBOX[(s3 >> 8) & 0xff] << 8) ^
+          invSBOX[s0 & 0xff]) ^
+        invKeySchedule[ksRow + 1];
+      t2 =
+        ((invSBOX[s2 >>> 24] << 24) ^
+          (invSBOX[(s3 >> 16) & 0xff] << 16) ^
+          (invSBOX[(s0 >> 8) & 0xff] << 8) ^
+          invSBOX[s1 & 0xff]) ^
+        invKeySchedule[ksRow + 2];
+      t3 =
+        ((invSBOX[s3 >>> 24] << 24) ^
+          (invSBOX[(s0 >> 16) & 0xff] << 16) ^
+          (invSBOX[(s1 >> 8) & 0xff] << 8) ^
+          invSBOX[s2 & 0xff]) ^
+        invKeySchedule[ksRow + 3];
+
+      outputInt32[offset] = swapWord(t0 ^ initVector0);
+      outputInt32[offset + 1] = swapWord(t3 ^ initVector1);
+      outputInt32[offset + 2] = swapWord(t2 ^ initVector2);
+      outputInt32[offset + 3] = swapWord(t1 ^ initVector3);
+
+      initVector0 = inputWords0;
+      initVector1 = inputWords1;
+      initVector2 = inputWords2;
+      initVector3 = inputWords3;
+
+      offset = offset + 4;
+    }
+
+    return removePKCS7Padding ? removePadding(outputInt32.buffer) : outputInt32.buffer;
+  }
+
+  destroy(): void {
+    this.key = new Uint32Array(0);
+    this.keySize = undefined;
+    this.ksRows = undefined;
+    this.keySchedule = undefined;
+    this.invKeySchedule = undefined;
+  }
+}
--- a/src/lib/m3u8-downloader.ts
+++ b/src/lib/m3u8-downloader.ts
@@ -0,0 +1,558 @@
+/**
+ * M3U8 下载器核心逻辑
+ * 基于 M3U8Download 项目改造为 TypeScript 版本
+ */
+
+import { AESDecryptor } from './aes-decryptor';
+// @ts-ignore - mux.js 没有类型定义
+import * as muxjs from 'mux.js';
+
+export interface M3U8DownloadTask {
+  id: string;
+  url: string;
+  title: string;
+  type: 'TS' | 'MP4';
+  status: 'ready' | 'downloading' | 'pause' | 'done' | 'error';
+  finishList: Array<{ title: string; status: '' | 'is-downloading' | 'is-success' | 'is-error' }>;
+  tsUrlList: string[];
+  requests: XMLHttpRequest[];
+  mediaFileList: ArrayBuffer[];
+  downloadIndex: number;
+  downloading: boolean;
+  durationSecond: number;
+  beginTime: Date;
+  errorNum: number;
+  finishNum: number;
+  retryNum: number;
+  retryCountdown: number;
+  rangeDownload: {
+    isShowRange: boolean;
+    startSegment: number;
+    endSegment: number;
+    targetSegment: number;
+  };
+  aesConf: {
+    method: string;
+    uri: string;
+    iv: Uint8Array | null;
+    key: ArrayBuffer | null;
+    decryption: AESDecryptor | null;
+  };
+}
+
+export interface M3U8DownloaderOptions {
+  onProgress?: (task: M3U8DownloadTask) => void;
+  onComplete?: (task: M3U8DownloadTask) => void;
+  onError?: (task: M3U8DownloadTask, error: string) => void;
+}
+
+export class M3U8Downloader {
+  private tasks: Map<string, M3U8DownloadTask> = new Map();
+  private currentTask: M3U8DownloadTask | null = null;
+  private options: M3U8DownloaderOptions;
+
+  constructor(options: M3U8DownloaderOptions = {}) {
+    this.options = options;
+  }
+
+  /**
+   * 创建下载任务
+   */
+  async createTask(url: string, title: string, type: 'TS' | 'MP4' = 'TS'): Promise<string> {
+    const taskId = 't_' + Date.now() + Math.random().toString(36).substr(2, 9);
+
+    try {
+      // 获取 m3u8 文件内容
+      const m3u8Content = await this.fetchM3U8(url);
+
+      if (!m3u8Content.startsWith('#EXTM3U')) {
+        throw new Error('无效的 m3u8 链接');
+      }
+
+      // 检查是否是主播放列表
+      if (this.isMasterPlaylist(m3u8Content)) {
+        const streams = this.parseStreamInfo(m3u8Content, url);
+        if (streams.length > 0) {
+          // 自动选择最高清晰度
+          url = streams[0].url;
+          const subM3u8Content = await this.fetchM3U8(url);
+          return this.processM3U8Content(taskId, url, title, type, subM3u8Content);
+        }
+      }
+
+      return this.processM3U8Content(taskId, url, title, type, m3u8Content);
+    } catch (error) {
+      throw new Error(`创建任务失败: ${error}`);
+    }
+  }
+
+  /**
+   * 处理 M3U8 内容
+   */
+  private processM3U8Content(
+    taskId: string,
+    url: string,
+    title: string,
+    type: 'TS' | 'MP4',
+    m3u8Content: string
+  ): string {
+    const task: M3U8DownloadTask = {
+      id: taskId,
+      url,
+      title,
+      type,
+      status: 'ready',
+      finishList: [],
+      tsUrlList: [],
+      requests: [],
+      mediaFileList: [],
+      downloadIndex: 0,
+      downloading: false,
+      durationSecond: 0,
+      beginTime: new Date(),
+      errorNum: 0,
+      finishNum: 0,
+      retryNum: 3,
+      retryCountdown: 0,
+      rangeDownload: {
+        isShowRange: false,
+        startSegment: 1,
+        endSegment: 0,
+        targetSegment: 0,
+      },
+      aesConf: {
+        method: '',
+        uri: '',
+        iv: null,
+        key: null,
+        decryption: null,
+      },
+    };
+
+    // 解析 TS 片段
+    const lines = m3u8Content.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+
+      if (line.startsWith('#EXTINF:')) {
+        const duration = parseFloat(line.split('#EXTINF:')[1]);
+        task.durationSecond += duration;
+      } else if (line.startsWith('#EXT-X-KEY')) {
+        const keyMatch = line.match(/METHOD=([^,]+)(?:,URI="([^"]+)")?(?:,IV=([^,]+))?/);
+        if (keyMatch) {
+          task.aesConf.method = keyMatch[1];
+          task.aesConf.uri = keyMatch[2] ? this.applyURL(keyMatch[2], url) : '';
+          task.aesConf.iv = keyMatch[3] ? this.parseIV(keyMatch[3]) : null;
+        }
+      } else if (line && !line.startsWith('#')) {
+        task.tsUrlList.push(this.applyURL(line, url));
+        task.finishList.push({ title: line, status: '' });
+      }
+    }
+
+    task.rangeDownload.endSegment = task.tsUrlList.length;
+    task.rangeDownload.targetSegment = task.tsUrlList.length;
+
+    this.tasks.set(taskId, task);
+    return taskId;
+  }
+
+  /**
+   * 开始下载任务
+   */
+  async startTask(taskId: string): Promise<void> {
+    const task = this.tasks.get(taskId);
+    if (!task) {
+      throw new Error('任务不存在');
+    }
+
+    if (task.status === 'downloading') {
+      return;
+    }
+
+    // 如果需要 AES 解密，先获取密钥
+    if (task.aesConf.method && task.aesConf.method !== 'NONE' && !task.aesConf.key) {
+      await this.getAESKey(task);
+    }
+
+    task.status = 'downloading';
+    this.currentTask = task;
+    this.downloadTS(task);
+  }
+
+  /**
+   * 暂停任务
+   */
+  pauseTask(taskId: string): void {
+    const task = this.tasks.get(taskId);
+    if (!task) return;
+
+    task.status = 'pause';
+    this.abortRequests(task);
+  }
+
+  /**
+   * 取消任务
+   */
+  cancelTask(taskId: string): void {
+    const task = this.tasks.get(taskId);
+    if (!task) return;
+
+    this.abortRequests(task);
+    this.tasks.delete(taskId);
+
+    if (this.currentTask?.id === taskId) {
+      this.currentTask = null;
+    }
+  }
+
+  /**
+   * 获取任务信息
+   */
+  getTask(taskId: string): M3U8DownloadTask | undefined {
+    return this.tasks.get(taskId);
+  }
+
+  /**
+   * 获取所有任务
+   */
+  getAllTasks(): M3U8DownloadTask[] {
+    return Array.from(this.tasks.values());
+  }
+
+  /**
+   * 获取下载进度
+   */
+  getProgress(taskId: string): number {
+    const task = this.tasks.get(taskId);
+    if (!task) return 0;
+
+    if (task.rangeDownload.targetSegment === 0) return 0;
+    return (task.finishNum / task.rangeDownload.targetSegment) * 100;
+  }
+
+  /**
+   * 下载 TS 片段
+   */
+  private downloadTS(task: M3U8DownloadTask): void {
+    const download = () => {
+      const isPause = task.status === 'pause';
+      const index = task.downloadIndex;
+
+      if (index >= task.rangeDownload.endSegment || isPause) {
+        return;
+      }
+
+      task.downloadIndex++;
+
+      if (task.finishList[index] && task.finishList[index].status === '') {
+        task.finishList[index].status = 'is-downloading';
+
+        const xhr = new XMLHttpRequest();
+        xhr.responseType = 'arraybuffer';
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4) {
+            if (xhr.status >= 200 && xhr.status < 300) {
+              this.dealTS(task, xhr.response, index, () => {
+                if (task.downloadIndex < task.rangeDownload.endSegment && !isPause) {
+                  download();
+                }
+              });
+            } else {
+              task.errorNum++;
+              task.finishList[index].status = 'is-error';
+              this.options.onError?.(task, `片段 ${index} 下载失败`);
+
+              if (task.downloadIndex < task.rangeDownload.endSegment) {
+                !isPause && download();
+              }
+            }
+          }
+        };
+
+        xhr.open('GET', task.tsUrlList[index], true);
+        xhr.send();
+        task.requests.push(xhr);
+      } else if (task.downloadIndex < task.rangeDownload.endSegment) {
+        !isPause && download();
+      }
+    };
+
+    // 并发下载 6 个片段
+    const concurrency = Math.min(6, task.rangeDownload.targetSegment - task.finishNum);
+    for (let i = 0; i < concurrency; i++) {
+      download();
+    }
+  }
+
+  /**
+   * 处理 TS 片段
+   */
+  private dealTS(
+    task: M3U8DownloadTask,
+    file: ArrayBuffer,
+    index: number,
+    callback: () => void
+  ): void {
+    let data = file;
+
+    // AES 解密
+    if (task.aesConf.key) {
+      data = this.aesDecrypt(task, data, index);
+    }
+
+    // MP4 转码（如果需要）
+    if (task.type === 'MP4') {
+      this.conversionMp4(task, data, index, (convertedData) => {
+        task.mediaFileList[index - task.rangeDownload.startSegment + 1] = convertedData;
+        task.finishList[index].status = 'is-success';
+        task.finishNum++;
+
+        this.options.onProgress?.(task);
+
+        if (task.finishNum === task.rangeDownload.targetSegment) {
+          task.status = 'done';
+          this.downloadFile(task);
+          this.options.onComplete?.(task);
+        }
+
+        callback();
+      });
+    } else {
+      task.mediaFileList[index - task.rangeDownload.startSegment + 1] = data;
+      task.finishList[index].status = 'is-success';
+      task.finishNum++;
+
+      this.options.onProgress?.(task);
+
+      if (task.finishNum === task.rangeDownload.targetSegment) {
+        task.status = 'done';
+        this.downloadFile(task);
+        this.options.onComplete?.(task);
+      }
+
+      callback();
+    }
+  }
+
+  /**
+   * 下载文件
+   */
+  private downloadFile(task: M3U8DownloadTask): void {
+    const fileBlob = new Blob(task.mediaFileList, {
+      type: task.type === 'MP4' ? 'video/mp4' : 'video/MP2T',
+    });
+
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(fileBlob);
+    a.download = `${task.title}.${task.type === 'MP4' ? 'mp4' : 'ts'}`;
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(a.href);
+  }
+
+  /**
+   * 获取 M3U8 文件
+   */
+  private async fetchM3U8(url: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve(xhr.responseText);
+          } else {
+            reject(new Error(`HTTP ${xhr.status}`));
+          }
+        }
+      };
+      xhr.open('GET', url, true);
+      xhr.send();
+    });
+  }
+
+  /**
+   * 检测是否是主播放列表
+   */
+  private isMasterPlaylist(m3u8Str: string): boolean {
+    return m3u8Str.includes('#EXT-X-STREAM-INF');
+  }
+
+  /**
+   * 解析流信息
+   */
+  private parseStreamInfo(m3u8Str: string, baseUrl: string): Array<{
+    url: string;
+    bandwidth: number;
+    resolution: string;
+    name: string;
+  }> {
+    const streams: Array<{
+      url: string;
+      bandwidth: number;
+      resolution: string;
+      name: string;
+    }> = [];
+    const lines = m3u8Str.split('\n');
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line.startsWith('#EXT-X-STREAM-INF:')) {
+        const bandwidth = line.match(/BANDWIDTH=(\d+)/)?.[1] || '';
+        const resolution = line.match(/RESOLUTION=([^\s,]+)/)?.[1] || '';
+        const name = line.match(/NAME="([^"]+)"/)?.[1] || '';
+
+        if (i + 1 < lines.length) {
+          const url = lines[i + 1].trim();
+          if (url && !url.startsWith('#')) {
+            streams.push({
+              url: this.applyURL(url, baseUrl),
+              bandwidth: parseInt(bandwidth) || 0,
+              resolution: resolution || 'Unknown',
+              name: name || `${resolution || ''} ${bandwidth ? parseInt(bandwidth) / 1000 + 'kbps' : 'Unknown'}`,
+            });
+            i++;
+          }
+        }
+      }
+    }
+
+    streams.sort((a, b) => b.bandwidth - a.bandwidth);
+    return streams;
+  }
+
+  /**
+   * 合成 URL
+   */
+  private applyURL(targetURL: string, baseURL: string): string {
+    if (targetURL.indexOf('http') === 0) {
+      return targetURL;
+    } else if (targetURL[0] === '/') {
+      const domain = baseURL.split('/');
+      return domain[0] + '//' + domain[2] + targetURL;
+    } else {
+      const domain = baseURL.split('/');
+      domain.pop();
+      return domain.join('/') + '/' + targetURL;
+    }
+  }
+
+  /**
+   * 解析 IV
+   */
+  private parseIV(ivString: string): Uint8Array {
+    const hex = ivString.replace(/^0x/, '');
+    return new Uint8Array(hex.match(/.{1,2}/g)!.map((byte) => parseInt(byte, 16)));
+  }
+
+  /**
+   * 获取 AES 密钥
+   */
+  private async getAESKey(task: M3U8DownloadTask): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.responseType = 'arraybuffer';
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            task.aesConf.key = xhr.response;
+            // 初始化 AES 解密器
+            task.aesConf.decryption = new AESDecryptor();
+            task.aesConf.decryption.expandKey(task.aesConf.key);
+            resolve();
+          } else {
+            reject(new Error('获取 AES 密钥失败'));
+          }
+        }
+      };
+      xhr.open('GET', task.aesConf.uri, true);
+      xhr.send();
+    });
+  }
+
+  /**
+   * AES 解密
+   */
+  private aesDecrypt(task: M3U8DownloadTask, data: ArrayBuffer, index: number): ArrayBuffer {
+    if (!task.aesConf.decryption) {
+      return data;
+    }
+
+    // 使用 IV 或默认 IV
+    let iv: Uint8Array;
+    if (task.aesConf.iv) {
+      iv = task.aesConf.iv;
+    } else {
+      // 如果没有指定 IV，使用片段索引作为 IV
+      iv = new Uint8Array(16);
+      for (let i = 12; i < 16; i++) {
+        iv[i] = (index >> (8 * (15 - i))) & 0xff;
+      }
+    }
+
+    try {
+      return task.aesConf.decryption.decrypt(data, 0, iv.buffer, true);
+    } catch (error) {
+      console.error('AES 解密失败:', error);
+      return data;
+    }
+  }
+
+  /**
+   * MP4 转码
+   */
+  private conversionMp4(
+    task: M3U8DownloadTask,
+    data: ArrayBuffer,
+    index: number,
+    callback: (data: ArrayBuffer) => void
+  ): void {
+    if (task.type === 'MP4') {
+      try {
+        // @ts-ignore - mux.js 的 Transmuxer 在 mp4 子模块下
+        const transMuxer = new muxjs.mp4.Transmuxer({
+          keepOriginalTimestamps: true,
+          duration: parseInt(task.durationSecond.toString()),
+        });
+
+        transMuxer.on('data', (segment: any) => {
+          // 第一个片段需要包含初始化段
+          if (index === task.rangeDownload.startSegment - 1) {
+            const combinedData = new Uint8Array(
+              segment.initSegment.byteLength + segment.data.byteLength
+            );
+            combinedData.set(segment.initSegment, 0);
+            combinedData.set(segment.data, segment.initSegment.byteLength);
+            callback(combinedData.buffer);
+          } else {
+            callback(segment.data);
+          }
+        });
+
+        transMuxer.push(new Uint8Array(data));
+        transMuxer.flush();
+      } catch (error) {
+        console.error('MP4 转码失败:', error);
+        // 转码失败，返回原始数据
+        callback(data);
+      }
+    } else {
+      // TS 格式直接返回
+      callback(data);
+    }
+  }
+
+  /**
+   * 终止请求
+   */
+  private abortRequests(task: M3U8DownloadTask): void {
+    task.requests.forEach((xhr) => {
+      if (xhr.readyState !== 4) {
+        xhr.abort();
+      }
+    });
+    task.requests = [];
+  }
+}