232 lines
9.5 KiB
JavaScript
232 lines
9.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const videoListEl = document.getElementById('video-list');
|
|
const loadingSpinner = document.getElementById('loading-spinner');
|
|
const refreshBtn = document.getElementById('refresh-btn');
|
|
const codecSelect = document.getElementById('codec-select');
|
|
const encoderSelect = document.getElementById('encoder-select');
|
|
const playerOverlay = document.getElementById('player-overlay');
|
|
const transcodingOverlay = document.getElementById('transcoding-overlay');
|
|
const videoPlayer = document.getElementById('video-player');
|
|
const nowPlaying = document.getElementById('now-playing');
|
|
const currentVideoTitle = document.getElementById('current-video-title');
|
|
const playBtn = document.getElementById('play-btn');
|
|
|
|
let currentPollInterval = null;
|
|
|
|
if (playBtn) {
|
|
playBtn.addEventListener('click', () => {
|
|
videoPlayer.play().catch(e => console.log('Play blocked:', e));
|
|
playBtn.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
// Fetch list of videos from the backend
|
|
const fetchVideos = async () => {
|
|
videoListEl.classList.add('hidden');
|
|
loadingSpinner.classList.remove('hidden');
|
|
videoListEl.innerHTML = '';
|
|
|
|
try {
|
|
const res = await fetch('/api/videos');
|
|
if (!res.ok) throw new Error('Failed to fetch videos. Check S3 Config.');
|
|
|
|
const data = await res.json();
|
|
|
|
loadingSpinner.classList.add('hidden');
|
|
videoListEl.classList.remove('hidden');
|
|
|
|
if (data.videos.length === 0) {
|
|
videoListEl.innerHTML = '<p style="color: var(--text-secondary); text-align: center; padding: 2rem;">No videos found.</p>';
|
|
return;
|
|
}
|
|
|
|
// Build a tree structure from S3 keys, preserving original object storage directories
|
|
const tree = {};
|
|
data.videos.forEach(key => {
|
|
const parts = key.split('/');
|
|
let current = tree;
|
|
parts.forEach((part, index) => {
|
|
if (!current[part]) {
|
|
current[part] = {};
|
|
}
|
|
|
|
if (index === parts.length - 1) {
|
|
current[part].__file = key;
|
|
}
|
|
|
|
current = current[part];
|
|
});
|
|
});
|
|
|
|
const createFileItem = (name, key) => {
|
|
const li = document.createElement('li');
|
|
li.className = 'video-item file-item';
|
|
const ext = name.split('.').pop().toUpperCase();
|
|
li.innerHTML = `
|
|
<div class="video-icon">
|
|
<svg xmlns="http://www.w3.org/2000/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="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
|
|
</div>
|
|
<div class="video-info">
|
|
<div class="video-title" title="${key}">${name}</div>
|
|
<div class="video-meta">Video / ${ext}</div>
|
|
</div>
|
|
`;
|
|
li.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
selectVideo(key, li);
|
|
});
|
|
return li;
|
|
};
|
|
|
|
// Recursive function to render the tree
|
|
const renderTree = (node, container) => {
|
|
for (const [name, value] of Object.entries(node)) {
|
|
if (name === '__file') continue;
|
|
|
|
const childKeys = Object.keys(value).filter(key => key !== '__file');
|
|
const hasChildren = childKeys.length > 0;
|
|
const isFile = typeof value.__file === 'string';
|
|
|
|
if (hasChildren) {
|
|
const li = document.createElement('li');
|
|
li.className = 'folder-item';
|
|
|
|
const folderHeader = document.createElement('div');
|
|
folderHeader.className = 'folder-header';
|
|
folderHeader.innerHTML = `
|
|
<div class="folder-icon">
|
|
<svg xmlns="http://www.w3.org/2000/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="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|
</div>
|
|
<div class="folder-title" title="${name}">${name}</div>
|
|
<div class="folder-toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron"><path d="m9 18 6-6-6-6"/></svg>
|
|
</div>
|
|
`;
|
|
|
|
const subListContainer = document.createElement('ul');
|
|
subListContainer.className = 'sub-list hidden';
|
|
|
|
folderHeader.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
li.classList.toggle('open');
|
|
subListContainer.classList.toggle('hidden');
|
|
});
|
|
|
|
li.appendChild(folderHeader);
|
|
if (isFile) {
|
|
subListContainer.appendChild(createFileItem(name, value.__file));
|
|
}
|
|
renderTree(value, subListContainer);
|
|
li.appendChild(subListContainer);
|
|
container.appendChild(li);
|
|
} else if (isFile) {
|
|
container.appendChild(createFileItem(name, value.__file));
|
|
}
|
|
}
|
|
};
|
|
|
|
renderTree(tree, videoListEl);
|
|
} catch (err) {
|
|
console.error(err);
|
|
loadingSpinner.innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`;
|
|
}
|
|
};
|
|
|
|
// Handle video selection and trigger transcode
|
|
const selectVideo = async (key, listItemNode) => {
|
|
// Update UI
|
|
document.querySelectorAll('.video-item').forEach(n => n.classList.remove('active'));
|
|
listItemNode.classList.add('active');
|
|
|
|
// Reset player UI
|
|
stopPolling();
|
|
playerOverlay.classList.add('hidden');
|
|
videoPlayer.classList.add('hidden');
|
|
videoPlayer.pause();
|
|
if (playBtn) playBtn.classList.add('hidden');
|
|
|
|
nowPlaying.classList.remove('hidden');
|
|
currentVideoTitle.textContent = key.split('/').pop();
|
|
|
|
transcodingOverlay.classList.remove('hidden');
|
|
|
|
try {
|
|
const codec = codecSelect?.value || 'h264';
|
|
const encoder = encoderSelect?.value || 'software';
|
|
const res = await fetch('/api/transcode', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ key, codec, encoder })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.error) throw new Error(data.error);
|
|
|
|
// Wait/Poll for HLS playlist to be ready
|
|
pollForHlsReady(key, data.hlsUrl);
|
|
} catch (err) {
|
|
console.error(err);
|
|
transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Transcode Failed: ${err.message}</p>`;
|
|
}
|
|
};
|
|
|
|
// Poll the backend to check if the generated m3u8 file is accessible
|
|
const pollForHlsReady = (key, hlsUrl) => {
|
|
let attempts = 0;
|
|
const maxAttempts = 60; // 60 seconds max wait for first segment
|
|
|
|
currentPollInterval = setInterval(async () => {
|
|
attempts++;
|
|
try {
|
|
const res = await fetch(`/api/status?key=${encodeURIComponent(key)}`);
|
|
const data = await res.json();
|
|
|
|
if (data.ready) {
|
|
stopPolling();
|
|
playHlsStream(data.hlsUrl);
|
|
} else if (attempts >= maxAttempts) {
|
|
stopPolling();
|
|
transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Timeout waiting for HLS segments.</p>`;
|
|
}
|
|
} catch (err) {
|
|
console.error("Poll Error:", err);
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
const stopPolling = () => {
|
|
if (currentPollInterval) {
|
|
clearInterval(currentPollInterval);
|
|
currentPollInterval = null;
|
|
}
|
|
};
|
|
|
|
// Initialize HLS Player
|
|
const playHlsStream = (url) => {
|
|
transcodingOverlay.classList.add('hidden');
|
|
videoPlayer.classList.remove('hidden');
|
|
playBtn.classList.add('hidden');
|
|
|
|
if (Hls.isSupported()) {
|
|
const hls = new Hls();
|
|
hls.loadSource(url);
|
|
hls.attachMedia(videoPlayer);
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
playBtn.classList.remove('hidden');
|
|
});
|
|
} else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
|
|
// Safari uses native HLS
|
|
videoPlayer.src = url;
|
|
videoPlayer.addEventListener('loadedmetadata', () => {
|
|
playBtn.classList.remove('hidden');
|
|
}, { once: true });
|
|
}
|
|
};
|
|
|
|
// Bind events
|
|
refreshBtn.addEventListener('click', fetchVideos);
|
|
|
|
// Initial load
|
|
fetchVideos();
|
|
});
|