新增编码方式选择
This commit is contained in:
CN-JS-HuiBai
@@ -113,6 +113,12 @@ header p {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.video-list-section,
|
||||
.player-section,
|
||||
.folder-header {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
@@ -137,6 +143,32 @@ header p {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.codec-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.codec-panel label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.codec-panel select {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
min-width: 110px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.codec-panel select:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -159,7 +191,6 @@ header p {
|
||||
gap: 0.5rem;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -212,15 +243,16 @@ header p {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
text-overflow: clip;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -32,6 +32,13 @@
|
||||
<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"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="codec-panel">
|
||||
<label for="codec-select">编码方式：</label>
|
||||
<select id="codec-select">
|
||||
<option value="h264">H264</option>
|
||||
<option value="h265">H265</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="loading-spinner" class="spinner-container">
|
||||
<div class="spinner"></div>
|
||||
<p>Fetching S3 Objects...</p>
|
||||
|
||||
@@ -2,6 +2,7 @@ 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 playerOverlay = document.getElementById('player-overlay');
|
||||
const transcodingOverlay = document.getElementById('transcoding-overlay');
|
||||
const videoPlayer = document.getElementById('video-player');
|
||||
@@ -30,46 +31,54 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Build a tree structure from S3 keys
|
||||
// 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;
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
parts.forEach((part, index) => {
|
||||
if (!current[part]) {
|
||||
current[part] = (i === parts.length - 1) ? key : {};
|
||||
current[part] = {};
|
||||
}
|
||||
if (i < parts.length - 1) {
|
||||
current = 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 (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
|
||||
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';
|
||||
|
||||
@@ -95,9 +104,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -127,10 +141,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
transcodingOverlay.classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const codec = codecSelect?.value || 'h264';
|
||||
const res = await fetch('/api/transcode', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ key })
|
||||
body: JSON.stringify({ key, codec })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user