1952 lines
71 KiB
JavaScript
1952 lines
71 KiB
JavaScript
const AnimePlayer = (function() {
|
|
let _animeId = null;
|
|
let _currentEpisode = 0;
|
|
let _entrySource = 'anilist';
|
|
let _audioMode = 'sub';
|
|
let _isLocal = false;
|
|
let _malId = null;
|
|
let _skipBtn = null;
|
|
let _skipIntervals = [];
|
|
let _progressUpdated = false;
|
|
let _animeTitle = "Anime";
|
|
let _rpcActive = false;
|
|
let _rawVideoData = null;
|
|
let _currentSubtitles = [];
|
|
let _localEntryId = null;
|
|
let _totalEpisodes = 0;
|
|
let _manualExtensionId = null;
|
|
let _activeSubtitleIndex = -1;
|
|
let _roomMode = false;
|
|
let _isRoomHost = false;
|
|
let _roomWebSocket = null;
|
|
|
|
let hlsInstance = null;
|
|
let subtitleRenderer = null;
|
|
let cursorTimeout = null;
|
|
let settingsPanelActive = false;
|
|
let _settingsView = 'main';
|
|
|
|
const els = {
|
|
wrapper: null,
|
|
playerWrapper: null,
|
|
playerContainer: null,
|
|
video: null,
|
|
loader: null,
|
|
loaderText: null,
|
|
serverSelect: null,
|
|
extSelect: null,
|
|
subDubToggle: null,
|
|
epTitle: null,
|
|
prevBtn: null,
|
|
nextBtn: null,
|
|
mpvBtn: null,
|
|
downloadBtn: null,
|
|
downloadModal: null,
|
|
dlQualityList: null,
|
|
dlAudioList: null,
|
|
dlSubsList: null,
|
|
dlConfirmBtn: null,
|
|
dlCancelBtn: null,
|
|
manualMatchBtn: null,
|
|
|
|
// Custom Controls
|
|
playPauseBtn: null,
|
|
volumeBtn: null,
|
|
volumeSlider: null,
|
|
timeDisplay: null,
|
|
settingsBtn: null,
|
|
settingsPanel: null,
|
|
fullscreenBtn: null,
|
|
progressContainer: null,
|
|
progressPlayed: null,
|
|
progressBuffer: null,
|
|
progressHandle: null,
|
|
subtitlesCanvas: null
|
|
};
|
|
|
|
function init(animeId, initialSource, isLocal, animeData, roomMode = false) {
|
|
_roomMode = roomMode;
|
|
_animeId = animeId;
|
|
_entrySource = initialSource || 'anilist';
|
|
_isLocal = isLocal;
|
|
_totalEpisodes = animeData.episodes || 1000;
|
|
|
|
if (animeData.title) {
|
|
_animeTitle = animeData.title.romaji || animeData.title.english || "Anime";
|
|
}
|
|
|
|
initElements();
|
|
setupEventListeners();
|
|
|
|
if (_roomMode) {
|
|
if(els.playerWrapper) {
|
|
els.playerWrapper.style.display = 'block';
|
|
els.playerWrapper.classList.add('room-mode');
|
|
}
|
|
} else {
|
|
loadExtensionsList();
|
|
}
|
|
}
|
|
|
|
function initElements() {
|
|
els.wrapper = document.getElementById('hero-wrapper');
|
|
els.playerWrapper = document.getElementById('player-wrapper');
|
|
els.playerContainer = els.playerWrapper?.querySelector('.player-container');
|
|
els.video = document.getElementById('player');
|
|
els.loader = document.getElementById('player-loading');
|
|
els.loaderText = document.getElementById('player-loading-text');
|
|
|
|
// Header controls
|
|
els.downloadBtn = document.getElementById('download-btn');
|
|
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');
|
|
els.manualMatchBtn = document.getElementById('manual-match-btn');
|
|
els.mpvBtn = document.getElementById('mpv-btn');
|
|
els.serverSelect = document.getElementById('server-select');
|
|
els.extSelect = document.getElementById('extension-select');
|
|
els.subDubToggle = document.getElementById('sd-toggle');
|
|
els.epTitle = document.getElementById('player-episode-title');
|
|
els.prevBtn = document.getElementById('prev-ep-btn');
|
|
els.nextBtn = document.getElementById('next-ep-btn');
|
|
|
|
// Custom controls
|
|
els.playPauseBtn = document.getElementById('play-pause-btn');
|
|
els.volumeBtn = document.getElementById('volume-btn');
|
|
els.volumeSlider = document.getElementById('volume-slider');
|
|
els.timeDisplay = document.getElementById('time-display');
|
|
els.settingsBtn = document.getElementById('settings-btn');
|
|
els.settingsPanel = document.getElementById('settings-panel');
|
|
els.fullscreenBtn = document.getElementById('fullscreen-btn');
|
|
els.progressContainer = document.querySelector('.progress-container');
|
|
els.progressPlayed = document.querySelector('.progress-played');
|
|
els.progressBuffer = document.querySelector('.progress-buffer');
|
|
els.progressHandle = document.querySelector('.progress-handle');
|
|
|
|
els.subtitlesCanvas = document.getElementById('subtitles-canvas');
|
|
|
|
if (!document.getElementById('skip-overlay-btn')) {
|
|
const btn = document.createElement('button');
|
|
btn.id = 'skip-overlay-btn';
|
|
if(els.playerContainer) els.playerContainer.appendChild(btn);
|
|
_skipBtn = btn;
|
|
} else {
|
|
_skipBtn = document.getElementById('skip-overlay-btn');
|
|
}
|
|
}
|
|
|
|
function setupEventListeners() {
|
|
if(!_roomMode) {
|
|
const closeBtn = document.getElementById('close-player-btn');
|
|
if(closeBtn) closeBtn.addEventListener('click', closePlayer);
|
|
}
|
|
|
|
if(els.prevBtn) els.prevBtn.onclick = () => playEpisode(_currentEpisode - 1);
|
|
if(els.nextBtn) els.nextBtn.onclick = () => playEpisode(_currentEpisode + 1);
|
|
|
|
// Skip button
|
|
if(_skipBtn) _skipBtn.onclick = () => handleOverlayClick();
|
|
|
|
// Audio mode toggle
|
|
if(els.subDubToggle) els.subDubToggle.addEventListener('click', toggleAudioMode);
|
|
|
|
// Server/Extension changes
|
|
if(els.serverSelect) els.serverSelect.addEventListener('change', () => loadStream());
|
|
if(els.extSelect) els.extSelect.addEventListener('change', () => handleExtensionChange(true));
|
|
|
|
// Manual match
|
|
if (els.manualMatchBtn) {
|
|
els.manualMatchBtn.addEventListener('click', openMatchModal);
|
|
}
|
|
|
|
// Download
|
|
if (els.downloadBtn) {
|
|
els.downloadBtn.addEventListener('click', downloadEpisode);
|
|
}
|
|
if (els.dlConfirmBtn) els.dlConfirmBtn.onclick = executeDownload;
|
|
if (els.dlCancelBtn) els.dlCancelBtn.onclick = closeDownloadModal;
|
|
const closeDlModalBtn = document.getElementById('close-download-modal');
|
|
if (closeDlModalBtn) closeDlModalBtn.onclick = closeDownloadModal;
|
|
if (els.downloadModal) {
|
|
els.downloadModal.addEventListener('click', (e) => {
|
|
if (e.target === els.downloadModal) closeDownloadModal();
|
|
});
|
|
}
|
|
|
|
// MPV
|
|
if(els.mpvBtn) els.mpvBtn.addEventListener('click', openInMPV);
|
|
|
|
// Custom controls
|
|
setupCustomControls();
|
|
|
|
// Cursor management
|
|
setupCursorManagement();
|
|
|
|
// Keyboard shortcuts
|
|
setupKeyboardShortcuts();
|
|
}
|
|
|
|
function loadVideoFromRoom(videoData) {
|
|
console.log('AnimePlayer.loadVideoFromRoom called with:', videoData);
|
|
|
|
if (!videoData || !videoData.url) {
|
|
console.error('Invalid video data provided to loadVideoFromRoom');
|
|
return;
|
|
}
|
|
|
|
if (videoData.malId) _malId = videoData.malId;
|
|
if (videoData.episode) _currentEpisode = parseInt(videoData.episode);
|
|
|
|
_skipIntervals = [];
|
|
if (els.progressContainer) {
|
|
els.progressContainer.querySelectorAll('.skip-range, .skip-cut').forEach(e => e.remove());
|
|
}
|
|
if (_skipBtn) _skipBtn.classList.remove('visible');
|
|
|
|
_currentSubtitles = videoData.subtitles || [];
|
|
|
|
if (els.loader) els.loader.style.display = 'none';
|
|
|
|
initVideoPlayer(videoData.url, videoData.type || 'm3u8', videoData.subtitles || []);
|
|
}
|
|
|
|
function setupCustomControls() {
|
|
// ELIMINADO: if (_roomMode && !_isRoomHost) return;
|
|
// Ahora permitimos que el código fluya para habilitar volumen y ajustes a todos
|
|
|
|
// 1. Play/Pause (SOLO HOST)
|
|
if(els.playPauseBtn) {
|
|
els.playPauseBtn.onclick = togglePlayPause; // La validación de permiso se hará dentro de togglePlayPause
|
|
}
|
|
if(els.video) {
|
|
els.video.onclick = togglePlayPause; // Click en video para pausar
|
|
els.video.ondblclick = toggleFullscreen; // Doble click siempre permitido
|
|
}
|
|
|
|
// 2. Volume (TODOS)
|
|
if(els.volumeBtn) {
|
|
els.volumeBtn.onclick = toggleMute;
|
|
}
|
|
if(els.volumeSlider) {
|
|
els.volumeSlider.oninput = (e) => {
|
|
setVolume(e.target.value / 100);
|
|
};
|
|
}
|
|
|
|
// 3. Settings (TODOS - Aquí están los subtítulos y audio)
|
|
if(els.settingsBtn) {
|
|
els.settingsBtn.onclick = (e) => {
|
|
e.stopPropagation();
|
|
settingsPanelActive = !settingsPanelActive;
|
|
if (settingsPanelActive) {
|
|
_settingsView = 'main';
|
|
buildSettingsPanel();
|
|
els.settingsPanel?.classList.add('active');
|
|
} else {
|
|
els.settingsPanel?.classList.remove('active');
|
|
}
|
|
};
|
|
}
|
|
|
|
// Close settings when clicking outside (TODOS)
|
|
document.onclick = (e) => {
|
|
if (settingsPanelActive && els.settingsPanel &&
|
|
!els.settingsPanel.contains(e.target) &&
|
|
!els.settingsBtn.contains(e.target)) {
|
|
settingsPanelActive = false;
|
|
els.settingsPanel.classList.remove('active');
|
|
}
|
|
};
|
|
|
|
// 4. Fullscreen (TODOS)
|
|
if(els.fullscreenBtn) {
|
|
els.fullscreenBtn.onclick = toggleFullscreen;
|
|
}
|
|
|
|
// 5. Progress bar (SOLO HOST para buscar, TODOS para ver)
|
|
if(els.progressContainer) {
|
|
// El listener se añade, pero seekToPosition bloqueará a los invitados
|
|
els.progressContainer.onclick = seekToPosition;
|
|
}
|
|
|
|
// 6. Video events (TODOS - Necesarios para actualizar la UI localmente)
|
|
if(els.video) {
|
|
els.video.onplay = onPlay;
|
|
els.video.onpause = onPause;
|
|
els.video.ontimeupdate = onTimeUpdate;
|
|
els.video.onprogress = onProgress;
|
|
els.video.onloadedmetadata = onLoadedMetadata;
|
|
els.video.onended = onEnded;
|
|
els.video.onvolumechange = onVolumeChange;
|
|
els.video.onseeked = onSeeked;
|
|
}
|
|
}
|
|
|
|
function setupCursorManagement() {
|
|
if (!els.playerContainer) return;
|
|
|
|
const showCursor = () => {
|
|
els.playerContainer.classList.add('show-cursor');
|
|
clearTimeout(cursorTimeout);
|
|
if (!els.video?.paused) {
|
|
cursorTimeout = setTimeout(() => {
|
|
els.playerContainer.classList.remove('show-cursor');
|
|
}, 3000);
|
|
}
|
|
};
|
|
|
|
els.playerContainer.addEventListener('mousemove', showCursor);
|
|
els.playerContainer.addEventListener('mouseenter', showCursor);
|
|
|
|
els.video?.addEventListener('pause', () => {
|
|
clearTimeout(cursorTimeout);
|
|
els.playerContainer.classList.add('show-cursor');
|
|
});
|
|
|
|
els.video?.addEventListener('play', () => {
|
|
showCursor();
|
|
});
|
|
}
|
|
|
|
function setupKeyboardShortcuts() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (!els.playerWrapper || els.playerWrapper.style.display === 'none') return;
|
|
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|
|
|
// En room mode, solo el host puede usar shortcuts de control
|
|
if (_roomMode && !_isRoomHost) {
|
|
// Permitir fullscreen y volumen para todos
|
|
if (e.key.toLowerCase() === 'f') {
|
|
e.preventDefault();
|
|
toggleFullscreen();
|
|
} else if (e.key.toLowerCase() === 'm') {
|
|
e.preventDefault();
|
|
toggleMute();
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
adjustVolume(0.1);
|
|
} else if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
adjustVolume(-0.1);
|
|
}
|
|
return;
|
|
}
|
|
|
|
switch(e.key.toLowerCase()) {
|
|
case ' ':
|
|
case 'k':
|
|
e.preventDefault();
|
|
togglePlayPause();
|
|
break;
|
|
case 'f':
|
|
e.preventDefault();
|
|
toggleFullscreen();
|
|
break;
|
|
case 'm':
|
|
e.preventDefault();
|
|
toggleMute();
|
|
break;
|
|
case 'arrowleft':
|
|
e.preventDefault();
|
|
seekRelative(-10);
|
|
break;
|
|
case 'arrowright':
|
|
e.preventDefault();
|
|
seekRelative(10);
|
|
break;
|
|
case 'j':
|
|
e.preventDefault();
|
|
seekRelative(-10);
|
|
break;
|
|
case 'l':
|
|
e.preventDefault();
|
|
seekRelative(10);
|
|
break;
|
|
case 'arrowup':
|
|
e.preventDefault();
|
|
adjustVolume(0.1);
|
|
break;
|
|
case 'arrowdown':
|
|
e.preventDefault();
|
|
adjustVolume(-0.1);
|
|
break;
|
|
case 'n':
|
|
e.preventDefault();
|
|
if (_currentEpisode < _totalEpisodes) playEpisode(_currentEpisode + 1);
|
|
break;
|
|
case 'p':
|
|
e.preventDefault();
|
|
if (_currentEpisode > 1) playEpisode(_currentEpisode - 1);
|
|
break;
|
|
case '0':
|
|
case '1':
|
|
case '2':
|
|
case '3':
|
|
case '4':
|
|
case '5':
|
|
case '6':
|
|
case '7':
|
|
case '8':
|
|
case '9':
|
|
e.preventDefault();
|
|
const percent = parseInt(e.key) / 10;
|
|
seekToPercent(percent);
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Control functions
|
|
function togglePlayPause() {
|
|
if (_roomMode && !_isRoomHost) {
|
|
console.log('Guests cannot control playback');
|
|
return;
|
|
}
|
|
|
|
if (!els.video) return;
|
|
|
|
if (els.video.paused) {
|
|
els.video.play().catch(() => {});
|
|
if (_roomMode && _isRoomHost) {
|
|
sendRoomEvent('play', { currentTime: els.video.currentTime });
|
|
}
|
|
} else {
|
|
els.video.pause();
|
|
if (_roomMode && _isRoomHost) {
|
|
sendRoomEvent('pause', { currentTime: els.video.currentTime });
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleMute() {
|
|
if (!els.video) return;
|
|
els.video.muted = !els.video.muted;
|
|
}
|
|
|
|
function setVolume(vol) {
|
|
if (!els.video) return;
|
|
els.video.volume = Math.max(0, Math.min(1, vol));
|
|
els.video.muted = vol === 0;
|
|
}
|
|
|
|
function adjustVolume(delta) {
|
|
if (!els.video) return;
|
|
setVolume(els.video.volume + delta);
|
|
if (els.volumeSlider) {
|
|
els.volumeSlider.value = els.video.volume * 100;
|
|
}
|
|
}
|
|
|
|
function toggleFullscreen() {
|
|
if (!document.fullscreenElement && !document.webkitFullscreenElement) {
|
|
const elem = els.playerContainer || els.playerWrapper;
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen();
|
|
} else if (elem.webkitRequestFullscreen) {
|
|
elem.webkitRequestFullscreen();
|
|
}
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
function seekToPosition(e) {
|
|
if (!els.video || !els.progressContainer) return;
|
|
if (_roomMode && !_isRoomHost) return;
|
|
|
|
const rect = els.progressContainer.getBoundingClientRect();
|
|
const pos = (e.clientX - rect.left) / rect.width;
|
|
const newTime = pos * els.video.duration;
|
|
|
|
els.video.currentTime = newTime;
|
|
|
|
// En room mode, enviar evento de seek
|
|
if (_roomMode && _isRoomHost) {
|
|
sendRoomEvent('seek', { currentTime: newTime });
|
|
}
|
|
}
|
|
|
|
function updateProgressHandle(e) {
|
|
if (!els.progressHandle || !els.progressContainer) return;
|
|
const rect = els.progressContainer.getBoundingClientRect();
|
|
const pos = (e.clientX - rect.left) / rect.width;
|
|
els.progressHandle.style.left = `${pos * 100}%`;
|
|
}
|
|
|
|
|
|
function seekRelative(seconds) {
|
|
if (!els.video) return;
|
|
if (_roomMode && !_isRoomHost) return;
|
|
|
|
const newTime = Math.max(0, Math.min(els.video.duration, els.video.currentTime + seconds));
|
|
els.video.currentTime = newTime;
|
|
|
|
// En room mode, enviar evento de seek
|
|
if (_roomMode && _isRoomHost) {
|
|
sendRoomEvent('seek', { currentTime: newTime });
|
|
}
|
|
}
|
|
function seekToPercent(percent) {
|
|
if (!els.video) return;
|
|
if (_roomMode && !_isRoomHost) return;
|
|
|
|
const newTime = els.video.duration * percent;
|
|
els.video.currentTime = newTime;
|
|
|
|
// En room mode, enviar evento de seek
|
|
if (_roomMode && _isRoomHost) {
|
|
sendRoomEvent('seek', { currentTime: newTime });
|
|
}
|
|
}
|
|
|
|
// Video event handlers
|
|
function onPlay() {
|
|
if (els.playPauseBtn) {
|
|
els.playPauseBtn.innerHTML = `
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
if (!els.video.duration) return;
|
|
const elapsed = Math.floor(els.video.currentTime);
|
|
const start = Math.floor(Date.now() / 1000) - elapsed;
|
|
const end = start + Math.floor(els.video.duration);
|
|
sendRPC({ startTimestamp: start, endTimestamp: end });
|
|
_rpcActive = true;
|
|
}
|
|
|
|
function onSeeked() {
|
|
if (!els.video || els.video.paused || !els.video.duration) return;
|
|
|
|
const elapsed = Math.floor(els.video.currentTime);
|
|
const start = Math.floor(Date.now() / 1000) - elapsed;
|
|
const end = start + Math.floor(els.video.duration);
|
|
|
|
sendRPC({ startTimestamp: start, endTimestamp: end });
|
|
}
|
|
|
|
function onPause() {
|
|
if (els.playPauseBtn) {
|
|
els.playPauseBtn.innerHTML = `
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
if (_rpcActive) sendRPC({ paused: true });
|
|
}
|
|
|
|
function onProgress() {
|
|
if (!els.video || !els.progressBuffer) return;
|
|
if (els.video.buffered.length > 0) {
|
|
const bufferedEnd = els.video.buffered.end(els.video.buffered.length - 1);
|
|
const percent = (bufferedEnd / els.video.duration) * 100;
|
|
els.progressBuffer.style.width = `${percent}%`;
|
|
}
|
|
}
|
|
|
|
function onLoadedMetadata() {
|
|
if (els.video) {
|
|
applyAniSkip(_malId, _currentEpisode);
|
|
}
|
|
}
|
|
|
|
function onEnded() {
|
|
if (!_roomMode && _currentEpisode < _totalEpisodes) {
|
|
playEpisode(_currentEpisode + 1);
|
|
}
|
|
}
|
|
|
|
function onVolumeChange() {
|
|
if (!els.video || !els.volumeBtn || !els.volumeSlider) return;
|
|
|
|
const volume = els.video.volume;
|
|
const muted = els.video.muted;
|
|
|
|
els.volumeSlider.value = volume * 100;
|
|
|
|
let icon;
|
|
if (muted || volume === 0) {
|
|
icon = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
|
|
} else if (volume < 0.5) {
|
|
icon = '<svg viewBox="0 0 24 24"><path d="M7 9v6h4l5 5V4l-5 5H7z"/></svg>';
|
|
} else {
|
|
icon = '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>';
|
|
}
|
|
|
|
els.volumeBtn.innerHTML = icon;
|
|
}
|
|
|
|
function sendRoomEvent(eventType, data = {}) {
|
|
if (!_roomMode || !_isRoomHost || !_roomWebSocket) return;
|
|
if (_roomWebSocket.readyState !== WebSocket.OPEN) return;
|
|
|
|
console.log('Sending room event:', eventType, data);
|
|
_roomWebSocket.send(JSON.stringify({
|
|
type: eventType,
|
|
...data
|
|
}));
|
|
}
|
|
|
|
function setWebSocket(ws) {
|
|
console.log('Setting WebSocket reference in AnimePlayer');
|
|
_roomWebSocket = ws;
|
|
}
|
|
|
|
function formatTime(seconds) {
|
|
if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
|
|
const h = Math.floor(seconds / 3600);
|
|
const m = Math.floor((seconds % 3600) / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
if (h > 0) {
|
|
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
|
}
|
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
const Icons = {
|
|
back: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>`,
|
|
check: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
|
|
chevron: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
|
|
quality: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path><path d="M14.31 8l5.74 9.94"></path><path d="M9.69 8h11.48"></path><path d="M7.38 12l5.74-9.94"></path><path d="M9.69 16L3.95 6.06"></path><path d="M14.31 16H2.83"></path><path d="M16.62 12l-5.74 9.94"></path></svg>`,
|
|
audio: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>`,
|
|
subs: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
|
|
speed: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`
|
|
};
|
|
|
|
function buildSettingsPanel() {
|
|
if (!els.settingsPanel) return;
|
|
|
|
els.settingsPanel.innerHTML = '';
|
|
|
|
if (_settingsView === 'main') {
|
|
buildMainMenu();
|
|
} else {
|
|
buildSubMenu(_settingsView);
|
|
}
|
|
}
|
|
|
|
function buildMainMenu() {
|
|
let html = `<div class="settings-content">`;
|
|
|
|
// 1. Quality
|
|
if (hlsInstance && hlsInstance.levels && hlsInstance.levels.length > 1) {
|
|
const currentLevel = hlsInstance.currentLevel;
|
|
const label = currentLevel === -1 ? 'Auto' : (hlsInstance.levels[currentLevel]?.height + 'p');
|
|
html += createMenuItem('quality', 'Quality', label, Icons.quality);
|
|
}
|
|
|
|
// 2. Audio
|
|
if (hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 1) {
|
|
const currentAudio = hlsInstance.audioTrack;
|
|
const track = hlsInstance.audioTracks[currentAudio];
|
|
const label = track ? (track.name || track.lang || `Track ${currentAudio + 1}`) : 'Default';
|
|
html += createMenuItem('audio', 'Audio', label, Icons.audio);
|
|
}
|
|
|
|
// 3. Subtitles
|
|
if (_currentSubtitles && _currentSubtitles.length > 0) {
|
|
let label = 'Off';
|
|
const activeIndex = getActiveSubtitleIndex();
|
|
if (activeIndex !== -1 && _currentSubtitles[activeIndex]) {
|
|
label = _currentSubtitles[activeIndex].label || _currentSubtitles[activeIndex].language;
|
|
}
|
|
html += createMenuItem('subtitle', 'Subtitles', label, Icons.subs);
|
|
}
|
|
|
|
// 4. Playback Speed
|
|
if (els.video && (!_roomMode || _isRoomHost)) {
|
|
const label = els.video.playbackRate === 1 ? 'Normal' : `${els.video.playbackRate}x`;
|
|
html += createMenuItem('speed', 'Playback Speed', label, Icons.speed);
|
|
}
|
|
|
|
html += `</div>`;
|
|
els.settingsPanel.innerHTML = html;
|
|
|
|
// Listeners del menú principal
|
|
els.settingsPanel.querySelectorAll('.settings-item').forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
_settingsView = item.dataset.target;
|
|
buildSettingsPanel();
|
|
});
|
|
});
|
|
}
|
|
|
|
function createMenuItem(target, title, value, icon) {
|
|
return `
|
|
<div class="settings-item settings-item-main" data-target="${target}">
|
|
<div class="settings-label-left">
|
|
<span class="settings-label-icon">${icon}</span>
|
|
<span>${title}</span>
|
|
</div>
|
|
<div class="settings-value-right">
|
|
<span>${value}</span>
|
|
${Icons.chevron}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function buildSubMenu(type) {
|
|
let title = '';
|
|
let content = '';
|
|
|
|
if (type === 'quality') {
|
|
title = 'Quality';
|
|
content = renderQualityOptions();
|
|
} else if (type === 'audio') {
|
|
title = 'Audio Track';
|
|
content = renderAudioOptions();
|
|
} else if (type === 'subtitle') {
|
|
title = 'Subtitles';
|
|
content = renderSubtitleOptions();
|
|
} else if (type === 'speed') {
|
|
title = 'Playback Speed';
|
|
content = renderSpeedOptions();
|
|
}
|
|
|
|
const html = `
|
|
<div class="settings-header">
|
|
<button class="settings-back-btn">${Icons.back}</button>
|
|
<span class="settings-title">${title}</span>
|
|
</div>
|
|
<div class="settings-content">
|
|
${content}
|
|
</div>
|
|
`;
|
|
|
|
els.settingsPanel.innerHTML = html;
|
|
|
|
// Listener para volver atrás
|
|
els.settingsPanel.querySelector('.settings-back-btn').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
_settingsView = 'main';
|
|
buildSettingsPanel();
|
|
});
|
|
|
|
// Listeners para opciones CORREGIDO
|
|
els.settingsPanel.querySelectorAll('.settings-item-option').forEach(opt => {
|
|
opt.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const val = opt.dataset.value;
|
|
applySetting(type, val);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Funciones de renderizado de opciones
|
|
function renderQualityOptions() {
|
|
if (!hlsInstance) return '';
|
|
let html = '';
|
|
|
|
// Auto option
|
|
const isAuto = hlsInstance.currentLevel === -1;
|
|
html += `<div class="settings-item settings-item-option ${isAuto ? 'selected' : ''}" data-value="-1">
|
|
<span>Auto</span>${isAuto ? Icons.check : ''}
|
|
</div>`;
|
|
|
|
// Levels desc
|
|
hlsInstance.levels.forEach((level, i) => {
|
|
const isSelected = hlsInstance.currentLevel === i;
|
|
html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${i}">
|
|
<span>${level.height}p</span>${isSelected ? Icons.check : ''}
|
|
</div>`;
|
|
});
|
|
return html;
|
|
}
|
|
|
|
function renderAudioOptions() {
|
|
if (!hlsInstance) return '';
|
|
let html = '';
|
|
hlsInstance.audioTracks.forEach((track, i) => {
|
|
const isSelected = hlsInstance.audioTrack === i;
|
|
const label = track.name || track.lang || `Audio ${i + 1}`;
|
|
html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${i}">
|
|
<span>${label}</span>${isSelected ? Icons.check : ''}
|
|
</div>`;
|
|
});
|
|
return html;
|
|
}
|
|
|
|
function renderSubtitleOptions() {
|
|
let html = '';
|
|
const activeIdx = getActiveSubtitleIndex();
|
|
|
|
// Off
|
|
html += `<div class="settings-item settings-item-option ${activeIdx === -1 ? 'selected' : ''}" data-value="-1">
|
|
<span>Off</span>${activeIdx === -1 ? Icons.check : ''}
|
|
</div>`;
|
|
|
|
_currentSubtitles.forEach((sub, i) => {
|
|
const isSelected = activeIdx === i;
|
|
html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${i}">
|
|
<span>${sub.label || sub.language}</span>${isSelected ? Icons.check : ''}
|
|
</div>`;
|
|
});
|
|
return html;
|
|
}
|
|
|
|
function renderSpeedOptions() {
|
|
const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
|
|
let html = '';
|
|
const currentRate = els.video ? els.video.playbackRate : 1;
|
|
|
|
speeds.forEach(speed => {
|
|
const isSelected = Math.abs(currentRate - speed) < 0.1;
|
|
html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${speed}">
|
|
<span>${speed === 1 ? 'Normal' : speed + 'x'}</span>${isSelected ? Icons.check : ''}
|
|
</div>`;
|
|
});
|
|
return html;
|
|
}
|
|
|
|
// Aplicar configuración
|
|
function applySetting(type, value) {
|
|
if (type === 'quality') {
|
|
if (hlsInstance) hlsInstance.currentLevel = parseInt(value);
|
|
} else if (type === 'audio') {
|
|
if (hlsInstance) hlsInstance.audioTrack = parseInt(value);
|
|
} else if (type === 'subtitle') {
|
|
const idx = parseInt(value);
|
|
_activeSubtitleIndex = idx; // <--- ACTUALIZAMOS EL ESTADO AQUÍ
|
|
|
|
// 1. Lógica nativa (para mantener compatibilidad interna)
|
|
if (els.video && els.video.textTracks) {
|
|
Array.from(els.video.textTracks).forEach((track, i) => {
|
|
// Si usamos JASSUB, ocultamos la nativa. Si no, mostramos la seleccionada.
|
|
track.mode = (subtitleRenderer && idx !== -1) ? 'hidden' : ((i === idx) ? 'showing' : 'hidden');
|
|
});
|
|
}
|
|
|
|
// 2. Lógica de JASSUB
|
|
if (subtitleRenderer) {
|
|
if (idx === -1) {
|
|
subtitleRenderer.dispose();
|
|
} else {
|
|
const sub = _currentSubtitles[idx];
|
|
if (sub) {
|
|
subtitleRenderer.setTrack(sub.src);
|
|
}
|
|
}
|
|
}
|
|
} else if (type === 'speed') {
|
|
if (els.video) els.video.playbackRate = parseFloat(value);
|
|
}
|
|
|
|
// Volvemos al menú principal para confirmar visualmente (opcional, estilo YouTube)
|
|
_settingsView = 'main';
|
|
buildSettingsPanel();
|
|
}
|
|
|
|
function getActiveSubtitleIndex() {
|
|
return _activeSubtitleIndex;
|
|
}
|
|
|
|
async function initSubtitleRenderer() {
|
|
if (!els.video) return;
|
|
|
|
// Cleanup previous instance
|
|
if (subtitleRenderer) {
|
|
try {
|
|
subtitleRenderer.dispose();
|
|
} catch(e) {
|
|
console.warn('Error disposing renderer:', e);
|
|
}
|
|
subtitleRenderer = null;
|
|
}
|
|
|
|
// Find ASS subtitle
|
|
const assSubtitle = _currentSubtitles.find(sub =>
|
|
(sub.src && sub.src.endsWith('.ass')) ||
|
|
(sub.label && sub.label.toLowerCase().includes('ass'))
|
|
);
|
|
|
|
if (!assSubtitle) {
|
|
console.log('No ASS subtitles found in current list');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('Initializing JASSUB for:', assSubtitle.label);
|
|
|
|
// Check if JASSUB global is available
|
|
if (window.SubtitleRenderer && typeof window.JASSUB !== 'undefined') {
|
|
// --- CAMBIO AQUÍ: Pasamos els.subtitlesCanvas ---
|
|
subtitleRenderer = new SubtitleRenderer(els.video, els.subtitlesCanvas);
|
|
await subtitleRenderer.init(assSubtitle.src);
|
|
} else {
|
|
console.warn('JASSUB library not loaded.');
|
|
}
|
|
} catch (e) {
|
|
console.error('Subtitle renderer setup error:', e);
|
|
subtitleRenderer = null;
|
|
}
|
|
}
|
|
|
|
function onTimeUpdate() {
|
|
if (!els.video) return;
|
|
|
|
// Update progress bar
|
|
const percent = (els.video.currentTime / els.video.duration) * 100;
|
|
if (els.progressPlayed) {
|
|
els.progressPlayed.style.width = `${percent}%`;
|
|
}
|
|
if (els.progressHandle) {
|
|
els.progressHandle.style.left = `${percent}%`;
|
|
}
|
|
|
|
// Update time display
|
|
if (els.timeDisplay) {
|
|
const current = formatTime(els.video.currentTime);
|
|
const total = formatTime(els.video.duration);
|
|
els.timeDisplay.textContent = `${current} / ${total}`;
|
|
}
|
|
|
|
// Update progress for AniList
|
|
if (!_roomMode && !_progressUpdated && els.video.duration) {
|
|
const percentage = els.video.currentTime / els.video.duration;
|
|
if (percentage >= 0.8) {
|
|
updateProgress();
|
|
_progressUpdated = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Player lifecycle
|
|
async function playEpisode(episodeNumber) {
|
|
const targetEp = parseInt(episodeNumber);
|
|
if (targetEp < 1 || targetEp > _totalEpisodes) return;
|
|
|
|
_currentEpisode = targetEp;
|
|
_progressUpdated = false;
|
|
|
|
if(els.epTitle) els.epTitle.innerText = `Episode ${targetEp}`;
|
|
if(els.prevBtn) els.prevBtn.disabled = (_currentEpisode <= 1);
|
|
if(els.nextBtn) els.nextBtn.disabled = (_currentEpisode >= _totalEpisodes);
|
|
|
|
if(_skipBtn) {
|
|
_skipBtn.classList.remove('visible');
|
|
_skipBtn.classList.remove('is-next');
|
|
}
|
|
|
|
const newUrl = new URL(window.location);
|
|
newUrl.searchParams.set('episode', targetEp);
|
|
window.history.pushState({}, '', newUrl);
|
|
|
|
if(els.playerWrapper) els.playerWrapper.style.display = 'block';
|
|
document.body.classList.add('stop-scrolling');
|
|
|
|
const trailer = document.querySelector('#trailer-player iframe');
|
|
if(trailer) trailer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
|
|
|
_rpcActive = false;
|
|
setLoading("Checking availability...");
|
|
|
|
// Check local availability
|
|
let shouldPlayLocal = false;
|
|
try {
|
|
const check = await fetch(`/api/library/${_animeId}/units`);
|
|
const data = await check.json();
|
|
const localUnit = data.units ? data.units.find(u => u.number === targetEp) : null;
|
|
if (localUnit) shouldPlayLocal = true;
|
|
} catch (e) {
|
|
console.warn("Availability check failed:", e);
|
|
shouldPlayLocal = (els.extSelect.value === 'local');
|
|
}
|
|
|
|
if (els.manualMatchBtn) {
|
|
els.manualMatchBtn.style.display = shouldPlayLocal ? 'none' : 'flex';
|
|
}
|
|
|
|
if (shouldPlayLocal) {
|
|
let localOption = els.extSelect.querySelector('option[value="local"]');
|
|
if (!localOption) {
|
|
localOption = document.createElement('option');
|
|
localOption.value = 'local';
|
|
localOption.innerText = 'Local';
|
|
els.extSelect.appendChild(localOption);
|
|
}
|
|
els.extSelect.value = 'local';
|
|
if(els.subDubToggle) els.subDubToggle.style.display = 'none';
|
|
if(els.serverSelect) els.serverSelect.style.display = 'none';
|
|
loadStream();
|
|
} else {
|
|
if (els.extSelect.value === 'local') {
|
|
const localOption = els.extSelect.querySelector('option[value="local"]');
|
|
if (localOption) localOption.remove();
|
|
|
|
let fallbackSource = (_entrySource !== 'local') ? _entrySource : 'anilist';
|
|
if (!els.extSelect.querySelector(`option[value="${fallbackSource}"]`)) {
|
|
if (els.extSelect.options.length > 0) {
|
|
fallbackSource = els.extSelect.options[0].value;
|
|
}
|
|
}
|
|
els.extSelect.value = fallbackSource;
|
|
handleExtensionChange(true);
|
|
} else {
|
|
if (els.serverSelect.options.length === 0) {
|
|
handleExtensionChange(true);
|
|
} else {
|
|
loadStream();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function closePlayer() {
|
|
if (hlsInstance) {
|
|
hlsInstance.destroy();
|
|
hlsInstance = null;
|
|
}
|
|
|
|
if (subtitleRenderer) {
|
|
try { subtitleRenderer.dispose(); } catch(e) {}
|
|
subtitleRenderer = null;
|
|
}
|
|
|
|
// Stop video
|
|
if (els.video) {
|
|
els.video.pause();
|
|
els.video.removeAttribute('src');
|
|
els.video.load();
|
|
}
|
|
|
|
if(els.playerWrapper) els.playerWrapper.style.display = 'none';
|
|
document.body.classList.remove('stop-scrolling');
|
|
_skipIntervals = [];
|
|
_rpcActive = false;
|
|
|
|
sendRPC({ paused: true });
|
|
|
|
const newUrl = new URL(window.location);
|
|
newUrl.searchParams.delete('episode');
|
|
window.history.pushState({}, '', newUrl);
|
|
|
|
const trailer = document.querySelector('#trailer-player iframe');
|
|
if(trailer) {
|
|
trailer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
|
}
|
|
}
|
|
|
|
async function loadExtensionsList() {
|
|
try {
|
|
const res = await fetch('/api/extensions/anime');
|
|
const data = await res.json();
|
|
const extensions = data.extensions || [];
|
|
|
|
if (_isLocal && !extensions.includes('local')) extensions.push('local');
|
|
|
|
els.extSelect.innerHTML = '';
|
|
extensions.forEach(ext => {
|
|
const opt = document.createElement('option');
|
|
opt.value = ext;
|
|
opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
|
|
els.extSelect.appendChild(opt);
|
|
});
|
|
|
|
if (extensions.includes(_entrySource)) {
|
|
els.extSelect.value = _entrySource;
|
|
} else if (extensions.length > 0) {
|
|
els.extSelect.value = extensions[0];
|
|
}
|
|
|
|
if (els.extSelect.value === 'local') {
|
|
els.subDubToggle.style.display = 'none';
|
|
els.serverSelect.style.display = 'none';
|
|
} else if (els.extSelect.value) {
|
|
handleExtensionChange(false);
|
|
}
|
|
} catch (e) { console.error("Error loading extensions:", e); }
|
|
}
|
|
|
|
async function handleExtensionChange(shouldPlay = true) {
|
|
const selectedExt = els.extSelect.value;
|
|
if (els.manualMatchBtn) {
|
|
els.manualMatchBtn.style.display = (selectedExt === 'local') ? 'none' : 'flex';
|
|
}
|
|
|
|
if (selectedExt === 'local') {
|
|
els.subDubToggle.style.display = 'none';
|
|
els.serverSelect.style.display = 'none';
|
|
if (shouldPlay && _currentEpisode > 0) loadStream();
|
|
return;
|
|
}
|
|
|
|
_manualExtensionId = null;
|
|
setLoading("Loading Extension Settings...");
|
|
|
|
try {
|
|
const res = await fetch(`/api/extensions/${selectedExt}/settings`);
|
|
const settings = await res.json();
|
|
|
|
els.subDubToggle.style.display = settings.supportsDub ? 'flex' : 'none';
|
|
setAudioMode('sub');
|
|
|
|
els.serverSelect.innerHTML = '';
|
|
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
|
settings.episodeServers.forEach(srv => {
|
|
const opt = document.createElement('option');
|
|
opt.value = srv;
|
|
opt.innerText = srv;
|
|
els.serverSelect.appendChild(opt);
|
|
});
|
|
els.serverSelect.value = settings.episodeServers[0];
|
|
els.serverSelect.style.display = 'block';
|
|
} else {
|
|
els.serverSelect.style.display = 'none';
|
|
}
|
|
|
|
if (shouldPlay && _currentEpisode > 0) {
|
|
loadStream();
|
|
} else {
|
|
if(els.loader) els.loader.style.display = 'none';
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load settings:", error);
|
|
setLoading("Failed to load extension settings.");
|
|
}
|
|
}
|
|
|
|
function toggleAudioMode() {
|
|
_audioMode = _audioMode === 'sub' ? 'dub' : 'sub';
|
|
setAudioMode(_audioMode);
|
|
loadStream();
|
|
}
|
|
|
|
function setAudioMode(mode) {
|
|
_audioMode = mode;
|
|
els.subDubToggle.setAttribute('data-state', mode);
|
|
document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
|
|
document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
|
|
}
|
|
|
|
function setLoading(msg) {
|
|
if(els.loaderText) els.loaderText.innerText = msg;
|
|
if(els.loader) els.loader.style.display = 'flex';
|
|
}
|
|
|
|
async function getLocalEntryId() {
|
|
if (_localEntryId) return _localEntryId;
|
|
try {
|
|
const res = await fetch(`/api/library/anime/${_animeId}`);
|
|
if (!res.ok) return null;
|
|
const data = await res.json();
|
|
_localEntryId = data.id;
|
|
return _localEntryId;
|
|
} catch (e) {
|
|
console.error("Error fetching local ID:", e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function loadStream() {
|
|
if (!_currentEpisode) return;
|
|
_progressUpdated = false;
|
|
setLoading("Fetching Stream...");
|
|
|
|
_rawVideoData = null;
|
|
_currentSubtitles = [];
|
|
|
|
// Cleanup before fetch to prevent ghost events
|
|
if (hlsInstance) {
|
|
hlsInstance.destroy();
|
|
hlsInstance = null;
|
|
}
|
|
|
|
if (subtitleRenderer) {
|
|
try { subtitleRenderer.dispose(); } catch(e) {}
|
|
subtitleRenderer = null;
|
|
}
|
|
|
|
const currentExt = els.extSelect.value;
|
|
|
|
if (currentExt !== 'local') {
|
|
_isLocal = false;
|
|
_rawVideoData = null;
|
|
}
|
|
|
|
if (currentExt === 'local') {
|
|
try {
|
|
const localId = await getLocalEntryId();
|
|
const check = await fetch(`/api/library/${_animeId}/units`);
|
|
const data = await check.json();
|
|
const targetUnit = data.units ? data.units.find(u => u.number === parseInt(_currentEpisode)) : null;
|
|
|
|
if (!targetUnit) {
|
|
console.log(`Episode ${_currentEpisode} not found locally.`);
|
|
const localOption = els.extSelect.querySelector('option[value="local"]');
|
|
if (localOption) localOption.remove();
|
|
|
|
const fallbackSource = (_entrySource === 'local') ? 'anilist' : _entrySource;
|
|
if (els.extSelect.querySelector(`option[value="${fallbackSource}"]`)) {
|
|
els.extSelect.value = fallbackSource;
|
|
} else if (els.extSelect.options.length > 0) {
|
|
els.extSelect.selectedIndex = 0;
|
|
}
|
|
handleExtensionChange(true);
|
|
return;
|
|
}
|
|
|
|
const ext = targetUnit.format || targetUnit.name.split('.').pop().toLowerCase();
|
|
|
|
if (![''].includes(ext)) {
|
|
setLoading(`Local files are not supported on the web player yet. Use MPV.`);
|
|
_rawVideoData = {
|
|
url: targetUnit.path,
|
|
headers: {}
|
|
};
|
|
if (els.mpvBtn) els.mpvBtn.style.display = 'flex';
|
|
return;
|
|
}
|
|
|
|
const localUrl = `/api/library/stream/${targetUnit.id}`;
|
|
_rawVideoData = {
|
|
url: localUrl,
|
|
headers: {}
|
|
};
|
|
_currentSubtitles = [];
|
|
|
|
initVideoPlayer(localUrl, 'mp4');
|
|
} catch(e) {
|
|
console.error(e);
|
|
setLoading("Local Error: " + e.message);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const server = els.serverSelect.value || "";
|
|
const extParam = `&ext=${currentExt}`;
|
|
const realSource = _entrySource === 'local' ? 'anilist' : _entrySource;
|
|
|
|
let url = `/api/watch/stream?animeId=${_animeId}` +
|
|
`&episode=${_currentEpisode}` +
|
|
`&server=${encodeURIComponent(server)}` +
|
|
`&category=${_audioMode}` +
|
|
`${extParam}` +
|
|
`&source=${realSource}`;
|
|
|
|
if (_manualExtensionId) {
|
|
url += `&extensionAnimeId=${encodeURIComponent(_manualExtensionId)}`;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
|
|
if (data.error || !data.videoSources?.length) {
|
|
setLoading(data.error || "No sources found.");
|
|
return;
|
|
}
|
|
|
|
const source = data.videoSources.find(s => s.type === 'm3u8') || data.videoSources[0];
|
|
const headers = data.headers || {};
|
|
|
|
_rawVideoData = {
|
|
url: source.url,
|
|
headers: headers
|
|
};
|
|
|
|
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
|
if (headers['Referer'] && headers['Referer'] !== "null") {
|
|
proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
|
}
|
|
if (headers['User-Agent']) {
|
|
proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
|
}
|
|
|
|
const subtitles = (source.subtitles || []).map(sub => ({
|
|
label: sub.language,
|
|
srclang: sub.language.toLowerCase().slice(0, 2),
|
|
src: `/api/proxy?url=${encodeURIComponent(sub.url)}`
|
|
}));
|
|
|
|
_currentSubtitles = (source.subtitles || []).map(sub => ({
|
|
label: sub.language,
|
|
srclang: sub.id,
|
|
src: sub.url
|
|
}));
|
|
|
|
initVideoPlayer(proxyUrl, source.type, subtitles);
|
|
} catch (err) {
|
|
setLoading("Stream Error: " + err.message);
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
function initVideoPlayer(url, type, subtitles = []) {
|
|
console.log('initVideoPlayer called:', { url, type, subtitles });
|
|
|
|
// 1. CLEANUP FIRST
|
|
if (subtitleRenderer) {
|
|
try {
|
|
subtitleRenderer.dispose();
|
|
} catch(e) {
|
|
console.warn('Renderer dispose error (clean):', e);
|
|
}
|
|
subtitleRenderer = null;
|
|
}
|
|
|
|
if (hlsInstance) {
|
|
hlsInstance.destroy();
|
|
hlsInstance = null;
|
|
}
|
|
|
|
const container = document.querySelector('.video-frame');
|
|
if (!container) {
|
|
console.error('Video frame container not found!');
|
|
return;
|
|
}
|
|
|
|
// 2. Remove OLD Elements
|
|
const oldVideo = container.querySelector('video');
|
|
const oldCanvas = container.querySelector('#subtitles-canvas');
|
|
|
|
if (oldVideo) {
|
|
oldVideo.removeAttribute('src');
|
|
oldVideo.load();
|
|
oldVideo.remove();
|
|
}
|
|
if (oldCanvas) {
|
|
oldCanvas.remove();
|
|
}
|
|
|
|
// 3. Create NEW Elements - CANVAS FIRST, then VIDEO
|
|
const newCanvas = document.createElement('canvas');
|
|
newCanvas.id = 'subtitles-canvas';
|
|
|
|
const newVideo = document.createElement('video');
|
|
newVideo.id = 'player';
|
|
newVideo.crossOrigin = 'anonymous';
|
|
newVideo.playsInline = true;
|
|
|
|
container.appendChild(newCanvas);
|
|
container.appendChild(newVideo);
|
|
|
|
els.video = newVideo;
|
|
els.subtitlesCanvas = newCanvas;
|
|
|
|
console.log('Video and canvas elements created:', { video: els.video, canvas: els.subtitlesCanvas });
|
|
|
|
// Re-setup controls with new video element
|
|
setupCustomControls();
|
|
|
|
// Hide loader
|
|
if (els.loader) els.loader.style.display = 'none';
|
|
|
|
// 4. Initialize Player
|
|
if (Hls.isSupported() && type === 'm3u8') {
|
|
console.log('Initializing HLS player');
|
|
|
|
hlsInstance = new Hls({
|
|
enableWorker: true,
|
|
lowLatencyMode: false,
|
|
backBufferLength: 90,
|
|
debug: false
|
|
});
|
|
|
|
hlsInstance.on(Hls.Events.ERROR, (event, data) => {
|
|
console.error('HLS Error:', data);
|
|
if (data.fatal) {
|
|
if (els.loader) {
|
|
els.loader.style.display = 'flex';
|
|
if (els.loaderText) els.loaderText.textContent = 'Stream error: ' + (data.details || 'Unknown');
|
|
}
|
|
}
|
|
});
|
|
|
|
hlsInstance.attachMedia(els.video);
|
|
|
|
hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
|
|
console.log('HLS media attached, loading source:', url);
|
|
hlsInstance.loadSource(url);
|
|
});
|
|
|
|
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
console.log('HLS manifest parsed, attaching subtitles');
|
|
attachSubtitles(subtitles);
|
|
buildSettingsPanel();
|
|
|
|
if (els.downloadBtn && !_roomMode) els.downloadBtn.style.display = 'flex';
|
|
|
|
// --- FIX: Inicializar el renderizador de subtítulos para HLS ---
|
|
if (els.video.readyState >= 1) {
|
|
initSubtitleRenderer();
|
|
} else {
|
|
els.video.addEventListener('loadedmetadata', () => {
|
|
initSubtitleRenderer();
|
|
}, { once: true });
|
|
}
|
|
// -------------------------------------------------------------
|
|
|
|
console.log('Attempting to play video');
|
|
els.video.play().catch(err => {
|
|
console.error('Play error:', err);
|
|
});
|
|
});
|
|
|
|
hlsInstance.on(Hls.Events.LEVEL_SWITCHED, () => buildSettingsPanel());
|
|
hlsInstance.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => buildSettingsPanel());
|
|
|
|
} else {
|
|
console.log('Using native video player');
|
|
els.video.src = url;
|
|
attachSubtitles(subtitles);
|
|
buildSettingsPanel();
|
|
|
|
els.video.addEventListener('loadedmetadata', () => {
|
|
console.log('Video metadata loaded');
|
|
initSubtitleRenderer();
|
|
}, { once: true });
|
|
|
|
console.log('Attempting to play video');
|
|
els.video.play().catch(err => {
|
|
console.error('Play error:', err);
|
|
});
|
|
|
|
if (els.downloadBtn && !_roomMode) els.downloadBtn.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function attachSubtitles(subtitles) {
|
|
if (!els.video) return;
|
|
|
|
_activeSubtitleIndex = -1;
|
|
|
|
Array.from(els.video.querySelectorAll('track')).forEach(t => t.remove());
|
|
|
|
if (subtitles.length === 0) return;
|
|
|
|
subtitles.forEach((sub, i) => {
|
|
const track = document.createElement('track');
|
|
track.kind = 'subtitles';
|
|
track.label = sub.label;
|
|
track.srclang = sub.srclang;
|
|
track.src = sub.src;
|
|
track.default = i === 0;
|
|
els.video.appendChild(track);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
if (els.video.textTracks && els.video.textTracks.length > 0) {
|
|
_activeSubtitleIndex = 0;
|
|
|
|
if (!subtitleRenderer) {
|
|
els.video.textTracks[0].mode = 'showing';
|
|
} else {
|
|
els.video.textTracks[0].mode = 'hidden';
|
|
}
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// AniSkip integration
|
|
async function applyAniSkip(malId, episodeNumber) {
|
|
if (!malId || !els.video) return;
|
|
|
|
const duration = await waitForDuration(els.video);
|
|
|
|
try {
|
|
const url = `https://api.aniskip.com/v2/skip-times/${malId}/${episodeNumber}` +
|
|
`?types[]=op&types[]=ed&episodeLength=${Math.floor(duration)}`;
|
|
const res = await fetch(url);
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
if (!data.found) return;
|
|
|
|
_skipIntervals = data.results.map(item => ({
|
|
startTime: item.interval.startTime,
|
|
endTime: item.interval.endTime,
|
|
type: item.skipType
|
|
}));
|
|
|
|
renderSkipMarkers(_skipIntervals);
|
|
monitorSkipButton(_skipIntervals);
|
|
} catch (e) {
|
|
console.error('AniSkip Error:', e);
|
|
}
|
|
}
|
|
|
|
function waitForDuration(video) {
|
|
return new Promise(resolve => {
|
|
if (video.duration && video.duration > 0) return resolve(video.duration);
|
|
const check = () => {
|
|
if (video.duration && video.duration > 0) {
|
|
video.removeEventListener('loadedmetadata', check);
|
|
resolve(video.duration);
|
|
}
|
|
};
|
|
video.addEventListener('loadedmetadata', check);
|
|
});
|
|
}
|
|
|
|
function renderSkipMarkers(intervals) {
|
|
if (!els.progressContainer || !els.video.duration) return;
|
|
|
|
els.progressContainer.querySelectorAll('.skip-range, .skip-cut').forEach(e => e.remove());
|
|
|
|
const duration = els.video.duration;
|
|
|
|
intervals.forEach(skip => {
|
|
const startPct = (skip.startTime / duration) * 100;
|
|
const endPct = (skip.endTime / duration) * 100;
|
|
|
|
const range = document.createElement('div');
|
|
range.className = `skip-range ${skip.type}`; // 'op' o 'ed'
|
|
range.style.left = `${startPct}%`;
|
|
range.style.width = `${endPct - startPct}%`;
|
|
els.progressContainer.appendChild(range);
|
|
|
|
createCut(startPct);
|
|
|
|
createCut(endPct);
|
|
});
|
|
}
|
|
|
|
function createCut(percent) {
|
|
if (percent < 0.5 || percent > 99.5) return;
|
|
|
|
const cut = document.createElement('div');
|
|
cut.className = 'skip-cut';
|
|
cut.style.left = `${percent}%`;
|
|
els.progressContainer.appendChild(cut);
|
|
}
|
|
|
|
function monitorSkipButton(intervals) {
|
|
if (!_skipBtn || !els.video) return;
|
|
|
|
const checkTime = () => {
|
|
const ct = els.video.currentTime;
|
|
const duration = els.video.duration;
|
|
const activeInterval = intervals.find(i => ct >= i.startTime && ct <= i.endTime);
|
|
|
|
if (activeInterval) {
|
|
if (activeInterval.type === 'op') {
|
|
showSkipButton('Skip Intro', activeInterval.endTime, false);
|
|
return;
|
|
} else if (activeInterval.type === 'ed') {
|
|
if (_currentEpisode < _totalEpisodes) {
|
|
showSkipButton('Next Episode', null, true);
|
|
} else {
|
|
showSkipButton('Skip Ending', activeInterval.endTime, false);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (_currentEpisode < _totalEpisodes && (duration - ct) < 90 && (duration - ct) > 0) {
|
|
if (!activeInterval) {
|
|
showSkipButton('Next Episode', null, true);
|
|
return;
|
|
}
|
|
}
|
|
|
|
_skipBtn.classList.remove('visible');
|
|
};
|
|
|
|
els.video.addEventListener('timeupdate', checkTime);
|
|
}
|
|
|
|
function showSkipButton(text, seekTime, isNextAction) {
|
|
if (!_skipBtn) return;
|
|
_skipBtn.innerHTML = `${text} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>`;
|
|
if (isNextAction) {
|
|
_skipBtn.classList.add('is-next');
|
|
_skipBtn.dataset.seekTo = '';
|
|
} else {
|
|
_skipBtn.classList.remove('is-next');
|
|
_skipBtn.dataset.seekTo = seekTime;
|
|
}
|
|
_skipBtn.classList.add('visible');
|
|
}
|
|
|
|
function handleOverlayClick() {
|
|
if (!_skipBtn) return;
|
|
if (_skipBtn.classList.contains('is-next')) {
|
|
playEpisode(_currentEpisode + 1);
|
|
} else if (_skipBtn.dataset.seekTo) {
|
|
els.video.currentTime = parseFloat(_skipBtn.dataset.seekTo);
|
|
}
|
|
_skipBtn.classList.remove('visible');
|
|
}
|
|
|
|
// Download functionality
|
|
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 exiting 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) return;
|
|
|
|
els.dlQualityList.innerHTML = '';
|
|
els.dlAudioList.innerHTML = '';
|
|
els.dlSubsList.innerHTML = '';
|
|
|
|
let showQuality = false;
|
|
let showAudio = false;
|
|
let showSubs = false;
|
|
|
|
// Quality options
|
|
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';
|
|
|
|
// Audio tracks
|
|
if (hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 0) {
|
|
showAudio = true;
|
|
hlsInstance.audioTracks.forEach((track, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'dl-item';
|
|
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';
|
|
|
|
// Subtitles
|
|
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');
|
|
}
|
|
|
|
function closeDownloadModal() {
|
|
if (els.downloadModal) {
|
|
els.downloadModal.classList.remove('show');
|
|
setTimeout(() => {
|
|
if(!els.downloadModal.classList.contains('show')) {
|
|
els.downloadModal.style.display = 'none';
|
|
}
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
async function executeDownload(e, skipModal = false) {
|
|
closeDownloadModal();
|
|
|
|
const btn = els.downloadBtn;
|
|
if (!btn) return;
|
|
|
|
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"><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"><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"><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"><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;
|
|
btn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>`;
|
|
}
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// MPV functionality
|
|
async function openInMPV() {
|
|
if (!_rawVideoData) {
|
|
alert("No video loaded yet.");
|
|
return;
|
|
}
|
|
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
alert("You need to be logged in.");
|
|
return;
|
|
}
|
|
|
|
const body = {
|
|
title: `${_animeTitle} - Episode ${_currentEpisode}`,
|
|
video: _rawVideoData,
|
|
subtitles: _currentSubtitles,
|
|
chapters: _skipIntervals,
|
|
animeId: _animeId,
|
|
episode: _currentEpisode,
|
|
entrySource: _entrySource,
|
|
token: token
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('/api/watch/mpv', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (res.ok) {
|
|
console.log("MPV Request Sent");
|
|
closePlayer();
|
|
} else {
|
|
console.error("MPV Request Failed");
|
|
}
|
|
} catch (e) {
|
|
console.error("MPV Error:", e);
|
|
}
|
|
}
|
|
|
|
// Match Modal
|
|
function openMatchModal() {
|
|
const currentExt = els.extSelect.value;
|
|
if (!currentExt || currentExt === 'local') return;
|
|
|
|
if (typeof MatchModal !== 'undefined') {
|
|
MatchModal.open({
|
|
provider: currentExt,
|
|
initialQuery: _animeTitle,
|
|
onSearch: async (query, prov) => {
|
|
const res = await fetch(`/api/search/${prov}?q=${encodeURIComponent(query)}`);
|
|
const data = await res.json();
|
|
return data.results || [];
|
|
},
|
|
onSelect: (item) => {
|
|
_manualExtensionId = item.id;
|
|
loadStream();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// RPC
|
|
function sendRPC({ startTimestamp, endTimestamp, paused = false } = {}) {
|
|
let stateText = `Episode ${_currentEpisode}`;
|
|
let detailsText = _animeTitle;
|
|
|
|
if (_roomMode) {
|
|
stateText = `Watch Party - Ep ${_currentEpisode}`;
|
|
}
|
|
|
|
fetch("/api/rpc", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
details: detailsText,
|
|
state: stateText,
|
|
mode: "watching",
|
|
startTimestamp,
|
|
endTimestamp,
|
|
paused
|
|
})
|
|
}).catch(e => console.warn("RPC Error:", e));
|
|
}
|
|
|
|
// Progress update
|
|
async function updateProgress() {
|
|
const token = localStorage.getItem('token');
|
|
if (!token) return;
|
|
try {
|
|
await fetch('/api/list/entry', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({
|
|
entry_id: _animeId,
|
|
source: _entrySource,
|
|
entry_type: "ANIME",
|
|
status: 'CURRENT',
|
|
progress: _currentEpisode
|
|
})
|
|
});
|
|
} catch (e) {
|
|
console.error("Progress update failed", e);
|
|
}
|
|
}
|
|
|
|
function setRoomHost(isHost) {
|
|
console.log('Setting player host status:', isHost);
|
|
_isRoomHost = isHost;
|
|
|
|
// Re-ejecutar la configuración de controles con el nuevo permiso
|
|
setupCustomControls();
|
|
|
|
// Forzar actualización visual si es necesario
|
|
if (els.playerWrapper) {
|
|
if (isHost) els.playerWrapper.classList.add('is-host');
|
|
else els.playerWrapper.classList.remove('is-host');
|
|
}
|
|
}
|
|
|
|
return {
|
|
init,
|
|
playEpisode,
|
|
getCurrentEpisode: () => _currentEpisode,
|
|
loadVideoFromRoom,
|
|
getVideoElement: () => els.video,
|
|
setRoomHost,
|
|
setWebSocket
|
|
};
|
|
})();
|
|
|
|
window.AnimePlayer = AnimePlayer; |