Files
decap-stream/src/app/api/player-html/[id]/route.ts
T
Kralot 8bcc269594 Adiciona env vars de defaults de UI e melhora compatibilidade mobile dos players
---

- Adicionado endpoint GET /api/config que expõe as env vars de defaults para o frontend;
- Adicionadas env vars DEFAULT_PURE_MODE, DEFAULT_OPEN_NEW_TAB, DEFAULT_RELOAD_CLIENT e DEFAULT_RELOAD_CLIENT_TIME ao docker-compose.yml e README.md;
- Na primeira sessão sem global-prefs em localStorage, a UI busca os defaults do servidor via /api/config;
- Adicionado fallback de HLS nativo para iOS Safari em todos os players HTML (Hls.isSupported() → v.src + v.play());
- Substituído AbortSignal.timeout() por AbortController + setTimeout para compatibilidade com iOS ≤ 15;
- Corrigido stall detection falso-positivo: verificação só dispara após currentTime > 0 (vídeo realmente iniciado);
- Adicionado height: 100dvh nos players para corrigir clipping do iOS causado pelo 100vh incluir a chrome bar do browser;
- Adicionado atributo muted no <video> do player /static/[id] para permitir autoplay mobile;
- Adicionado listener de touchstart nos botões flutuantes de Back e Mute para exibição em touch;
- Botão Back do player React ampliado no mobile (px-5 py-3 text-[1.1rem]) para paridade visual com o player HTML;
- Comentários do docker-compose.yml traduzidos para inglês e reorganizados inline;

---
2026-04-28 10:34:04 -03:00

77 lines
2.5 KiB
TypeScript

import { type NextRequest, NextResponse } from "next/server"
type Ctx = { params: Promise<{ id: string }> }
export async function GET(_req: NextRequest, { params }: Ctx) {
const { id } = await params
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000;overflow:hidden;width:100%;height:100%}
video{width:100vw;height:100vh;display:block;object-fit:contain}
#msg{
position:fixed;top:16px;left:50%;transform:translateX(-50%);
background:rgba(0,0,0,0.75);color:#fff;padding:8px 20px;
border-radius:8px;font-family:sans-serif;font-size:34px;
display:none;z-index:9
}
</style>
</head>
<body>
<video id="v" autoplay muted playsinline></video>
<div id="msg"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.12/hls.min.js"></script>
<script>
var streamId='${id}';
var proxyUrl='/api/hls/live/'+streamId+'/index.m3u8';
var directUrl='http://'+window.location.hostname+':8888/live/'+streamId+'/index.m3u8';
var activeSrc=proxyUrl;
var hls;
function showMsg(t){
var m=document.getElementById('msg');
m.textContent=t;m.style.display='block';
setTimeout(function(){m.style.display='none';},4000);
}
function load(src){
activeSrc=src;
if(hls)hls.destroy();
hls=new Hls({
liveSyncDurationCount:2,liveMaxLatencyDurationCount:4,
manifestLoadingTimeOut:10000,manifestLoadingMaxRetry:10,
fragLoadingTimeOut:10000,fragLoadingMaxRetry:10
});
hls.loadSource(src);
hls.attachMedia(document.getElementById('v'));
hls.on(Hls.Events.MANIFEST_PARSED,function(){document.getElementById('v').play();});
hls.on(Hls.Events.ERROR,function(e,d){
if(d.fatal){showMsg('Erro: '+d.type+' — reconectando...');setTimeout(function(){load(activeSrc);},3000);}
});
}
var last=0;
setInterval(function(){
var v=document.getElementById('v');
if(v.currentTime===last&&!v.paused){showMsg('Stream travada — recarregando...');load(activeSrc);}
last=v.currentTime;
},10000);
var ctrl=new AbortController();
var fetchTimer=setTimeout(function(){ctrl.abort();},2000);
fetch(directUrl,{method:'HEAD',signal:ctrl.signal})
.then(function(){clearTimeout(fetchTimer);load(directUrl);})
.catch(function(){clearTimeout(fetchTimer);load(proxyUrl);});
</script>
</body>
</html>`
return new NextResponse(html, {
headers: { "Content-Type": "text/html; charset=utf-8" },
})
}