177 lines
8.2 KiB
HTML
177 lines
8.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>文件预览与下载</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<nav class="crumbs">
|
|
<a href="/">数据源控制台</a>
|
|
<span>/</span>
|
|
<a id="sourceCrumb" href="/">数据源工作台</a>
|
|
<span>/</span>
|
|
<span>文件页</span>
|
|
</nav>
|
|
|
|
<section class="hero hero-compact">
|
|
<div>
|
|
<p class="eyebrow">File Workspace</p>
|
|
<h1 id="fileTitle">文件预览与下载</h1>
|
|
</div>
|
|
<p class="lead">
|
|
这里负责浏览器直连 WebDAV 的视频预览、下载、本地缓存和预览图回写。大流量文件流依然只走前端，不经过后端文件代理。
|
|
</p>
|
|
</section>
|
|
|
|
<div class="auth-toolbar">
|
|
<span id="authStatus" class="auth-status">正在读取登录状态...</span>
|
|
<button id="logoutButton" class="ghost-button" type="button">退出登录</button>
|
|
</div>
|
|
|
|
<div id="feedback" class="feedback" hidden></div>
|
|
|
|
<section class="workspace-shell">
|
|
<aside class="workspace-nav" aria-label="文件工作台菜单">
|
|
<a class="workspace-nav-link" href="#overview" data-view-link="overview">文件概况</a>
|
|
<a class="workspace-nav-link" href="#preview" data-view-link="preview">视频预览</a>
|
|
<a class="workspace-nav-link" href="#download" data-view-link="download">下载</a>
|
|
<a class="workspace-nav-link" href="#cache" data-view-link="cache">本地缓存</a>
|
|
<a class="workspace-nav-link" href="#thumbnail" data-view-link="thumbnail">预览图</a>
|
|
</aside>
|
|
|
|
<div class="workspace-content">
|
|
<section class="workspace-panel" data-view-panel="overview">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-label">File</p>
|
|
<h2>文件概况</h2>
|
|
</div>
|
|
</div>
|
|
<div id="fileSummary" class="empty-state-card">正在读取文件摘要...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workspace-panel" data-view-panel="preview" hidden>
|
|
<div class="panel stack-gap">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-label">Preview</p>
|
|
<h2>视频预览</h2>
|
|
</div>
|
|
<div class="form-actions workspace-inline-actions">
|
|
<button id="startPreviewButton" class="primary-button" type="button">启动视频预览</button>
|
|
<button id="deleteThumbnailFromPreviewButton" class="ghost-button danger-button" type="button">删除当前预览图</button>
|
|
</div>
|
|
</div>
|
|
<p id="videoHint" class="panel-copy">
|
|
只有增强完成、并且 MIME 为视频的文件，才会在这里启用浏览器端 Range 播放。
|
|
</p>
|
|
<div id="previewThumbnailHint" class="summary-card">
|
|
这里删除的是后端缩略图缓存，不会删除浏览器本地视频缓存，也不会影响当前视频文件本身。
|
|
</div>
|
|
|
|
<div id="clientSecretHint" class="summary-card">正在计算当前任务的浏览器默认值...</div>
|
|
<form id="clientSecretForm" class="secret-form">
|
|
<label>
|
|
<span>WebDAV Base URL</span>
|
|
<input id="clientWebdavBaseUrl" name="webdavBaseUrl" type="url" placeholder="默认会自动带出当前任务的目标 URL">
|
|
</label>
|
|
<label>
|
|
<span>认证方式</span>
|
|
<select id="clientAuthMode" name="authMode">
|
|
<option value="basic">Basic</option>
|
|
<option value="anonymous">Anonymous</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>用户名</span>
|
|
<input id="clientUsername" name="username" type="text" placeholder="默认继承浏览器全局默认值">
|
|
</label>
|
|
<label>
|
|
<span>密码</span>
|
|
<input id="clientPassword" name="password" type="password" placeholder="默认继承浏览器全局默认值">
|
|
</label>
|
|
<label>
|
|
<span>备份口令</span>
|
|
<input id="clientPassphrase" name="passphrase" type="password" placeholder="默认继承浏览器全局默认值">
|
|
</label>
|
|
<label class="checkbox-row">
|
|
<input id="rememberOnDevice" name="rememberOnDevice" type="checkbox">
|
|
<span>记住为当前 source 的浏览器本地覆盖</span>
|
|
</label>
|
|
<div class="form-actions">
|
|
<button id="saveClientSecretsButton" class="ghost-button" type="submit">保存当前 source 覆盖</button>
|
|
<button id="saveClientGlobalsButton" class="ghost-button" type="button">保存为浏览器全局默认值</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="video-frame">
|
|
<video id="previewPlayer" controls preload="metadata"></video>
|
|
</div>
|
|
<canvas id="thumbnailCaptureCanvas" hidden></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workspace-panel" data-view-panel="download" hidden>
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-label">Download</p>
|
|
<h2>前端直连下载</h2>
|
|
</div>
|
|
<button id="downloadButton" class="ghost-button" type="button">下载到本地</button>
|
|
</div>
|
|
<p class="panel-copy">
|
|
下载会复用视频预览相同的浏览器直连配置和 dblock 缓存，顺序读取所需分段并直接写盘，不把整个文件拼进内存。
|
|
</p>
|
|
<div id="downloadStatus" class="summary-card">尚未开始下载。</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workspace-panel" data-view-panel="cache" hidden>
|
|
<div class="panel stack-gap">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-label">Cache</p>
|
|
<h2>本地缓存与会话状态</h2>
|
|
</div>
|
|
</div>
|
|
<div id="sessionStatus" class="summary-card">尚未注册媒体会话。</div>
|
|
<div id="cacheStatus" class="summary-card">正在统计浏览器本地缓存...</div>
|
|
<div class="form-actions">
|
|
<button id="clearSourceCacheButton" class="ghost-button danger-button" type="button">清理当前 source 缓存</button>
|
|
<button id="clearAllCacheButton" class="ghost-button danger-button" type="button">清理全部浏览器缓存</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workspace-panel" data-view-panel="thumbnail" hidden>
|
|
<div class="panel stack-gap">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-label">Preview Thumbnail</p>
|
|
<h2>预览图</h2>
|
|
</div>
|
|
<button id="deleteThumbnailButton" class="ghost-button danger-button" type="button">删除当前预览图</button>
|
|
</div>
|
|
<p class="panel-copy">
|
|
视频第一次成功预览后，会自动截取可用画面并回写到后端。目录浏览页会直接使用这里缓存的缩略图。
|
|
</p>
|
|
<div id="thumbnailStatus" class="summary-card">正在读取预览图状态...</div>
|
|
<div id="thumbnailPreview" class="thumbnail-card">
|
|
<div class="thumbnail-placeholder">暂无预览图</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="/file.js"></script>
|
|
</body>
|
|
</html>
|