Add /test-embed route - compare our player with Rok viprime embed widget for all 6 channels
This commit is contained in:
Sebastjan
parent
f15e5a1d83
commit
63679fe786
@ -18,6 +18,10 @@ app.get('/', (_req, res) => {
|
|||||||
res.render('index', { hlsUrl: STREAM_URL });
|
res.render('index', { hlsUrl: STREAM_URL });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.get('/test-embed', (_req, res) => {
|
||||||
|
res.render('test-embed');
|
||||||
|
});
|
||||||
|
|
||||||
app.get('/api/health', (_req, res) => {
|
app.get('/api/health', (_req, res) => {
|
||||||
res.json({ ok: true, hls: STREAM_URL, ts: Date.now() });
|
res.json({ ok: true, hls: STREAM_URL, ts: Date.now() });
|
||||||
});
|
});
|
||||||
|
|||||||
270
views/test-embed.ejs
Normal file
270
views/test-embed.ejs
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>FOLX — Test Embed Comparison</title>
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--folx-magenta: #dc1c4c;
|
||||||
|
--bg-0: #000;
|
||||||
|
--bg-1: #0a0a0a;
|
||||||
|
--bg-2: #141414;
|
||||||
|
--border: #2a2a2a;
|
||||||
|
--text: #f5f5f5;
|
||||||
|
--text-muted: #888;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
background: var(--bg-0);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Archivo', sans-serif;
|
||||||
|
padding: 24px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-family: 'Archivo Black', sans-serif;
|
||||||
|
font-size: 28px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.lead {
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
max-width: 800px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 24px;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: var(--bg-1);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.card h2 {
|
||||||
|
font-family: 'Archivo Black', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
color: var(--folx-magenta);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.card .desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.card .desc b { color: var(--text); }
|
||||||
|
.player-box {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.player-box.our video {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
background: var(--bg-0);
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.nav a {
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.nav a:hover { color: var(--folx-magenta); }
|
||||||
|
.channel-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 32px;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) { .channel-grid { grid-template-columns: 1fr 1fr; } }
|
||||||
|
@media (max-width: 600px) { .channel-grid { grid-template-columns: 1fr; } }
|
||||||
|
.channel-card {
|
||||||
|
background: var(--bg-1);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
.channel-card h3 {
|
||||||
|
font-family: 'Archivo Black', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.channel-card .ch-num {
|
||||||
|
color: var(--folx-magenta);
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.channel-card .ch-frame {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
background: #000;
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
h2.section-head {
|
||||||
|
font-family: 'Archivo Black', sans-serif;
|
||||||
|
font-size: 22px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 48px auto 16px;
|
||||||
|
}
|
||||||
|
.section-sub {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="nav">
|
||||||
|
<a href="/">← Nazaj na folx.live</a>
|
||||||
|
<span style="color: var(--text-muted); font-size: 12px;">Internal test page · noindex</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Embed Comparison Test</h1>
|
||||||
|
<p class="lead">
|
||||||
|
Primerjava med <b style="color:var(--text);">našim Twitch-style playerjem</b> in
|
||||||
|
<b style="color:var(--text);">Rokovim embed widgetom</b> (livestream1.viprime.net).
|
||||||
|
Stran je samo za interno testiranje — ni indeksirana.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
<!-- Our player -->
|
||||||
|
<div class="card">
|
||||||
|
<h2>1 · Naš player (folx.live)</h2>
|
||||||
|
<p class="desc">
|
||||||
|
Express + EJS · HLS.js direkt · custom audio/fullscreen · ABR (1080p/720p/480p) ·
|
||||||
|
Twitch-style: <b>brez pause</b>, vedno live edge.
|
||||||
|
</p>
|
||||||
|
<div class="player-box our">
|
||||||
|
<video id="ourVideo" autoplay muted playsinline tabindex="-1"></video>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
SOURCE: https://folxplay.b-cdn.net/live/stream1_master.m3u8<br/>
|
||||||
|
MODE: Linear TV · Twitch-style · No DVR
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rok's embed -->
|
||||||
|
<div class="card">
|
||||||
|
<h2>2 · Rok embed (viprime.net)</h2>
|
||||||
|
<p class="desc">
|
||||||
|
Tokenizirani DVR URL · <b>OnAir/OffAir polling</b> (15s) · thumbnail fallback ·
|
||||||
|
watermark · native HTML5 controls (pause, scrubber, volume).
|
||||||
|
</p>
|
||||||
|
<div class="player-box">
|
||||||
|
<script src="https://livestream1.viprime.net/embed/stream1_dvr.js"></script>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
EMBED: https://livestream1.viprime.net/embed/stream1_dvr.js<br/>
|
||||||
|
STATUS API: /api/embed-status/stream1<br/>
|
||||||
|
MODE: DVR · Native controls · Auto on/off detect
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="section-head">Vsi 6 Rok-ovi embed-i</h2>
|
||||||
|
<p class="section-sub">
|
||||||
|
Stream 2-6 trenutno vrnejo OFFLINE (Rok jih še ni aktiviral). Polling jih bo avtomatsko vklopil ko bodo OnAir.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="channel-grid">
|
||||||
|
<% [
|
||||||
|
{n:1, name:'Folx TV', region:'DE/AT/CH'},
|
||||||
|
{n:2, name:'Adria MT', region:'AT/HR/SI'},
|
||||||
|
{n:3, name:'One Music TV', region:'AT/HR/SI'},
|
||||||
|
{n:4, name:'Zwei Music TV', region:'DE/AT'},
|
||||||
|
{n:5, name:'One Adria MT', region:'HR'},
|
||||||
|
{n:6, name:'Folx Slovenija', region:'SI'},
|
||||||
|
].forEach(ch => { %>
|
||||||
|
<div class="channel-card">
|
||||||
|
<div class="ch-num">CH 0<%= ch.n %></div>
|
||||||
|
<h3><%= ch.name %></h3>
|
||||||
|
<div style="font-size:11px;color:var(--text-muted);"><%= ch.region %></div>
|
||||||
|
<div class="ch-frame">
|
||||||
|
<script src="https://livestream1.viprime.net/embed/stream<%= ch.n %>_dvr.js"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% }) %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- HLS.js for our player -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
const video = document.getElementById('ourVideo');
|
||||||
|
const URL = 'https://folxplay.b-cdn.net/live/stream1_master.m3u8';
|
||||||
|
if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||||
|
video.src = URL;
|
||||||
|
video.play().catch(()=>{});
|
||||||
|
} else if (window.Hls && Hls.isSupported()) {
|
||||||
|
const hls = new Hls({ liveDurationInfinity: true, liveSyncDurationCount: 4 });
|
||||||
|
hls.loadSource(URL);
|
||||||
|
hls.attachMedia(video);
|
||||||
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||||
|
hls.levels.forEach(l => { if (l.height && l.height <= 480) l.enabled = false; });
|
||||||
|
video.play().catch(()=>{});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Block pause (Twitch-style)
|
||||||
|
video.addEventListener('pause', () => setTimeout(() => video.play().catch(()=>{}), 80));
|
||||||
|
video.addEventListener('contextmenu', e => e.preventDefault());
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user