root/video_socket-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增视频管理

Browse Source
This commit is contained in:
stary
2026-05-25 17:39:57 +08:00
parent 254d9337bf
commit bbe7e71274
7 changed files with 1416 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
client/public/recordings/index.html Normal file
View File

@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VideoCall - 录制管理</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="min-h-screen w-screen text-white bg-grid recordings-page">
<div class="min-h-screen bg-black/70 flex flex-col">
<header class="glass-strong h-16 flex items-center justify-between px-6 border-b border-white/10">
<div class="flex items-center gap-3 min-w-0">
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="fas fa-video text-white text-lg"></i>
</div>
<div class="min-w-0">
<h1 class="font-bold text-lg tracking-tight">录制管理后台</h1>
<div class="flex items-center gap-3 text-xs text-gray-400">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
<span id="recordingRootText" class="truncate max-w-[60vw]">recordings</span>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<a href="/" class="recordings-icon-btn glass" title="返回视频通话">
<i class="fas fa-phone"></i>
</a>
<button id="refreshBtn" class="recordings-icon-btn glass" title="刷新列表">
<i class="fas fa-rotate-right"></i>
</button>
</div>
</header>
<main class="recordings-shell flex-1 overflow-hidden">
<section class="recordings-toolbar glass">
<div class="recordings-stat">
<span class="recordings-stat-value" id="totalCount">0</span>
<span class="recordings-stat-label">总录制</span>
</div>
<div class="recordings-stat">
<span class="recordings-stat-value" id="meetingCount">0</span>
<span class="recordings-stat-label">会议数</span>
</div>
<div class="recordings-stat">
<span class="recordings-stat-value" id="storageSize">0 MB</span>
<span class="recordings-stat-label">占用空间</span>
</div>
<div class="recordings-search">
<i class="fas fa-magnifying-glass text-gray-500"></i>
<input id="searchInput" type="search" placeholder="搜索会议、文件或用户" autocomplete="off">
</div>
<select id="typeFilter" class="recordings-select">
<option value="all">全部格式</option>
<option value="mp4">MP4</option>
<option value="webm">WebM</option>
</select>
</section>
<section class="recordings-content">
<aside class="recordings-upload glass">
<div class="flex items-center justify-between mb-5">
<div>
<h2 class="text-base font-semibold">新增录制</h2>
<p class="text-xs text-gray-500 mt-1">上传到 recordings 目录</p>
</div>
<div class="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center text-indigo-300">
<i class="fas fa-cloud-arrow-up"></i>
</div>
</div>
<form id="uploadForm" class="space-y-4">
<label class="recordings-dropzone" for="recordingFile">
<input id="recordingFile" type="file" accept="video/mp4,video/webm" class="hidden" required>
<i class="fas fa-file-video text-2xl text-indigo-300"></i>
<span id="fileNameText">选择 MP4 或 WebM 文件</span>
</label>
<div>
<label class="recordings-label" for="uploadMeetingId">会议 ID</label>
<input id="uploadMeetingId" class="recordings-input" type="text" placeholder="例如 665-261-326" required>
</div>
<div>
<label class="recordings-label" for="uploadUserId">用户 ID</label>
<input id="uploadUserId" class="recordings-input" type="text" placeholder="可选">
</div>
<button id="uploadBtn" class="recordings-primary-btn" type="submit">
<i class="fas fa-plus"></i>
<span>上传录制</span>
</button>
</form>
</aside>
<section class="recordings-list glass">
<div class="recordings-list-head">
<div>
<h2 class="text-base font-semibold">录制文件</h2>
<p class="text-xs text-gray-500 mt-1" id="listSummary">等待加载</p>
</div>
<button id="clearSearchBtn" class="recordings-text-btn hidden">
<i class="fas fa-xmark"></i>
<span>清空筛选</span>
</button>
</div>
<div id="loadingState" class="recordings-empty">
<div class="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
<span>正在读取 recordings 目录...</span>
</div>
<div id="emptyState" class="recordings-empty hidden">
<i class="fas fa-folder-open text-3xl text-gray-500"></i>
<span>还没有录制文件</span>
</div>
<div id="recordingsTableWrap" class="recordings-table-wrap hidden">
<table class="recordings-table">
<thead>
<tr>
<th>文件</th>
<th>会议</th>
<th>大小</th>
<th>上传时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="recordingsTableBody"></tbody>
</table>
</div>
</section>
<aside class="recordings-preview glass">
<div class="recordings-preview-video">
<video id="previewVideo" controls playsinline></video>
<div id="previewPlaceholder" class="recordings-preview-placeholder">
<i class="fas fa-play text-2xl"></i>
<span>选择一条录制预览</span>
</div>
</div>
<div class="recordings-preview-meta">
<h2 id="previewTitle">未选择录制</h2>
<div id="previewDetails" class="space-y-3 text-sm text-gray-400">
<p>从左侧列表选择文件后，可播放、下载、编辑或删除。</p>
</div>
</div>
</aside>
</section>
</main>
</div>
<div id="editDialog" class="fixed inset-0 bg-black/70 hidden items-center justify-center z-50">
<form id="editForm" class="recordings-dialog glass">
<div class="flex items-center justify-between mb-5">
<div>
<h2 class="text-lg font-semibold">编辑录制信息</h2>
<p class="text-xs text-gray-500 mt-1" id="editFilenameText"></p>
</div>
<button type="button" id="closeEditBtn" class="recordings-icon-btn" title="关闭">
<i class="fas fa-xmark"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="recordings-label" for="editMeetingId">会议 ID</label>
<input id="editMeetingId" class="recordings-input" type="text" required>
</div>
<div>
<label class="recordings-label" for="editOriginalFilename">显示名称</label>
<input id="editOriginalFilename" class="recordings-input" type="text" required>
</div>
<div>
<label class="recordings-label" for="editUserId">用户 ID</label>
<input id="editUserId" class="recordings-input" type="text">
</div>
</div>
<div class="flex gap-3 mt-6">
<button type="button" id="cancelEditBtn" class="recordings-secondary-btn">取消</button>
<button type="submit" class="recordings-primary-btn">
<i class="fas fa-floppy-disk"></i>
<span>保存</span>
</button>
</div>
</form>
</div>
<div id="notification" class="recordings-notification glass">
<i class="fas fa-info-circle text-indigo-400"></i>
<span id="notificationText"></span>
</div>
<script type="module" src="/recordings/recordings-admin.js"></script>
</body>
</html>

400
client/public/recordings/recordings-admin.js Normal file
View File

@@ -0,0 +1,400 @@
const state = {
recordings: [],
filtered: [],
selectedKey: '',
editing: null
};
const elements = {
refreshBtn: document.getElementById('refreshBtn'),
searchInput: document.getElementById('searchInput'),
typeFilter: document.getElementById('typeFilter'),
clearSearchBtn: document.getElementById('clearSearchBtn'),
uploadForm: document.getElementById('uploadForm'),
uploadBtn: document.getElementById('uploadBtn'),
recordingFile: document.getElementById('recordingFile'),
fileNameText: document.getElementById('fileNameText'),
uploadMeetingId: document.getElementById('uploadMeetingId'),
uploadUserId: document.getElementById('uploadUserId'),
totalCount: document.getElementById('totalCount'),
meetingCount: document.getElementById('meetingCount'),
storageSize: document.getElementById('storageSize'),
recordingRootText: document.getElementById('recordingRootText'),
listSummary: document.getElementById('listSummary'),
loadingState: document.getElementById('loadingState'),
emptyState: document.getElementById('emptyState'),
recordingsTableWrap: document.getElementById('recordingsTableWrap'),
recordingsTableBody: document.getElementById('recordingsTableBody'),
previewVideo: document.getElementById('previewVideo'),
previewPlaceholder: document.getElementById('previewPlaceholder'),
previewTitle: document.getElementById('previewTitle'),
previewDetails: document.getElementById('previewDetails'),
editDialog: document.getElementById('editDialog'),
editForm: document.getElementById('editForm'),
editFilenameText: document.getElementById('editFilenameText'),
editMeetingId: document.getElementById('editMeetingId'),
editOriginalFilename: document.getElementById('editOriginalFilename'),
editUserId: document.getElementById('editUserId'),
closeEditBtn: document.getElementById('closeEditBtn'),
cancelEditBtn: document.getElementById('cancelEditBtn'),
notification: document.getElementById('notification'),
notificationText: document.getElementById('notificationText')
};
function recordingKey(recording) {
return `${recording.meetingId}/${recording.filename}`;
}
function escapeHtml(value) {
return String(value || '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
function formatBytes(bytes) {
const value = Number(bytes) || 0;
if (value < 1024) {
return `${value} B`;
}
const units = ['KB', 'MB', 'GB', 'TB'];
let size = value / 1024;
let index = 0;
while (size >= 1024 && index < units.length - 1) {
size /= 1024;
index += 1;
}
return `${size.toFixed(size >= 10 ? 1 : 2)} ${units[index]}`;
}
function formatDate(value) {
if (!value) {
return '-';
}
const date = new Date(value);
if (Number.isNaN(date.getTime())) {
return '-';
}
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
function showNotification(message, isError = false) {
elements.notificationText.textContent = message;
elements.notification.classList.toggle('recordings-notification-error', isError);
elements.notification.classList.add('recordings-notification-visible');
window.clearTimeout(showNotification.timer);
showNotification.timer = window.setTimeout(() => {
elements.notification.classList.remove('recordings-notification-visible');
}, 2600);
}
async function requestJson(url, options = {}) {
const response = await fetch(url, options);
const payload = await response.json().catch(() => ({}));
if (!response.ok || payload.success === false) {
throw new Error(payload.message || `请求失败: ${response.status}`);
}
return payload;
}
function setLoading(isLoading) {
elements.loadingState.classList.toggle('hidden', !isLoading);
elements.recordingsTableWrap.classList.toggle('hidden', isLoading || state.filtered.length === 0);
elements.emptyState.classList.toggle('hidden', isLoading || state.filtered.length > 0);
}
async function loadRecordings() {
setLoading(true);
try {
const payload = await requestJson('/api/recordings');
state.recordings = payload.recordings || [];
elements.recordingRootText.textContent = payload.root || 'recordings';
applyFilters();
const selected = state.filtered.find(item => recordingKey(item) === state.selectedKey) || state.filtered[0];
selectRecording(selected || null);
} catch (error) {
state.recordings = [];
applyFilters();
selectRecording(null);
showNotification(error.message, true);
} finally {
setLoading(false);
}
}
function applyFilters() {
const query = elements.searchInput.value.trim().toLowerCase();
const type = elements.typeFilter.value;
state.filtered = state.recordings.filter((recording) => {
const extension = (recording.filename || '').split('.').pop().toLowerCase();
const haystack = [
recording.meetingId,
recording.filename,
recording.originalFilename,
recording.userId
].join(' ').toLowerCase();
return (type === 'all' || extension === type) && (!query || haystack.includes(query));
});
elements.clearSearchBtn.classList.toggle('hidden', !query && type === 'all');
renderSummary();
renderTable();
setLoading(false);
}
function renderSummary() {
const meetings = new Set(state.recordings.map(recording => recording.meetingId));
const totalSize = state.recordings.reduce((sum, recording) => sum + (Number(recording.size) || 0), 0);
elements.totalCount.textContent = state.recordings.length;
elements.meetingCount.textContent = meetings.size;
elements.storageSize.textContent = formatBytes(totalSize);
elements.listSummary.textContent = `当前显示 ${state.filtered.length} 条，共 ${state.recordings.length} 条`;
}
function renderTable() {
elements.recordingsTableBody.innerHTML = state.filtered.map((recording) => {
const key = recordingKey(recording);
const active = key === state.selectedKey ? 'recordings-row-active' : '';
const ext = escapeHtml((recording.filename || '').split('.').pop().toUpperCase());
return `
<tr class="${active}" data-key="${escapeHtml(key)}">
<td>
<button class="recordings-file-cell" data-action="select" data-key="${escapeHtml(key)}">
<span class="recordings-file-icon">${ext}</span>
<span class="min-w-0">
<span class="recordings-file-name">${escapeHtml(recording.originalFilename || recording.filename)}</span>
<span class="recordings-file-sub">${escapeHtml(recording.filename)}</span>
</span>
</button>
</td>
<td>${escapeHtml(recording.meetingId)}</td>
<td>${formatBytes(recording.size)}</td>
<td>${formatDate(recording.uploadedAt)}</td>
<td>
<div class="recordings-actions">
<button class="recordings-icon-btn" data-action="preview" data-key="${escapeHtml(key)}" title="预览">
<i class="fas fa-play"></i>
</button>
<a class="recordings-icon-btn" href="${escapeHtml(recording.downloadUrl)}" title="下载">
<i class="fas fa-download"></i>
</a>
<button class="recordings-icon-btn" data-action="edit" data-key="${escapeHtml(key)}" title="编辑">
<i class="fas fa-pen"></i>
</button>
<button class="recordings-icon-btn recordings-danger" data-action="delete" data-key="${escapeHtml(key)}" title="删除">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
`;
}).join('');
}
function findRecording(key) {
return state.recordings.find(recording => recordingKey(recording) === key);
}
function selectRecording(recording) {
if (!recording) {
state.selectedKey = '';
elements.previewVideo.removeAttribute('src');
elements.previewVideo.load();
elements.previewPlaceholder.classList.remove('hidden');
elements.previewTitle.textContent = '未选择录制';
elements.previewDetails.innerHTML = '<p>从左侧列表选择文件后，可播放、下载、编辑或删除。</p>';
renderTable();
return;
}
state.selectedKey = recordingKey(recording);
elements.previewVideo.src = recording.streamUrl;
elements.previewPlaceholder.classList.add('hidden');
elements.previewTitle.textContent = recording.originalFilename || recording.filename;
elements.previewDetails.innerHTML = `
<div class="recordings-detail-row"><span>会议 ID</span><strong>${escapeHtml(recording.meetingId)}</strong></div>
<div class="recordings-detail-row"><span>文件名</span><strong>${escapeHtml(recording.filename)}</strong></div>
<div class="recordings-detail-row"><span>格式</span><strong>${escapeHtml(recording.mimetype)}</strong></div>
<div class="recordings-detail-row"><span>大小</span><strong>${formatBytes(recording.size)}</strong></div>
<div class="recordings-detail-row"><span>用户 ID</span><strong>${escapeHtml(recording.userId || '-')}</strong></div>
<div class="recordings-detail-row"><span>上传时间</span><strong>${formatDate(recording.uploadedAt)}</strong></div>
<div class="recordings-preview-actions">
<a class="recordings-primary-btn" href="${escapeHtml(recording.downloadUrl)}">
<i class="fas fa-download"></i>
<span>下载</span>
</a>
<button class="recordings-secondary-btn" type="button" data-preview-action="edit">编辑</button>
</div>
`;
renderTable();
}
function openEdit(recording) {
if (!recording) {
return;
}
state.editing = recording;
elements.editFilenameText.textContent = recording.filename;
elements.editMeetingId.value = recording.meetingId || '';
elements.editOriginalFilename.value = recording.originalFilename || recording.filename || '';
elements.editUserId.value = recording.userId || '';
elements.editDialog.classList.remove('hidden');
elements.editDialog.classList.add('flex');
elements.editMeetingId.focus();
}
function closeEdit() {
state.editing = null;
elements.editDialog.classList.add('hidden');
elements.editDialog.classList.remove('flex');
}
async function handleUpload(event) {
event.preventDefault();
const file = elements.recordingFile.files[0];
if (!file) {
showNotification('请选择录制文件', true);
return;
}
const formData = new FormData();
formData.append('recording', file, file.name);
formData.append('filename', file.name);
formData.append('meetingId', elements.uploadMeetingId.value.trim());
formData.append('userId', elements.uploadUserId.value.trim());
elements.uploadBtn.disabled = true;
try {
await requestJson('/api/recordings', {
method: 'POST',
body: formData
});
elements.uploadForm.reset();
elements.fileNameText.textContent = '选择 MP4 或 WebM 文件';
showNotification('录制已上传');
await loadRecordings();
} catch (error) {
showNotification(error.message, true);
} finally {
elements.uploadBtn.disabled = false;
}
}
async function handleEdit(event) {
event.preventDefault();
if (!state.editing) {
return;
}
const recording = state.editing;
try {
const payload = await requestJson(`/api/recordings/${encodeURIComponent(recording.meetingId)}/${encodeURIComponent(recording.filename)}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
meetingId: elements.editMeetingId.value.trim(),
originalFilename: elements.editOriginalFilename.value.trim(),
userId: elements.editUserId.value.trim()
})
});
state.selectedKey = recordingKey(payload.recording);
closeEdit();
showNotification('录制信息已更新');
await loadRecordings();
} catch (error) {
showNotification(error.message, true);
}
}
async function deleteRecording(recording) {
if (!recording) {
return;
}
const confirmed = window.confirm(`确定删除录制文件 "${recording.originalFilename || recording.filename}" 吗？`);
if (!confirmed) {
return;
}
try {
await requestJson(`/api/recordings/${encodeURIComponent(recording.meetingId)}/${encodeURIComponent(recording.filename)}`, {
method: 'DELETE'
});
if (state.selectedKey === recordingKey(recording)) {
state.selectedKey = '';
}
showNotification('录制已删除');
await loadRecordings();
} catch (error) {
showNotification(error.message, true);
}
}
function bindEvents() {
elements.refreshBtn.addEventListener('click', loadRecordings);
elements.searchInput.addEventListener('input', applyFilters);
elements.typeFilter.addEventListener('change', applyFilters);
elements.clearSearchBtn.addEventListener('click', () => {
elements.searchInput.value = '';
elements.typeFilter.value = 'all';
applyFilters();
});
elements.recordingFile.addEventListener('change', () => {
const file = elements.recordingFile.files[0];
elements.fileNameText.textContent = file ? file.name : '选择 MP4 或 WebM 文件';
});
elements.uploadForm.addEventListener('submit', handleUpload);
elements.editForm.addEventListener('submit', handleEdit);
elements.closeEditBtn.addEventListener('click', closeEdit);
elements.cancelEditBtn.addEventListener('click', closeEdit);
elements.editDialog.addEventListener('click', (event) => {
if (event.target === elements.editDialog) {
closeEdit();
}
});
elements.recordingsTableBody.addEventListener('click', (event) => {
const control = event.target.closest('[data-action]');
if (!control) {
return;
}
const recording = findRecording(control.dataset.key);
const action = control.dataset.action;
if (action === 'select' || action === 'preview') {
selectRecording(recording);
if (action === 'preview') {
elements.previewVideo.play().catch(() => undefined);
}
} else if (action === 'edit') {
openEdit(recording);
} else if (action === 'delete') {
deleteRecording(recording);
}
});
elements.previewDetails.addEventListener('click', (event) => {
const control = event.target.closest('[data-preview-action]');
if (control && control.dataset.previewAction === 'edit') {
openEdit(findRecording(state.selectedKey));
}
});
}
bindEvents();
loadRecordings();