这个是前后端分离的的试验版，因有坛友想写自己的 CSR 模板。这个版本不能使用论坛上现有的官解模板，我一起打包了一份新的作为参考。
基本复用了 SSR 序列化的代码，所以 API 的返回值约等于现有模板里的 {{ ctx.* }}，区别是 data.com.urls.current 不是当前页面地址而是 API 的地址，当前页地址需用 JS 自行获取。
下载
注意
最小模板文件结构
一起打包的模板为了复用代码用到了继承，可以去除。也可以做成单页应用，但遇到 404 后端还是会去寻找对应的模板文件做服务端渲染。
/error/
├─ err_404.html
/statics/ # 静态文件
/vod/
├─ detail.html
├─ play.html
├─ search.html
index.html
模板语法
我的模板引擎用到了几乎所有被 {* *} 包裹的分隔符，如 {| {{ {[ {=，所以不能直接在 HTML 模板中写 JS 模板或 JSX，需要预编译成 .js 文件。或者你自定义 JS 模板引擎的分隔符为非 { } 开头结尾，如 (( (% @(。再或者像我一样只写原生 JS。
搜索页性能优化
方案一
永远不跳转到搜索页，因为客户端渲染会触发二次搜索。写一个调用 /api/vod/search/ 的搜索组件，将所有页面的搜索框都替换为这个组件。
方案二
搜索时跳转到搜索页 /vod/search/，但 kw 参数保持为空，传递另一个参数给 JS 异步调用。比如访问 /vod/search/?kw=&jskw={关键词}，页面 JS 拿到 jskw 再调用 /api/search/?kw={jskw 的值}，这样也可以避免二次搜索。
目前支持的 API
所有 API 的返回值都是形如 { code: Number, msg: String, data: T } 的对象，成功则 code 为 200，data 是实际数据。注意错误有两种可能，一种是 fetch 的 !response.ok，比如 404；另一种是 code != 200，需要分别判断。
/api/vod/search/?kw={关键词}&field={字段} field 可省略，开启搜索优化后可取值 tag 或 staff。/api/vod/detail/?id={id} 影片详情。/api/vod/play/?id={id}&ch={线路编码}&ep={集数} 单页应用也可以不调用这个接口，/api/vod/detail/?id={id} 已经包含全部信息了。/api/vod/last_updated/ 最近更新的影片。/api/vod/today/ 今日更新的影片。可以同时调用 last_updated 和 today，取数量多的那个。/api/vod/count/?duration={毫秒数} 资源数量。duration=0 返回总数，否则返回毫秒内的更新数量，比如 duration=86400000 返回最近 24 小时更新的数量。
未剥离的 API
试写可以先跳过本节。
测速我是编译成 WASM 了，需使用现有模板里的 .wasm 和 .js。去广告的接口我还没设计好，也是先复制我模板里的函数用。
去广告
const adClean = async (url) => {
if (!url.endsWith('.m3u8')) return url
const indexUrl = url
let retry = 2
while (retry > 0) {
try {
const txt = await (await fetch(url)).text()
let res = await fetch('/vod/api/m3u8/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `url=${encodeURIComponent(url)}&content=${encodeURIComponent(txt)}&index_url=${encodeURIComponent(indexUrl)}`
})
res = await res.json()
if (res.code == 200) {
if (res.data.master.length == 0) {
return `/vod/api/m3u8/?url=${encodeURIComponent(indexUrl)}`
} else {
url = res.data.master
continue
}
}
break
} catch (e) {
console.log(e)
retry--
}
}
}
测速
<!-- 每个线路分别取第一集和最后一集的 URL 设置到 `data-first` `data-last` 属性上 -->
<div class="vod-speed" data-first="" data-last=""></div>
<p>一键测速：<button class="speed-btn" onclick="detectSpeed(1)" disabled>
<span id="speed-btn-1">加载中 </span>
</button>
<button class="speed-btn" onclick="detectSpeed(-1)" disabled>
<span id="speed-btn-2">请稍后 </span>
</button>
“测速失败”表示线路不可用或需要升级浏览器至较新版本。<span id="speed-tips"></span>
</p>
<script type="module">
import init, { detect_m3u8_speed, detect_read_speed } from '/statics/vod/speed_detector.js'
const getById = (id) => document.getElementById(id)
const enable = () => {
getById('speed-btn-1').textContent = '测第一集'
getById('speed-btn-2').textContent = '测最新集'
document
.querySelectorAll('.speed-btn')
.forEach((x) => x.removeAttribute('disabled'))
}
const disable = () => {
document
.querySelectorAll('.speed-btn')
.forEach((x) => x.setAttribute('disabled', 'disabled'))
getById('speed-btn-1').innerHTML = '测速中 '
getById('speed-btn-2').innerHTML = '请稍后 '
}
init().then(enable)
window.detectSpeed = async (arg) => {
disable()
const promises = []
const ATTR = arg == 1 ? 'data-first' : 'data-last'
let fst = true
for (const el of document.querySelectorAll('.vod-speed')) {
const content = el.textContent
el.textContent = '测速中'
setTimeout(() => {
const href = el.getAttribute(ATTR)
let detector
if (href.endsWith('.m3u8')) {
detector = detect_m3u8_speed
} else if (href.endsWith('.mp4')) {
detector = detect_read_speed
} else {
el.textContent = content
return
}
const prm = detector(href, arg)
.then((x) => el.textContent = (x / 8 / 1024).toFixed(2) + 'KB/S')
.catch(() => { el.textContent = '测速失败' })
promises.push(prm)
}, fst ? 0 : 1000)
fst = false
}
const tasks = new Promise((resolve) => setTimeout(() => Promise.all(promises).then(resolve), 2000))
const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 15000))
const tips = '<br><span class="neon-flash">有些浏览器有缓存，再次测速可能需要刷新页面才能得到准确结果。</span>'
Promise.race([tasks, timeout]).then(enable).catch(enable).finally(() => getById('speed-tips').innerHTML = tips)
}
</script>
