Upload 3 files

studio/ads.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="sw"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Matangazo — JaynesTV Studio</title>
+<link rel="stylesheet" href="../shared.css">
+</head><body>
+<nav class="top">
+  <b style="color:var(--brand);margin-right:auto">JaynesTV Studio</b>
+  <a href="/studio">Studio</a><a class="on" href="/studio/ads">Matangazo</a><a href="/studio/settings">Mipangilio</a><a href="/live">Angalia Live</a>
+</nav>
+<div id="gate"></div>
+<main id="app" hidden style="max-width:1000px;margin:auto;padding:1rem">
+  <div class="card">
+    <h2 class="banner-title">Ongeza Tangazo</h2>
+    <form id="f">
+      <div class="grid2">
+        <div><label>Aina</label>
+          <select id="kind">
+            <option value="banner">Bango (picha + kiungo) — kila dakika 15</option>
+            <option value="ticker">Maandishi yanayopita chini ya video</option>
+            <option value="preroll">Video fupi kabla ya Live</option>
+          </select></div>
+        <div><label>Jina la tangazo</label><input id="title"></div>
+      </div>
+      <label>Maandishi (kwa ticker)</label><input id="body">
+      <label>Kiungo (link)</label><input id="link" type="url" placeholder="https://...">
+      <label>Faili: picha (bango) au video MP4 (pre-roll)</label>
+      <input id="file" type="file" accept="image/*,video/mp4">
+      <label>Muda wa kuonyeshwa (sekunde)</label>
+      <input id="dur" type="number" min="3" max="120" value="10">
+      <p id="fe" class="err"></p>
+      <button type="submit" style="margin-top:.8rem">Hifadhi tangazo</button>
+    </form>
+  </div>
+  <div class="card" style="overflow-x:auto">
+    <table>
+      <thead><tr><th>Aina</th><th>Jina / Maandishi</th><th>Muda</th><th>Hali</th><th></th></tr></thead>
+      <tbody id="rows"></tbody>
+    </table>
+  </div>
+</main>
+
+<script type="module">
+import { sb, requireAdmin, h } from "../common.js";
+const $ = id => document.getElementById(id);
+const KIND = { banner: "Bango", ticker: "Ticker", preroll: "Pre-roll" };
+
+async function load() {
+  const { data, error } = await sb.from("ads").select("*").order("created_at", { ascending: false });
+  if (error) return ($("rows").innerHTML = `<tr><td colspan="5" class="err">${h(error.message)}</td></tr>`);
+  $("rows").innerHTML = data.length ? data.map(a => `
+    <tr>
+      <td>${KIND[a.kind]}</td>
+      <td>${h(a.title || a.body || "—")}</td>
+      <td>${a.kind === "ticker" ? "—" : a.duration_sec + "s"}</td>
+      <td><button class="ghost" data-t="${a.id}" data-v="${!a.active}">${a.active ? "Zima" : "Washa"}</button></td>
+      <td><button class="danger" data-d="${a.id}">Futa</button></td>
+    </tr>`).join("")
+    : `<tr><td colspan="5" class="muted">Hakuna matangazo bado.</td></tr>`;
+}
+
+$("rows").onclick = async e => {
+  const t = e.target;
+  if (t.dataset.t) await sb.from("ads").update({ active: t.dataset.v === "true" }).eq("id", t.dataset.t);
+  else if (t.dataset.d) {
+    if (!confirm("Futa tangazo hili?")) return;
+    await sb.from("ads").delete().eq("id", t.dataset.d);
+  } else return;
+  load();
+};
+
+async function upload(file) {
+  const path = `${Date.now()}-${file.name.replace(/[^\w.-]/g, "_")}`;
+  const { error } = await sb.storage.from("ads").upload(path, file);
+  if (error) throw error;
+  return sb.storage.from("ads").getPublicUrl(path).data.publicUrl;
+}
+
+$("f").onsubmit = async e => {
+  e.preventDefault();
+  $("fe").textContent = "";
+  const kind = $("kind").value, file = $("file").files[0];
+  const body = $("body").value.trim();
+  let image_url = null, video_url = null;
+  try {
+    if (file) {
+      const url = await upload(file);
+      if (file.type.startsWith("video")) video_url = url; else image_url = url;
+    }
+  } catch (err) { return ($("fe").textContent = "Upload imeshindikana: " + err.message); }
+
+  if (kind === "banner" && !image_url) return ($("fe").textContent = "Bango linahitaji picha.");
+  if (kind === "preroll" && !video_url) return ($("fe").textContent = "Pre-roll inahitaji video ya MP4.");
+  if (kind === "ticker" && !body) return ($("fe").textContent = "Ticker inahitaji maandishi.");
+
+  const { error } = await sb.from("ads").insert({
+    kind, title: $("title").value || null, body: body || null, link_url: $("link").value || null,
+    image_url, video_url, duration_sec: Number($("dur").value) || 10, active: true
+  });
+  if (error) return ($("fe").textContent = error.message);
+  e.target.reset();
+  load();
+};
+
+await requireAdmin($("gate"), $("app"));
+load();
+</script>
+</body></html>

studio/index.html

@@ -1,19 +1,200 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<html lang="sw"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>JaynesTV Studio</title>
+<link rel="stylesheet" href="../shared.css">
+<style>
+.stage{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
+#preview{width:100%;height:100%;object-fit:cover;display:block}
+.plogo{position:absolute;top:10px;right:10px;width:72px;opacity:.9;pointer-events:none}
+.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
+.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem;text-align:center}
+.stat b{display:block;font-size:1.2rem;font-variant-numeric:tabular-nums;margin-top:.3rem}
+@media(max-width:600px){.stats{grid-template-columns:1fr}}
+</style></head>
+<body>
+<nav class="top">
+  <b style="color:var(--brand);margin-right:auto">JaynesTV Studio</b>
+  <a class="on" href="/studio">Studio</a><a href="/studio/ads">Matangazo</a><a href="/studio/settings">Mipangilio</a><a href="/live">Angalia Live</a>
+</nav>
+<div id="gate"></div>
+<main id="app" hidden style="max-width:1000px;margin:auto;padding:1rem">
+  <div class="stage">
+    <video id="preview" autoplay playsinline muted></video>
+    <img id="plogo" class="plogo" alt="" hidden>
+  </div>
+  <div class="row" style="margin:1rem 0">
+    <button id="btnCam">Washa Kamera</button>
+    <button id="btnLive" disabled>Anza Live</button>
+    <button id="btnStop" class="danger" disabled>Simamisha Live</button>
+  </div>
+  <div class="card">
+    <div class="grid2">
+      <div><label>Kamera</label>
+        <select id="facing"><option value="environment">Nyuma</option><option value="user">Mbele</option></select></div>
+      <div><label>Ubora</label>
+        <select id="quality"><option value="720p">720p</option><option value="480p">480p</option></select></div>
+    </div>
+    <div class="row" style="margin-top:.8rem">
+      <button id="btnMute" class="ghost" disabled>Zima sauti</button>
+      <span class="muted">Sauti: <b id="audioState">Imewashwa</b></span>
+    </div>
+  </div>
+  <div class="stats">
+    <div class="stat"><span class="muted">Hali</span><b id="status"></b></div>
+    <div class="stat"><span class="muted">Muda wa live</span><b id="timer">00:00:00</b></div>
+    <div class="stat"><span class="muted">Watazamaji</span><b id="viewers">—</b></div>
+  </div>
+  <p id="msg" class="err"></p>
+</main>
+<div id="toast" class="toast" hidden></div>
+
+<script type="module">
+import { requireAdmin, getSettings } from "../common.js";
+const $ = id => document.getElementById(id);
+const QUAL = { "480p": { width: 854, height: 480 }, "720p": { width: 1280, height: 720 } };
+const ST = {
+  idle: ["b-idle", "Imesimama"], conn: ["b-warn", "Inaunganisha…"],
+  live: ["b-live", "Unarusha"], off: ["b-bad", "Imekatika"], rec: ["b-warn", "Inaunganisha upya"]
+};
+let S = {}, stream = null, pc = null, whipRes = null, wantLive = false, startedAt = 0, retryT = null, muted = false;
+
+const setStatus = k => ($("status").innerHTML = `<span class="badge ${ST[k][0]}">${ST[k][1]}</span>`);
+const msg = t => ($("msg").textContent = t || "");
+function toast(t) {
+  const el = $("toast"); el.textContent = t; el.hidden = false;
+  clearTimeout(toast.t); toast.t = setTimeout(() => (el.hidden = true), 2500);
+}
+const fmt = s => [Math.floor(s / 3600), Math.floor((s % 3600) / 60), s % 60].map(n => String(n).padStart(2, "0")).join(":");
+const updateTimer = () => ($("timer").textContent = startedAt ? fmt(Math.floor((Date.now() - startedAt) / 1000)) : "00:00:00");
+
+function applyMute() {
+  stream?.getAudioTracks().forEach(t => (t.enabled = !muted));
+  $("audioState").textContent = muted ? "Imezimwa" : "Imewashwa";
+  $("btnMute").textContent = muted ? "Washa sauti" : "Zima sauti";
+}
+
+async function startCamera() {
+  if (!navigator.mediaDevices?.getUserMedia) return msg("Kivinjari hiki hakiruhusu kamera. Tumia HTTPS.");
+  try {
+    const q = QUAL[$("quality").value];
+    const next = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: { ideal: $("facing").value }, width: { ideal: q.width }, height: { ideal: q.height } },
+      audio: true
+    });
+    const old = stream;
+    stream = next;
+    $("preview").srcObject = stream;
+    applyMute();
+    if (pc) for (const t of stream.getTracks()) {
+      const s = pc.getSenders().find(x => x.track?.kind === t.kind || (!x.track && x.kind === t.kind));
+      if (s) await s.replaceTrack(t);
+    }
+    old?.getTracks().forEach(t => t.stop());
+    $("btnLive").disabled = wantLive;
+    $("btnMute").disabled = false;
+    $("btnCam").textContent = "Badilisha Kamera";
+    msg("");
+  } catch (e) {
+    msg("Imeshindikana kufungua kamera/maikrofoni: " + e.message);
+  }
+}
+
+const iceDone = pc => new Promise(res => {
+  if (pc.iceGatheringState === "complete") return res();
+  const check = () => {
+    if (pc.iceGatheringState === "complete") { pc.removeEventListener("icegatheringstatechange", check); res(); }
+  };
+  pc.addEventListener("icegatheringstatechange", check);
+  setTimeout(res, 3000);
+});
+
+function teardown() {
+  if (pc) { pc.onconnectionstatechange = null; pc.close(); pc = null; }
+}
+
+function retry() {
+  if (!wantLive) return;
+  setStatus("rec");
+  clearTimeout(retryT);
+  retryT = setTimeout(connect, 3000);
+}
+
+async function connect() {
+  clearTimeout(retryT);
+  teardown();
+  setStatus(startedAt ? "rec" : "conn");
+  try {
+    pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] });
+    stream.getTracks().forEach(t => pc.addTrack(t, stream));
+    pc.onconnectionstatechange = () => {
+      const s = pc?.connectionState;
+      if (s === "connected") { if (!startedAt) startedAt = Date.now(); setStatus("live"); msg(""); }
+      else if (s === "failed" || s === "disconnected" || s === "closed") { setStatus("off"); retry(); }
+    };
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    await iceDone(pc);
+    // WHIP: POST SDP kwenda WHIP_URL, jibu ni SDP ya answer; Location ni kiungo cha kufuta (DELETE) kikao
+    const res = await fetch(S.WHIP_URL, {
+      method: "POST", headers: { "Content-Type": "application/sdp" }, body: pc.localDescription.sdp
+    });
+    if (!res.ok) throw new Error("seva ilijibu " + res.status);
+    const loc = res.headers.get("Location");
+    whipRes = loc ? new URL(loc, S.WHIP_URL).href : null;
+    await pc.setRemoteDescription({ type: "answer", sdp: await res.text() });
+  } catch (e) {
+    msg("Muunganisho umeshindikana: " + e.message);
+    setStatus("off");
+    retry();
+  }
+}
+
+async function goLive() {
+  if (!stream) return toast("Washa kamera kwanza");
+  if (!S.WHIP_URL) return msg("WHIP_URL haijawekwa. Nenda kwenye Mipangilio.");
+  wantLive = true;
+  $("btnLive").disabled = true;
+  $("btnStop").disabled = false;
+  await connect();
+}
+
+async function stopLive() {
+  wantLive = false;
+  clearTimeout(retryT);
+  if (whipRes) fetch(whipRes, { method: "DELETE" }).catch(() => {});
+  whipRes = null;
+  teardown();
+  startedAt = 0;
+  updateTimer();
+  setStatus("idle");
+  $("btnLive").disabled = !stream;
+  $("btnStop").disabled = true;
+}
+
+async function pollViewers() {
+  if (!S.VIEWERS_URL) return;
+  try {
+    const j = await (await fetch(S.VIEWERS_URL, { cache: "no-store" })).json();
+    $("viewers").textContent = j.viewers ?? "—";
+  } catch {}
+}
+
+// Mwanzo
+await requireAdmin($("gate"), $("app"));
+S = await getSettings();
+if (S.LOGO_URL) { $("plogo").src = S.LOGO_URL; $("plogo").hidden = false; }
+setStatus("idle");
+updateTimer();
+setInterval(updateTimer, 1000);
+pollViewers();
+setInterval(pollViewers, 15000);
+
+$("btnCam").onclick = startCamera;
+$("btnLive").onclick = goLive;
+$("btnStop").onclick = stopLive;
+$("btnMute").onclick = () => { muted = !muted; applyMute(); };
+$("facing").onchange = $("quality").onchange = () => stream && startCamera();
+window.addEventListener("beforeunload", () => stopLive());
+</script>
+</body></html>

studio/settings.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="sw"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Mipangilio — JaynesTV Studio</title>
+<link rel="stylesheet" href="../shared.css">
+</head><body>
+<nav class="top">
+  <b style="color:var(--brand);margin-right:auto">JaynesTV Studio</b>
+  <a href="/studio">Studio</a><a href="/studio/ads">Matangazo</a><a class="on" href="/studio/settings">Mipangilio</a><a href="/live">Angalia Live</a>
+</nav>
+<div id="gate"></div>
+<main id="app" hidden style="max-width:700px;margin:auto;padding:1rem">
+  <div class="card">
+    <h2 class="banner-title">Mipangilio ya Live</h2>
+    <label>WHIP_URL (kiungo cha kutuma video)</label><input id="WHIP_URL" placeholder="https://...">
+    <label>LIVE_HLS_URL (kiungo cha HLS, .m3u8)</label><input id="LIVE_HLS_URL" placeholder="https://.../playlist.m3u8">
+    <label>SCHEDULE_URL (ratiba JSON)</label>
+    <input id="SCHEDULE_URL" placeholder="https://huggingface.co/datasets/jaynesmaxtv/movie-file/resolve/main/jaynestv/schedule.json">
+    <label>VIEWERS_URL (hiari — inarudisha {"viewers": n})</label><input id="VIEWERS_URL" placeholder="https://...">
+    <button id="save" style="margin-top:1rem">Hifadhi mipangilio</button>
+    <p id="msg" class="muted"></p>
+  </div>
+  <div class="card">
+    <h2 class="banner-title">Nembo</h2>
+    <p class="muted">Inaonekana kona ya juu kulia, skrini ya kupakia na skrini ya kuanza kucheza.</p>
+    <input id="logo" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml">
+    <img id="logoPrev" alt="" hidden style="max-width:160px;margin-top:1rem;background:#000;padding:.5rem;border-radius:10px">
+  </div>
+</main>
+
+<script type="module">
+import { sb, requireAdmin, getSettings, saveSetting } from "../common.js";
+const $ = id => document.getElementById(id);
+const KEYS = ["WHIP_URL", "LIVE_HLS_URL", "SCHEDULE_URL", "VIEWERS_URL"];
+const say = (t, ok = true) => { $("msg").className = ok ? "muted" : "err"; $("msg").textContent = t; };
+
+await requireAdmin($("gate"), $("app"));
+const S = await getSettings();
+KEYS.forEach(k => ($(k).value = S[k] || ""));
+if (S.LOGO_URL) { $("logoPrev").src = S.LOGO_URL; $("logoPrev").hidden = false; }
+
+$("save").onclick = async () => {
+  for (const k of KEYS) {
+    const { error } = await saveSetting(k, $(k).value.trim());
+    if (error) return say("Imeshindikana kuhifadhi " + k + ": " + error.message, false);
+  }
+  say("Imehifadhiwa ✔");
+};
+
+$("logo").onchange = async () => {
+  const f = $("logo").files[0];
+  if (!f) return;
+  const path = `logo-${Date.now()}.${f.name.split(".").pop()}`;
+  const { error } = await sb.storage.from("branding").upload(path, f);
+  if (error) return say("Upload ya nembo imeshindikana: " + error.message, false);
+  const url = sb.storage.from("branding").getPublicUrl(path).data.publicUrl;
+  const { error: e2 } = await saveSetting("LOGO_URL", url);
+  if (e2) return say("Imeshindikana kuhifadhi nembo: " + e2.message, false);
+  $("logoPrev").src = url;
+  $("logoPrev").hidden = false;
+  say("Nembo imehifadhiwa ✔");
+};
+</script>
+</body></html>