CN-JS-HuiBai/Media-Coding-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改自适应

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-02 17:15:16 +08:00
parent ac01354b59
commit f99417fcc5
2 changed files with 85 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
public/js/main.js
View File

@@ -19,32 +19,90 @@ document.addEventListener('DOMContentLoaded', () => {
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 MP4 videos found in the S3 bucket.</p>';
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
const tree = {};
data.videos.forEach(key => {
const li = document.createElement('li');
li.className = 'video-item';
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}">${key.split('/').pop()}</div>
<div class="video-meta">H264 / AAC</div>
</div>
`;
li.addEventListener('click', () => selectVideo(key, li));
videoListEl.appendChild(li);
const parts = key.split('/');
let current = tree;
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
if (!current[part]) {
current[part] = (i === parts.length - 1) ? key : {};
}
if (i < parts.length - 1) {
current = current[part];
}
}
});
// Recursive function to render the tree
const renderTree = (node, container) => {
for (const [name, value] of Object.entries(node)) {
if (typeof value === 'string') {
// It's a file
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="${value}">${name}</div>
<div class="video-meta">Video / ${ext}</div>
</div>
`;
li.addEventListener('click', (e) => {
e.stopPropagation();
selectVideo(value, li);
});
container.appendChild(li);
} else {
// It's a folder
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);
renderTree(value, subListContainer);
li.appendChild(subListContainer);
container.appendChild(li);
}
}
};
renderTree(tree, videoListEl);
} catch (err) {
console.error(err);
loadingSpinner.innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`;
@@ -56,16 +114,16 @@ document.addEventListener('DOMContentLoaded', () => {
// 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();
nowPlaying.classList.remove('hidden');
currentVideoTitle.textContent = key.split('/').pop();
transcodingOverlay.classList.remove('hidden');
try {
@@ -75,7 +133,7 @@ document.addEventListener('DOMContentLoaded', () => {
body: JSON.stringify({ key })
});
const data = await res.json();
if (data.error) throw new Error(data.error);
// Wait/Poll for HLS playlist to be ready