download anime episodes choosing quality, audio, subs...
This commit is contained in:
@@ -1,22 +1,20 @@
|
||||
import { getConfig as loadConfig } from '../../shared/config.js';
|
||||
import { queryOne, queryAll, run } from '../../shared/database.js';
|
||||
import { getConfig as loadConfig } from '../../shared/config';
|
||||
import { queryOne, queryAll, run } from '../../shared/database';
|
||||
import { getAnimeById } from '../anime/anime.service';
|
||||
import { getBookById } from '../books/books.service';
|
||||
import crypto from 'crypto';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { exec } from 'child_process';
|
||||
import { promisify } from 'util';
|
||||
import AdmZip from 'adm-zip';
|
||||
import { spawn } from 'child_process';
|
||||
|
||||
const execPromise = promisify(exec);
|
||||
|
||||
const FFMPEG_PATH = 'D:\\ffmpeg\\bin\\ffmpeg.exe'; // Hardcoded como pediste
|
||||
const FFMPEG_PATH = 'D:\\ffmpeg\\bin\\ffmpeg.exe';
|
||||
|
||||
type AnimeDownloadParams = {
|
||||
anilistId: number;
|
||||
episodeNumber: number;
|
||||
streamUrl: string;
|
||||
headers?: Record<string, string>;
|
||||
quality?: string;
|
||||
subtitles?: Array<{ language: string; url: string }>;
|
||||
chapters?: Array<{ title: string; start_time: number; end_time: number }>;
|
||||
@@ -85,12 +83,16 @@ async function getOrCreateEntry(
|
||||
|
||||
await ensureDirectory(folderPath);
|
||||
|
||||
const entryId = crypto.createHash('sha1').update(folderPath).digest('hex');
|
||||
const entryId = crypto
|
||||
.createHash('sha1')
|
||||
.update(`anilist:${type}:${anilistId}`)
|
||||
.digest('hex');
|
||||
const now = Date.now();
|
||||
|
||||
await run(
|
||||
`INSERT INTO local_entries (id, type, path, folder_name, matched_id, matched_source, last_scan)
|
||||
VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
|
||||
`INSERT OR IGNORE INTO local_entries
|
||||
(id, type, path, folder_name, matched_id, matched_source, last_scan)
|
||||
VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
|
||||
[entryId, type, folderPath, safeName, anilistId, now],
|
||||
'local_library'
|
||||
);
|
||||
@@ -103,112 +105,182 @@ async function getOrCreateEntry(
|
||||
}
|
||||
|
||||
export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
|
||||
const { anilistId, episodeNumber, streamUrl, quality, subtitles, chapters } = params;
|
||||
const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
|
||||
|
||||
const entry = await getOrCreateEntry(anilistId, 'anime');
|
||||
|
||||
const existingFile = await queryOne(
|
||||
const exists = await queryOne(
|
||||
`SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
||||
[entry.id, episodeNumber],
|
||||
'local_library'
|
||||
);
|
||||
if (exists) return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
|
||||
|
||||
if (existingFile) {
|
||||
return {
|
||||
status: 'ALREADY_EXISTS',
|
||||
message: `Episode ${episodeNumber} already exists`,
|
||||
entry_id: entry.id,
|
||||
episode: episodeNumber
|
||||
};
|
||||
}
|
||||
|
||||
const outputFileName = `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`;
|
||||
const outputPath = path.join(entry.path, outputFileName);
|
||||
const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
|
||||
const tempDir = path.join(entry.path, '.temp');
|
||||
await ensureDirectory(tempDir);
|
||||
|
||||
try {
|
||||
let inputArgs: string[] = [];
|
||||
let videoInput = streamUrl;
|
||||
let audioInputs: string[] = [];
|
||||
|
||||
if (streamUrl.includes('.m3u8')) {
|
||||
if (quality) {
|
||||
const tempM3u8 = path.join(tempDir, 'stream.m3u8');
|
||||
await downloadFile(streamUrl, tempM3u8);
|
||||
const content = fs.readFileSync(tempM3u8, 'utf8');
|
||||
const isMaster = (params as any).is_master === true;
|
||||
|
||||
const qualities = content.match(/RESOLUTION=\d+x(\d+)/g) || [];
|
||||
const targetHeight = quality.replace('p', '');
|
||||
const targetLine = content.split('\n').find(line =>
|
||||
line.includes(`RESOLUTION=`) && line.includes(`x${targetHeight}`)
|
||||
);
|
||||
if (isMaster) {
|
||||
|
||||
if (targetLine) {
|
||||
const nextLine = content.split('\n')[content.split('\n').indexOf(targetLine) + 1];
|
||||
if (nextLine && !nextLine.startsWith('#')) {
|
||||
const baseUrl = streamUrl.substring(0, streamUrl.lastIndexOf('/') + 1);
|
||||
videoInput = nextLine.startsWith('http') ? nextLine : baseUrl + nextLine;
|
||||
}
|
||||
}
|
||||
const variant = (params as any).variant;
|
||||
const audios = (params as any).audio;
|
||||
|
||||
fs.unlinkSync(tempM3u8);
|
||||
if (!variant || !variant.playlist_url) {
|
||||
throw new Error('VARIANT_REQUIRED_FOR_MASTER');
|
||||
}
|
||||
|
||||
videoInput = variant.playlist_url;
|
||||
|
||||
if (audios && audios.length > 0) {
|
||||
audioInputs = audios.map((a: any) => a.playlist_url);
|
||||
}
|
||||
}
|
||||
|
||||
inputArgs = ['-i', videoInput];
|
||||
|
||||
const subtitleFiles: string[] = [];
|
||||
if (subtitles && subtitles.length > 0) {
|
||||
const subFiles: string[] = [];
|
||||
if (subtitles?.length) {
|
||||
for (let i = 0; i < subtitles.length; i++) {
|
||||
const sub = subtitles[i];
|
||||
const subPath = path.join(tempDir, `subtitle_${i}.${sub.url.endsWith('.vtt') ? 'vtt' : 'srt'}`);
|
||||
await downloadFile(sub.url, subPath);
|
||||
subtitleFiles.push(subPath);
|
||||
inputArgs.push('-i', subPath);
|
||||
const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
|
||||
const p = path.join(tempDir, `sub_${i}.${ext}`);
|
||||
await downloadFile(subtitles[i].url, p);
|
||||
subFiles.push(p);
|
||||
}
|
||||
}
|
||||
|
||||
let ffmpegArgs = [
|
||||
...inputArgs,
|
||||
'-map', '0:v',
|
||||
'-map', '0:a',
|
||||
'-c:v', 'copy',
|
||||
'-c:a', 'copy'
|
||||
const args = [
|
||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
||||
'-allowed_extensions', 'ALL',
|
||||
'-f', 'hls',
|
||||
'-extension_picky', '0',
|
||||
'-i', videoInput
|
||||
];
|
||||
|
||||
for (let i = 0; i < subtitleFiles.length; i++) {
|
||||
ffmpegArgs.push('-map', `${i + 1}:s`);
|
||||
ffmpegArgs.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
|
||||
}
|
||||
audioInputs.forEach(audioUrl => {
|
||||
args.push(
|
||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
||||
'-allowed_extensions', 'ALL',
|
||||
'-f', 'hls',
|
||||
'-extension_picky', '0',
|
||||
'-i', audioUrl
|
||||
);
|
||||
});
|
||||
|
||||
if (subtitleFiles.length > 0) {
|
||||
ffmpegArgs.push('-c:s', 'copy');
|
||||
}
|
||||
subFiles.forEach(f => args.push('-i', f));
|
||||
|
||||
if (chapters && chapters.length > 0) {
|
||||
const metadataFile = path.join(tempDir, 'chapters.txt');
|
||||
let chapterContent = ';FFMETADATA1\n';
|
||||
|
||||
for (const chapter of chapters) {
|
||||
const startMs = Math.floor(chapter.start_time * 1000);
|
||||
const endMs = Math.floor(chapter.end_time * 1000);
|
||||
|
||||
chapterContent += '[CHAPTER]\n';
|
||||
chapterContent += `TIMEBASE=1/1000\n`;
|
||||
chapterContent += `START=${startMs}\n`;
|
||||
chapterContent += `END=${endMs}\n`;
|
||||
chapterContent += `title=${chapter.title}\n`;
|
||||
let chaptersInputIndex = -1;
|
||||
if (chapters?.length) {
|
||||
const meta = path.join(tempDir, 'chapters.txt');
|
||||
let txt = ';FFMETADATA1\n';
|
||||
for (const c of chapters) {
|
||||
txt += `[CHAPTER]\nTIMEBASE=1/1000\nSTART=${c.start_time * 1000 | 0}\nEND=${c.end_time * 1000 | 0}\ntitle=${c.title}\n`;
|
||||
}
|
||||
|
||||
fs.writeFileSync(metadataFile, chapterContent);
|
||||
ffmpegArgs.push('-i', metadataFile);
|
||||
ffmpegArgs.push('-map_metadata', `${inputArgs.length / 2}`);
|
||||
fs.writeFileSync(meta, txt);
|
||||
args.push('-i', meta);
|
||||
chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
|
||||
}
|
||||
|
||||
ffmpegArgs.push(outputPath);
|
||||
args.push('-map', '0:v:0');
|
||||
|
||||
const command = `${FFMPEG_PATH} ${ffmpegArgs.join(' ')}`;
|
||||
await execPromise(command, { maxBuffer: 1024 * 1024 * 100 });
|
||||
if (audioInputs.length > 0) {
|
||||
|
||||
audioInputs.forEach((_, i) => {
|
||||
args.push('-map', `${i + 1}:a:0`);
|
||||
|
||||
const audioInfo = (params as any).audio?.[i];
|
||||
if (audioInfo) {
|
||||
const audioStreamIndex = i;
|
||||
if (audioInfo.language) {
|
||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
|
||||
}
|
||||
if (audioInfo.name) {
|
||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
args.push('-map', '0:a:0?');
|
||||
}
|
||||
|
||||
const subtitleStartIndex = 1 + audioInputs.length;
|
||||
subFiles.forEach((_, i) => {
|
||||
args.push('-map', `${subtitleStartIndex + i}:0`);
|
||||
args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
|
||||
});
|
||||
|
||||
if (chaptersInputIndex >= 0) {
|
||||
args.push('-map_metadata', `${chaptersInputIndex}`);
|
||||
}
|
||||
|
||||
args.push('-c:v', 'copy');
|
||||
|
||||
args.push('-c:a', 'copy');
|
||||
|
||||
if (subFiles.length) {
|
||||
args.push('-c:s', 'srt');
|
||||
|
||||
}
|
||||
|
||||
args.push('-y');
|
||||
|
||||
args.push(outputPath);
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
console.log('🎬 Iniciando descarga con FFmpeg...');
|
||||
console.log('📹 Video:', videoInput);
|
||||
if (audioInputs.length > 0) {
|
||||
console.log('🔊 Audio tracks:', audioInputs.length);
|
||||
}
|
||||
console.log('💾 Output:', outputPath);
|
||||
console.log('Args:', args.join(' '));
|
||||
|
||||
const ff = spawn(FFMPEG_PATH, args, {
|
||||
windowsHide: true,
|
||||
stdio: ['ignore', 'pipe', 'pipe']
|
||||
});
|
||||
|
||||
let lastProgress = '';
|
||||
|
||||
ff.stdout.on('data', (data) => {
|
||||
const text = data.toString();
|
||||
console.log('[stdout]', text);
|
||||
});
|
||||
|
||||
ff.stderr.on('data', (data) => {
|
||||
const text = data.toString();
|
||||
|
||||
if (text.includes('time=') || text.includes('speed=')) {
|
||||
const timeMatch = text.match(/time=(\S+)/);
|
||||
const speedMatch = text.match(/speed=(\S+)/);
|
||||
if (timeMatch || speedMatch) {
|
||||
lastProgress = `⏱️ Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
|
||||
console.log(lastProgress);
|
||||
}
|
||||
} else {
|
||||
console.log('[ffmpeg]', text);
|
||||
}
|
||||
});
|
||||
|
||||
ff.on('error', (error) => {
|
||||
console.error('❌ Error al iniciar FFmpeg:', error);
|
||||
reject(error);
|
||||
});
|
||||
|
||||
ff.on('close', (code) => {
|
||||
if (code === 0) {
|
||||
console.log('✅ Descarga completada exitosamente');
|
||||
resolve(true);
|
||||
} else {
|
||||
console.error(`❌ FFmpeg terminó con código: ${code}`);
|
||||
reject(new Error(`FFmpeg exited with code ${code}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
||||
|
||||
@@ -234,14 +306,11 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
|
||||
path: outputPath
|
||||
};
|
||||
|
||||
} catch (error: any) {
|
||||
} catch (e: any) {
|
||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
||||
if (fs.existsSync(outputPath)) {
|
||||
fs.unlinkSync(outputPath);
|
||||
}
|
||||
|
||||
if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
|
||||
const err = new Error('DOWNLOAD_FAILED');
|
||||
(err as any).details = error.message;
|
||||
(err as any).details = e.message;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,20 +17,52 @@ type MatchBody = {
|
||||
matched_id: number | null;
|
||||
};
|
||||
|
||||
type DownloadAnimeBody = {
|
||||
type DownloadAnimeBody =
|
||||
| {
|
||||
anilist_id: number;
|
||||
episode_number: number;
|
||||
stream_url: string;
|
||||
quality?: string;
|
||||
subtitles?: Array<{
|
||||
stream_url: string; // media playlist FINAL
|
||||
is_master?: false;
|
||||
subtitles?: {
|
||||
language: string;
|
||||
url: string;
|
||||
}>;
|
||||
chapters?: Array<{
|
||||
}[];
|
||||
chapters?: {
|
||||
title: string;
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
}>;
|
||||
}[];
|
||||
}
|
||||
| {
|
||||
anilist_id: number;
|
||||
episode_number: number;
|
||||
stream_url: string; // master.m3u8
|
||||
is_master: true;
|
||||
|
||||
variant: {
|
||||
resolution: string;
|
||||
bandwidth?: number;
|
||||
codecs?: string;
|
||||
playlist_url: string;
|
||||
};
|
||||
|
||||
audio?: {
|
||||
group?: string;
|
||||
language?: string;
|
||||
name?: string;
|
||||
playlist_url: string;
|
||||
}[];
|
||||
|
||||
subtitles?: {
|
||||
language: string;
|
||||
url: string;
|
||||
}[];
|
||||
|
||||
chapters?: {
|
||||
title: string;
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
type DownloadBookBody = {
|
||||
@@ -212,17 +244,30 @@ export async function getPage(request: FastifyRequest, reply: FastifyReply) {
|
||||
return reply.status(400).send();
|
||||
}
|
||||
|
||||
function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
|
||||
const params = new URLSearchParams({ url: rawUrl });
|
||||
|
||||
for (const [key, value] of Object.entries(headers)) {
|
||||
params.set(key.toLowerCase(), value);
|
||||
}
|
||||
|
||||
return `http://localhost:54322/api/proxy?${params.toString()}`;
|
||||
}
|
||||
|
||||
export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
|
||||
try {
|
||||
const {
|
||||
anilist_id,
|
||||
episode_number,
|
||||
stream_url,
|
||||
quality,
|
||||
is_master,
|
||||
subtitles,
|
||||
chapters
|
||||
} = request.body;
|
||||
|
||||
const clientHeaders = (request.body as any).headers || {};
|
||||
|
||||
// Validación básica
|
||||
if (!anilist_id || !episode_number || !stream_url) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_REQUIRED_FIELDS',
|
||||
@@ -230,14 +275,58 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
|
||||
});
|
||||
}
|
||||
|
||||
const result = await downloadService.downloadAnimeEpisode({
|
||||
// Proxy del stream URL principal
|
||||
const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
|
||||
console.log('Stream URL:', proxyUrl);
|
||||
|
||||
// Proxy de subtítulos
|
||||
const proxiedSubs = subtitles?.map(sub => ({
|
||||
...sub,
|
||||
url: buildProxyUrl(sub.url, clientHeaders)
|
||||
}));
|
||||
|
||||
// Preparar parámetros base
|
||||
const downloadParams: any = {
|
||||
anilistId: anilist_id,
|
||||
episodeNumber: episode_number,
|
||||
streamUrl: stream_url,
|
||||
quality,
|
||||
subtitles,
|
||||
streamUrl: proxyUrl,
|
||||
subtitles: proxiedSubs,
|
||||
chapters
|
||||
});
|
||||
};
|
||||
|
||||
// Si es master playlist, agregar campos adicionales
|
||||
if (is_master === true) {
|
||||
const { variant, audio } = request.body as any;
|
||||
|
||||
if (!variant || !variant.playlist_url) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_VARIANT',
|
||||
message: 'variant with playlist_url is required when is_master is true'
|
||||
});
|
||||
}
|
||||
|
||||
downloadParams.is_master = true;
|
||||
|
||||
// Proxy del variant playlist
|
||||
downloadParams.variant = {
|
||||
...variant,
|
||||
playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
|
||||
};
|
||||
|
||||
// Proxy de audio tracks si existen
|
||||
if (audio && audio.length > 0) {
|
||||
downloadParams.audio = audio.map((a: any) => ({
|
||||
...a,
|
||||
playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
|
||||
}));
|
||||
}
|
||||
|
||||
console.log('Master playlist detected');
|
||||
console.log('Variant:', downloadParams.variant.resolution);
|
||||
console.log('Audio tracks:', downloadParams.audio?.length || 0);
|
||||
}
|
||||
|
||||
const result = await downloadService.downloadAnimeEpisode(downloadParams);
|
||||
|
||||
if (result.status === 'ALREADY_EXISTS') {
|
||||
return reply.status(409).send(result);
|
||||
@@ -251,6 +340,10 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
|
||||
return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
|
||||
}
|
||||
|
||||
if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
|
||||
return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
|
||||
}
|
||||
|
||||
if (err.message === 'DOWNLOAD_FAILED') {
|
||||
return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
|
||||
}
|
||||
|
||||
@@ -34,7 +34,14 @@ const AnimePlayer = (function() {
|
||||
epTitle: null,
|
||||
prevBtn: null,
|
||||
nextBtn: null,
|
||||
mpvBtn: null
|
||||
mpvBtn: null,
|
||||
downloadBtn: null,
|
||||
downloadModal: null,
|
||||
dlQualityList: null,
|
||||
dlAudioList: null,
|
||||
dlSubsList: null,
|
||||
dlConfirmBtn: null,
|
||||
dlCancelBtn: null
|
||||
};
|
||||
|
||||
function init(animeId, initialSource, isLocal, animeData) {
|
||||
@@ -57,8 +64,46 @@ const AnimePlayer = (function() {
|
||||
els.video = document.getElementById('player');
|
||||
els.loader = document.getElementById('player-loading');
|
||||
els.loaderText = document.getElementById('player-loading-text');
|
||||
els.downloadBtn = document.getElementById('download-btn');
|
||||
if (els.downloadBtn) {
|
||||
els.downloadBtn.addEventListener('click', downloadEpisode);
|
||||
}
|
||||
els.downloadModal = document.getElementById('download-modal');
|
||||
els.dlQualityList = document.getElementById('dl-quality-list');
|
||||
els.dlAudioList = document.getElementById('dl-audio-list');
|
||||
els.dlSubsList = document.getElementById('dl-subs-list');
|
||||
els.dlConfirmBtn = document.getElementById('confirm-dl-btn');
|
||||
els.dlCancelBtn = document.getElementById('cancel-dl-btn');
|
||||
|
||||
const closeDlModalBtn = document.getElementById('close-download-modal');
|
||||
|
||||
if (els.dlConfirmBtn) els.dlConfirmBtn.onclick = executeDownload;
|
||||
if (els.dlCancelBtn) els.dlCancelBtn.onclick = () => els.downloadModal.style.display = 'none';
|
||||
if (closeDlModalBtn) closeDlModalBtn.onclick = () => els.downloadModal.style.display = 'none';
|
||||
const closeModal = () => {
|
||||
if (els.downloadModal) {
|
||||
els.downloadModal.classList.remove('show');
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
if(!els.downloadModal.classList.contains('show')) {
|
||||
els.downloadModal.style.display = 'none';
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
if (els.dlCancelBtn) els.dlCancelBtn.onclick = closeModal;
|
||||
|
||||
if (closeDlModalBtn) closeDlModalBtn.onclick = closeModal;
|
||||
els.mpvBtn = document.getElementById('mpv-btn');
|
||||
if (els.downloadModal) {
|
||||
els.downloadModal.addEventListener('click', (e) => {
|
||||
|
||||
if (e.target === els.downloadModal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (els.mpvBtn) els.mpvBtn.addEventListener('click', openInMPV);
|
||||
|
||||
els.serverSelect = document.getElementById('server-select');
|
||||
@@ -183,6 +228,11 @@ const AnimePlayer = (function() {
|
||||
|
||||
_currentEpisode = targetEp;
|
||||
|
||||
if (els.downloadBtn) {
|
||||
els.downloadBtn.style.display = _isLocal ? 'none' : 'flex';
|
||||
resetDownloadButtonIcon();
|
||||
}
|
||||
|
||||
if(els.epTitle) els.epTitle.innerText = `Episode ${targetEp}`;
|
||||
if(els.prevBtn) els.prevBtn.disabled = (_currentEpisode <= 1);
|
||||
if(els.nextBtn) els.nextBtn.disabled = (_currentEpisode >= _totalEpisodes);
|
||||
@@ -215,6 +265,256 @@ const AnimePlayer = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadEpisode() {
|
||||
if (!_rawVideoData || !_rawVideoData.url) {
|
||||
alert("Stream not loaded yet.");
|
||||
return;
|
||||
}
|
||||
|
||||
const isInFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
|
||||
|
||||
if (isInFullscreen) {
|
||||
try {
|
||||
if (document.exitFullscreen) {
|
||||
await document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
await document.webkitExitFullscreen();
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
} catch (err) {
|
||||
console.warn("Error al salir de fullscreen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const isM3U8 = hlsInstance && hlsInstance.levels && hlsInstance.levels.length > 0;
|
||||
const hasMultipleAudio = hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 1;
|
||||
|
||||
const hasSubs = _currentSubtitles && _currentSubtitles.length > 0;
|
||||
|
||||
if (isM3U8 || hasMultipleAudio || hasSubs) {
|
||||
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
openDownloadModal();
|
||||
} else {
|
||||
|
||||
executeDownload(null, true);
|
||||
}
|
||||
}
|
||||
|
||||
function openDownloadModal() {
|
||||
if(!els.downloadModal) {
|
||||
console.error("Modal element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
els.dlQualityList.innerHTML = '';
|
||||
els.dlAudioList.innerHTML = '';
|
||||
els.dlSubsList.innerHTML = '';
|
||||
|
||||
let showQuality = false;
|
||||
let showAudio = false;
|
||||
let showSubs = false;
|
||||
|
||||
if (hlsInstance && hlsInstance.levels && hlsInstance.levels.length > 0) {
|
||||
showQuality = true;
|
||||
|
||||
const levels = hlsInstance.levels.map((l, index) => ({...l, originalIndex: index}))
|
||||
.sort((a, b) => b.height - a.height);
|
||||
|
||||
levels.forEach((level, i) => {
|
||||
const isSelected = i === 0;
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'dl-item';
|
||||
div.innerHTML = `
|
||||
<input type="radio" name="dl-quality" value="${level.originalIndex}" ${isSelected ? 'checked' : ''}>
|
||||
<span>${level.height}p</span>
|
||||
<span class="tag-info">${(level.bitrate / 1000000).toFixed(1)} Mbps</span>
|
||||
`;
|
||||
div.onclick = (e) => {
|
||||
if(e.target.tagName !== 'INPUT') div.querySelector('input').checked = true;
|
||||
};
|
||||
els.dlQualityList.appendChild(div);
|
||||
});
|
||||
}
|
||||
document.getElementById('dl-quality-section').style.display = showQuality ? 'block' : 'none';
|
||||
|
||||
if (hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 0) {
|
||||
showAudio = true;
|
||||
hlsInstance.audioTracks.forEach((track, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'dl-item';
|
||||
|
||||
const isCurrent = hlsInstance.audioTrack === index;
|
||||
|
||||
div.innerHTML = `
|
||||
<input type="checkbox" name="dl-audio" value="${index}" checked>
|
||||
<span>${track.name || track.lang || `Audio ${index+1}`}</span>
|
||||
<span class="tag-info">${track.lang || 'unk'}</span>
|
||||
`;
|
||||
div.onclick = (e) => {
|
||||
if(e.target.tagName !== 'INPUT') {
|
||||
const cb = div.querySelector('input');
|
||||
cb.checked = !cb.checked;
|
||||
}
|
||||
};
|
||||
els.dlAudioList.appendChild(div);
|
||||
});
|
||||
}
|
||||
document.getElementById('dl-audio-section').style.display = showAudio ? 'block' : 'none';
|
||||
|
||||
if (_currentSubtitles && _currentSubtitles.length > 0) {
|
||||
showSubs = true;
|
||||
_currentSubtitles.forEach((sub, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'dl-item';
|
||||
div.innerHTML = `
|
||||
<input type="checkbox" name="dl-subs" value="${index}" checked>
|
||||
<span>${sub.label || sub.language || 'Unknown'}</span>
|
||||
`;
|
||||
div.onclick = (e) => {
|
||||
if(e.target.tagName !== 'INPUT') {
|
||||
const cb = div.querySelector('input');
|
||||
cb.checked = !cb.checked;
|
||||
}
|
||||
};
|
||||
els.dlSubsList.appendChild(div);
|
||||
});
|
||||
}
|
||||
document.getElementById('dl-subs-section').style.display = showSubs ? 'block' : 'none';
|
||||
|
||||
els.downloadModal.style.display = 'flex';
|
||||
|
||||
els.downloadModal.offsetHeight;
|
||||
els.downloadModal.classList.add('show');
|
||||
}
|
||||
|
||||
async function executeDownload(e, skipModal = false) {
|
||||
if(els.downloadModal) {
|
||||
els.downloadModal.classList.remove('show');
|
||||
setTimeout(() => els.downloadModal.style.display = 'none', 300);
|
||||
}
|
||||
const btn = els.downloadBtn;
|
||||
const originalBtnContent = btn.innerHTML;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = `<div class="spinner" style="width:18px; height:18px; border-width:2px;"></div>`;
|
||||
|
||||
let body = {
|
||||
anilist_id: parseInt(_animeId),
|
||||
episode_number: parseInt(_currentEpisode),
|
||||
stream_url: _rawVideoData.url,
|
||||
headers: _rawVideoData.headers || {},
|
||||
chapters: _skipIntervals.map(i => ({
|
||||
title: i.type === 'op' ? 'Opening' : 'Ending',
|
||||
start_time: i.startTime,
|
||||
end_time: i.endTime
|
||||
})),
|
||||
subtitles: []
|
||||
};
|
||||
|
||||
if (skipModal) {
|
||||
|
||||
if (_currentSubtitles) {
|
||||
body.subtitles = _currentSubtitles.map(sub => ({
|
||||
language: sub.label || 'Unknown',
|
||||
url: sub.src
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
|
||||
const selectedSubs = Array.from(els.dlSubsList.querySelectorAll('input:checked'));
|
||||
body.subtitles = selectedSubs.map(cb => {
|
||||
const i = parseInt(cb.value);
|
||||
return {
|
||||
language: _currentSubtitles[i].label || 'Unknown',
|
||||
url: _currentSubtitles[i].src
|
||||
};
|
||||
});
|
||||
|
||||
const isQualityVisible = document.getElementById('dl-quality-section').style.display !== 'none';
|
||||
|
||||
if (isQualityVisible && hlsInstance && hlsInstance.levels) {
|
||||
body.is_master = true;
|
||||
|
||||
const qualityInput = document.querySelector('input[name="dl-quality"]:checked');
|
||||
const qualityIndex = qualityInput ? parseInt(qualityInput.value) : 0;
|
||||
const level = hlsInstance.levels[qualityIndex];
|
||||
|
||||
if (level) {
|
||||
body.variant = {
|
||||
resolution: level.width ? `${level.width}x${level.height}` : '1920x1080',
|
||||
bandwidth: level.bitrate,
|
||||
codecs: level.attrs ? level.attrs.CODECS : '',
|
||||
playlist_url: level.url
|
||||
};
|
||||
}
|
||||
|
||||
const audioInputs = document.querySelectorAll('input[name="dl-audio"]:checked');
|
||||
if (audioInputs.length > 0 && hlsInstance.audioTracks) {
|
||||
body.audio = Array.from(audioInputs).map(input => {
|
||||
const i = parseInt(input.value);
|
||||
const track = hlsInstance.audioTracks[i];
|
||||
return {
|
||||
group: track.groupId || 'audio',
|
||||
language: track.lang || 'unk',
|
||||
name: track.name || `Audio ${i}`,
|
||||
playlist_url: track.url
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('/api/library/download/anime', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token ? `Bearer ${token}` : ''
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
|
||||
} else if (res.status === 409) {
|
||||
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`;
|
||||
} else {
|
||||
|
||||
console.error("Download Error:", data);
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Request failed:", err);
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
|
||||
} finally {
|
||||
|
||||
setTimeout(() => {
|
||||
if (btn) {
|
||||
btn.disabled = false;
|
||||
resetDownloadButtonIcon();
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function resetDownloadButtonIcon() {
|
||||
if (!els.downloadBtn) return;
|
||||
els.downloadBtn.innerHTML = `
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
function closePlayer() {
|
||||
if (plyrInstance) plyrInstance.destroy();
|
||||
if (hlsInstance) hlsInstance.destroy();
|
||||
@@ -508,40 +808,34 @@ const AnimePlayer = (function() {
|
||||
const controls = plyrEl.querySelector('.plyr__controls');
|
||||
if (!controls || controls.querySelector('#quality-control-wrapper')) return;
|
||||
|
||||
// 1. Crear el Wrapper
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'plyr__controls__item plyr__custom-select-wrapper';
|
||||
wrapper.id = 'quality-control-wrapper';
|
||||
|
||||
// 2. Crear el Botón Visual (Fake)
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'plyr__custom-control-btn';
|
||||
// Icono + Texto Inicial
|
||||
|
||||
btn.innerHTML = `${ICONS.settings} <span class="label-text">Auto</span>`;
|
||||
|
||||
// 3. Crear el Select Real (Invisible)
|
||||
const select = document.createElement('select');
|
||||
select.className = 'plyr__sr-only-select'; // Clase auxiliar si quieres depurar, sino usa el CSS wrapper
|
||||
select.className = 'plyr__sr-only-select';
|
||||
|
||||
// Opción AUTO
|
||||
const autoOpt = document.createElement('option');
|
||||
autoOpt.value = -1;
|
||||
autoOpt.textContent = 'Auto';
|
||||
select.appendChild(autoOpt);
|
||||
|
||||
// Opciones de Niveles
|
||||
levels.forEach((l, i) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = i;
|
||||
opt.textContent = `${l.height}p`; // Texto que sale en el dropdown nativo
|
||||
opt.textContent = `${l.height}p`;
|
||||
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Sincronizar estado inicial
|
||||
select.value = hls.currentLevel;
|
||||
updateLabel(select.value);
|
||||
|
||||
// Evento Change
|
||||
select.onchange = () => {
|
||||
hls.currentLevel = Number(select.value);
|
||||
updateLabel(select.value);
|
||||
@@ -551,7 +845,7 @@ const AnimePlayer = (function() {
|
||||
const index = Number(val);
|
||||
let text = 'Auto';
|
||||
if (index !== -1 && levels[index]) {
|
||||
// Solo el número + p (ej: 720p)
|
||||
|
||||
text = `${levels[index].height}p`;
|
||||
}
|
||||
btn.innerHTML = `<span class="label-text">${text}</span>`;
|
||||
@@ -560,8 +854,6 @@ const AnimePlayer = (function() {
|
||||
wrapper.appendChild(select);
|
||||
wrapper.appendChild(btn);
|
||||
|
||||
// Insertar en controles Plyr (antes del botón de pantalla completa o ajustes)
|
||||
// Insertamos antes del 5º elemento (usualmente settings o fullscreen)
|
||||
const insertIndex = controls.children.length > 4 ? 4 : controls.children.length - 1;
|
||||
controls.insertBefore(wrapper, controls.children[insertIndex]);
|
||||
}
|
||||
@@ -573,17 +865,14 @@ const AnimePlayer = (function() {
|
||||
const controls = plyrEl.querySelector('.plyr__controls');
|
||||
if (!controls || controls.querySelector('#audio-control-wrapper')) return;
|
||||
|
||||
// 1. Wrapper
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'plyr__controls__item plyr__custom-select-wrapper';
|
||||
wrapper.id = 'audio-control-wrapper';
|
||||
|
||||
// 2. Botón Visual
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'plyr__custom-control-btn';
|
||||
btn.innerHTML = `<span class="label-text">Audio 1</span>`;
|
||||
|
||||
// 3. Select Invisible
|
||||
const select = document.createElement('select');
|
||||
|
||||
hls.audioTracks.forEach((t, i) => {
|
||||
@@ -605,10 +894,8 @@ const AnimePlayer = (function() {
|
||||
const index = Number(val);
|
||||
const track = hls.audioTracks[index];
|
||||
|
||||
// Priorizamos el idioma (lang), luego el nombre
|
||||
let rawText = track.lang || track.name || `A${index + 1}`;
|
||||
|
||||
// Tomamos solo las 2 primeras letras y las pasamos a Mayúsculas
|
||||
let shortText = rawText.substring(0, 2).toUpperCase();
|
||||
|
||||
btn.querySelector('.label-text').innerText = shortText;
|
||||
@@ -617,7 +904,6 @@ const AnimePlayer = (function() {
|
||||
wrapper.appendChild(select);
|
||||
wrapper.appendChild(btn);
|
||||
|
||||
// Insertar antes del selector de calidad si existe, o en la posición 4
|
||||
const qualityWrapper = controls.querySelector('#quality-control-wrapper');
|
||||
if(qualityWrapper) {
|
||||
controls.insertBefore(wrapper, qualityWrapper);
|
||||
|
||||
@@ -73,13 +73,14 @@
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="settings-group">
|
||||
<button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 3l14 9-14 9V3z"></path>
|
||||
</svg>
|
||||
<span>MPV</span>
|
||||
</button>
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
@@ -101,6 +102,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-overlay" id="download-modal">
|
||||
<div class="modal-content download-settings-content">
|
||||
<button class="modal-close" id="close-download-modal">✕</button>
|
||||
<h2 class="modal-title">Download Settings</h2>
|
||||
|
||||
<div class="download-sections-wrapper">
|
||||
<div id="dl-quality-section" class="dl-section" style="display:none;">
|
||||
<h3>Video Quality</h3>
|
||||
<div class="dl-list" id="dl-quality-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="dl-audio-section" class="dl-section" style="display:none;">
|
||||
<h3>Audio Tracks</h3>
|
||||
<div class="dl-list" id="dl-audio-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="dl-subs-section" class="dl-section">
|
||||
<h3>Subtitles</h3>
|
||||
<div class="dl-list" id="dl-subs-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dl-actions">
|
||||
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
|
||||
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container" id="main-content">
|
||||
|
||||
@@ -600,3 +600,320 @@ body.stop-scrolling {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.download-settings-content {
|
||||
background: #1a1a1a;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 85vh;
|
||||
border: 1px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.download-sections-wrapper {
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dl-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dl-section h3 {
|
||||
font-size: 0.9rem;
|
||||
color: var(--brand-color-light);
|
||||
margin-bottom: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.dl-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dl-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dl-item:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.dl-item input[type="radio"],
|
||||
.dl-item input[type="checkbox"] {
|
||||
accent-color: var(--brand-color);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dl-item span {
|
||||
font-size: 0.9rem;
|
||||
color: #eee;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dl-item .tag-info {
|
||||
font-size: 0.75rem;
|
||||
color: #aaa;
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dl-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: #ccc;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: var(--brand-color);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-confirm:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
/* =========================================
|
||||
MODAL DE DESCARGAS - REDISEÑO "GLASS"
|
||||
========================================= */
|
||||
|
||||
#download-modal {
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.6); /* Fondo oscurecido */
|
||||
backdrop-filter: blur(8px); /* Desenfoque del fondo */
|
||||
z-index: 2147483647 !important; /* Encima de todo */
|
||||
display: none; /* Controlado por JS/Clases */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none; /* Por defecto no bloquea, JS lo activa */
|
||||
}
|
||||
|
||||
/* Estado visible activado por JS */
|
||||
#download-modal.show {
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.download-settings-content {
|
||||
background: rgba(20, 20, 20, 0.85); /* Fondo semitransparente oscuro */
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
max-height: 85vh;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px; /* Bordes más redondeados como anime.css */
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#download-modal.show .download-settings-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Botón de cerrar (X) */
|
||||
.download-settings-content .modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.download-settings-content .modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0.5));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Wrappers internos */
|
||||
.download-sections-wrapper {
|
||||
overflow-y: auto;
|
||||
padding-right: 8px; /* Espacio para scrollbar */
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Scrollbar personalizado fino */
|
||||
.download-sections-wrapper::-webkit-scrollbar { width: 6px; }
|
||||
.download-sections-wrapper::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
|
||||
.download-sections-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
.download-sections-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
|
||||
|
||||
.dl-section { margin-bottom: 1.5rem; }
|
||||
|
||||
.dl-section h3 {
|
||||
font-size: 0.75rem;
|
||||
color: var(--brand-color-light); /* Morado claro */
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dl-section h3::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, rgba(139, 92, 246, 0.3), transparent);
|
||||
}
|
||||
|
||||
.dl-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
/* Items de la lista */
|
||||
.dl-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dl-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Inputs nativos con color de marca */
|
||||
.dl-item input[type="radio"],
|
||||
.dl-item input[type="checkbox"] {
|
||||
accent-color: var(--brand-color);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dl-item span {
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255,255,255,0.9);
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dl-item .tag-info {
|
||||
font-size: 0.7rem;
|
||||
color: #ccc;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* Pie del modal (Botones) */
|
||||
.dl-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: var(--brand-color);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn-confirm:hover {
|
||||
background: #7c3aed; /* Un tono más oscuro del brand */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
@@ -1,22 +1,20 @@
|
||||
import { getConfig as loadConfig } from '../../shared/config.js';
|
||||
import { queryOne, queryAll, run } from '../../shared/database.js';
|
||||
import { getConfig as loadConfig } from '../../shared/config';
|
||||
import { queryOne, queryAll, run } from '../../shared/database';
|
||||
import { getAnimeById } from '../anime/anime.service';
|
||||
import { getBookById } from '../books/books.service';
|
||||
import crypto from 'crypto';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { exec } from 'child_process';
|
||||
import { promisify } from 'util';
|
||||
import AdmZip from 'adm-zip';
|
||||
import { spawn } from 'child_process';
|
||||
|
||||
const execPromise = promisify(exec);
|
||||
|
||||
const FFMPEG_PATH = 'D:\\ffmpeg\\bin\\ffmpeg.exe'; // Hardcoded como pediste
|
||||
const FFMPEG_PATH = 'D:\\ffmpeg\\bin\\ffmpeg.exe';
|
||||
|
||||
type AnimeDownloadParams = {
|
||||
anilistId: number;
|
||||
episodeNumber: number;
|
||||
streamUrl: string;
|
||||
headers?: Record<string, string>;
|
||||
quality?: string;
|
||||
subtitles?: Array<{ language: string; url: string }>;
|
||||
chapters?: Array<{ title: string; start_time: number; end_time: number }>;
|
||||
@@ -85,12 +83,16 @@ async function getOrCreateEntry(
|
||||
|
||||
await ensureDirectory(folderPath);
|
||||
|
||||
const entryId = crypto.createHash('sha1').update(folderPath).digest('hex');
|
||||
const entryId = crypto
|
||||
.createHash('sha1')
|
||||
.update(`anilist:${type}:${anilistId}`)
|
||||
.digest('hex');
|
||||
const now = Date.now();
|
||||
|
||||
await run(
|
||||
`INSERT INTO local_entries (id, type, path, folder_name, matched_id, matched_source, last_scan)
|
||||
VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
|
||||
`INSERT OR IGNORE INTO local_entries
|
||||
(id, type, path, folder_name, matched_id, matched_source, last_scan)
|
||||
VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
|
||||
[entryId, type, folderPath, safeName, anilistId, now],
|
||||
'local_library'
|
||||
);
|
||||
@@ -103,112 +105,182 @@ async function getOrCreateEntry(
|
||||
}
|
||||
|
||||
export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
|
||||
const { anilistId, episodeNumber, streamUrl, quality, subtitles, chapters } = params;
|
||||
const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
|
||||
|
||||
const entry = await getOrCreateEntry(anilistId, 'anime');
|
||||
|
||||
const existingFile = await queryOne(
|
||||
const exists = await queryOne(
|
||||
`SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
||||
[entry.id, episodeNumber],
|
||||
'local_library'
|
||||
);
|
||||
if (exists) return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
|
||||
|
||||
if (existingFile) {
|
||||
return {
|
||||
status: 'ALREADY_EXISTS',
|
||||
message: `Episode ${episodeNumber} already exists`,
|
||||
entry_id: entry.id,
|
||||
episode: episodeNumber
|
||||
};
|
||||
}
|
||||
|
||||
const outputFileName = `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`;
|
||||
const outputPath = path.join(entry.path, outputFileName);
|
||||
const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
|
||||
const tempDir = path.join(entry.path, '.temp');
|
||||
await ensureDirectory(tempDir);
|
||||
|
||||
try {
|
||||
let inputArgs: string[] = [];
|
||||
let videoInput = streamUrl;
|
||||
let audioInputs: string[] = [];
|
||||
|
||||
if (streamUrl.includes('.m3u8')) {
|
||||
if (quality) {
|
||||
const tempM3u8 = path.join(tempDir, 'stream.m3u8');
|
||||
await downloadFile(streamUrl, tempM3u8);
|
||||
const content = fs.readFileSync(tempM3u8, 'utf8');
|
||||
const isMaster = (params as any).is_master === true;
|
||||
|
||||
const qualities = content.match(/RESOLUTION=\d+x(\d+)/g) || [];
|
||||
const targetHeight = quality.replace('p', '');
|
||||
const targetLine = content.split('\n').find(line =>
|
||||
line.includes(`RESOLUTION=`) && line.includes(`x${targetHeight}`)
|
||||
);
|
||||
if (isMaster) {
|
||||
|
||||
if (targetLine) {
|
||||
const nextLine = content.split('\n')[content.split('\n').indexOf(targetLine) + 1];
|
||||
if (nextLine && !nextLine.startsWith('#')) {
|
||||
const baseUrl = streamUrl.substring(0, streamUrl.lastIndexOf('/') + 1);
|
||||
videoInput = nextLine.startsWith('http') ? nextLine : baseUrl + nextLine;
|
||||
}
|
||||
}
|
||||
const variant = (params as any).variant;
|
||||
const audios = (params as any).audio;
|
||||
|
||||
fs.unlinkSync(tempM3u8);
|
||||
if (!variant || !variant.playlist_url) {
|
||||
throw new Error('VARIANT_REQUIRED_FOR_MASTER');
|
||||
}
|
||||
|
||||
videoInput = variant.playlist_url;
|
||||
|
||||
if (audios && audios.length > 0) {
|
||||
audioInputs = audios.map((a: any) => a.playlist_url);
|
||||
}
|
||||
}
|
||||
|
||||
inputArgs = ['-i', videoInput];
|
||||
|
||||
const subtitleFiles: string[] = [];
|
||||
if (subtitles && subtitles.length > 0) {
|
||||
const subFiles: string[] = [];
|
||||
if (subtitles?.length) {
|
||||
for (let i = 0; i < subtitles.length; i++) {
|
||||
const sub = subtitles[i];
|
||||
const subPath = path.join(tempDir, `subtitle_${i}.${sub.url.endsWith('.vtt') ? 'vtt' : 'srt'}`);
|
||||
await downloadFile(sub.url, subPath);
|
||||
subtitleFiles.push(subPath);
|
||||
inputArgs.push('-i', subPath);
|
||||
const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
|
||||
const p = path.join(tempDir, `sub_${i}.${ext}`);
|
||||
await downloadFile(subtitles[i].url, p);
|
||||
subFiles.push(p);
|
||||
}
|
||||
}
|
||||
|
||||
let ffmpegArgs = [
|
||||
...inputArgs,
|
||||
'-map', '0:v',
|
||||
'-map', '0:a',
|
||||
'-c:v', 'copy',
|
||||
'-c:a', 'copy'
|
||||
const args = [
|
||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
||||
'-allowed_extensions', 'ALL',
|
||||
'-f', 'hls',
|
||||
'-extension_picky', '0',
|
||||
'-i', videoInput
|
||||
];
|
||||
|
||||
for (let i = 0; i < subtitleFiles.length; i++) {
|
||||
ffmpegArgs.push('-map', `${i + 1}:s`);
|
||||
ffmpegArgs.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
|
||||
}
|
||||
audioInputs.forEach(audioUrl => {
|
||||
args.push(
|
||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
||||
'-allowed_extensions', 'ALL',
|
||||
'-f', 'hls',
|
||||
'-extension_picky', '0',
|
||||
'-i', audioUrl
|
||||
);
|
||||
});
|
||||
|
||||
if (subtitleFiles.length > 0) {
|
||||
ffmpegArgs.push('-c:s', 'copy');
|
||||
}
|
||||
subFiles.forEach(f => args.push('-i', f));
|
||||
|
||||
if (chapters && chapters.length > 0) {
|
||||
const metadataFile = path.join(tempDir, 'chapters.txt');
|
||||
let chapterContent = ';FFMETADATA1\n';
|
||||
|
||||
for (const chapter of chapters) {
|
||||
const startMs = Math.floor(chapter.start_time * 1000);
|
||||
const endMs = Math.floor(chapter.end_time * 1000);
|
||||
|
||||
chapterContent += '[CHAPTER]\n';
|
||||
chapterContent += `TIMEBASE=1/1000\n`;
|
||||
chapterContent += `START=${startMs}\n`;
|
||||
chapterContent += `END=${endMs}\n`;
|
||||
chapterContent += `title=${chapter.title}\n`;
|
||||
let chaptersInputIndex = -1;
|
||||
if (chapters?.length) {
|
||||
const meta = path.join(tempDir, 'chapters.txt');
|
||||
let txt = ';FFMETADATA1\n';
|
||||
for (const c of chapters) {
|
||||
txt += `[CHAPTER]\nTIMEBASE=1/1000\nSTART=${c.start_time * 1000 | 0}\nEND=${c.end_time * 1000 | 0}\ntitle=${c.title}\n`;
|
||||
}
|
||||
|
||||
fs.writeFileSync(metadataFile, chapterContent);
|
||||
ffmpegArgs.push('-i', metadataFile);
|
||||
ffmpegArgs.push('-map_metadata', `${inputArgs.length / 2}`);
|
||||
fs.writeFileSync(meta, txt);
|
||||
args.push('-i', meta);
|
||||
chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
|
||||
}
|
||||
|
||||
ffmpegArgs.push(outputPath);
|
||||
args.push('-map', '0:v:0');
|
||||
|
||||
const command = `${FFMPEG_PATH} ${ffmpegArgs.join(' ')}`;
|
||||
await execPromise(command, { maxBuffer: 1024 * 1024 * 100 });
|
||||
if (audioInputs.length > 0) {
|
||||
|
||||
audioInputs.forEach((_, i) => {
|
||||
args.push('-map', `${i + 1}:a:0`);
|
||||
|
||||
const audioInfo = (params as any).audio?.[i];
|
||||
if (audioInfo) {
|
||||
const audioStreamIndex = i;
|
||||
if (audioInfo.language) {
|
||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
|
||||
}
|
||||
if (audioInfo.name) {
|
||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
args.push('-map', '0:a:0?');
|
||||
}
|
||||
|
||||
const subtitleStartIndex = 1 + audioInputs.length;
|
||||
subFiles.forEach((_, i) => {
|
||||
args.push('-map', `${subtitleStartIndex + i}:0`);
|
||||
args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
|
||||
});
|
||||
|
||||
if (chaptersInputIndex >= 0) {
|
||||
args.push('-map_metadata', `${chaptersInputIndex}`);
|
||||
}
|
||||
|
||||
args.push('-c:v', 'copy');
|
||||
|
||||
args.push('-c:a', 'copy');
|
||||
|
||||
if (subFiles.length) {
|
||||
args.push('-c:s', 'srt');
|
||||
|
||||
}
|
||||
|
||||
args.push('-y');
|
||||
|
||||
args.push(outputPath);
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
console.log('🎬 Iniciando descarga con FFmpeg...');
|
||||
console.log('📹 Video:', videoInput);
|
||||
if (audioInputs.length > 0) {
|
||||
console.log('🔊 Audio tracks:', audioInputs.length);
|
||||
}
|
||||
console.log('💾 Output:', outputPath);
|
||||
console.log('Args:', args.join(' '));
|
||||
|
||||
const ff = spawn(FFMPEG_PATH, args, {
|
||||
windowsHide: true,
|
||||
stdio: ['ignore', 'pipe', 'pipe']
|
||||
});
|
||||
|
||||
let lastProgress = '';
|
||||
|
||||
ff.stdout.on('data', (data) => {
|
||||
const text = data.toString();
|
||||
console.log('[stdout]', text);
|
||||
});
|
||||
|
||||
ff.stderr.on('data', (data) => {
|
||||
const text = data.toString();
|
||||
|
||||
if (text.includes('time=') || text.includes('speed=')) {
|
||||
const timeMatch = text.match(/time=(\S+)/);
|
||||
const speedMatch = text.match(/speed=(\S+)/);
|
||||
if (timeMatch || speedMatch) {
|
||||
lastProgress = `⏱️ Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
|
||||
console.log(lastProgress);
|
||||
}
|
||||
} else {
|
||||
console.log('[ffmpeg]', text);
|
||||
}
|
||||
});
|
||||
|
||||
ff.on('error', (error) => {
|
||||
console.error('❌ Error al iniciar FFmpeg:', error);
|
||||
reject(error);
|
||||
});
|
||||
|
||||
ff.on('close', (code) => {
|
||||
if (code === 0) {
|
||||
console.log('✅ Descarga completada exitosamente');
|
||||
resolve(true);
|
||||
} else {
|
||||
console.error(`❌ FFmpeg terminó con código: ${code}`);
|
||||
reject(new Error(`FFmpeg exited with code ${code}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
||||
|
||||
@@ -234,14 +306,11 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
|
||||
path: outputPath
|
||||
};
|
||||
|
||||
} catch (error: any) {
|
||||
} catch (e: any) {
|
||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
||||
if (fs.existsSync(outputPath)) {
|
||||
fs.unlinkSync(outputPath);
|
||||
}
|
||||
|
||||
if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
|
||||
const err = new Error('DOWNLOAD_FAILED');
|
||||
(err as any).details = error.message;
|
||||
(err as any).details = e.message;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,20 +17,52 @@ type MatchBody = {
|
||||
matched_id: number | null;
|
||||
};
|
||||
|
||||
type DownloadAnimeBody = {
|
||||
type DownloadAnimeBody =
|
||||
| {
|
||||
anilist_id: number;
|
||||
episode_number: number;
|
||||
stream_url: string;
|
||||
quality?: string;
|
||||
subtitles?: Array<{
|
||||
stream_url: string; // media playlist FINAL
|
||||
is_master?: false;
|
||||
subtitles?: {
|
||||
language: string;
|
||||
url: string;
|
||||
}>;
|
||||
chapters?: Array<{
|
||||
}[];
|
||||
chapters?: {
|
||||
title: string;
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
}>;
|
||||
}[];
|
||||
}
|
||||
| {
|
||||
anilist_id: number;
|
||||
episode_number: number;
|
||||
stream_url: string; // master.m3u8
|
||||
is_master: true;
|
||||
|
||||
variant: {
|
||||
resolution: string;
|
||||
bandwidth?: number;
|
||||
codecs?: string;
|
||||
playlist_url: string;
|
||||
};
|
||||
|
||||
audio?: {
|
||||
group?: string;
|
||||
language?: string;
|
||||
name?: string;
|
||||
playlist_url: string;
|
||||
}[];
|
||||
|
||||
subtitles?: {
|
||||
language: string;
|
||||
url: string;
|
||||
}[];
|
||||
|
||||
chapters?: {
|
||||
title: string;
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
type DownloadBookBody = {
|
||||
@@ -212,17 +244,30 @@ export async function getPage(request: FastifyRequest, reply: FastifyReply) {
|
||||
return reply.status(400).send();
|
||||
}
|
||||
|
||||
function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
|
||||
const params = new URLSearchParams({ url: rawUrl });
|
||||
|
||||
for (const [key, value] of Object.entries(headers)) {
|
||||
params.set(key.toLowerCase(), value);
|
||||
}
|
||||
|
||||
return `http://localhost:54322/api/proxy?${params.toString()}`;
|
||||
}
|
||||
|
||||
export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
|
||||
try {
|
||||
const {
|
||||
anilist_id,
|
||||
episode_number,
|
||||
stream_url,
|
||||
quality,
|
||||
is_master,
|
||||
subtitles,
|
||||
chapters
|
||||
} = request.body;
|
||||
|
||||
const clientHeaders = (request.body as any).headers || {};
|
||||
|
||||
// Validación básica
|
||||
if (!anilist_id || !episode_number || !stream_url) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_REQUIRED_FIELDS',
|
||||
@@ -230,14 +275,58 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
|
||||
});
|
||||
}
|
||||
|
||||
const result = await downloadService.downloadAnimeEpisode({
|
||||
// Proxy del stream URL principal
|
||||
const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
|
||||
console.log('Stream URL:', proxyUrl);
|
||||
|
||||
// Proxy de subtítulos
|
||||
const proxiedSubs = subtitles?.map(sub => ({
|
||||
...sub,
|
||||
url: buildProxyUrl(sub.url, clientHeaders)
|
||||
}));
|
||||
|
||||
// Preparar parámetros base
|
||||
const downloadParams: any = {
|
||||
anilistId: anilist_id,
|
||||
episodeNumber: episode_number,
|
||||
streamUrl: stream_url,
|
||||
quality,
|
||||
subtitles,
|
||||
streamUrl: proxyUrl,
|
||||
subtitles: proxiedSubs,
|
||||
chapters
|
||||
});
|
||||
};
|
||||
|
||||
// Si es master playlist, agregar campos adicionales
|
||||
if (is_master === true) {
|
||||
const { variant, audio } = request.body as any;
|
||||
|
||||
if (!variant || !variant.playlist_url) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_VARIANT',
|
||||
message: 'variant with playlist_url is required when is_master is true'
|
||||
});
|
||||
}
|
||||
|
||||
downloadParams.is_master = true;
|
||||
|
||||
// Proxy del variant playlist
|
||||
downloadParams.variant = {
|
||||
...variant,
|
||||
playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
|
||||
};
|
||||
|
||||
// Proxy de audio tracks si existen
|
||||
if (audio && audio.length > 0) {
|
||||
downloadParams.audio = audio.map((a: any) => ({
|
||||
...a,
|
||||
playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
|
||||
}));
|
||||
}
|
||||
|
||||
console.log('Master playlist detected');
|
||||
console.log('Variant:', downloadParams.variant.resolution);
|
||||
console.log('Audio tracks:', downloadParams.audio?.length || 0);
|
||||
}
|
||||
|
||||
const result = await downloadService.downloadAnimeEpisode(downloadParams);
|
||||
|
||||
if (result.status === 'ALREADY_EXISTS') {
|
||||
return reply.status(409).send(result);
|
||||
@@ -251,6 +340,10 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
|
||||
return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
|
||||
}
|
||||
|
||||
if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
|
||||
return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
|
||||
}
|
||||
|
||||
if (err.message === 'DOWNLOAD_FAILED') {
|
||||
return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
|
||||
}
|
||||
|
||||
@@ -34,7 +34,14 @@ const AnimePlayer = (function() {
|
||||
epTitle: null,
|
||||
prevBtn: null,
|
||||
nextBtn: null,
|
||||
mpvBtn: null
|
||||
mpvBtn: null,
|
||||
downloadBtn: null,
|
||||
downloadModal: null,
|
||||
dlQualityList: null,
|
||||
dlAudioList: null,
|
||||
dlSubsList: null,
|
||||
dlConfirmBtn: null,
|
||||
dlCancelBtn: null
|
||||
};
|
||||
|
||||
function init(animeId, initialSource, isLocal, animeData) {
|
||||
@@ -57,8 +64,46 @@ const AnimePlayer = (function() {
|
||||
els.video = document.getElementById('player');
|
||||
els.loader = document.getElementById('player-loading');
|
||||
els.loaderText = document.getElementById('player-loading-text');
|
||||
els.downloadBtn = document.getElementById('download-btn');
|
||||
if (els.downloadBtn) {
|
||||
els.downloadBtn.addEventListener('click', downloadEpisode);
|
||||
}
|
||||
els.downloadModal = document.getElementById('download-modal');
|
||||
els.dlQualityList = document.getElementById('dl-quality-list');
|
||||
els.dlAudioList = document.getElementById('dl-audio-list');
|
||||
els.dlSubsList = document.getElementById('dl-subs-list');
|
||||
els.dlConfirmBtn = document.getElementById('confirm-dl-btn');
|
||||
els.dlCancelBtn = document.getElementById('cancel-dl-btn');
|
||||
|
||||
const closeDlModalBtn = document.getElementById('close-download-modal');
|
||||
|
||||
if (els.dlConfirmBtn) els.dlConfirmBtn.onclick = executeDownload;
|
||||
if (els.dlCancelBtn) els.dlCancelBtn.onclick = () => els.downloadModal.style.display = 'none';
|
||||
if (closeDlModalBtn) closeDlModalBtn.onclick = () => els.downloadModal.style.display = 'none';
|
||||
const closeModal = () => {
|
||||
if (els.downloadModal) {
|
||||
els.downloadModal.classList.remove('show');
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
if(!els.downloadModal.classList.contains('show')) {
|
||||
els.downloadModal.style.display = 'none';
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
if (els.dlCancelBtn) els.dlCancelBtn.onclick = closeModal;
|
||||
|
||||
if (closeDlModalBtn) closeDlModalBtn.onclick = closeModal;
|
||||
els.mpvBtn = document.getElementById('mpv-btn');
|
||||
if (els.downloadModal) {
|
||||
els.downloadModal.addEventListener('click', (e) => {
|
||||
|
||||
if (e.target === els.downloadModal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (els.mpvBtn) els.mpvBtn.addEventListener('click', openInMPV);
|
||||
|
||||
els.serverSelect = document.getElementById('server-select');
|
||||
@@ -183,6 +228,11 @@ const AnimePlayer = (function() {
|
||||
|
||||
_currentEpisode = targetEp;
|
||||
|
||||
if (els.downloadBtn) {
|
||||
els.downloadBtn.style.display = _isLocal ? 'none' : 'flex';
|
||||
resetDownloadButtonIcon();
|
||||
}
|
||||
|
||||
if(els.epTitle) els.epTitle.innerText = `Episode ${targetEp}`;
|
||||
if(els.prevBtn) els.prevBtn.disabled = (_currentEpisode <= 1);
|
||||
if(els.nextBtn) els.nextBtn.disabled = (_currentEpisode >= _totalEpisodes);
|
||||
@@ -215,6 +265,256 @@ const AnimePlayer = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadEpisode() {
|
||||
if (!_rawVideoData || !_rawVideoData.url) {
|
||||
alert("Stream not loaded yet.");
|
||||
return;
|
||||
}
|
||||
|
||||
const isInFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
|
||||
|
||||
if (isInFullscreen) {
|
||||
try {
|
||||
if (document.exitFullscreen) {
|
||||
await document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
await document.webkitExitFullscreen();
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
} catch (err) {
|
||||
console.warn("Error al salir de fullscreen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const isM3U8 = hlsInstance && hlsInstance.levels && hlsInstance.levels.length > 0;
|
||||
const hasMultipleAudio = hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 1;
|
||||
|
||||
const hasSubs = _currentSubtitles && _currentSubtitles.length > 0;
|
||||
|
||||
if (isM3U8 || hasMultipleAudio || hasSubs) {
|
||||
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
openDownloadModal();
|
||||
} else {
|
||||
|
||||
executeDownload(null, true);
|
||||
}
|
||||
}
|
||||
|
||||
function openDownloadModal() {
|
||||
if(!els.downloadModal) {
|
||||
console.error("Modal element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
els.dlQualityList.innerHTML = '';
|
||||
els.dlAudioList.innerHTML = '';
|
||||
els.dlSubsList.innerHTML = '';
|
||||
|
||||
let showQuality = false;
|
||||
let showAudio = false;
|
||||
let showSubs = false;
|
||||
|
||||
if (hlsInstance && hlsInstance.levels && hlsInstance.levels.length > 0) {
|
||||
showQuality = true;
|
||||
|
||||
const levels = hlsInstance.levels.map((l, index) => ({...l, originalIndex: index}))
|
||||
.sort((a, b) => b.height - a.height);
|
||||
|
||||
levels.forEach((level, i) => {
|
||||
const isSelected = i === 0;
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'dl-item';
|
||||
div.innerHTML = `
|
||||
<input type="radio" name="dl-quality" value="${level.originalIndex}" ${isSelected ? 'checked' : ''}>
|
||||
<span>${level.height}p</span>
|
||||
<span class="tag-info">${(level.bitrate / 1000000).toFixed(1)} Mbps</span>
|
||||
`;
|
||||
div.onclick = (e) => {
|
||||
if(e.target.tagName !== 'INPUT') div.querySelector('input').checked = true;
|
||||
};
|
||||
els.dlQualityList.appendChild(div);
|
||||
});
|
||||
}
|
||||
document.getElementById('dl-quality-section').style.display = showQuality ? 'block' : 'none';
|
||||
|
||||
if (hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 0) {
|
||||
showAudio = true;
|
||||
hlsInstance.audioTracks.forEach((track, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'dl-item';
|
||||
|
||||
const isCurrent = hlsInstance.audioTrack === index;
|
||||
|
||||
div.innerHTML = `
|
||||
<input type="checkbox" name="dl-audio" value="${index}" checked>
|
||||
<span>${track.name || track.lang || `Audio ${index+1}`}</span>
|
||||
<span class="tag-info">${track.lang || 'unk'}</span>
|
||||
`;
|
||||
div.onclick = (e) => {
|
||||
if(e.target.tagName !== 'INPUT') {
|
||||
const cb = div.querySelector('input');
|
||||
cb.checked = !cb.checked;
|
||||
}
|
||||
};
|
||||
els.dlAudioList.appendChild(div);
|
||||
});
|
||||
}
|
||||
document.getElementById('dl-audio-section').style.display = showAudio ? 'block' : 'none';
|
||||
|
||||
if (_currentSubtitles && _currentSubtitles.length > 0) {
|
||||
showSubs = true;
|
||||
_currentSubtitles.forEach((sub, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'dl-item';
|
||||
div.innerHTML = `
|
||||
<input type="checkbox" name="dl-subs" value="${index}" checked>
|
||||
<span>${sub.label || sub.language || 'Unknown'}</span>
|
||||
`;
|
||||
div.onclick = (e) => {
|
||||
if(e.target.tagName !== 'INPUT') {
|
||||
const cb = div.querySelector('input');
|
||||
cb.checked = !cb.checked;
|
||||
}
|
||||
};
|
||||
els.dlSubsList.appendChild(div);
|
||||
});
|
||||
}
|
||||
document.getElementById('dl-subs-section').style.display = showSubs ? 'block' : 'none';
|
||||
|
||||
els.downloadModal.style.display = 'flex';
|
||||
|
||||
els.downloadModal.offsetHeight;
|
||||
els.downloadModal.classList.add('show');
|
||||
}
|
||||
|
||||
async function executeDownload(e, skipModal = false) {
|
||||
if(els.downloadModal) {
|
||||
els.downloadModal.classList.remove('show');
|
||||
setTimeout(() => els.downloadModal.style.display = 'none', 300);
|
||||
}
|
||||
const btn = els.downloadBtn;
|
||||
const originalBtnContent = btn.innerHTML;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = `<div class="spinner" style="width:18px; height:18px; border-width:2px;"></div>`;
|
||||
|
||||
let body = {
|
||||
anilist_id: parseInt(_animeId),
|
||||
episode_number: parseInt(_currentEpisode),
|
||||
stream_url: _rawVideoData.url,
|
||||
headers: _rawVideoData.headers || {},
|
||||
chapters: _skipIntervals.map(i => ({
|
||||
title: i.type === 'op' ? 'Opening' : 'Ending',
|
||||
start_time: i.startTime,
|
||||
end_time: i.endTime
|
||||
})),
|
||||
subtitles: []
|
||||
};
|
||||
|
||||
if (skipModal) {
|
||||
|
||||
if (_currentSubtitles) {
|
||||
body.subtitles = _currentSubtitles.map(sub => ({
|
||||
language: sub.label || 'Unknown',
|
||||
url: sub.src
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
|
||||
const selectedSubs = Array.from(els.dlSubsList.querySelectorAll('input:checked'));
|
||||
body.subtitles = selectedSubs.map(cb => {
|
||||
const i = parseInt(cb.value);
|
||||
return {
|
||||
language: _currentSubtitles[i].label || 'Unknown',
|
||||
url: _currentSubtitles[i].src
|
||||
};
|
||||
});
|
||||
|
||||
const isQualityVisible = document.getElementById('dl-quality-section').style.display !== 'none';
|
||||
|
||||
if (isQualityVisible && hlsInstance && hlsInstance.levels) {
|
||||
body.is_master = true;
|
||||
|
||||
const qualityInput = document.querySelector('input[name="dl-quality"]:checked');
|
||||
const qualityIndex = qualityInput ? parseInt(qualityInput.value) : 0;
|
||||
const level = hlsInstance.levels[qualityIndex];
|
||||
|
||||
if (level) {
|
||||
body.variant = {
|
||||
resolution: level.width ? `${level.width}x${level.height}` : '1920x1080',
|
||||
bandwidth: level.bitrate,
|
||||
codecs: level.attrs ? level.attrs.CODECS : '',
|
||||
playlist_url: level.url
|
||||
};
|
||||
}
|
||||
|
||||
const audioInputs = document.querySelectorAll('input[name="dl-audio"]:checked');
|
||||
if (audioInputs.length > 0 && hlsInstance.audioTracks) {
|
||||
body.audio = Array.from(audioInputs).map(input => {
|
||||
const i = parseInt(input.value);
|
||||
const track = hlsInstance.audioTracks[i];
|
||||
return {
|
||||
group: track.groupId || 'audio',
|
||||
language: track.lang || 'unk',
|
||||
name: track.name || `Audio ${i}`,
|
||||
playlist_url: track.url
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('/api/library/download/anime', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token ? `Bearer ${token}` : ''
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
|
||||
} else if (res.status === 409) {
|
||||
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`;
|
||||
} else {
|
||||
|
||||
console.error("Download Error:", data);
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Request failed:", err);
|
||||
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
|
||||
} finally {
|
||||
|
||||
setTimeout(() => {
|
||||
if (btn) {
|
||||
btn.disabled = false;
|
||||
resetDownloadButtonIcon();
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function resetDownloadButtonIcon() {
|
||||
if (!els.downloadBtn) return;
|
||||
els.downloadBtn.innerHTML = `
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
function closePlayer() {
|
||||
if (plyrInstance) plyrInstance.destroy();
|
||||
if (hlsInstance) hlsInstance.destroy();
|
||||
@@ -508,40 +808,34 @@ const AnimePlayer = (function() {
|
||||
const controls = plyrEl.querySelector('.plyr__controls');
|
||||
if (!controls || controls.querySelector('#quality-control-wrapper')) return;
|
||||
|
||||
// 1. Crear el Wrapper
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'plyr__controls__item plyr__custom-select-wrapper';
|
||||
wrapper.id = 'quality-control-wrapper';
|
||||
|
||||
// 2. Crear el Botón Visual (Fake)
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'plyr__custom-control-btn';
|
||||
// Icono + Texto Inicial
|
||||
|
||||
btn.innerHTML = `${ICONS.settings} <span class="label-text">Auto</span>`;
|
||||
|
||||
// 3. Crear el Select Real (Invisible)
|
||||
const select = document.createElement('select');
|
||||
select.className = 'plyr__sr-only-select'; // Clase auxiliar si quieres depurar, sino usa el CSS wrapper
|
||||
select.className = 'plyr__sr-only-select';
|
||||
|
||||
// Opción AUTO
|
||||
const autoOpt = document.createElement('option');
|
||||
autoOpt.value = -1;
|
||||
autoOpt.textContent = 'Auto';
|
||||
select.appendChild(autoOpt);
|
||||
|
||||
// Opciones de Niveles
|
||||
levels.forEach((l, i) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = i;
|
||||
opt.textContent = `${l.height}p`; // Texto que sale en el dropdown nativo
|
||||
opt.textContent = `${l.height}p`;
|
||||
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Sincronizar estado inicial
|
||||
select.value = hls.currentLevel;
|
||||
updateLabel(select.value);
|
||||
|
||||
// Evento Change
|
||||
select.onchange = () => {
|
||||
hls.currentLevel = Number(select.value);
|
||||
updateLabel(select.value);
|
||||
@@ -551,7 +845,7 @@ const AnimePlayer = (function() {
|
||||
const index = Number(val);
|
||||
let text = 'Auto';
|
||||
if (index !== -1 && levels[index]) {
|
||||
// Solo el número + p (ej: 720p)
|
||||
|
||||
text = `${levels[index].height}p`;
|
||||
}
|
||||
btn.innerHTML = `<span class="label-text">${text}</span>`;
|
||||
@@ -560,8 +854,6 @@ const AnimePlayer = (function() {
|
||||
wrapper.appendChild(select);
|
||||
wrapper.appendChild(btn);
|
||||
|
||||
// Insertar en controles Plyr (antes del botón de pantalla completa o ajustes)
|
||||
// Insertamos antes del 5º elemento (usualmente settings o fullscreen)
|
||||
const insertIndex = controls.children.length > 4 ? 4 : controls.children.length - 1;
|
||||
controls.insertBefore(wrapper, controls.children[insertIndex]);
|
||||
}
|
||||
@@ -573,17 +865,14 @@ const AnimePlayer = (function() {
|
||||
const controls = plyrEl.querySelector('.plyr__controls');
|
||||
if (!controls || controls.querySelector('#audio-control-wrapper')) return;
|
||||
|
||||
// 1. Wrapper
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'plyr__controls__item plyr__custom-select-wrapper';
|
||||
wrapper.id = 'audio-control-wrapper';
|
||||
|
||||
// 2. Botón Visual
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'plyr__custom-control-btn';
|
||||
btn.innerHTML = `<span class="label-text">Audio 1</span>`;
|
||||
|
||||
// 3. Select Invisible
|
||||
const select = document.createElement('select');
|
||||
|
||||
hls.audioTracks.forEach((t, i) => {
|
||||
@@ -605,10 +894,8 @@ const AnimePlayer = (function() {
|
||||
const index = Number(val);
|
||||
const track = hls.audioTracks[index];
|
||||
|
||||
// Priorizamos el idioma (lang), luego el nombre
|
||||
let rawText = track.lang || track.name || `A${index + 1}`;
|
||||
|
||||
// Tomamos solo las 2 primeras letras y las pasamos a Mayúsculas
|
||||
let shortText = rawText.substring(0, 2).toUpperCase();
|
||||
|
||||
btn.querySelector('.label-text').innerText = shortText;
|
||||
@@ -617,7 +904,6 @@ const AnimePlayer = (function() {
|
||||
wrapper.appendChild(select);
|
||||
wrapper.appendChild(btn);
|
||||
|
||||
// Insertar antes del selector de calidad si existe, o en la posición 4
|
||||
const qualityWrapper = controls.querySelector('#quality-control-wrapper');
|
||||
if(qualityWrapper) {
|
||||
controls.insertBefore(wrapper, qualityWrapper);
|
||||
|
||||
@@ -60,6 +60,13 @@
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="settings-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
@@ -82,6 +89,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-overlay" id="download-modal">
|
||||
<div class="modal-content download-settings-content">
|
||||
<button class="modal-close" id="close-download-modal">✕</button>
|
||||
<h2 class="modal-title">Download Settings</h2>
|
||||
|
||||
<div class="download-sections-wrapper">
|
||||
<div id="dl-quality-section" class="dl-section" style="display:none;">
|
||||
<h3>Video Quality</h3>
|
||||
<div class="dl-list" id="dl-quality-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="dl-audio-section" class="dl-section" style="display:none;">
|
||||
<h3>Audio Tracks</h3>
|
||||
<div class="dl-list" id="dl-audio-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="dl-subs-section" class="dl-section">
|
||||
<h3>Subtitles</h3>
|
||||
<div class="dl-list" id="dl-subs-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dl-actions">
|
||||
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
|
||||
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container" id="main-content">
|
||||
|
||||
@@ -600,3 +600,320 @@ body.stop-scrolling {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.download-settings-content {
|
||||
background: #1a1a1a;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 85vh;
|
||||
border: 1px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.download-sections-wrapper {
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dl-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dl-section h3 {
|
||||
font-size: 0.9rem;
|
||||
color: var(--brand-color-light);
|
||||
margin-bottom: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.dl-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dl-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dl-item:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.dl-item input[type="radio"],
|
||||
.dl-item input[type="checkbox"] {
|
||||
accent-color: var(--brand-color);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dl-item span {
|
||||
font-size: 0.9rem;
|
||||
color: #eee;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dl-item .tag-info {
|
||||
font-size: 0.75rem;
|
||||
color: #aaa;
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dl-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: #ccc;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: var(--brand-color);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-confirm:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
/* =========================================
|
||||
MODAL DE DESCARGAS - REDISEÑO "GLASS"
|
||||
========================================= */
|
||||
|
||||
#download-modal {
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.6); /* Fondo oscurecido */
|
||||
backdrop-filter: blur(8px); /* Desenfoque del fondo */
|
||||
z-index: 2147483647 !important; /* Encima de todo */
|
||||
display: none; /* Controlado por JS/Clases */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none; /* Por defecto no bloquea, JS lo activa */
|
||||
}
|
||||
|
||||
/* Estado visible activado por JS */
|
||||
#download-modal.show {
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.download-settings-content {
|
||||
background: rgba(20, 20, 20, 0.85); /* Fondo semitransparente oscuro */
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
max-height: 85vh;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px; /* Bordes más redondeados como anime.css */
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#download-modal.show .download-settings-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Botón de cerrar (X) */
|
||||
.download-settings-content .modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.download-settings-content .modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0.5));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Wrappers internos */
|
||||
.download-sections-wrapper {
|
||||
overflow-y: auto;
|
||||
padding-right: 8px; /* Espacio para scrollbar */
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Scrollbar personalizado fino */
|
||||
.download-sections-wrapper::-webkit-scrollbar { width: 6px; }
|
||||
.download-sections-wrapper::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
|
||||
.download-sections-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
.download-sections-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
|
||||
|
||||
.dl-section { margin-bottom: 1.5rem; }
|
||||
|
||||
.dl-section h3 {
|
||||
font-size: 0.75rem;
|
||||
color: var(--brand-color-light); /* Morado claro */
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dl-section h3::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, rgba(139, 92, 246, 0.3), transparent);
|
||||
}
|
||||
|
||||
.dl-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
/* Items de la lista */
|
||||
.dl-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dl-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Inputs nativos con color de marca */
|
||||
.dl-item input[type="radio"],
|
||||
.dl-item input[type="checkbox"] {
|
||||
accent-color: var(--brand-color);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dl-item span {
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255,255,255,0.9);
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dl-item .tag-info {
|
||||
font-size: 0.7rem;
|
||||
color: #ccc;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* Pie del modal (Botones) */
|
||||
.dl-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: var(--brand-color);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn-confirm:hover {
|
||||
background: #7c3aed; /* Un tono más oscuro del brand */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
Reference in New Issue
Block a user